/* =========================================================
   V&A CONTRACTING LLC — Premium Site Styles
   Palette: dark chocolate / deep brown / bronze / sand / off-white
   Type: Big Shoulders Display (industrial display) + Inter (body)
========================================================= */

:root{
  --dark:#2A160D;
  --dark-2:#20100a;
  --brown-deep:#4A2818;
  --bronze:#8A5A32;
  --bronze-light:#a5713f;
  --sand:#C79A62;
  --sand-light:#dcb886;
  --offwhite:#F3EEE8;
  --white:#FFFFFF;
  --ink:#1c0f08;
  --muted:#6d5d4f;
  --muted-2:#a99a8c;
  --border:#e4d8c6;
  --border-dark:rgba(243,238,232,0.14);

  --shadow-sm:0 4px 16px rgba(20,10,5,0.10);
  --shadow-md:0 16px 44px rgba(20,10,5,0.16);
  --shadow-lg:0 30px 70px rgba(20,10,5,0.30);

  --radius:20px;
  --radius-sm:12px;

  --font-display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --header-h:92px;
  --header-h-scrolled:74px;

  --ease:cubic-bezier(.22,.68,.34,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:100px;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:0.98;
  font-weight:700;
  margin:0;
  text-wrap:balance;
}
p{margin:0;}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px;}

.container{width:100%;max-width:1320px;margin:0 auto;padding:0 32px;}
.container-narrow{max-width:840px;}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
.reveal-delay-4{transition-delay:.32s;}
.reveal-delay-5{transition-delay:.4s;}
.reveal-delay-6{transition-delay:.48s;}

/* ---------- Eyebrow / dividers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-body);
  font-size:12.5px;font-weight:700;
  letter-spacing:3.5px;text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:18px;
}
.eyebrow::before{content:'';display:block;width:34px;height:1px;background:var(--sand);}
.eyebrow.on-dark{color:var(--sand-light);}
.eyebrow.center{justify-content:center;margin-left:auto;margin-right:auto;}

.section-head{max-width:680px;margin-bottom:56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(34px,4.6vw,58px);}
.section-sub{color:var(--muted);font-size:17.5px;margin-top:18px;max-width:56ch;}
.section-head.center .section-sub{margin-left:auto;margin-right:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:18px 34px;border-radius:8px;
  font-family:var(--font-body);
  font-weight:700;font-size:13.5px;letter-spacing:1.6px;text-transform:uppercase;
  border:1.5px solid transparent;white-space:nowrap;
  transition:transform .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-block{width:100%;}

.btn-primary{background:var(--bronze);color:var(--white);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--sand);color:var(--dark);box-shadow:var(--shadow-md);transform:translateY(-2px);}

.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.55);color:var(--white);}
.btn-outline-light:hover{background:rgba(255,255,255,.1);border-color:var(--white);transform:translateY(-2px);}

.btn-outline-dark{background:transparent;border-color:var(--dark);color:var(--dark);}
.btn-outline-dark:hover{background:var(--dark);color:var(--white);transform:translateY(-2px);}

.btn-ghost-dark{background:transparent;border-color:var(--border-dark);color:var(--offwhite);}
.btn-ghost-dark:hover{border-color:var(--sand);color:var(--sand-light);}

/* =========================================================
   HEADER
========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  height:var(--header-h);
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(20,10,5,.55) 0%,rgba(20,10,5,0) 100%);
  transition:background-color .4s var(--ease),height .4s var(--ease),box-shadow .4s var(--ease);
}
.site-header.scrolled{
  height:var(--header-h-scrolled);
  background:rgba(32,16,10,.96);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 6px 24px rgba(0,0,0,.22);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px;}

.logo-link{display:flex;align-items:center;}
.logo-placeholder{display:flex;flex-direction:column;line-height:1;font-family:var(--font-display);}
.logo-mark{font-size:30px;font-weight:800;color:var(--white);letter-spacing:.5px;}
.logo-text{
  font-family:var(--font-body);
  font-size:9.5px;font-weight:700;letter-spacing:3px;
  color:var(--sand-light);text-transform:uppercase;margin-top:3px;
}

.main-nav ul{display:flex;gap:38px;}
.main-nav a{
  font-size:13.5px;font-weight:600;letter-spacing:.4px;
  color:rgba(255,255,255,.92);position:relative;padding:6px 0;
}
.main-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--sand);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.main-nav a:hover::after{transform:scaleX(1);}

.header-actions{display:flex;align-items:center;gap:22px;}
.header-phone{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--white);}
.header-phone .icon{color:var(--sand);}
.btn-header{display:none;padding:14px 26px;}

.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0;
}
.hamburger span{display:block;height:2px;width:24px;background:var(--white);transition:transform .3s var(--ease),opacity .3s var(--ease);}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  display:none;position:fixed;inset:0;z-index:499;
  background:var(--dark);padding:calc(var(--header-h) + 20px) 32px 40px;
  flex-direction:column;gap:8px;overflow-y:auto;
}
.mobile-nav.open{display:flex;}
.mobile-nav ul{display:flex;flex-direction:column;}
.mobile-nav ul a{
  display:block;padding:17px 0;font-family:var(--font-display);
  font-size:26px;font-weight:700;color:var(--white);
  border-bottom:1px solid var(--border-dark);
}
.mobile-nav-ctas{display:flex;flex-direction:column;gap:14px;margin-top:28px;}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  height:100vh;height:100svh;min-height:640px;
  display:flex;align-items:flex-end;
  color:var(--white);overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;background-color:var(--dark);
  background-size:cover;background-position:center;
  animation:heroKen 18s ease-in-out infinite alternate;
}
@keyframes heroKen{from{transform:scale(1);}to{transform:scale(1.08);}}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(20,10,5,.35) 0%, rgba(20,10,5,.35) 30%, rgba(20,10,5,.86) 88%, rgba(20,10,5,.96) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(20,10,5,0) 40%, rgba(20,10,5,.5) 100%);
}
.hero-content{position:relative;z-index:2;padding:0 0 96px;width:100%;}
.hero-inner{max-width:920px;}

.location-badge{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12.5px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--sand-light);margin-bottom:26px;
}
.location-badge::before{content:'';display:block;width:34px;height:1px;background:var(--sand);}

.hero-title{
  font-size:clamp(42px,7.4vw,104px);
  font-weight:800;
  color:var(--white);
  margin-bottom:26px;
}
.hero-title em{
  font-style:normal;
  color:var(--sand-light);
}
.hero-subtitle{
  font-family:var(--font-body);
  font-size:clamp(16px,1.6vw,19px);
  font-weight:400;
  max-width:600px;color:rgba(243,238,232,.86);
  margin-bottom:40px;
  line-height:1.7;
}

.hero-ctas{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:26px;}
.hero-ctas .btn{padding:20px 38px;}

.hero-phone-line{
  font-family:var(--font-display);
  font-size:22px;font-weight:700;color:var(--white);
  margin-bottom:36px;display:block;
}
.hero-phone-line a:hover{color:var(--sand-light);}

.hero-trust{display:flex;flex-wrap:wrap;gap:28px 40px;}
.hero-trust li{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:.3px;
  color:rgba(243,238,232,.82);
}
.hero-trust .dot{width:5px;height:5px;border-radius:50%;background:var(--sand);flex-shrink:0;}

.scroll-cue{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(243,238,232,.6);font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;
}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(180deg,rgba(243,238,232,.7),transparent);animation:scrollcue 2.2s ease-in-out infinite;}
@keyframes scrollcue{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}

/* =========================================================
   INTRO (asymmetric editorial)
========================================================= */
.intro{background:var(--white);padding:130px 0;}
.intro-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:center;}
.intro-media{position:relative;}
.intro-media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);background-color:var(--offwhite);
}
.intro-media::after{
  content:'';position:absolute;top:24px;left:24px;right:-24px;bottom:-24px;
  border:1.5px solid var(--sand);border-radius:var(--radius);z-index:-1;
}
.intro-content h2{font-size:clamp(32px,4.6vw,54px);margin-bottom:26px;}
.intro-content p{color:var(--muted);font-size:18px;line-height:1.75;max-width:52ch;}
.intro-stats{display:flex;gap:44px;margin-top:44px;flex-wrap:wrap;}
.intro-stats .stat-label{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.3px;max-width:22ch;position:relative;padding-left:20px;}
.intro-stats .stat-label::before{content:'';position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:2px;background:var(--bronze);transform:rotate(45deg);}

