/* ==========================================================================
   24 HR GARAGE DOOR PRO — stylesheet
   Palette:  --teal-900 (primary) / --ink (secondary, matches door slats)
             --paper (background) / --amber (accent, emergency/hazard cue)
   Type:     Archivo (headings, blocky/geometric — echoes the logo lettering)
             Work Sans (body)
   ========================================================================== */

:root{
  --teal-900:#12302E;
  --teal-800:#1C4441;
  --teal-700:#265B57;
  --ink:#1A1A1A;
  --paper:#FAF9F6;
  --paper-alt:#F1EFE9;
  --line:#E1DED4;
  --amber:#F2A93B;
  --amber-dark:#D98C1D;
  --white:#FFFFFF;

  --font-head:'Archivo', sans-serif;
  --font-body:'Work Sans', sans-serif;

  --radius:6px;
  --shadow-sm:0 1px 2px rgba(18,48,46,.08);
  --shadow-md:0 12px 28px -12px rgba(18,48,46,.28);
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--teal-900);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}

h1{font-size:clamp(2.4rem, 5vw, 3.6rem); font-weight:900;}
h2{font-size:clamp(1.7rem, 3.2vw, 2.4rem); font-weight:800;}
h3{font-size:1.15rem; font-weight:700; margin-bottom:.4em;}

p{margin:0 0 1em; max-width:62ch}

.eyebrow{
  font-family:var(--font-body);
  color:var(--teal-700);
  font-weight:600;
  font-size:.95rem;
  margin:0 0 .8em;
}

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.9em 1.6em;
  border-radius:var(--radius);
  font-weight:700;
  font-size:1rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:var(--amber);
  color:var(--teal-900);
}
.btn-primary:hover{background:var(--amber-dark)}
.btn-ghost{
  border-color:rgba(250,249,246,.35);
  color:var(--white);
}
.btn-ghost:hover{border-color:var(--white)}
.btn-full{width:100%}

/* ---------------- header ---------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:24px;
  padding-top:10px;
  padding-bottom:10px;
}
.brand-logo{height:54px;width:auto}

.main-nav{
  display:flex;
  gap:28px;
  margin-left:12px;
  flex:1;
}
.main-nav a{
  font-weight:600;
  font-size:.96rem;
  color:var(--teal-900);
  position:relative;
  padding:6px 0;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--amber);
  transform:scaleX(0);
  transition:transform .2s ease;
}
.main-nav a:hover::after{transform:scaleX(1)}

.phone-pill{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  background:var(--teal-900);
  color:var(--white);
  padding:.7em 1.2em;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
}
.phone-pill:hover{background:var(--teal-800)}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  background:none;
  border:none;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px;
  background:var(--teal-900);
  border-radius:2px;
}

/* ---------------- hero ---------------- */
.hero{
  background:var(--teal-900);
  color:var(--white);
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:48px;
  padding:76px 24px 64px;
}
.hero .eyebrow{color:var(--amber)}
.hero h1{color:var(--white)}
.hero-sub{color:rgba(250,249,246,.82); font-size:1.08rem;}
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:28px 0 30px;
}
.hero-trust{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  font-size:.9rem;
  font-weight:600;
  color:rgba(250,249,246,.75);
}
.hero-trust li{position:relative; padding-left:20px;}
.hero-trust li::before{
  content:"";
  position:absolute; left:0; top:.35em;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--amber);
}

/* hero door illustration */
.hero-visual{display:flex; justify-content:center;}
.door-frame{
  width:min(340px, 80vw);
  aspect-ratio:1/1;
  background:var(--teal-800);
  border:6px solid var(--teal-700);
  border-radius:10px;
  position:relative;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:var(--shadow-md);
}
.door-window{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:6px;
  width:46%;
  aspect-ratio:1/1;
  align-self:flex-start;
}
.door-window span{background:rgba(250,249,246,.9); border-radius:2px;}

.door-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}
.door-panel i{
  display:block;
  flex:1;
  background:var(--ink);
  border-radius:3px;
  transform-origin:top center;
  animation:slat-in .6s cubic-bezier(.2,.8,.2,1) backwards;
}
.door-panel i:nth-child(1){animation-delay:.05s}
.door-panel i:nth-child(2){animation-delay:.11s}
.door-panel i:nth-child(3){animation-delay:.17s}
.door-panel i:nth-child(4){animation-delay:.23s}
.door-panel i:nth-child(5){animation-delay:.29s}
.door-panel i:nth-child(6){animation-delay:.35s}
.door-panel i:nth-child(7){animation-delay:.41s}
.door-panel i:nth-child(8){animation-delay:.47s}
@keyframes slat-in{
  from{transform:scaleY(0); opacity:0}
  to{transform:scaleY(1); opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .door-panel i{animation:none}
}

/* ---------------- trust strip ---------------- */
.trust-strip{
  background:var(--paper-alt);
  border-bottom:1px solid var(--line);
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  padding:26px 24px;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--teal-900);
  font-weight:600;
  font-size:.92rem;
}
.trust-item svg{flex-shrink:0; color:var(--amber-dark)}

