/* Sawtell Contracting NT — canonical brand: orange #F26321 + blue #1C6FC9 (equal primaries),
   Oswald headings / Barlow body (system fallbacks, no CDN). Source: _system/SCNT_brand_palette.json */
:root{
  --orange:#F26321; --orange-dark:#C44E18; --orange-tint:#FF8A4D;
  --blue:#1C6FC9; --blue-light:#4FA8E0; --blue-deep:#2A4B9B;
  --charcoal:#2D2D2D;
  --n0:#F5F7FA; --n1:#E2E6ED; --n2:#C7CDD9; --n3:#9AA3B2; --n4:#5C6472;
  --desert:#FBF4ED; --star-gold:#FBBC04;
  --ink:var(--charcoal); --bg:#fff;
  --font-head:"Oswald","Bahnschrift","Arial Narrow","Segoe UI",Arial,sans-serif;
  --font-body:"Barlow","Segoe UI",-apple-system,Roboto,Arial,sans-serif;
  --maxw:1120px; --radius:10px;
  --shadow:0 1px 2px rgba(45,45,45,.08),0 8px 24px rgba(45,45,45,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:1.06rem;line-height:1.6;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;margin:0 0 .5em;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(1.9rem,4.5vw,3rem);text-transform:uppercase}
h2{font-size:clamp(1.45rem,3vw,2.1rem);color:var(--blue-deep)}
h3{font-size:1.2rem}
p{margin:.4em 0 1em}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--blue-deep);color:#fff;padding:.6em 1em;z-index:100}
.skip:focus{left:8px;top:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--orange);box-shadow:0 1px 6px rgba(45,45,45,.12)}
.site-header .bar{display:flex;align-items:center;gap:18px;padding:10px 20px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand img{height:52px;width:auto}
.nav-toggle{display:none}
.nav-toggle-label{display:none;cursor:pointer;padding:10px;margin-left:auto;border-radius:6px}
.nav-toggle-label span,.nav-toggle-label span::before,.nav-toggle-label span::after{
  display:block;width:26px;height:3px;background:var(--blue-deep);border-radius:2px;position:relative;content:"";transition:transform .15s}
.nav-toggle-label span::before{position:absolute;top:-8px}
.nav-toggle-label span::after{position:absolute;top:8px}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center}
.site-nav a{display:block;padding:.55em .8em;text-decoration:none;color:var(--ink);font-weight:600;border-radius:6px;position:relative}
.site-nav a:hover{color:var(--blue)}
.site-nav a:not(.btn)::after{content:"";position:absolute;left:.8em;right:.8em;bottom:5px;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.site-nav a:not(.btn):hover::after,.site-nav a:not(.btn):focus-visible::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{color:var(--blue);box-shadow:inset 0 -3px 0 var(--orange)}
/* Signature skew: parallelogram buttons (-12deg — the site's one angle, from the SCNT badge).
   The skew lives on ::before so the label stays upright and focus outlines stay visible. */
.btn{position:relative;isolation:isolate;display:inline-block;padding:.72em 1.5em;font-family:var(--font-head);font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.03em;text-decoration:none;border:0;background:transparent;cursor:pointer;text-align:center}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:3px;
  transition:background .15s ease,border-color .15s ease}
.btn[disabled]{opacity:.65;cursor:default}
.btn-call{color:#fff !important}
.btn-call::before{background:var(--orange)}
.btn-call:hover::before{background:var(--orange-dark)}
.btn-outline{color:#fff !important}
.btn-outline::before{background:transparent;border:2px solid #fff}
.btn-outline:hover::before{background:rgba(255,255,255,.15)}
.btn-blue{color:#fff !important}
.btn-blue::before{background:var(--blue)}
.btn-blue:hover::before{background:var(--blue-deep)}
.header-call{white-space:nowrap}
@media (max-width:880px){
  .header-call{display:none}
  .nav-toggle-label{display:block}
  .site-nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:3px solid var(--orange);display:none;box-shadow:var(--shadow)}
  .site-nav ul{flex-direction:column;align-items:stretch;padding:8px 14px 14px}
  .site-nav a{padding:.8em .6em;border-bottom:1px solid var(--n1)}
  .nav-toggle:checked ~ .site-nav{display:block}
  .nav-toggle:checked ~ .nav-toggle-label span{transform:rotate(45deg)}
  .nav-toggle:checked ~ .nav-toggle-label span::before{transform:rotate(-90deg);top:0}
  .nav-toggle:checked ~ .nav-toggle-label span::after{opacity:0}
}

/* ---------- Hero (canonical blue gradient) ---------- */
.hero{background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue) 55%,var(--blue-light) 100%);color:#fff;
  padding:clamp(2.4rem,6vw,4.5rem) 0 calc(clamp(2.4rem,6vw,4.5rem) + 2.2vw);position:relative;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 2.2vw),0 100%)}
