/* ═══ Modern refresh layer (Oct 2026) ═══
   Loaded last on every page. Changes type, polish and interaction only — no layout.
   To roll back the whole refresh, remove the one <link> line that loads this file on each page. */


:root{
  --m-navy:#0B1A2E; --m-ink:#0F1F35; --m-orange:#E8541A; --m-orange-2:#F0653A;
  --m-line:#E5ECF5; --m-ease:cubic-bezier(.2,.7,.2,1);
}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--m-orange);color:#fff}

/* 1. Headings: keep the site's Roboto; just balance line breaks */
h1,h2,h3{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}

/* 2. Section labels: sentence case instead of tracked all-caps */
.section-eyebrow,.faq-eyebrow,.g-kicker,.blog-section-label,.eyebrow,.trust-card-eyebrow,.est-steplabel{
  text-transform:none !important;
  letter-spacing:.01em !important;
  font-weight:600 !important;
}
.section-eyebrow,.faq-eyebrow,.g-kicker,.blog-section-label,.eyebrow{font-size:14px !important}
.trust-card-eyebrow,.est-steplabel{font-size:12.5px !important}

/* 2b. Buttons, nav and card titles: sentence/title case reads more current than shouting caps */
.btn,.hero-book,.est-next,.est-submit,.est-back,.mobile-menu-cta,
.nav-links a,.mobile-menu-links > a,.mobile-submenu-toggle,
.svc-body h3,.svc-link,.faq-ad-title,.faq-ad-link,.svc-guide-link,.tm-service,
.pricing-card .tier,.qf-label,.svc-call-eyebrow,.svc-video-eyebrow,.ba-strip-eyebrow,.svc-cities-title,.seo-cities-title,.svc-chips-label{
  text-transform:none !important;
  letter-spacing:.005em !important;
}
.nav-links a{font-weight:600 !important}
.svc-body h3{font-size:1.15em}

/* 3. Buttons: tighter glow, crisper motion, clear press state */
.btn,.est-next,.est-submit,.trust-card-verify{
  box-shadow:0 8px 20px -8px rgba(232,84,26,.6) !important;
  transition:background-color .2s var(--m-ease),transform .2s var(--m-ease),box-shadow .2s var(--m-ease) !important;
  letter-spacing:.01em;
}
.btn:hover,.est-next:hover:not(:disabled),.est-submit:hover:not(:disabled),.trust-card-verify:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 12px 26px -10px rgba(232,84,26,.7) !important;
}
.btn:active,.est-next:active,.est-submit:active,.trust-card-verify:active{transform:translateY(0) scale(.98) !important}
.btn-outline,.btn-ghost-dark,.est-back{box-shadow:none !important}

/* 4. Focus: one consistent, visible ring for keyboard users */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2px solid var(--m-orange) !important;outline-offset:3px;border-radius:6px;
}

/* 5. Estimate form: soft focus halo instead of a hard outline */
.est-card{border-color:var(--m-line) !important;box-shadow:0 1px 2px rgba(11,26,46,.04),0 24px 60px -18px rgba(11,26,46,.22) !important}
.est-field input:focus,.est-textarea:focus{outline:none !important;border-color:var(--m-orange) !important;box-shadow:0 0 0 4px rgba(232,84,26,.14)}
.est-opt{transition:background-color .2s var(--m-ease),border-color .2s var(--m-ease),transform .15s var(--m-ease) !important}
.est-opt:hover{transform:translateY(-1px)}
.est-opt:focus-within{outline:none !important;box-shadow:0 0 0 4px rgba(232,84,26,.14)}

/* 6. Cards: hairline navy borders and layered shadows instead of flat grey */
.included-card,.pricing-card,.link-card,.cta-box,.svc-review,.city-card,.sp-card,.faq-item,.city-qf li{
  border-color:var(--m-line) !important;
}
.pricing-card,.cta-box,.svc-review{box-shadow:0 1px 2px rgba(11,26,46,.04),0 10px 28px -14px rgba(11,26,46,.18) !important}

/* 7. Header: softer, deeper shadow once the page scrolls */
#site-header.scrolled{
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 30px -12px rgba(0,0,0,.35) !important;
}

/* 8. FAQ: smoother open/close */
.faq-a{transition:max-height .4s var(--m-ease),padding .3s var(--m-ease) !important}
.faq-q-icon{transition:transform .3s var(--m-ease),background-color .2s,border-color .2s !important}

/* 9. Scroll reveals: shorter travel, quicker, less "floaty" */
.fade-up{transform:translateY(14px);transition:opacity 1.2s var(--m-ease),transform 1.2s var(--m-ease) !important}
.fade-up.visible{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .fade-up{opacity:1 !important;transform:none !important}
}

