/* 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} :root{--color-primary:#04303A;--color-accent:#00718F;--color-accent-hover:#005A73;--color-accent-light:#03BEFF;--color-success:#1A7A4A;--color-text:#2D2D2D;--color-text-muted:#595959;--color-bg:#FFFFFF;--color-bg-light:#F1F8FA;--color-bg-dark:#04303A;--color-border:#C7DFE5;--color-error:#DC3545;--color-warning:#F0AD4E;--color-info:#03BEFF;--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.6;--lh-small:1.6;--lh-caption:1.5;--space-section:6rem;--space-section-sm:4rem;--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',-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;scroll-padding-top:80px;-webkit-text-size-adjust:100%}:target{scroll-margin-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)}.text-muted{color:var(--color-text-muted)}.text-white{color:#FFFFFF}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}a:focus-visible,button:focus-visible,[tabindex]:focus-visible,.nav-dropdown__trigger:focus-visible,.navbar__hamburger:focus-visible,.mobile-call-btn:focus-visible,.mobile-cta-bar__btn:focus-visible,.area-card:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}.navbar__hamburger:focus-visible,.mobile-call-btn:focus-visible{outline-color:var(--color-accent-light)}.skip-link{position:absolute;top:-48px;left:8px;background:var(--color-accent);color:#fff;padding:10px 18px;z-index:9999;font-size:14px;font-weight:600;border-radius:0 0 var(--radius-sm) var(--radius-sm);transition:top .15s ease}.skip-link:focus{top:0;outline:3px solid #fff;outline-offset:2px}::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)}.grid-4{display:grid;grid-template-columns:1fr;gap:var(--gap-md)}.flex-row{display:flex;flex-wrap:wrap;gap:var(--gap-md)}.flex-col{display:flex;flex-direction:column;gap:var(--gap-md)}.flex-center{display:flex;align-items:center;justify-content:center}.text-center{text-align:center}@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)}.grid-4{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)}.grid-4{grid-template-columns:repeat(4,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-secondary{background-color:transparent;color:var(--color-accent-hover);border-color:var(--color-accent)}.btn-secondary:hover{background-color:var(--color-accent);color:#FFFFFF;transform:scale(1.03);box-shadow:var(--shadow-hover)}.btn:active{transform:scale(0.97)}.btn-primary:active,.btn-secondary:active{transform:scale(0.97);box-shadow:var(--shadow-sm)}@media(prefers-reduced-motion:reduce){.btn:active,.btn-primary:active,.btn-secondary:active{transform:none}}.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}.btn-phone{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,0.3);font-weight:var(--weight-bold);font-size:var(--size-body)}.btn-phone:hover{background:rgba(255,255,255,0.1);color:#FFFFFF}.btn-phone svg{width:18px;height:18px}.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:rgba(4,48,58,0.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 20px rgba(0,0,0,0.2)}.navbar.scrolled .navbar__inner{padding-top:0.5rem;padding-bottom:0.5rem}.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;transition:padding var(--transition-fast)}.navbar__logo img{height:42px;width:auto;transition:height var(--transition-fast)}.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.625rem 0.75rem;min-height:40px;display:inline-flex;align-items:center;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.active{color:#FFFFFF;background:rgba(255,255,255,0.1);position:relative}.navbar__links > a.active::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:60%;height:2px;background:var(--color-accent);border-radius:1px}.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;padding-top:calc(0.5rem + 12px);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:flex;flex-direction:column;justify-content:center;padding:0.625rem 0.875rem;min-height:44px;margin-bottom:2px;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:44px;height:44px;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__sub{padding-left:1.25rem;max-height:0;overflow:hidden;transition:max-height var(--transition-base)}.mobile-nav__sub.open{max-height:500px}.mobile-nav__toggle{cursor:pointer;-webkit-tap-highlight-color:rgba(0,113,143,0.2);user-select:none;position:relative}.mobile-nav__sub a{font-size:1.0625rem;font-weight:var(--weight-regular);color:rgba(255,255,255,0.75)}.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}}/* FIX #19: navbar entrance animation removed — it lives above the fold and the async stylesheet caused a late slide-in jolt. */.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__grid{display:grid;grid-template-columns:1fr;gap:var(--gap-lg);padding-bottom:var(--gap-lg);border-bottom:1px solid rgba(255,255,255,0.1)}.footer__brand{max-width:300px}.footer__brand img{height:40px;margin-bottom:1rem}.footer__brand p{font-size:var(--size-small);color:rgba(255,255,255,0.75);margin-bottom:1.25rem}.footer__socials{display:flex;gap:0.75rem}.footer__socials a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-full);background:rgba(255,255,255,0.08);transition:background var(--transition-fast)}.footer__socials a:hover{background:var(--color-accent)}.footer__socials svg{width:18px;height:18px;fill:#FFFFFF}.footer__col h4{color:#FFFFFF;font-size:var(--size-small);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:1rem;font-weight:var(--weight-bold)}.footer__col ul{display:flex;flex-direction:column;gap:0.5rem}.footer__col a{font-size:var(--size-small)}.footer__contact-item{display:flex;align-items:flex-start;gap:0.5rem;font-size:var(--size-small);margin-bottom:0.75rem}.footer__contact-item svg{width:16px;height:16px;fill:var(--color-accent);flex-shrink:0;margin-top:2px}.footer__trust{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;padding:var(--gap-md) 0;border-bottom:1px solid rgba(255,255,255,0.1)}.footer__trust-item{display:flex;align-items:center;gap:0.625rem;font-size:var(--size-small);font-weight:var(--weight-semibold);color:rgba(255,255,255,0.9)}.footer__trust-item svg{width:20px;height:20px;fill:var(--color-success);flex-shrink:0}.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.72)}.footer__legal{display:flex;flex-wrap:wrap;gap:1rem}.footer__legal a{font-size:var(--size-caption);color:rgba(255,255,255,0.72)}.footer__legal a:hover{color:rgba(255,255,255,0.7)}@media (min-width:478px){.footer__trust{grid-template-columns:repeat(2,1fr)}}@media (min-width:768px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}.footer__trust{grid-template-columns:repeat(4,1fr)}}.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(4,48,58,0.92) 0%,rgba(4,48,58,0.7) 50%,rgba(4,48,58,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 h1 span{color:var(--color-accent)}.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);animation:slideUpYOnly 0.5s ease both;opacity:1}.hero__trust-item:nth-child(1){animation-delay:0.1s}.hero__trust-item:nth-child(2){animation-delay:0.2s}.hero__trust-item:nth-child(3){animation-delay:0.3s}.hero__trust-item:nth-child(4){animation-delay:0.4s}.hero__trust-item svg{width:18px;height:18px}@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideUpYOnly{from{transform:translateY(12px)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.hero__trust-item{animation:none}}@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:2.125rem;line-height:1.15}.hero__trust{gap:1rem}}.card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2rem;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.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)}.testimonial-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2rem;position:relative}.testimonial-card__stars{display:flex;gap:2px;margin-bottom:1rem}.testimonial-card__stars svg{width:18px;height:18px;fill:#F59E0B}.testimonial-card blockquote{font-size:var(--size-body);line-height:var(--lh-body);color:var(--color-text);margin-bottom:1.25rem;font-style:italic}.testimonial-card__author{display:flex;align-items:center;gap:0.75rem}.testimonial-card__name{font-weight:var(--weight-semibold);font-size:var(--size-small)}.testimonial-card__location{font-size:var(--size-caption);color:var(--color-text-muted)}.testimonial-card__badge{display:inline-block;background:var(--color-bg-light);color:var(--color-accent);font-size:var(--size-caption);font-weight:var(--weight-semibold);padding:0.25rem 0.625rem;border-radius:var(--radius-full);margin-top:0.5rem}.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__image{width:100%;height:200px;object-fit:cover;background:var(--color-bg-light)}.blog-card__body{padding:1.5rem}.blog-card__category{display:inline-block;background:rgba(0,113,143,0.1);color:var(--color-accent);font-size:var(--size-caption);font-weight:var(--weight-semibold);padding:0.25rem 0.625rem;border-radius:var(--radius-full);margin-bottom:0.75rem}.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)}.blog-card__date{font-size:var(--size-caption);color:var(--color-text-muted);margin-top:0.75rem}.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 var(--transition-slow)}.gallery-card:hover img{transform:scale(1.05)}.gallery-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,48,58,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:rgba(0,113,143,0.08);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__phone{display:block;color:#FFFFFF;font-size:1.5rem;font-weight:var(--weight-bold);margin-bottom:1.5rem;text-decoration:none}.cta-banner__phone:hover{color:rgba(255,255,255,0.85)}.cta-banner__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:0.75rem}.inline-form{display:flex;flex-wrap:wrap;gap:0.5rem;max-width:640px;margin:1.5rem auto 0;justify-content:center}.inline-form input,.inline-form select{padding:0.75rem 1rem;border:1px solid rgba(255,255,255,0.25);border-radius:var(--radius-md);background:rgba(255,255,255,0.1);color:#FFFFFF;font-size:var(--size-small);min-width:160px;flex:1}.inline-form input::placeholder{color:rgba(255,255,255,0.5)}.inline-form select{color:rgba(255,255,255,0.7)}.inline-form select option{color:var(--color-text);background:var(--color-bg)}.inline-form .btn{flex-shrink:0}.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:space-between;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{max-height:0;overflow:hidden;transition:max-height var(--transition-base)}.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)}.trust-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;padding:1.5rem 0}.trust-bar__item{display:flex;align-items:center;gap:0.5rem;font-size:var(--size-small);font-weight:var(--weight-semibold);color:var(--color-text)}.trust-bar__item svg{width:20px;height:20px;fill:var(--color-success)}.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(0,113,143,0.1);color:var(--color-accent)}.mobile-call-btn{display:none;position:fixed;bottom:20px;right:20px;width:56px;height:56px;background:var(--color-accent);color:#FFFFFF;border-radius:var(--radius-full);align-items:center;justify-content:center;box-shadow:var(--shadow-hover);z-index:998;text-decoration:none;transition:transform var(--transition-fast),background var(--transition-fast)}.mobile-call-btn:hover{background:var(--color-accent-hover);transform:scale(1.08);color:#FFFFFF}.mobile-call-btn svg{width:24px;height:24px;fill:#FFFFFF}@media (max-width:767px){.mobile-call-btn{display:flex}}.process-steps{display:grid;grid-template-columns:1fr;gap:2rem;counter-reset:step}.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:768px){.process-steps{grid-template-columns:repeat(2,1fr)}}@media (min-width:992px){.process-steps{grid-template-columns:repeat(4,1fr)}.process-step{padding-left:0;padding-top:4rem;text-align:center}.process-step::before{left:50%;top:0;transform:translateX(-50%)}}.form-group{margin-bottom:1.25rem}.form-group label{display:block;font-size:var(--size-small);font-weight:var(--weight-semibold);color:var(--color-primary);margin-bottom:0.375rem}.form-group input,.form-group select,.form-group textarea{width:100%;padding:0.75rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--size-body);color:var(--color-text);background:var(--color-bg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(0,113,143,0.15)}.form-group textarea{min-height:120px;resize:vertical}.form-group .error-message{display:none;font-size:var(--size-caption);color:var(--color-error);margin-top:0.25rem}.form-group.has-error input,.form-group.has-error select,.form-group.has-error textarea{border-color:var(--color-error)}.form-group.has-error .error-message{display:block}.form-grid{display:grid;grid-template-columns:1fr;gap:0 1.25rem}@media (min-width:768px){.form-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.footer a{display:inline-block;padding:0.375rem 0;min-height:44px;line-height:2}.footer__legal a{padding:0.5rem 0.25rem}} /* Footer responsive grid */ @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; } } /* FIX #135 / #152: scope card hover transitions to composited properties instead of transition:all */ .value-card,.testimonial-card,.gallery-card,.blog-card,.service-card,.area-card{transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast)} /* FIX #195: ensure gallery/blog image zoom snaps (no ease) for reduced-motion users */ @media (prefers-reduced-motion:reduce){.gallery-card img,.blog-card img{transition:none}.gallery-card:hover img,.blog-card:hover img{transform:none}} /* ===== ITERATION 2 — shared-file fixes ===== */ /* FIX #26 (a11y 1.4.1): underline in-paragraph body links so they're not color-only. Nav/buttons/cards/icons exempt. */ main p a,.section__header p a,.value-card p a,.faq-item__answer-inner a{text-decoration:underline;text-underline-offset:2px} /* FIX #74: give value-cards a subtle composited hover lift to match about-us (transition already scoped above) */ .value-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} @media (prefers-reduced-motion:reduce){.value-card:hover{transform:none}} /* FIX #151 (a11y 2.4.7): light focus ring for anchors over dark hero/section/cta backgrounds */ .hero a:focus-visible,.section--dark a:focus-visible,.cta-banner a:focus-visible{outline-color:var(--color-accent-light)} /* FIX #110 / #166: keep page bottom + inline GHL form submit clear of the fixed mobile CTA bar */ @media (max-width:767px){body{padding-bottom:72px}.ghl-form-container{margin-bottom:72px}} /* ===== ITERATION 3 — shared-file fixes ===== */ /* FIX #2 (CRO CRITICAL): promote the mobile header tap-to-call to a GLOBAL rule so ALL 28 pages surface it, not just the 7 that carried it as inline CSS. Below 768px the .navbar__phone anchor becomes a compact ICON-ONLY tap-to-call: font-size:0 collapses the trailing " (727) 292-1860" text node so only the phone SVG shows; the anchor carries aria-label="Call (727) 292-1860" so the accessible name survives (the SVG itself is aria-hidden). Sized to not overflow the sticky bar. */ @media (max-width:767px){.navbar__phone{display:inline-flex;align-items:center;justify-content:center;font-size:0;line-height:0;gap:0;padding:0 0.25rem;min-width:44px;min-height:44px;flex-shrink:0}.navbar__phone svg{width:22px;height:22px;flex-shrink:0}} /* ===== 2026-06-23 hero scroll cue (bottom-right) + 24/7 availability topbar ===== */ .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) infinite;} @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:#021A20;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:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 6px rgba(74,222,128,.9);animation:topbarPulse 2s ease-in-out infinite;flex:none;} @keyframes topbarPulse{0%,100%{opacity:1}50%{opacity:.4}} .topbar__phone{display:inline-flex;align-items:center;gap:.3rem;color:#FBBF24;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. */ @media (max-width: 767px) { .hero__bg[style*="blog-st-petersburg-moisture-epoxy."], .service-hero[style*="blog-st-petersburg-moisture-epoxy."], .service-hero__bg[style*="blog-st-petersburg-moisture-epoxy."] { background-image: url('../images/blog-st-petersburg-moisture-epoxy-m900.90913cef67.webp') !important; } .hero__bg[style*="clean-garage-with-decorative-flake-epoxy."], .service-hero[style*="clean-garage-with-decorative-flake-epoxy."], .service-hero__bg[style*="clean-garage-with-decorative-flake-epoxy."] { background-image: url('../images/clean-garage-with-decorative-flake-epoxy-m900.66a96e6af4.webp') !important; } .hero__bg[style*="epoxy-repair-st-petersburg-01."], .service-hero[style*="epoxy-repair-st-petersburg-01."], .service-hero__bg[style*="epoxy-repair-st-petersburg-01."] { background-image: url('../images/epoxy-repair-st-petersburg-01-m900.26aa98d6fd.webp') !important; } .hero__bg[style*="garage-floor-after-st-petersburg."], .service-hero[style*="garage-floor-after-st-petersburg."], .service-hero__bg[style*="garage-floor-after-st-petersburg."] { background-image: url('../images/garage-floor-after-st-petersburg-m900.ad34088e00.webp') !important; } .hero__bg[style*="hero-epoxy-floor-st-petersburg."], .service-hero[style*="hero-epoxy-floor-st-petersburg."], .service-hero__bg[style*="hero-epoxy-floor-st-petersburg."] { background-image: url('../images/hero-epoxy-floor-st-petersburg-m900.dc77003240.webp') !important; } .hero__bg[style*="industrial-epoxy-floor-st-petersburg-01."], .service-hero[style*="industrial-epoxy-floor-st-petersburg-01."], .service-hero__bg[style*="industrial-epoxy-floor-st-petersburg-01."] { background-image: url('../images/industrial-epoxy-floor-st-petersburg-01-m900.f6b07894f5.webp') !important; } .hero__bg[style*="residential-epoxy-floor-st-petersburg-01."], .service-hero[style*="residential-epoxy-floor-st-petersburg-01."], .service-hero__bg[style*="residential-epoxy-floor-st-petersburg-01."] { background-image: url('../images/residential-epoxy-floor-st-petersburg-01-m900.85c6236147.webp') !important; } .hero__bg[style*="st-petersburg-metallic-01."], .service-hero[style*="st-petersburg-metallic-01."], .service-hero__bg[style*="st-petersburg-metallic-01."] { background-image: url('../images/st-petersburg-metallic-01-m900.ccaac35d66.webp') !important; } .hero__bg[style*="st-petersburg-residential-01."], .service-hero[style*="st-petersburg-residential-01."], .service-hero__bg[style*="st-petersburg-residential-01."] { background-image: url('../images/st-petersburg-residential-01-m900.49def094cf.webp') !important; } .hero__bg[style*="warehouse-epoxy-floor-st-petersburg."], .service-hero[style*="warehouse-epoxy-floor-st-petersburg."], .service-hero__bg[style*="warehouse-epoxy-floor-st-petersburg."] { background-image: url('../images/warehouse-epoxy-floor-st-petersburg-m900.5384580e91.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. */ .card,.service-card,.testimonial-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
, 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}} /* ITER4-SITEWIDE */ /* ===== ITERATION 4 — sitewide structural (2026-08-30) ===== */ /* [A] RESPONSIVE DESIGN TOKENS. 244 headings across the site carry an inline style="font-size:var(--size-hN)". An inline style beats any element-level media rule, so the element selectors (h1{font-size:...}) never fired. Scaling the TOKENS makes every existing inline var() reference responsive with zero markup churn. Values mirror the element-level media rules already in the sheet, so desktop rendering is unchanged. */ @media (max-width:991px){:root{--size-h1-hero:2.75rem;--size-h1:2.5rem;--size-h2:2rem;--size-h3:1.5rem;--size-h4:1.25rem}} @media (max-width:767px){:root{--size-h1-hero:2.25rem;--size-h1:2rem;--size-h2:1.75rem;--size-h3:1.375rem;--size-h4:1.125rem}} @media (max-width:477px){:root{--size-h1-hero:2.125rem;--size-h1:1.75rem;--size-h2:1.5rem;--size-h3:1.25rem;--size-h4:1.0625rem}} /* [B] BANNER LANDMARK. topbar + navbar are wrapped in
, so the sticky behaviour moves to the wrapper (a sticky child is clipped by its containing block). body.nav-open lifts the header above the mobile drawer (z-index 1001) so the hamburger-X close control is visible and clickable while the drawer is open. */ .site-header{position:sticky;top:0;z-index:1000} .navbar{position:relative;top:auto;z-index:1} body.nav-open .site-header{z-index:1002} html{scroll-padding-top:110px} :target{scroll-margin-top:110px} @media (max-width:767px){html{scroll-padding-top:100px}:target{scroll-margin-top:100px}} /* [C] MOBILE DRAWER — visible close control + focus containment. The hamburger-to-X morph existed in CSS but no page ever added .active; the drawer also shipped with no close button at all, so a touch user who opened it had no way out. */ .mobile-nav__close{position:absolute;top:0.75rem;right:1rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.28);border-radius:var(--radius-sm);color:#FFFFFF;font-size:1.5rem;line-height:1;cursor:pointer;padding:0;z-index:2} .mobile-nav__close:hover{background:rgba(255,255,255,0.16)} .mobile-nav__close:focus-visible{outline:3px solid #FBBF24;outline-offset:2px} .mobile-nav__close svg{pointer-events:none} .navbar__hamburger span{transform-origin:center} /* [D] REVEAL ANIMATION — stop gating first paint and stop leaking transition-delay. reveal-delay-N used transition-delay, which stayed on the element forever and delayed every later hover/focus transition by 100-500ms on 100+ cards. Driving the stagger with animation-delay frees transition-delay for interaction. */ .reveal{opacity:0;transform:none;transition:none} .reveal.visible{animation:revealUp var(--transition-slow) cubic-bezier(.16,1,.3,1) both} .reveal-delay-1,.reveal-delay-2,.reveal-delay-3,.reveal-delay-4,.reveal-delay-5{transition-delay:0s} .reveal-delay-1.visible{animation-delay:100ms} .reveal-delay-2.visible{animation-delay:200ms} .reveal-delay-3.visible{animation-delay:300ms} .reveal-delay-4.visible{animation-delay:400ms} .reveal-delay-5.visible{animation-delay:500ms} @keyframes revealUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.reveal,.reveal.visible{opacity:1;transform:none;animation:none;transition:none}} /* [E] HERO CONTRAST (WCAG 1.4.3). Measured p90/p99 luminance of the hero photographs put .hero__sub at rgba(255,255,255,0.8) below 4.5:1 across ~40% of the text area. Raise the overlay floor, add a left-side scrim behind the text column only, and make the sub-copy opaque white so it is not compounding the loss. */ .hero__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(4,48,58,0.92) 0%,rgba(4,48,58,0.78) 40%,rgba(4,48,58,0.62) 100%),linear-gradient(90deg,rgba(0,18,64,0.55) 0%,rgba(0,18,64,0.35) 45%,transparent 72%)} .service-hero__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(4,48,58,0.94) 0%,rgba(4,48,58,0.8) 40%,rgba(4,48,58,0.66) 100%),linear-gradient(90deg,rgba(0,18,64,0.55) 0%,rgba(0,18,64,0.35) 45%,transparent 72%)} .hero__sub,.service-hero__sub{color:#FFFFFF} /* [F] NON-TEXT CONTRAST (WCAG 1.4.11) — form-control boundaries and rating stars were 1.39:1 and 2.15:1 against white. */ :root{--color-control-border:#6B7C93} .form-group input,.form-group select,.form-group textarea{border:1px solid var(--color-control-border)} .testimonial-card__stars svg{fill:#B26A00} /* [G] TARGET SIZE (WCAG 2.5.8, 24x24) — the topbar tap-to-call is the first focusable element on every page and was ~17px tall; breadcrumb links were 19.5px. */ .topbar__phone{min-height:24px;padding:.25rem .5rem;margin:-.25rem 0;border-radius:4px;justify-content:center} @media (max-width:767px){.topbar__phone{min-height:32px;padding:.4rem .6rem}} .breadcrumb a{display:inline-block;padding:.35rem .15rem;min-height:24px} /* [H] TABLET CTA. .mobile-cta-bar and .mobile-call-btn stop at 767px, .navbar__cta starts at 992px — 768-991px (iPad portrait/Air/Pro 11") had no button of any kind on screen. */ @media (min-width:768px){.navbar__cta{display:inline-flex;padding:0.625rem 1.25rem;font-size:var(--size-small)}} @media (min-width:992px){.navbar__cta{padding:0.875rem 2rem;font-size:var(--size-body)}} /* [I] HOVER-ONLY AFFORDANCES ON TOUCH. There was not one (hover:*) / (pointer:*) query in the build, so gallery captions could never be shown on a phone and every card hover state stuck after a tap on iOS. */ @media (hover:hover) and (pointer:fine){ .gallery-card:focus-within .gallery-card__overlay{opacity:1} } @media (hover:none),(pointer:coarse){ .gallery-card__overlay{opacity:1;background:linear-gradient(to top,rgba(4,48,58,0.9) 0%,rgba(4,48,58,0.55) 45%,transparent 75%)} .gallery-card:hover img,.blog-card:hover img,.blog-featured:hover img{transform:none} .service-card:hover,.blog-card:hover,.value-card:hover,.benefit-card:hover,.testimonial-card:hover,.area-card:hover,.blog-featured:hover{transform:none;box-shadow:var(--shadow-sm)} } /* [K] CASCADE COMPENSATION. The external stylesheet now loads BEFORE the page's inline critical block (it used to load after, which silently reverted every inline rule). These 39 declarations are the ones where the two disagreed; they restore the external sheet's value so the reorder is visually neutral. Deliberate exceptions, where the inline block is now allowed to win: --font-family (keeps the 'Inter Fallback' metric-override face), .skip-link (transform reveal instead of animating `top`), .hero{min-height:85svh}. */ .btn{transition:color var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)} .btn-ghost:hover{border-color:#FFFFFF} .navbar__logo img{height:42px} .navbar__hamburger span{transition:color var(--transition-base),background-color var(--transition-base),border-color var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base)} .nav-dropdown__trigger{display:inline-flex} .nav-dropdown__menu{transform:translateY(4px)} .nav-dropdown__menu::before{top:-4px;left:-12px;right:-12px} .nav-dropdown__menu a{display:flex;padding:0.625rem 0.875rem;transition:background 0.15s ease,color 0.15s ease} .nav-dropdown__menu a span{margin-top:2px} .mobile-nav__actions{margin-top:auto} .footer{color:rgba(255,255,255,0.8)} .footer__bottom{gap:0.75rem} .area-card:focus-visible{outline:3px solid var(--color-accent);border-radius:var(--radius-sm)} .section__header{max-width:720px} .section__header p{margin-top:0.75rem} .section--dark .section__header p{color:rgba(255,255,255,0.75)} .breadcrumb{font-size:var(--size-caption)} .breadcrumb a{color:var(--color-text-muted)} .testimonial-card__stars{margin-bottom:1rem} .gallery-card img{transition:transform var(--transition-slow)} .gallery-card:hover img{transform:scale(1.05)} .gallery-card__overlay span{color:rgba(255,255,255,0.7);font-size:var(--size-caption)} .value-card__icon{width:64px;height:64px;background:rgba(0,113,143,0.08);border-radius:var(--radius-lg)} .hero a:focus-visible{outline-color:var(--color-accent-light)} .section--dark a:focus-visible{outline-color:var(--color-accent-light)} .cta-banner a:focus-visible{outline-color:var(--color-accent-light)} .navbar__hamburger:focus-visible{outline-color:var(--color-accent-light)} .mobile-call-btn:focus-visible{outline-color:var(--color-accent-light)} .breadcrumb span{margin:0 0.375rem;color:var(--color-text-muted)} .service-card__link{margin-top:1rem} .faq-item__answer{transition:max-height var(--transition-base)} .faq-item__answer-inner{padding:0 1.5rem 1.25rem} .hero h1 span{color:var(--color-accent)} .hero__badge{padding:0.5rem 1.25rem} .stat-bar__number{font-size:2rem} .stat-bar__label{font-size:var(--size-small);color:var(--color-text-muted)} .service-card__icon{background:var(--color-bg-light);width:56px;height:56px;border-radius:var(--radius-md)} .footer a{color:rgba(255,255,255,0.7)} .section--dark .stat-bar__label{color:rgba(255,255,255,0.65)} /* --- Responsive rescue for INLINE grid declarations (2026-08-30, optimizer Design lens) --- 18 grid containers across 7 pages set grid-template-columns as an inline style="" attribute with a fixed column count. An inline style beats every stylesheet rule, so the responsive breakpoints could never collapse them and a 3- to 5-column grid stayed 3-5 columns at 375px. Same failure class as the type-scale bug: the fix has to reach the inline layer, so these use attribute selectors plus !important, which is the only thing that outranks style="". Deliberately NOT touching repeat(2,...) -- two columns still reads fine on a phone, and blanket single-column would make several small icon rows worse, not better. */ @media (max-width: 767px) { [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns:repeat(5"], [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns: repeat(5"] { grid-template-columns: 1fr !important; } } @media (min-width: 768px) and (max-width: 991px) { [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns:repeat(5"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; } } /* --- CTA labels must be allowed to wrap on narrow screens (2026-08-30, Design lens) --- .btn sets white-space:nowrap globally while the site ships labels up to 38 characters ("Get My Free Quote + Slab Moisture Test"). At 375px that overflows its button rather than wrapping. !important because the per-page inline