/* ---------------- services ---------------- */
.services{padding:88px 0}
.section-head{max-width:640px; margin:0 0 48px;}
.section-head p{color:#4B564F}

.services-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.service-card{
  background:var(--paper);
  padding:32px 26px;
}
.service-card svg{color:var(--teal-900); margin-bottom:16px;}
.service-card p{color:#586158; font-size:.94rem; margin-bottom:0;}

/* ---------------- why us ---------------- */
.why-us{
  background:var(--paper-alt);
  padding:88px 0;
}
.why-inner{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:56px;
  align-items:center;
}
.badge-circle{
  width:min(280px, 70vw);
  aspect-ratio:1/1;
  margin:0 auto;
  border-radius:50%;
  background:var(--teal-900);
  color:var(--white);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:10px solid var(--amber);
}
.badge-num{font-family:var(--font-head); font-size:2.6rem; font-weight:900;}
.badge-label{font-weight:600; text-align:center; margin-top:4px; color:rgba(250,249,246,.85)}

.why-list{display:flex; flex-direction:column; gap:22px;}
.why-list li{
  padding-left:26px;
  position:relative;
}
.why-list li::before{
  content:"";
  position:absolute;
  left:0; top:.4em;
  width:12px; height:12px;
  background:var(--amber);
  border-radius:2px;
}
.why-list strong{display:block; color:var(--teal-900); font-size:1.05rem; margin-bottom:2px;}
.why-list span{color:#4B564F; font-size:.95rem;}

/* ---------------- reviews ---------------- */
.reviews{padding:88px 0}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.review-card{
  margin:0;
  background:var(--white);
  border:1px solid var(--line);
  border-top:4px solid var(--amber);
  padding:28px;
  border-radius:var(--radius);
}
.review-card p{
  font-size:1.02rem;
  color:var(--ink);
  margin-bottom:16px;
}
.review-card cite{
  font-style:normal;
  font-weight:600;
  font-size:.85rem;
  color:var(--teal-700);
}

/* ---------------- faq ---------------- */
.faq{padding:88px 0}
.faq-list{
  max-width:760px;
  border-top:1px solid var(--line);
}
.faq-item{
  border-bottom:1px solid var(--line);
  padding:20px 0;
}
.faq-item summary{
  cursor:pointer;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.05rem;
  color:var(--teal-900);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  font-size:1.4rem;
  color:var(--amber-dark);
  flex-shrink:0;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{
  margin:14px 0 0;
  color:#4B564F;
  font-size:.96rem;
}

/* ---------------- contact ---------------- */
.contact{
  background:var(--teal-900);
  color:var(--white);
  padding:88px 0;
}
.contact-inner{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:56px;
}
.contact h2{color:var(--white)}
.contact .eyebrow{color:var(--amber)}
.contact-lede{color:rgba(250,249,246,.78)}

.contact-methods{display:flex; flex-direction:column; gap:14px; margin-top:24px;}
.contact-method{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  color:var(--white);
  width:fit-content;
  border-bottom:2px solid transparent;
}
.contact-method svg{color:var(--amber)}
.contact-method:hover{border-color:var(--amber)}

.contact-form{
  background:var(--paper);
  border-radius:10px;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:var(--shadow-md);
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-field{display:flex; flex-direction:column; gap:6px;}
.form-field label{font-size:.85rem; font-weight:600; color:var(--teal-900);}
.form-field input,
.form-field textarea{
  font-family:var(--font-body);
  font-size:.98rem;
  padding:.75em .9em;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  color:var(--ink);
  resize:vertical;
}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--teal-700);
}

/* ---------------- footer ---------------- */
.site-footer{
  background:var(--ink);
  color:rgba(250,249,246,.85);
  padding-top:56px;
}
.footer-inner{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(250,249,246,.12);
}
.footer-logo{height:46px; margin-bottom:14px; filter:brightness(0) invert(1);}
.footer-brand p{font-size:.85rem; color:rgba(250,249,246,.55); margin:0;}
.footer-col h4{
  font-family:var(--font-body);
  color:var(--white);
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:14px;
}
.footer-col{display:flex; flex-direction:column; gap:10px; font-size:.92rem;}
.footer-col a:hover{color:var(--amber)}
.footer-bottom{
  padding:20px 24px;
  font-size:.82rem;
  color:rgba(250,249,246,.5);
}

/* ---------------- mobile call bar ---------------- */
.mobile-call-bar{
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:60;
  gap:1px;
  background:var(--line);
  box-shadow:0 -4px 14px rgba(0,0,0,.15);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.mobile-cta{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  font-weight:700;
  font-size:.98rem;
}
.mobile-cta-call{background:var(--amber); color:var(--teal-900);}
.mobile-cta-quote{background:var(--teal-900); color:var(--white);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr; padding-top:48px;}
  .hero-visual{order:-1; margin-bottom:8px;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .why-inner{grid-template-columns:1fr; text-align:center;}
  .why-list{text-align:left;}
  .contact-inner{grid-template-columns:1fr;}
  .reviews-grid{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr; row-gap:36px;}
}

@media (max-width:720px){
  .main-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--paper);
    flex-direction:column;
    gap:0;
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-sm);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:16px 24px; border-top:1px solid var(--line); min-height:44px; display:flex; align-items:center;}
  .header-cta{display:none}
  .nav-toggle{display:flex}
  .mobile-call-bar{display:flex}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom, 0px))}

  .hero-inner{padding-top:28px; padding-bottom:40px; gap:28px;}
  .hero-visual{margin-bottom:0;}
  .door-frame{width:min(220px, 60vw); padding:16px;}
  .hero-actions{margin:22px 0 20px; gap:12px;}
  .btn{width:100%; min-height:48px;}
  .hero-trust{gap:14px 18px; font-size:.85rem;}

  .form-row{grid-template-columns:1fr}
  .form-field input,
  .form-field textarea{min-height:44px; font-size:1rem;}
  .services-grid{grid-template-columns:1fr;}
  .contact-method{min-height:44px}
  .brand-logo{height:42px}
  .header-inner{gap:12px}
}