/* 10. Floating cards: navy-tinted layered shadow on every card, sitewide */
.review-card,.find-us-card,.buildzoom-card,.testimonial-card,.est-card,.contact-extra,.svc-card,#services.svc .svc-card,
.faq-ad,.side-ad,.why-card,.seo-city,.svc-city,.m-ad,.est-hook,.faq-q,
.included-card,.pricing-card,.link-card,.cta-box,.svc-review,.city-card,.sp-card,.faq-item,.city-qf li,
.svc-call-card,.svc-trust-card,.service-cta-box,.svc-guide,.svc-video-card,.sidebar-card,.ab-svc-card,
.featured,.g-card,.reason,.post-faq details,.vanity-card,.color-card,.cg-frame,.quick-facts{
  border-color:#E5ECF5 !important;
  box-shadow:0 1px 2px rgba(11,26,46,.06),0 16px 34px -14px rgba(11,26,46,.30) !important;
}
.est-card,.faq-ad,.side-ad,.contact-extra,.cta-box,.svc-call-card,.service-cta-box,.featured,.cg-frame{
  box-shadow:0 2px 4px rgba(11,26,46,.05),0 28px 60px -20px rgba(11,26,46,.36) !important;
}
.faq-q,.faq-item,.post-faq details{box-shadow:0 1px 2px rgba(11,26,46,.05),0 10px 24px -14px rgba(11,26,46,.24) !important}
.trust-card{box-shadow:0 2px 4px rgba(11,26,46,.10),0 26px 54px -20px rgba(11,26,46,.55) !important}

/* Hover: clickable cards lift and the shadow deepens */
.review-card,.svc-card,.why-card,.seo-city,.svc-city,.m-ad,.testimonial-card,.buildzoom-card,.sp-card,
.g-card,.featured,.ab-svc-card,.svc-guide,.included-card,.pricing-card,.city-card,.svc-review{
  transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease !important;
}
.review-card:hover,.svc-card:hover,#services.svc .svc-card:hover,.why-card:hover,.seo-city:hover,.svc-city:hover,.m-ad:hover,
.testimonial-card:hover,.buildzoom-card:hover,.sp-card:hover,.g-card:hover,.featured:hover,.ab-svc-card:hover,.svc-guide:hover,
.included-card:hover,.pricing-card:hover,.city-card:hover,.svc-review:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 2px 4px rgba(11,26,46,.06),0 26px 48px -16px rgba(11,26,46,.38) !important;
}
@media (hover:none){
  .review-card:hover,.svc-card:hover,#services.svc .svc-card:hover,.why-card:hover,.seo-city:hover,.svc-city:hover,.m-ad:hover,
  .testimonial-card:hover,.buildzoom-card:hover,.sp-card:hover,.g-card:hover,.featured:hover,.ab-svc-card:hover,.svc-guide:hover,
  .included-card:hover,.pricing-card:hover,.city-card:hover,.svc-review:hover{transform:none !important}
}
@media (prefers-reduced-motion:reduce){
  .review-card:hover,.svc-card:hover,.why-card:hover,.seo-city:hover,.svc-city:hover,.m-ad:hover,.testimonial-card:hover,
  .buildzoom-card:hover,.sp-card:hover,.g-card:hover,.featured:hover,.ab-svc-card:hover,.svc-guide:hover,.included-card:hover,
  .pricing-card:hover,.city-card:hover,.svc-review:hover{transform:none !important}
}