/* =========================================================
   SERVICES — editorial masonry grid
========================================================= */
.services{background:var(--offwhite);padding:130px 0;}
.services-grid{display:grid;grid-template-columns:1fr;gap:20px;}
.service-tile{
  position:relative;overflow:hidden;border-radius:var(--radius);
  min-height:280px;display:block;
  box-shadow:var(--shadow-sm);
}
.service-tile.size-large{min-height:420px;}
.service-tile-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:var(--brown-deep);
  transition:transform .8s var(--ease);
}
.service-tile:hover .service-tile-img{transform:scale(1.08);}
.service-tile-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,10,5,.12) 0%, rgba(20,10,5,.78) 100%);
  transition:background .4s var(--ease);
}
.service-tile:hover .service-tile-overlay{background:linear-gradient(180deg, rgba(20,10,5,.28) 0%, rgba(20,10,5,.88) 100%);}
.service-tile-body{
  position:absolute;left:0;right:0;bottom:0;padding:30px 30px 28px;color:var(--white);
}
.service-tile-line{width:38px;height:2px;background:var(--sand);margin-bottom:16px;transition:width .4s var(--ease);}
.service-tile:hover .service-tile-line{width:64px;}
.service-tile h3{font-size:clamp(20px,2vw,28px);font-weight:700;margin-bottom:8px;color: #bc945b;}
.service-tile p{font-family:var(--font-body);font-size:14.5px;color:rgba(243,238,232,.82);max-width:34ch;margin-bottom:14px;}
.service-tile-cta{
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--sand-light);display:inline-flex;align-items:center;gap:8px;
}
.service-tile-cta svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.service-tile:hover .service-tile-cta svg{transform:translateX(5px);}

/* =========================================================
   FULL-BLEED CINEMATIC CTA
========================================================= */
.cine-cta{position:relative;padding:150px 0;color:var(--white);overflow:hidden;text-align:center;}
.cine-cta-bg{position:absolute;inset:0;background-color:var(--dark);background-size:cover;background-position:center;}
.cine-cta-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,10,5,.72), rgba(20,10,5,.88));}
.cine-cta-content{position:relative;z-index:2;max-width:700px;margin:0 auto;}
.cine-cta-content h2{color:var(--white);font-size:clamp(32px,5vw,56px);margin-bottom:20px;}
.cine-cta-content p{color:rgba(243,238,232,.85);font-size:18px;margin-bottom:40px;}
.cine-cta-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;}

@media (min-width:900px){
  .cine-cta-bg{background-attachment:fixed;}
}

