/* Air Works — motion layer (transitions.dev patterns + transitions-polish tokens). Additive only: every rule is gated on html.motion-ok, which the inline snippet sets only when JS runs and prefers-reduced-motion is not "reduce". Without that class this file changes nothing, so content is always visible to crawlers, no-JS visitors, and reduced-motion visitors. */ :root { /* Motion tokens (transitions-polish _root.css) */ --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms; --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms; --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --distance-micro: 4px; --distance-medium: 12px; --scale-medium: 0.97; --blur-small: 2px; --blur-medium: 3px; /* Texts reveal (18) */ --stagger-dur: var(--duration-very-slow); --stagger-distance: var(--distance-medium); --stagger-blur: var(--blur-medium); --stagger-ease: var(--ease-smooth-out); /* Learn more hover (24) */ --learn-shift: 2px; --learn-dur: var(--duration-medium); --learn-ease: var(--ease-smooth-out); /* Error state shake (12) */ --shake-distance: 6px; --shake-overshoot: 4px; --shake-dur-a: 80ms; --shake-dur-b: 60ms; --shake-ease: var(--ease-smooth-out); /* Panel reveal (07) */ --panel-open-dur: var(--duration-slow); --panel-blur: var(--blur-small); --panel-ease: var(--ease-smooth-out); } /* ---------- Scroll + load reveals (Texts reveal, 18) ---------- data-m / .m-in are set at runtime by motion.js and removed again once the reveal finishes, so each element's own styles (hover lifts etc.) take back over untouched. */ .motion-ok [data-m] { opacity: 0; transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease); } .motion-ok [data-m="text"], .motion-ok [data-m="rise"] { transform: translateY(var(--stagger-distance)); } .motion-ok [data-m="text"] { filter: blur(var(--stagger-blur)); } .motion-ok [data-m].m-in { opacity: 1; } .motion-ok [data-m="text"].m-in, .motion-ok [data-m="rise"].m-in { transform: none; } .motion-ok [data-m="text"].m-in { filter: none; } /* Elements the visitor skipped past (anchor jump / fast scroll) appear instantly. */ .motion-ok [data-m].m-instant { transition: none !important; } /* Hero / page-header entrance: hidden from first paint until motion.js takes over (html.m-ready), so there is no visible-then-hidden flash. */ .motion-ok:not(.m-ready) :is( .hero-content > *, .hero .quote-card, .legal-page-header .container > *, .hero-reviews-light .section-head > *, .hero-reviews-light .testimonial-grid > *, .hero-reviews-light .reviews-cta ) { opacity: 0; transform: translateY(var(--stagger-distance)); } /* ---------- Service card arrow (Learn more hover, 24) ---------- */ .motion-ok .service-card .badge-arrow { transition: transform var(--learn-dur) var(--learn-ease); } /* Hover-in quick and direct (<=250ms); the 350ms return above is the softer hover-out. */ .motion-ok .service-card:hover .badge-arrow { transform: translateX(var(--learn-shift)); transition-duration: var(--duration-fast); } /* ---------- FAQ answers (Accordion feel, 21) ---------- */ .motion-ok .faq-item[open] .faq-answer { animation: m-faq-in var(--duration-fast) var(--ease-smooth-out); } @keyframes m-faq-in { from { opacity: 0; transform: translateY(var(--distance-micro)); } } /* Smooth height where supported (Chromium); others keep the fade above. */ @supports (interpolate-size: allow-keywords) { .motion-ok .faq-item { interpolate-size: allow-keywords; } .motion-ok .faq-item::details-content { height: 0; overflow: clip; transition: height var(--duration-fast) var(--ease-smooth-out), content-visibility var(--duration-fast) allow-discrete; } .motion-ok .faq-item[open]::details-content { height: auto; } } /* ---------- Mobile menu (Panel reveal, 07 — open only; close stays instant) ---------- */ .motion-ok .mobile-nav.is-open .mobile-nav-panel { animation: m-panel-in var(--panel-open-dur) var(--panel-ease); } .motion-ok .mobile-nav.is-open .mobile-nav-backdrop { animation: m-fade-in var(--duration-fast) var(--ease-smooth-out); } @keyframes m-panel-in { from { transform: translateX(100%); filter: blur(var(--panel-blur)); } } @keyframes m-fade-in { from { opacity: 0; } } /* ---------- Form feedback ---------- */ /* Success message: single-line texts reveal. */ .motion-ok :is(#qc-success, #form-success).show { animation: m-rise-in var(--duration-very-slow) var(--ease-smooth-out); } @keyframes m-rise-in { from { opacity: 0; transform: translateY(var(--distance-medium)); } } /* Invalid field on submit (Error state shake, 12). 80+60+80+60 = 280ms. */ .motion-ok .m-shake { animation: m-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; } @keyframes m-shake { 0% { transform: translateX(0); animation-timing-function: var(--shake-ease); } 28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); } 57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); } 78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); } 100% { transform: translateX(0); } } /* ---------- Approved polish overrides of existing motion ---------- */ /* 1. Desktop nav dropdown (Menu dropdown, 05): 250ms open / 150ms close, 0.97 pre-scale. */ @media (min-width: 1180px) { .motion-ok .nav-dropdown { transform-origin: top left; transform: translateY(6px) scale(var(--scale-medium)); transition: opacity var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out), visibility 0s linear var(--duration-quick); } .motion-ok .has-dropdown:is(:hover, :focus-within) .nav-dropdown { transform: translateY(0) scale(1); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), visibility 0s linear 0s; } } /* 2. "6-Step Process" accordion: symmetric 250ms smooth-out. */ .motion-ok .how-step-body { transition: max-height var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out), margin-top var(--duration-fast) var(--ease-smooth-out); } /* 3. Button + card hover lift: same lift and durations, smooth-out easing. */ .motion-ok :is(.btn, .service-card) { transition-timing-function: var(--ease-smooth-out); } /* 4. Gallery image hover zoom: smooth-out easing. */ .motion-ok .gallery-item img { transition-timing-function: var(--ease-smooth-out); } /* 5. Footer social icon lift + 6. area chip hover: same durations, smooth-out easing. */ .motion-ok :is(.footer-social .footer-social-icon, .area-chip) { transition-timing-function: var(--ease-smooth-out); } /* 7. FAQ chevron flip: matches the 250ms symmetric accordion height motion. */ .motion-ok .faq-item summary .faq-icon { transition-duration: var(--duration-fast); transition-timing-function: var(--ease-smooth-out); } /* Required reduced-motion guard (motion-ok is never set in this case, but keep the guard in case the preference changes mid-session). */ @media (prefers-reduced-motion: reduce) { .motion-ok [data-m], .motion-ok :is(.hero-content > *, .hero .quote-card, .legal-page-header .container > *, .hero-reviews-light .section-head > *, .hero-reviews-light .testimonial-grid > *, .hero-reviews-light .reviews-cta) { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; } .motion-ok .faq-item::details-content { transition: none !important; } .motion-ok .m-shake, .motion-ok .faq-answer, .motion-ok .mobile-nav-panel, .motion-ok .mobile-nav-backdrop { animation: none !important; } } /* ============ LINK UNDERLINE SWEEP (sitewide, matches .ci-area) ============ */ .nav-link, .nav-dropdown a, .mobile-accordion .sub-links a, .mobile-nav-panel a:not(.btn), .footer-grid a:not(.footer-social-icon):not(.logo):not(.btn), .footer-area-toggle, .footer-bottom a, .contact-info-list a, .ci-area, main p a:not([class]), main li > a:not([class]), .qc-note a, .faq-answer a{ text-decoration:none!important; background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-size:0 1px; background-position:0 100%; transition:background-size .25s ease,color .2s ease,background-color .2s ease; } /* padded menu links: line sits under the text (content box), not under the padding */ .nav-link,.nav-dropdown a,.mobile-accordion .sub-links a,.mobile-nav-panel a:not(.btn){background-origin:content-box;background-position:0 100%;} .nav-dropdown a,.mobile-accordion .sub-links a,.mobile-nav-panel a:not(.btn){width:fit-content;} /* 44px-tall footer links: line sits just under the vertically centered text */ .footer-grid ul a:not(.footer-social-icon),.footer-area-toggle,.footer-legal a{background-position:0 calc(50% + .75em);} /* links inside body copy keep a faint resting underline so they still read as links */ main p a:not([class]),main li > a:not([class]),.qc-note a,.faq-answer a{ background-image:linear-gradient(currentColor,currentColor),linear-gradient(color-mix(in srgb,currentColor 30%,transparent),color-mix(in srgb,currentColor 30%,transparent)); background-size:0 1px,100% 1px; background-position:0 100%,0 100%; padding-bottom:1px; } .nav-link:hover,.nav-link:focus-visible, .nav-dropdown a:hover,.nav-dropdown a:focus-visible, .mobile-accordion .sub-links a:hover,.mobile-accordion .sub-links a:focus-visible, .mobile-nav-panel a:not(.btn):hover,.mobile-nav-panel a:not(.btn):focus-visible, .footer-grid a:not(.footer-social-icon):not(.logo):not(.btn):hover,.footer-grid a:not(.footer-social-icon):not(.logo):not(.btn):focus-visible, .footer-area-toggle:hover,.footer-area-toggle:focus-visible, .footer-bottom a:hover,.footer-bottom a:focus-visible, .contact-info-list a:hover,.contact-info-list a:focus-visible, .ci-area:hover,.ci-area:focus-visible{background-size:100% 1px;} main p a:not([class]):hover,main p a:not([class]):focus-visible, main li > a:not([class]):hover,main li > a:not([class]):focus-visible, .qc-note a:hover,.qc-note a:focus-visible, .faq-answer a:hover,.faq-answer a:focus-visible{background-size:100% 1px,100% 1px;} @media (prefers-reduced-motion:reduce){.nav-link,.nav-dropdown a,.mobile-accordion .sub-links a,.mobile-nav-panel a,.footer-grid a,.footer-area-toggle,.footer-bottom a,.contact-info-list a,.ci-area,main p a,main li > a,.qc-note a,.faq-answer a{transition:none;}} .nav-dropdown a.current{background:var(--gray-50) linear-gradient(currentColor,currentColor) no-repeat content-box border-box 0 100%/0 1px;} .nav-dropdown a:hover,.nav-dropdown a:focus-visible{background:var(--gray-50) linear-gradient(currentColor,currentColor) no-repeat content-box border-box 0 100%/100% 1px;} /* ============ FAQ POLISH ============ */ .faq-list{counter-reset:faq;gap:10px;} .faq-item{counter-increment:faq;position:relative;border-color:var(--gray-200);box-shadow:0 1px 2px rgba(0,46,93,.04);transition:border-color .2s ease,box-shadow .25s ease,background-color .2s ease;} .faq-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red-600);transform:scaleY(0);transform-origin:top;transition:transform .3s ease;} .faq-item:hover{border-color:#C9D0DA;box-shadow:0 4px 14px rgba(0,46,93,.07);} .faq-item[open]{border-color:#C9D0DA;box-shadow:0 10px 28px rgba(0,46,93,.09);} .faq-item[open]::before{transform:scaleY(1);} .faq-item summary{justify-content:flex-start;gap:14px;padding:20px 22px 20px 20px;font-size:16.5px;line-height:1.4;letter-spacing:-.005em;transition:color .2s ease;} .faq-item summary::before{content:counter(faq,decimal-leading-zero);flex-shrink:0;min-width:2.1em;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--gray-700);opacity:.55;font-variant-numeric:tabular-nums;transition:color .2s ease,opacity .2s ease;} .faq-item summary .faq-icon{margin-left:auto;} .faq-item:hover summary::before,.faq-item[open] summary::before{color:var(--red-600);opacity:1;} .faq-item:hover summary .faq-icon{border-color:#F5B4BA;background:#FDEDEE;} .faq-item[open] summary .faq-icon{border-color:var(--red-600);background:var(--red-600);} .faq-item summary:focus-visible{outline:2px solid var(--red-600);outline-offset:-2px;border-radius:var(--radius-md);} .faq-item .faq-answer{padding:0 22px 22px 61px;font-size:15.5px;line-height:1.7;} .faq-item .faq-answer p{max-width:62ch;} .faq-item .faq-answer > :last-child{margin-bottom:0;} .faq-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:22px auto 0;max-width:820px;font-size:15px;color:var(--gray-700);text-align:center;} .faq-more a{font-weight:600;color:var(--navy-900);} @media(max-width:600px){ .faq-item summary{padding:17px 16px;gap:12px;font-size:15.5px;} .faq-item summary::before{display:none;} .faq-item .faq-answer{padding:0 16px 18px;font-size:15px;} } /* ============================================================ MEGA MENU ============================================================ */ .site-header .container{position:relative;} .main-nav > ul > li.has-mega{position:static;} .nav-link .nav-caret{width:14px;height:14px;transition:transform .2s ease;} .has-mega[data-open="true"] .nav-link .nav-caret,.has-mega:hover .nav-link .nav-caret,.has-mega:focus-within .nav-link .nav-caret{transform:rotate(180deg);} .has-mega > .nav-link{position:relative;} .has-mega > .nav-link::after{content:"";position:absolute;left:2px;right:2px;bottom:2px;height:2px;border-radius:2px;background:var(--red-600);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;} .has-mega[data-open="true"] > .nav-link::after,.has-mega:hover > .nav-link::after,.has-mega:focus-within > .nav-link::after{transform:scaleX(1);} .mega{position:absolute;top:100%;left:var(--sp-3);right:var(--sp-3);padding-top:10px;z-index:1200;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.3,1),visibility .22s;} @media(min-width:1280px){.mega{left:48px;right:48px;}} .has-mega:hover > .mega,.has-mega:focus-within > .mega,.has-mega[data-open="true"] > .mega{opacity:1;visibility:visible;transform:translateY(0);} .mega-inner{background:var(--white);border-radius:22px;box-shadow:0 26px 64px rgba(4,18,38,.28),0 2px 8px rgba(4,18,38,.12);padding:20px;overflow:hidden;} @media(min-width:1100px){.mega-inner{padding:24px;}} .mega-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 14px;max-width:none;} .mega-hd strong{font-family:var(--font-head);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red-600);} .mega-hd span{font-size:13px;color:var(--gray-700);} .mega-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} @media(min-width:900px){.mega-cards{grid-template-columns:repeat(3,minmax(0,1fr));}} @media(min-width:1180px){.mega-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}} .mega-card{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:15px;border:1px solid var(--gray-200);background:var(--white);text-decoration:none;opacity:0;transform:translateY(8px);transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s ease;} .has-mega:hover .mega-card,.has-mega:focus-within .mega-card,.has-mega[data-open="true"] .mega-card{opacity:1;transform:translateY(0);} .mega-card:nth-child(2){transition-delay:.03s;} .mega-card:nth-child(3){transition-delay:.06s;} .mega-card:nth-child(4){transition-delay:.09s;} .mega-card:nth-child(5){transition-delay:.12s;} .mega-card:nth-child(6){transition-delay:.15s;} .mega-card:nth-child(7){transition-delay:.18s;} .mega-card:hover,.mega-card:focus-visible{border-color:rgba(228,0,43,.45);background:var(--gray-50);box-shadow:0 8px 20px rgba(0,46,93,.09);text-decoration:none;} .mega-card.current{border-color:rgba(228,0,43,.45);background:var(--gray-50);} .mega-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--white);background:linear-gradient(140deg,var(--red-600),var(--navy-900));box-shadow:0 6px 14px rgba(0,46,93,.18);} .mega-cards .mega-card:nth-child(even) .mega-ic{background:linear-gradient(140deg,var(--navy-900),var(--red-600));} .mega-ic svg{width:19px;height:19px;} .mega-tx{min-width:0;} .mega-tx b{display:block;font-family:var(--font-head);font-weight:600;font-size:14.5px;line-height:1.3;color:var(--navy-900);margin-bottom:2px;} .mega-tx span{display:block;font-size:12.5px;line-height:1.5;color:var(--gray-700);} .mega-card:hover .mega-tx b,.mega-card.current .mega-tx b{color:var(--red-600);} .mega-cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;} @media(min-width:760px){.mega-cities{grid-template-columns:repeat(3,minmax(0,1fr));}} @media(min-width:1180px){.mega-cities{grid-template-columns:repeat(5,minmax(0,1fr));}} .mega-city{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;font-size:14px;font-weight:500;color:var(--navy-900);text-decoration:none;transition:background-color .18s ease,color .18s ease;} .mega-city svg{width:15px;height:15px;color:#9AA3B2;flex-shrink:0;transition:color .18s ease,transform .22s ease;} .mega-city:hover,.mega-city:focus-visible{background:var(--gray-50);color:var(--red-600);text-decoration:none;} .mega-city:hover svg{color:var(--red-600);transform:translateY(-1px);} .mega-city.current{background:var(--gray-50);color:var(--red-600);} .mega-city.current svg{color:var(--red-600);} .mega-promo{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:18px 20px;border-radius:15px;color:var(--white);background:linear-gradient(140deg,var(--red-600) 0%,#8B2155 48%,var(--navy-900) 100%);box-shadow:0 12px 26px rgba(0,46,93,.2);} .mega-promo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 95% at 12% 4%,rgba(255,255,255,.2),transparent 55%),linear-gradient(180deg,transparent 45%,rgba(4,18,38,.2));} .mega-pic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);} .mega-pic svg{width:19px;height:19px;} .mega-promo b{font-family:var(--font-head);font-weight:600;font-size:15.5px;line-height:1.3;} .mega-promo p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.86);max-width:none;} .mega-call{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:2px;padding:10px 14px;border-radius:11px;background:var(--white);color:var(--navy-900);font-family:var(--font-head);font-weight:700;font-size:14px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;} .mega-call svg{width:15px;height:15px;color:var(--red-600);} .mega-call:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(4,18,38,.3);text-decoration:none;} .mega-help{flex-direction:row;align-items:center;gap:12px;padding:13px 14px;text-decoration:none;} .mega-help:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,46,93,.26);} .mega-help{transition:transform .2s ease,box-shadow .2s ease;} .mega-help .mega-pic{width:36px;height:36px;border-radius:11px;} .mega-help b{font-size:14.5px;} .mega-help p{font-size:12.5px;} .mega-inline{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:1px;} .mega-band{margin-top:14px;flex-direction:row;align-items:center;gap:16px;padding:16px 20px;} .mega-band .mega-bt{flex:1;min-width:0;} .mega-band b{display:block;} .mega-band .mega-call{margin-top:0;flex-shrink:0;} @media(max-width:700px){.mega-band{flex-direction:column;align-items:flex-start;}} .mega-scrim{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;background:rgba(4,18,38,.4);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s;z-index:-1;} .site-header:has(.has-mega:hover) .mega-scrim,.site-header:has(.has-mega:focus-within) .mega-scrim,.site-header:has(.has-mega[data-open="true"]) .mega-scrim{opacity:1;visibility:visible;} @media(prefers-reduced-motion:reduce){ .mega,.mega-card,.mega-city svg,.mega-call{transition-duration:.01ms!important;transition-delay:0s!important;} .mega-card{opacity:1;transform:none;} } /* ---- mobile drawer ---- */ .mobile-nav-panel{width:min(392px,92vw);padding:0;gap:0;} .mnav-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--gray-200);position:sticky;top:0;background:var(--white);z-index:2;} .mnav-body{padding:14px 16px 0;} .mobile-nav-panel .mnav-list{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;} .mnav-acc > summary{padding:13px 12px;border-radius:14px;font-size:16px;transition:background-color .18s ease;} .mnav-acc > summary:hover{background:var(--gray-50);} .mnav-acc[open] > summary{background:var(--gray-50);color:var(--red-600);} .mnav-acc > summary svg{color:var(--red-600);} .mobile-nav-panel .sub-links{padding:8px 0 10px;gap:6px;} .mobile-nav-panel .mnav-card{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px;border:1px solid var(--gray-200);background:var(--white);font-size:15px;font-weight:600;color:var(--navy-900);text-decoration:none;} .mnav-card:hover,.mnav-card.current{border-color:rgba(228,0,43,.45);background:var(--gray-50);color:var(--red-600);} .mnav-card .mega-ic{width:34px;height:34px;border-radius:11px;} .mnav-card .mega-ic svg{width:17px;height:17px;} .mnav-card .mnav-go{margin-left:auto;width:16px;height:16px;color:#9AA3B2;flex-shrink:0;} .mnav-card:hover .mnav-go,.mnav-card.current .mnav-go{color:var(--red-600);} .mnav-cities{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;} .mobile-nav-panel .mnav-city{display:flex;align-items:center;gap:7px;padding:9px 8px;border-radius:10px;font-size:14px;font-weight:500;color:var(--gray-700);text-decoration:none;} .mnav-city svg{width:14px;height:14px;color:#9AA3B2;flex-shrink:0;} .mnav-city:hover,.mnav-city.current{background:var(--gray-50);color:var(--red-600);} .mnav-city:hover svg,.mnav-city.current svg{color:var(--red-600);} .mobile-nav-panel .mnav-row{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:14px;font-size:16px;} .mnav-row svg{width:18px;height:18px;color:#9AA3B2;flex-shrink:0;} .mnav-row:hover{background:var(--gray-50);color:var(--red-600);} .mnav-row:hover svg{color:var(--red-600);} .mnav-foot{position:sticky;bottom:0;display:flex;flex-direction:column;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));margin-top:auto;background:var(--white);border-top:1px solid var(--gray-200);} .mnav-foot .btn{width:100%;justify-content:center;} .mnav-hours{display:flex;align-items:center;justify-content:center;gap:7px;margin:0;font-size:12.5px;color:var(--gray-700);} .mnav-hours svg{width:14px;height:14px;color:#9AA3B2;} /* card-style nav rows opt out of the link sweep and the fit-content width */ .mobile-nav-panel .sub-links a.mnav-card,.mobile-nav-panel .sub-links a.mnav-city,.mobile-nav-panel ul a.mnav-row, .mega-card,.mega-city{width:auto!important;background-image:none!important;} /* .mega-help is a gradient promo tile and lives only in the desktop mega, where the underline sweep never reaches it — it must keep its own background-image. */ .mega-help{width:auto;} .mnav-hours{text-align:center;} /* the page-level `.mobile-nav-panel a{color:var(--navy-900)}` (0,1,1) outranks `.btn-primary` (0,1,0) and was painting the red CTA navy-on-red at 2.6:1 */ .mobile-nav-panel a.btn-primary{color:var(--white);} .mobile-nav-panel a.btn-outline-light{color:var(--white);} /* ============ HERO v2 (sitewide) ============ */ .hero-v2 .hero-overlay{background:linear-gradient(100deg,rgba(0,46,93,.72) 0%,rgba(0,46,93,.54) 38%,rgba(0,46,93,.18) 66%,rgba(0,46,93,.05) 100%);} .hero-v2 .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);} .hero-v2 .hero-eyebrow svg{width:15px;height:15px;color:#FF8A93;} .hero-v2 h1{letter-spacing:-.02em;} /* the headline shadow existed on index only; the lede had one on all 28 heroes, so the small text was shadowed and the big text wasn't */ .hero-v2 h1{text-shadow:0 3px 16px rgba(0,0,0,.5);} /* the 100deg scrim is tuned for a wide hero; at phone width the text spans the full column and reaches its light end, dropping the 18px lede to 3.6:1 */ @media(max-width:760px){ .hero-v2 .hero-overlay{background:linear-gradient(175deg,rgba(0,46,93,.66) 0%,rgba(0,46,93,.54) 45%,rgba(0,46,93,.46) 100%);} } /* stacked CTAs were 183px over 257px; match them once they wrap */ @media(max-width:560px){ .hero-v2 .hero-ctas{flex-direction:column;align-items:stretch;} .hero-v2 .hero-ctas > .btn{width:100%;justify-content:center;} } .hero-v2 h1 em{font-style:normal;color:#FF6B77;} .hero-v2 .hero-sub{color:rgba(255,255,255,.88);} .hero-v2 .hero-trust{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;} .hero-v2 .hero-trust-item{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:13.5px;font-weight:500;color:rgba(255,255,255,.92);backdrop-filter:blur(6px);} .hero-v2 .hero-trust-item svg{width:15px;height:15px;color:#FF8A93;flex-shrink:0;} .hero-v2 .ht-stars{display:inline-flex;gap:1px;} .hero-v2 .ht-stars svg{width:13px;height:13px;color:#FFC53D;fill:#FFC53D;} /* ============ HERO SURVEY CARD ============ */ .qs-card{padding:0;overflow:hidden;position:relative;} .qs-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--red-600),var(--navy-900));z-index:2;} .qs-head{padding:22px 22px 0;} @media(min-width:768px){.qs-head{padding:26px 26px 0;}} .qs-card h2{margin:0 0 4px;font-size:22px;line-height:1.25;color:var(--navy-900);} .qs-card .qs-lede{margin:0;font-size:14px;line-height:1.55;color:var(--gray-700);max-width:none;} .qs-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 8px;} .qs-step{margin:0;font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--red-600);} .qs-back{display:none;align-items:center;gap:5px;background:none;border:0;padding:4px 2px;font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--gray-700);cursor:pointer;} .qs-back svg{width:14px;height:14px;} .qs-back:hover{color:var(--red-600);} .qs-card[data-step="1"] .qs-back{display:none;} .qs-card:not([data-step="1"]) .qs-back{display:inline-flex;} .qs-track{display:block;height:4px;border-radius:4px;background:var(--gray-100);overflow:hidden;} .qs-bar{display:block;height:100%;width:25%;border-radius:4px;background:linear-gradient(90deg,var(--red-600),var(--navy-900));transition:width .35s cubic-bezier(.2,.8,.3,1);} .qs-body{padding:18px 22px 22px;} @media(min-width:768px){.qs-body{padding:20px 26px 26px;}} .qs-pane[hidden]{display:none;} .qs-pane{border:0;margin:0;padding:0;min-width:0;animation:qsIn .28s cubic-bezier(.2,.8,.3,1) both;} @keyframes qsIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} .qs-pane legend{padding:0;margin:0 0 12px;font-family:var(--font-head);font-weight:600;font-size:16px;color:var(--navy-900);} .qs-pane legend span{display:block;margin-top:3px;font-family:var(--font-body);font-weight:400;font-size:13px;color:var(--gray-700);} .qs-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .qs-opt{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;border:1.5px solid var(--gray-200);background:var(--white);cursor:pointer;font-size:13.5px;font-weight:600;line-height:1.25;color:var(--navy-900);transition:border-color .18s ease,background-color .18s ease,transform .18s ease;} .qs-opt:hover{border-color:rgba(228,0,43,.4);background:var(--gray-50);} .qs-opt input{position:absolute;opacity:0;width:1px;height:1px;} .qs-oi{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--white);background:linear-gradient(140deg,var(--red-600),var(--navy-900));} .qs-opt:nth-child(even) .qs-oi{background:linear-gradient(140deg,var(--navy-900),var(--red-600));} .qs-oi svg{width:17px;height:17px;} .qs-opt:has(input:checked){border-color:var(--red-600);background:#FEF4F5;} .qs-opt:has(input:focus-visible){outline:2px solid var(--red-600);outline-offset:2px;} .qs-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .qs-chip{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px 12px;border-radius:13px;border:1.5px solid var(--gray-200);background:var(--white);cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--navy-900);transition:border-color .18s ease,background-color .18s ease;} .qs-chip:hover{border-color:rgba(228,0,43,.4);background:var(--gray-50);} .qs-chip input{position:absolute;opacity:0;width:1px;height:1px;} .qs-chip:has(input:checked){border-color:var(--red-600);background:#FEF4F5;color:var(--red-600);} .qs-chip:has(input:focus-visible){outline:2px solid var(--red-600);outline-offset:2px;} .qs-row{display:grid;gap:12px;margin-bottom:12px;} .qs-row.two{grid-template-columns:repeat(2,minmax(0,1fr));} .qs-row label{display:block;font-size:12.5px;font-weight:700;color:var(--navy-900);margin-bottom:5px;} .qs-row label i{font-style:normal;font-weight:500;color:var(--gray-700);} .qs-row input,.qs-row select,.qs-row textarea{width:100%;border:1.5px solid var(--gray-200);border-radius:11px;padding:11px 13px;font-family:var(--font-body);font-size:16px;color:var(--gray-900);background:var(--gray-50);transition:background-color .2s ease,border-color .2s ease;} .qs-row textarea{resize:vertical;min-height:80px;} .qs-row input:focus,.qs-row select:focus,.qs-row textarea:focus{outline:2px solid var(--red-600);outline-offset:1px;border-color:var(--red-600);background:var(--white);} .qs-err{display:none;margin:8px 0 0;font-size:12.5px;font-weight:600;color:var(--red-700);} .qs-pane.has-err .qs-err{display:block;} .qs-actions{display:flex;gap:10px;margin-top:14px;} .qs-actions[hidden]{display:none!important;} .qs-actions .btn{flex:1;justify-content:center;} .qs-recap{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;} .qs-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--gray-50);border:1px solid var(--gray-200);font-size:12px;font-weight:600;color:var(--navy-900);} .qs-tag svg{width:13px;height:13px;color:var(--red-600);} .qs-card .qc-note{margin-top:12px;} @media(max-width:430px){.qs-opt{padding:10px;gap:8px;font-size:13px;}.qs-oi{width:28px;height:28px;border-radius:9px;}.qs-oi svg{width:15px;height:15px;}}@media(max-width:359px){.qs-opts{grid-template-columns:minmax(0,1fr);}.qs-row.two{grid-template-columns:minmax(0,1fr);}} .qs-known{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;} /* ============ FOOTER v2 ============ */ .site-footer{position:relative;} .site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--red-600) 0%,#8B2155 45%,var(--navy-700) 100%);} .footer-grid h3{position:relative;padding-bottom:10px;letter-spacing:-.01em;} .footer-grid h3::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;background:var(--red-600);} .footer-grid a:hover,.footer-grid a:focus-visible{color:#FF8A93;} .footer-about p{max-width:46ch;} .footer-nap{gap:4px;margin-bottom:22px;} .footer-nap li{gap:12px;padding:7px 9px;border-radius:12px;margin-left:-9px;transition:background-color .2s ease;} .footer-nap li:has(a):hover{background:rgba(255,255,255,.06);} .footer-nap .ci-icon{width:34px;height:34px;min-width:34px;border-radius:11px;background:var(--red-600);border:0;box-shadow:0 6px 14px rgba(4,18,38,.35);} .footer-nap .ci-icon svg{width:16px;height:16px;color:var(--white);} .footer-nap a{font-family:var(--font-head);font-weight:600;color:var(--white)!important;} .footer-nap li:hover a{color:#FF8A93!important;} .footer-social{gap:10px;margin-top:26px;} .footer-social .footer-social-icon{width:42px;height:42px;min-width:42px;min-height:42px;border-radius:13px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);} .footer-social-icon svg{width:19px;height:19px;} .footer-social .footer-social-icon:hover,.footer-social .footer-social-icon:focus-visible{color:rgb(var(--brand-rgb));border-color:rgba(var(--brand-rgb),.65);background:rgba(var(--brand-rgb),.14);} .footer-area-toggle{padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);font-family:var(--font-head);font-weight:600;font-size:13px;min-height:34px;} .footer-area-toggle:hover{color:var(--white);border-color:rgba(228,0,43,.55);background:rgba(228,0,43,.14);} .footer-cta{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:9px;} .footer-cta strong{display:block;font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--white);margin-bottom:3px;} .footer-cta .fc-call{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;background:var(--red-600);color:var(--white)!important;font-family:var(--font-head);font-weight:700;font-size:14.5px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;} .footer-cta a svg{width:16px;height:16px;flex-shrink:0;} .footer-cta .fc-call:hover{background:var(--red-700);transform:translateY(-2px);box-shadow:0 10px 22px rgba(4,18,38,.4);color:var(--white)!important;} .footer-cta .fc-quote{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.28);color:var(--white)!important;font-family:var(--font-head);font-weight:600;font-size:14.5px;text-decoration:none;transition:border-color .2s ease,background-color .2s ease;} .footer-cta .fc-quote:hover{border-color:var(--white);background:rgba(255,255,255,.08);color:var(--white)!important;} .footer-bottom{padding:22px 0;font-size:12.5px;} .footer-bottom .fb-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#B9C8DC;} .footer-bottom .fb-badge svg{width:13px;height:13px;color:#FF8A93;} @media(max-width:700px){.footer-cta{justify-items:stretch;}} /* ============ SECTION RHYTHM: collapse same-background neighbours ============ Two sections of the same colour in a row produced 96px bottom + 96px top = 192px of dead space with no colour change to justify it, so the pair read as one block with a hole in it. The page CSS already did this for one case (.answer-wrap + .section-bg-white); this generalises it so every same-colour boundary keeps the site's single 96px rhythm. Different-colour boundaries are untouched and keep the full 192px. */ main > .section-bg-white + .section-bg-white, main > .section-bg-gray + .section-bg-gray, main > .section-bg-navy + .section-bg-navy, main > .section-bg-red + .section-bg-red{padding-top:0;} /* ---- section-head rhythm ---- Centred heads were already a uniform 48px on all 103 instances, but the left-aligned prose heads had drifted to 20 / 24 / 32 / 48 (three different values on the dryer-vent page alone). 24px is the dominant value (26 of 33) and the tighter gap is intentional for prose, so they all use it now. */ main .section-head.align-left{margin-bottom:24px;} /* answer-wrap's 80px bottom made its collapsed boundary 80px while every other collapsed boundary is 96px; 96 is the site standard on 318 of 345 sections */ main > .answer-wrap.v2{padding-bottom:var(--section-pad-mobile);} @media(min-width:768px){main > .answer-wrap.v2{padding-bottom:var(--section-pad-desktop);}} /* ---- grid gaps on the 8px scale ---- Two families had drifted off the site's 8px spacing scale. Major two-column layout grids ran 46 / 48 / 48 / 52 / 56 / 56 / 64; card grids ran 18 / 22 / 24 / 28 where 24 is the site standard on 101 grids. Snapping the off-scale values only; 48/56/64 and 24 are left alone. Breakpoints mirror each grid's own so the mobile gaps are untouched. */ @media(min-width:1024px){ .cn-grid{gap:48px;} /* was 46 */ .st-grid{gap:48px;} /* was 52 */ } @media(min-width:900px){ .ws-grid{gap:24px;} /* was 22 */ .ba-grid{gap:24px;} /* was 28 */ } @media(min-width:700px){ .vl-grid{gap:24px;} /* was 18 */ } /* ---- contact form parity with the hero survey ---- The contact form gained city / timing / source so it captures the same data as the survey card on the other 26 pages. Two follow-ons: 1. "(optional)" inherited the label's own 700 navy and read as emphasis; the survey renders it 500 grey and upright, so match that. 2. The taller form left the info column ending 268px short. Sticking it keeps the phone number and hours in view while the form is filled, which is the point of the column, and makes the height difference moot. */ .cn-form label i{font-weight:500;font-style:normal;color:var(--gray-700);} @media(min-width:1024px){ .cn-grid{align-items:start;} .cn-head{position:sticky;top:calc(var(--header-h) + 24px);} } /* ============ SHARED SECTION WIDTHS ============ Each page carries its own hand-maintained comma list of which sections get the wide container, so a section could be 1440 on one page and 1240 on another purely because a class was missed. Two had drifted: gallery ("A Look At Jobs In Progress") 1440 on index, 1240 on testimonials visit-v2 ("What to Expect") 1440 on 18 city pages, 1240 on 7 service pages Keyed off the content rather than a per-page class list, matching the existing :has() rules, so any page that gains one of these sections gets the right width without being added to a list. Same breakpoint and padding as those rules. */ @media(min-width:1280px){ main section > .container:has(> .gallery-grid), main section > .container:has(> .vx-wrap){max-width:1440px;padding-left:48px;padding-right:48px;} } /* ---- lead forms: honeypot, Turnstile, error alert, sent state ---- Used by survey-submit.js on #quote-form (26 pages) and #schedule-form. */ .aw-hp{position:absolute!important;left:-10000px!important;top:auto!important; width:1px!important;height:1px!important;overflow:hidden!important;} .aw-ts-wrap{margin:0 0 14px;min-height:65px;} .aw-form-alert{display:block;margin:0 0 14px;padding:12px 14px;border-radius:var(--radius-sm,12px); border:1.5px solid var(--red-700,#BE0925);background:#FFF5F5;color:var(--gray-900,#1A2130); font-size:14px;font-weight:600;line-height:1.45;} .aw-form-alert[hidden]{display:none!important;} form[data-sent] .qs-pane, form[data-sent] [data-next], form[data-sent] .form-row, form[data-sent] button[type="submit"], form[data-sent] .qc-note, form[data-sent] .cn-note, form[data-sent] .aw-ts-wrap, form[data-sent] .aw-form-alert, .qs-card[data-sent] .qs-meta, .qs-card[data-sent] .qs-track{display:none!important;} /* ============ MOBILE CTA BAR: HOLD UNTIL SCROLL ============ */ /* The bottom bar repeats the hero's own Call/Text and Request Service buttons, and on a phone it sits directly on top of them. Keep it off screen until the visitor starts scrolling, then slide it up. Transform only — body keeps its padding-bottom the whole time, so nothing moves, the footer is never covered and CLS stays at 0. visibility is toggled with it (delayed on the way out) so the links are not focusable by keyboard while the bar is off screen. */ .mobile-bar{ transform: translateY(100%); visibility: hidden; transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s; } :root.aw-scrolled .mobile-bar{ transform: translateY(0); visibility: visible; transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s; } @media (prefers-reduced-motion: reduce){ .mobile-bar, :root.aw-scrolled .mobile-bar{ transition: none; } }