/* self-hosted Inter (VARIABLE, 400-800) - one file replaces four static weights. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/inter-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT');ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%;size-adjust:107.64%}
:root{--color-primary:#1C1C5C;--color-accent:#2F7D1A;--color-accent-hover:#282881;--color-success:#2F7D1A;--color-text:#2D2D2D;--color-text-muted:#666666;--color-bg:#FFFFFF;--color-bg-light:#F6F6FA;--color-bg-dark:#1C1C5C;--color-border:#D5D5E6;--color-error:#DC3545;--color-warning:#F0AD4E;--color-info:#5BC0DE;--size-h1-hero:3.5rem;--size-h1:3rem;--size-h2:2.25rem;--size-h3:1.75rem;--size-h4:1.375rem;--size-body:1.0625rem;--size-small:0.9375rem;--size-caption:0.8125rem;--weight-regular:400;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;--lh-hero:1.1;--lh-heading:1.2;--lh-subheading:1.3;--lh-h4:1.4;--lh-body:1.7;--lh-small:1.6;--lh-caption:1.5;--space-section:7.5rem;--space-section-sm:5rem;--container-max:75rem;--container-padding:1.5rem;--gap-lg:3rem;--gap-md:2rem;--gap-sm:1rem;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 1px 3px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.1);--shadow-hover:0 6px 20px rgba(0,0,0,0.15);--font-family:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--transition-fast:150ms ease;--transition-base:300ms ease;--transition-slow:400ms ease}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}body{font-family:var(--font-family);font-size:var(--size-body);line-height:var(--lh-body);color:var(--color-text);background-color:var(--color-bg);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit;color:inherit}a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent-hover)}ul,ol{list-style:none}h1,h2,h3,h4{color:var(--color-primary);font-weight:var(--weight-bold)}h1{font-size:var(--size-h1);line-height:var(--lh-heading)}h2{font-size:var(--size-h2);line-height:var(--lh-heading)}h3{font-size:var(--size-h3);line-height:var(--lh-subheading);font-weight:var(--weight-semibold)}h4{font-size:var(--size-h4);line-height:var(--lh-h4);font-weight:var(--weight-semibold)}p{margin-bottom:1em}p:last-child{margin-bottom:0}small{font-size:var(--size-small);line-height:var(--lh-small)}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}::selection{background-color:var(--color-accent);color:#FFFFFF}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}@media (max-width:991px){h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}}@media (max-width:767px){h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.375rem}h4{font-size:1.125rem}}@media (max-width:477px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.0625rem}body{font-size:1rem}}.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}.container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding)}.section{padding-top:var(--space-section);padding-bottom:var(--space-section)}.section--light{background-color:var(--color-bg-light)}.section--dark{background-color:var(--color-bg-dark);color:#FFFFFF}.section--dark h2,.section--dark h3,.section--dark h4{color:#FFFFFF}.section--dark p{color:rgba(255,255,255,0.85)}.section--dark a{color:#FFFFFF}.section__header{text-align:center;max-width:720px;margin:0 auto var(--gap-lg)}.section__header p{color:var(--color-text-muted);font-size:var(--size-body);margin-top:0.75rem}.section--dark .section__header p{color:rgba(255,255,255,0.75)}.grid-2{display:grid;grid-template-columns:1fr;gap:var(--gap-md)}.grid-3{display:grid;grid-template-columns:1fr;gap:var(--gap-md)}@media (min-width:478px){.section{padding-top:var(--space-section-sm);padding-bottom:var(--space-section-sm)}}@media (min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.section{padding-top:6.25rem;padding-bottom:6.25rem}}@media (min-width:992px){.grid-3{grid-template-columns:repeat(3,1fr)}.section{padding-top:var(--space-section);padding-bottom:var(--space-section)}}@media (max-width:477px){.section{padding-top:3.75rem;padding-bottom:3.75rem}.container{padding-left:1rem;padding-right:1rem}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;font-weight:var(--weight-semibold);font-size:var(--size-body);line-height:1;padding:0.875rem 2rem;border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:color var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);min-height:44px;min-width:44px;white-space:nowrap}.btn-primary{background-color:var(--color-accent);color:#FFFFFF;border-color:var(--color-accent)}.btn-primary:hover{background-color:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#FFFFFF;transform:scale(1.03);box-shadow:var(--shadow-hover)}.btn-ghost{background-color:transparent;color:#FFFFFF;border-color:rgba(255,255,255,0.4)}.btn-ghost:hover{background-color:rgba(255,255,255,0.1);border-color:#FFFFFF;color:#FFFFFF}.navbar{position:sticky;top:0;z-index:1000;background-color:var(--color-primary);transition:background var(--transition-fast),box-shadow var(--transition-fast);padding:0}.navbar.scrolled{background:var(--color-primary);box-shadow:0 2px 20px rgba(0,0,0,0.2)}.navbar.scrolled .navbar__logo img{height:36px}.navbar__inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem var(--container-padding);max-width:var(--container-max);margin:0 auto;gap:1rem}.navbar__logo img{height:36px;width:auto}.navbar__links{display:none;align-items:center;gap:0.125rem}.navbar__links>a{color:rgba(255,255,255,0.75);font-size:var(--size-small);font-weight:var(--weight-semibold);padding:0.5rem 0.75rem;border-radius:var(--radius-sm);transition:color 0.15s ease,background 0.15s ease;text-decoration:none;white-space:nowrap}.navbar__links>a:hover{color:#FFFFFF;background:rgba(255,255,255,0.1)}.navbar__links>a{position:relative}.navbar__links>a.active{color:#FFFFFF;background:rgba(255,255,255,0.1)}.navbar__links>a::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--color-accent);border-radius:1px;transition:width 200ms ease}.navbar__links>a.active::after,.navbar__links>a:hover::after{width:60%}.nav-dropdown{position:relative}.nav-dropdown__trigger{display:inline-flex;align-items:center;gap:0.25rem;cursor:pointer;color:rgba(255,255,255,0.75);font-size:var(--size-small);font-weight:var(--weight-semibold);padding:0.5rem 0.75rem;border-radius:var(--radius-sm);transition:color 0.15s ease,background 0.15s ease;text-decoration:none;white-space:nowrap}.nav-dropdown__trigger:hover,.nav-dropdown:hover>.nav-dropdown__trigger,.nav-dropdown.open>.nav-dropdown__trigger{color:#FFFFFF;background:rgba(255,255,255,0.1)}.nav-dropdown__trigger svg{width:14px;height:14px;transition:transform 0.15s ease}.nav-dropdown:hover>.nav-dropdown__trigger svg,.nav-dropdown.open>.nav-dropdown__trigger svg{transform:rotate(180deg)}.nav-dropdown__menu{position:absolute;top:100%;left:0;background:#FFFFFF;border-radius:var(--radius-md);box-shadow:0 8px 30px rgba(0,0,0,0.15),0 2px 8px rgba(0,0,0,0.08);min-width:280px;padding:0.5rem;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity 0.2s ease,transform 0.2s ease,visibility 0s 0.2s;z-index:100;pointer-events:none}.nav-dropdown__menu::before{content:"";position:absolute;top:-4px;left:-12px;right:-12px;height:16px}.nav-dropdown:hover>.nav-dropdown__menu,.nav-dropdown:focus-within>.nav-dropdown__menu,.nav-dropdown.open>.nav-dropdown__menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:opacity 0.15s ease,transform 0.15s ease,visibility 0s}.nav-dropdown__menu a{display:block;padding:0.625rem 0.875rem;color:var(--color-text) !important;background:transparent !important;font-size:var(--size-small);font-weight:var(--weight-semibold);border-radius:var(--radius-sm);text-decoration:none;transition:background 0.15s ease,color 0.15s ease}.nav-dropdown__menu a:hover{background:var(--color-bg-light) !important;color:var(--color-accent) !important}.nav-dropdown__menu a span{display:block;font-size:var(--size-caption);color:var(--color-text-muted);font-weight:var(--weight-regular);margin-top:2px}.nav-dropdown__menu a:hover span{color:var(--color-accent)}.navbar__actions{display:flex;align-items:center;gap:0.75rem}.navbar__phone{display:none;align-items:center;gap:0.375rem;color:#FFFFFF;font-weight:var(--weight-bold);font-size:var(--size-small);text-decoration:none}.navbar__phone svg{width:16px;height:16px}.navbar__phone:hover{color:rgba(255,255,255,0.8)}.navbar__cta{display:none}.navbar__hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center;width:48px;height:48px;gap:5px;background:none;border:none;cursor:pointer;padding:0;z-index:1002}.navbar__hamburger span{display:block;width:24px;height:2px;background:#FFFFFF;border-radius:2px;transition:color var(--transition-base),background-color var(--transition-base),border-color var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base)}.navbar__hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.navbar__hamburger.active span:nth-child(2){opacity:0}.navbar__hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-nav{position:fixed;inset:0;background:var(--color-primary);z-index:1001;display:flex;flex-direction:column;padding:5rem 2rem 2rem;transform:translateX(100%);transition:transform var(--transition-base);overflow-y:auto}.mobile-nav.open{transform:translateX(0)}.mobile-nav a{color:#FFFFFF;font-size:1.25rem;padding:0.875rem 0;border-bottom:1px solid rgba(255,255,255,0.08);display:block;text-decoration:none;font-weight:var(--weight-semibold)}.mobile-nav a:hover{color:var(--color-accent)}.mobile-nav__actions{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:0.75rem}.mobile-nav__actions .btn{width:100%;justify-content:center;display:flex;align-items:center;gap:0.5rem;text-align:center;white-space:nowrap;padding:0.875rem 1.25rem;font-size:1rem}.mobile-nav__actions .btn svg{flex-shrink:0}.mobile-nav__actions .btn-primary{border:2px solid var(--color-accent)}.mobile-nav__actions .btn-ghost{border:2px solid rgba(255,255,255,0.4)}@media (min-width:768px){.navbar__phone{display:flex}}@media (min-width:992px){.navbar__links{display:flex}.navbar__phone{display:flex}.navbar__cta{display:inline-flex}.navbar__hamburger{display:none}}.footer{background-color:var(--color-bg-dark);color:rgba(255,255,255,0.8);padding-top:var(--gap-lg);padding-bottom:0}.footer a{color:rgba(255,255,255,0.7);text-decoration:none;transition:color var(--transition-fast)}.footer a:hover{color:#FFFFFF}.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;padding:1.25rem 0;font-size:var(--size-caption);color:rgba(255,255,255,0.7)}.hero{position:relative;min-height:85vh;display:flex;align-items:center;overflow:hidden;background-color:var(--color-primary)}.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}.hero__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(28,28,92,0.92) 0%,rgba(28,28,92,0.7) 50%,rgba(28,28,92,0.55) 100%)}.hero__content{position:relative;z-index:2;max-width:680px;padding:var(--space-section) 0}.hero__badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);border-radius:var(--radius-full);padding:0.5rem 1.25rem;font-size:var(--size-small);color:rgba(255,255,255,0.9);font-weight:var(--weight-semibold);margin-bottom:1.5rem}.hero__badge svg{width:16px;height:16px}.hero h1{color:#FFFFFF;font-size:var(--size-h1-hero);font-weight:var(--weight-extrabold);line-height:var(--lh-hero);margin-bottom:1.25rem}.hero__sub{color:rgba(255,255,255,0.8);font-size:1.1875rem;line-height:1.6;margin-bottom:2rem;max-width:540px}.hero__ctas{display:flex;flex-wrap:wrap;gap:0.75rem;margin-bottom:2.5rem}.hero__trust{display:flex;flex-wrap:wrap;gap:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.12)}.hero__trust-item{display:flex;align-items:center;gap:0.5rem;color:rgba(255,255,255,0.85);font-size:var(--size-small);font-weight:var(--weight-semibold)}.hero__trust-item svg{width:18px;height:18px}@media (max-width:991px){.hero{min-height:70vh}.hero h1{font-size:2.75rem}.hero__sub{font-size:1.0625rem}}@media (max-width:767px){.hero{min-height:auto}.hero h1{font-size:2.25rem}.hero__ctas{flex-direction:column}.hero__ctas .btn{width:100%}}@media (max-width:477px){.hero h1{font-size:2rem}.hero__trust{gap:1rem}}.service-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2rem;text-align:center;transition:color var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);text-decoration:none;display:block}.service-card:hover{border-color:var(--color-accent);transform:translateY(-4px);box-shadow:var(--shadow-hover)}.service-card__icon{width:56px;height:56px;background:var(--color-bg-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;font-size:1.75rem}.service-card h3{font-size:var(--size-h4);margin-bottom:0.75rem}.service-card p{color:var(--color-text-muted);font-size:var(--size-small)}.service-card__link{display:inline-flex;align-items:center;gap:0.375rem;color:var(--color-accent);font-weight:var(--weight-semibold);font-size:var(--size-small);margin-top:1rem}.service-card__link svg{width:16px;height:16px;transition:transform var(--transition-fast)}.service-card:hover .service-card__link svg{transform:translateX(4px)}.blog-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:color var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);text-decoration:none;display:block}.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.blog-card h3{font-size:var(--size-h4);margin-bottom:0.5rem;color:var(--color-primary)}.blog-card p{color:var(--color-text-muted);font-size:var(--size-small)}.gallery-card{position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;aspect-ratio:4/3}.gallery-card img{width:100%;height:100%;object-fit:cover;transition:transform 500ms cubic-bezier(0.2,0.7,0.2,1)}.gallery-card:hover img{transform:scale(1.06)}.gallery-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(28,28,92,0.85) 0%,transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem;opacity:0;transition:opacity var(--transition-base)}.gallery-card:hover .gallery-card__overlay{opacity:1}.gallery-card__overlay h4{color:#FFFFFF;font-size:var(--size-small);margin-bottom:0.25rem}.gallery-card__overlay span{font-size:var(--size-caption);color:rgba(255,255,255,0.7)}.stat-bar{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;text-align:center}.stat-bar__item{padding:1.5rem 1rem}.stat-bar__number{font-size:2rem;font-weight:var(--weight-extrabold);color:#FFFFFF;line-height:1;margin-bottom:0.5rem}.stat-bar__label{font-size:var(--size-small);color:var(--color-text-muted);font-weight:var(--weight-semibold)}.section--dark .stat-bar__label{color:rgba(255,255,255,0.65)}@media (min-width:768px){.stat-bar{grid-template-columns:repeat(4,1fr)}.stat-bar__number{font-size:2.5rem}}@media (min-width:992px){.stat-bar__number{font-size:3.25rem}}.value-card{text-align:center;padding:1.5rem}.value-card__icon{width:64px;height:64px;background:linear-gradient(135deg,#2F7D1A 0%,#282881 100%);box-shadow:0 4px 14px rgba(47,125,26,0.3);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.75rem}.value-card h3{font-size:var(--size-h4);margin-bottom:0.5rem}.value-card p{font-size:var(--size-small);color:var(--color-text-muted)}.cta-banner{text-align:center;padding:var(--space-section) 0}.cta-banner h2{color:#FFFFFF;margin-bottom:1rem}.cta-banner p{color:rgba(255,255,255,0.75);font-size:1.125rem;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}.cta-banner__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:0.75rem}.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:0.75rem;transition:border-color var(--transition-fast)}.faq-item.active{border-color:var(--color-accent)}.faq-item__question{display:flex;align-items:center;justify-content:flex-start;width:100%;padding:1.25rem 1.5rem;background:none;border:none;cursor:pointer;text-align:left;font-size:var(--size-body);font-weight:var(--weight-semibold);color:var(--color-primary);min-height:44px;gap:1rem}.faq-item__question:hover{color:var(--color-accent)}.faq-item__icon{width:24px;height:24px;flex-shrink:0;transition:transform var(--transition-base)}.faq-item.active .faq-item__icon{transform:rotate(180deg)}.faq-item__answer-inner{padding:0 1.5rem 1.25rem;color:var(--color-text);font-size:var(--size-small);line-height:var(--lh-body)}.faq-item__answer-inner p{margin-bottom:0.75rem}.faq-item__answer-inner ul{list-style:disc;padding-left:1.25rem;margin-bottom:0.75rem}.faq-item__answer-inner li{margin-bottom:0.375rem}.breadcrumb{padding:1rem 0;font-size:var(--size-caption)}.breadcrumb a{color:var(--color-text-muted)}.breadcrumb a:hover{color:var(--color-accent)}.breadcrumb span{color:var(--color-text-muted);margin:0 0.375rem}.breadcrumb .current{color:var(--color-text);font-weight:var(--weight-semibold)}.badge{display:inline-flex;align-items:center;gap:0.25rem;font-size:var(--size-caption);font-weight:var(--weight-semibold);padding:0.25rem 0.625rem;border-radius:var(--radius-full);background:rgba(47,125,26,0.1);color:var(--color-accent)}.process-step{position:relative;padding-left:4rem;counter-increment:step}.process-step::before{content:counter(step);position:absolute;left:0;top:0;width:48px;height:48px;background:var(--color-accent);color:#FFFFFF;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:1.125rem}.process-step h3{font-size:var(--size-h4);margin-bottom:0.5rem}.process-step p{color:var(--color-text-muted);font-size:var(--size-small)}@media (min-width:992px){.process-step{padding-left:0;padding-top:4rem;text-align:center}.process-step::before{left:50%;top:0;transform:translateX(-50%)}}@media (max-width:768px){.footer a{display:inline-block;padding:0.375rem 0;min-height:44px;line-height:2}}@media (min-width:478px){.footer-grid-responsive{grid-template-columns:repeat(2,1fr) !important}}@media (min-width:992px){.footer-grid-responsive{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr !important}}.mobile-cta-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--color-primary);padding:0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) 1rem;box-shadow:0 -2px 10px rgba(0,0,0,0.2)}.mobile-cta-bar__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem;border-radius:var(--radius-md);font-weight:700;font-size:0.9375rem;text-decoration:none;min-height:48px}.mobile-cta-bar__btn--call{background:transparent;border:1.5px solid rgba(255,255,255,0.4);color:#fff}.mobile-cta-bar__btn--quote{background:var(--color-accent);border:1.5px solid var(--color-accent);color:#fff}@media(max-width:767px){.mobile-cta-bar{display:block}}.navbar__links a:focus-visible,.nav-dropdown__menu a:focus-visible,.btn:focus-visible,.service-card:focus-visible,.blog-card:focus-visible,.faq-item__question:focus-visible,.footer a:focus-visible,.gallery-card:focus-visible,.area-card:focus-visible{outline:3px solid #282881;outline-offset:2px;border-radius:4px}.section--dark .stat-bar__label,.section--dark .area-card span,.footer p,.footer a,.footer span{color:rgba(255,255,255,0.75)}.footer a:hover{color:#FFFFFF}@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}[style*="animation"]{animation:none!important}.service-card:hover,.blog-card:hover,.gallery-card:hover,.area-card:hover{transform:none!important}.service-card::before{transition:none!important}.gallery-card img,.blog-card img{transition:none!important}.cta-banner::before{animation:none!important}.hero .btn-primary::before{animation:none!important}}.gallery-item{transition:opacity 0.3s ease,transform 0.3s ease}#service-areas{content-visibility:auto;contain-intrinsic-size:auto 1200px}#blog-preview{content-visibility:auto;contain-intrinsic-size:auto 700px}#faq{content-visibility:auto;contain-intrinsic-size:auto 1500px}#cta-bottom{content-visibility:auto;contain-intrinsic-size:auto 600px}@media(max-width:991px){html{scroll-padding-top:72px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media(prefers-reduced-motion:reduce){.navbar__links>a::after{transition:none}}:root{--space-section:5.5rem;--space-section-sm:4rem}
/* ===== 2026-06-23 hero scroll cue (bottom-right) + top bar ===== */.hero__scroll-cue{transition:color .2s ease;}
.hero__scroll-cue:hover{color:#fff;}
.hero__scroll-mouse{position:relative;width:24px;height:38px;border:2px solid rgba(255,255,255,.6);border-radius:12px;display:block;}
.hero__scroll-wheel{position:absolute;top:7px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:scrollWheel 1.8s cubic-bezier(.4,0,.2,1) 1s 3 both;}
@keyframes scrollWheel{0%{opacity:0;transform:translateY(0)}25%{opacity:1}55%{opacity:1;transform:translateY(12px)}100%{opacity:0;transform:translateY(14px)}}
@media (max-width:768px){.hero__scroll-cue{display:none;}}
@media (prefers-reduced-motion:reduce){.hero__scroll-wheel{animation:none;top:50%;margin-top:-4px;}}
.topbar{background:#14143F;color:#fff;font-size:.82rem;line-height:1.3;}
.topbar__inner{display:flex;align-items:center;justify-content:center;gap:.5rem 1.25rem;flex-wrap:wrap;padding:.5rem 1rem;text-align:center;}
.topbar__msg{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;letter-spacing:.01em;}
.topbar__msg svg{flex:none;}
.topbar__dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);flex:none;}.topbar__phone{display:inline-flex;align-items:center;gap:.3rem;color:#7CC96A;font-weight:800;text-decoration:none;white-space:nowrap;}
.topbar__phone:hover{text-decoration:underline;}
@media (max-width:600px){.topbar{font-size:.74rem;}.topbar__inner{padding:.4rem .75rem;gap:.25rem .75rem;}}

/* ===== 2026-06-24 hero trust bar — fit one line on desktop ===== */
.hero__trust{gap:0.6rem 1rem !important;}
.hero__trust-item{font-size:0.78rem !important;}
.hero__trust-item svg{width:15px !important;height:15px !important;}

/* offscreen section layout skipping - measured on Fort Myers 2026-08-17: Style & Layout 1713 -> 1142 ms,
   TBT 794 -> 501 ms, CLS unchanged at 0.000. Lighthouse mobile showed 1713 ms of Style & Layout
   against 62 ms of script, i.e. the TBT was layout, not JavaScript. The hero and first section are
   excluded so the LCP element is never deferred; `auto` in contain-intrinsic-size makes the browser
   remember each section's real height, which is what prevents scroll-back shift. */
@media (max-width:767px){main > section:nth-of-type(n+2){content-visibility:auto;contain-intrinsic-size:auto 700px}}

/* mobile hero variants - !important because background-image is an inline style attribute. The town pages put the
   background on .service-hero__bg, so that selector is the one that has to match. */
@media (max-width: 767px) {
  .hero__bg[style*="hero-epoxy-floor-cincinnati."],
  .service-hero[style*="hero-epoxy-floor-cincinnati."],
  .service-hero__bg[style*="hero-epoxy-floor-cincinnati."] {
    background-image: url('../images/hero-epoxy-floor-cincinnati-m900.b3ef2c1abb.webp') !important;
  }

  .service-hero__bg[style*="commercial-epoxy-floor-hero."] {
    background-image: url('../images/commercial-epoxy-floor-hero-m900.db4ba7c6af.webp') !important;
  }
}


/* layout containment - each repeated card becomes its own layout root, so a change inside one
   cannot invalidate layout for the rest of the page. Style & Layout was 1605 ms against 69 ms of
   script, i.e. the whole of the mobile TBT. */
.service-card,.blog-card,.gallery-card,.value-card,.faq-item,.area-card,
.process-step,.stat-bar__item{contain:layout style}

/* footer layout skipping - the footer sits OUTSIDE <main>, so the section rule never covered it,
   and it is always below the fold. */
@media (max-width:767px){.footer{content-visibility:auto;contain-intrinsic-size:auto 900px}}
/* ===== 2026-09-22 shared layer, optimizer iteration 1 =====
   style.css loads after every page's own <style>, so a rule here wins a tie with the page copy. */

/* skip link - first element in <body> on every page */
/* (iteration 3) it slides with transform, not top; !important because some pages still carry an older top-based rule */
.skip-link{position:absolute;top:0!important;left:0;z-index:10000;background:#282881;color:#FFFFFF;padding:8px 16px;font-size:14px;font-weight:600;text-decoration:none;transform:translateY(-110%);transition:transform 0.2s ease!important}
.skip-link:focus{transform:none;color:#FFFFFF;outline:3px solid #FFFFFF;outline-offset:2px}

/* sticky header - the <header> wrapper is what sticks; a sticky child of a header exactly its own height never moved */
header[role="banner"]{position:sticky;top:0;z-index:1000}
header[role="banner"]>.navbar{position:relative}
/* tablet: no hamburger-only header - show the quote button from 768px */
@media (min-width:768px) and (max-width:991px){.navbar__cta{display:inline-flex;padding:0.625rem 1rem;font-size:var(--size-small)}}

/* mobile drawer: a close button inside it, hidden from the accessibility tree while closed */
.mobile-nav:not(.open){visibility:hidden;transition:transform var(--transition-base),visibility 0s linear 0.3s}
.mobile-nav.open{visibility:visible;transition:transform var(--transition-base)}
.mobile-nav__close{position:absolute;top:0.75rem;right:0.75rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:var(--radius-sm);color:#FFFFFF;cursor:pointer;transition:transform 120ms ease}
.mobile-nav__close:active{transform:scale(0.9)}
.mobile-nav__close:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}
.mobile-nav a[aria-current="page"]{color:#7CC96A}
/* Services dropdown dismissed with Escape stays closed until the pointer or focus leaves it */
.nav-dropdown.is-dismissed>.nav-dropdown__menu{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* top bar: a plain static dot - calls reach Nick Mon-Fri 9-6, so no pulsing "online now" signal */
.topbar__phone{min-height:44px;margin:-0.5rem 0;padding:0 0.5rem}
@media (max-width:600px){.topbar__extra{display:none}}

/* sticky mobile Call / Quote bar: a short slide-in (no held delay) on the first page of a visit only;
   later pages show it from first paint (html.cta-bar-seen is set by the page script) */
@media (max-width:767px){
  .mobile-cta-bar{display:block;padding:0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) 1rem!important}
  .mobile-cta-bar>div{width:100%;max-width:500px!important;margin:0 auto}
  .mobile-cta-bar__btn{white-space:nowrap;min-height:48px;padding:0.625rem 0.75rem}
  body:has(.mobile-cta-bar) main{padding-bottom:0!important}
  body:has(.mobile-cta-bar) .footer{padding-bottom:calc(2rem + 72px + env(safe-area-inset-bottom, 0px))!important}
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){.mobile-cta-bar{animation:ctaBarIn 240ms cubic-bezier(0.2,0.7,0.2,1) backwards}}
html.cta-bar-seen .mobile-cta-bar{animation:none!important}
@keyframes ctaBarIn{from{transform:translateY(100%)}to{transform:none}}
.mobile-cta-bar a:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}

/* links inside running text are underlined, not colour-only (WCAG 1.4.1) */
main p a:not(.btn),main li:not(nav li) a:not(.btn):not([class]),main td a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.18em}
main p a:not(.btn):hover,main li:not(nav li) a:not(.btn):not([class]):hover,main td a:not(.btn):hover{text-decoration-thickness:2px}

/* keyboard focus: 3px ring that reaches 3:1 on white and light grey; white on the dark bands */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,.btn:focus-visible,.service-card:focus-visible,.blog-card:focus-visible,.faq-item__question:focus-visible,.gallery-card:focus-visible,.area-card:focus-visible{outline:3px solid #282881;outline-offset:2px}
.topbar a:focus-visible,.navbar a:focus-visible,.navbar button:focus-visible,.mobile-nav a:focus-visible,.mobile-nav button:focus-visible,.footer a:focus-visible,.section--dark a:focus-visible,.section--dark button:focus-visible,.hero a:focus-visible,.service-hero a:focus-visible,.article-hero a:focus-visible,.article-cta a:focus-visible,.mobile-cta-bar a:focus-visible{outline-color:#FFFFFF}
.nav-dropdown__menu a:focus-visible{outline-color:#282881}

/* press feedback - hover never fires on the first tap of a phone */
a,button{-webkit-tap-highlight-color:rgba(47,125,26,0.15)}
.btn:active,.mobile-cta-bar__btn:active,.topbar__phone:active,.faq-item__question:active,.filter-btn:active,.navbar__hamburger:active{transform:scale(0.97);transition-duration:60ms}
.service-card:active,.blog-card:active,.blog-featured:active,.gallery-card:active,.area-card:active{transform:scale(0.985);transition-duration:60ms}

/* cards that are not links do not lift; link cards lift only where a real hover exists */
.benefit-card,.about-value-card,.service-detail{transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast),background-color var(--transition-fast)}
.benefit-card:hover,.about-value-card:hover,.service-detail:hover{transform:none;box-shadow:var(--shadow-sm)}
@media (hover:none){
  .service-card:hover,.blog-card:hover,.blog-featured:hover,.area-card:hover{transform:none;box-shadow:none}
  .gallery-card:hover img,.blog-card:hover img,.blog-featured:hover img,.service-detail:hover .service-detail__image img{transform:none}
  .service-card:hover::before{transform:scaleX(0)}
}

/* scroll reveal: shown by default; only html.reveal-on (set by the page script after its first pass) holds back
   what is still below the fold. A keyframe, not a transition, so card transition shorthands cannot cancel it. */
.reveal{opacity:1;transform:none}
html.reveal-on .reveal:not(.visible){animation:revealHold 1s linear paused both}
html.reveal-on .reveal.visible:not(.reveal--instant){animation:revealUp 450ms cubic-bezier(0.2,0.7,0.2,1) backwards}
html.reveal-on .reveal-delay-1.visible{animation-delay:80ms}
html.reveal-on .reveal-delay-2.visible{animation-delay:160ms}
html.reveal-on .reveal-delay-3.visible{animation-delay:240ms}
html.reveal-on .reveal-delay-4.visible{animation-delay:320ms}
html.reveal-on .reveal-delay-5.visible{animation-delay:400ms}
@keyframes revealHold{from,to{opacity:0;transform:translate3d(0,24px,0)}}
@keyframes revealUp{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.reveal-on .reveal{animation:none!important}}

/* FAQ: one accordion for every page - the height change is instant, only the answer fades in;
   a closed answer is hidden from keyboard and screen readers as well as from view */
.faq-item__answer{display:block;max-height:none!important;overflow:hidden;transition:none!important}
.faq-item:not(.active) .faq-item__answer{height:0;visibility:hidden}
.faq-item.active .faq-item__answer{height:auto;visibility:visible}
.faq-item.active .faq-item__answer>*{animation:faqIn 200ms ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq-item__question>.faq-item__icon{margin-left:auto}

/* quote form: a loading note until the form frame has loaded */
.ghl-form-container{position:relative}
.ghl-form-container.is-loading::before{content:"Loading the quote form\2026";position:absolute;top:3rem;left:0;right:0;text-align:center;color:#595959;font-size:var(--size-small);pointer-events:none;animation:formWait 1.4s ease-in-out infinite}
@keyframes formWait{0%,100%{opacity:0.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ghl-form-container.is-loading::before{animation:none}}
#cta-bottom,#quote-form{scroll-margin-top:16px}
[tabindex="-1"]:focus{outline:none}

/* H1 subtitle span on the inner-page heroes */
.service-hero h1 span{display:block;color:#7CC96A;font-size:0.62em;font-weight:700;line-height:1.25;margin-top:0.4rem;letter-spacing:-0.005em}

/* mobile type scale: 32px H1 / 28px H2 on phones, one step less below 478px */
@media (max-width:767px){
  main h1:not(.fs-intro__title){font-size:2rem!important;line-height:1.15!important}
  .section__header h2,main h2[style*="font-size:var(--size-h2)"]{font-size:1.75rem!important}
}
@media (max-width:477px){
  main h1:not(.fs-intro__title){font-size:1.75rem!important}
  main .hero h1{font-size:2rem!important}
  .section__header h2,main h2[style*="font-size:var(--size-h2)"]{font-size:1.5rem!important}
}
.section__header h2,.section__header p,.hero h1,.service-hero h1,.article-hero h1{text-wrap:balance}

/* blog article heroes grow with the title instead of clipping it */
.article-hero{height:auto!important;min-height:340px}
.article-hero>img,.article-hero>picture{position:absolute!important;inset:0;width:100%;height:100%}
.article-hero>picture>img{width:100%;height:100%;object-fit:cover}
.article-hero>div{position:relative!important;inset:auto!important;min-height:340px}
@media (max-width:767px){
  .article-hero{min-height:280px}
  .article-hero>div{min-height:280px;padding-top:2rem}
}

/* homepage: finishes preview rows and service-area cards on phones */
@media (max-width:767px){
  .gallery-row-1,.gallery-row-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gallery-row-1>.gallery-card,.gallery-row-2>.gallery-card{aspect-ratio:4/3!important;min-height:0!important;height:auto!important}
}
@media (max-width:599px){
  .gallery-row-1 .gallery-card__overlay,.gallery-row-2 .gallery-card__overlay{padding:0.625rem 0.75rem}
  .gallery-row-1 h3,.gallery-row-2 h3{font-size:0.875rem!important;line-height:1.25}
  .gallery-row-1 .badge,.gallery-row-2 .badge,.gallery-row-1 .gallery-card__overlay>span:last-child,.gallery-row-2 .gallery-card__overlay>span:last-child{display:none!important}
  .gallery-row-2>.gallery-card:last-child>div{padding:0.75rem}
  .gallery-row-2>.gallery-card:last-child>div>div{width:36px;height:36px;margin-bottom:0.5rem}
}
@media (max-width:600px){.areas-grid{grid-template-columns:1fr!important}.areas-grid .area-card>div:last-child{min-width:0}}
@media (max-width:1199px){.hero__scroll-cue{display:none!important}}
@media (max-width:477px){.hero__badge{font-size:0.8125rem;padding:0.5rem 1rem}}

/* stats bar: centred icons, prices on one line */
.stat-bar__item>svg{display:block;margin:0 auto 0.625rem}
.stat-bar__number{white-space:nowrap}
@media (max-width:477px){.stat-bar__number{font-size:1.625rem}}

/* grids: five cards fill the 3-column row as 3 + 2; an odd last card is centred on two-column widths */
@media (min-width:992px){
  .grid-3:has(>:nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}
  .grid-3:has(>:nth-child(5):last-child)>*{grid-column:span 2}
  .grid-3:has(>:nth-child(5):last-child)>:nth-child(n+4){grid-column:span 3}
}
@media (min-width:768px) and (max-width:991px){
  .grid-3>:last-child:nth-child(odd):not(:first-child){grid-column:1/-1;justify-self:center;width:calc(50% - var(--gap-md)/2)}
}

/* review cards: the author row sits at the bottom of equal-height cards */
.grid-3>div[style*="border-left:3px solid var(--color-accent)"]{display:flex;flex-direction:column}
.grid-3>div[style*="border-left:3px solid var(--color-accent)"]>blockquote{flex:1 1 auto}

/* small blue step / category tags: #282881 reaches 5.6:1 on their tint (the brand blue was about 4.3:1) */
[style*="font-size:0.6875rem;font-weight:700;color:var(--color-accent);background:rgba(47,125,26,0.08)"]{color:#282881!important}

/* footer: shared heading style (Floor Studio lacked it) and 44px social icons */
.footer h4,.footer__heading{color:#FFFFFF;font-size:var(--size-small);font-weight:var(--weight-bold);margin-bottom:1rem;text-transform:uppercase;letter-spacing:0.05em}
.footer-social{display:flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;min-height:0!important;padding:0!important;border-radius:6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1)}

/* small tap targets */
.breadcrumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 0.25rem}
nav[aria-label="Table of contents"] a{display:flex;align-items:center;min-height:44px}
.tap-44{display:inline-flex;align-items:center;min-height:44px}

/* Floor Studio: intro and tool share the site container width, so the H1 lines up with the logo and every other page */
.fs-app-wrap>.fs-intro,.fs-app-wrap>.fs-main{max-width:var(--container-max)}
/* ===== 2026-09-23 shared layer, optimizer iteration 2 ===== */

/* focus ring on dark boxes styled inline (not .section--dark/.hero): white, 14:1 on #1C1C5C */
[style*="background:var(--color-primary)"] a:focus-visible,[style*="background:var(--color-primary)"] button:focus-visible,
[style*="background:var(--color-bg-dark)"] a:focus-visible,[style*="background:#1C1C5C"] a:focus-visible,[style*="background:#0F1419"] a:focus-visible,
[style*="linear-gradient(135deg,var(--color-primary)"] a:focus-visible,[style*="linear-gradient(135deg,var(--color-primary)"] button:focus-visible,
[style*="linear-gradient(135deg,#0F1419"] a:focus-visible,[style*="linear-gradient(135deg,#0F1419"] button:focus-visible,
[style*="linear-gradient(135deg,#1C1C5C"] a:focus-visible{outline-color:#FFFFFF}
/* ...and back to blue on a white card inside a dark band (a white ring on white is invisible) */
.section--dark .ghl-form-container a:focus-visible,.section--dark .ghl-form-container button:focus-visible,
.section--dark [style*="background:#FFFFFF"] a:focus-visible,.section--dark [style*="background:#FFFFFF"] button:focus-visible,
.section--dark [style*="background:#FFF;"] a:focus-visible,.section--dark [style*="background:var(--color-bg)"] a:focus-visible,
.section--dark [style*="background:var(--color-bg-light)"] a:focus-visible,
[style*="background:var(--color-primary)"] [style*="background:#FFFFFF"] a:focus-visible{outline-color:#282881}

/* Floor Studio: every control sits on the dark navy panels (#14143F/#18183F), where the blue ring is under 3:1 */
.fs-app-wrap a:focus-visible,.fs-app-wrap button:focus-visible,.fs-app-wrap select:focus-visible,.fs-app-wrap input:focus-visible,.fs-app-wrap textarea:focus-visible,.fs-app-wrap [tabindex]:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}
.fs-app-wrap .fs-input:focus-visible{border-color:#7CC96A;box-shadow:0 0 0 3px rgba(124,201,106,0.55)}

/* hover never recolours white-on-colour controls (touch keeps :hover after a tap) */
.mobile-cta-bar__btn,.mobile-cta-bar__btn:hover,.mobile-cta-bar__btn:focus,.mobile-cta-bar__btn:active{color:#FFFFFF}
@media (hover:hover){
  .mobile-cta-bar__btn--quote:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}
  .mobile-cta-bar__btn--call:hover{background:rgba(255,255,255,0.1);border-color:#FFFFFF}
}
.topbar__phone:hover,.topbar__phone:focus-visible{color:#A8DB98}
.skip-link:hover{color:#FFFFFF}
.mobile-nav__actions .btn,.mobile-nav__actions .btn:hover,.mobile-nav__actions .btn:focus,.mobile-nav__actions .btn:active{color:#FFFFFF}
.mobile-nav>a:hover{color:#7CC96A}
.mobile-nav a[aria-current="true"]{color:#7CC96A}

/* sticky mobile bar: keyboard focus is never hidden under it. After hours the page script moves the quote button
   first in the DOM, so the Tab order matches what is seen. While a quote form is on screen the bar's own quote
   button steps aside - in hours only: there the call button keeps its place and just widens, while after hours
   removing the leading quote button would slide the call button across the bar (a layout shift) */
@media (max-width:767px){html:has(.mobile-cta-bar){scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px))}}
@media (max-width:767px){html.form-in-view:not(.after-hours) .mobile-cta-bar__btn--quote{display:none}}

/* mobile drawer: the Call and Quote buttons stay on screen at any height, wherever the menu button shows (to 1149px) */
@media (max-width:1149px){
  .mobile-nav{padding-bottom:0}
  .mobile-nav>a{padding:0.625rem 0;font-size:1.125rem}
  .mobile-nav__actions{position:sticky;bottom:0;z-index:1;margin-top:auto;padding:1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));background:var(--color-primary);box-shadow:0 -14px 14px -6px rgba(28,28,92,0.95)}
  .mobile-nav__actions .btn{padding:0.75rem 1.25rem}
}

/* top bar on phones: one short line; the sticky bar's call button shows the phone number */
@media (max-width:767px){
  body:has(.mobile-cta-bar) .topbar__phone{display:none}
  .topbar__msg{font-size:0.75rem;line-height:1.35}
}

/* sticky header: its background is opaque, so the blur only costs frames */
.navbar.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none}
/* desktop nav underline grows with transform, not width */
.navbar__links>a::after{width:60%;transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform 200ms ease}
.navbar__links>a.active::after,.navbar__links>a:hover::after{width:60%;transform:translateX(-50%) scaleX(1)}
@media (prefers-reduced-motion:reduce){.navbar__links>a::after{transition:none}}

/* type scale on phones: the tokens step down too, so inline var(--size-h2/h3/h4) headings keep H1 > H2 > H3 > card titles */
@media (max-width:767px){
  :root{--size-h2:1.75rem;--size-h3:1.25rem;--size-h4:1.125rem}
  .stat-callout__number{font-size:1.625rem}
}
@media (max-width:477px){:root{--size-h2:1.5rem;--size-h3:1.1875rem}}

/* quote form: arrival cue after a quote-button jump, loading note inside the frame area, fallback line */
.ghl-form-container.is-loading::before{top:auto;bottom:45%;z-index:1}
.ghl-form-container.is-arrived::after{content:"";position:absolute;inset:-4px;border-radius:20px;box-shadow:0 0 0 3px #282881;pointer-events:none;opacity:0;animation:formArrive 1400ms ease-out both}
.section--dark .ghl-form-container.is-arrived::after{box-shadow:0 0 0 3px #7CC96A}
@keyframes formArrive{0%{opacity:0}15%{opacity:1}70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ghl-form-container.is-arrived::after{animation:none;opacity:1}}
.ghl-form-container .ghl-form-fallback{margin:0.75rem 0 0;text-align:center;font-size:var(--size-small);color:#595959}
.ghl-form-container .ghl-form-fallback a{color:#282881;font-weight:600}
.ghl-form-container.is-slow .ghl-form-fallback{color:var(--color-text);font-weight:600}

/* closing CTA band: the banner carries the padding, so its glow fills the whole band */
.section.section--dark:has(>.cta-banner){padding-top:0;padding-bottom:0}
@media (max-width:767px){.cta-banner{padding:var(--space-section-sm) 0}}
.cta-banner::before{animation:none!important}

/* vertical process timeline (rows with their own number) keeps its left-aligned layout on desktop */
@media (min-width:992px){.process-step:has(>.process-step__number){padding-top:0;text-align:left}}

/* homepage timeline: each connector runs down to the next step circle (row + 1.5rem spacer + two 1.5rem gaps below) */
div[style*="grid-template-columns:auto 1fr"]>div:first-child{align-self:stretch}
div[style*="grid-template-columns:auto 1fr"]>div:first-child>div[style*="left:31px;top:64px"]{height:calc(100% - 64px + 4.5rem)!important;background:var(--color-accent)!important;opacity:0.35}

/* photo service cards (homepage, town pages): full-bleed photo, link pinned to the card bottom */
a.service-card:has(>img){display:flex;flex-direction:column;padding:0;overflow:hidden}
a.service-card:has(>img)>div{display:flex;flex-direction:column;flex:1 1 auto}
a.service-card:has(>img) .service-card__link{margin-top:auto;padding-top:0.75rem;align-self:center}
/* value cards: the closing link sits at the same height in every card of a row */
.value-card{display:flex;flex-direction:column}
.value-card>a:last-child,.value-card>span:last-child{margin-top:auto!important;padding-top:0.75rem;align-self:center}

/* service-page gallery previews reflow on phones */
@media (max-width:599px){#gallery [style*="grid-template-columns:repeat(3,1fr)"]:not(.gallery-grid),#gallery [style*="grid-template-columns:repeat(2,1fr)"]:not(.gallery-grid){grid-template-columns:1fr!important}}
@media (min-width:600px) and (max-width:767px){#gallery [style*="grid-template-columns:repeat(3,1fr)"]:not(.gallery-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* homepage 'View Full Gallery' tile fits its card on phones */
@media (max-width:599px){
  .gallery-row-2>.gallery-card:last-child span{font-size:0.9375rem!important;line-height:1.25}
  .gallery-row-2>.gallery-card:last-child small{display:none}
  .gallery-row-2>.gallery-card:last-child>div>div{width:32px!important;height:32px!important;margin-bottom:0.375rem!important}
}
/* photo badges: an opaque fill, no backdrop blur */
.gallery-card .badge{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.gallery-card .badge[style*="rgba(47,125,26,0.85)"]{background:#282881!important}
/* inner-page hero on phones: an even overlay behind the subtitle and trust row */
@media (max-width:767px){.service-hero__bg::after{background:linear-gradient(180deg,rgba(28,28,92,0.9) 0%,rgba(28,28,92,0.78) 100%)}}

/* homepage hero: the phone button reads as a link and gives way to the sticky bar on phones */
.hero__ctas .btn-ghost[href^="tel:"]{border-color:transparent;background:none;padding-left:0.75rem;padding-right:0.75rem;text-decoration:underline;text-underline-offset:4px}
.hero__ctas .btn-ghost[href^="tel:"]:hover{text-decoration-thickness:2px}
@media (max-width:767px){body:has(.mobile-cta-bar) .hero__ctas .btn-ghost[href^="tel:"]{display:none}}

/* town cards: only the linked ones react, and they show an arrow before any hover */
div.area-card{cursor:default}
div.area-card:hover{transform:none;box-shadow:none;border-color:var(--color-border)}
div.area-card:hover .area-card__icon svg{animation:none}
@media (hover:none){a.area-card:hover .area-card__icon svg{animation:none}}
a.area-card::after{content:"\2192";content:"\2192" / "";margin-left:auto;padding-left:0.5rem;color:var(--color-accent);font-weight:700;transition:transform 150ms ease}
.section--dark a.area-card::after{color:#7CC96A}
@media (hover:hover){a.area-card:hover::after{transform:translateX(3px)}}

/* links on the light-grey bands: #282881 reaches 5.9:1 on #F6F6FA (the brand blue is 4.45:1) */
.section--light a:not([class]),[style*="background:var(--color-bg-light)"] a:not([class]),.breadcrumb a{color:#282881}
.breadcrumb a:hover{color:#282881;text-decoration:underline}
/* the review-count link in a caption is underlined, not colour-only */
main figcaption a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.18em}

/* 44px tap targets: breadcrumbs without the class, town chips, service links, the contact phone */
nav[aria-label="Breadcrumb"] a{display:inline-flex;align-items:center;min-height:44px;padding:0 0.25rem}
.suburb-links a{min-height:44px}
.contact-info-card a[href^="tel:"]{min-height:44px}
.service-detail__cta{min-height:44px;transition:color 150ms ease}
.service-detail__cta:hover{gap:0.5rem}
.service-detail__cta svg{transition:transform 150ms ease}
@media (hover:hover){.service-detail__cta:hover svg{transform:translateX(4px)}}
/* our-services category chips stay compact pills */
.service-detail__content>span:first-child{align-self:flex-start}

/* reveal: an element that takes keyboard focus is shown at once */
html.reveal-on .reveal:focus-within{animation:none!important;opacity:1;transform:none}
/* swipe rows (.swipe-row: homepage #why-us and #conditions only): on phones a six-card section becomes a swipeable
   row (the next card peeks in), cutting ~4,000px of scroll. The markup makes each row a labelled region that the
   keyboard can focus and scroll */
@media (max-width:767px){
  .swipe-row{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:0.75rem!important;padding:0 0 0.75rem;scrollbar-width:thin}
  .swipe-row>*{scroll-snap-align:start}
  html.reveal-on .swipe-row>.reveal{animation:none!important;opacity:1;transform:none}
}
/* ===== 2026-09-24 shared layer, optimizer iteration 3 ===== */

/* quote form: GHL's embed script parks the frame off-screen (position:absolute; left:-9999px) while it prepares it.
   Keep the frame in its box, so the box never collapses and the page below it never jumps */
.ghl-form-container>iframe{position:relative!important;left:auto!important}
/* loading state: field-shaped bars on the waiting frame; the frame pulses, the label stays at full contrast */
.ghl-form-container.is-loading iframe{background-color:#F6F6FA;background-image:linear-gradient(#E6E6F0,#E6E6F0),linear-gradient(#E6E6F0,#E6E6F0),linear-gradient(#E6E6F0,#E6E6F0),linear-gradient(#E6E6F0,#E6E6F0),linear-gradient(#D2D2EA,#D2D2EA);background-size:calc(100% - 48px) 40px,calc(100% - 48px) 40px,calc(100% - 48px) 40px,calc(100% - 48px) 64px,calc(100% - 48px) 44px;background-position:24px 32px,24px 88px,24px 144px,24px 200px,24px 284px;background-repeat:no-repeat;animation:formWait 1.4s ease-in-out infinite}
.ghl-form-container.is-loading::before{animation:none;opacity:1}
/* ...and while GHL's script keeps the frame hidden, the same bars are painted on the box behind it */
.ghl-form-container.is-loading:has(iframe[style*="visibility: hidden"]){background-image:linear-gradient(#E6E6F0,#E6E6F0),linear-gradient(#E6E6F0,#E6E6F0),linear-gradient(#E6E6F0,#E6E6F0),linear-gradient(#E6E6F0,#E6E6F0),linear-gradient(#D2D2EA,#D2D2EA)!important;background-size:calc(100% - 48px) 40px,calc(100% - 48px) 40px,calc(100% - 48px) 40px,calc(100% - 48px) 64px,calc(100% - 48px) 44px!important;background-position:24px 32px,24px 88px,24px 144px,24px 200px,24px 284px!important;background-repeat:no-repeat!important;background-origin:content-box!important}
@media (prefers-reduced-motion:reduce){.ghl-form-container.is-loading iframe{animation:none}}

/* homepage hero accent line: light blue that holds 3:1+ over the whole photo (brand blue #2F7D1A was 2.5:1) */
.hero h1 span{color:#A8DB98}
/* contact hero accent line on phones is normal-size text: 4.5:1 needed */
@media (max-width:767px){.service-hero--compact h1 span{color:#A8DB98}}

/* swipe rows (homepage, phones): focus ring on the scrollable region, and position dots under each row */
.swipe-row:focus-visible{outline:3px solid #282881;outline-offset:4px;border-radius:8px}
.swipe-dots{display:none}
@media (max-width:767px){
  .swipe-dots{display:flex;justify-content:center;gap:8px;margin-top:0.75rem}
  .swipe-dots span{width:6px;height:6px;border-radius:50%;background:#9AA8BF;transition:transform 150ms ease,background-color 150ms ease}
  .swipe-dots span.is-on{background:var(--color-accent);transform:scale(1.4)}
}

/* sticky mobile bar: the call button shows the number itself; tighter on the narrowest phones */
@media (max-width:374px){.mobile-cta-bar__btn{font-size:0.8125rem;gap:0.375rem;padding:0.625rem 0.5rem}}

/* outline buttons whose colours are set inline (Read All Reviews on Google) still fill on hover */
@media (hover:hover){
  a.btn.btn-outline[style*="background:transparent"]:hover{background:#282881!important;border-color:#282881!important;color:#FFFFFF!important;box-shadow:var(--shadow-hover)}
}
/* standalone links styled inline still answer the pointer: an underline works on light and dark bands alike */
a.tap-44,nav[aria-label="Breadcrumb"] a,.footer a[href^="tel:"]{text-underline-offset:0.22em}
@media (hover:hover){
  a.tap-44:hover,nav[aria-label="Breadcrumb"] a:hover{text-decoration-line:underline!important;text-decoration-thickness:2px!important}
  a.tap-44[style*="color:rgba(255,255,255,0.8)"]:hover{color:#FFFFFF!important}
  main a[style*="text-decoration:underline"]:hover,main figcaption a:not(.btn):hover{text-decoration-thickness:2px!important}
  .footer a[href^="tel:"]:hover{text-decoration-line:underline!important;text-decoration-thickness:2px;color:#A8DB98!important}
}
/* homepage FAQ: the chevron flips when open and the question answers the pointer (colours are inline there) */
#faq .faq-item.active .faq-item__question>svg:last-child{transform:rotate(180deg)}
@media (hover:hover){#faq .faq-item__question:hover{color:#282881!important}}
/* town-page chips to the other town pages */
.town-chip{transition:border-color 150ms ease,color 150ms ease,box-shadow 150ms ease,transform 150ms ease}
@media (hover:hover){.town-chip:hover{border-color:var(--color-accent)!important;color:#282881!important;box-shadow:var(--shadow-md)!important;transform:translateY(-2px)}}
.town-chip:active{transform:scale(0.97);transition-duration:60ms}
@media (prefers-reduced-motion:reduce){.town-chip:hover{transform:none}}
/* touch screens keep :hover on the last tapped button: no lingering scale or darker fill */
@media (hover:none){
  .btn-primary:hover{transform:none;box-shadow:none;background-color:var(--color-accent);border-color:var(--color-accent)}
  .btn-ghost:hover{background-color:transparent}
}

/* blog articles: table-of-contents links answer the pointer; a heading reached from the contents lands 16px under the
   header (the header is already in scroll-padding-top) and shows a short arrival bar */
nav[aria-label="Table of contents"] a{transition:color 150ms ease}
@media (hover:hover){nav[aria-label="Table of contents"] a:hover{color:#282881!important;text-decoration:underline!important;text-underline-offset:0.2em}}
.blog-post__content h2{scroll-margin-top:16px;position:relative}
.blog-post__content h2.is-arrived::before{content:"";position:absolute;left:-0.75rem;top:0.1em;bottom:0.1em;width:4px;border-radius:2px;background:#2F7D1A;pointer-events:none;animation:formArrive 1400ms ease-out both}
@media (prefers-reduced-motion:reduce){.blog-post__content h2.is-arrived::before{animation:none;opacity:1}}
/* blog tables fit a phone: no column hides off-screen */
@media (max-width:600px){
  .blog-post__content td[style*="nowrap"]{white-space:normal!important}
  .blog-post__content th,.blog-post__content td{padding:0.5rem 0.375rem;overflow-wrap:anywhere}
}

/* photo tiles: the scrim follows the caption, not a share of the tile. The caption's first line paints it (a border-image
   drawn outside its box, clipped by the rounded card): navy behind the text, fading out 3.5rem above it, so the floor
   in the rest of the photo keeps its real colour at any tile size */
.gallery-card__overlay[style*="rgba(28,28,92,0.25) 100%"]{background:none!important}
.gallery-card__overlay[style*="rgba(28,28,92,0.25) 100%"]>:is(h3,h4,p){border-image:linear-gradient(to bottom,rgba(16,18,40,0) 0,rgba(16,18,40,0.22) 1.25rem,rgba(16,18,40,0.6) 2.5rem,rgba(16,18,40,0.84) 3.5rem,rgba(16,18,40,0.94) 100%) fill 0/0/3.5rem 100vw 12rem}
/* gallery on phones: the quote tile fills the cell beside the last photo, as on tablet and desktop */
@media (max-width:767px){
  .gallery-grid>.gallery-cta{grid-column:auto;padding:0.75rem;gap:0.375rem}
  .gallery-grid .gallery-cta__title{font-size:1rem}
  .gallery-grid .gallery-cta__text,.gallery-grid .gallery-cta__call{display:none}
  .gallery-grid .gallery-cta .btn{width:100%;padding:0.625rem 0.5rem;font-size:0.875rem;white-space:normal}
}

/* service and town timelines: the rail runs past each step photo to the next number (photo keeps its 72px inset) */
#process [role="list"]>figure:not(:last-child){margin:0 0 0 20px!important;padding:0.5rem 0 2.5rem 50px!important;border-left:2px solid var(--color-border)}
/* homepage timeline on phones: smaller number circle, wider text column */
@media (max-width:599px){
  div[style*="grid-template-columns:auto 1fr"]{gap:0.875rem!important}
  div[style*="grid-template-columns:auto 1fr"]>div:first-child>div:first-child{width:44px!important;height:44px!important;font-size:1.125rem!important}
  div[style*="grid-template-columns:auto 1fr"]>div:first-child>div[style*="left:31px;top:64px"]{left:21px!important;top:44px!important;height:calc(100% - 44px + 4.5rem)!important}
  div[style*="grid-template-columns:auto 1fr"]>div:last-child{padding:1.125rem 1.25rem!important}
  div[style*="grid-template-columns:auto 1fr"]>div:last-child>p{padding-left:0!important}
}
/* homepage link rows: each link a 44px target on phones */
@media (max-width:767px){.link-row{line-height:1.4!important}.link-row>a{display:inline-flex!important;align-items:center;min-height:44px;padding:0 0.125rem}}

/* our-services on tablets: photo above the text, so it keeps a landscape shape */
@media (min-width:768px) and (max-width:991px){
  .service-detail{grid-template-columns:1fr!important}
  .service-detail__image{min-height:0!important;aspect-ratio:16/9}
  .service-detail--reverse .service-detail__image,.service-detail--reverse .service-detail__content{order:0!important}
}
/* service-areas: the call tile that completes the last row of the 13 towns */
.towns-glance__cta{background:var(--color-primary)!important;border-color:var(--color-primary)!important}
.towns-glance__cta-title{display:block;font-size:var(--size-small);font-weight:600;line-height:1.4;color:#FFFFFF;margin-bottom:0.125rem}
.towns-glance__cta span{color:rgba(255,255,255,0.85)!important}
.towns-glance__cta::after{color:#7CC96A!important}
@media (min-width:768px){.towns-glance>.towns-glance__cta{flex:0 1 calc((200% - var(--gap-sm))/3)}}
/* Floor Studio promo sits above the closing quote band: white when the band before it is grey */
.section--light+.fs-promo{background:#FFFFFF}
/* review tags never break inside the pill */
span[style*="margin-left:auto"][style*="border-radius:var(--radius-full)"]{white-space:nowrap;flex-shrink:0}
/* content lists on the legal pages show their markers */
.legal-content ul{list-style:disc;padding-left:1.25rem;margin-bottom:1rem}
.legal-content li{margin-bottom:0.375rem}
/* breadcrumbs: links, separators and the current page share one line */
nav[aria-label="Breadcrumb"] ol{align-items:center}

/* footer on phones and tablets: brand on its own row, then Services|Company and Service Areas|Contact */
@media (max-width:991px){
  .footer-grid-responsive{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:1.5rem!important}
  .footer-grid-responsive>:first-child{grid-column:1/-1}
}

/* touch targets */
.navbar__logo{display:inline-flex;align-items:center;min-height:48px}
.fs-breadcrumb{min-height:44px}
.legal-content li a{display:inline-flex;align-items:center;min-height:44px}
main figcaption a:not(.btn){display:inline-flex;align-items:center;min-height:44px}

/* scroll reveal on single-column phones: each card arrives on its own, so no stagger and a shorter rise */
@media (max-width:767px){html.reveal-on .reveal.visible:not(.reveal--instant){animation-delay:0ms!important;animation-duration:320ms}}
/* ===== 2026-09-24 shared layer, optimizer iteration 4 ===== */

/* FAQ accordions: .faq-item clips its content (overflow:hidden keeps the rounded corners), which hid the 2px-outside
   focus ring on every question. The ring is drawn inside the button instead: #282881 is 6.3:1 on white, 5.9:1 on #F6F6FA */
.faq-item .faq-item__question:focus-visible{outline:3px solid #282881;outline-offset:-4px;border-radius:calc(var(--radius-md) - 1px)}

/* closing CTA band: the decorative glow paints behind the band's content, not over it (it tinted the white label on
   the blue Call button down to 3.7:1; untinted, white on #2F7D1A is 4.78:1) */
.cta-banner>.container{position:relative;z-index:1}

/* keyboard focus in the top bar: the ring sits inside the link, so its top edge is not cut off at the window edge */
.topbar a:focus-visible{outline-offset:-3px}

/* gallery on phones: the caption sits under the photo, so every floor shows in full (the category chip stays on the photo) */
@media (max-width:767px){
  .gallery-grid .gallery-item:not([hidden]){display:flex;flex-direction:column}
  .gallery-grid .gallery-card{flex:1 1 auto;aspect-ratio:auto!important;display:flex;flex-direction:column;background:#1C1C5C}
  .gallery-grid .gallery-card>img{flex:none;aspect-ratio:4/3;height:auto!important}
  .gallery-grid .gallery-card__overlay{position:static!important;flex:1 1 auto;justify-content:flex-start;background:#1C1C5C!important;padding:0.5rem 0.625rem 0.625rem!important}
  .gallery-grid .gallery-card__overlay>:is(h3,h4,p){border-image:none}
  .gallery-grid .gallery-card__band{margin:0!important;padding:0!important;background:none!important}
}

/* review cards: the service tag sits at the right end of the star row, so the reviewer's name keeps one line */
div[style*="border-left:3px solid var(--color-accent)"][style*="position:relative"] span[style*="margin-left:auto"][style*="border-radius:var(--radius-full)"]{position:absolute;top:calc(2rem + 9px);right:2rem;transform:translateY(-50%);margin-left:0}

/* town cards: the county / landmark line wraps at its own line height */
.area-card span{display:block;line-height:1.45}

/* finish cards: the icon badge moves to the corner and the crop favours the floor, so the finish itself is what shows */
div[style*="height:140px"]:has(>img)>div[style*="width:64px"][style*="z-index:1"]{position:absolute!important;left:12px;bottom:12px;width:40px!important;height:40px!important}
div[style*="height:140px"]:has(>img)>div[style*="width:64px"][style*="z-index:1"] svg{width:20px;height:20px}
div[style*="height:140px"]>img{object-position:center 88%!important}

/* inner-page hero trust row: each item on its own dark chip, so the white text holds 4.5:1 over any part of the photo;
   two even rows of two from tablet width up */
.service-hero__trust-item,.service-hero .hero__trust-item{color:#FFFFFF;background:rgba(15,20,25,0.55);padding:0.3125rem 0.75rem;border-radius:var(--radius-full);text-shadow:none}
.service-hero__trust,.service-hero__content>div:has(>.hero__trust-item){gap:0.625rem 0.75rem!important}
@media (min-width:768px){.service-hero__trust,.service-hero__content>div:has(>.hero__trust-item){display:grid!important;grid-template-columns:repeat(2,max-content);justify-items:start}}

/* value cards read like the other card sets: flush left */
.value-card{text-align:left}
.value-card__icon{margin:0 0 1rem}
.value-card>a:last-child,.value-card>span:last-child{align-self:flex-start}

/* phone numbers styled inline still answer the pointer; the one inside a sentence on the homepage's dark town band is
   underlined, not colour-only */
.area-card span>a[href^="tel:"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.18em}
@media (hover:hover){
  main a[href^="tel:"]:not([class]):hover{text-decoration-line:underline!important;text-decoration-thickness:2px!important;text-underline-offset:0.18em}
  .contact-info-card a[href^="tel:"]:hover{color:#0F3F8C!important}
  .area-card span>a[href^="tel:"]:hover{color:#FFFFFF!important}
}

/* iter5: hero phone link readable over the photo at tablet widths (a11y 1.4.3) */
.hero .hero__ctas .btn-ghost[href^="tel:"]{background:rgba(15,20,25,0.45)}

/* ===== 2026-09-24 brand re-skin: Epoxy Flooring Cincinnati — the old site's logo and colours =====
   A white header like the old site, so the colour logo reads; indigo nav text; green call-to-action. */
.navbar,.navbar.scrolled{background:#FFFFFF!important;box-shadow:0 1px 0 rgba(28,28,92,0.08)}
.navbar__logo img,.navbar.scrolled .navbar__logo img{height:36px!important;width:auto!important;max-width:calc(100vw - 7rem);object-fit:contain;object-position:left center}
.navbar__links>a,.nav-dropdown__trigger{color:#282881!important}
.navbar__links>a:hover,.navbar__links>a.active,.nav-dropdown__trigger:hover,.nav-dropdown:hover>.nav-dropdown__trigger,.nav-dropdown.open>.nav-dropdown__trigger{color:#1C1C5C!important;background:rgba(40,40,129,0.07)!important}
.navbar__links>a::after{background:#3B9E20}
.navbar__phone{color:#1C1C5C!important}
.navbar__phone:hover{color:#2F7D1A!important}
.navbar__hamburger span{background:#1C1C5C!important}
.navbar a:focus-visible,.navbar button:focus-visible{outline-color:#282881!important}
.topbar{background:#14143F}
.footer__logo-img{width:221px;height:auto;max-width:100%;aspect-ratio:442/72}
@media (max-width:767px){.navbar__logo img,.navbar.scrolled .navbar__logo img{height:30px!important}}
/* the colour lockup is wider than the old mark: the header gets room instead of wrapping.
   992-1149: menu button (the drawer works at any width), phone + quote button stay in view.
   1150-1439: full menu, phone as an icon (the number is also in the top bar), tighter link padding.
   1440+: a wider header row with the phone number written out. */
.navbar__phone,.navbar__cta{white-space:nowrap;flex-shrink:0}
.navbar__logo{flex-shrink:0}
@media (min-width:992px) and (max-width:1149px){.navbar__links{display:none!important}.navbar__hamburger{display:flex!important}}
@media (min-width:1150px){.navbar__links>a,.nav-dropdown__trigger{padding:0.5rem 0.55rem!important}}
@media (min-width:1150px) and (max-width:1439px){.navbar__phone>span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.navbar__phone{width:44px;height:44px;justify-content:center;border-radius:50%;background:rgba(40,40,129,0.07)}}
@media (min-width:1150px) and (max-width:1279px){.navbar__logo img,.navbar.scrolled .navbar__logo img{height:32px!important}.navbar__links>a,.nav-dropdown__trigger{font-size:0.875rem!important}}
@media (min-width:1280px){.navbar__inner{max-width:82.5rem}}
/* ===== end brand re-skin ===== */

/* ===== 2026-09-24 shared layer, optimizer iteration 7 ===== */

/* header: a hairline at rest; a soft shadow fades in once the page scrolls under it (opacity only, the bar is not repainted) */
.navbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:linear-gradient(rgba(28,28,92,0.1),rgba(28,28,92,0));opacity:0;transition:opacity 200ms ease;pointer-events:none}
.navbar.scrolled::after{opacity:1}
@media (prefers-reduced-motion:reduce){.navbar::after{transition:none}}
/* header under WCAG 1.4.12 text spacing: the row wraps (menu, then phone and quote button, each kept to the right) instead
   of running the quote button off the screen. Two auto margins split the free space exactly as space-between did, so at
   normal spacing the row is unchanged */
.navbar__inner{flex-wrap:wrap;row-gap:0.25rem}
.navbar__links,.navbar__actions{margin-left:auto}
/* 1440px and up the header writes the phone number out, so the top bar does not repeat it */
@media (min-width:1440px){.topbar__phone{display:none}}

/* drawer: two service sub-links per row, so the whole menu fits a phone screen above the Call / Quote buttons. Rows:
   Services, four sub-link rows, five main links, then the buttons pinned to the bottom (browsers without :has keep the
   one-link-per-row list) */
@supports selector(:has(a)){
  @media (max-width:1149px){
    .mobile-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(10,auto) 1fr;column-gap:1rem}
    .mobile-nav>a,.mobile-nav>.mobile-nav__actions{grid-column:1/-1}
    .mobile-nav>a:has(>span[aria-hidden="true"]:first-child){grid-column:auto;display:flex;align-items:center;gap:0.3em;min-height:48px;font-size:1rem;line-height:1.3}
    .mobile-nav__actions{align-self:end}
  }
}
@media (max-width:767px){.mobile-nav{padding:4rem 1.5rem 0}}
@media (max-width:359px){.mobile-nav{padding-left:1.25rem;padding-right:1.25rem;column-gap:0.75rem}.mobile-nav>a:has(>span[aria-hidden="true"]:first-child){font-size:0.9375rem}}
/* tablets and small laptops (768-1149px, where the menu button shows): a side sheet over the dimmed page instead of a
   full-width navy page; a tap on the page beside it closes it (shared script) */
@media (min-width:768px) and (max-width:1149px){
  .mobile-nav{left:auto;width:min(420px,100%)}
  .mobile-nav.open{box-shadow:-16px 0 40px rgba(16,16,44,0.35),0 0 0 100vmax rgba(16,16,44,0.5)}
}

/* town cards on a dark band: the pin in the light green, like the card arrows (#7CC96A is 6:1 and up on the pin tile;
   the accent green was 2.3:1 there) */
.section--dark .area-card__icon svg{fill:#7CC96A}

/* review cards in two-up rows: the author row sits at the bottom, as in the three-up rows */
.grid-2>div[style*="border-left:3px solid var(--color-accent)"]{display:flex;flex-direction:column}
.grid-2>div[style*="border-left:3px solid var(--color-accent)"]>blockquote{flex:1 1 auto}

/* four-number stats strip on small phones: two by two instead of four squeezed columns */
@media (max-width:479px){.stat-callout{flex-wrap:wrap;row-gap:1rem}.stat-callout__item{flex:1 1 40%}}

/* blog article heroes: the category chip and the title line up with the 720px article column below */
.article-hero .container{max-width:calc(720px + 2 * var(--container-padding))}

/* a page section reached from an in-page link (e.g. the colour-chart jump links) shows the arrival bar on its heading */
main section h2.is-arrived{position:relative}
main section h2.is-arrived::before{content:"";position:absolute;left:-0.75rem;top:0.1em;bottom:0.1em;width:4px;border-radius:2px;background:#2F7D1A;pointer-events:none;animation:formArrive 1400ms ease-out both}
.section--dark h2.is-arrived::before{background:#7CC96A}
@media (prefers-reduced-motion:reduce){main section h2.is-arrived::before{animation:none;opacity:1}}

/* ===== 2026-09-25 iteration 7 — C pass (copy truth + conversion polish) ===== */

/* trust line under the closing call / quote buttons (blog posts; the product catalog has the same rule inline) */
.cta-trust{text-align:center;font-size:var(--size-small);font-weight:var(--weight-semibold);color:#FFFFFF;margin-bottom:0.75rem}
.cta-trust--gap{margin-top:1.25rem}
.cta-trust a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.cta-trust a:hover{color:#7CC96A}

/* short laptop screens (e.g. 1366x768 minus the browser bars): the hero buttons and trust row fit the first screen.
   Tall screens (1920x950, 1440x900) are unchanged */
@media (min-width:992px) and (max-height:800px){
  .hero .hero__badge{margin-bottom:0.75rem!important}
  .hero h1{font-size:2.75rem!important;margin-bottom:0.75rem!important}
  .hero .hero__pills{margin-bottom:0.75rem!important}
  .hero .hero__sub{margin-bottom:1.25rem!important}
  .service-hero h1,.page-hero-title{font-size:2.5rem!important}
  .faq-hero{padding-top:0.5rem!important;padding-bottom:1.5rem!important}
  .faq-hero>div:first-child{display:none!important}
}

/* header phone: written out from 1340px (1340-1439 keeps 40px either side of the menu, with a 17px scrollbar too);
   the icon stays for 1150-1339, where the top bar carries the written number */
@media (min-width:1340px) and (max-width:1439px){
  .navbar__phone>span{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important}
  .navbar__phone{width:auto!important;height:auto!important;border-radius:0!important;background:none!important;justify-content:flex-start}
  .topbar__phone{display:none}
}

/* phones: the top bar keeps the Google rating and drops the "Typical prices posted" lead instead
   (reads "Nick quotes and installs - 5.0 on Google - 59 reviews"; the lead is generated text, hidden from screen readers,
   which still read the full line) */
@media (max-width:600px){
  .topbar__msg{font-size:0;gap:0.225rem}
  .topbar .topbar__extra{display:inline;font-size:0.75rem}
  .topbar__extra::before{content:"Nick quotes and installs";content:"Nick quotes and installs"/""}
}

/* inner photo heroes on phones: the even overlay in a neutral deep navy (same alpha stops as before) */
@media (max-width:767px){.service-hero__bg::after{background:linear-gradient(180deg,rgba(16,18,40,0.9) 0%,rgba(16,18,40,0.78) 100%)}}
/* reviews stat strip: 'Since 2019' needs two-by-two up to 767px (four columns squeeze it onto two lines there) */
@media (max-width:767px){#rating .stat-callout{flex-wrap:wrap;row-gap:1rem}#rating .stat-callout__item{flex:1 1 40%}}
/* ===== end iteration 7 — C pass ===== */

/* iteration 8: the sticky drawer Call/Quote block never covers a focused link (WCAG 2.4.11) — focus scrolling stops
   above it; on short screens the two buttons sit side by side */
@media (max-width:1149px){.mobile-nav{scroll-padding-bottom:calc(8.5rem + env(safe-area-inset-bottom, 0px))}}
@media (max-width:1149px) and (max-height:540px){.mobile-nav__actions{flex-direction:row}.mobile-nav__actions .btn{flex:1 1 0;min-width:0}.mobile-nav{scroll-padding-bottom:calc(5.5rem + env(safe-area-inset-bottom, 0px))}}

/* ===== iteration 8, pass V: visual polish ===== */
/* homepage hero on phones and tablets: an even overlay behind the text column, so the lettering on the
   installer's shirt no longer shows behind the headline; on phones the photo slides so he stands right of the text */
@media (max-width:991px){.hero#hero::after{background:linear-gradient(180deg,rgba(20,20,63,0.9) 0%,rgba(20,20,63,0.86) 48%,rgba(20,20,63,0.6) 100%)}}
@media (max-width:480px){.hero#hero .hero__bg{object-position:25% 50%}}
/* 768-1149: the header writes the number out beside the quote button, so the top bar does not repeat it */
@media (min-width:768px) and (max-width:1149px){.topbar__phone{display:none}}
/* headings: no single word left alone on the last line */
h1,h2{text-wrap:balance}
/* homepage link rows on phones: one centred link per line, without the separator dots */
@media (max-width:767px){.link-row{display:flex;flex-direction:column;align-items:center}.link-row__sep{display:none}}
/* ===== end iteration 8, pass V ===== */

/* final touch-up (after iteration 9) */
/* quote form: roomier on phones — the 48 px side padding squeezed the GHL frame to 262 px at 390 (CRO iter9) */
@media (max-width:599px){.ghl-form-container{padding:1rem 0.75rem!important}}
/* "From Nick's own jobs" strips on every page: compact captions from tablet to small laptop (design iter9) */
@media (min-width:768px) and (max-width:1199px){
.gallery-row-2>a.gallery-card[href="gallery.html#nick-jobs"] .gallery-card__overlay{padding:0.625rem 0.75rem}
.gallery-row-2>a.gallery-card[href="gallery.html#nick-jobs"] h3{font-size:0.9375rem!important;line-height:1.25}
.gallery-row-2>a.gallery-card[href="gallery.html#nick-jobs"] .badge,
.gallery-row-2>a.gallery-card[href="gallery.html#nick-jobs"] .gallery-card__overlay>span:last-child{display:none!important}
}
/* drawer Call/Quote labels stay inside their buttons on tiny, short screens (a11y iter9) */
@media (max-width:399px) and (max-height:540px){.mobile-nav__actions .btn{padding-left:0.5rem;padding-right:0.5rem;gap:0.375rem;font-size:0.9375rem}}
@media (max-width:359px) and (max-height:540px){.mobile-nav__actions .btn{font-size:0.875rem;gap:0.25rem}.mobile-nav__actions .btn svg{width:16px;height:16px}}