/* =========================================================
   ABOUT — split screen
========================================================= */
.about{background:var(--white);}
.about-split{display:grid;grid-template-columns:1fr;}
.about-media{position:relative;min-height:420px;}
.about-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-color:var(--offwhite);}
.about-content{padding:90px 32px;display:flex;flex-direction:column;justify-content:center;}
.about-content-inner{max-width:520px;margin:0 auto;width:100%;}
.about-content h2{font-size:clamp(30px,4vw,46px);margin-bottom:22px;}
.about-content p{color:var(--muted);font-size:17.5px;line-height:1.75;margin-bottom:36px;}
.about-features{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:40px;}
.about-features li{
  display:flex;align-items:center;gap:14px;font-weight:600;font-size:15px;color:var(--ink);
  padding-bottom:16px;border-bottom:1px solid var(--border);
}
.about-features li svg{width:18px;height:18px;color:var(--bronze);flex-shrink:0;}

/* =========================================================
   GALLERY — editorial grid
========================================================= */
.gallery{background:var(--offwhite);padding:130px 0;}
.gallery-grid{display:grid;grid-template-columns:1fr;gap:18px;}
.gallery-item{position:relative;overflow:hidden;border-radius:var(--radius-sm);display:block;width:100%;min-height:240px;border:none;padding:0;box-shadow:var(--shadow-sm);}
.gallery-item.size-lg{min-height:340px;}
.gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-color:var(--beige-200,var(--border));transition:transform .7s var(--ease);}
.gallery-item:hover img{transform:scale(1.09);}
.gallery-item::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,10,5,0) 50%, rgba(20,10,5,.72) 100%);
  opacity:.75;transition:opacity .4s var(--ease);
}
.gallery-item:hover::after{opacity:1;}
.gallery-tag{
  position:absolute;left:20px;bottom:18px;z-index:2;color:var(--white);
  font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
}
.gallery-tag::after{content:'';display:block;width:0;height:2px;background:var(--sand);margin-top:8px;transition:width .35s var(--ease);}
.gallery-item:hover .gallery-tag::after{width:32px;}

.lightbox{display:none;position:fixed;inset:0;background:rgba(15,8,4,.96);z-index:600;align-items:center;justify-content:center;padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:88vh;border-radius:8px;}
.lightbox-close{position:absolute;top:24px;right:28px;color:var(--white);font-size:38px;line-height:1;}

/* =========================================================
   WHY CHOOSE US — dark minimal rows
========================================================= */
.why-us{background:var(--dark);color:var(--offwhite);padding:130px 0;}
.why-us .section-head h2{color:var(--white);}
.why-rows{border-top:1px solid var(--border-dark);}
.why-row{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;
  padding:38px 0;border-bottom:1px solid var(--border-dark);
  transition:padding-left .4s var(--ease);
}
.why-row:hover{padding-left:16px;}
.why-num{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--sand);letter-spacing:1px;}
.why-row h3{font-family:var(--font-display);font-size:clamp(22px,3vw,34px);font-weight:700;color:var(--white);}
.why-row p{font-family:var(--font-body);color:var(--muted-2);font-size:15px;margin-top:8px;max-width:52ch;}

/* =========================================================
   HOW IT WORKS
========================================================= */
.how-it-works{background:var(--white);padding:130px 0;}
.steps-row{display:grid;grid-template-columns:1fr;gap:0;position:relative;}
.step{position:relative;padding:0 0 40px;border-bottom:1px solid var(--border);margin-bottom:40px;}
.step:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.step-num{
  font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--sand);
  letter-spacing:2px;display:block;margin-bottom:14px;
}
.step h3{font-size:23px;font-weight:700;margin-bottom:10px;}
.step p{color:var(--muted);font-size:15px;line-height:1.6;max-width:34ch;}
.how-cta{margin-top:56px;}

/* =========================================================
   SERVICE AREA / MAP
========================================================= */
.service-area{background:var(--offwhite);padding:130px 0;}
.area-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:stretch;}
.area-info{
  background:var(--white);border-radius:var(--radius);
  padding:44px 36px;border:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;
}
.area-info h3{font-size:26px;margin-bottom:22px;}
.area-info .info-list{display:flex;flex-direction:column;gap:16px;margin-bottom:30px;}
.area-info .info-list li{display:flex;align-items:center;gap:14px;font-weight:600;font-size:16px;}
.area-info .info-list .icon{color:var(--bronze);width:20px;height:20px;flex-shrink:0;}
.area-services{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px;}
.area-services li{background:var(--offwhite);border:1px solid var(--border);padding:8px 16px;border-radius:30px;font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--brown-deep);}
.area-buttons{display:flex;flex-wrap:wrap;gap:14px;}

.area-map{
  min-height:380px;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-md);border:1px solid var(--border);
  background:var(--white);
}
.area-map iframe{display:block;width:100%;height:100%;min-height:380px;border:0;}
.map-caption{text-align:center;margin-top:26px;color:var(--muted);font-size:14.5px;}

@media (min-width:900px){
  .area-grid{grid-template-columns:0.85fr 1.15fr;}
  .area-map{min-height:450px;}
  .area-map iframe{min-height:450px;}
}

/* =========================================================
   ESTIMATE FORM
========================================================= */
.estimate{background:var(--dark);color:var(--white);padding:130px 0;}
.estimate .eyebrow{color:var(--sand-light);}
.estimate-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:center;}
.estimate-intro h2{color:var(--white);font-size:clamp(32px,4.4vw,50px);margin-bottom:22px;}
.estimate-intro p{color:rgba(243,238,232,.78);font-size:17.5px;line-height:1.75;margin-bottom:36px;max-width:46ch;}
.estimate-phone-block{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.estimate-phone-block .phone-num{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);font-weight:700;color:var(--sand-light);}
.estimate-phone-block .phone-num:hover{color:var(--sand);}

