/* 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:optional;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');ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%;size-adjust:107.64%}
:root{--color-primary:#1B2A4A;--color-accent:#2A6FDB;--color-accent-hover:#1A5BC5;--color-success:#1A7A4A;--color-text:#2D2D2D;--color-text-muted:#666666;--color-bg:#FFFFFF;--color-bg-light:#F5F7FA;--color-bg-dark:#1B2A4A;--color-border:#D0D8E8;--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)}.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)}::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-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(27,42,74,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__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: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:20%;right:20%;height:2px;background:var(--color-accent);border-radius:1px;transform:scaleX(0);transform-origin:center;transition:transform 200ms ease}.navbar__links>a.active::after,.navbar__links>a:hover::after{transform:scaleX(1)}.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: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;display:grid;grid-template-rows:0fr;transition:grid-template-rows 250ms ease}.mobile-nav__sub>*{overflow:hidden;min-height:0}.mobile-nav__sub.open{grid-template-rows:1fr}.mobile-nav__toggle{cursor:pointer;-webkit-tap-highlight-color:rgba(42,111,219,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}}.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.7)}.footer__legal{display:flex;flex-wrap:wrap;gap:1rem}.footer__legal a{font-size:var(--size-caption);color:rgba(255,255,255,0.7)}.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(27,42,74,0.92) 0%,rgba(27,42,74,0.7) 50%,rgba(27,42,74,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:slideUp 0.5s ease forwards;opacity:0}.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}}@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}}.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(42,111,219,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 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(27,42,74,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(42,111,219,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.7)}.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(42,111,219,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(42,111,219,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}}@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}.mobile-call-btn{display:none!important}}.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:2px solid #5BA3F5;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}.mobile-call-btn::after{animation:none!important}[style*="animation"]{animation:none!important}.service-card:hover,.blog-card:hover,.testimonial-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}.gallery-item--hidden{opacity:0;transform:scale(0.95);pointer-events:none;position:absolute;visibility:hidden}@media(max-width:991px){html{scroll-padding-top:64px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media(prefers-reduced-motion:reduce){.navbar__links>a::after{transition:none}}@media(prefers-reduced-motion:reduce){.mobile-nav__sub{transition:none}}:root{--space-section:5.5rem;--space-section-sm:4rem}
/* ===== 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) 4;}
@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!important;}}  /* the cue carries an inline display:flex */
@media (prefers-reduced-motion:reduce){.hero__scroll-wheel{animation:none;top:50%;margin-top:-4px;}}
.topbar{background:#0F1419;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 3;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 items (garage hero) ===== */
.hero__trust-item{font-size:0.78rem !important;}
.hero__trust-item svg{width:15px !important;height:15px !important;}

/* mobile hero variants - !important because background-image is an inline style attribute.
   Most pages set their own phone hero in a <head> rule; these cover the heroes that are shared or have no
   such rule. Blog heroes are <img>, so only background heroes need a rule here. */
@media (max-width: 767px) {
  .hero__bg[style*="garage-floor-after-houston-hero-w1400."] {
    background-image: url('../images/garage-floor-after-houston-hero-w900.f362333b65.webp') !important;
  }
  .service-hero__bg[style*="residential-epoxy-floor-houston-w1400."] {
    background-image: url('../images/residential-epoxy-floor-houston-w900.5e30d75a49.webp') !important;
  }
  .service-hero__bg[style*="commercial-epoxy-floor-houston-w1400."] {
    background-image: url('../images/commercial-epoxy-floor-houston-w900.41dfdc452e.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,.testimonial-card,.blog-card,.gallery-card,.value-card,.faq-item,.area-card,
.process-step,.stat-bar__item{contain:layout style}

/* ===== Shared template layer (this sheet loads AFTER each page's inline CSS, so every rule here is the
   final word). No content-visibility anywhere: it made anchor jumps (#quote-form, #cta-bottom) land short. ===== */

/* sticky nav: where the navbar sits in <header role="banner"> (exactly its height), the header sticks instead */
header[role="banner"]{position:sticky;top:0;z-index:1000}
header[role="banner"]>.navbar{position:relative}
@media(max-width:991px){html{scroll-padding-top:72px}}

/* mobile Call/Quote bar: shown from first paint; the entrance is CSS only, so no script can leave it hidden */
@media (max-width:767px){
  .mobile-cta-bar>div{width:100%;max-width:500px!important;margin:0 auto}
  .mobile-cta-bar__btn{white-space:nowrap;padding:0.625rem 0.75rem}
  /* the pinned bar (~68 px + safe area) must never cover the footer's last row (Privacy / Terms) */
  .footer{padding-bottom:calc(2rem + 80px)}
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){.mobile-cta-bar{animation:ctaBarIn 280ms cubic-bezier(0.2,0.7,0.2,1) 250ms backwards}}
@keyframes ctaBarIn{from{transform:translateY(100%)}to{transform:none}}

/* skip link: first stop for keyboard users, visible on focus (!important beats an inline top:-40px) */
.skip-link{position:absolute;top:-40px;left:0;background:var(--color-accent-hover);color:#FFFFFF;padding:8px 16px;z-index:9999;font-size:14px;transition:top 0.2s}
.skip-link:focus{top:0!important;color:#FFFFFF;outline:3px solid #FFFFFF;outline-offset:2px}

/* mobile menu: closed = hidden (no invisible tab stops); the open drawer covers the hamburger, so it carries its own close button */
.mobile-nav{visibility:hidden;transition:transform var(--transition-base),visibility 0s linear 300ms}
.mobile-nav.open{visibility:visible;transition:transform var(--transition-base),visibility 0s linear 0s}
@media (prefers-reduced-motion:reduce){.mobile-nav,.mobile-nav.open{transition:none}}
.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)}

/* value-card icons are white glyphs: they need the solid tile the page CSS gives them */
.value-card__icon{background:linear-gradient(135deg,#2A6FDB 0%,#1A5BC5 100%);box-shadow:0 4px 14px rgba(42,111,219,0.3)}

/* outline buttons keep their outline (.btn above re-declares border:2px solid transparent) */
.btn-outline{background:transparent;color:#1A5BC5;border-color:#1A5BC5}
.btn-outline:hover{background:#1A5BC5;color:#FFFFFF;border-color:#1A5BC5}
.section--dark .btn-outline{color:#FFFFFF;border-color:rgba(255,255,255,0.6)}

/* mobile type scale: class rules and inline var(--size-h1) beat the h1/h2 phone steps above */
@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}
}

/* hero sub-line: one look on the home hero and every inner-page hero. #93C5FD keeps the large-text 3:1
   contrast over the brightest part of the photo (#2A6FDB was 2.4-3.0:1 on the navy overlay) */
.hero h1 span,.service-hero h1 span{display:block;color:#93C5FD;font-size:0.72em;font-weight:var(--weight-bold);letter-spacing:-0.005em;margin-top:0.35rem}
h1,h2,h3{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}
}

/* focus ring: blue ring + white halo reads at >= 3:1 on white and light grey; white ring on every navy surface */
main :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible,.nav-dropdown__menu a:focus-visible{outline:3px solid #1A5BC5;outline-offset:2px;box-shadow:0 0 0 2px #FFFFFF}
.navbar>.navbar__inner>a:focus-visible,.navbar__links>a:focus-visible,.nav-dropdown__trigger:focus-visible,.navbar__phone:focus-visible,.navbar__cta:focus-visible,.navbar__hamburger:focus-visible,.mobile-nav a:focus-visible,.mobile-nav button:focus-visible,.footer a:focus-visible,.section--dark a:focus-visible,.hero a:focus-visible,.service-hero a:focus-visible,.article-hero a:focus-visible,.mobile-cta-bar a:focus-visible,.mobile-call-btn:focus-visible,.topbar a:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px;box-shadow:0 0 0 2px #1B2A4A}

/* links must not rely on colour alone; #1A5BC5 passes 4.5:1 on #FFF and #F5F7FA (#2A6FDB was 4.45:1 on #F5F7FA) */
.breadcrumb a{color:var(--color-accent-hover);text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:0.25rem 0;min-height:24px}
main p a:not(.btn),main li a:not(.btn),.faq-item__answer a:not(.btn){color:var(--color-accent-hover);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
main p a:not(.btn):hover,main li a:not(.btn):hover{text-decoration-thickness:2px}
main .section--dark p a:not(.btn),main .section--dark li a:not(.btn){color:#FFFFFF}
.suburb-links a{color:var(--color-accent-hover);min-height:44px;transition:background-color var(--transition-fast),color var(--transition-fast)}

/* grids: no empty columns. 5 cards centre the last row; the 7th home 'View All Services' card becomes a full-width strip;
   an odd last card in a 2-column grid is centred */
@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(4){grid-column:2 / span 2}
}
@media (max-width:991px){.grid-3:has(>:nth-child(5):last-child)>:last-child{grid-column:1 / -1}}
#services .grid-3>a[href="our-services.html"]{grid-column:1 / -1;min-height:0!important}
@media (min-width:768px){
  #services .grid-3>a[href="our-services.html"]>div{display:flex;align-items:center;gap:1.25rem;text-align:left;padding:1.25rem 1.75rem!important}
  #services .grid-3>a[href="our-services.html"]>div>div{margin:0!important;flex-shrink:0}
  .grid-2>:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - var(--gap-md) / 2)}
}

/* gallery tiles: inline fixed-column grids get phone breakpoints so the overlay labels never clip */
@media (max-width:767px){
  .gallery-row-2,#gallery div[style*="grid-template-columns:repeat(3,1fr)"],#gallery div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #gallery div[style*="grid-template-columns:repeat(3,1fr)"]>:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:477px){
  .gallery-row-1,#gallery div[style*="grid-template-columns:repeat(2,1fr)"],#gallery div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:minmax(0,1fr)!important}
  .gallery-card h3{font-size:1rem!important}
}

/* bottom CTA: the section already has .section padding; the reassurance line under it is readable on navy */
#cta-bottom .cta-banner{padding:0}
.cta-banner::before{animation-iteration-count:2;top:0!important;left:0!important;width:100%!important;height:100%!important}
.form-lead{text-align:center;font-size:var(--size-small);color:var(--color-text-muted);margin:0 0 1rem}
.section--dark .form-lead{color:rgba(255,255,255,0.8)}
main .section--dark .form-lead a{color:#FFFFFF;font-weight:var(--weight-semibold)}
#cta-bottom.section--dark p[style*="--color-text-muted"]{color:rgba(255,255,255,0.85)!important}

/* quote form: anchor jumps clear the sticky header; the GHL iframe keeps its reserved height while it loads */
.ghl-form-container iframe{min-height:800px;display:block;position:static!important;left:auto!important}
@media (max-width:767px){.ghl-form-container iframe{min-height:1020px}}

/* touch targets */
.topbar__phone{min-height:44px;padding:0 0.5rem;margin:-0.75rem 0}
@media (max-width:991px){.navbar__hamburger{width:48px;height:48px}}
@media (max-width:767px){.btn,.filter-btn,.faq-item__question{min-height:48px}}
.footer-social{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);transition:background-color 150ms ease,border-color 150ms ease}
.footer-social:hover{background:rgba(42,111,219,0.3);border-color:rgba(42,111,219,0.5)}
@media (max-width:477px){main .btn{white-space:normal;text-align:center;line-height:1.3}}

/* motion: transform/opacity only, no transition:all, no layout animation, no endless loops */
.navbar__links a{transition:color var(--transition-fast),background-color var(--transition-fast)}
.navbar__hamburger span{transition:transform var(--transition-base),opacity var(--transition-base)}
.navbar__inner{transition:none}
.navbar{transition:background-color 200ms ease,box-shadow 200ms ease}
.navbar.scrolled{background:#1B2A4A;backdrop-filter:none;-webkit-backdrop-filter:none}
.testimonial-card,.area-card,.benefit-card,.faq-item{transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}
.testimonial-card:hover{transform:none;box-shadow:none}
[style*="transition:all"]{transition-property:transform,box-shadow,border-color,background-color,opacity!important}
.hero__trust-item{opacity:1!important;animation:none!important}
.hero .btn-primary::before{animation-iteration-count:2;will-change:auto}
.mobile-call-btn::after{animation-iteration-count:3}

/* FAQ accordion: grid rows instead of a measured max-height, so nothing can clip after a resize */
.faq-item__answer{display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;transition:grid-template-rows 280ms ease!important;max-height:none!important;padding-bottom:0!important}
.faq-item.active .faq-item__answer{grid-template-rows:minmax(0,1fr)}
.faq-item__answer>*{min-height:0;overflow:hidden}
.faq-item__answer>p{padding-bottom:1.5rem}

/* touch: no sticky hover lift, visible press feedback */
@media (hover:none){.btn-primary:hover,.service-card:hover,.blog-card:hover,.benefit-card:hover,.area-card:hover{transform:none}}
.btn:active,.mobile-cta-bar__btn:active,.service-card:active,.blog-card:active,.filter-btn:active{transform:scale(.97);transition-duration:60ms}
.mobile-cta-bar__btn{transition:transform 120ms ease,background-color 120ms ease;-webkit-tap-highlight-color:transparent}

@media (prefers-reduced-motion:reduce){
  .faq-item__answer,.navbar__links>a::after,.gallery-item{transition:none!important}
  .btn:active,.mobile-cta-bar__btn:active,.service-card:active,.blog-card:active,.filter-btn:active{transform:none}
}

/* Floor Studio nav badge: brand blue, not amber; #BFDBFE text keeps >= 4.5:1 on the tint and on the active link */
.nav-badge{display:inline-block;background:rgba(91,163,245,.18);color:#BFDBFE;border:1px solid rgba(91,163,245,.45);font-size:.7em;font-weight:800;padding:.15em .45em;border-radius:4px;margin-left:.3em;letter-spacing:.05em;vertical-align:middle}
/* topbar: one line on phones */
@media (max-width:600px){.topbar__more{display:none}.topbar__inner{flex-wrap:nowrap;justify-content:space-between}}
/* services dropdown: Escape really hides it; short CSS grace period instead of a JS timer */
.nav-dropdown__menu{transition:opacity .15s ease .1s,transform .15s ease .1s,visibility 0s linear .25s}
.nav-dropdown:hover>.nav-dropdown__menu,.nav-dropdown:focus-within>.nav-dropdown__menu,.nav-dropdown.open>.nav-dropdown__menu{transition-delay:0s}
.nav-dropdown.is-dismissed>.nav-dropdown__menu{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* tablet (768-991): the mobile bar is gone and the nav CTA would be too, so keep a compact quote button in the header */
@media (min-width:768px) and (max-width:991px){.navbar__cta{display:inline-flex;padding:0.5rem 1rem;font-size:var(--size-small)}}
/* footer 768-991: brand row on top, then the four link columns in one row (no orphaned Contact column) */
@media (min-width:768px) and (max-width:991px){.footer-grid-responsive{grid-template-columns:repeat(4,1fr)!important}.footer-grid-responsive>:first-child{grid-column:1 / -1}}
/* stats bar icons centred over their numbers */
.stat-bar__item>svg{margin:0 auto 0.5rem}
/* tables reflow at 320-375 px instead of pushing the page sideways */
main table{max-width:100%}
main th,main td{overflow-wrap:anywhere}

/* ===== Shared template layer, round 2 ===== */

/* phones: a keyboard-focused control never ends up under the pinned Call/Quote bar */
@media (max-width:767px){html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* tablets (768-991): a lone last card in a 3-card grid is centred, not stranded on the left
   (the home 'View All Services' strip keeps its full width) */
@media (min-width:768px) and (max-width:991px){
  .grid-3>:last-child:nth-child(odd):not([href="our-services.html"]){grid-column:1 / -1;justify-self:center;width:calc(50% - var(--gap-md) / 2)}
}
/* service-area grids: the 9 town cards as 3 x 3 from 600 px up, the 4 neighbourhoods as 2 x 2 */
@media (min-width:600px){#local-pages div[style*="minmax(240px"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
#extended-areas div[style*="minmax(220px"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important}

/* FAQ: the question starts right after its icon; the chevron sits at the far right */
.faq-item__question{justify-content:flex-start;text-align:left}
.faq-item__question>.faq-item__icon{margin-left:auto;flex-shrink:0}

/* header phone number stays on one line at 992-1100 px */
.navbar__phone{white-space:nowrap;flex-shrink:0}

/* scroll reveal: each block fades and rises as it scrolls in, staggered within a row. The entrance owns
   opacity + transform while it runs (the cards' own hover transitions above would cut it to a one-frame pop);
   the page script adds .is-revealing for 900 ms, after which each card's hover transition applies again. */
.reveal{transform:translateY(16px)}
.reveal:not(.visible){transition:none!important}
.reveal.is-revealing{transition:opacity 400ms ease,transform 400ms cubic-bezier(.2,.7,.2,1)!important}
.reveal-delay-1.is-revealing{transition-delay:80ms!important}
.reveal-delay-2.is-revealing{transition-delay:160ms!important}
.reveal-delay-3.is-revealing{transition-delay:240ms!important}
.reveal-delay-4.is-revealing{transition-delay:320ms!important}
.reveal-delay-5.is-revealing{transition-delay:400ms!important}
@media (prefers-reduced-motion:reduce){.reveal.is-revealing{transition:none!important}}
@media print{.reveal{opacity:1!important;transform:none!important}}

/* hover only where it means something: no zoom, lift or accent bar left stuck after a tap on a touch screen */
@media (hover:none){
  .gallery-card:hover img,.blog-card:hover img,.blog-featured:hover img,.blog-featured:hover{transform:none}
  .service-card:hover::before{transform:scaleX(0)}
}
/* blocks that are not links do not lift or zoom */
.benefit-card:hover,.service-detail:hover,.about-value-card:hover,div.area-card:hover{transform:none;box-shadow:none}
.about-value-card:hover{background:transparent}
div.area-card:hover{border-color:var(--color-border)}
div.area-card:hover .area-card__icon svg{animation:none}
.service-detail:hover .service-detail__image img{transform:none}
.service-detail,.about-value-card{transition:box-shadow var(--transition-fast),border-color var(--transition-fast),background-color var(--transition-fast)}
/* arrow links: the arrow moves, not the layout */
.service-detail__cta{transition:none}
.service-detail__cta:hover{gap:0.5rem}
.service-detail__cta svg{transition:transform var(--transition-fast)}
.service-detail__cta:hover svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.service-detail__cta:hover svg{transform:none}}

/* standalone text links: 44 px tap height on phones; the look is unchanged */
@media (max-width:767px){
  main a[style^="display:inline-block;margin-top:0.75rem"],
  main a[style^="display:inline-flex;align-items:center;gap:0.375rem;font-size:var(--size-small)"],
  main a[style^="display:inline-flex;align-items:center;gap:0.25rem;font-size:var(--size-small)"],
  main a[style^="color:rgba(255,255,255,0.5);font-weight:600;font-size:var(--size-small)"],
  main a[style^="color:rgba(255,255,255,0.75);font-weight:600;font-size:var(--size-small)"],
  .service-detail__cta{display:inline-flex!important;align-items:center;min-height:44px}
  main a[style^="display:inline-block;margin-top:0.75rem"]{margin-top:0.25rem!important}
  main a[href$="#quote-form"][style^="font-size:var(--size-caption)"],
  main a[href^="tel:"][style^="display:flex"],
  nav[aria-label="Table of contents"] a{min-height:44px}
}
/* blog contents: html scroll-padding already clears the header, so a jump lands just under it */
.blog-post__content h2{scroll-margin-top:0.75rem}

/* testimonials: one accent colour; the reviewer row lines up at the bottom of every card */
.testimonial-card{border-left-color:var(--color-accent)!important;display:flex;flex-direction:column}
.testimonial-card>blockquote{flex:1}
.testimonial-card div[aria-hidden="true"][style*="border-radius:var(--radius-full)"]{background:linear-gradient(135deg,#2A6FDB,#1A5BC5)!important}

/* quote form: a quiet cue sits behind the iframe until the form document has loaded (the page script sets the classes) */
.ghl-form-container{position:relative;isolation:isolate}
.ghl-form-container.is-waiting:not(.is-loaded)::before{content:'Loading the form\2026';position:absolute;top:3rem;left:0;right:0;z-index:-1;text-align:center;font-size:var(--size-small);color:var(--color-text-muted);pointer-events:none}

/* motion: the CTA glow plays twice everywhere, not only in the hero (no endless loops) */
.btn-primary::before{animation-iteration-count:2}
/* the dark article call-out keeps its links readable */
main .article-cta p a:not(.btn),main .article-cta li a:not(.btn){color:#FFFFFF}

/* ===== Shared template layer, round 3 ===== */

/* a price range, phone number or hours line never breaks mid-token; call buttons keep the number whole */
.nowrap{white-space:nowrap}
.btn[href^="tel:"]{white-space:nowrap}

/* navbar logo keeps its shape: at 992-1099 px the links give up padding instead of the logo shrinking */
.navbar__logo{flex-shrink:0}
@media (min-width:992px) and (max-width:1099px){
  .navbar__links>a,.nav-dropdown__trigger{padding-left:0.5rem!important;padding-right:0.5rem!important}
  .navbar__actions{gap:0.5rem}
  .navbar__cta{padding-left:1.25rem!important;padding-right:1.25rem!important}
}

/* phones: small standalone links get a >= 44 px hit area (the invisible pad never moves a pixel of layout) */
@media (max-width:767px){
  .link-standalone,.navbar__logo{display:inline-flex;align-items:center;min-height:44px}
  nav[aria-label="Breadcrumb"] a,main a[href*="google.com/maps?cid"][style^="color:inherit"]{position:relative}
  nav[aria-label="Breadcrumb"] a::after{content:'';position:absolute;left:0;right:0;top:calc(50% - 22px);bottom:calc(50% - 22px)}
  main a[href*="google.com/maps?cid"][style^="color:inherit"]::after{content:'';position:absolute;left:-6px;right:-6px;top:calc(50% - 22px);bottom:calc(50% - 22px)}
  main a[href^="tel:"][style^="font-size:var(--size-h3)"]{padding:0.4375rem 0}
}

/* hover feedback for links whose inline style overrides every hover rule (pointer devices only, nothing sticks after a tap) */
@media (hover:hover){
  .footer a[href^="tel:"]:hover,
  main a[href*="google.com/maps?cid"][style^="color:inherit"]:hover,
  main a[style^="display:inline-block;margin-top:0.75rem"]:hover,
  main a[href$="#quote-form"][style^="font-size:var(--size-caption)"]:hover{text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:3px!important}
  main a[style^="color:rgba(255,255,255,0.75);font-weight:600"]:hover,
  main a[href*="google.com/maps?cid"][style^="color:inherit"]:hover{color:#FFFFFF!important}
  nav[aria-label="Table of contents"] a:hover{color:var(--color-accent-hover)!important;text-decoration:underline!important;text-underline-offset:3px}
  main .faq-item__question[style*="color:var(--color-primary)"]:hover{color:var(--color-accent-hover)!important}
  main a[style*="background:linear-gradient(135deg,#FBBF24"]:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(245,158,11,0.35)}
  main a[style^="display:flex;gap:1.5rem;align-items:center;padding:1.25rem"]:hover,
  main a[style^="display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.25rem;background:#FFFFFF"]:hover{border-color:var(--color-accent)!important;box-shadow:var(--shadow-md)!important;transform:translateY(-2px)}
  main a[style^="display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.25rem;background:#FFFFFF"]:hover{color:var(--color-accent-hover)!important}
}
/* keyboard focus gets the same cue as the hover (the focus ring itself comes from the rules above) */
.footer a[href^="tel:"]:focus-visible,
main a[href*="google.com/maps?cid"][style^="color:inherit"]:focus-visible,
nav[aria-label="Table of contents"] a:focus-visible{text-decoration:underline!important}
main a[style*="background:linear-gradient(135deg,#FBBF24"]{transition:transform var(--transition-fast),box-shadow var(--transition-fast)}
@media (prefers-reduced-motion:reduce){
  main a[style*="background:linear-gradient(135deg,#FBBF24"]:hover,
  main a[style^="display:flex;gap:1.5rem;align-items:center;padding:1.25rem"]:hover,
  main a[style^="display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.25rem;background:#FFFFFF"]:hover{transform:none}
}

/* open phone menu: Call + Quote stay pinned to the bottom of the drawer (it covers the page's own pinned bar);
   the links scroll under them */
.mobile-nav{padding-bottom:0}
.mobile-nav{scroll-padding-bottom:calc(9.5rem + env(safe-area-inset-bottom,0px))}
.mobile-nav__actions{position:sticky;bottom:0;z-index:1;margin:auto -2rem 0;padding:1rem 2rem calc(1rem + env(safe-area-inset-bottom,0px));background:var(--color-primary);box-shadow:0 -12px 24px -10px rgba(15,20,25,0.6)}

/* quote jump: one offset on every form page; the "Short form. 5.0 on Google" line stays in view above the form */
.form-lead{margin-bottom:1rem!important}
.form-lead+.ghl-form-container{margin-top:0!important}
.ghl-form-container{scroll-margin-top:3rem!important}

/* photo cards: captions, place lines and badges sit on a solid strip, readable on any photo (as on the service pages) */
.gallery-card__overlay>h3{background:rgba(27,42,74,0.88);padding:0.15rem 0.5rem;border-radius:4px;align-self:flex-start;margin:0 0 0.25rem}
.gallery-card__overlay>span:not(.badge){color:rgba(255,255,255,0.85)!important;background:rgba(27,42,74,0.88);padding:0.1rem 0.5rem;border-radius:4px;align-self:flex-start}
.gallery-card .badge{background:#1A5BC5!important;-webkit-backdrop-filter:none;backdrop-filter:none}
/* the dark 'View Full Gallery' tile fits its content on phones and tablets */
@media (max-width:991px){
  .gallery-card[style*="gradient"]>div{padding:0.75rem!important}
  .gallery-card[style*="gradient"]>div>div{width:36px!important;height:36px!important;margin-bottom:0.5rem!important}
  .gallery-card[style*="gradient"] small{display:none}
}

/* intro sections: a readable column (and the photo under it capped) instead of the full 1152 px container */
@media (min-width:992px){
  #what-it-is .container>nav,#what-it-is .content-block,#what-it-is .content-grid-responsive,#what-it-is .content-grid,#what-it-is .what-it-is-grid{max-width:800px;margin-left:auto;margin-right:auto}
  #what-it-is .content-block>p,#what-it-is :is(.content-grid-responsive,.content-grid,.what-it-is-grid)>div:first-child>p{max-width:40rem}
}

/* hero trust rows: four items sit as two even rows instead of three plus one stranded item
   (below 480 px they stack one per row) */
.service-hero__trust-item svg,.hero__trust-item svg{flex-shrink:0}
@media (min-width:480px){
  div:has(>:is(.service-hero__trust-item,.hero__trust-item):nth-child(4):last-child){display:grid!important;grid-template-columns:repeat(2,minmax(0,max-content));gap:0.75rem 2rem!important}
}

/* our-services: category tags hug their text; on phones the price-box button fills the row and its two
   centred lines end with the arrow (no arrow floating at the far edge) */
.service-detail__content>span:first-child{align-self:flex-start}
@media (max-width:477px){
  .pricing-banner .btn{display:block;width:100%;white-space:normal;text-align:center;line-height:1.35}
  .pricing-banner .btn svg{display:inline-block;vertical-align:-0.15em}
}
/* homepage gallery preview: small tiles get a compact caption so the badge never sits on the title */
@media (min-width:768px) and (max-width:991px){.gallery-row-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:767px){.gallery-row-2 .gallery-card__overlay{padding:0.625rem}.gallery-row-2 .gallery-card__overlay>h3{font-size:0.9375rem!important;line-height:1.25}.gallery-row-2 .gallery-card .badge{top:8px!important;left:8px!important}.gallery-row-2 .gallery-card__overlay>span:not(.badge){display:none}}
@media (max-width:400px){.gallery-card[style*="gradient"]>div{padding:0.5rem!important}}
/* About intro: the cover card lines up with the heading; on phones the heading comes first */
#about-intro .about-intro{align-items:start}
@media (max-width:767px){#about-intro .about-intro>div:first-child{order:1}}
/* fact and area captions: one evenly spaced block */
.area-card span,.local-fact span{display:block;line-height:1.45}
/* phone menu: the six service links read as a sub-list */
.mobile-nav>a[href$="-flooring.html"],.mobile-nav>a[href$="decorative-concrete-houston.html"],.mobile-nav>a[href$="epoxy-repair-maintenance.html"]{font-size:1.0625rem;font-weight:400;color:rgba(255,255,255,0.8);padding:0.625rem 0 0.625rem 1rem}
.mobile-nav>a>span[aria-hidden="true"]{display:none}