/* ===== 2026 content expansion: preserves original visual system ===== */
.service-card .service-real-icon{width:40px;height:40px;object-fit:contain;margin-bottom:14px}
.work-showcase{padding:90px 0;background:var(--paper-alt)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.work-item{position:relative;overflow:hidden;border-radius:var(--radius);background:#ddd;min-height:260px;box-shadow:var(--shadow-sm);cursor:zoom-in;border:0;padding:0;width:100%}
.work-item img{width:100%;height:100%;min-height:260px;object-fit:cover;transition:transform .25s ease}
.work-item:hover img{transform:scale(1.025)}
.work-item:nth-child(1),.work-item:nth-child(5){grid-column:span 2}
.work-caption{position:absolute;left:12px;bottom:12px;background:rgba(18,48,46,.92);color:#fff;font-size:.82rem;font-weight:700;padding:7px 10px;border-radius:4px}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}.lightbox img{max-width:94vw;max-height:90vh;border-radius:6px}.lightbox-close{position:absolute;right:18px;top:15px;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:28px;cursor:pointer}
.license-strip{background:var(--teal-900);color:#fff;padding:22px 0}.license-row{display:flex;gap:22px;align-items:center;justify-content:space-between}.license-copy{display:flex;gap:14px;align-items:center}.license-copy strong{display:block;font-family:var(--font-head);font-size:1.1rem}.license-copy span{font-size:.88rem;opacity:.82}.license-badge{white-space:nowrap;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 13px;font-weight:700;font-size:.86rem}
.suppliers-section{padding:76px 0;background:var(--white);overflow:hidden}.supplier-marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}.supplier-track{display:flex;gap:16px;width:max-content;animation:supplier-scroll 34s linear infinite}.supplier-logo{width:210px;height:92px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:10px}.supplier-logo img{width:100%;height:100%;object-fit:contain}.supplier-marquee:hover .supplier-track{animation-play-state:paused}@keyframes supplier-scroll{to{transform:translateX(calc(-50% - 8px))}}
.service-area-section{padding:86px 0;background:var(--paper)}.area-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}.area-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.area-chips span{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font-weight:600;color:var(--teal-900);font-size:.9rem}.area-card{background:var(--teal-900);color:#fff;border-radius:var(--radius);padding:32px}.area-card h3,.area-card p{color:#fff}.area-card p{opacity:.78}.area-card .btn{margin-top:8px}
.yelp-panel{padding:82px 0;background:var(--paper-alt)}.yelp-box{display:flex;align-items:center;justify-content:space-between;gap:40px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm)}.yelp-box p{margin-bottom:0}.yelp-box .btn{flex:none;background:#d32323;color:#fff}.yelp-box .btn:hover{background:#b91d1d}
.footer-col a[href*="yelp"]{font-weight:700}
@media (prefers-reduced-motion:reduce){.supplier-track{animation:none;flex-wrap:wrap;width:auto}.supplier-marquee{mask-image:none}}
@media(max-width:900px){.work-grid{grid-template-columns:1fr 1fr}.work-item:nth-child(1),.work-item:nth-child(5){grid-column:span 1}.area-layout{grid-template-columns:1fr}.license-row{align-items:flex-start;flex-direction:column}.yelp-box{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.work-showcase,.service-area-section,.yelp-panel{padding:64px 0}.work-grid{grid-template-columns:1fr 1fr;gap:8px}.work-item,.work-item img{min-height:150px}.work-caption{font-size:.7rem;left:7px;bottom:7px}.supplier-logo{width:170px;height:76px}.yelp-box{padding:24px}.yelp-box .btn{width:100%}.license-badge{white-space:normal}.service-card .service-real-icon{width:36px;height:36px}}

/* ==========================================================================
   V3 visual polish — September 2026
   Preserves the existing identity while improving hierarchy, imagery, CTA
   visibility, mobile flow and motion.
   ========================================================================== */

/* subtle page motion: content remains visible if JS is unavailable */
.motion-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity .62s ease,transform .62s cubic-bezier(.2,.75,.25,1)}
.motion-ready .reveal.is-visible{opacity:1;transform:none}

.site-header{transition:box-shadow .25s ease,background .25s ease}
.site-header.is-scrolled{box-shadow:0 10px 28px rgba(18,48,46,.08);background:rgba(250,249,246,.96);backdrop-filter:blur(10px)}

/* CTA system */
.btn{position:relative;overflow:hidden;box-shadow:0 0 0 rgba(242,169,59,0)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.34) 45%,transparent 75%);transform:translateX(-140%);transition:transform .65s ease;pointer-events:none}
.btn:hover::after{transform:translateX(140%)}
.btn-emphasis{box-shadow:0 10px 28px rgba(242,169,59,.22)}
.btn-emphasis:hover{box-shadow:0 14px 34px rgba(242,169,59,.32)}
.btn-icon{width:18px;height:18px;object-fit:contain;filter:none}
.btn-light{background:#fff;color:var(--teal-900);border-color:#fff}
.btn-light:hover{background:var(--paper-alt)}
.text-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--teal-900);white-space:nowrap;border-bottom:2px solid var(--amber);padding-bottom:4px}
.text-cta span{transition:transform .2s ease}.text-cta:hover span{transform:translateX(4px)}

