/* =========================================================
   POWER WASH SOCAL — DESIGN SYSTEM v3
   Rebuilt to match the visual framework of the reference
   template: flat solid-green header/hero blocks, amber/gold
   accent, pill buttons, mint cards with an amber left border,
   emoji-style icons, bold geometric headings.
   ========================================================= */

:root{
  --green:#1D6B40;
  --green-dark:#123420;
  --green-darker:#0D2718;
  --amber:#EFA83D;
  --amber-dark:#D68910;
  --mint:#EAF3EC;
  --charcoal:#2B2B2B;
  --ink:#2B2B2B;
  --mid-gray:#5C6B60;
  --border:#DCE6DE;
  --white:#FFFFFF;
  /* legacy variable names kept so nothing else needs renaming */
  --navy:var(--green);
  --navy-dark:var(--green-dark);
  --blue:#2F6B4F;
  --aqua:var(--amber);
  --aqua-dark:var(--amber-dark);
  --light:var(--mint);
  --lighter:#F5FAF6;

  --font-display:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'Inter', sans-serif;

  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-pill:999px;
  --shadow-sm:0 1px 4px rgba(13,39,24,0.06);
  --shadow-md:0 6px 18px rgba(13,39,24,0.10);
  --shadow-lg:0 16px 40px rgba(13,39,24,0.16);
  --container:1360px;
  --container-narrow:800px;

  --sp-1:8px; --sp-2:16px; --sp-3:28px; --sp-4:40px; --sp-5:56px; --sp-6:72px; --sp-7:92px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--green);
  line-height:1.2;
  margin:0 0 0.5em;
  font-weight:700;
}
h1{font-size:clamp(2.6rem,5.8vw,4rem); font-weight:800; letter-spacing:-0.015em; line-height:1.1;}
h2{font-size:clamp(1.85rem,3.4vw,2.65rem); font-weight:700; letter-spacing:-0.005em;}
h3{font-size:1.3rem; font-weight:700;}
p{margin:0 0 1.1em;}
a{color:var(--green); text-decoration:none;}
a:hover{text-decoration:underline;}
ul{padding-left:1.2em;}
img{max-width:100%; height:auto; display:block;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }

.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
.container--narrow{max-width:var(--container-narrow);}
.section{padding:var(--sp-7) 0;}
.section--tight{padding:var(--sp-5) 0;}
.section--alt{background:var(--mint);}
.section--dark{background:var(--green); color:#E7F1EB;}
.section--dark h2, .section--dark h3{color:#fff;}
.section--dark a:not(.btn){color:#fff; text-decoration:underline;}
.section-head{max-width:680px; margin:0 auto var(--sp-5); text-align:center;}
.section-head.align-left{margin-left:0; text-align:left;}
.section-head p{color:var(--mid-gray); font-size:1.02rem;}
.section--dark .section-head p{color:#D6E7DC;}

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.78rem;
  font-weight:700;
  color:var(--amber-dark);
  display:inline-block;
  margin-bottom:0.7em;
}
.section--dark .eyebrow{color:#FFD08A;}

.streak-divider{height:0;}

/* =============== TOP UTILITY BAR =============== */
.top-bar{background:var(--green-dark); color:#DCEBE1; font-size:0.82rem; padding:8px 0;}
.top-bar .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 24px;}
.top-bar-left, .top-bar-right{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.top-bar a{color:#DCEBE1;}
.top-bar a:hover{color:#fff;}

/* =============== HEADER =============== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; max-width:1400px; margin:0 auto; gap:28px;
}
.brand{display:flex; align-items:center; gap:14px; font-family:var(--font-display); font-weight:800; color:var(--green); font-size:1.35rem; flex:none; line-height:1.15;}
.brand img{height:64px; width:auto;}
.brand .brand-tagline{display:block; font-family:var(--font-body); font-weight:600; font-size:0.68rem; letter-spacing:0.08em; color:var(--amber-dark); text-transform:uppercase;}
.main-nav{display:flex; align-items:center; gap:38px; margin:0 auto;}
.main-nav a{color:#23281F; font-weight:600; font-size:0.98rem; padding:8px 3px;}
.main-nav a:hover{color:var(--green); text-decoration:none;}
.header-actions{display:flex; align-items:center; gap:22px; flex:none;}
.header-phone{font-family:var(--font-body); font-weight:700; font-size:0.98rem; color:var(--green); display:flex; align-items:center; gap:6px; white-space:nowrap;}
.header-phone:hover{color:var(--amber-dark); text-decoration:none;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle svg{width:26px; height:26px; color:var(--green);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:700; font-size:0.96rem;
  padding:16px 32px; border-radius:var(--r-pill); border:2px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap; box-shadow:var(--shadow-sm);
  transition:transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, opacity 0.22s ease;
}
.btn:hover{text-decoration:none;}
.btn--primary{background:var(--amber); color:#20291F;}
.btn--primary:hover{background:var(--amber-dark); color:#fff; transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.btn--navy{background:var(--green-dark); color:#fff;}
.btn--navy:hover{background:var(--green-darker); transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.btn--outline{border-color:var(--green); color:var(--green); background:transparent; box-shadow:none;}
.btn--outline:hover{background:var(--green); color:#fff; transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.btn--outline-light{border-color:rgba(255,255,255,0.75); color:#fff; background:rgba(255,255,255,0.08); box-shadow:none;}
.btn--outline-light:hover{background:#fff; color:var(--green); transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.btn--block{width:100%;}
.btn--sm{padding:12px 22px; font-size:0.87rem;}
.btn--lg{padding:20px 42px; font-size:1.1rem;}

/* =============== HOMEPAGE HERO (full-width image + dark overlay) =============== */
.hero{position:relative; overflow:hidden; color:#fff; padding:0; min-height:520px; display:flex; align-items:center;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover;}
.hero-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(115deg, rgba(10,32,22,0.62) 0%, rgba(13,39,24,0.48) 50%, rgba(18,52,32,0.28) 100%);}
.hero--interior .hero-bg, .hero--interior .hero-overlay{display:none;}
.hero-inner{position:relative; z-index:2; max-width:800px; padding:var(--sp-6) 0;}
.hero .eyebrow{color:var(--amber); font-size:0.85rem;}
.hero p.lede{font-size:1.3rem; color:#EAF4EE; max-width:620px; line-height:1.65;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:32px;}
.hero-trustline{display:flex; gap:32px; margin-top:44px; flex-wrap:wrap; font-size:0.88rem; color:#CFE3D7;}
.hero-trustline strong{color:#fff; font-weight:700; display:block; font-size:1.1rem; font-family:var(--font-display);}

/* =============== INTERIOR HERO (condensed, flat green, amber H1) =============== */
.hero--interior{padding:0; background:var(--green);}
.hero--interior .hero-inner{padding:30px 0 34px; max-width:960px;}
.hero--interior h1{color:var(--amber); font-size:clamp(1.9rem,3.6vw,2.6rem); display:flex; align-items:center; gap:12px;}
.hero--interior .lede{color:#EAF4EE; font-size:1.08rem; margin-bottom:0;}
.hero--interior .eyebrow{color:#CFE3D7;}

/* interior breadcrumb sits inside the green hero, not a separate white strip */
.hero-breadcrumb{font-size:0.82rem; color:#BFDCC9; margin-bottom:14px;}
.hero-breadcrumb a{color:#BFDCC9;}
.hero-breadcrumb a:hover{color:#fff;}
.hero-breadcrumb .sep{margin:0 6px; color:#7FAE93;}

/* =============== TRUST STRIP =============== */
.trust-strip{background:var(--green-dark); padding:36px 0;}
.trust-strip .container{display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; gap:16px;}
.trust-item{
  display:flex; align-items:center; gap:14px; color:#E7F1EB; font-size:0.9rem;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-md); padding:16px 22px; flex:1 1 240px; max-width:290px;
  transition:background 0.2s ease, transform 0.2s ease;
}
.trust-item:hover{background:rgba(255,255,255,0.11); transform:translateY(-2px);}
.trust-item .emoji-icon{font-size:1.9rem; line-height:1;}
.trust-item strong{display:block; color:#fff; font-family:var(--font-display); font-size:0.96rem;}

/* =============== EMOJI ICONS =============== */
.emoji-icon{font-size:2.2rem; line-height:1; display:inline-block;}
.emoji-badge{
  width:64px; height:64px; border-radius:var(--r-md); background:var(--mint);
  display:flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:16px;
  transition:transform 0.25s ease, background 0.25s ease;
}

/* =============== CARDS / GRIDS =============== */
.grid{display:grid; gap:28px;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}}

.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:32px; box-shadow:var(--shadow-sm); transition:box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.card h3{margin-bottom:0.4em; font-size:1.1rem;}
.card p{color:var(--mid-gray); font-size:0.96rem;}

/* mint accent card with amber left border, matching the reference sidebar cards */
.accent-card{
  background:var(--mint); border-left:5px solid var(--amber); border-radius:var(--r-md);
  padding:28px 30px; margin-bottom:22px;
}
.accent-card h3{color:var(--green); margin-bottom:0.5em;}

.service-card{display:flex; flex-direction:column; height:100%; cursor:pointer;}
.service-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-6px); border-color:var(--amber);}
.service-card:hover .emoji-icon{transform:scale(1.12);}
.service-card .emoji-icon{transition:transform 0.25s ease; display:inline-block;}
.service-card p{flex:1;}
.service-card .card-link{
  margin-top:14px; font-weight:700; font-size:0.9rem; display:inline-flex; align-items:center; gap:6px;
  color:var(--green); transition:gap 0.2s ease;
}
.service-card .card-link:hover{color:var(--amber-dark); text-decoration:none; gap:10px;}

.tag{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-size:0.88rem; font-weight:600;
  background:#fff; color:var(--green); padding:12px 10px;
  border-radius:var(--r-sm); margin:0; text-decoration:none; border:1px solid var(--border);
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tag:hover{background:var(--mint); color:var(--green); text-decoration:none; border-color:var(--green);}

.city-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:12px;}
@media (max-width:960px){.city-grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width:640px){.city-grid{grid-template-columns:repeat(2,1fr);}}

/* =============== CHECKLIST (amber checkmarks) =============== */
.icon-list{list-style:none; padding:0; margin:0; display:grid; gap:12px;}
.icon-list li{font-size:0.98rem; position:relative; padding-left:30px;}
.icon-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--amber-dark); font-weight:800; font-size:1.05rem;
}

/* =============== INSET BOX (e.g. "Other Services in X") =============== */
.inset-box{background:var(--mint); border-radius:var(--r-md); padding:28px 32px; margin:0;}
.inline-links{display:flex; flex-wrap:wrap; gap:8px 22px;}
.inline-links a{color:var(--green); font-weight:600;}
.inline-links .sep-star{color:var(--amber-dark); margin-right:6px;}

/* =============== PROCESS STEPS =============== */
.process{counter-reset:step;}
.process-step{position:relative; padding-left:56px; margin-bottom:28px;}
.process-step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:0; font-family:var(--font-display); font-size:0.9rem;
  color:#fff; background:var(--amber); width:38px; height:38px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700;
}

/* =============== SPLIT SECTION =============== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md);}
@media (max-width:800px){.split{grid-template-columns:1fr;}}
.split-panel{position:relative; padding:var(--sp-5); color:#fff; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; background:var(--green);}
.split-panel:nth-child(2){background:var(--green-dark);}
.split-panel .split-bg, .split-panel .split-overlay{display:none;}
.split-panel > *{position:relative; z-index:2;}
.split-panel h3{color:#fff; font-size:1.4rem;}
.split-panel .eyebrow{color:var(--amber);}

/* =============== BEFORE/AFTER =============== */
.ba-slider{position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-lg); background:var(--charcoal); user-select:none; box-shadow:var(--shadow-md);}
.ba-slider--featured{aspect-ratio:21/9; box-shadow:var(--shadow-lg); margin-bottom:28px;}
.ba-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ba-slider .ba-after{clip-path:inset(0 0 0 50%);}
.ba-slider .ba-handle{position:absolute; top:0; bottom:0; left:50%; width:4px; background:#fff; cursor:ew-resize; transform:translateX(-50%);}
.ba-slider .ba-handle::after{
  content:"⇔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; background:#fff; color:var(--green); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; box-shadow:var(--shadow-lg);
}
.ba-slider .ba-label{position:absolute; top:16px; font-size:0.78rem; font-weight:700; color:#fff; background:rgba(13,39,24,0.8); padding:6px 16px; border-radius:999px;}
.ba-slider .ba-label--before{left:16px;}
.ba-slider .ba-label--after{right:16px;}

/* =============== COUNTY CARDS (Service Areas redesign) =============== */
.county-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:30px; box-shadow:var(--shadow-sm); transition:box-shadow 0.25s ease, transform 0.25s ease;
  display:flex; flex-direction:column; height:100%;
}
.county-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-5px);}
.county-card .county-card-head{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.county-card .county-card-head .emoji-icon{font-size:2rem;}
.county-card h3{margin:0; font-size:1.2rem;}
.county-card p{color:var(--mid-gray); font-size:0.92rem; margin-bottom:14px;}
.county-card .badge-list{margin:0 0 16px;}
.county-card .badge-list .tag{padding:8px 8px; font-size:0.82rem;}
.county-card .card-link{margin-top:auto; font-weight:700; color:var(--green); display:inline-flex; align-items:center; gap:6px;}
.county-card .card-link:hover{color:var(--amber-dark); text-decoration:none;}

/* =============== FEATURE ROW (alternating image/text layout) =============== */
.feature-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:860px){.feature-row{grid-template-columns:1fr; gap:32px;}}
.feature-row--reverse .feature-row-media{order:2;}
@media (max-width:860px){.feature-row--reverse .feature-row-media{order:0;}}
.feature-row-media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);}
.feature-row-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease;}
.feature-row-media:hover img{transform:scale(1.05);}
.feature-row-content h2{margin-bottom:0.4em;}

/* =============== MEDIA CARD (image + content, used for Featured Projects / Industries) =============== */
.media-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow 0.3s ease, transform 0.3s ease;
  display:flex; flex-direction:column; height:100%;
}
.media-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-6px);}
.media-card-media{aspect-ratio:16/10; overflow:hidden; position:relative;}
.media-card-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease;}
.media-card:hover .media-card-media img{transform:scale(1.08);}
.media-card-tag{position:absolute; top:14px; left:14px; background:rgba(13,39,24,0.82); color:#fff; font-size:0.72rem; font-weight:700; padding:6px 14px; border-radius:999px;}
.media-card-body{padding:26px; display:flex; flex-direction:column; flex:1;}
.media-card-body h3{margin-bottom:0.4em;}
.media-card-body p{color:var(--mid-gray); flex:1;}
.media-card-body .btn{align-self:flex-start; margin-top:8px;}

/* =============== FULL-WIDTH BANNER =============== */
.wide-banner{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); min-height:340px; display:flex; align-items:center;}
.wide-banner-media{position:absolute; inset:0;}
.wide-banner-media img{width:100%; height:100%; object-fit:cover;}
.wide-banner-overlay{position:absolute; inset:0; background:linear-gradient(100deg, rgba(13,39,24,0.85) 0%, rgba(18,52,32,0.55) 60%, rgba(18,52,32,0.15) 100%);}
.wide-banner-content{position:relative; z-index:2; padding:56px; max-width:560px; color:#fff;}
.wide-banner-content h2{color:#fff;}
.wide-banner-content p{color:#DCEBE1;}


/* Progressive enhancement: content is ALWAYS visible without JS.
   The fade-in animation only arms when main-thread JS has confirmed itself
   (html.js set by an inline head script) — no JS, no blank sections, ever. */
.reveal{opacity:1; transform:none;}
html.js .reveal{opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease;}
html.js .reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}


.faq-item{border-bottom:1px solid var(--border);}
.faq-item summary{
  cursor:pointer; padding:18px 4px; font-weight:700; font-family:var(--font-display);
  color:var(--green); list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:1.4rem; color:var(--amber-dark); flex:none; font-family:var(--font-body); font-weight:400;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding:0 4px 18px; color:var(--mid-gray);}

/* =============== FORMS =============== */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.form-grid .full{grid-column:1 / -1;}
label{display:block; font-weight:700; font-size:0.84rem; margin-bottom:6px; color:var(--green);}
input, select, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-sm);
  font-family:var(--font-body); font-size:0.95rem; background:#fff; color:var(--ink);
}
input:focus, select:focus, textarea:focus{border-color:var(--green);}
textarea{min-height:100px; resize:vertical;}
.form-note{font-size:0.8rem; color:var(--mid-gray); margin-top:10px;}
.form-success, .form-error{padding:14px 16px; border-radius:var(--r-sm); font-size:0.9rem; margin-bottom:18px; display:none;}
.form-success{background:#E5F3E9; color:#144D2C; border:1px solid #A9D8B8;}
.form-error{background:#FBEAEA; color:#8A2A2E; border:1px solid #F3B9BC;}
.form-card{background:#fff; border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-md); padding:32px;}

/* =============== CTA BAND (amber gradient, matches reference) =============== */
.cta-band{background:linear-gradient(120deg, #F2B65A 0%, var(--amber) 45%, var(--amber-dark) 100%); padding:var(--sp-6) 0; text-align:center; color:#20291F;}
.cta-band h2{color:#1D2A1F; font-size:clamp(1.6rem,3vw,2.2rem);}
.cta-band p{color:#3A2E14; max-width:600px; margin:0 auto 24px;}
.cta-band .btn--navy{background:var(--green-dark);}
.cta-band .cta-contact{margin-top:20px; font-weight:600; color:#2A2110;}
.cta-band .cta-contact a{color:#2A2110;}

/* =============== FOOTER =============== */
.site-footer{background:var(--green-darker); color:#B9CBBF; padding:72px 0 26px;}
.footer-top{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px;}
@media (max-width:1100px){.footer-top{grid-template-columns:1fr 1fr 1fr;}}
@media (max-width:700px){.footer-top{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-top{grid-template-columns:1fr;}}
.footer-cta{
  margin-top:18px; display:inline-flex; align-items:center; gap:8px;
}
.site-footer h4{color:#fff; font-size:0.95rem; margin-bottom:14px; font-family:var(--font-display);}
.site-footer ul{list-style:none; padding:0; margin:0;}
.site-footer li{margin-bottom:9px; font-size:0.9rem;}
.site-footer a{color:#B9CBBF;}
.site-footer a:hover{color:var(--amber);}
.footer-brand .brand{color:#fff;}
.footer-contact{margin-top:14px; font-size:0.9rem;}
.footer-contact a{display:block; margin-bottom:7px; color:#fff;}
.footer-bottom{border-top:1px solid #1D3A2A; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px; padding-top:20px; font-size:0.8rem; color:#7E9A88; text-align:center;}
.footer-bottom a{color:#7E9A88;}
.footer-bottom .sep{margin:0 8px;}

/* =============== UTILITY =============== */
.text-center{text-align:center;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.flex{display:flex;} .items-center{align-items:center;} .gap-1{gap:8px;} .gap-2{gap:16px;}
.small{font-size:0.85rem; color:var(--mid-gray);}
.badge-list{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0;}
.lede-narrow{max-width:640px;}
.phrase-link{color:inherit; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px;}
.phrase-link:hover{opacity:0.8;}

/* =============== MOBILE CALL BAR =============== */
.mobile-call-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:var(--green-dark); padding:12px 16px; box-shadow:0 -4px 20px rgba(0,0,0,0.25);
}
.mobile-call-bar a{color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px;}

@media (max-width:880px){
  .city-grid{grid-template-columns:repeat(2,1fr);}
}


/* Phase 5 — UI polish additions */
.accent-card{padding:26px 24px;}
.accent-card h3{font-size:1.22rem;}
.hero .btn--primary, .hero .btn--lg{font-size:1.05rem; padding:14px 26px;}


/* Phase 5.3 — ROOT CAUSE FIX
   The shared two-column content+sidebar layout sets its columns via an inline
   style (grid-template-columns:1.7fr 1fr), which outranks the stylesheet's
   responsive collapse rules below 960px/640px. These rules restore the exact
   intended breakpoint behavior for inline-styled grids, matching the existing
   class-based collapse rules 1:1. Attribute selector limits the override to
   elements whose inline style actually sets grid-template-columns. */
@media (max-width:960px){
  .grid--3[style*="grid-template-columns"], .grid--4[style*="grid-template-columns"]{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:640px){
  .grid--2[style*="grid-template-columns"], .grid--3[style*="grid-template-columns"], .grid--4[style*="grid-template-columns"]{grid-template-columns:1fr !important;}
}


/* Phase 5.4 — rendered-defect fixes (browser-verified)
   (a) Header overflow: brand + nav + duplicate CTA exceeded the viewport at
       laptop widths; header-actions was pushed past the right edge and hidden
       by the global overflow-x clip. Nav now absorbs pressure and the
       redundant header-actions CTA yields at widths where it cannot fit
       (the nav carries its own CTA, so none is lost). */
/* (Phase 5.4 header band-aid removed — superseded by the Phase 5.5 header rebuild below) */

/* Phase 5.4(b) — footer overflow root cause: the commercial footer CTA is a
   nowrap button whose min-content width (~362px) exceeds small viewports and
   forces the footer grid wider than the screen (entire brand column pushed
   off-viewport ≤375px; third footer column pushed off-screen at 768px).
   Fix: let this one button wrap, and let footer grid items shrink. */
.footer-cta{white-space:normal; text-align:center; line-height:1.35;}
.footer-top > *{min-width:0;}

/* Phase 5.4(c) — buttons are globally white-space:nowrap; long labels (e.g.
   "Get a Free Estimate in San Bernardino" in sidebar cards) have a min-content
   width larger than small viewports, which inflates their grid track and
   pushes the whole content column off-screen. On small screens, let ALL
   buttons wrap. (Replaces the earlier, too-narrow hero-only rule.) */
@media (max-width:640px){
  .btn{white-space:normal; line-height:1.35;}
}


/* ================= Phase 5.5 — RESPONSIVE HEADER REBUILD =================
   Spec: 1600+  = Logo | Nav | Phone | CTA
         1100–1599 = Logo | Nav | CTA (phone becomes an icon)
         <1100  = Logo | hamburger (standard off-canvas menu; CTA inside menu
                  + persistent mobile call bar)
   Flexbox only — no absolute hacks, no negative margins, no transforms in the
   header bar. Nav gap and logo compress fluidly before anything collapses. */

.header-inner{display:flex; align-items:center; justify-content:space-between;
  gap:clamp(10px, 1.4vw, 24px); padding:14px clamp(16px, 2vw, 28px);
  max-width:1400px; margin:0 auto;}
.brand{flex:0 1 auto; min-width:0; gap:12px;}
.brand img{height:clamp(48px, 3.4vw, 64px); width:auto; flex:none;}
.brand > span{min-width:0;}
.main-nav{flex:1 1 auto; min-width:0; display:flex; align-items:center;
  justify-content:center; gap:clamp(8px, 1.5vw, 30px); flex-wrap:nowrap;}
.main-nav a{white-space:nowrap; font-size:clamp(0.88rem, 0.95vw, 0.98rem); padding:8px 2px;}
.main-nav .btn--primary{display:none;}            /* desktop shows ONE CTA (in header-actions) */
.header-actions{flex:0 0 auto; display:flex; align-items:center; gap:clamp(10px, 1.2vw, 20px);}
.header-actions .btn--primary{white-space:nowrap;}
.header-phone{white-space:nowrap;}

/* Laptop 1100–1599: phone collapses to an icon */
@media (max-width:1599px){
  .header-phone .phone-num{display:none;}
  .header-phone{font-size:1.15rem; padding:6px;}
}

/* Tablet & below (<1100): hamburger + standard mobile menu */
@media (max-width:1099px){
  .top-bar{display:none;}
  .nav-toggle{display:block;}
  .header-actions{display:none;}
  .main-nav{
    position:fixed; left:0; right:0; bottom:0; top:var(--header-h, 89px);
    background:#fff; flex-direction:column; align-items:flex-start;
    justify-content:flex-start; padding:24px; gap:2px;
    transform:translateX(100%); transition:transform 0.25s ease; overflow-y:auto;
  }
  .main-nav.is-open{transform:translateX(0);}
  .main-nav a{width:100%; padding:14px 12px; font-size:1rem; white-space:normal;}
  .main-nav .btn--primary{display:flex; margin-top:12px; width:100%; justify-content:center;}
  .mobile-call-bar{display:block;}
  body{padding-bottom:58px;}
}


/* ================= Phase 6.4 — Visual polish ================= */
/* Photo hero: dark green brand overlay for headline readability */
/* replaced by pre-launch layered overlay below */
.hero-rotate{position:absolute; inset:0;}
.hero-rotate picture, .hero-rotate img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-rotate img{opacity:0; transition:opacity 1.8s ease;}
.hero-rotate img.is-active{opacity:1;}

/* Photography breathing room */
.section--projects{padding-top:calc(var(--sp-7) + 12px); padding-bottom:calc(var(--sp-7) + 12px);}
.section--projects .section-head{margin-bottom:40px;}
.section--projects .section-head h2{margin:14px 0 16px;}
.projects-grid--large{gap:34px;}
.project-card figcaption strong{color:var(--green); font-size:1.02rem;}
.project-card a.pw-lb{display:block; cursor:zoom-in;}

/* Lightbox */
.pw-lightbox-overlay{position:fixed; inset:0; z-index:200; background:rgba(8,20,14,0.92);
  display:flex; align-items:center; justify-content:center; padding:4vh 4vw; cursor:zoom-out;}
.pw-lightbox-overlay img{max-width:100%; max-height:100%; width:auto; height:auto;
  border-radius:8px; box-shadow:0 12px 60px rgba(0,0,0,0.6);}
.pw-lightbox-overlay .pw-lb-close{position:absolute; top:18px; right:24px; font-size:2rem;
  color:#fff; background:none; border:none; cursor:pointer; line-height:1;}

/* Phase 6.4(b): the photo hero carries a dark overlay — headline and lede must be light */
.hero:not(.hero--interior) h1{color:#fff;}
.hero:not(.hero--interior) .hero-inner p, .hero:not(.hero--interior) .lede{color:#EAF4EE;}
.hero:not(.hero--interior) .eyebrow{color:var(--amber);}

/* Hero focal point: keep the rig centered in the visible band at all aspect ratios */
.hero-bg img{object-position: 46% 62%;}

/* Pre-launch polish: darker overlay over the text side only + readable headline */
.hero-overlay{background:
  linear-gradient(100deg, rgba(10,46,28,0.55) 0%, rgba(10,46,28,0.28) 52%, rgba(10,46,28,0.05) 78%),
  linear-gradient(180deg, rgba(15,61,38,0.62) 0%, rgba(15,61,38,0.55) 55%, rgba(10,46,28,0.70) 100%);}
.hero:not(.hero--interior) h1{text-shadow:0 2px 14px rgba(0,0,0,0.35);}
.hero:not(.hero--interior) .hero-inner p{text-shadow:0 1px 8px rgba(0,0,0,0.3);}
.section--projects .section-head{margin-bottom:52px;}
.showcase-grid{gap:40px;}

/* Accessibility: skip link + visible keyboard focus */
.skip-link{position:absolute; left:-9999px; top:0; z-index:300; background:var(--green); color:#fff;
  padding:10px 18px; border-radius:0 0 8px 0; font-weight:600;}
.skip-link:focus{left:0;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--amber); outline-offset:2px;}

/* Tap-target fix: the call-bar link fills the bar (48px+ touch target) */
.mobile-call-bar a{display:flex; align-items:center; justify-content:center; min-height:48px; width:100%;}
.mobile-call-bar{padding:5px 0;}