.estimate-card{background:var(--white);border-radius:var(--radius);padding:44px 36px;color:var(--ink);box-shadow:var(--shadow-lg);}
.form-row{margin-bottom:20px;}
.form-row label{display:block;font-weight:700;font-size:13px;letter-spacing:.3px;margin-bottom:8px;color:var(--ink);}
.req{color:var(--bronze);}
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:15px 16px;border:1.5px solid var(--border);border-radius:8px;
  font-size:15.5px;font-family:inherit;color:var(--ink);background:var(--offwhite);
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--bronze);box-shadow:0 0 0 4px rgba(138,90,50,.14);background:var(--white);
}
.form-row textarea{resize:vertical;min-height:104px;}
.error-msg{display:none;color:#a53a2b;font-size:12.5px;margin-top:7px;font-weight:600;}
.form-row.has-error input,.form-row.has-error select,.form-row.has-error textarea{border-color:#a53a2b;}
.form-row.has-error .error-msg{display:block;}

.form-success{margin-top:8px;background:var(--offwhite);border:1.5px solid var(--sand);border-radius:12px;padding:26px;text-align:center;}
.form-success h3{color:var(--ink);margin-bottom:8px;font-size:22px;}
.form-success p{margin:0;color:var(--muted);}

@media (min-width:960px){
  .estimate-grid{grid-template-columns:0.85fr 1.15fr;}
}

/* =========================================================
   FAQ
========================================================= */
.faq{background:var(--white);padding:130px 0;}
.accordion-item{border-bottom:1px solid var(--border);}
.accordion-item:first-child{border-top:1px solid var(--border);}
.accordion-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:30px 2px;text-align:left;
  font-family:var(--font-display);font-size:clamp(18px,2.1vw,24px);font-weight:700;color:var(--ink);
}
.accordion-icon{flex-shrink:0;width:22px;height:22px;position:relative;}
.accordion-icon::before,.accordion-icon::after{content:'';position:absolute;background:var(--bronze);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease);}
.accordion-icon::before{left:0;top:50%;width:100%;height:2px;transform:translateY(-50%);}
.accordion-icon::after{top:0;left:50%;width:2px;height:100%;transform:translateX(-50%);}
.accordion-trigger[aria-expanded="true"] .accordion-icon::after{opacity:0;transform:translateX(-50%) rotate(90deg);}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.accordion-panel p{padding:0 2px 30px;color:var(--muted);font-size:16px;line-height:1.7;max-width:64ch;margin:0;}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{background:var(--dark-2);color:rgba(243,238,232,.72);padding:90px 0 0;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:44px;padding-bottom:56px;border-bottom:1px solid var(--border-dark);}
.footer-brand .logo-mark{color:var(--white);}
.footer-brand .logo-text{color:var(--sand);}
.footer-brand p{font-size:14.5px;margin-top:20px;max-width:300px;line-height:1.7;}
.footer-col h4{font-family:var(--font-body);color:var(--white);font-size:12.5px;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col ul li,.footer-col ul a{font-size:14.5px;}
.footer-col ul a:hover{color:var(--sand-light);}
.footer-bottom{text-align:center;padding:26px 20px 110px;font-size:13px;color:rgba(243,238,232,.5);}

/* =========================================================
   MOBILE STICKY BAR
========================================================= */
.mobile-sticky-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:400;box-shadow:0 -8px 24px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom,0);}
.sticky-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:18px 10px;font-weight:700;font-size:13.5px;letter-spacing:1.2px;text-transform:uppercase;}
.sticky-call{background:var(--dark);color:var(--white);}
.sticky-estimate{background:var(--bronze);color:var(--white);}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (min-width:640px){
  .intro-stats{gap:60px;}
}
@media (min-width:760px){
  .services-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;}
  .service-tile{min-height:0;}
  .service-tile.size-large{min-height:0;}
  .st-land{grid-column:1/3;grid-row:1/3;}
  .st-grading{grid-column:3/5;grid-row:1/2;}
  .st-driveways{grid-column:3/5;grid-row:2/3;}
  .st-septic{grid-column:1/3;grid-row:3/5;}
  .st-excavation{grid-column:3/5;grid-row:3/4;}
  .st-footings{grid-column:3/4;grid-row:4/5;}
  .st-erosion{grid-column:4/5;grid-row:4/5;}

  .gallery-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;}
  .gallery-item{min-height:0;}
  .g-1{grid-column: 1 / 3; grid-row: 1 / 3;}
  .g-2{grid-column:3/5;grid-row:1/2;}
  .g-3{grid-column:3/4;grid-row:2/4;}
  .g-4{grid-column:4/5;grid-row:2/4;}
  .g-5{grid-column:1/2;grid-row:3/4;}
  .g-6 { grid-column: 2 / 3; grid-row: 3 / 4; }
}

@media (min-width:860px){
  .intro-grid{grid-template-columns:1fr 1fr;gap:90px;}
  .intro{padding:170px 0;}
  .about-features{grid-template-columns:1fr 1fr;column-gap:28px;}
}
@media (min-width:900px){
  .main-nav{display:block;}
  .hamburger{display:none;}
  .mobile-nav{display:none !important;}
  .btn-header{display:inline-flex;}
  .mobile-sticky-bar{display:none;}
  body{padding-bottom:0;}
  .about-split{grid-template-columns:1fr 1fr;}
  .about-media{min-height:auto;}
}
@media (max-width:899px){
  .main-nav{display:none;}
  .hamburger{display:flex;}
  .header-actions{display:none;}
  body{padding-bottom:66px;}
}
@media (min-width:1080px){
  .estimate-grid{grid-template-columns:0.8fr 1.2fr;}
}

