*,::before,::after{margin:0;padding:0;box-sizing:border-box} :root{ /* ---- Foreground (constant across every page) ---- */ --text-white:#f5f5f5; --text-body:rgba(245,245,245,.85); --text-dim:rgba(245,245,245,.65); --text-faint:rgba(245,245,245,.45); /* ---- Background (B&W base, constant across every service) ---- */ --bg-page:#0a0a0a; --bg-card:#141414; --bg-hover:#1c1c1c; --border:rgba(245,245,245,.10); --line-bright:rgba(245,245,245,.18); /* ---- Accent (overridden per page via --page-accent* in ) ---- */ --accent:var(--page-accent,#d97742); --accent-bright:var(--page-accent-bright,#e8895a); --accent-soft:var(--page-accent-soft,rgba(217,119,66,.10)); --accent-glow:var(--page-accent-glow,rgba(217,119,66,.35)); --ease-out-expo:cubic-bezier(0.16,1,0.3,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1); } html{scroll-behavior:smooth;scrollbar-gutter:stable;text-rendering:optimizeLegibility} h1,h2,h3,.section-eyebrow,.section-badge,.hero-badge,.card-label{text-wrap:balance} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg-page);background-image:radial-gradient(ellipse at 50% -10%,#1a1a1a 0%,#0a0a0a 60%);background-attachment:fixed;color:var(--text-white);line-height:1.6; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-feature-settings:'ss01','ss02','cv01'; } ::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)} ::-webkit-scrollbar{width:6px;background:color-mix(in srgb,#fff 5%,transparent)} ::-webkit-scrollbar-thumb{background:color-mix(in srgb,#fff 15%,transparent);border-radius:3px} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* ---- PERFORMANCE ---- */ .page-section,.cta-section,.city-links,.site-footer{contain:content} .page-section,.cta-section,.city-links{content-visibility:auto;contain-intrinsic-size:auto 600px} .ticker-track{will-change:transform} .hero-gradient-text{will-change:background-position} /* ---- SCROLL-DRIVEN REVEALS ---- */ @supports (animation-timeline: view()) { .reveal-on-scroll { animation: reveal 0.6s ease both; animation-timeline: view(); animation-range: entry 10% entry 90%; } @keyframes reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } } /* ---- HEADER SCROLL SHADOW (pure CSS) ---- */ @supports (container-type: scroll-state) { header { container-type: scroll-state; } @container scroll-state(stuck: top) { header { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); } } } /* ---- DROPDOWN/MODAL ENTER ANIMATION ---- */ @supports (selector(@starting-style)) { .dropdown, .lightbox, .mobile-menu { transition: opacity 0.2s ease, transform 0.2s ease; } @starting-style { .dropdown { opacity: 0; transform: translateY(-6px); } .lightbox { opacity: 0; transform: scale(0.97); } .mobile-menu { transform: translateX(100%); } } } /* ---- CROSS-PAGE VIEW TRANSITIONS ---- */ @view-transition { navigation: auto; } .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; background:rgba(8,8,10,0.88);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4); border-bottom:1px solid rgba(255,255,255,0.04); } .header-inner{ max-width:1200px;margin:0 auto;padding:12px 20px; display:flex;align-items:center;justify-content:space-between; } .header-logo{display:flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-weight:700;font-size:18px;color:#fff} .header-logo img{width:36px;height:36px;border-radius:8px} .header-nav{display:flex;align-items:center;gap:6px} .header-nav a,.header-nav .nav-dropdown>summary{ padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;color:rgba(255,255,255,0.6); cursor:pointer;transition:color 0.2s,background 0.2s;list-style:none;border:none;background:none; } .header-nav a:hover,.header-nav .nav-dropdown>summary:hover{color:#fff;background:rgba(255,255,255,0.06)} .nav-dropdown{position:relative} .nav-dropdown[open]>summary{color:#fff;background:rgba(255,255,255,0.06)} .nav-dropdown .dropdown-menu{ position:absolute;top:100%;left:0;margin-top:4px;min-width:200px; background:rgba(15,15,15,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:6px; box-shadow:0 12px 40px rgba(0,0,0,0.5); } .dropdown-menu a{display:block;padding:10px 14px;border-radius:8px;font-size:13px;color:rgba(255,255,255,0.65);transition:all 0.15s} .dropdown-menu a:hover{background:rgba(255,255,255,0.06);color:#fff} .header-ctas{display:flex;align-items:center;gap:8px} .btn-header-cta{ padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600; font-family:'Inter',sans-serif;cursor:pointer;transition:all 0.2s;border:none; } .btn-call{background:var(--accent);color:#fff} .btn-call:hover{background:#e03535} .btn-text{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1)} .btn-text:hover{background:rgba(255,255,255,0.12)} /* Mobile nav */ .mobile-toggle{display:none;background:none;border:none;color:#fff;padding:8px;cursor:pointer} .mobile-nav{display:none} @media(max-width:768px){ .header-nav,.header-ctas{display:none} .mobile-toggle{display:block} .mobile-nav.open{ display:flex;position:fixed;top:60px;left:0;right:0;bottom:0;background:rgba(8,8,10,0.96); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:20px; overflow-y:auto;flex-direction:column;gap:4px;z-index:99; } .mobile-nav a{display:block;padding:14px 16px;border-radius:10px;font-size:16px;color:rgba(255,255,255,0.7)} .mobile-nav a:hover{background:rgba(255,255,255,0.06);color:#fff} .mobile-nav .mobile-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,0.3);padding:16px 16px 8px;font-family:'Inter',sans-serif} } /* ---- HERO ---- */ .service-hero{ position:relative;width:100%;min-height:clamp(480px,60vh,700px);overflow:hidden; display:flex;align-items:flex-end;padding-top:80px; background:linear-gradient(135deg,#0a0a0a 0%,#1a1020 40%,#0d1117 100%); } .service-hero picture,.service-hero picture img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } .service-hero picture img[src]{ /* hide broken images gracefully */} .service-hero picture img:not([src]),.service-hero picture img[src=""]{display:none} .hero-overlay{ position:absolute;inset:0; background:linear-gradient(to bottom,rgba(10,10,10,0.2) 0%,rgba(10,10,10,0.5) 40%,rgba(10,10,10,0.92) 100%); } .hero-content{ position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto; padding:0 clamp(20px,4vw,40px) clamp(40px,6vw,80px); display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:end; } @media(max-width:900px){ .hero-content{grid-template-columns:1fr;gap:20px} .hero-cards{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px} .hero-card{min-width:260px;flex-shrink:0} } .hero-badge{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px; font-family:'Inter',sans-serif;margin-bottom:12px; } .hero-title{ font-family:'Inter',sans-serif;font-weight:800; font-size:clamp(32px,4.5vw,56px);line-height:1.1;margin-bottom:16px; } .hero-subtitle{ font-size:clamp(15px,1.8vw,18px);color:var(--text-body); max-width:560px;line-height:1.65;margin-bottom:24px; } .hero-ctas{display:flex;gap:10px;flex-wrap:wrap} .btn{ padding:14px 28px;border-radius:10px;font-size:15px;font-weight:600; font-family:'Inter',sans-serif;cursor:pointer;transition:all 0.2s; display:inline-flex;align-items:center;gap:8px;border:none; } .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:#e03535;transform:translateY(-2px);box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 35%,transparent)} .btn-secondary{background:color-mix(in srgb,#fff 8%,transparent);color:#fff;border:1px solid color-mix(in srgb,#fff 12%,transparent)} .btn-secondary:hover{background:color-mix(in srgb,#fff 14%,transparent)} .btn-accent{color:#fff} .btn-accent:hover{transform:translateY(-2px);filter:brightness(0.9)} .glass-card{ background:rgba(15,15,15,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-radius:14px;border:1px solid rgba(255,255,255,0.08);padding:20px; box-shadow:0 12px 40px rgba(0,0,0,0.4); } .card-label{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px; font-family:'Inter',sans-serif;margin-bottom:12px; } .price-row{ padding:10px 12px;border-radius:8px;margin-bottom:6px; border:1px solid rgba(255,255,255,0.05);background:rgba(255,255,255,0.02); } .price-row.featured{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.12)} .price-row-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px} .price-label{font-size:12px;font-weight:600;color:#fff} .price-value{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:#fff} .price-note{font-size:10px;color:rgba(255,255,255,0.35)} .feature-item{ display:flex;align-items:flex-start;gap:8px;font-size:12px; color:rgba(255,255,255,0.65);line-height:1.4;margin-bottom:5px; } .feature-check{flex-shrink:0;margin-top:1px;font-size:10px} /* ---- BREADCRUMBS ---- */ .breadcrumbs{ max-width:1200px;margin:0 auto;padding:20px clamp(20px,4vw,40px) 0; font-size:13px;color:rgba(255,255,255,0.35);font-family:'Inter',sans-serif; } .breadcrumbs a{color:rgba(255,255,255,0.5);transition:color 0.2s} .breadcrumbs a:hover{color:#fff} .breadcrumbs span{margin:0 8px} /* ---- SECTIONS ---- */ .page-section{ max-width:1200px;margin:0 auto;padding:clamp(48px,8vw,80px) clamp(20px,4vw,40px); } .section-badge{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px; font-family:'Inter',sans-serif;margin-bottom:10px; } .section-title{ font-family:'Inter',sans-serif;font-weight:800; font-size:clamp(26px,3.5vw,42px);line-height:1.15;margin-bottom:12px; } .section-subtitle{ font-size:16px;color:var(--text-dim);max-width:560px;line-height:1.6;margin-bottom:32px; } .section-divider{ border:none;border-top:1px solid rgba(255,255,255,0.06);margin:0;position:relative; } .section-divider::after{ content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:200px;height:3px;border-radius:2px; background:var(--accent);filter:blur(6px);opacity:0.15; } /* ---- PRICING GRID ---- */ .pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .pricing-card{ background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06); border-radius:16px;padding:28px;transition:border-color 0.2s; } .pricing-card.featured{border-color:rgba(255,255,255,0.15);background:rgba(255,255,255,0.05)} .pricing-card:hover{border-color:rgba(255,255,255,0.12)} .pricing-card-label{font-size:14px;font-weight:600;margin-bottom:4px} .pricing-card-price{ font-family:'Inter',sans-serif;font-size:clamp(24px,3vw,32px);font-weight:700; margin-bottom:4px; } .pricing-card-note{font-size:13px;color:rgba(255,255,255,0.4)} /* ---- TABLE ---- */ .data-table{width:100%;border-collapse:collapse;font-size:14px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.06)} .data-table th{ text-align:left;padding:14px 18px;font-weight:700;font-size:11px; text-transform:uppercase;letter-spacing:0.5px;color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.08); font-family:'Inter',sans-serif; } .data-table td{ padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.04); color:rgba(255,255,255,0.65); } .data-table tr:hover td{background:rgba(255,255,255,0.02)} .data-table td:first-child{color:#fff;font-weight:600} @media(max-width:640px){ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .data-table{min-width:500px} } .dosdonts{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:640px){.dosdonts{grid-template-columns:1fr}} .dos-col{ background:rgba(34,197,94,0.05);padding:24px;border-radius:14px; border-left:3px solid #22c55e; } .donts-col{ background:rgba(239,68,68,0.05);padding:24px;border-radius:14px; border-left:3px solid #ef4444; } .dosdonts-title{font-weight:700;font-size:15px;margin-bottom:14px} .dosdonts-item{font-size:13px;color:var(--text-body);line-height:1.7;margin-bottom:2px} /* (old FAQ accordion removed — now using fq-carousel) */ /* (old review grid removed — now using rv-ticker) */ /* ---- GALLERY CAROUSEL ---- */ .gl-section{position:relative;width:100%;padding:5rem 0 4rem;overflow:hidden} .gl-header{text-align:center;margin-bottom:2rem;padding:0 1.25rem} .gl-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px} .gl-heading{font-size:clamp(1.75rem,4vw,3rem);font-weight:800;line-height:1.15;margin:0 0 10px} .gl-subhead{font-size:1rem;color:var(--text-dim);max-width:500px;margin:0 auto;line-height:1.6} .gl-carousel{position:relative;max-width:700px;margin:0 auto;padding:0 24px} .gl-carousel.dimmed .gl-track-clip{filter:blur(6px) brightness(0.4);pointer-events:none} .gl-track-clip{overflow-x:auto;overflow-y:hidden;border-radius:12px;transition:filter 0.4s ease;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none} .gl-track-clip::-webkit-scrollbar{display:none} .gl-carousel.gl-js .gl-track-clip{overflow:hidden;scroll-snap-type:none} .gl-track{display:flex;gap:12px;transition:transform 0.5s cubic-bezier(0.25,0.1,0.25,1)} .gl-card{flex:0 0 300px;height:200px;border-radius:10px;overflow:hidden;position:relative;cursor:pointer;background:var(--bg-card);border:1px solid var(--border);transition:transform 0.2s var(--ease-out-expo),box-shadow 0.2s;scroll-snap-align:start;text-decoration:none;color:inherit} .gl-carousel:not(.gl-js) .gl-nav{display:none} .gl-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,0.3)} .gl-card-img{width:100%;height:100%;object-fit:cover;display:block} .gl-card-ov{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,0.8));display:flex;flex-direction:column;justify-content:flex-end;padding:14px;opacity:0;transition:opacity 0.3s} .gl-card:hover .gl-card-ov{opacity:1} .gl-card-t{font-size:14px;font-weight:600;color:#fff;margin:0} .gl-card-num{position:absolute;top:10px;right:12px;font-size:10px;font-weight:600;color:rgba(255,255,255,0.5);background:rgba(0,0,0,0.4);padding:2px 8px;border-radius:10px} .gl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text-white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;opacity:0.85;transition:all 0.2s;-webkit-appearance:none;appearance:none} .gl-nav:hover{opacity:1;background:var(--bg-hover)} .gl-prev{left:-6px} .gl-next{right:-6px} .gl-dots{display:flex;justify-content:center;gap:6px;margin-top:14px} .gl-dot{width:44px;height:44px;border-radius:50%;border:none;padding:0;background:transparent;cursor:pointer;transition:all 0.3s var(--ease-out-expo);-webkit-appearance:none;appearance:none;position:relative} .gl-dot::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:var(--border);transition:all 0.3s var(--ease-out-expo)} .gl-dot.on::after{background:var(--text-white);width:18px;border-radius:3px} .gl-dots{gap:0;margin-top:4px} /* Popup / lightbox */ .gl-popup{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0.9);z-index:50;width:92%;max-width:620px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;opacity:0;transition:transform 0.35s var(--ease-spring),opacity 0.3s ease;box-shadow:0 20px 60px rgba(0,0,0,0.5)} .gl-popup.open{display:block;opacity:1;transform:translate(-50%,-50%) scale(1)} .gl-popup-img-wrap{position:relative;overflow:hidden;cursor:grab;width:100%;height:340px;background:var(--bg-page)} .gl-popup-img-wrap:active{cursor:grabbing} .gl-popup-img{width:100%;height:100%;object-fit:contain;transform-origin:center center;transition:transform 0.15s ease} .gl-popup-body{padding:16px 20px} .gl-popup-title{font-size:17px;font-weight:600;margin:0 0 12px} .gl-popup-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .gl-popup-zbtn{font-size:13px;padding:6px 12px;border:1px solid var(--border);border-radius:20px;background:transparent;color:var(--text-dim);cursor:pointer;transition:all 0.15s;-webkit-appearance:none;appearance:none} .gl-popup-zbtn:hover{border-color:var(--text-white);color:var(--text-white)} .gl-popup-zlbl{font-size:11px;color:var(--text-faint);margin-left:auto} .gl-popup-close{position:absolute;top:10px;right:12px;z-index:10;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,0.5);border:none;color:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none} .gl-popup-close:hover{background:rgba(0,0,0,0.7)} .gl-popup-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,0.4);border:none;color:#fff;cursor:pointer;font-size:14px;z-index:10;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none} .gl-popup-nav:hover{background:rgba(0,0,0,0.6)} .gl-popup-prev{left:8px} .gl-popup-next{right:8px} .gl-popup-ctr{position:absolute;top:12px;left:14px;font-size:10px;font-weight:600;color:rgba(255,255,255,0.6);background:rgba(0,0,0,0.4);padding:3px 10px;border-radius:10px;z-index:10} @media(max-width:600px){.gl-carousel{padding:0 16px}.gl-card{flex:0 0 260px;height:180px}.gl-popup-img-wrap{height:240px}.gl-nav{width:30px;height:30px;font-size:15px}} /* ---- BEFORE/AFTER ---- */ .ba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px} @media(max-width:640px){.ba-grid{grid-template-columns:1fr}} .ba-pair{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.06)} .ba-images{display:grid;grid-template-columns:1fr 1fr;gap:2px} .ba-img-wrap{position:relative;aspect-ratio:4/3} .ba-img-wrap img{width:100%;height:100%;object-fit:cover} .ba-label{ position:absolute;bottom:8px;left:8px; padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600; font-family:'Inter',sans-serif;letter-spacing:0.5px; } .ba-label-before{background:rgba(239,68,68,0.85);color:#fff} .ba-label-after{background:rgba(34,197,94,0.85);color:#fff} .ba-title{padding:12px 16px;font-size:14px;font-weight:600;color:rgba(255,255,255,0.8)} .cta-section{ text-align:center;padding:clamp(48px,8vw,80px) clamp(20px,4vw,40px); position:relative;overflow:hidden; } .cta-section::before{ content:'';position:absolute;inset:0;opacity:0.08; background:radial-gradient(ellipse at center,currentColor 0%,transparent 70%); } .cta-title{ font-family:'Inter',sans-serif;font-weight:800; font-size:clamp(28px,4vw,44px);line-height:1.15;margin-bottom:12px; position:relative; } .cta-subtitle{ font-size:16px;color:rgba(255,255,255,0.5);max-width:480px; margin:0 auto 28px;line-height:1.6;position:relative; } .cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative} /* ---- CITY LINKS ---- */ .city-links{ max-width:1200px;margin:0 auto;padding:40px clamp(20px,4vw,40px);text-align:center; } .city-links-title{ font-size:16px;font-weight:700;margin-bottom:16px;color:rgba(255,255,255,0.6); font-family:'Inter',sans-serif; } .city-links-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .city-link{ padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500; background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06); color:rgba(255,255,255,0.55);transition:all 0.2s; } .city-link:hover{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.12)} /* ---- LOCAL COPY ---- */ .local-copy{ font-size:16px;color:rgba(255,255,255,0.55);line-height:1.75;max-width:720px; } /* ---- FOOTER ---- */ .site-footer{ background:#050506;border-top:1px solid rgba(255,255,255,0.04); padding:48px clamp(20px,4vw,40px) 24px; } .footer-inner{max-width:1200px;margin:0 auto} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:40px} @media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:24px}} @media(max-width:480px){.footer-grid{grid-template-columns:1fr}} .footer-heading{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px; color:var(--text-dim);font-family:'Inter',sans-serif;margin-bottom:14px; } .footer-link{ display:block;font-size:14px;color:var(--text-dim); padding:4px 0;transition:color 0.2s; } .footer-link:hover{color:var(--text-white)} .footer-phone{font-size:18px;font-weight:700;color:var(--text-white);display:block;margin-bottom:8px} .footer-hours{ background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06); border-radius:10px;padding:14px;margin-top:12px; } .footer-hours-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text-body);padding:2px 0} .footer-hours-row-online{border-top:1px solid rgba(255,255,255,0.08);margin-top:4px;padding-top:6px} .footer-hours-row-online span:first-child{color:color-mix(in srgb,var(--accent) 85%,transparent);font-weight:600} .footer-hours-row-online span:last-child{color:#fff;font-weight:600} .footer-bottom{ border-top:1px solid rgba(255,255,255,0.04);padding-top:20px; display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; } .footer-brand-row{display:flex;align-items:center;gap:14px;margin-bottom:16px} .footer-logo-img{width:44px;height:44px;border-radius:10px;object-fit:cover} .footer-brand-name{font-size:18px;font-weight:700;color:var(--text-white)} .footer-brand-tag{font-size:13px;color:var(--text-dim);font-style:italic} .footer-hours-label{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.12em;color:var(--accent);margin-bottom:4px} .footer-rating-row{display:flex;align-items:center;gap:8px;margin-top:12px} .footer-rating-star{color:#f59e0b;font-size:14px;letter-spacing:2px} .footer-bbb{display:inline-flex;margin-top:14px;padding:6px;border-radius:6px;background:#fff;line-height:0;transition:transform .2s var(--ease-out-expo)} .footer-bbb:hover{transform:translateY(-1px)} .footer-bbb img{width:140px;height:auto;display:block} .footer-areas-split{display:flex;flex-direction:column;gap:20px} .footer-bottom-links{display:flex;align-items:center;gap:4px} .footer-bottom-link{font-size:12px;color:var(--text-dim);text-decoration:none;transition:color 0.2s} .footer-bottom-link:hover{color:var(--text-white)} .footer-copy{font-size:12px;color:var(--text-dim)} .footer-rating{font-size:13px;color:var(--text-dim)} .footer-rating-star{color:#f59e0b} /* ---- STICKY CTA ---- */ .sticky-cta-bar{ position:fixed;bottom:0;left:0;right:0;z-index:90; display:none;background:rgba(8,8,10,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,0.08);padding:10px 16px;gap:8px; } @media(max-width:768px){.sticky-cta-bar{display:flex}} .sticky-cta{ flex:1;text-align:center;padding:14px;border-radius:10px;font-size:15px;font-weight:600; font-family:'Inter',sans-serif; appearance:none;border:0;cursor:pointer;line-height:1.2; } .cta-call{background:#e02e2e;color:#fff} .cta-text{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.12)} /* ======================================== CABINET PAGE — CLOUDFLARE-INSPIRED DESIGN ======================================== */ /* Gradient headline */ .hero-gradient-text { background: linear-gradient(135deg, var(--accent) 0%, #f0c040 50%, var(--accent) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmerGradient 3s linear infinite; } @keyframes shimmerGradient { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } .cabinet-hero .hero-content { grid-template-columns: 1fr; } /* ---- COMPARISON SECTION ---- */ .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; max-width: 900px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { .comparison-grid { grid-template-columns: 1fr; } } .comp-card { position: relative; padding: 2rem; border-radius: 12px; border: 1px dashed rgba(255,255,255,0.15); background: rgba(255,255,255,0.02); } .comp-card-negative { border-color: rgba(255,255,255,0.1); } .comp-card-positive { border-style: solid; border-width: 2px; background: color-mix(in srgb,var(--accent) 3%,transparent); } .comp-card-badge { position: absolute; top: -12px; left: 24px; padding: 4px 12px; border-radius: 100px; color: #fff; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } .comp-card-header { margin-bottom: 1.5rem; } .comp-label-mono { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); } .comp-card-title { font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin: 8px 0 4px; } .comp-price { font-family: 'Inter', sans-serif; font-size: 1.75rem; font-weight: 800; } .comp-price-negative { color: rgba(255,255,255,0.5); } .comp-points { display: flex; flex-direction: column; gap: 10px; } .comp-point { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.65); } .comp-point-negative .comp-icon { color: #ef4444; } .comp-point-positive .comp-icon { color: #22c55e; } .comp-icon { font-size: 14px; flex-shrink: 0; margin-top: 2px; } .comp-timeline { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; } .comp-timeline-value { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); } .comp-savings { text-align: center; margin-top: 1.5rem; font-size: 15px; color: rgba(255,255,255,0.5); font-style: italic; } /* ---- PROCESS TIMELINE (Wireframe Style) ---- */ .timeline-grid { display: flex; align-items: stretch; gap: 0; margin: 2rem 0; overflow-x: auto; padding-bottom: 1rem; } @media (max-width: 768px) { .timeline-grid { flex-direction: column; gap: 1rem; } .timeline-connector { transform: rotate(90deg); padding: 0.5rem 0; } } .timeline-step { display: flex; align-items: center; flex: 1; min-width: 200px; } .timeline-box { flex: 1; padding: 1.5rem; border: 1px dashed rgba(255,255,255,0.2); border-radius: 8px; background: rgba(255,255,255,0.02); position: relative; } .timeline-box::before, .timeline-box::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1px solid rgba(255,255,255,0.25); } .timeline-box::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .timeline-box::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } .timeline-box-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .timeline-day { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; } .timeline-site-badge { font-family: 'Inter', sans-serif; font-size: 9px; padding: 2px 8px; border-radius: 100px; letter-spacing: 0.5px; font-weight: 600; } .timeline-onsite { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); } .timeline-offsite { background: color-mix(in srgb,var(--accent) 15%,transparent); color: var(--accent); border: 1px solid color-mix(in srgb,var(--accent) 30%,transparent); } .timeline-step-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 8px; } .timeline-step-detail { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.5); } .timeline-connector { display: flex; align-items: center; padding: 0 8px; color: color-mix(in srgb,var(--accent) 40%,transparent); font-family: 'Inter', sans-serif; font-size: 18px; } .timeline-stats { display: flex; justify-content: center; gap: 3rem; margin-top: 2rem; padding: 1.5rem; border: 1px dashed rgba(255,255,255,0.1); border-radius: 8px; background: rgba(255,255,255,0.02); } @media (max-width: 768px) { .timeline-stats { flex-wrap: wrap; gap: 1.5rem; } } .timeline-stat { text-align: center; } .timeline-stat-value { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--accent); } .timeline-stat-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; font-family: 'Inter', sans-serif; } /* ---- MATERIALS (Spec Sheet Style) ---- */ .materials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 2rem 0; } .material-card { padding: 1.5rem; border: 1px dashed rgba(255,255,255,0.12); border-radius: 8px; background: rgba(255,255,255,0.02); position: relative; } .material-card::before, .material-card::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1px solid rgba(255,255,255,0.2); } .material-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .material-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } .material-role { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); } .material-name { font-size: 16px; font-weight: 700; color: #fff; margin: 8px 0; } .material-detail { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.5); } /* ---- COLOR PREVIEW SECTION ---- */ .color-preview-section { background: linear-gradient(180deg, color-mix(in srgb,var(--accent) 4%,transparent) 0%, transparent 100%); border-top: 1px solid color-mix(in srgb,var(--accent) 10%,transparent); border-bottom: 1px solid color-mix(in srgb,var(--accent) 10%,transparent); padding: 3rem 0; } .color-preview-inner { max-width: 800px; margin: 0 auto; text-align: center; padding: 0 1rem; } .preview-steps { display: flex; flex-direction: column; gap: 12px; margin: 2rem auto; max-width: 480px; text-align: left; } .preview-step { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.5; } .preview-step-num { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; } .preview-cta-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } /* ---- TICKER BAR ---- */ .ticker-bar { overflow: hidden; background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 12px 0; white-space: nowrap; } .ticker-track { display: inline-flex; gap: 3rem; animation: tickerScroll 30s linear infinite; } .ticker-item { display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5); letter-spacing: 0.5px; text-transform: uppercase; } .ticker-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ---- SCROLL FADE-IN ---- */ .fade-section { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .fade-section.visible { opacity: 1; transform: translateY(0); } /* ---- SERVICE AREA (HOME PAGE) ---- */ .service-area-grid{ display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px; } @media(max-width:600px){.service-area-grid{grid-template-columns:1fr;gap:24px}} .service-area-col{text-align:center} .service-area-county{ font-family:'Inter',sans-serif;font-size:18px;font-weight:700; color:rgba(255,255,255,0.8);margin-bottom:12px; } .service-area-map{max-width:900px;margin:0 auto} /* ---- FAILS TABLE UPGRADE ---- */ .fails-mistake { color: #ef4444; font-weight: 600; } .fails-solution { font-weight: 600; } /* ═══════════════════════════════════════════ REVIEW TICKER (shared across all pages) ═══════════════════════════════════════════ */ .rv-section{position:relative;width:100%;padding:5rem 0 4rem;overflow:hidden;background:linear-gradient(180deg,var(--bg-page),color-mix(in srgb,var(--accent) 3%,var(--bg-page)),var(--bg-page))} .rv-header{text-align:center;margin-bottom:2rem;padding:0 1.25rem} .rv-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px} .rv-heading{font-size:clamp(1.75rem,4vw,3rem);font-weight:800;line-height:1.15;margin:0 0 10px} .rv-subhead{font-size:1rem;color:var(--text-dim);max-width:500px;margin:0 auto;line-height:1.6} .rv-ticker-wrap{overflow:hidden;width:100%;position:relative;margin-bottom:1rem} .rv-ticker-wrap:last-of-type{margin-bottom:0} .rv-ticker{display:flex;gap:1rem;width:max-content;will-change:transform} .rv-ticker-wrap:hover .rv-ticker{animation-play-state:paused!important} @keyframes rv-scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}} @keyframes rv-scroll-right{0%{transform:translateX(-33.333%)}100%{transform:translateX(0)}} .rv-card{width:340px;min-width:340px;background:rgba(15,15,18,0.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,0.06));padding:1.375rem;transition:all .35s var(--ease-out-expo);cursor:default;overflow:hidden;flex-shrink:0} .rv-card:hover{background:rgba(20,20,25,0.7);border-color:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,0.1));transform:translateY(-6px) scale(1.02);box-shadow:0 0 40px color-mix(in srgb,var(--accent) 6%,transparent),0 20px 50px rgba(0,0,0,.4)} .rv-card__head{display:flex;align-items:center;gap:.75rem;margin-bottom:.875rem} .rv-card__avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent) 5%,transparent));border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:rgba(255,255,255,0.6);flex-shrink:0} .rv-card__info{flex:1;min-width:0} .rv-card__name{font-size:14px;font-weight:600;margin:0 0 2px} .rv-card__stars{display:flex;gap:2px} .rv-card__google{margin-left:auto;flex-shrink:0} .rv-card__body{font-size:13.5px;color:var(--text-body);line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .rv-cta{text-align:center;margin-top:2rem;padding:0 1.25rem} .rv-cta-link{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.75rem;border-radius:10px;background:color-mix(in srgb,#fff 5%,transparent);border:1px solid color-mix(in srgb,#fff 10%,transparent);color:var(--text-dim);font-size:14px;font-weight:500;text-decoration:none;transition:all .3s ease} .rv-cta-link:hover{background:color-mix(in srgb,#fff 8%,transparent);color:var(--text-white);border-color:color-mix(in srgb,#fff 15%,transparent)} @media(max-width:600px){.rv-section{padding:3.5rem 0 3rem}.rv-card{width:290px;min-width:290px;padding:1.125rem}} /* ═══════════════════════════════════════════ FAQ CAROUSEL (shared across all pages) ═══════════════════════════════════════════ */ .fq-section{position:relative;width:100%;padding:5rem 0 4rem;overflow:hidden;background:linear-gradient(180deg,var(--bg-page),color-mix(in srgb,var(--accent) 3%,var(--bg-page)),var(--bg-page))} .fq-header{text-align:center;margin-bottom:2rem;padding:0 1.25rem} .fq-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px} .fq-heading{font-size:clamp(1.75rem,4vw,3rem);font-weight:800;line-height:1.15;margin:0} .fq-scroll-wrap{position:relative} .fq-fade{position:absolute;top:0;bottom:0;width:60px;z-index:5;pointer-events:none} .fq-fade--left{left:0;background:linear-gradient(to right,var(--bg-page),transparent)} .fq-fade--right{right:0;background:linear-gradient(to left,var(--bg-page),transparent)} .fq-scroll{display:flex;gap:16px;padding:8px clamp(20px,4vw,60px) 20px;overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch} .fq-scroll::-webkit-scrollbar{display:none} .fq-card{position:relative;min-width:280px;max-width:280px;width:280px;background:rgba(20,20,22,0.5);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,0.06));padding:22px 20px;cursor:pointer;transition:all .5s var(--ease-out-expo);flex-shrink:0;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.2);z-index:1} .fq-card:hover{border-color:color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,0.1));box-shadow:0 0 40px color-mix(in srgb,var(--accent) 6%,transparent),0 4px 20px rgba(0,0,0,.2)} .fq-card.expanded{min-width:min(520px,90vw);max-width:520px;width:min(520px,90vw);padding:28px;cursor:default;box-shadow:0 20px 60px rgba(0,0,0,.5);z-index:20} .fq-card.dimmed{opacity:.25;transform:scale(.96);filter:blur(2px)} .fq-card__q{font-size:15px;font-weight:700;color:#fff;line-height:1.3;margin:0 32px 8px 0;transition:font-size .4s var(--ease-out-expo)} .fq-card.expanded .fq-card__q{font-size:20px} .fq-card__teaser{font-size:13px;color:var(--text-dim);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .fq-card.expanded .fq-card__teaser{display:none} .fq-card__expanded{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease-out-expo),opacity .4s ease .1s} .fq-card.expanded .fq-card__expanded{max-height:500px;opacity:1} .fq-card__answer{font-size:15px;color:var(--text-body);line-height:1.75;margin:0 0 16px} .fq-card__cta{display:flex;gap:10px;align-items:center} .fq-card__toggle{position:absolute;top:18px;right:16px;width:28px;height:28px;border-radius:50%;border:1px solid;font-size:18px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;line-height:1;background:none} .fq-card.expanded .fq-card__toggle{transform:rotate(45deg)} .fq-arrows{display:flex;justify-content:center;gap:12px;margin-top:24px} .fq-arrow{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,#fff 6%,transparent);border:1px solid color-mix(in srgb,#fff 10%,transparent);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;-webkit-appearance:none;appearance:none;color:rgba(255,255,255,.7)} .fq-arrow:hover{background:color-mix(in srgb,#fff 10%,transparent);color:#fff} @media(max-width:600px){.fq-card{min-width:260px;max-width:260px;width:260px}.fq-card.expanded{min-width:min(320px,90vw);max-width:min(320px,90vw)}} /* ═══════════════════════════════════════════ SERVICE AREA MAP (shared across all pages) ═══════════════════════════════════════════ */ .sa-section{position:relative;width:100%;background:#0a0a0a;background-image:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 70%);padding:80px 0 90px;overflow:hidden} .sa-header{text-align:center;margin-bottom:20px;padding:0 20px} .sa-header-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:rgba(255,90,90,0.9);font-family:'Inter',sans-serif;margin-bottom:12px} .sa-header h2{font-size:clamp(28px,4vw,48px);font-weight:800;color:#fff;font-family:'Inter',sans-serif;line-height:1.15;margin:0 0 12px} .sa-header p{font-size:16px;color:rgba(255,255,255,0.45);max-width:500px;margin:0 auto;line-height:1.6} .sa-stats{display:flex;justify-content:center;gap:clamp(16px,3vw,40px);padding:16px 20px 36px;flex-wrap:wrap} .sa-stat{text-align:center;padding:12px 20px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04)} .sa-stat-val{font-size:24px;font-weight:800;font-family:'Inter',sans-serif;line-height:1} .sa-stat-label{font-size:11px;color:rgba(255,255,255,0.55);margin-top:4px;font-family:'Inter',sans-serif;letter-spacing:.3px} .sa-layout{display:flex;gap:20px;padding:0 clamp(16px,3vw,48px);align-items:stretch;max-width:1200px;margin:0 auto} .sa-map-wrap{flex:1 1 65%;position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);box-shadow:0 20px 60px rgba(0,0,0,.3);background:#0d100a} .sa-map-svg{width:100%;display:block} .sa-dot{cursor:pointer;text-decoration:none;outline:none} .sa-dot .sa-dot-glow{transition:opacity .2s ease} .sa-dot .sa-dot-core{transition:opacity .2s ease} .sa-dot .sa-dot-text{pointer-events:none;opacity:.7;transition:opacity .2s ease} .sa-dot:hover .sa-dot-glow,.sa-dot.sa-dot-hl .sa-dot-glow,.sa-dot:focus-visible .sa-dot-glow{opacity:.45 !important} .sa-dot:hover .sa-dot-text,.sa-dot.sa-dot-hl .sa-dot-text,.sa-dot:focus-visible .sa-dot-text{opacity:1;fill:#f0eeeb !important} .sa-dot-hq .sa-dot-text{opacity:1 !important;fill:var(--accent) !important} .sa-tt{position:absolute;background:rgba(15,18,12,.95);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 14px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:10;min-width:130px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .sa-tt.sa-tt-on{opacity:1} .sa-tt-city{font-size:13px;font-weight:600;color:#f0eeeb;margin-bottom:2px} .sa-tt-county{font-size:11px;color:rgba(255,255,255,.45)} .sa-tt-drive{font-size:11px;color:var(--accent);margin-top:4px} .sa-sidebar{flex:0 0 280px;display:flex;flex-direction:column;gap:24px} .sa-sidebar-cities{background:rgba(15,15,18,0.8);backdrop-filter:blur(16px);border-radius:16px;border:1px solid rgba(255,255,255,0.06);padding:20px;flex:1;display:flex;flex-direction:column;gap:20px} .sa-sidebar-divider{height:1px;background:rgba(255,255,255,0.06)} .sa-city-list-header{display:flex;align-items:center;gap:8px;margin-bottom:12px} .sa-city-list-dot{width:8px;height:8px;border-radius:50%} .sa-city-list-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;font-family:'Inter',sans-serif} .sa-city-list-count{font-size:10px;color:rgba(255,255,255,0.55);font-family:'Inter',sans-serif} .sa-city-buttons{display:flex;flex-wrap:wrap;gap:6px} .sa-city-btn{padding:6px 14px;border-radius:20px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);font-size:12px;font-weight:400;font-family:'Inter',sans-serif;text-decoration:none;transition:all .25s ease;display:inline-flex;align-items:center;gap:5px} .sa-city-btn:hover,.sa-city-btn.sa-pill-hl{background:rgba(255,255,255,0.06);color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.12)} .sa-city-btn-hq{border-color:color-mix(in srgb,var(--accent) 25%,transparent);color:color-mix(in srgb,var(--accent) 80%,transparent)} .sa-city-btn-hq:hover,.sa-city-btn-hq.sa-pill-hl{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)} .sa-cta-card{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,transparent),color-mix(in srgb,var(--accent) 2%,transparent));border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);padding:20px;text-align:center} .sa-cta-card h3{font-size:15px;font-weight:700;color:#fff;margin:0 0 6px} .sa-cta-card p{font-size:12px;color:rgba(255,255,255,0.45);margin:0 0 14px;line-height:1.5} .sa-cta-card a{display:block;padding:10px;border-radius:8px;font-size:13px;font-family:'Inter',sans-serif;text-decoration:none} .sa-cta-card .sa-btn-primary{background:var(--accent);color:#0a0a0a;font-weight:700;margin-bottom:8px} .sa-cta-card .sa-btn-secondary{background:transparent;color:rgba(255,255,255,0.5);font-weight:500;border:1px solid rgba(255,255,255,0.08)} .sa-bottom-note{text-align:center;margin-top:36px;padding:0 20px} .sa-bottom-note p{font-size:13px;color:rgba(255,255,255,0.3);margin:0} .sa-bottom-note a{color:var(--accent);text-decoration:none} @media(max-width:800px){.sa-layout{flex-direction:column}.sa-sidebar{flex:1 1 100%}} /* ---- Header & Navigation ---- */ .pd-header{ position:fixed;top:0;left:0;right:0;z-index:900; padding:0 clamp(12px,3vw,28px);height:62px; background:rgba(8,8,10,0.4); backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4); border-bottom:1px solid rgba(255,255,255,0.02); transition:all 0.35s cubic-bezier(0.16,1,0.3,1); display:flex;align-items:center;justify-content:space-between;gap:16px; } .pd-header.pd-scrolled{ height:54px;background:rgba(8,8,10,0.92); border-bottom-color:rgba(255,255,255,0.07); } .pd-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0} .pd-logo img{width:34px;height:34px;border-radius:9px;object-fit:cover} .pd-logo span{font-size:15px;font-weight:700;color:#fff;font-family:'Inter',sans-serif} .pd-desktop-nav{flex:1;display:flex;justify-content:center} .pd-nav{display:flex;align-items:center;gap:2px} .pd-nav-link{ padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500; color:var(--text-white);font-family:'Inter',sans-serif; text-decoration:none;transition:all 0.18s ease;white-space:nowrap; } .pd-nav-link:hover{color:var(--text-white);background:rgba(255,255,255,0.05)} .pd-nav-dropdown{position:relative} .pd-nav-dropdown-btn{ display:flex;align-items:center;gap:5px;padding:8px 12px;border-radius:8px; background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500; color:var(--text-white);font-family:'Inter',sans-serif; transition:all 0.18s ease;white-space:nowrap; } .pd-nav-dropdown-btn:hover{color:var(--text-white)} .pd-nav-dropdown.active .pd-nav-dropdown-btn{color:#fff;background:rgba(255,255,255,0.06)} .pd-nav-dropdown-btn svg{opacity:0.5;transition:transform 0.2s} .pd-nav-dropdown.active .pd-nav-dropdown-btn svg{transform:rotate(180deg)} .pd-mega{ position:absolute;top:calc(100% + 12px);left:50%; transform:translateX(-50%) translateY(-8px); background:rgba(10,10,12,0.97); backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px); border-radius:16px;border:1px solid rgba(255,255,255,0.08); padding:20px;box-shadow:0 24px 64px rgba(0,0,0,0.6); opacity:0;pointer-events:none; transition:all 0.25s cubic-bezier(0.16,1,0.3,1);z-index:200; } .pd-mega.active{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)} .pd-mega-title{ font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px; color:rgba(255,255,255,0.25);font-family:'Inter',sans-serif; margin-bottom:14px;padding-left:4px; } .pd-mega-services{width:540px} .pd-mega-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px} .pd-svc-item{ display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px; text-decoration:none;transition:background 0.18s ease; } .pd-svc-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)} .pd-svc-name{font-size:14px;font-weight:600;color:var(--text-white);font-family:'Inter',sans-serif} .pd-svc-desc{font-size:12px;color:var(--text-dim);font-family:'Inter',sans-serif} .pd-mega-footer{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.07)} .pd-mega-footer a{ display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500; color:var(--accent);font-family:'Inter',sans-serif;font-style:italic;text-decoration:none; } .pd-mega-cities{width:520px;display:flex;gap:20px} .pd-city-group{flex:1} .pd-city-group-label{ font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px; color:var(--text-faint);font-family:'Inter',sans-serif; margin-bottom:10px;padding-left:12px; } .pd-city-item{ display:block;padding:7px 12px;border-radius:8px;font-size:13px;font-weight:500; color:var(--text-body);font-family:'Inter',sans-serif; text-decoration:none;transition:all 0.15s ease; } .pd-city-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text-white)} .pd-icon-group{display:flex;align-items:center;gap:6px;flex-shrink:0} .pd-icon-btn{ width:38px;height:38px;border-radius:10px; background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06); display:flex;align-items:center;justify-content:center; cursor:pointer;text-decoration:none;color:var(--text-dim); transition:all 0.2s ease;position:relative; } .pd-icon-btn:hover{background:rgba(255,255,255,0.08);color:var(--text-white)} .pd-hours-wrap{position:relative} .pd-hours-popup{ position:absolute;top:calc(100% + 10px);right:0; background:rgba(12,12,15,0.96); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); border-radius:14px;border:1px solid rgba(255,255,255,0.08); padding:16px 20px;min-width:230px;box-shadow:0 16px 48px rgba(0,0,0,0.5); opacity:0;transform:translateY(-6px);pointer-events:none; transition:all 0.25s cubic-bezier(0.16,1,0.3,1);z-index:100; } .pd-hours-popup.active{opacity:1;transform:translateY(0);pointer-events:auto} .pd-hours-label{ font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px; color:rgba(255,255,255,0.3);font-family:'Inter',sans-serif;margin-bottom:10px; } .pd-hours-row{ display:flex;justify-content:space-between;gap:24px; padding:5px 0;font-size:13px;font-family:'Inter',sans-serif; } .pd-hours-day{color:rgba(255,255,255,0.5)} .pd-hours-time{color:rgba(255,255,255,0.8);font-weight:500} .pd-hours-row-online{border-top:1px solid rgba(255,255,255,0.08);margin-top:4px;padding-top:9px} .pd-hours-row-online .pd-hours-day{color:color-mix(in srgb,var(--accent) 85%,transparent);font-weight:600} .pd-hours-row-online .pd-hours-time{color:#fff;font-weight:600} .pd-mobile-menu-btn{display:none} .pd-mobile-overlay{ position:fixed;inset:0;z-index:998; background:rgba(0,0,0,0.5);backdrop-filter:blur(4px); opacity:0;pointer-events:none;transition:opacity 0.3s ease; } .pd-mobile-overlay.active{opacity:1;pointer-events:auto} .pd-mobile-drawer{ position:fixed;top:0;right:0;bottom:0;z-index:999; width:min(300px,82vw); background:rgba(10,10,12,0.98);backdrop-filter:blur(30px); border-left:1px solid rgba(255,255,255,0.06); transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); display:flex;flex-direction:column;overflow-y:auto; } .pd-mobile-drawer.active{transform:translateX(0)} .pd-mobile-close-row{display:flex;justify-content:flex-end;padding:16px 18px 8px} .pd-mobile-close{ width:36px;height:36px;border-radius:10px; background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06); color:#fff;font-size:20px;cursor:pointer; display:flex;align-items:center;justify-content:center; } .pd-mobile-items{padding:8px 14px;flex:1} .pd-mob-section-btn{ display:flex;align-items:center;justify-content:space-between; width:100%;padding:14px 10px;border-radius:8px; background:transparent;border:none;color:#fff; font-size:16px;font-weight:500;font-family:'Inter',sans-serif; cursor:pointer;transition:all 0.2s; } .pd-mob-section-btn.active{background:rgba(255,255,255,0.04);color:var(--accent)} .pd-mob-chevron{font-size:12px;opacity:0.5;transition:transform 0.25s} .pd-mob-section-btn.active .pd-mob-chevron{transform:rotate(180deg)} .pd-mob-section-content{ max-height:0;overflow:hidden; transition:max-height 0.35s cubic-bezier(0.16,1,0.3,1);padding-left:8px; } .pd-mob-section-content.active{max-height:800px} .pd-mob-county-label{ font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px; color:var(--text-faint);font-family:'Inter',sans-serif; padding:12px 14px 4px; } .pd-mob-link{ display:block;padding:11px 14px;font-size:15px; color:rgba(255,255,255,0.6);font-family:'Inter',sans-serif;text-decoration:none; } .pd-mob-link-all{ display:block;padding:11px 14px;font-size:15px;color:var(--accent); font-style:italic;font-family:'Inter',sans-serif;text-decoration:none; } .pd-mob-nav-link{ display:block;padding:14px 10px;font-size:16px;font-weight:500; color:#fff;font-family:'Inter',sans-serif;text-decoration:none; } .pd-mobile-ctas{ padding:16px 18px 24px;border-top:1px solid rgba(255,255,255,0.06); display:flex;flex-direction:column;gap:8px; position:sticky;bottom:0;background:rgba(10,10,12,0.98); backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px); } .pd-mob-cta{ display:flex;align-items:center;justify-content:center;gap:8px; padding:12px;border-radius:10px;font-size:14px; font-family:'Inter',sans-serif;text-decoration:none; } .pd-mob-cta-call{background:#e02e2e;color:#fff;font-weight:600;border:none} .pd-mob-cta-text{ background:transparent;color:rgba(255,255,255,0.6); font-weight:500;border:1px solid rgba(255,255,255,0.1); } @media(max-width:900px){ .pd-desktop-nav{display:none!important} .pd-mobile-menu-btn{display:flex!important} } @media(max-width:900px){ .pd-hours-popup{right:auto;left:50%;transform:translateX(-50%) translateY(-6px)} .pd-hours-popup.active{transform:translateX(-50%) translateY(0)} } @media(min-width:901px){ .pd-mobile-menu-btn{display:none!important} }