/* Clear View Glass & Tint — site stylesheet. No framework, no build step. */

/* Per-element layout values copied from the live builder must not pass down to children: a column's
   --mt:0px would otherwise reach the headings inside it (whose --mt is a unitless px count) and wipe their margins,
   and a nested column would take its parent's gutters and order. */
@property --mt{syntax:"*";inherits:false}
@property --mb{syntax:"*";inherits:false}
@property --mt-s{syntax:"*";inherits:false}
@property --mb-s{syntax:"*";inherits:false}
@property --sp{syntax:"*";inherits:false}
@property --spr{syntax:"*";inherits:false}
@property --o-m{syntax:"*";inherits:false}
@property --o-s{syntax:"*";inherits:false}
@property --w{syntax:"*";inherits:false}
@property --w-m{syntax:"*";inherits:false}
@property --w-s{syntax:"*";inherits:false}

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"Lato";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/lato-400.woff2) format("woff2")}
@font-face{font-family:"Lato";font-weight:400;font-style:italic;font-display:swap;src:url(/assets/fonts/lato-400-italic.woff2) format("woff2")}
@font-face{font-family:"Lato";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/lato-700.woff2) format("woff2")}
@font-face{font-family:"Lato";font-weight:700;font-style:italic;font-display:swap;src:url(/assets/fonts/lato-700-italic.woff2) format("woff2")}

/* ---------- tokens ---------- */
:root{
  --yellow:#fec746; --yellow-soft:#fff1cc; --yellow-ink:#8a6200;
  --blue:#3d66ae; --blue-dark:#2c4f8c;
  --ink:#222; --text:#4f4f4f; --muted:#6b6b6b;
  --tint:#f5fcff; --tint-2:#f2f3f5; --line:#e2e2e2; --white:#fff;
  --radius:10px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --head:"Poppins",Arial,Helvetica,sans-serif; --body:"Lato",Arial,Helvetica,sans-serif;
  --wrap:1200px; --gap:40px; /* 1140px of content inside 30px gutters, as live */
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 16px/1.8 var(--body);color:var(--text);background:var(--white)}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--yellow);text-decoration:none}
a:hover{color:var(--yellow)}
/* Headings follow the old builder exactly: base sizes 60/44/28/22/18/16 and its responsive rule, which below
   1024px shrinks a heading of base S to 16 + (S-16) x (0.6152 + 0.0003758 x viewport width). Title headings
   carry their own base size and spacing from the live site in style="--fs:..;--lh:..;--mt:..;--mb:.." */
h1,h2,h3,h4,h5,h6{font-family:var(--head);font-weight:600;color:var(--ink);letter-spacing:-.015em;margin:0 0 .6em;
  --f:var(--fs,var(--fs0));font-size:min(calc(var(--f)*1px),calc(16px + (var(--f) - 16)*.6152px + (var(--f) - 16)*.03758vw));
  line-height:var(--lh,var(--lh0))}
h1{--fs0:60;--lh0:1.5;margin:0}
h2{--fs0:44;--lh0:1.2;margin:0}
h3{--fs0:28;--lh0:1.2;margin:1em 0}
h4{--fs0:22;--lh0:1.36;margin:1.33em 0}
h5{--fs0:18;--lh0:1.4;margin:1.67em 0}
h6{--fs0:16;--lh0:1.5;margin:2.33em 0}
p{margin:0 0 20px}
/* content lists as on live (the browser defaults the builder keeps) */
ul,ol{margin:1em 0;padding-left:40px}
li{margin-bottom:0}
table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:15px}
/* a long unbroken string (email, URL) in body text wraps instead of pushing past a phone screen */
p,li,dd,blockquote,figcaption,label{overflow-wrap:break-word}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--tint-2);color:var(--ink);font-family:var(--head);font-weight:600}
blockquote{margin:0 0 1.2em;padding:4px 0 4px 20px;border-left:4px solid var(--yellow)}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}
/* builder separators sit in flex columns, so their spacing never overlaps a neighbour's margin: the space is
   part of the element (height), with the 1px line drawn --sep-mt down */
hr.sep{border:0;margin:0 auto;width:var(--sep-w,100%);max-width:100%;height:calc(var(--sep-mt,10px) + 1px + var(--sep-mb,10px));
  background:linear-gradient(var(--sep-c,var(--line)),var(--sep-c,var(--line))) 0 var(--sep-mt,10px)/100% 1px no-repeat}
.i{width:1em;height:1em;fill:currentColor;flex:none;vertical-align:-.125em}
.i-yellow{color:var(--yellow);width:1.35em;height:1.35em;vertical-align:-.3em;margin-right:4px}
.center{text-align:center}
.right{text-align:right}
/* colour utilities = the builder's palette (color1 white, 2 tint, 3 grey, 4 yellow, 5 blue, 7 text, 8 ink) */
.t-white,.t-white h1,.t-white h2,.t-white h3,.t-white p{color:#fff!important}
.t-tint{color:var(--tint)!important}
.t-grey{color:var(--tint-2)!important}
.t-yellow,.t-brand{color:var(--yellow)!important}
.t-blue{color:var(--blue)!important}
.t-text{color:var(--text)!important}
.t-ink{color:var(--ink)!important}
.cap{text-transform:capitalize}
.t2{font-family:var(--body)!important;font-weight:700!important;letter-spacing:0}
.w400{font-weight:400}
[style*="--ls"]{letter-spacing:var(--ls)}
.up{text-transform:uppercase}
.nocase{text-transform:none}
[style*="--tsh"]{text-shadow:var(--tsh)!important}
.hl{color:var(--yellow)}
.hl-blue{color:var(--blue)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:10px 16px}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 18px}
/* live stacks buttons 68px apart (each sits in its own 48px line plus 20px) */
.sec.hero .btns{row-gap:25px;column-gap:62px}
.bg-cta .btns{row-gap:21px}
.bg-cta .btns{margin-top:26px}
.center>.btns,.btns.center,.col.center .btns,.center~.btns,.center~.col>.btns,.bg-cta .btns{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 29px;border-radius:50px;border:0;
  background:var(--yellow);color:#fff;font:700 14px/17px var(--head);letter-spacing:.015em;text-transform:uppercase;text-align:center;
  text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--blue);color:#fff}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--yellow);color:#fff}