@media (max-width:520px){
  .container{padding:0 20px;}
  .hero-ctas .btn,.cine-cta-buttons .btn{width:100%;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .cine-cta-buttons{flex-direction:column;align-items:stretch;}
  .area-buttons{flex-direction:column;align-items:stretch;}
  .area-buttons .btn{width:100%;}
  .intro{padding:90px 0;}
  .services,.gallery,.why-us,.how-it-works,.service-area,.estimate,.faq{padding:90px 0;}
  .cine-cta{padding:100px 0;}
}

/* Prevent grid/flex children from forcing horizontal overflow
   (default min-width:auto on grid/flex items sizes them to their
   content's intrinsic max-content width, which can exceed a
   narrow viewport even though the track is nominally 1fr). */
.hero-ctas>*,.cine-cta-buttons>*,.area-buttons>*,.footer-grid>*,.about-features>*,
.hero-trust>li,.info-list>li,.intro-stats>*,
.intro-grid>*,.about-split>*,.area-grid>*,.estimate-grid>*,
.services-grid>*,.gallery-grid>*,.why-rows>*,.steps-row>*{min-width:0;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{transition:none;opacity:1;transform:none;}
  .hero-bg{animation:none;}
  *{animation-duration:.001ms !important;}
}

/* =========================================================
   ADDED — Hero lead form, floating call button, reviews.
   Appended only: no existing rule above this line was
   changed or removed.
========================================================= */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* --- Hero: two-column layout to host the new lead-form card --- */
.hero-grid{display:flex;flex-direction:column;gap:36px;}
.hero-grid>*{min-width:0;}
.hero-form-wrap{width:100%;}

.hero-lead-form{
  background:rgba(32,16,10,.74);
  border:1px solid rgba(199,154,98,.35);
  border-radius:var(--radius);
  padding:32px 28px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-lg);
  max-width:420px;
}
.hero-form-title{
  font-family:var(--font-display);
  color:var(--white);
  font-size:23px;
  font-weight:800;
  letter-spacing:.3px;
  margin-bottom:8px;
}
.hero-form-sub{
  font-family:var(--font-body);
  color:rgba(243,238,232,.78);
  font-size:13.5px;
  line-height:1.6;
  margin-bottom:22px;
}
.hlf-row{margin-bottom:13px;}
.hlf-row:last-of-type{margin-bottom:20px;}
.hero-lead-form input,.hero-lead-form textarea{
  width:100%;
  padding:14px 16px;
  border-radius:8px;
  border:1.5px solid rgba(243,238,232,.22);
  background:rgba(243,238,232,.08);
  color:var(--white);
  font-family:inherit;
  font-size:14.5px;
  transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease;
}
.hero-lead-form input::placeholder,.hero-lead-form textarea::placeholder{color:rgba(243,238,232,.52);}
.hero-lead-form input:focus,.hero-lead-form textarea:focus{
  outline:none;border-color:var(--sand);background-color:rgba(243,238,232,.14);
  box-shadow:0 0 0 4px rgba(199,154,98,.18);
}
.hero-lead-form textarea{resize:vertical;min-height:64px;}
.hlf-row.has-error input,.hlf-row.has-error textarea{border-color:#d98a5a;}
.hero-form-success{
  background:rgba(199,154,98,.14);
  border:1px solid var(--sand);
  border-radius:10px;
  padding:18px;
  text-align:center;
}
.hero-form-success p{color:var(--offwhite);font-size:14px;line-height:1.6;margin:0;}
.hero-form-success a{color:var(--sand-light);font-weight:700;}

@media (min-width:1150px){
  .hero-grid{display:grid;grid-template-columns:1fr 400px;align-items:end;gap:52px;}
}

/* Hero grows to fit the added form on smaller screens instead of clipping it */
@media (max-width:1149px){
  .hero{height:auto;min-height:100svh;overflow:visible;}
  .hero-content{padding:calc(var(--header-h) + 34px) 0 64px;}
  .scroll-cue{display:none;}
}

/* --- Floating call button --- */
.floating-call-btn{
  position:fixed;right:24px;bottom:28px;z-index:450;
  display:flex;align-items:center;gap:10px;
  background:var(--bronze);color:var(--white);
  border-radius:999px;
  box-shadow:0 10px 30px rgba(20,10,5,.35);
  padding:16px;
  transition:transform .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.floating-call-btn:hover,.floating-call-btn:focus-visible{
  background:var(--sand);color:var(--dark);
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(20,10,5,.42);
}
.floating-call-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;}
.floating-call-icon svg{width:100%;height:100%;}
.floating-call-label{
  font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;
  white-space:nowrap;max-width:0;overflow:hidden;opacity:0;
  transition:max-width .35s var(--ease),opacity .3s var(--ease),margin .35s var(--ease);
}
@media (min-width:900px){
  .floating-call-btn:hover .floating-call-label,.floating-call-btn:focus-visible .floating-call-label{
    max-width:110px;opacity:1;margin-right:2px;
  }
}
@media (max-width:899px){
  .floating-call-btn{bottom:82px;right:18px;padding:15px;}
}

/* --- Reviews section --- */
.reviews{background:var(--offwhite);padding:130px 0;}
.reviews-wrap{position:relative;display:flex;align-items:center;gap:16px;}
.reviews-track{display:grid;grid-template-columns:1fr;gap:22px;width:100%;}
.reviews-track>*{min-width:0;}
.review-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:34px 30px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:16px;position:relative;
}
.review-card::before{content:'';position:absolute;top:0;left:30px;width:34px;height:3px;background:var(--sand);}
.review-stars{color:var(--bronze);font-size:16px;letter-spacing:3px;}
.review-text{color:var(--muted);font-size:15.5px;line-height:1.75;flex:1;}
.review-footer{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--border);}
.review-name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);}
.review-label{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--bronze);}