.hero::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,99,33,.35),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;display:grid;gap:28px;grid-template-columns:1.2fr .8fr;align-items:center}
.hero.hero-plain .wrap{grid-template-columns:1fr}
.hero h1{color:#fff;margin-bottom:.35em;font-size:clamp(2rem,1.2rem + 3vw,3.4rem);line-height:1.06;letter-spacing:.005em}
.hero .lede{font-size:1.15rem;max-width:56ch;color:#EAF2FB}
.hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 1.2em}
.hero-points li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);padding:.35em .85em;
  border-radius:999px;font-weight:600;font-size:.95rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:.4em}
.hero-cta .btn{font-size:1.12rem}
.hero-img img{border-radius:14px;box-shadow:0 10px 30px rgba(21,34,56,.4)}
.hero-sub{color:#DCE9F7;font-size:.98rem;margin-top:.9em}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero-img{display:none}}

/* ---------- Home: compact hero + instant-path tiles + straight answers ---------- */
.hero-compact{padding:clamp(1.5rem,4vw,3.4rem) 0}
.hero-compact h1{font-size:clamp(1.7rem,.9rem + 4vw,3.4rem)}
.hero-trustline{color:#F2F7FC;font-weight:600;font-size:.98rem;margin:.4em 0 1em}
/* Safety net: any non-button link on a dark surface renders white + underlined */
.hero a:not(.btn),.cta-band a:not(.btn),.lead-sec a:not(.btn){color:#fff;text-decoration:underline}
.btn-big{font-size:1.2rem;padding:.85em 1.5em}
.need-tiles{padding:clamp(1.1rem,2.5vw,2rem) 0 clamp(1.3rem,3vw,2.4rem)}
.tiles-h{font-size:clamp(1.2rem,2.5vw,1.6rem);margin-bottom:.55em}
.tiles{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:92px;padding:12px 14px;
  background:#fff;border:2px solid var(--n1);border-top:4px solid var(--blue);border-radius:var(--radius);
  text-decoration:none;color:var(--ink);font-weight:700;line-height:1.25;box-shadow:var(--shadow);
  transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease}
.tile:hover{transform:translateY(-2px);border-color:var(--orange);border-top-color:var(--orange);box-shadow:0 8px 20px rgba(45,45,45,.16)}
.tile:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.tile-ico{display:inline-flex;color:var(--blue)}
.tile-ico svg{width:26px;height:26px}
.tile-urgent .tile-ico{color:#fff}
.tile-badge{background:var(--orange);color:#fff;font-family:var(--font-head);font-size:.75rem;
  padding:2px 9px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase}
.tile-urgent{background:var(--orange);border-color:var(--orange-dark);border-top-color:var(--orange-dark);color:#fff}
.tile-urgent:hover{border-color:#fff;border-top-color:#fff}
.tile-urgent .tile-badge{background:#fff;color:var(--orange-dark)}
.answers{background:var(--n0);padding:14px 0;border-top:1px solid var(--n1);border-bottom:1px solid var(--n1)}
.answers ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;margin:0 auto;
  padding:0 20px;max-width:var(--maxw);font-weight:600;font-size:.98rem}
.answers li::before{content:"✓ ";color:var(--orange);font-weight:800}

/* ---------- Trust strip (real credentials only) ---------- */
.trust{background:var(--charcoal);color:#fff;padding:14px 0}
.trust ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin:0;padding:0 20px;
  max-width:var(--maxw);margin-inline:auto;font-size:.92rem}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--orange);flex-shrink:0}

/* ---------- Sections ---------- */
main{display:block}
.sec{padding:clamp(2.2rem,5vw,3.6rem) 0}
.sec-alt{background:var(--n0)}
.sec-intro{max-width:75ch}
.kicker{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;color:var(--orange);font-size:.85rem;font-weight:600;margin:0 0 .4em}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:#fff;border:1px solid var(--n1);border-top:4px solid var(--blue);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow)}
.card h3{color:var(--blue-deep)}
.card.accent{border-top-color:var(--orange)}
/* Whole-card click target (stretched-link, no JS) — matches the old site's clickable boxes */
.card-link{position:relative;cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease}
.card-link h3 a{color:inherit;text-decoration:none}
.card-link h3 a::after{content:"";position:absolute;inset:0}
.card-link .go{color:var(--orange);font-weight:800;font-family:var(--font-head);font-size:1.15rem}
.card-link:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(45,45,45,.18);border-top-color:var(--orange)}
.card-link:focus-within{outline:3px solid var(--orange);outline-offset:2px}
.card-link h3 a:focus-visible{outline:none}
.checklist{list-style:none;padding:0;margin:.4em 0 1em}
.checklist li{padding:.28em 0 .28em 1.7em;position:relative}
.checklist li::before{content:"✓";position:absolute;left:0;top:.28em;color:var(--orange);font-weight:800}
.cols-2{columns:2;column-gap:40px}
@media (max-width:700px){.cols-2{columns:1}}
.split{display:grid;gap:34px;grid-template-columns:1.1fr .9fr;align-items:center}
.split img{border-radius:14px;box-shadow:var(--shadow)}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.steps{list-style:none;counter-reset:step;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps li{counter-increment:step;background:#fff;border:1px solid var(--n1);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.steps li::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:2.1em;height:2.1em;
  border-radius:50%;background:var(--orange);color:#fff;font-family:var(--font-head);font-size:1.05rem;margin-bottom:.6em}
.steps h3{margin-bottom:.3em}
table{border-collapse:collapse;width:100%;margin:1em 0}
.table-scroll{overflow-x:auto}
th,td{border:1px solid var(--n1);padding:.6em .8em;text-align:left}
th{background:var(--blue-deep);color:#fff;font-family:var(--font-head);font-weight:500;letter-spacing:.03em}
tbody tr:nth-child(even){background:var(--n0)}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--n1);border-radius:var(--radius);margin-bottom:10px;background:#fff}
.faq summary{cursor:pointer;padding:14px 18px;font-weight:700;font-family:var(--font-head);font-size:1.05rem;list-style:none;position:relative;padding-right:2.6em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--orange);font-size:1.5rem;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 18px 14px;border-top:1px solid var(--n1);padding-top:12px}

/* ---------- Lead form ---------- */
.lead-sec{background:linear-gradient(135deg,var(--blue-deep),var(--blue));color:#fff}
.lead-sec h2{color:#fff}
.lead-sec .sec-intro{color:#EAF2FB}
.lead-form{max-width:640px;display:grid;gap:14px;margin-top:1.2em}
.lead-form .row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.lead-form .row{grid-template-columns:1fr}}
.lead-form label{font-weight:600;display:block;margin-bottom:.3em}
.lead-form input,.lead-form textarea{width:100%;padding:.7em .8em;border:1px solid var(--n2);border-radius:8px;
  font:inherit;color:var(--ink);background:#fff}
.lead-form textarea{min-height:110px;resize:vertical}
.lead-form button{justify-self:start;font-size:1.1rem}
.hp{position:absolute;left:-9999px;height:1px;overflow:hidden}
.form-note{font-size:.98rem;color:#EAF2FB}
.form-note a{color:#fff;font-weight:700}
.form-status{font-weight:700;padding:.7em 1em;border-radius:8px;display:none}
.form-status.ok{display:block;background:#1E8A5B;color:#fff}
.form-status.err{display:block;background:#E8401F;color:#fff}

/* ---------- Google reviews (real reviews quoted; no external embeds) ----------
   Warm desert band with the site's diagonal cuts; honest presentation only —
   aggregate 4.9/11 VERIFIED from Dave's Google Business dashboard 2026-08-09;
   no verification badges, initials are initials. */
.reviews{background:var(--desert);
  clip-path:polygon(0 2.2vw,100% 0,100% calc(100% - 2.2vw),0 100%);
  padding-top:calc(clamp(2.2rem,5vw,3.6rem) + 2.4vw);
  padding-bottom:calc(clamp(2.2rem,5vw,3.6rem) + 2.4vw)}
.review-card{background:#fff;border:1px solid var(--n1);border-top:4px solid var(--orange);border-radius:var(--radius);
  padding:20px 22px;margin:0;
  box-shadow:0 2px 4px rgba(45,45,45,.06),0 14px 34px rgba(45,45,45,.13);
  transition:transform .18s ease,box-shadow .18s ease}
.review-card:hover{transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(45,45,45,.09),0 22px 46px rgba(45,45,45,.18)}
.review-card figcaption{display:flex;align-items:center;gap:12px;margin-bottom:.7em}
/* Coloured initial avatars (real-Google style; the initial is just the initial) */
.rev-avatar{position:relative;width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  font-family:var(--font-head);font-weight:600;font-size:1.25rem}
.rev-av1{background:#7B1FA2}.rev-av2{background:#00796B}.rev-av3{background:#C2185B}.rev-av4{background:#3949AB}
.rev-av5{background:#2E7D32}.rev-av6{background:#C62828}.rev-av7{background:#5D4037}.rev-av8{background:#0277BD}
.rev-av9{background:#455A64}.rev-av10{background:#00838F}
/* Verified aggregate line under the section heading (4.9 · 11 confirmed 2026-08-09) */
.rev-agg{margin:-.3em 0 1.2em;font-size:1.06rem;color:var(--ink)}
.rev-agg strong{font-family:var(--font-head);font-weight:600;font-size:1.2em}
.rev-agg .agg-star{color:var(--star-gold);font-size:1.15em}
.rev-avatar .g-mark{position:absolute;right:-5px;bottom:-5px;width:21px;height:21px;font-size:.66rem;
  border:2px solid #fff}
.rev-who{display:flex;flex-direction:column;gap:3px;line-height:1.25;min-width:0}
.rev-who strong{font-size:1.04rem}
.rev-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
/* Decorative opening-quote motif in brand blue behind/above the quoted text */
.review-card blockquote{margin:0;position:relative}
.review-card blockquote::before{content:"\201C";position:absolute;top:-.3em;left:-.06em;z-index:0;
  font-family:Georgia,"Times New Roman",serif;font-size:3.6rem;line-height:1;color:var(--blue);opacity:.18;pointer-events:none}
.review-card blockquote p{position:relative;z-index:1;margin:0;font-style:normal;color:var(--ink);
  font-size:1rem;line-height:1.55}
.stars{color:var(--orange);letter-spacing:.12em;font-size:1.02em;white-space:nowrap}
.review-card .stars{display:inline-block;color:var(--star-gold);font-size:1.28rem;letter-spacing:.1em}
.g-mark{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;border-radius:50%;
  background:var(--blue);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.95rem;flex-shrink:0}
.g-label{color:var(--n4);font-size:.88rem}
.reviews-cta{margin-top:1.6em;justify-content:center}
/* One-time star settle when the section scrolls into view (JS adds .rev-inview once) */
@media (prefers-reduced-motion:no-preference){
  @keyframes starSettle{0%{transform:scale(.6);opacity:.3}55%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}
  .rev-inview .review-card .stars{animation:starSettle .5s cubic-bezier(.2,.7,.3,1) both}
  .rev-inview .review-card:nth-child(2) .stars{animation-delay:.12s}
  .rev-inview .review-card:nth-child(3) .stars{animation-delay:.24s}
  .rev-inview .review-card:nth-child(4) .stars{animation-delay:.36s}
}
/* Carousel: CSS scroll-snap track — swipe natively, arrows nudge one card, scrollbar hidden
   but the track stays keyboard-scrollable (tabindex + focus ring). */
.rev-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;
  scrollbar-width:none}
.rev-track::-webkit-scrollbar{display:none}
.rev-track .review-card{flex:0 0 100%;scroll-snap-align:start}
@media (min-width:760px){.rev-track .review-card{flex:0 0 calc((100% - 32px)/3)}}
.rev-track:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:no-preference){.rev-track{scroll-behavior:smooth}}
.rev-controls{display:flex;gap:10px;margin-top:.9em;justify-content:center}
.rev-btn{position:relative;isolation:isolate;width:48px;height:40px;border:0;background:transparent;color:#fff;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.rev-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:3px;
  background:var(--blue);transition:background .15s ease}
.rev-btn:hover::before{background:var(--blue-deep)}
.rev-btn svg{width:22px;height:22px}
.reviews-strip{background:var(--charcoal);color:#fff;text-align:center;padding:13px 20px}
.reviews-strip p{margin:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}
.reviews-strip a{color:#fff;font-weight:600}

/* ---------- CTA band ---------- */
.cta-band{background:var(--charcoal);color:#fff;text-align:center;
  clip-path:polygon(0 2.2vw,100% 0,100% 100%,0 100%);padding-top:calc(clamp(2.2rem,5vw,3.6rem) + 2.4vw)}
.cta-band h2{color:#fff}
.cta-band .lede{max-width:70ch;margin-inline:auto;color:var(--n1)}
.cta-band .promise{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--orange-tint);margin:.8em 0 1.2em}
.cta-band .hero-cta{justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--blue-deep);color:#DCE9F7;padding:44px 0 90px;font-size:.98rem}
.site-footer h3{color:#fff;font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em}
.site-footer .grid-3{align-items:start}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.35em 0}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.25);margin-top:30px;padding-top:16px;text-align:center;color:#B9CDE6;font-size:.9rem}

/* ---------- Sticky mobile call bar ---------- */
.callbar{display:none}
@media (max-width:880px){
  .callbar{display:grid;grid-template-columns:1.2fr 1fr;gap:1px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    box-shadow:0 -3px 12px rgba(45,45,45,.25)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:.95em .5em;
    font-family:var(--font-head);font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em;text-decoration:none}
  .callbar .cb-call{background:var(--orange);color:#fff}
  .callbar .cb-quote{background:var(--blue-deep);color:#fff}
  body{padding-bottom:58px}
}
/* ---------- Pass-2 design system: skew DNA, motion, desert range, premium footer ---------- */
/* Angled orange accent bar on every section heading (same -12deg as the buttons) */
main h2::before{content:"";display:block;width:46px;height:6px;margin-bottom:.5em;border-radius:1px;
  background:var(--orange);transform:skewX(-12deg)}
.cta-band h2::before{margin-inline:auto}

/* Warm desert tint bands (home Why-Choose + reviews) */
.sec-warm{background:var(--desert)}

/* Hero photo: offset orange slab behind the image — photo swap stays a one-file change */
.hero-img{position:relative;isolation:isolate}
.hero-img::before{content:"";position:absolute;right:-14px;bottom:-14px;width:62%;height:58%;
  background:var(--orange);transform:skewX(-12deg);border-radius:8px;z-index:-1;opacity:.95}

/* Desert range silhouette — the one local touch, directly above the footer */
.range{line-height:0;margin-bottom:-1px}
.range svg{display:block;width:100%;height:clamp(26px,5vw,64px)}

/* Premium footer: brand / services / contact / credentials columns */
.footer-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px;align-items:start}
.footer-brand img{background:#fff;padding:8px 12px;border-radius:8px;margin-bottom:.6em}
.footer-brand .btn{margin-top:.5em}
.site-footer h3::before{content:"";display:block;width:30px;height:4px;margin-bottom:.5em;border-radius:1px;
  background:var(--orange);transform:skewX(-12deg)}
.footer-creds{font-size:.92rem}

/* Motion: once-on-load hero settle + underline-grow; honours prefers-reduced-motion */
@media (prefers-reduced-motion:no-preference){
  @keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  .hero h1{animation:heroRise .55s cubic-bezier(.2,.7,.3,1) both}
  .hero .lede,.hero .hero-points{animation:heroRise .55s .12s cubic-bezier(.2,.7,.3,1) both}
  .hero .hero-trustline{animation:heroRise .55s .18s cubic-bezier(.2,.7,.3,1) both}
  .hero .hero-cta,.hero .hero-sub{animation:heroRise .55s .26s cubic-bezier(.2,.7,.3,1) both}
  .hero-img{animation:heroRise .65s .2s cubic-bezier(.2,.7,.3,1) both}
}
@media (prefers-reduced-motion:reduce){
  .tile,.card-link,.btn::before,.site-nav a:not(.btn)::after,.review-card{transition:none}
  .review-card:hover{transform:none}
}

/* ---------- Real-work photo figures (real site photos, captioned) ---------- */
.photo-row{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:1.5em;align-items:start}
.ph{margin:1.5em 0 0}
.photo-row .ph{margin:0}
.ph img{width:100%;border-radius:14px;box-shadow:var(--shadow)}
/* Two-up evidence thumbnails (thermal scans etc.): cap height so a portrait source reads as
   a supporting photo beside the copy, not a full-bleed panel. object-fit:cover + a top-biased
   default object-position keeps the camera's spot-temperature readout in frame (most of our
   thermal crops carry their key marker in the upper-middle third); figures whose caption also
   cites a lower marker set object-position inline per-image. Never re-tones the source image -
   crop/scale only. */
.photo-row .ph img{height:clamp(190px,20vw,280px);object-fit:cover;object-position:center 38%}
.ph figcaption{font-size:.92rem;color:var(--n4);margin-top:.55em;line-height:1.45}
.sec-alt .ph figcaption{color:var(--n4)}

/* ---------- Signature offer blocks (Dave-approved 2026-08-09): The Thermal Safety Check +
   Capped-Price Small Jobs. Wording law: "one of the few" — never "the only".
   No prices shown — the blocks sell the offer; pricing stays "free quote". ---------- */
.offer-card{position:relative;isolation:isolate;display:grid;gap:clamp(20px,3.5vw,36px);grid-template-columns:1.15fr .85fr;
  align-items:center;border-radius:var(--radius);padding:clamp(22px,4vw,40px)}
.offer-card>div{min-width:0}
.offer-thermal{background:var(--charcoal);color:#fff;
  box-shadow:0 3px 6px rgba(45,45,45,.12),0 18px 42px rgba(45,45,45,.24)}
.offer-thermal h2,.offer-thermal h3{color:#fff}
.offer-thermal h3{font-size:1.45rem}
.offer-thermal h3::before{content:"";display:block;width:46px;height:6px;margin-bottom:.5em;border-radius:1px;
  background:var(--orange);transform:skewX(-12deg)}
.offer-thermal .kicker{color:var(--orange-tint)}
.offer-thermal p{color:var(--n1)}
.offer-thermal a:not(.btn){color:#fff}
.offer-mini{grid-template-columns:1fr;margin-top:1.6em}
.offer-ph{margin:0;position:relative;isolation:isolate}
.offer-ph img{width:100%;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.offer-ph::before{content:"";position:absolute;right:-10px;top:-10px;width:56%;height:46%;
  background:var(--orange);transform:skewX(-12deg);border-radius:8px;z-index:-1;opacity:.95}
.offer-ph figcaption{font-size:.9rem;color:var(--n2);margin-top:.6em;line-height:1.45}
.offer-more{font-size:.98rem;margin-top:.9em}
.offer-cap{background:var(--desert);border:1px solid var(--n1);border-top:4px solid var(--orange);
  grid-template-columns:1fr;box-shadow:var(--shadow)}
/* Customer Accounts: businesses + home owners, deliberately generic (blue accent) */
.offer-trade{background:#fff;border:1px solid var(--n1);border-top:4px solid var(--blue);
  grid-template-columns:1fr;box-shadow:var(--shadow)}
/* Tight numbered how-it-works inside offer cards (compact form of the .steps counters) */
.offer-steps{list-style:none;counter-reset:ostep;margin:.2em 0 1em;padding:0}
.offer-steps li{counter-increment:ostep;padding:.34em 0 .34em 2.2em;position:relative}
.offer-steps li::before{content:counter(ostep);position:absolute;left:0;top:.38em;width:1.55em;height:1.55em;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--orange);color:#fff;font-family:var(--font-head);font-size:.92rem}
.offer-duo{display:grid;gap:20px;grid-template-columns:1fr 1fr;align-items:stretch}
.offer-lede{font-size:1.13rem;max-width:60ch}
.offer-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:.6em}
.offer-card[id]{scroll-margin-top:86px}
@media (max-width:820px){.offer-card{grid-template-columns:1fr}.offer-duo{grid-template-columns:1fr}}

/* Compact spec strip: reuses .checklist (no new list styling) inside a light panel */
.spec-strip{background:var(--desert);border:1px solid var(--n1);border-top:4px solid var(--orange);
  border-radius:var(--radius);padding:clamp(18px,3vw,28px) clamp(18px,4vw,32px);margin-top:1.6em}
.spec-strip h3{margin:0 0 .2em}
.spec-strip .checklist{margin:.6em 0 0}

@media print{.callbar,.site-header,.site-footer,.lead-sec{display:none}}

/* offer-card proof image: keep it beside the words, never eclipsing them */
.offer-card img{max-height:clamp(220px,24vw,340px);width:auto;object-fit:contain}