/* hero with real project imagery */
.hero{position:relative;background:linear-gradient(120deg,#102b29 0%,#12302e 56%,#183d39 100%)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 22%,rgba(242,169,59,.11),transparent 28%);pointer-events:none}
.hero-inner{position:relative;z-index:1;grid-template-columns:minmax(0,1fr) minmax(390px,.92fr);gap:64px;padding-top:72px;padding-bottom:72px}
.hero-copy{max-width:650px}
.hero h1{font-size:clamp(2.8rem,5.4vw,4.7rem);max-width:10.5ch;letter-spacing:-.045em;line-height:.99}
.hero-sub{font-size:1.12rem;max-width:56ch;line-height:1.7}
.hero-actions .btn{min-height:54px;padding-left:1.45rem;padding-right:1.45rem}
.hero-media{position:relative;min-width:0}
.hero-photo-wrap{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 26px 70px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.13);isolation:isolate}
.hero-photo{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.015);transition:transform 7s ease}
.hero-photo-wrap:hover .hero-photo{transform:scale(1.055)}
.hero-photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(6,22,20,.72) 100%)}
.hero-photo-badge{position:absolute;left:20px;bottom:20px;background:rgba(18,48,46,.92);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px 15px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.hero-photo-badge strong{font-family:var(--font-head);font-size:1.25rem;color:var(--amber)}
.hero-photo-badge span{font-size:.84rem;font-weight:600}

/* trust strip */
.trust-strip{position:relative;z-index:3}
.trust-item{padding:4px 0}

/* services: less table-like, more card-like */
.services{padding:100px 0}
.services .section-head{max-width:760px}
.services-grid{gap:14px;background:transparent;border:0}
.service-card{border:1px solid var(--line);border-radius:12px;padding:28px 24px;min-height:230px;box-shadow:0 5px 20px rgba(18,48,46,.035);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;background:#fff}
.service-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(18,48,46,.10);border-color:rgba(38,91,87,.28)}
.service-card .service-real-icon{width:42px;height:42px;padding:8px;border-radius:10px;background:var(--paper-alt)}

/* section heading layouts */
.section-head-row{max-width:none;display:flex;align-items:end;justify-content:space-between;gap:32px}
.section-head-row>div{max-width:720px}

/* curated featured-work layout */
.work-showcase{padding:100px 0;background:var(--paper-alt)}
.featured-work-grid{display:grid;grid-template-columns:1.35fr .82fr .82fr;grid-template-rows:260px 260px;gap:16px;margin-top:38px}
.featured-work-grid .work-item{min-height:0;height:100%;border-radius:14px;box-shadow:none;border:1px solid rgba(18,48,46,.10)}
.featured-work-grid .work-item-feature{grid-row:1 / 3;grid-column:1}
.featured-work-grid .work-item img{min-height:0;height:100%;object-fit:cover}
.featured-work-grid .work-item-feature img{object-position:center}
.work-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,24,22,.72) 100%);pointer-events:none}
.work-caption{z-index:2;left:18px;bottom:16px;background:transparent;padding:0;color:#fff;font-size:.92rem;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.work-caption small{display:block;color:var(--amber);text-transform:uppercase;letter-spacing:.08em;font-size:.67rem;margin-bottom:3px}
.featured-work-grid .work-item:hover img{transform:scale(1.045)}

/* dedicated before/after area */
.transformations{padding:92px 0;background:#fff}
.transformations .section-head{max-width:720px}
.transform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.transform-card{border:0;padding:0;background:var(--paper-alt);border-radius:14px;overflow:hidden;text-align:left;cursor:zoom-in;box-shadow:0 7px 24px rgba(18,48,46,.07);transition:transform .22s ease,box-shadow .22s ease}
.transform-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(18,48,46,.13)}
.transform-card img{width:100%;height:310px;object-fit:cover}
.transform-card span{display:block;padding:16px 18px 18px;font-family:var(--font-head);font-weight:700;color:var(--teal-900)}

/* mid-page CTA */
.mid-cta{padding:0;background:#fff}
.mid-cta-inner{background:linear-gradient(110deg,var(--teal-900),#1a4844);border-radius:18px;color:#fff;padding:42px 46px;display:flex;align-items:center;justify-content:space-between;gap:40px;box-shadow:0 20px 48px rgba(18,48,46,.16)}
.mid-cta h2,.mid-cta p{color:#fff}.mid-cta h2{max-width:720px}.mid-cta .eyebrow{color:var(--amber)}.mid-cta p{opacity:.8;margin-bottom:0}
.mid-cta-actions{display:flex;gap:12px;flex:none}

/* why-us rhythm */
.why-us{margin-top:90px;padding:94px 0}
.badge-circle{box-shadow:0 18px 44px rgba(18,48,46,.16)}

/* suppliers: slower, softer, edge-to-edge without looking like a ticker ad */
.suppliers-section{padding:88px 0 80px}
.supplier-marquee{margin-top:6px;padding:8px 0;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.supplier-track{gap:18px;animation-duration:48s}
.supplier-logo{width:190px;height:82px;border-radius:12px;padding:14px;box-shadow:0 4px 15px rgba(18,48,46,.035);filter:grayscale(.15);opacity:.88;transition:opacity .2s ease,transform .2s ease,filter .2s ease}
.supplier-logo:hover{opacity:1;filter:none;transform:translateY(-2px)}

/* Yelp / area / faq hierarchy */
.yelp-box{border-radius:16px;padding:38px 40px}
.yelp-box .btn{min-height:48px;padding-left:1.4rem;padding-right:1.4rem}
.area-card{border-radius:16px;box-shadow:0 16px 34px rgba(18,48,46,.12)}
.faq-list{max-width:820px}
.faq-item{background:#fff;padding:0 20px;border:1px solid var(--line);border-bottom:0}
.faq-item:first-child{border-radius:12px 12px 0 0}.faq-item:last-child{border-bottom:1px solid var(--line);border-radius:0 0 12px 12px}
.faq-item summary{padding:20px 0}.faq-item p{padding:0 0 20px}

/* contact CTA polish */
.contact{position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-220px;top:-240px;background:rgba(242,169,59,.08);pointer-events:none}
.contact-inner{position:relative;z-index:1}
.contact-form{border-radius:16px;padding:34px}
.contact-form .btn{min-height:52px}

/* stronger phone CTA in header */
.phone-pill{transition:transform .18s ease,background .18s ease,box-shadow .18s ease;box-shadow:0 8px 20px rgba(18,48,46,.12)}
.phone-pill:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(18,48,46,.18)}

/* lightbox works for both work groups */
.lightbox img{box-shadow:0 20px 70px rgba(0,0,0,.45)}

@media(max-width:1050px){
  .hero-inner{grid-template-columns:1fr .85fr;gap:42px}
  .featured-work-grid{grid-template-columns:1.15fr 1fr;grid-template-rows:300px 220px 220px}
  .featured-work-grid .work-item-feature{grid-row:1 / 3;grid-column:1}
  .featured-work-grid .work-item:nth-child(4){grid-column:1}.featured-work-grid .work-item:nth-child(5){grid-column:2}
  .mid-cta-inner{align-items:flex-start;flex-direction:column}
}

@media(max-width:820px){
  .hero-inner{grid-template-columns:1fr;padding-top:38px;padding-bottom:48px;gap:28px}
  .hero-copy{max-width:none}.hero h1{max-width:11ch;font-size:clamp(2.55rem,10vw,4rem)}
  .hero-media{order:-1}.hero-photo-wrap{aspect-ratio:16/10;max-height:390px}.hero-photo-badge{left:14px;bottom:14px}
  .section-head-row{align-items:flex-start;flex-direction:column}.section-head-row .text-cta{margin-top:-18px}
  .featured-work-grid{grid-template-columns:1fr 1fr;grid-template-rows:330px 210px 210px}
  .featured-work-grid .work-item-feature{grid-column:1 / 3;grid-row:1}.featured-work-grid .work-item:nth-child(n+2){grid-column:auto}
  .transform-grid{grid-template-columns:1fr 1fr}.transform-card:last-child{grid-column:1 / 3}.transform-card img{height:280px}
  .mid-cta-inner{margin-left:12px;margin-right:12px;padding:34px 28px}.mid-cta-actions{width:100%}.mid-cta-actions .btn{flex:1}
}

@media(max-width:640px){
  .wrap{padding-left:18px;padding-right:18px}
  .site-header .wrap{padding-left:14px;padding-right:14px}
  .brand-logo{height:38px}
  .hero-inner{padding-left:18px;padding-right:18px;padding-top:22px;gap:22px}
  .hero-media{margin-left:-18px;margin-right:-18px}.hero-photo-wrap{border-radius:0;aspect-ratio:16/9;border-left:0;border-right:0}.hero-photo-badge{font-size:.8rem;padding:9px 11px}
  .hero-sub{font-size:1rem}.hero-actions{display:grid;grid-template-columns:1fr;gap:10px;margin:22px 0 20px}.hero-actions .btn{width:100%;min-height:50px}
  .hero-trust{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}.hero-trust li{font-size:.78rem}
  .trust-grid{grid-template-columns:1fr 1fr;gap:12px 14px;padding-top:20px;padding-bottom:20px}.trust-item{align-items:flex-start;font-size:.8rem}.trust-item svg{width:22px;height:22px}
  .license-strip{padding:18px 0}.license-copy strong{font-size:1rem}.license-copy span{font-size:.8rem}.license-badge{font-size:.78rem}
  .services{padding:70px 0}.section-head{margin-bottom:34px}.services-grid{grid-template-columns:1fr;gap:10px}.service-card{min-height:0;padding:22px 20px;display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start}.service-card .service-real-icon{grid-row:1 / 3;margin:0}.service-card h3{margin-top:2px}.service-card p{grid-column:2}
  .work-showcase{padding:70px 0}.section-head-row .text-cta{margin-top:-10px}.featured-work-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:-18px;margin-right:-18px;padding:0 18px 8px;scrollbar-width:none}.featured-work-grid::-webkit-scrollbar{display:none}.featured-work-grid .work-item,.featured-work-grid .work-item-feature{flex:0 0 84vw;height:320px;scroll-snap-align:center;grid-column:auto;grid-row:auto}.work-caption{left:14px;bottom:14px}
  .transformations{padding:66px 0}.transform-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:-18px;margin-right:-18px;padding:0 18px 8px;scrollbar-width:none}.transform-grid::-webkit-scrollbar{display:none}.transform-card,.transform-card:last-child{flex:0 0 84vw;grid-column:auto;scroll-snap-align:center}.transform-card img{height:290px}
  .mid-cta{padding:0 0 10px}.mid-cta-inner{margin:0 10px;padding:30px 24px;border-radius:16px}.mid-cta-actions{display:grid;grid-template-columns:1fr;width:100%}.mid-cta-actions .btn{width:100%}
  .why-us{margin-top:60px;padding:70px 0}.badge-circle{width:190px;border-width:7px}.badge-num{font-size:2.1rem}.why-inner{gap:36px}
  .suppliers-section{padding:66px 0}.supplier-logo{width:154px;height:70px}.supplier-track{gap:12px}
  .yelp-panel,.service-area-section,.faq{padding:64px 0}.yelp-box{padding:26px 22px}.area-card{padding:26px 22px}.faq-item{padding:0 16px}.faq-item summary{font-size:.98rem}
  .contact{padding:68px 0}.contact-form{padding:24px 20px}
  .mobile-call-bar{background:#fff;gap:6px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px rgba(0,0,0,.13)}
  .mobile-cta{border-radius:10px;min-height:50px}.mobile-cta-call{box-shadow:0 8px 18px rgba(242,169,59,.26)}
}
.header-cta{display:flex;align-items:center;gap:10px}
.header-quote{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border:1px solid var(--teal-900);border-radius:999px;color:var(--teal-900);font-weight:700;font-size:.9rem;transition:background .18s ease,color .18s ease,transform .18s ease}
.header-quote:hover{background:var(--teal-900);color:#fff;transform:translateY(-1px)}
@media(max-width:720px){.header-cta{display:none}}

/* ======================================================================
   V4 FINAL POLISH PASS — visual hierarchy, CTA clarity, rhythm and balance
   Keeps the V3 structure/assets intact; no image replacements in this pass.
   ====================================================================== */
:root{
  --radius-lg:20px;
  --shadow-card:0 14px 40px rgba(18,48,46,.08);
  --shadow-cta:0 14px 32px rgba(242,169,59,.24);
}

/* header: a little more presence, still compact on mobile */
.site-header{background:rgba(250,249,246,.96);backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);transition:box-shadow .2s ease,border-color .2s ease}
.site-header.is-scrolled{box-shadow:0 10px 30px rgba(18,48,46,.09);border-bottom-color:transparent}
.header-inner{min-height:72px;padding-top:8px;padding-bottom:8px}
.brand-logo{height:48px}
.main-nav{gap:24px}
.main-nav a{font-size:.91rem}
.header-quote,.phone-pill{min-height:44px}
.header-quote{padding:0 17px;background:#fff}
.phone-pill{padding:.72em 1.25em}

/* CTA system: consistent emphasis everywhere */
.btn,.header-quote,.phone-pill,.mobile-cta{position:relative;overflow:hidden}
.btn-primary,.mobile-cta-call{box-shadow:var(--shadow-cta)}
.btn-primary::after,.phone-pill::after,.mobile-cta-call::after{
  content:"";position:absolute;top:-120%;left:-45%;width:36%;height:340%;transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transition:left .55s cubic-bezier(.2,.8,.2,1);pointer-events:none
}
.btn-primary:hover::after,.phone-pill:hover::after,.mobile-cta-call:hover::after{left:125%}
.btn{min-height:50px;padding:.88em 1.45em;border-radius:10px}
.btn-ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.48)}
.btn-ghost:hover{background:#fff;color:var(--teal-900)}
.text-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--teal-900);padding:9px 0;border-bottom:2px solid var(--amber);transition:gap .18s ease,color .18s ease}
.text-cta:hover{gap:13px;color:var(--teal-700)}

/* hero: stronger visual composition and cleaner copy column */
.hero{position:relative;background:linear-gradient(118deg,#0d2d2b 0%,#123a36 58%,#174641 100%)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(242,169,59,.08),transparent 34%);pointer-events:none}
.hero-inner{position:relative;z-index:1;grid-template-columns:minmax(0,1fr) minmax(420px,.86fr);gap:64px;padding-top:78px;padding-bottom:74px}
.hero-copy{max-width:650px}
.hero h1{font-size:clamp(3rem,5.6vw,4.85rem);line-height:.98;letter-spacing:-.045em;margin-bottom:22px}
.hero-sub{font-size:1.08rem;line-height:1.7;max-width:58ch}
.hero-actions{margin:28px 0 24px}
.hero-photo-wrap{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.16);box-shadow:0 28px 70px rgba(0,0,0,.28);background:#0c2927}
.hero-photo{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.hero-photo-wrap:hover .hero-photo{transform:scale(1.045)}
.hero-photo-wrap::before{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.12);border-radius:inherit;z-index:2;pointer-events:none}
.hero-photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 40%,rgba(5,24,22,.48) 100%)}
.hero-photo-badge{position:absolute;z-index:3;left:18px;bottom:18px;display:flex;align-items:center;gap:9px;background:rgba(11,41,38,.88);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.16);padding:10px 13px;border-radius:999px;font-size:.84rem;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.hero-photo-badge strong{color:var(--amber);font-size:.95rem}
.hero-trust{gap:16px 24px}

/* trust and license strips feel like one composed system */
.trust-strip{background:#f7f5ef}
.trust-grid{padding-top:22px;padding-bottom:22px}
.trust-item{padding-right:14px;border-right:1px solid var(--line)}
.trust-item:last-child{border-right:0}
.license-strip{border-top:1px solid rgba(255,255,255,.08);background:#0d2927}

/* services: stronger grouping without making it heavy */
.services{padding:96px 0 104px}
.services .section-head{margin-bottom:42px}
.services-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.service-card{position:relative;border-radius:16px;padding:28px 24px 25px;overflow:hidden;min-height:220px}
.service-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
.service-card:hover::before{transform:scaleX(1)}
.service-card .service-real-icon{width:44px;height:44px;border-radius:12px;margin-bottom:17px}
.service-card h3{font-size:1.03rem;line-height:1.22}
.service-card p{font-size:.89rem;line-height:1.58}

/* work: editorial composition, less stacked */
.work-showcase{padding:96px 0;background:#f3f1eb}
.featured-work-grid{grid-template-columns:1.18fr .78fr .78fr;grid-template-rows:218px 218px;gap:14px;margin-top:34px}
.featured-work-grid .work-item{border-radius:16px}
.featured-work-grid .work-item-feature{grid-row:1 / 3}
.work-item::after{background:linear-gradient(180deg,transparent 48%,rgba(5,24,22,.78) 100%)}
.work-caption{left:16px;right:16px;bottom:15px;font-size:.88rem}
.featured-work-grid .work-item-feature .work-caption{font-size:1rem}

/* before/after: compact, consistent and less visually heavy */
.transformations{padding:82px 0 88px}
.transformations .section-head{margin-bottom:34px}
.transform-grid{gap:16px}
.transform-card{border-radius:16px;box-shadow:0 10px 30px rgba(18,48,46,.07);background:#fff;border:1px solid var(--line)}
.transform-card img{height:250px}
.transform-card span{padding:14px 16px 16px;font-size:.96rem}

/* middle CTA becomes a deliberate conversion moment, not another section block */
.mid-cta{padding:8px 0 0}
.mid-cta-inner{position:relative;overflow:hidden;padding:38px 42px;border-radius:20px;box-shadow:0 22px 55px rgba(18,48,46,.18)}
.mid-cta-inner::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-110px;top:-130px;background:rgba(242,169,59,.12);pointer-events:none}
.mid-cta h2{font-size:clamp(1.7rem,2.7vw,2.35rem);max-width:670px;margin-bottom:8px}
.mid-cta-actions{position:relative;z-index:1}
.btn-light{background:#fff;color:var(--teal-900);border-color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.10)}
.btn-light:hover{transform:translateY(-2px);background:#f6f3ec}

/* why-us: turn the flat block into a high-trust premium section */
.why-us{margin-top:86px;padding:94px 0;background:linear-gradient(135deg,#102f2d,#163f3b);color:#fff}
.why-us .eyebrow{color:var(--amber)}
.why-us h2{color:#fff;max-width:690px}
.why-inner{grid-template-columns:.62fr 1.38fr;gap:70px}
.badge-circle{width:min(245px,62vw);background:rgba(255,255,255,.035);border:8px solid var(--amber);box-shadow:0 24px 55px rgba(0,0,0,.20)}
.badge-num{color:#fff}
.badge-label{color:rgba(255,255,255,.84)}
.why-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:28px}
.why-list li{position:relative;padding:18px 18px 18px 20px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);border-radius:14px;min-height:132px}
.why-list li::before{left:0;top:0;bottom:0;width:3px;height:auto;border-radius:14px 0 0 14px;background:var(--amber)}
.why-list strong{color:#fff;display:block;margin-bottom:7px;font-size:.96rem}
.why-list span{color:rgba(255,255,255,.68);font-size:.86rem;line-height:1.55}

/* suppliers: centered heading and calmer premium rail */
.suppliers-section{padding:82px 0 76px;background:#fff}
.suppliers-section .section-head{max-width:700px;margin-bottom:26px}
.supplier-marquee{padding:10px 0 14px}
.supplier-logo{width:184px;height:80px;background:#fff;border:1px solid #e6e1d7;box-shadow:0 8px 22px rgba(18,48,46,.04);filter:grayscale(.28);opacity:.9}
.supplier-logo img{max-height:50px;max-width:145px;object-fit:contain;margin:auto}

/* Yelp: make it a real trust CTA */
.yelp-panel{padding:72px 0;background:#f3f1eb}
.yelp-box{position:relative;overflow:hidden;border:0;box-shadow:var(--shadow-card);background:#fff;display:grid;grid-template-columns:1fr auto;align-items:center;gap:34px}
.yelp-box::before{content:"Y";position:absolute;right:135px;top:-48px;font-family:var(--font-head);font-weight:900;font-size:13rem;line-height:1;color:rgba(211,35,35,.035);pointer-events:none}
.yelp-box h2{margin-bottom:10px}
.yelp-box .btn{background:#d32323;color:#fff;border:0;min-width:160px}
.yelp-box .btn:hover{background:#b91f1f}

/* service area: balanced info + action */
.service-area-section{padding:86px 0;background:#fff}
.area-layout{grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}
.area-layout>div:first-child{max-width:680px}
.area-chips{gap:8px;margin-top:22px}
.area-chips span{background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-size:.82rem;box-shadow:0 3px 10px rgba(18,48,46,.025)}
.area-card{position:relative;overflow:hidden;padding:30px;background:linear-gradient(145deg,#12302e,#1a4844);color:#fff}
.area-card::after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-55px;bottom:-60px;background:rgba(242,169,59,.13)}
.area-card h3{color:#fff}.area-card p{color:rgba(255,255,255,.73)}
.area-card .btn{position:relative;z-index:1}

/* FAQ: wider, cleaner and easier to scan */
.faq{padding:84px 0 96px;background:#f8f7f3}
.faq .section-head{margin-bottom:30px}
.faq-list{max-width:900px;margin:0 auto}
.faq-item{border-color:#ddd8cd;background:#fff}
.faq-item summary{font-weight:700;color:var(--teal-900);cursor:pointer}
.faq-item summary::marker{color:var(--amber)}

/* contact: finish with a high-contrast conversion block */
.contact{padding:92px 0;background:#0d2d2b}
.contact-inner{gap:64px}
.contact h2{color:#fff;font-size:clamp(2rem,3.2vw,3rem)}
.contact-info{color:#fff}.contact-info .eyebrow{color:var(--amber)}.contact-lede{color:rgba(255,255,255,.72)}
.contact-method{color:#fff;border-color:rgba(255,255,255,.10)}
.contact-form{background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.18)}

/* footer: slightly cleaner density */
.site-footer{padding-top:48px}
.footer-grid{gap:36px}

/* reveal: elegant, restrained */
.motion-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity .62s cubic-bezier(.2,.8,.2,1),transform .62s cubic-bezier(.2,.8,.2,1)}
.motion-ready .reveal.is-visible{opacity:1;transform:none}

@media(max-width:1050px){
  .hero-inner{grid-template-columns:1fr .82fr;gap:42px}
  .hero h1{font-size:clamp(2.75rem,6vw,4.1rem)}
  .why-inner{gap:44px}.why-list{grid-template-columns:1fr}
  .featured-work-grid{grid-template-columns:1.15fr .9fr;grid-template-rows:220px 220px 200px}
  .featured-work-grid .work-item-feature{grid-row:1 / 3;grid-column:1}
  .featured-work-grid .work-item:nth-child(4){grid-column:1}.featured-work-grid .work-item:nth-child(5){grid-column:2}
}

@media(max-width:820px){
  .header-inner{min-height:62px}.brand-logo{height:42px}
  .hero-inner{grid-template-columns:1fr;padding-top:46px;padding-bottom:54px}.hero-media{order:0}.hero-copy{max-width:680px}
  .hero h1{max-width:12ch}
  .hero-photo-wrap{aspect-ratio:16/10;max-height:none}
  .why-inner{grid-template-columns:1fr}.why-visual{display:flex;justify-content:flex-start}.badge-circle{width:185px}
  .why-list{grid-template-columns:1fr 1fr}
  .area-layout{grid-template-columns:1fr;gap:30px}.area-card{max-width:560px}
  .yelp-box{grid-template-columns:1fr}.yelp-box::before{right:-25px}
}

@media(max-width:640px){
  body{padding-bottom:70px}
  .header-inner{min-height:58px}.brand-logo{height:36px}
  .hero-inner{padding-top:32px;padding-bottom:42px;gap:25px}.hero h1{font-size:clamp(2.65rem,13vw,3.7rem);line-height:.96}.hero-sub{line-height:1.62}
  .hero-media{margin-left:0;margin-right:0}.hero-photo-wrap{border-radius:18px;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.15)}
  .hero-actions{grid-template-columns:1fr 1fr}.hero-actions .btn{padding-left:12px;padding-right:12px;font-size:.9rem}.hero-trust{grid-template-columns:1fr;gap:7px}
  .trust-grid{grid-template-columns:1fr 1fr}.trust-item{border-right:0;padding-right:0}
  .license-row{align-items:flex-start}.license-badge{margin-top:3px}
  .services{padding:66px 0 72px}.services-grid{grid-template-columns:1fr}.service-card{border-radius:14px}
  .work-showcase{padding:68px 0}.featured-work-grid{display:flex;margin-top:26px}.featured-work-grid .work-item,.featured-work-grid .work-item-feature{flex:0 0 86vw;height:300px}
  .transformations{padding:62px 0 68px}.transform-card img{height:260px}
  .mid-cta-inner{padding:28px 22px}.mid-cta h2{font-size:1.65rem}.mid-cta-actions{grid-template-columns:1fr 1fr}.mid-cta-actions .btn{font-size:.88rem;padding-left:10px;padding-right:10px}
  .why-us{margin-top:52px;padding:66px 0}.why-visual{justify-content:center}.why-list{grid-template-columns:1fr}.why-list li{min-height:0}
  .suppliers-section{padding:62px 0}.supplier-logo{width:150px;height:68px}.supplier-logo img{max-width:118px;max-height:40px}
  .yelp-panel,.service-area-section,.faq{padding:62px 0}.yelp-box{padding:25px 21px;gap:22px}.yelp-box .btn{width:100%}
  .area-card{padding:24px}.faq-list{margin:0}
  .contact{padding:66px 0}.contact-inner{gap:34px}.contact-form{padding:22px 18px}
}

/* ==========================================================================\n   Common repairs & replacement parts\n   Real service imagery from assets/services; complements the high-level\n   service grid without turning it into a parts catalog.\n   ========================================================================== */
.repair-parts{padding:96px 0;background:var(--paper-alt);border-top:1px solid rgba(18,48,46,.06)}
.repair-parts .section-head{margin-bottom:38px}
.repair-parts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.repair-part-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 6px 22px rgba(18,48,46,.045);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.repair-part-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(18,48,46,.11);border-color:rgba(38,91,87,.28)}
.repair-part-card>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#e9ece8}
.repair-part-copy{padding:20px 19px 22px}
.repair-part-kicker{display:block;margin-bottom:7px;color:var(--amber-dark);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.repair-part-card h3{font-size:1.05rem;margin-bottom:8px}
.repair-part-card p{font-size:.9rem;line-height:1.58;color:#586158;margin:0}
.repair-parts-note{margin-top:24px;padding:22px 24px;border:1px solid rgba(18,48,46,.12);border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px}
.repair-parts-note>div{display:flex;flex-direction:column;gap:4px}
.repair-parts-note strong{font-family:var(--font-head);color:var(--teal-900);font-size:1.02rem}
.repair-parts-note span{color:#586158;font-size:.92rem}
.repair-parts-note .btn{flex:none;min-height:48px}
@media(max-width:1050px){.repair-parts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.repair-parts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.repair-parts-note{align-items:flex-start;flex-direction:column}.repair-parts-note .btn{width:100%}}
@media(max-width:640px){.repair-parts{padding:68px 0}.repair-parts-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:-18px;margin-right:-18px;padding:0 18px 10px;scrollbar-width:none}.repair-parts-grid::-webkit-scrollbar{display:none}.repair-part-card{flex:0 0 82vw;scroll-snap-align:center}.repair-part-card>img{aspect-ratio:16/11}.repair-parts-note{margin-top:20px;padding:20px}.repair-parts .section-head-row .text-cta{margin-top:-8px}}