.reviews-arrow{
  display:none;flex-shrink:0;width:46px;height:46px;border-radius:50%;
  align-items:center;justify-content:center;
  border:1.5px solid var(--border);background:var(--white);color:var(--brown-deep);
  box-shadow:var(--shadow-sm);
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.reviews-arrow svg{width:18px;height:18px;}
.reviews-arrow:hover{background:var(--bronze);border-color:var(--bronze);color:var(--white);}

@media (min-width:860px){
  .reviews-track{grid-template-columns:repeat(3,1fr);gap:26px;}
}
@media (max-width:859px){
  .reviews-track{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:18px;padding-bottom:6px;scrollbar-width:none;
    width:100%;
  }
  .reviews-track::-webkit-scrollbar{display:none;}
  .review-card{flex:0 0 100%;scroll-snap-align:center;}
  /* Arrows overlay the card edges instead of flanking it, so the
     card itself can use the full container width on phones. */
  .reviews-arrow{display:flex;position:absolute;top:50%;transform:translateY(-50%);z-index:2;}
  .reviews-arrow-prev{left:-6px;}
  .reviews-arrow-next{right:-6px;}
}
@media (max-width:480px){
  .reviews-arrow{width:38px;height:38px;}
  .reviews-arrow svg{width:15px;height:15px;}
  .reviews-arrow-prev{left:-4px;}
  .reviews-arrow-next{right:-4px;}
  .review-card{padding:28px 22px;}
  .review-footer{flex-direction:column;align-items:flex-start;gap:6px;}
}

/* =========================================================
   ADDED (session 2) — compact desktop footer + social icons,
   horizontal "How It Works" / "Why Choose Us" on tablet and
   desktop, shared form-field styling, estimate modal, mobile
   input font-size fix. Appended only; nothing above this line
   was changed or removed.
========================================================= */

/* --- Footer: social icons + compact horizontal layout on desktop --- */
.footer-social{display:flex;gap:12px;margin-top:22px;}
.social-icon{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-dark);color:rgba(243,238,232,.72);
  transition:border-color .25s ease,color .25s ease,background-color .25s ease;
}
.social-icon svg{width:17px;height:17px;}
.social-icon:hover{border-color:var(--sand);color:var(--sand-light);background:rgba(199,154,98,.12);}

@media (min-width:900px){
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;}
  .site-footer{padding-top:64px;}
  .footer-bottom{padding:20px 20px 22px;}
}

/* --- How It Works: horizontal row on tablet (2x2) and desktop (1x4) --- */
@media (min-width:600px){
  .steps-row{grid-template-columns:repeat(2,1fr);column-gap:44px;row-gap:40px;}
  .step{border-bottom:none;margin-bottom:0;padding-bottom:0;}
}
@media (min-width:900px){
  .steps-row{grid-template-columns:repeat(4,1fr);column-gap:36px;row-gap:0;}
  .step{border-left:1px solid var(--border);padding-left:28px;}
  .step:first-child{border-left:none;padding-left:0;}
}

/* --- Why Choose Us: horizontal compact blocks on tablet (2x2) and desktop (1x4) --- */
@media (min-width:600px){
  .why-rows{border-top:none;display:grid;grid-template-columns:repeat(2,1fr);column-gap:40px;row-gap:36px;}
  .why-row{display:block;padding:0;border-bottom:none;}
  .why-row:hover{padding-left:0;}
}
@media (min-width:900px){
  .why-rows{grid-template-columns:repeat(4,1fr);column-gap:34px;}
  .why-row{border-left:1px solid var(--border-dark);padding-left:26px;}
  .why-row:first-child{border-left:none;padding-left:0;}
  .why-num{display:block;margin-bottom:12px;}
}

/* --- Shared premium form-field styling (hero form + modal form both use .hlf-row) --- */
.hlf-row input,.hlf-row textarea{
  width:100%;
  padding:14px 16px;
  border-radius:8px;
  border:1.5px solid rgba(243,238,232,.22);
  background:rgba(243,238,232,.08);
  color:var(--white);
  font-family:inherit;
  font-size:14.5px;
  transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease;
}
.hlf-row input::placeholder,.hlf-row textarea::placeholder{color:rgba(243,238,232,.52);}
.hlf-row input:focus,.hlf-row textarea:focus{
  outline:none;border-color:var(--sand);background-color:rgba(243,238,232,.14);
  box-shadow:0 0 0 4px rgba(199,154,98,.18);
}
.hlf-row textarea{resize:vertical;min-height:64px;}