/* 11. Navy cohesion: retire the leftover charcoal panels and near-black headings */
.cta-banner:not(.city-cta),.owner-strip{background:linear-gradient(135deg,#0B1A2E 0%,#12263F 100%) !important}
.our-work-cta,.our-work-info,.transform-strip-content,.legal-hero{background:#0B1A2E !important}
/* Transform strip: light section on desktop so the navy panel sits shorter than the photo; solid navy when stacked on mobile */
.transform-strip{background:#F2F5F9 !important}
@media (max-width:900px){.transform-strip{background:#0B1A2E !important}}
.transform-strip-img{background-color:#0B1A2E !important}
.trust-text strong,.service-card-body h3,.contact-extra h3,.ce-step p strong,#services.svc .svc-head h2,.svc-body h3,
.faq-head h2,.faq-ad-title,.faq-sec .svc-head h2,.faq-q summary h3,.why-sec .svc-head h2,.why-card h3,#reviews h2,
.legal-wrap h2,.est-title,.est-q,.est-success h3{color:#0F1F35 !important}
.est-opt-main,.est-textarea,.est-field input{color:#0F1F35 !important}

/* 12. White / orange / navy theme: replace the leftover neutral grays in forms and controls */
.est-opt{background:#F2F5F9 !important}
.est-opt:hover{background:#E5ECF5 !important}
.est-opt.sel{background:#FFF3EE !important}
.est-back{background:#F2F5F9 !important;color:#0F1F35 !important}
.est-back:hover{background:#E5ECF5 !important}
.est-dot{background:#E5ECF5}
.est-dot.current{background:#E8541A}
.est-textarea,.est-field input{background:#F7F9FC !important;border-color:#E5ECF5 !important}
.est-textarea:focus,.est-field input:focus{background:#fff !important;border-color:#E8541A !important}
.est-opt-check .est-opt-main::before{border-color:#C9D3E0}
.faq-q-icon{background:#F2F5F9;border-color:#E5ECF5}

/* 13. Motion & mobile polish (Emil Kowalski design-engineering rules) */
/* Name the animated properties instead of transition:all */
.cta-phone,.svc-strip-link,.city-pill{transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .2s ease !important}
.img-placeholder{transition:opacity .3s ease,transform .3s cubic-bezier(.23,1,.32,1) !important}
/* Press feedback snaps in faster than it releases */
.btn:active,.est-next:active,.est-submit:active,.trust-card-verify:active,.cg-btn:active,.sp-card:active{transition-duration:.1s !important}
.cg-btn:active{transform:scale(.96) !important}
/* Touch screens: no sticky hover lifts, no gray tap flash, no double-tap delay */
@media (hover:none),(pointer:coarse){
  .btn:hover,.est-next:hover,.est-submit:hover,.trust-card-verify:hover,.est-opt:hover,.cg-btn:hover,.transform-strip-cta:hover{transform:none !important}
}
a,button,summary,label,[role="button"],.faq-q,.est-opt{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* iPhone zooms the page when a form field is under 16px: keep fields at 16px */
.est-field input,.est-textarea,.subnet-card input{font-size:16px !important}
/* Full-height heroes use the stable small-viewport unit so mobile URL bars don't cause jumps */
@supports (height:100svh){.hero:not(.ab-hero):not(.ct-hero){min-height:100svh}}

/* 14. Text-message consent line under the estimate forms */
.est-consent{font-size:11.5px;line-height:1.5;color:#6b7480;text-align:left;margin:10px 0 0}
.est-consent a{color:#0F1F35;font-weight:600;text-decoration:underline}

/* 15. Easier-to-read header menu on desktop */
.nav-links a{font-size:16px !important;letter-spacing:.01em !important}
.nav-caret{width:12px;height:12px}
.nav-dropdown-menu a{font-size:15.5px !important;color:#2c3440}
.header-topbar{font-size:13px}
@media (max-width:1366px){.nav-links a{font-size:15px !important}.nav-links{gap:22px !important}}
@media (max-width:1260px){.nav-links a{font-size:14.5px !important}.nav-links{gap:18px !important}}

/* 16. Home remodeling hub: decks & fences (exterior) section */
.ext-section{background:#F2F5F9;padding:96px 0}
.ext-head{max-width:780px;margin:0 0 40px}
.ext-head .section-body{color:#3d4756;font-size:17px;line-height:1.7}
.ext-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.ext-card{background:#fff;border:1px solid #E5ECF5;border-radius:16px;padding:36px 34px;box-shadow:0 1px 2px rgba(11,26,46,.05),0 18px 40px -18px rgba(11,26,46,.28)}
.ext-card h3{font-family:'Roboto',Arial,sans-serif;font-size:26px;font-weight:700;color:#0F1F35;margin:0 0 12px}
.ext-card p{color:#4a5464;line-height:1.7;margin:0 0 20px}
.ext-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ext-list li{position:relative;padding-left:32px;color:#0F1F35;font-weight:500;line-height:1.5}
.ext-list li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:#E8541A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}
.ext-compare{margin-top:28px;background:#12263F;color:#fff;border-radius:16px;padding:32px 34px;box-shadow:0 18px 40px -18px rgba(11,26,46,.45)}
.ext-compare h3{font-family:'Roboto',Arial,sans-serif;font-size:22px;font-weight:700;color:#fff;margin:0 0 10px}
.ext-compare p{color:#d6deea;line-height:1.7;margin:0;max-width:880px}
.ext-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
@media (max-width:820px){
  .ext-section{padding:64px 0}
  .ext-grid{grid-template-columns:1fr;gap:20px}
  .ext-card,.ext-compare{padding:26px 22px}
  .ext-card h3{font-size:23px}
  .ext-actions .btn{flex:1 1 100%;text-align:center}
}
.ext-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;margin-bottom:44px}
.ext-top .ext-head{margin:0}
.ext-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ext-photo{margin:0}
.ext-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 70%;border-radius:14px;box-shadow:0 18px 40px -18px rgba(11,26,46,.4)}
.ext-photo figcaption{margin-top:10px;font-size:14px;color:#4a5464;line-height:1.4}
@media (max-width:980px){.ext-top{grid-template-columns:1fr;gap:28px;margin-bottom:32px}}
@media (max-width:480px){.ext-photos{gap:10px}.ext-photo figcaption{font-size:13px}}

/* 17. Project videos: video and caption float as two separate pieces (no shared frame) */
.svc-video-card{box-shadow:none !important;border:0 !important;background:none !important}
.svc-video{box-shadow:0 2px 4px rgba(11,26,46,.06),0 22px 44px -18px rgba(11,26,46,.40) !important}
.svc-video-card figcaption{margin-top:18px !important;box-shadow:0 2px 4px rgba(11,26,46,.06),0 18px 36px -16px rgba(11,26,46,.38) !important}