/* the live "call" buttons: white with a 2px blue ring */
.btn--white{background:#fff;color:var(--text);border:2px solid var(--blue)}
.btn--white:hover{background:var(--blue);color:#fff}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--yellow);color:var(--ink)}

/* ---------- top bar + header (live: 48px yellow bar; 144px header, not sticky; Lato bold nav) ---------- */
.topbar{background:var(--yellow);font:12px/21.6px var(--body)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
.toplinks{display:flex;gap:20px}
.toplinks a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:10px;min-height:28px}
.toplinks a:hover{color:var(--blue)}
.topcalls{display:flex;gap:16px}
.pill{display:inline-flex;align-items:center;background:var(--blue);color:#fff;text-decoration:none;padding:9px 20px;border-radius:50px;
  font:700 12px/14px var(--head);text-transform:uppercase;letter-spacing:.015em}
.pill:hover{background:var(--yellow);color:#fff}
.reviews-banner{display:none;margin:15px 0;padding:0;text-align:center;color:#fff;font:600 15px/18px var(--head);letter-spacing:.05px;text-transform:uppercase}

.site-header{position:relative;z-index:50;background:#fff}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:144px;gap:24px}
.logo{display:block;line-height:0;padding:3px 0}
.logo img{width:240px;height:auto}
.logo .logo-w{display:none}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.nav li{position:relative;margin:0}
.nav a{display:block;padding:10px 12px;color:var(--text);text-decoration:none;font:700 16px/28.8px var(--body);text-transform:uppercase;letter-spacing:.015em}
.nav a:hover,.nav a[aria-current="page"]{color:var(--blue)}
.nav .has-sub{display:flex;align-items:center}
/* chevron where it was, in a 28px tap area (tablets in landscape get the desktop menu) */
.sub-toggle{background:none;border:0;padding:6px 8px;margin:0 -4px 0 -16px;color:var(--text);cursor:pointer;font-size:12px}
.sub{list-style:none;margin:0;padding:10px 0;position:absolute;top:100%;left:0;min-width:260px;background:#fff;border-top:3px solid var(--yellow);
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.sub a{text-transform:none;color:#212934;padding:12px 20px}
/* short desktop screens (netbooks, 1024x600): the 9-item Services dropdown must end above the bottom edge */
@media (min-width:961px) and (max-height:700px){.nav .sub a{padding-top:5px;padding-bottom:5px}}
.nav>ul>li:last-child .sub{left:auto;right:0}
.has-sub:hover>.sub,.has-sub:focus-within>.sub,.has-sub.open>.sub{opacity:1;visibility:visible;transform:none}
.nav-toggle{display:none;align-items:center;gap:10px;background:#fff;border:0;font:700 18px var(--body);color:#4a4e57;cursor:pointer;padding:12px 0 12px 20px}
/* Home, Gilbert, Tucson use the other live header: a larger MENU on a clear background */
.site-header--over .nav-toggle{background:none;font-size:20px}
.nav-toggle .i{font-size:18px}
.nav-toggle .i-close,.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:inline-block}
/* Home, Gilbert, Tucson: on desktop the header floats over the hero photo with the white logo */
@media (min-width:641px){
  .site-header--over{position:absolute;left:0;right:0;background:transparent}
  .site-header--over .logo img{display:none}
  .site-header--over .logo .logo-w{display:block}
}

/* ---------- breadcrumbs ---------- */
/* live: a 57px white bar between two 1px #e2e2e2 lines */
.crumbs{font-size:14px;line-height:25px;padding:15px 0;background:#fff;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li{margin:0}
.crumbs li+li::before{content:"\00BB";margin-right:6px;color:var(--text)}
.crumbs a{color:var(--text);text-decoration:none}
.crumbs a:hover{color:var(--yellow)}

/* ---------- sections ---------- */
/* Page sections carry the live builder's own padding (desktop / tablet <=1024 / phone <=640) and background,
   copied by build/sync_sections.py. Sections made here (blog, gallery) use the plain default. */
.sec{padding:64px 0;position:relative}
.sec[style*="--pt"]{padding:var(--pt) 0 var(--pb);margin-top:var(--mt0,0)}
/* sections whose builder container has its own side padding (e.g. 0 = edge to edge on phones) */
.sec[style*="--wp"]>.wrap{padding-left:var(--wpl,30px);padding-right:var(--wpr,30px);max-width:calc(1140px + var(--wpl,30px) + var(--wpr,30px))}
@media (max-width:1024px){.sec[style*="--pt"]{padding:var(--pt-m,var(--pt)) 0 var(--pb-m,var(--pb))}}
/* a negative bottom margin lets the next section overlap this one (live phone "Visit our location") */
.sec[style*="--mbx"]{margin-bottom:var(--mbx)}
@media (max-width:640px){.sec[style*="--pt"]{padding:var(--pt-s,var(--pt-m,var(--pt))) 0 var(--pb-s,var(--pb-m,var(--pb)))}}
.bg-photo,.bg-fade,.bg-cta{background-size:cover;background-position:center;background-repeat:no-repeat}
.bg-photo{background-image:var(--bg)}
.bg-fade{background-image:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%),var(--bg);background-blend-mode:overlay}
.bg-cta{background-image:linear-gradient(0deg,rgba(254,199,70,.4) 0%,rgba(245,252,255,.4) 65%),var(--bg)}
.bg-blue{background-image:linear-gradient(180deg,rgba(61,102,174,.1) 0%,rgba(255,255,255,0) 100%)}
.bg-yellow{background-image:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(254,199,70,.15) 100%)}
.bg-yellow25{background-color:rgba(254,199,70,.25)}
.bg-tint-up{background-image:linear-gradient(0deg,var(--tint) 0%,rgba(255,255,255,0) 100%)}
.bg-tint{background-color:var(--tint)}
.bg-white{background-color:#fff}
/* the builder's "hills" wave at the foot of a section */
.hills{line-height:0}
.hills svg{display:block;width:100%;height:auto;aspect-ratio:1024/182;fill:#fff}
.hills path:nth-child(1){opacity:.12}
.hills path:nth-child(2){opacity:.18}
.hills path:nth-child(3){opacity:.24}
.hills path:nth-child(4){opacity:.3}
/* sections generated here (blog posts, gallery) */
.sec--tint{background:var(--tint)}
.sec--photo-dark{background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),var(--bg) center/cover;color:#fff}
.sec--photo-dark h1,.sec--photo-dark h2,.sec--photo-dark h3,.sec--photo-dark p{color:#fff}
.sec--photo-dark.hero{min-height:560px;display:flex;align-items:center}
.sec--photo-dark.hero>.wrap{width:100%}

.row{display:grid;gap:var(--gap);align-items:start;margin-bottom:var(--gap)}
.row:last-child{margin-bottom:0}
.c-50-50{grid-template-columns:1fr 1fr}
.c-67-33{grid-template-columns:2fr 1fr}
.c-33-33-33{grid-template-columns:repeat(3,1fr)}
.c-25-25-25-25{grid-template-columns:repeat(4,1fr)}
.c-20-80{grid-template-columns:1fr 4fr}
.c-75-25{grid-template-columns:3fr 1fr}
.c-17-67-17{grid-template-columns:1fr 4fr 1fr}
.c-60-40{grid-template-columns:3fr 2fr}
.c-55-45{grid-template-columns:11fr 9fr}
.c-40-60{grid-template-columns:2fr 3fr}
.c-25-50-25{grid-template-columns:1fr 2fr 1fr}
.c-20-60-20{grid-template-columns:1fr 3fr 1fr}
/* Rows synced from the live builder (build/sync_columns.py): flex rows, each column sized per screen size with
   1.92% spacing either side (rows overhang the content box by 2%), builder margins, padding, background,
   corners and shadow. Phones (<=640px) and tablets (<=1024px) use their own widths / order. */
.row.flex{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0;margin:0 -2%}
/* like the builder's page wrapper: edge-to-edge rows may overhang the viewport by their 2% spacing */
main{overflow-x:clip}
.row.flex.ai-stretch{align-items:stretch}
.row.flex.ai-center{align-items:center}
.row.flex>.col{flex:0 0 auto;box-sizing:border-box;width:calc(var(--w,100%) - var(--sp,1.92%) - var(--spr,var(--sp,1.92%)));
  margin:var(--mt,0) var(--spr,var(--sp,1.92%)) var(--mb,20px) var(--sp,1.92%);
  display:flex;flex-direction:column}
.row.flex>.col:not(.card):not([class*="card--"]):not([style*="--cpad"]){padding:0}
.row.flex>.col[style*="--cpad"]{padding:var(--cpad)}
.row.flex>.col[style*="--cbg:"]{background-color:var(--cbg)}
.row.flex>.col[style*="--cbgi"]{background-image:var(--cbgi);background-size:cover;background-position:var(--cbgp,center)}
/* synced cards carry the live shadow (or none) */
.row.flex>.col.card:not([style*="--csh"]){box-shadow:none}
.row.flex>.col[style*="--crad"]{border-radius:var(--crad)}
.row.flex>.col[style*="--csh"]{box-shadow:var(--csh)}
.row.flex>.col[style*="--cbd"]{border:var(--cbd)}
.row.flex>.col.jc-center{justify-content:center}
.row.flex>.col.jc-end{justify-content:flex-end}
.col.gone{display:none!important}
@media (max-width:1024px){.row.flex>.col{width:calc(var(--w-m,var(--w,100%)) - 3.84%);order:var(--o-m,0);margin-left:1.92%;margin-right:1.92%}}
@media (max-width:640px){.row.flex>.col{width:calc(var(--w-s,var(--w-m,100%)) - 3.84%);order:var(--o-s,var(--o-m,0));
  margin-top:var(--mt-s,var(--mt,0));margin-bottom:var(--mb-s,var(--mb,20px))}
  .row.flex>.col[style*="--cpad-s"]{padding:var(--cpad-s)}}
.col.mid{align-self:center}
.c-25-25-25-25>.col.mid,.c-33-33-33>.col.mid{align-self:start}
.card{background:#fff;border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.1);padding:25px 30px 15px;color:var(--text)}
.card h2,.card h3{color:var(--ink)}
.card .t-blue{color:var(--blue)}
.card--blue,.card--photo{background:var(--blue) var(--bg) center/cover;color:#fff}
.card--blue h2,.card--blue h3,.card--photo h2,.card--photo h3,.card--blue p,.card--photo p{color:#fff}
.card--brand{background:var(--yellow)}
.card--soft{background:var(--yellow-soft);box-shadow:none}
.card--tint{background:var(--tint);box-shadow:none}
.card--dark{background:var(--ink);color:#ddd}
.card .btns{margin-bottom:12px;gap:18px}
.card .btns .btn--blue{flex:1 1 100%}
/* the "Request a Quote" service buttons (builder x-large buttons) */
.card .btns .btn--blue{background:rgba(61,102,174,.8);padding:17px 40px;border-radius:7px;font-size:18px;line-height:21px;justify-content:flex-start;text-align:left}
.card .i-yellow{width:30px;height:30px;vertical-align:-9px;margin-right:8px}
.card .btns .btn--blue:hover{background:var(--yellow)}

/* ---------- content elements ---------- */
.media{margin:0 0 20px}
.media[style*="--imb"]{margin-bottom:var(--imb)}
.media[style*="--iw"] img{max-width:var(--iw);width:100%}
.media.center[style*="--iw"] img{margin:0 auto}
.media[style*="--ir"] img{border-radius:var(--ir)}
.media:last-child{margin-bottom:0}
/* like the builder: the width attribute sizes the image, capped at the column */
.media img{max-width:100%;height:auto}
.media.center img{margin:0 auto}
.media.right img{margin-left:auto}
@media (max-width:640px){.media.c-sm img{margin:0 auto}}
/* columns with rounded corners clip their content (the builder sets overflow:hidden on them) */
.row.flex>.col[style*="--crad"]{overflow:hidden}
.checklist{list-style:none;padding:0}
.checklist li{display:flex;gap:12px;align-items:flex-start}
.checklist .i{color:var(--yellow);margin-top:.35em}
.faqs{margin:0 0 20px}
.faq{border:1px solid var(--line);margin-bottom:10px;background:#fff}
.faq summary{list-style:none;cursor:pointer;padding:15px 83px 15px 25px;position:relative;font:600 16px/22.08px var(--head);color:var(--yellow)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:25px;top:15px;width:16px;text-align:center;font:300 24px/22px var(--body);color:var(--yellow)}
.faq[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--blue)}
.faq>div{padding:10px 25px 15px}
/* live keeps the answer paragraph's 20px bottom margin inside the panel */
.faq>div p{margin:0 0 20px}
/* live: boxes 30px apart side by side; 40px from one box's text to the next box (20px gap + the text's 20px) */
.boxes{display:grid;gap:20px 30px;margin:0 0 20px}
.boxes-2{grid-template-columns:repeat(2,1fr)}
.boxes-3{grid-template-columns:repeat(3,1fr)}
.boxes-4{grid-template-columns:repeat(4,1fr)}
.box{display:flex;gap:24px;align-items:flex-start;--c:var(--blue)}
.box.t-yellow,.box.t-blue{color:inherit!important}
.box.t-yellow{--c:var(--yellow)}
.box h3,.box h4{color:var(--c);margin:0 0 15px;line-height:1.36}
.box p{margin-bottom:20px}
.boxes-1{margin-bottom:40px}
.boxes-2 .box,.boxes-3 .box,.boxes-4 .box{flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 24px}
.box-icon{width:60px;height:60px;padding:15px;border-radius:50%;border:2px solid var(--c);color:var(--c);box-sizing:border-box}
.boxes-2 .box-icon,.boxes-3 .box-icon,.boxes-4 .box-icon{background:var(--yellow);border:0;color:#fff}
.box .more{font-weight:700}
/* small yellow icon beside "Call Us / Visit Us / Email Us" (narrow icon column), as live */
/* icon + text block that the sync scripts leave alone (contact "Email Us"): same look as a 20/80 builder row */
.iconrow{display:grid;grid-template-columns:20% 80%;margin:0 -1.92%}
.iconrow>div{margin:0 9.6% 20px}
.iconrow>.tc{margin:0 2.4% 0}
.iconrow .bubble{width:auto;height:auto;margin:0;background:none;border:0;color:var(--yellow);font-size:26px;justify-content:flex-end}
@media (max-width:1024px){.iconrow{display:block;margin:0}.iconrow>div{margin:0}}
.c-20-80 .bubble{width:auto;height:auto;margin:0;background:none;border:0;color:var(--yellow);font-size:26px;justify-content:flex-end}
.bubble.bare{width:auto;height:auto;margin:0 auto;background:none;border:0;border-radius:0;font-size:var(--isz,44px)}
.btn--white.btn--wb{color:var(--blue);box-shadow:none;border-color:#fff}
.btn--white.btn--wb:hover{color:#fff}
.bubble{display:flex;width:88px;height:88px;margin:0 auto;border-radius:50%;background:var(--yellow);border:1px solid var(--yellow);color:#fff;align-items:center;justify-content:center;font-size:44px}
/* reviews: one at a time (fade, 4s, loop) like the live carousel; speech bubble, round photo, dots */
.reviews{margin:20px 0 0;position:relative}
.review{margin:0}
.reviews[data-carousel] .review{display:none}
.reviews[data-carousel] .review.on{display:block;animation:rv-in .6s ease}
@keyframes rv-in{from{opacity:0}to{opacity:1}}
.review blockquote{position:relative;margin:0;padding:20px 24px;background:var(--tint);border:1px solid var(--text);border-radius:7px;
  color:var(--ink);font:italic 16px/normal var(--body)}
.review blockquote p{margin:0}
.review blockquote p+p{margin-top:12px}
.review blockquote::after{content:"";position:absolute;left:100px;bottom:-11px;width:20px;height:20px;background:var(--tint);
  border:solid var(--text);border-width:0 1px 1px 0;transform:rotate(45deg)}
.review .q{position:absolute;left:9px;top:5px;width:32px;height:32px;color:var(--ink);opacity:.15}
.review figcaption{display:flex;align-items:center;gap:16px;margin-top:20px;color:var(--ink)}
.review figcaption img{width:100px;height:100px;border-radius:50%;object-fit:cover}
.review figcaption a{color:var(--yellow)}
/* 12px dots 21.6px apart (live), each in a 24px tap area (the areas overlap by 2.4px) */
.rv-dots{display:flex;justify-content:center;gap:0;margin:16.4px 0 -6px}
.rv-dots button{display:grid;place-items:center;width:24px;height:24px;margin:0 -1.2px;padding:0;border:0;background:none;cursor:pointer}
.rv-dots button::before{content:"";box-sizing:border-box;width:12px;height:12px;border-radius:50%;border:1px solid var(--ink)}
.rv-dots button[aria-current="true"]::before{background:var(--ink)}
.yt{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;margin:0 0 20px;box-shadow:8px 10px 0 rgba(0,0,0,.15)}
.yt button{all:unset;cursor:pointer;position:absolute;inset:0;display:block}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .2s}
.yt button:hover img{opacity:1}
/* YouTube's own play button, as the live embed shows before playing */
.yt-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;padding:13px 24px 13px 28px;border-radius:12px;background:rgba(33,33,33,.8);color:#fff;transition:background .2s}
.yt button:hover .yt-play{background:#f00}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* live: poster photo, 8px corners, offset shadow */
.video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#000;margin:0 0 20px;box-shadow:8px 10px 0 rgba(0,0,0,.15)}
.map{margin:0 0 20px}
/* live map embeds: their own height (most 600px), square corners */
.map iframe{display:block;width:100%;height:var(--mh,380px);border:0}
/* one-photo slider with arrows (About, Tucson auto tint), like the live image carousels */
.slider{position:relative;margin:0 0 20px}
.slider figure{margin:0;display:none}
.slider figure.on,.slider:not(.ready) figure:first-of-type{display:block}
.slider img{width:100%;aspect-ratio:var(--ar,1/1);object-fit:cover}
.sl-btn{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;background:#4f4f4f;color:#fff;
  font:700 18px/30px var(--body);cursor:pointer;opacity:.8;padding:0}
.sl-btn:hover{opacity:1}
.sl-prev{left:0}
.sl-next{right:0}
/* live (ceramic coating page): three across, square corners, 10px apart; one per row on phones */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 20px}
@media (max-width:640px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.reviews-widget{min-height:240px;margin:0 0 28px}

/* ---------- quote form ---------- */
.quote{padding:30px}
.quote .fields{display:grid;grid-template-columns:repeat(4,1fr);gap:29px 4%;margin-bottom:18px}
/* the contact form: no field icons, a privacy note above the button (live) */
.quote.plain input,.quote.plain textarea{padding-left:14px}
.quote.plain{padding:0}
/* a heading icon in a yellow circle (live "Send Us A Message") */
.hbub{display:inline-flex;align-items:center;justify-content:center;width:56.32px;height:56.32px;border-radius:50%;background:var(--yellow);color:#fff;font-size:28.16px;vertical-align:middle;margin-right:15px}
.quote .form-note{font-size:14px;line-height:25.2px;margin:-2px 0 20px;max-width:80%}
.quote .f{position:relative;display:block;margin:0}
.quote .f>span{position:absolute;left:-9999px}
.quote .f .i{position:absolute;left:12px;width:14px;height:14px;top:50%;transform:translateY(-50%);color:var(--blue);pointer-events:none}
.quote input,.quote select{width:100%;font:14px var(--body);color:var(--text);background:#fff;border:1px solid var(--blue);border-radius:4px;padding:0 14px 0 35px;height:50px}
.quote textarea{width:100%;font:14px/1.5 var(--body);color:var(--text);background:#fff;border:1px solid var(--blue);border-radius:4px;padding:12px 14px 12px 35px;min-height:120px;resize:vertical}
.quote .f:has(textarea) .i{top:24px}
.quote .f.wide{grid-column:span 2}
.quote .f.w2{grid-column:span 2}
.quote .f.w3{grid-column:span 3}
.quote select{padding-left:14px}
/* contact form (live): a bordered box; two columns (name, phone | email, location), message below */
.formbox{border:1px solid #e2e2e2;border-radius:8px;padding:40px 40px 20px;margin:0 0 20px}
.quote.plain .fields{grid-template-columns:1fr 1fr;gap:32px 27px}
.quote.plain .f:nth-child(1){grid-area:1/1}
.quote.plain .f:nth-child(2){grid-area:2/1}
.quote.plain .f:nth-child(3){grid-area:1/2}
.quote.plain .f:nth-child(4){grid-area:2/2}
.quote.plain .f:has(textarea){grid-area:3/1/4/3}
.quote .f:has(textarea){grid-column:1/-1}
@media (max-width:960px){.quote .f.w3{grid-column:span 2}}
@media (max-width:640px){.quote .f.wide,.quote .f.w2,.quote .f.w3{grid-column:auto}
  .quote.plain .fields{grid-template-columns:1fr;row-gap:32px}.quote.plain .fields .f{grid-area:auto}}
.quote input:focus,.quote select:focus,.quote textarea:focus{border-color:var(--blue);outline:2px solid rgba(61,102,174,.25)}
.quote .hp{position:absolute;left:-9999px;width:1px;height:1px}
.quote .form-msg{margin:14px 0 0;font-weight:700}
.quote .form-msg.err{color:#b3261e}
.quote-banner{position:relative;z-index:1;margin-bottom:-24px;max-width:75%}
.quote-banner h2{margin:0}

/* ---------- blog (live: plain cards, photo, yellow title, date) ---------- */
.prose h2,.prose h3{margin-top:0}
.prose img{margin:1.2em auto}
.prose figure{margin:1.4em 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4%}
.cards.cards-4{grid-template-columns:repeat(4,1fr);gap:20px 2.6%}
.post-card{display:flex;flex-direction:column;transition:transform .3s}
.post-card:hover{transform:scale(1.02)}
.pc-img{display:block;margin-bottom:20px}
.post-card img{width:100%;aspect-ratio:100/73;object-fit:cover}
.post-card h4 a{color:inherit}
.pc-meta{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--ink);margin:10px 0 0}
.pc-meta span{display:inline-flex;align-items:center;gap:5px}
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:44px;font:14px var(--body)}
.pager a,.pager span{min-width:38px;height:38px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);text-decoration:none;color:var(--text)}
.pager .pg-prev,.pager .pg-next{border:0}
.pager a:hover{border-color:var(--yellow);color:var(--yellow)}
.pager [aria-current]{background:var(--yellow);border-color:var(--yellow);color:#fff}

/* back-to-top tab: live shows it on desktop only, bottom right, dark with a yellow arrow */
.to-top{display:none}
@media (min-width:1025px){
  .to-top{display:flex;align-items:center;justify-content:center;position:fixed;right:75px;bottom:0;width:48px;height:35px;z-index:50;
    background:#333;color:var(--yellow);border-radius:6px 6px 0 0;font-size:16px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .to-top.on{opacity:.9;visibility:visible}
  .to-top:hover{opacity:1}
}
/* ---------- footer (live: 6% padding, Lato 15px, blue icons, grey copyright bar) ---------- */
.site-footer{padding:6% 0 0;font:15px/1.7 var(--body)}
/* live footer row: columns 25/18/17/19/21% of a row that overhangs the content by 2% each side, 1.92% gutters */
.site-footer .cols{display:grid;grid-template-columns:25fr 18fr 17fr 19fr 21fr;gap:0;padding:0 7.2px 6vw}
.site-footer .cols>div{padding:0 22.76px}   /* 1.92% of the 1185.6px row (a % here would follow the column) */
.site-footer a[aria-current="page"]{color:var(--blue)}
.site-footer .cols>div:not(.f-brand) li{font-size:14px;line-height:25.2px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 10px}
.site-footer a{color:var(--text);text-decoration:none}
.site-footer a:hover{color:var(--yellow)}
.f-contact li{margin:0;padding-bottom:5.25px}
.f-contact a{display:flex;gap:21px;align-items:center}
.f-contact .i{color:var(--blue);width:15px;height:15px;margin-left:7px}
.f-brand img{width:200px;margin-bottom:25px}
/* live: 15px/25.5px rows, 5.25px apart; the email is a yellow link */
.f-brand li{line-height:25.5px;padding-bottom:5.25px;margin:0 0 5.25px}
.f-brand a[href^="mailto:"]{color:var(--yellow)}
/* 32px tap areas around the 14px icons, same 34px spacing and left edge as before */
.social{display:flex;gap:2px;margin:11px 0 -9px -9px}
.social a{display:grid;place-items:center;width:32px;height:32px;color:var(--blue);font-size:14px}
.social a:hover{color:var(--yellow)}
.accred img{height:auto;margin-bottom:20px}
.copyright{background:var(--text);color:#fff;text-align:center;padding:54px 30px;font:14px/25.2px var(--body)}
.copyright a{color:#3fa9f5;text-decoration:none}
.copyright .sep{margin:0 6px}

/* ---------- portfolio gallery ---------- */
.lead{font-size:17px;max-width:70ch;margin-left:auto;margin-right:auto}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 8px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #cfd8e6;background:#fff;color:var(--ink);border-radius:999px;
  padding:9px 16px;font:600 13px/1 var(--head);letter-spacing:.01em;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.chip span{background:var(--tint-2);color:var(--muted);border-radius:999px;padding:3px 8px;font-size:12px}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.chip[aria-pressed="true"] span{background:rgba(255,255,255,.2);color:#fff}
.chip--hot[aria-pressed="false"]{border-color:var(--yellow)}
.g-count{text-align:center;font-size:14px;color:var(--muted);margin:6px 0 22px}
.g-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-auto-rows:200px;grid-auto-flow:dense;gap:12px}
.g-item{margin:0;position:relative;border-radius:10px;overflow:hidden;background:var(--tint-2);animation:g-in .35s ease}
.g-item.tall{grid-row:span 2}
.g-item[hidden]{display:none}
.g-item a{display:block;height:100%;color:#fff;text-decoration:none}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.g-item a:hover img,.g-item a:focus-visible img{transform:scale(1.05)}
.g-cap{position:absolute;inset:auto 0 0 0;padding:34px 14px 12px;font-size:13px;line-height:1.35;
  background:linear-gradient(transparent,rgba(0,0,0,.78));opacity:0;transform:translateY(8px);transition:.25s}
.g-item a:hover .g-cap,.g-item a:focus-visible .g-cap{opacity:1;transform:none}
.g-tag{display:inline-block;background:var(--yellow);color:var(--ink);font:600 10px/1 var(--head);text-transform:uppercase;letter-spacing:.06em;
  padding:5px 8px;border-radius:999px;margin-bottom:6px}
.g-cap .g-tag{display:table}
@keyframes g-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.steps{list-style:none;margin:30px 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.steps li{margin:0}
.steps a{display:block;position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#ddd;color:#fff;text-decoration:none}
.steps img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.steps a:hover img{transform:scale(1.05)}
.step-n{position:absolute;top:10px;left:10px;width:34px;height:34px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font:700 15px var(--head)}
.step-l{position:absolute;inset:auto 0 0 0;padding:30px 12px 12px;font:600 14px/1.3 var(--head);background:linear-gradient(transparent,rgba(0,0,0,.8))}
.strip{list-style:none;margin:26px 0 24px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.strip li{margin:0}
.strip a{display:block;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--tint-2)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.strip a:hover img{transform:scale(1.06)}
.work-strip+.sec--photo-dark{margin-top:0}
/* lightbox */
.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(10,12,16,.94);color:#fff}
.lb::backdrop{background:rgba(10,12,16,.94)}
.lb[open]{display:flex;align-items:center;justify-content:center}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:92vw}
.lb img{max-width:92vw;max-height:82vh;width:auto;height:auto;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb figcaption{display:flex;gap:18px;justify-content:space-between;width:100%;max-width:900px;padding:14px 6px 0;font-size:14px;color:#ddd}
.lb-n{white-space:nowrap;color:var(--yellow);font:600 13px var(--head)}
.lb-btn{position:fixed;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center}
.lb-btn:hover{background:var(--yellow);color:var(--ink)}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-close{right:18px;top:18px}
@media (max-width:960px){.strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .g-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:8px}
  .g-cap{display:none}
  .chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:20px -20px 6px;padding:0 20px 8px;scrollbar-width:none}
  .chip{flex:none}
  .steps{grid-template-columns:repeat(2,1fr)}
  .lb-prev,.lb-next{top:auto;bottom:18px;transform:none}
  .lb img{max-height:72vh}
}
@media (max-width:374px){
  .steps{grid-template-columns:1fr}   /* two tiles side by side are too small for the step number and label */
}

/* ---------- phone intro (Home, Gilbert, Tucson: the live site serves phones this instead of the photo hero) ---------- */
.sec.mhero{background:var(--bg) center/cover;padding:30px 0 0;margin-top:-5px}
/* the phone-only quote card (Home, Gilbert, Tucson): live sizes its buttons smaller than the desktop card */
.qcard-m .card .center>p{margin:-10px 0 30px}
.qcard-m .card .btns{gap:14.6px;margin:0 0 14.6px}
.qcard-m .card .btns .btn--blue{padding:13px 29px;background:rgba(61,102,174,.9)}
.qcard-m .card .btns .btn--blue:hover{background:var(--yellow)}
.qcard-m .card .txt{margin-top:10px}
.qcard-m .card .i-yellow{width:32px;height:32px}
.mhero .kicker{font:400 13px/1.7 var(--head);text-transform:capitalize;color:var(--ink);margin:10px 0 10px}
.mhero .kicker mark{background:var(--tint);color:var(--ink);padding:1.3px 3.9px}
.mhero p{margin-top:20px}
mark.mk{background:linear-gradient(to top,#f6ae03 40%,transparent 40%);color:#0f0f0f}
.btns--stack{flex-direction:column;align-items:center;gap:5px;margin-bottom:25px}

/* ---------- builder text blocks: per-block typography copied from the live site (build/sync_text.py) ---------- */
/* the builder's "no margin" text blocks */
.tx.nm p,.tx[style*="--tnm"] p{margin:0}
.tx[style*="--tfs"]{font-size:var(--tfs)}
.tx[style*="--tlh"]{line-height:var(--tlh)}
.tx[style*="--tff"]{font-family:var(--tff)}
.tx[style*="--tfw"]{font-weight:var(--tfw)}
.tx[style*="--tfst"]{font-style:var(--tfst)}
.tx[style*="--tls"]{letter-spacing:var(--tls)}
.tx[style*="--tc"],.tx[style*="--tc"] :is(p,li,h1,h2,h3,h4,h5,h6){color:var(--tc)}
.tx[style*="--ta:"]{text-align:var(--ta)}
.tx[style*="--tmt:"]{margin-top:var(--tmt)}
.tx[style*="--tmb:"]{margin-bottom:var(--tmb)}
@media (max-width:1024px){.tx[style*="--ta-m"]{text-align:var(--ta-m)}}
@media (max-width:640px){.tx[style*="--ta-s"]{text-align:var(--ta-s)}.tx[style*="--tmt-s"]{margin-top:var(--tmt-s)}.tx[style*="--tmb-s"]{margin-bottom:var(--tmb-s)}}

/* builder titles that are plain text (the big phone / email links in contact blocks) */
.dtitle{--f:var(--fs,24);font:400 min(calc(var(--f)*1px),calc(16px + (var(--f) - 16)*.6152px + (var(--f) - 16)*.03758vw))/1.8 var(--body);
  margin:calc(var(--mt,10)*1px) 0 calc(var(--mb,15)*1px)}
.dtitle a{color:var(--yellow);padding:1px 0}
@media (max-width:640px){.dtitle{margin:calc(var(--mt-s,10)*1px) 0 calc(var(--mb-s,10)*1px)}}

/* ---------- builder title headings: spacing from the live site (px), mobile values at <=640px ---------- */
:is(h1,h2,h3,h4,h5,h6)[style*="--fs"]{margin:calc(var(--mt,10)*1px) 0 calc(var(--mb,15)*1px)}
@media (max-width:640px){:is(h1,h2,h3,h4,h5,h6)[style*="--fs"]{margin:calc(var(--mt-s,10)*1px) 0 calc(var(--mb-s,10)*1px)}}

/* ---------- visibility (mirrors the old builder's breakpoints) ---------- */
@media (max-width:640px){.hide-sm{display:none!important}}
@media (min-width:641px) and (max-width:1024px){.hide-md{display:none!important}}
@media (min-width:1025px){.hide-lg{display:none!important}}
/* the live breadcrumb bar only shows on desktop */
@media (max-width:1024px){.crumbs{display:none}}

/* mobile-menu-only items (e.g. Gallery) stay out of the desktop nav */
@media (min-width:961px){.nav .nav-mobile-only{display:none}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav a{padding:10px 8px;font-size:13px}
  .site-footer .cols{grid-template-columns:1fr 1fr 1fr;padding-left:30px;padding-right:30px}
  .site-footer .cols>div{padding:0}
  .cards.cards-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .nav-toggle{display:inline-flex}
  /* live: the menu drops down under the header, full width, centred 65px rows */
  .nav{position:absolute;left:0;right:0;top:100%;background:#fff;display:none;z-index:60;/* fits the screen under the header (48px bar + 144px header), so the whole menu is on screen and scrolls inside itself */
    max-height:calc(100vh - 192px);max-height:calc(100dvh - 192px);overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 10px 20px rgba(0,0,0,.08)}
  .nav.open{display:block}
  .nav>ul{flex-direction:column;gap:0}
  .nav li{border-top:1px solid rgba(0,0,0,.06)}
  .nav a{display:flex;align-items:center;justify-content:center;min-height:65px;padding:0 24px;text-align:center;color:var(--text);
    font:700 16px/28.8px var(--body);letter-spacing:.24px}
  .nav a[aria-current="page"]{color:var(--blue);background:#f9f9fb}
  .nav .has-sub{flex-wrap:wrap;justify-content:center}
  .nav .has-sub>a{flex:1}
  .sub-toggle{margin:0;padding:0;width:74px;height:65px;font-size:16px;position:absolute;right:0;top:0}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;display:none;width:100%;padding:0}
  .sub a{text-align:center}
  .has-sub.open>.sub{display:block}
  .has-sub:hover>.sub{display:none}
  .has-sub.open:hover>.sub{display:block}
  .nav-close{display:none!important}
  .row:not(.flex),.c-50-50,.c-67-33,.c-75-25,.c-60-40,.c-55-45,.c-40-60,.c-20-80,.c-17-67-17,.c-25-50-25,.c-20-60-20{grid-template-columns:1fr}
  .c-33-33-33{grid-template-columns:1fr 1fr}
  .c-25-25-25-25{grid-template-columns:1fr 1fr}
  .row:not(.flex)>.col.empty{display:none}
  .quote .fields{grid-template-columns:1fr 1fr}
  .quote-banner{max-width:100%}
  .boxes-3,.boxes-4{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .topbar .wrap{justify-content:center;flex-wrap:wrap;padding:10px 30px;min-height:0}
  .toplinks{display:none}
  .reviews-banner{display:block}
  .topcalls{display:none}
  .site-footer .cols>div:not(.f-brand){display:none}
  .site-header .wrap{min-height:96px}
  .site-header{margin-top:-5px}   /* live: the phone header tucks 5px under the reviews bar */
  .nav{max-height:calc(100vh - 177px);max-height:calc(100dvh - 177px)}   /* 86px bar + 96px header - 5px */
  .logo img{width:min(240px,calc((100vw - 60px) * .48))}
  .f-brand img{width:200px}
  .copyright{font:14px/25.2px var(--body);padding:54px 30px}
  .sec{padding:44px 0}
  .sec--photo-dark.hero{min-height:440px}
  .c-33-33-33,.c-25-25-25-25,.boxes-2,.boxes-3,.boxes-4,.cards,.cards.cards-4{grid-template-columns:1fr}
  .quote .fields{grid-template-columns:1fr;row-gap:34px}
  .quote .form-note{max-width:80%}
  .site-footer{padding-top:6vw}
  .site-footer .cols{grid-template-columns:1fr;padding-bottom:calc(6vw + 44px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}