/* --- Estimate modal (opened by Services section "Get an Estimate" CTAs) --- */
.estimate-modal{position:fixed;inset:0;z-index:700;display:none;align-items:center;justify-content:center;padding:24px;}
.estimate-modal.open{display:flex;}
.estimate-modal-overlay{position:absolute;inset:0;background:rgba(15,8,4,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.estimate-modal-dialog{
  position:relative;z-index:1;width:100%;max-width:460px;
  max-height:calc(100vh - 48px);overflow-y:auto;
  background:var(--dark);border:1px solid rgba(199,154,98,.35);
  border-radius:var(--radius);padding:40px 32px 34px;
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(24px) scale(.97);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.estimate-modal.open .estimate-modal-dialog{opacity:1;transform:translateY(0) scale(1);}
.estimate-modal-dialog .hero-form-title{font-size:24px;}
.estimate-modal-close{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(243,238,232,.7);font-size:26px;line-height:1;
  border:1px solid rgba(243,238,232,.18);
  transition:color .25s ease,border-color .25s ease,background-color .25s ease;
}
.estimate-modal-close:hover{color:var(--white);border-color:var(--sand);background:rgba(199,154,98,.12);}

@media (max-width:480px){
  .estimate-modal{padding:14px;}
  .estimate-modal-dialog{padding:34px 22px 28px;}
}

/* --- Mobile: ~16px minimum input font-size (prevents iOS Safari zoom-on-focus) --- */
@media (max-width:899px){
  .form-row input,.form-row select,.form-row textarea,
  .hlf-row input,.hlf-row textarea{
    font-size:16px;
  }
}

/* =========================================================
   ADDED (session 3) — MOBILE-ONLY FIXES.
   Everything in this block is scoped to max-width:899px (or
   narrower, where noted) and does not touch any desktop rule
   above this line. Desktop layout, colors, fonts and content
   are unchanged.
========================================================= */

/* --- 1. Center the hero / first screen on mobile --- */
/* --- 1. Center the hero / first screen on mobile --- */
@media (max-width:899px) {

  /* Redistribute the extra vertical space evenly above/below the
     content instead of dumping it all above (flex-end), so the
     first screen reads as balanced rather than bottom-crammed. */
  .hero {
    align-items: center;
  }

  /* Mobile crops this wide photo mostly horizontally (a tall narrow
     screen against a landscape image), so the x-position is what
     keeps the excavator itself in frame instead of the empty sunset
     sky on the left. */
  .hero-bg {
    background-position: 56% center;
  }

  .hero-content {
    text-align: center;
    padding: calc(var(--header-h) + 24px) 0 40px;
  }

  .hero-inner {
    max-width: 480px;
    margin: 0 auto;
  }

  .location-badge {
    justify-content: center;
  }

  .hero-ctas {
    justify-content: center;
  }

  .hero-trust {
    justify-content: center;
  }

  .hero-lead-form {
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
}

/* --- 2. Stronger, readability-focused overlay on mobile service cards ---
   Same image, same card design — just a gradient that stays lighter
   over the photo and ramps up sharply behind the title/description/CTA
   area, instead of a flat dark wash. No solid block, just a smoother,
   steeper gradient plus a very subtle text-shadow as insurance. */
@media (max-width:759px) {
  .service-tile-overlay {
    background: linear-gradient(180deg,
        rgba(20, 10, 5, .04) 0%,
        rgba(20, 10, 5, .22) 38%,
        rgba(20, 10, 5, .86) 68%,
        rgba(20, 10, 5, .94) 100%);
  }

  .service-tile h3,
  .service-tile p,
  .service-tile-cta {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  }
}

/* --- 3. Keep the mobile header genuinely fixed at the top ---
   .site-header is already position:fixed, but on some mobile
   browsers a fixed header combined with backdrop-filter (used for
   the frosted-glass "scrolled" background) can visibly jump or lag
   during scroll because the blur has to be recomputed every frame.
   The scrolled background is already 96% opaque, so dropping the
   blur on mobile only is visually a non-event while removing the
   most common cause of a mobile fixed header feeling like it
   "moves". Promoting the header to its own compositor layer further
   smooths out scroll rendering. */
@media (max-width:899px) {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .site-header,
  .site-header.scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* --- 4. Premium button shine + tap feedback (mobile only) ---
   A soft brand-colored highlight sweeps left-to-right across each
   button every few seconds, then pauses — not a constant flash.
   Implemented as an animated background-image layered on top of the
   button's existing background-color, so it never needs
   overflow:hidden and never clips the button's own box-shadow.
   prefers-reduced-motion is already handled by the site-wide rule
   above (max-width:899px only; desktop buttons are untouched). */
@media (max-width:899px) {
  .btn {
    position: relative;
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: -60% 0;
    background-image: linear-gradient(115deg,
        transparent 35%,
        rgba(220, 184, 134, .55) 50%,
        transparent 65%);
    transition: transform .3s var(--ease), background-color .3s var(--ease),
      box-shadow .3s var(--ease), border-color .3s var(--ease),
      color .3s var(--ease), filter .2s ease;
    -webkit-tap-highlight-color: transparent;
    animation: btnShine 6s ease-in-out infinite;
  }

  @keyframes btnShine {
    0% {
      background-position: -60% 0;
    }

    16% {
      background-position: 160% 0;
    }

    100% {
      background-position: 160% 0;
    }
  }
  /* Clear, premium tap feedback: slight scale-down, a touch brighter,
     and a soft bronze glow ring — distinct from the idle shine. */
    .btn:active {
      transform: translateY(1px) scale(.97);
      filter: brightness(1.12);
      box-shadow: 0 0 0 6px rgba(199, 154, 98, .28);
    }
    }

/* --- 5 & 6. Fix mobile CTA overlaps + safe-area spacing ---
   The floating call button already sits above the bottom sticky bar
   using a fixed offset (bottom:82px). On iPhones with a home-indicator
   safe area, the sticky bar grows taller (it already adds
   env(safe-area-inset-bottom) as padding) but the floating button's
   offset didn't grow with it — so on those devices the button could
   sit too low, right at the top edge of the taller bar. Adding the
   same safe-area amount to the floating button's offset keeps a
   consistent gap between them on every device. The page's reserved
   bottom space is extended the same way so the last bit of page
   content is never hidden behind the (now potentially taller) bar. */
@media (max-width:899px) {
  .floating-call-btn {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  body {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================
   ADDED (session 4) — full mobile-responsiveness pass.
   Fixes the two actual sources of horizontal overflow found
   by auditing every element's rendered position at 320-1024px
   (not just papering over it with overflow-x:hidden), plus
   defensive global safeguards. Nothing above this line was
   changed; desktop (>=1150px, where the two-column hero grid
   already takes over) is untouched.
========================================================= */

/* --- Real cause #1: the About-section image's decorative frame ---
   .intro-media::after is an offset border frame that intentionally
   bleeds 24px past the image on the right/bottom for a premium
   editorial look. That 24px bleed is fine wherever .container's own
   side padding is 32px (tablet/desktop), but at <=520px the container
   padding shrinks to 20px — 4px less than the frame's bleed — so the
   frame's own edge poked 4px past the actual viewport on every phone
   width. This was the single consistent source of the ~4px page-wide
   horizontal scroll reported on mobile. Fix: shrink the bleed on
   narrow screens so it always stays inside the container's padding,
   instead of hiding the symptom with overflow-x:hidden. */
@media (max-width:520px) {
  .intro-media::after {
    right: -12px;
    bottom: -12px;
  }

  .reviews-arrow-prev {
    left: 2px;
  }

  .reviews-arrow-next {
    right: 2px;
  }

  .hero-lead-form {
    padding: 24px 18px;
  }
}
/* --- Real cause #2: header content too wide at 900-1149px ---
   Between the "switch to hamburger" breakpoint (899px) and the
   "switch to the two-column hero grid" breakpoint (1150px), the full
   desktop header (logo + 6-item nav + phone number + "Get a Free
   Estimate" button) is shown but has less room than on a full desktop
   screen. At 1024px specifically the row's natural content width
   (~1026px) slightly exceeded the space available inside the
   container (~960px), pushing the header button past the right edge.
   Tightening the nav and header-actions gaps only in this narrow
   band reclaims exactly that space — same content, same button,
   same colors, just slightly closer together — without touching the
   nav/header at full desktop widths (>=1150px) or on mobile
   (<=899px, where this row isn't shown at all). */
@media (min-width:900px) and (max-width:1149px) {
  .main-nav ul {
    gap: 20px;
  }

  .header-actions {
    gap: 14px;
  }
}

/* --- Defensive global safeguards (belt-and-suspenders) ---
   body already had overflow-x:hidden; html did not. Per spec, the
   viewport's root scroller can be the <html> element, so a stray
   overflow contributor could still make the *page* horizontally
   scrollable even with body clipped. Adding the same protection to
   html closes that gap. This does not replace the real fixes above —
   it's a safety net for anything not yet found, exactly as
   requested. */
html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  max-width: 100%;
}

img,
video,
iframe {
  max-width: 100%;
}

.container,
section,
header,
footer,
main {
  max-width: 100%;
}
/* =========================================================
   ADDED (session 5) — new hero background photo.
   Desktop crops this wide photo mostly vertically (a short wide
   viewport against a landscape image), so the excavator — already
   composed on the right side of the source photo — stays fully
   visible at full width automatically; only the vertical slice needs
   tuning, and centering it keeps the sunset sky's open, darker-toned
   area on the left where the headline and CTA sit. Mobile's rule
   (max-width:899px) already overrides this with its own
   background-position tuned for that photo's horizontal crop.
========================================================= */
@media (min-width:900px) {
  .hero-bg {
    background-position: center 40%;
  }
}
/* =========================================================
   FIX: REVIEWS CAROUSEL ARROWS OVERLAPPING TEXT
========================================================= */

@media (max-width: 859px) {

  /* Забезпечуємо відступ усередині обгортки відгуків */
  .reviews-wrap {
    position: relative;
    padding: 0 8px;
  }

  /* Додаємо бокові відступи для самої картки, щоб текст не підлезав під стрілки */
  .reviews-track .review-card {
    padding-left: 52px !important;
    padding-right: 52px !important;
  }

  /* Позиціонуємо ліву та праву стрілки з безпечним відступом від країв */
  .reviews-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .reviews-arrow-prev {
    left: 10px !important;
  }

  .reviews-arrow-next {
    right: 10px !important;
  }
}

@media (max-width: 480px) {

  /* На дуже вузьких екранах трохи зменшуємо внутрішні відступи */
  .reviews-track .review-card {
    padding-left: 44px !important;
    padding-right: 44px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .reviews-arrow-prev {
    left: 4px !important;
  }

  .reviews-arrow-next {
    right: 4px !important;
  }
}
/* =========================================================
   FIX HEADER OVERLAPS (LOGO & HEADER ACTIONS)
========================================================= */

/* 1. Виправлення логотипа (щоб підпис не налізав на назву) */
.site-header .logo,
.site-header .logo-brand,
.site-header .logo-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}

.site-header .logo-sub,
.site-header .logo-tagline,
.site-header .logo span {
  position: static !important; /* прибираємо absolute, через який текст налізав */
  display: block !important;
  margin-top: 2px !important;
  line-height: 1 !important;
}

/* 2. Виправлення правої частини (телефон + кнопка) */
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important; /* відступ між телефоном і кнопкою */
}

.header-phone,
.site-header a[href^="tel"] {
  white-space: nowrap !important; /* забороняємо розрив номера */
  margin-right: 0 !important;
}

.btn-header {
  flex-shrink: 0 !important; /* забороняємо кнопці стискатися та налізати */
  white-space: nowrap !important;
}
.service-tile-img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.service-tile-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.4s ease;
}

.service-tile-img.img-secondary {
  opacity: 0;
}

.service-tile:hover .service-tile-img.img-secondary {
  opacity: 1;
}