/* ========================================================= Tri-State Countertop Repair — Elegant Minimal Theme Cool off-white base · deep teal-slate ink · brand teal accent (#20A0A0) Serif accents (Playfair Display) · thin hairlines · generous whitespace NOTE: legacy variable names (--c-navy = ink, --c-gold = teal accent, --c-light = base) are kept because page markup references them inline. ========================================================= */ :root{ /* Brand palette — built around the logo teal (#20A0A0). Deep teal-slate "ink" + brand teal accent + cool off-white. Legacy var names kept (--c-navy = ink, --c-gold = accent). */ --c-dark:#082322; --c-navy:#0f3331; /* primary "ink" — headings, dark buttons, footer */ --c-navy-2:#1b4b48; --c-gold:#0f8a8a; /* brand teal accent (links, buttons, highlights) */ --c-gold-2:#23a6a6; /* lighter teal for highlights on dark */ --c-light:#f1f6f5; /* cool off-white section base */ --c-white:#fff; --c-gray:#7c8c8a; --c-text:#28332f; /* body copy — cool charcoal */ --c-muted:#5b6a67; /* secondary text */ --c-border:#dce7e4; /* cool hairline */ --c-line:rgba(255,255,255,.14); --shadow-lg:0 28px 64px -28px rgba(8,35,34,.32); --shadow-md:0 16px 40px -22px rgba(8,35,34,.22); --shadow-sm:0 1px 2px rgba(8,35,34,.06); --r-sm:6px; --r-md:10px; --r-lg:16px; --t:cubic-bezier(.4,0,.2,1); } *{box-sizing:border-box;margin:0;padding:0} /* overflow-x lives on , not — overflow-x on body (without overflow-y) forces an implicit scroll box on body that breaks position:sticky for anything nested more than shallowly inside it (e.g. the news sidebar), while shallow elements like the navbar still appeared to work fine. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} body{ font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-size:18px;line-height:1.75;color:var(--c-text);background:var(--c-white); -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:var(--c-navy);text-decoration:none;transition:color .2s var(--t)} a:hover{color:var(--c-gold)} h1,h2,h3,h4,h5{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.18;color:var(--c-navy);letter-spacing:-.01em} h1{font-size:clamp(2.1rem,4.6vw,3.6rem)} h2{font-size:clamp(1.7rem,3.2vw,2.5rem)} h3{font-size:clamp(1.25rem,2.1vw,1.7rem)} p{color:var(--c-text)} strong{color:var(--c-navy)} .container{max-width:1240px;margin:0 auto;padding:0 28px} /* Refined eyebrow label used across pages */ .eyebrow{ display:inline-block;color:var(--c-gold);font-size:12px;font-weight:600; letter-spacing:3px;text-transform:uppercase; } /* ========================================================= Top bar ========================================================= */ .topbar{ background:var(--c-navy);color:rgba(255,255,255,.78); font-size:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06); } .topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px} .topbar a{color:rgba(255,255,255,.85);font-weight:500} .topbar a:hover{color:var(--c-gold-2)} .topbar a.tb-phone{font-size:18px;font-weight:600;letter-spacing:.5px;color:var(--c-gold-2);font-family:'Playfair Display',serif} .topbar a.tb-phone:hover{color:#fff} .topbar .tb-right{display:flex;gap:18px;align-items:center;font-size:13px;letter-spacing:.3px} /* ========================================================= Navbar ========================================================= */ .navbar{ position:sticky;top:0;z-index:100;background:var(--c-navy); border-bottom:1px solid rgba(255,255,255,.08); transition:box-shadow .3s var(--t),background .3s var(--t); } .navbar.scrolled{background:var(--c-dark);box-shadow:0 4px 22px -8px rgba(0,0,0,.5)} .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:14px} .brand img{height:70px;width:auto;transition:height .3s var(--t)} .navbar.scrolled .brand img{height:58px} .nav-menu{display:flex;gap:1px;list-style:none;align-items:center} .nav-menu>li{position:relative} .nav-menu>li>a{ display:block;padding:10px 11px;color:rgba(255,255,255,.82);font-weight:500;font-size:13px; letter-spacing:.4px;text-transform:uppercase;border-radius:var(--r-sm);position:relative;white-space:nowrap; } .nav-menu>li>a::after{ content:"";position:absolute;left:11px;right:11px;bottom:6px;height:1px; background:var(--c-gold-2);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--t); } .nav-menu>li>a:hover{color:#fff} .nav-menu>li>a:hover::after{transform:scaleX(1)} .nav-menu .has-sub>a::after{content:none} .nav-menu .has-sub>a{padding-right:18px} .submenu-toggle{display:none} .nav-menu .submenu{ position:absolute;top:100%;left:0;background:#fff;min-width:262px; box-shadow:var(--shadow-lg);border:1px solid var(--c-border);border-radius:var(--r-md);padding:8px; opacity:0;visibility:hidden;transform:translateY(8px);transition:all .25s var(--t); list-style:none; } /* Long dropdowns (e.g. Areas Served) scroll instead of overflowing the viewport */ .nav-menu .submenu.submenu-scroll{max-height:min(72vh,580px);overflow-y:auto} .nav-menu .has-sub:hover>.submenu{opacity:1;visibility:visible;transform:translateY(0)} .submenu a{display:block;padding:10px 14px;color:var(--c-text);font-size:14px;border-radius:var(--r-sm);font-weight:500} .submenu a:hover{background:var(--c-light);color:var(--c-gold)} .submenu a.submenu-highlight{font-weight:700} @media(min-width:981px){.submenu a.submenu-highlight{background:#f7f6f2}} /* Second-level flyout submenu (e.g. Quartz sub-services) */ .nav-menu .submenu .has-flyout{position:relative} .nav-menu .submenu .has-flyout>a{display:flex;align-items:center;justify-content:space-between;gap:10px} .nav-menu .submenu .has-flyout>a::after{content:"\203A";font-size:17px;line-height:1;opacity:.55} .nav-menu .flyout{ position:absolute;top:-9px;left:100%;background:#fff;min-width:252px; box-shadow:var(--shadow-lg);border:1px solid var(--c-border);border-radius:var(--r-md);padding:8px; opacity:0;visibility:hidden;transform:translateX(8px);transition:all .25s var(--t); list-style:none;z-index:6;max-height:min(80vh,600px);overflow-y:auto; } .nav-menu .submenu .has-flyout:hover>.flyout{opacity:1;visibility:visible;transform:translateX(0)} .flyout a{display:block;padding:10px 14px;color:var(--c-text);font-size:14px;border-radius:var(--r-sm);font-weight:500} .flyout a:hover{background:var(--c-light);color:var(--c-gold)} .nav-cta{ background:var(--c-gold);color:#fff;padding:12px 22px;border-radius:var(--r-sm); font-weight:600;font-size:13px;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap; transition:all .3s var(--t); } .nav-cta:hover{background:var(--c-gold-2);color:var(--c-navy);transform:translateY(-1px)} .nav-phone{ display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:600;color:#fff; padding:8px 16px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.3);margin-right:8px; transition:all .25s var(--t);font-family:'Playfair Display',serif; } .nav-phone:hover{border-color:var(--c-gold-2);color:var(--c-gold-2)} .burger{display:none;background:none;border:0;cursor:pointer;padding:8px} .burger span{display:block;width:24px;height:1.5px;background:#fff;margin:6px 0;transition:.3s} /* ========================================================= Buttons ========================================================= */ .btn{ display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border-radius:var(--r-sm); font-weight:600;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer; border:1px solid transparent;transition:all .25s var(--t);text-decoration:none; } .btn-xl{padding:18px 40px;font-size:14px} .btn-gold{background:var(--c-gold);color:#fff;border-color:var(--c-gold)} .btn-gold:hover{background:#0c7373;border-color:#0c7373;color:#fff;transform:translateY(-2px)} .btn-navy{background:var(--c-navy);color:#fff;border-color:var(--c-navy)} .btn-navy:hover{background:var(--c-gold);border-color:var(--c-gold);color:#fff;transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--c-navy);border-color:var(--c-border)} .btn-ghost:hover{border-color:var(--c-navy);background:var(--c-navy);color:#fff} .btn-phone-big{ background:transparent;color:var(--c-navy);border:1px solid var(--c-navy); font-size:16px;padding:14px 32px;letter-spacing:.6px;font-family:'Playfair Display',serif;text-transform:none; } .btn-phone-big:hover{background:var(--c-navy);color:#fff;transform:translateY(-2px)} /* ========================================================= Hero (light, editorial) ========================================================= */ .hero{position:relative;background:var(--c-light);color:var(--c-text);overflow:hidden;border-bottom:1px solid var(--c-border)} .hero::before{ content:"";position:absolute;top:-160px;right:-120px;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(15,138,138,.10),transparent 68%);pointer-events:none; } .hero-inner{position:relative;z-index:2;max-width:820px;padding:108px 0 86px} .hero .eyebrow{margin-bottom:22px} .hero h1{color:var(--c-navy);margin-bottom:24px;font-weight:600} .hero h1 .accent{color:var(--c-gold);font-style:italic} .hero p{font-size:1.15rem;color:var(--c-muted);max-width:640px;margin-bottom:34px;line-height:1.7} .hero-cta{display:flex;gap:14px;flex-wrap:wrap} /* Trust strip — thin bordered band under hero */ .trust-strip{ position:relative;z-index:3;background:#fff;border-top:1px solid var(--c-border);padding:26px 0; } .trust-strip .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;color:var(--c-text)} .trust-item{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--c-muted);letter-spacing:.3px} .trust-item strong{color:var(--c-navy);font-size:1.45rem;font-family:'Playfair Display',serif;font-weight:600} .trust-item strong::after{content:"";display:inline-block} /* ========================================================= Sections ========================================================= */ section{padding:104px 0} .section-head{text-align:center;max-width:760px;margin:0 auto 60px} .section-head .eyebrow{margin-bottom:16px} .section-head h2{margin-bottom:16px} .section-head p{color:var(--c-muted);font-size:1.05rem} /* Phone strip */ .phone-strip{background:var(--c-navy);color:#fff;text-align:center;padding:48px 0} .phone-strip .label{display:block;font-size:12px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:4px;margin-bottom:10px} .phone-strip a{color:#fff;font-size:2.6rem;font-weight:600;font-family:'Playfair Display',serif;letter-spacing:1px} .phone-strip a:hover{color:var(--c-gold-2)} @media(max-width:560px){.phone-strip a{font-size:1.9rem}} /* CTA banner — restrained ink panel */ .cta-banner{background:var(--c-navy);color:#fff;text-align:center;padding:96px 0;position:relative;overflow:hidden} .cta-banner::before{ content:"";position:absolute;top:-140px;left:50%;transform:translateX(-50%); width:600px;height:300px;background:radial-gradient(circle,rgba(15,138,138,.18),transparent 70%); } .cta-banner *{position:relative;z-index:1} .cta-banner h2{color:#fff;margin-bottom:18px;font-weight:600} .cta-banner p{color:rgba(255,255,255,.7) !important} .cta-banner .btn-gold{background:var(--c-gold);border-color:var(--c-gold);color:#fff} .cta-banner .btn-gold:hover{background:var(--c-gold-2);border-color:var(--c-gold-2);color:var(--c-navy)} .cta-banner .btn-phone-big{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)} .cta-banner .btn-phone-big:hover{background:#fff;color:var(--c-navy);border-color:#fff} .cta-banner .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:transparent} .cta-banner .btn-ghost:hover{background:#fff;color:var(--c-navy);border-color:#fff} /* ========================================================= Service cards ========================================================= */ .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px} .service-card{ position:relative;background:#fff;border-radius:var(--r-md);overflow:hidden; border:1px solid var(--c-border);box-shadow:var(--shadow-sm);transition:all .35s var(--t); } .service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#d8cfbf} .service-card .sc-img{position:relative;height:230px;overflow:hidden} .service-card .sc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--t)} .service-card:hover .sc-img img{transform:scale(1.05)} .service-card .sc-body{padding:30px 30px 32px} .service-card h3{margin-bottom:12px;font-size:1.35rem} .service-card p{color:var(--c-muted);margin-bottom:18px;font-size:.96rem} .service-card .sc-link{color:var(--c-gold);font-weight:600;font-size:12px;letter-spacing:1.4px;text-transform:uppercase} .service-card .sc-link::after{content:" →";transition:transform .3s var(--t);display:inline-block} .service-card:hover .sc-link::after{transform:translateX(4px)} /* ========================================================= About split ========================================================= */ .about-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .about-split img{border-radius:var(--r-md);box-shadow:var(--shadow-md)} .about-split ul{list-style:none;margin:26px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px} .about-split ul li{padding-left:26px;position:relative;font-size:.96rem;color:var(--c-text)} .about-split ul li::before{content:"—";position:absolute;left:0;top:0;color:var(--c-gold);font-weight:700} /* ========================================================= Stats ========================================================= */ .stats{background:var(--c-light);padding:80px 0;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)} .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:30px;text-align:center} .stat .num{font-family:'Playfair Display',serif;font-size:3rem;color:var(--c-navy);font-weight:600;line-height:1} .stat .num span{color:var(--c-gold)} .stat .lbl{margin-top:10px;text-transform:uppercase;letter-spacing:1.6px;font-size:11px;color:var(--c-muted)} /* ========================================================= Testimonials ========================================================= */ .testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px} .testimonial{ background:#fff;border-radius:var(--r-md);padding:34px;position:relative; border:1px solid var(--c-border);transition:all .3s var(--t); } .testimonial:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .testimonial::before{ content:"\201C";position:absolute;top:14px;right:26px;font-size:4.5rem; color:var(--c-gold);opacity:.16;font-family:Georgia,serif;line-height:1; } .testimonial p{font-style:italic;color:var(--c-text);margin-bottom:18px} .testimonial .stars{color:var(--c-gold);margin-bottom:12px;letter-spacing:2px;font-size:.9rem} .testimonial .author{font-weight:600;color:var(--c-navy)} .testimonial .author small{display:block;color:var(--c-muted);font-weight:400;font-size:.85rem;margin-top:3px} /* ========================================================= Contact form ========================================================= */ .contact-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start} .contact-info{background:var(--c-navy);color:#fff;padding:44px;border-radius:var(--r-md);position:relative;overflow:hidden} .contact-info::before{ content:"";position:absolute;top:-50%;right:-30%;width:300px;height:300px; background:radial-gradient(circle,rgba(15,138,138,.20),transparent 70%); } .contact-info *{position:relative;z-index:1} .contact-info h3{color:#fff;margin-bottom:24px} .contact-info .ci-item{display:flex;gap:16px;margin-bottom:24px;align-items:flex-start} .contact-info .ci-icon{width:42px;height:42px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--c-gold-2)} .contact-info .ci-item strong{display:block;color:var(--c-gold-2);font-size:11px;text-transform:uppercase;letter-spacing:1.6px;margin-bottom:5px;font-weight:600} .contact-info .ci-item a{color:#fff} .contact-info .ci-item a:hover{color:var(--c-gold-2)} .form-card{background:#fff;padding:42px;border-radius:var(--r-md);box-shadow:var(--shadow-md);border:1px solid var(--c-border)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .form-field{margin-bottom:16px} .form-field label{display:block;font-size:12px;font-weight:600;color:var(--c-navy);margin-bottom:7px;letter-spacing:.6px;text-transform:uppercase} .form-field input,.form-field select,.form-field textarea{ width:100%;padding:13px 16px;border:1px solid var(--c-border);border-radius:var(--r-sm); font-family:inherit;font-size:15px;transition:all .25s var(--t);background:#fdfcfa;color:var(--c-text); } .form-field input:focus,.form-field select:focus,.form-field textarea:focus{ outline:none;border-color:var(--c-gold);background:#fff;box-shadow:0 0 0 3px rgba(15,138,138,.12); } .form-field textarea{resize:vertical;min-height:120px} .honeypot{position:absolute;left:-9999px;opacity:0} .form-msg{padding:14px;border-radius:var(--r-sm);margin-bottom:16px;display:none} .form-msg.ok{background:#edf6ef;color:#2c6b43;display:block} .form-msg.err{background:#fbecea;color:#9a2c1c;display:block} /* ========================================================= Footer ========================================================= */ footer{background:#191813;color:#9b958a;padding:84px 0 0;border-top:3px solid var(--c-gold)} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;margin-bottom:50px} footer h4{color:#fff;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.8px;margin-bottom:22px} footer ul{list-style:none} footer ul li{margin-bottom:11px} footer a{color:#9b958a;font-size:14px} footer a:hover{color:var(--c-gold-2)} .footer-brand p{color:#8f897e} .footer-logo-box{display:inline-block;margin-bottom:20px} .footer-logo-box img{height:84px;width:auto;display:block} .footer-trust{ display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center; margin-top:40px;padding:26px 0;border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); } .ft-contact{display:flex;flex-wrap:wrap;gap:14px 30px;color:#b9b3a7;font-size:14px} .ft-contact a{color:var(--c-gold-2);font-weight:500} .ft-c-item{display:flex;align-items:center;gap:6px} .ft-badges{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap} .ft-badge{ display:flex;flex-direction:column;align-items:center;gap:5px; background:#fff;padding:14px 22px;border-radius:var(--r-md);text-decoration:none; min-width:130px;transition:transform .25s var(--t); } .ft-badge:hover{transform:translateY(-3px)} .ft-badge .badge-rate{font-size:12px;color:#6f6a60;font-weight:600;letter-spacing:.3px} @media(max-width:780px){ .footer-trust{grid-template-columns:1fr} .ft-badges{justify-content:flex-start} } .footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:24px 0;text-align:center;font-size:13px;color:#7d776c} .footer-bottom a{color:#9b958a} .social{display:flex;gap:10px;margin-top:16px} .social a{ width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px; } .social a:hover{background:var(--c-gold);border-color:var(--c-gold);color:#fff;transform:translateY(-2px)} /* legacy unused widget */ .ai-chat{display:none !important} /* ========================================================= Services Spotlight — now a light, airy band ========================================================= */ .services-spotlight{background:var(--c-light);color:var(--c-text);padding:104px 0;position:relative;overflow:hidden;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)} .services-spotlight .container{position:relative;z-index:1} .ssh-head{margin-bottom:50px;max-width:880px} .ssh-eyebrow{ color:var(--c-gold) !important;font-weight:600;letter-spacing:3px;text-transform:uppercase; font-size:12px;margin-bottom:16px;display:inline-block;background:transparent; padding:0;border:0;border-radius:0; } .ssh-phone{font-size:1.05rem;color:var(--c-muted);margin-bottom:18px;font-weight:400} .ssh-phone a{color:var(--c-gold);font-weight:600;font-size:1.4rem;font-family:'Playfair Display',serif;letter-spacing:.5px;margin-left:6px} .ssh-phone a:hover{color:var(--c-navy)} .ssh-head h2{color:var(--c-navy);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.2} .ssh-head h2 .gold{color:var(--c-gold);font-style:italic} .ssh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .ssh-card{ background:#fff;border:1px solid var(--c-border); padding:30px 28px 26px;border-radius:var(--r-md);text-decoration:none;color:var(--c-navy); display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden; transition:all .3s var(--t);min-height:226px;box-shadow:var(--shadow-sm); } .ssh-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c-gold); transform:scaleX(0);transform-origin:left;transition:transform .3s var(--t); } .ssh-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#d8cfbf} .ssh-card:hover::before{transform:scaleX(1)} .ssh-icon{ font-size:26px;color:var(--c-gold);font-family:'Playfair Display',serif;line-height:1; width:54px;height:54px;display:flex;align-items:center;justify-content:center; background:var(--c-light);border:1px solid var(--c-border);border-radius:var(--r-sm); } .ssh-title{font-size:1.12rem;font-weight:600;line-height:1.3;color:var(--c-navy);font-family:'Playfair Display',serif;margin-top:2px} .ssh-desc{font-size:.9rem;line-height:1.6;color:var(--c-muted);flex:1} .ssh-arrow{ color:var(--c-gold);font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase; margin-top:auto;display:flex;align-items:center;gap:6px;padding-top:12px;border-top:1px solid var(--c-border); } .ssh-arrow em{font-style:normal;font-size:16px;transition:transform .3s var(--t)} .ssh-card:hover .ssh-arrow em{transform:translateX(5px)} /* Featured card — single dark ink panel for contrast */ .ssh-featured{ grid-column:span 2;background:var(--c-navy); border-radius:var(--r-md);padding:42px 40px;color:#fff;position:relative;overflow:hidden; display:flex;flex-direction:column;justify-content:center; } .ssh-featured::before{ content:"";position:absolute;top:-60px;right:-60px;width:240px;height:240px; background:radial-gradient(circle,rgba(15,138,138,.25),transparent 70%);pointer-events:none; } .ssh-featured > *{position:relative;z-index:1} .ssh-featured-tag{ display:inline-block;background:transparent;color:var(--c-gold-2); padding:0;border-radius:0;font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase; margin-bottom:16px;border:0;align-self:flex-start; } .ssh-featured h3{color:#fff;font-size:1.55rem;line-height:1.25;margin-bottom:16px} .ssh-featured p{color:rgba(255,255,255,.72);line-height:1.7;margin-bottom:24px;font-size:.98rem} .ssh-featured-btns{display:flex;gap:12px;flex-wrap:wrap} .ssh-featured-btns .btn{padding:13px 26px;font-size:12px} .ssh-featured-btns .btn-navy{background:var(--c-gold);border-color:var(--c-gold);color:#fff} .ssh-featured-btns .btn-navy:hover{background:var(--c-gold-2);border-color:var(--c-gold-2);color:var(--c-navy)} .ssh-featured-btns .btn-gold{background:#fff;border-color:#fff;color:var(--c-navy)} .ssh-featured-btns .btn-gold:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} @media(max-width:960px){ .ssh-grid{grid-template-columns:repeat(2,1fr)} .ssh-featured{grid-column:span 2} } @media(max-width:560px){ .services-spotlight{padding:72px 0} .ssh-grid{grid-template-columns:1fr;gap:14px} .ssh-featured{grid-column:span 1;padding:32px 26px} .ssh-featured h3{font-size:1.25rem} } /* ========================================================= Service Area hub ========================================================= */ .area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:24px;max-width:1180px;margin:0 auto} .area-card{ display:flex;gap:24px;background:#fff;border:1px solid var(--c-border); border-radius:var(--r-md);padding:32px 30px;text-decoration:none;color:inherit; transition:all .3s var(--t);position:relative;overflow:hidden; } .area-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c-gold);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--t)} .area-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#d8cfbf} .area-card:hover::before{transform:scaleY(1)} .area-num{font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:600;color:var(--c-gold);line-height:1;flex-shrink:0;opacity:.85} .area-body{flex:1} .area-body h3{color:var(--c-navy);font-size:1.4rem;margin-bottom:9px} .area-desc{color:var(--c-muted);font-size:.95rem;line-height:1.6;margin-bottom:14px} .area-towns{font-size:.82rem;color:var(--c-muted);line-height:1.7;background:var(--c-light);padding:11px 15px;border-radius:var(--r-sm);margin-bottom:14px;border:1px solid var(--c-border)} .area-link{color:var(--c-gold);font-weight:600;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;display:inline-block} .area-card:hover .area-link{color:var(--c-navy)} @media(max-width:560px){ .area-card{flex-direction:column;gap:12px;padding:26px} .area-num{font-size:2rem} } /* ========================================================= Mission & Vision ========================================================= */ .mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1100px;margin:0 auto} .mv-card{position:relative;padding:52px 44px;border-radius:var(--r-md);overflow:hidden;transition:transform .35s var(--t),box-shadow .35s var(--t)} .mv-card:hover{transform:translateY(-5px)} .mv-mission{background:var(--c-navy);color:#fff;box-shadow:var(--shadow-md)} .mv-mission::before{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(15,138,138,.22),transparent 70%)} .mv-vision{background:#fff;color:var(--c-text);border:1px solid var(--c-border);box-shadow:var(--shadow-sm)} .mv-card > *{position:relative;z-index:1} .mv-icon{ width:60px;height:60px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center; font-family:'Playfair Display',serif;font-size:30px;font-weight:600;margin-bottom:24px; } .mv-mission .mv-icon{color:var(--c-gold-2);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)} .mv-vision .mv-icon{color:var(--c-gold);background:var(--c-light);border:1px solid var(--c-border)} .mv-label{display:inline-block;font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;padding:0;margin-bottom:16px;background:transparent} .mv-mission .mv-label{color:var(--c-gold-2)} .mv-vision .mv-label{color:var(--c-gold)} .mv-card h3{font-size:1.5rem;line-height:1.3;margin-bottom:20px;font-family:'Playfair Display',serif} .mv-mission h3{color:#fff} .mv-vision h3{color:var(--c-navy)} .mv-mission p{color:rgba(255,255,255,.74);margin-bottom:14px;line-height:1.75} .mv-vision p{color:var(--c-text);margin-bottom:14px;line-height:1.75} .mv-card p:last-child{margin-bottom:0} .mv-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:46px} @media(max-width:880px){ .mv-grid{grid-template-columns:1fr;gap:24px} .mv-card{padding:38px 30px} .mv-card h3{font-size:1.3rem} } /* ========================================================= Gallery Carousel ========================================================= */ .gx-carousel{position:relative;max-width:1100px;margin:0 auto} .gx-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 4px 18px;scrollbar-width:none} .gx-track::-webkit-scrollbar{display:none} .gx-slide{ flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start;margin:0; border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-md); background:var(--c-light);position:relative;aspect-ratio:4/3;cursor:zoom-in; } .gx-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--t)} .gx-slide:hover img{transform:scale(1.05)} .gx-slide::after{ content:"⤢";position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%; background:rgba(25,24,19,.6);color:#fff;display:flex;align-items:center;justify-content:center; font-size:18px;opacity:0;transform:scale(.85);transition:all .25s var(--t);pointer-events:none;backdrop-filter:blur(4px); } .gx-slide:hover::after{opacity:1;transform:scale(1)} .gx-slide figcaption{position:absolute;inset:auto 0 0 0;padding:14px 18px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));font-size:14px;font-weight:500} .gx-arrow{ position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--c-border);cursor:pointer; background:#fff;color:var(--c-navy);font-size:22px;font-weight:600;box-shadow:var(--shadow-md);z-index:5;transition:all .2s var(--t); } .gx-arrow:hover{background:var(--c-navy);color:#fff;border-color:var(--c-navy);transform:translateY(-50%) scale(1.05)} .gx-prev{left:-20px} .gx-next{right:-20px} .gx-dots{display:flex;justify-content:center;gap:8px;margin-top:10px} .gx-dots button{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;background:#d8d2c5;transition:all .2s;padding:0} .gx-dots button.is-active{background:var(--c-gold);width:28px;border-radius:50px} @media(max-width:880px){.gx-slide{flex-basis:calc((100% - 18px)/2)}} @media(max-width:560px){ .gx-slide{flex-basis:100%} .gx-prev{left:6px}.gx-next{right:6px} } /* ========================================================= Lightbox ========================================================= */ .lb{position:fixed;inset:0;z-index:10000;background:rgba(20,18,14,.95);display:none;align-items:center;justify-content:center;padding:60px 24px;backdrop-filter:blur(8px)} .lb.is-open{display:flex;animation:lbfade .2s ease} @keyframes lbfade{from{opacity:0}to{opacity:1}} .lb-stage{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px} .lb-img{max-width:min(1200px,96vw);max-height:calc(100vh - 160px);object-fit:contain;border-radius:8px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6);animation:lbpop .25s var(--t)} @keyframes lbpop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}} .lb-cap{color:#fff;font-size:15px;text-align:center;max-width:700px;background:rgba(0,0,0,.4);padding:10px 18px;border-radius:50px;backdrop-filter:blur(6px)} .lb-close{position:absolute;top:20px;right:24px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s var(--t);backdrop-filter:blur(6px)} .lb-close:hover{background:var(--c-gold);transform:rotate(90deg)} .lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;font-size:32px;font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .2s var(--t);backdrop-filter:blur(6px);z-index:2} .lb-arrow:hover{background:var(--c-gold);transform:translateY(-50%) scale(1.06)} .lb-prev{left:24px} .lb-next{right:24px} .lb-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;letter-spacing:2px;font-weight:600;background:rgba(0,0,0,.4);padding:6px 16px;border-radius:50px;backdrop-filter:blur(6px)} @media (max-width:640px){ .lb{padding:40px 10px} .lb-close{top:10px;right:10px;width:38px;height:38px;font-size:24px} .lb-arrow{width:44px;height:44px;font-size:26px} .lb-prev{left:8px}.lb-next{right:8px} .lb-cap{font-size:13px;padding:8px 14px} } /* ========================================================= Gallery grid ========================================================= */ .gl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1200px;margin:0 auto;padding:30px 0} .gl-card{ position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:var(--c-light); box-shadow:var(--shadow-sm);cursor:zoom-in;outline:none;border:1px solid var(--c-border); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1),z-index 0s .35s; } .gl-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--t)} .gl-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;color:#fff;font-size:14px;font-weight:500;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));opacity:0;transition:opacity .3s var(--t);pointer-events:none} .gl-zoom{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(25,24,19,.6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;opacity:0;transform:scale(.8);transition:all .25s var(--t);backdrop-filter:blur(4px);pointer-events:none} .gl-card:hover,.gl-card:focus{transform:scale(1.32);z-index:10;box-shadow:var(--shadow-lg);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1),z-index 0s} .gl-card:hover img,.gl-card:focus img{transform:scale(1.04)} .gl-card:hover figcaption,.gl-card:focus figcaption{opacity:1} .gl-card:hover .gl-zoom,.gl-card:focus .gl-zoom{opacity:1;transform:scale(1)} .gl-card:nth-child(3n+1):hover,.gl-card:nth-child(3n+1):focus{transform-origin:left center;transform:scale(1.32)} .gl-card:nth-child(3n):hover,.gl-card:nth-child(3n):focus{transform-origin:right center;transform:scale(1.32)} @media (max-width:900px){ .gl-grid{grid-template-columns:repeat(2,1fr);gap:18px} .gl-card:nth-child(odd):hover{transform-origin:left center;transform:scale(1.22)} .gl-card:nth-child(even):hover{transform-origin:right center;transform:scale(1.22)} } @media (max-width:560px){ .gl-grid{grid-template-columns:1fr;gap:14px} .gl-card:hover,.gl-card:focus{transform:scale(1.02);transform-origin:center} .gl-card figcaption{opacity:1} } @media (hover:none){ .gl-card:hover,.gl-card:focus{transform:none} .gl-card figcaption{opacity:1} .gl-zoom{opacity:1} } /* ========================================================= FAQ Accordion ========================================================= */ .faq-stack{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .faq-item{background:#fff;border-radius:var(--r-sm);border:1px solid var(--c-border);transition:all .25s var(--t);overflow:hidden} .faq-item[open]{border-color:var(--c-gold);box-shadow:var(--shadow-sm)} .faq-item summary{ list-style:none;cursor:pointer;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:18px; font-weight:600;color:var(--c-navy);font-size:1.05rem;font-family:'Playfair Display',serif;user-select:none;position:relative; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";font-size:26px;color:var(--c-gold);font-family:'Inter',sans-serif;font-weight:300;line-height:1;transition:transform .25s var(--t);flex-shrink:0} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-a{padding:0 28px 22px;color:var(--c-muted);line-height:1.75;border-top:1px solid var(--c-border);padding-top:18px} /* ========================================================= Featured content cards ========================================================= */ .feat-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:24px;max-width:1100px;margin:0 auto} .feat-card{background:#fff;padding:36px 32px;border-radius:var(--r-md);border:1px solid var(--c-border);position:relative;overflow:hidden;transition:all .3s var(--t)} .feat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c-gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--t)} .feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d8cfbf} .feat-card:hover::before{transform:scaleX(1)} .feat-num{font-family:'Playfair Display',serif;font-size:2.6rem;line-height:1;color:var(--c-gold);font-weight:600;margin-bottom:12px;display:block} .feat-card h3{margin-bottom:14px;color:var(--c-navy);font-size:1.25rem} .feat-card p{color:var(--c-muted);line-height:1.75;margin:0} .zip-strip{background:var(--c-navy);color:#fff;padding:42px;border-radius:var(--r-md);text-align:center;margin-top:30px} .zip-strip h3{color:var(--c-gold-2);font-size:1.35rem;margin-bottom:18px} .zip-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;max-width:900px;margin:0 auto} .zip-grid span{background:rgba(255,255,255,.06);padding:6px 14px;border-radius:50px;font-size:13px;letter-spacing:.5px;border:1px solid rgba(255,255,255,.12)} /* ========================================================= AI Lead Assistant ========================================================= */ #bot{position:fixed;bottom:24px;right:24px;z-index:9999;font-family:'Inter',system-ui,sans-serif} #bot-toggle{ position:relative;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer; background:var(--c-navy);color:#fff;font-size:26px;box-shadow:var(--shadow-lg); display:flex;align-items:center;justify-content:center;transition:transform .25s var(--t); } #bot-toggle:hover{transform:scale(1.06);background:var(--c-gold)} .bot-pulse{position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--c-gold);opacity:.5;animation:botpulse 2.2s ease-out infinite;pointer-events:none} @keyframes botpulse{0%{transform:scale(.92);opacity:.5}100%{transform:scale(1.35);opacity:0}} #bot.is-open #bot-toggle{display:none} #bot-panel{ position:absolute;bottom:0;right:0;width:360px;max-width:calc(100vw - 40px); min-height:420px;max-height:min(560px,calc(100vh - 80px)); background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--c-border); display:flex;flex-direction:column;overflow:hidden;animation:botin .3s var(--t); } #bot-panel[hidden]{display:none} @keyframes botin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} .bot-head{display:flex;align-items:center;gap:12px;background:var(--c-navy);color:#fff;padding:16px 18px;flex-shrink:0} .bot-avatar{width:42px;height:42px;border-radius:50%;background:var(--c-gold);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:22px;font-weight:600;color:#fff} .bot-head strong{display:block;font-size:15px;letter-spacing:.3px} .bot-head small{display:block;color:rgba(255,255,255,.6);font-size:12px;margin-top:2px} .bot-head > div:nth-child(2){flex:1} #bot-close{background:rgba(255,255,255,.1);border:0;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;transition:background .2s} #bot-close:hover{background:rgba(255,255,255,.2)} .bot-body{flex:1;overflow-y:auto;padding:18px;background:var(--c-light);font-size:15px} .bot-msg{max-width:85%;padding:12px 14px;border-radius:14px;margin-bottom:10px;line-height:1.45;word-wrap:break-word;animation:botmsg .25s var(--t)} @keyframes botmsg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .bot-msg.is-bot{background:#fff;color:var(--c-text);border-bottom-left-radius:4px;box-shadow:var(--shadow-sm);border:1px solid var(--c-border)} .bot-msg.is-user{background:var(--c-navy);color:#fff;margin-left:auto;border-bottom-right-radius:4px} .bot-msg.bot-typing{display:inline-flex;gap:4px;padding:14px 16px;width:auto} .bot-msg.bot-typing span{width:7px;height:7px;border-radius:50%;background:#c7c0b2;animation:typedot 1.2s infinite} .bot-msg.bot-typing span:nth-child(2){animation-delay:.2s} .bot-msg.bot-typing span:nth-child(3){animation-delay:.4s} @keyframes typedot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} .bot-err{background:#fbecea;color:#9a2c1c;padding:8px 12px;border-radius:8px;font-size:13px;margin-bottom:8px} .bot-foot{background:#fff;border-top:1px solid var(--c-border);padding:12px;flex-shrink:0} .bot-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0} .bot-opt{background:#fff;border:1px solid var(--c-border);color:var(--c-navy);padding:9px 14px;border-radius:50px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s var(--t);font-family:inherit} .bot-opt:hover{background:var(--c-gold);border-color:var(--c-gold);color:#fff;transform:translateY(-1px)} .bot-opt.is-skip{background:var(--c-light);color:var(--c-muted)} .bot-opt.is-cta{background:var(--c-gold);border-color:var(--c-gold);color:#fff;font-size:14px;padding:11px 18px;text-decoration:none;display:inline-block} .bot-opt.is-cta:hover{background:var(--c-gold-2)} .bot-input-row{display:flex;gap:8px;margin-top:8px} #bot-input{flex:1;border:1px solid var(--c-border);padding:11px 14px;border-radius:50px;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s} #bot-input:focus{border-color:var(--c-gold)} #bot-send{background:var(--c-navy);color:#fff;border:0;border-radius:50%;width:42px;height:42px;cursor:pointer;font-size:18px;flex-shrink:0;transition:background .2s} #bot-send:hover{background:var(--c-gold)} @media (max-width:640px){ #bot{bottom:14px;right:14px;left:14px} #bot-toggle{width:56px;height:56px;font-size:24px;margin-left:auto;display:flex} #bot.is-open{top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4)} #bot.is-open #bot-panel{position:fixed;inset:0;width:100%;max-width:100%;height:100%;max-height:100%;min-height:100%;border-radius:0;animation:botslideup .25s var(--t)} @keyframes botslideup{from{transform:translateY(100%)}to{transform:translateY(0)}} } /* ========================================================= Animations ========================================================= */ .fade-up{opacity:0;transform:translateY(28px);transition:all .8s var(--t)} .fade-up.visible{opacity:1;transform:translateY(0)} /* ========================================================= Page header (subpages) — light, minimal ========================================================= */ .page-head{background:var(--c-light);color:var(--c-text);padding:96px 0 74px;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--c-border)} .page-head::before{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:560px;height:300px;background:radial-gradient(circle,rgba(15,138,138,.12),transparent 70%)} .page-head *{position:relative;z-index:1} .page-head h1{color:var(--c-navy);margin-bottom:14px} .page-head p{color:var(--c-muted)} .page-head .crumb{color:var(--c-gold);font-size:12px;letter-spacing:2.4px;text-transform:uppercase} .page-head .crumb a{color:var(--c-muted)} .page-head .crumb a:hover{color:var(--c-gold)} /* Generic content block */ .content-block{max-width:900px;margin:0 auto} .content-block p{margin-bottom:18px;color:var(--c-text)} .content-block h2,.content-block h3{margin:34px 0 16px} .content-block h4{margin:26px 0 10px;font-size:1.15rem} .content-block ul{padding-left:24px;margin-bottom:18px} .content-block ul li{margin-bottom:8px} /* Editor blocks: Quick Summary, Key Insight, FAQ Accordion, mid-article CTA */ .content-block .editor-summary-box{background:var(--c-light);border-left:4px solid var(--c-gold);border-radius:var(--r-md);padding:24px 28px;margin:0 0 32px} .content-block .editor-summary-box h4{font-family:'Playfair Display',serif;color:var(--c-navy);margin-bottom:10px;font-size:1.1rem} .content-block .editor-summary-box ul.toc-list{list-style:none;margin:0;padding:0} .content-block .editor-summary-box ul.toc-list li{margin-bottom:8px} .content-block .editor-summary-box ul.toc-list a{color:var(--c-navy);text-decoration:underline} .content-block .editor-summary-box ul.toc-list a:hover{color:var(--c-gold)} .content-block .editor-key-insight{background:var(--c-light);border-left:4px solid var(--c-navy);border-radius:var(--r-md);padding:22px 26px;margin:28px 0} .content-block .editor-key-insight h4{color:var(--c-navy);font-family:'Playfair Display',serif;margin-bottom:10px;font-size:1.05rem} .content-block .editor-key-insight p{color:var(--c-text);margin:0} .content-block .editor-faq-accordion{margin:28px 0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--c-border)} .content-block .editor-faq-accordion .faq-title{margin:0;padding:18px 22px;background:var(--c-navy);color:#fff;font-size:1.2rem} .content-block .editor-faq-accordion .faq-item{border-bottom:1px solid var(--c-border);background:#fff} .content-block .editor-faq-accordion .faq-item:last-child{border-bottom:none} .content-block .editor-faq-accordion summary{cursor:pointer;padding:16px 44px 16px 22px;font-weight:700;color:var(--c-navy);font-family:'Playfair Display',serif;list-style:none;position:relative} .content-block .editor-faq-accordion summary::-webkit-details-marker{display:none} .content-block .editor-faq-accordion summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--c-gold);font-size:22px;font-weight:400;transition:transform .2s} .content-block .editor-faq-accordion details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .content-block .editor-faq-accordion .faq-answer{padding:0 22px 18px;color:var(--c-muted);line-height:1.6} .content-block .editor-faq-accordion .faq-answer p{margin:0} .content-block .editor-cta-box{background:var(--c-navy);color:#fff;border-radius:var(--r-md);padding:28px;margin:32px 0;text-align:center} .content-block .editor-cta-box h3{color:var(--c-gold);font-family:'Playfair Display',serif;margin-bottom:10px} .content-block .editor-cta-box p{color:rgba(255,255,255,.9);margin-bottom:14px} .content-block .editor-cta-btn{display:inline-block;background:var(--c-gold);color:#fff!important;padding:12px 26px;border-radius:50px;text-decoration:none;font-weight:700} .content-block .editor-highlight-box{background:#fdf6e3;border-left:4px solid #c9a25a;border-radius:var(--r-md);padding:24px 28px;margin:22px 0} .content-block .editor-highlight-box h4{font-family:'Playfair Display',serif;color:#8a6d1f;margin-bottom:8px;font-size:1.05rem} .content-block .editor-highlight-box p{margin:0} .content-block .editor-pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0} .content-block .editor-pros-cons .pc-col{border-radius:var(--r-md);padding:20px 24px} .content-block .editor-pros-cons .pc-pros{background:#eaf7f0} .content-block .editor-pros-cons .pc-cons{background:#fdeeee} .content-block .editor-pros-cons h4{font-family:'Playfair Display',serif;margin-bottom:10px;font-size:1.05rem} .content-block .editor-pros-cons ul{margin:0;padding-left:20px} .content-block .editor-pros-cons li{margin-bottom:6px} @media(max-width:640px){.content-block .editor-pros-cons{grid-template-columns:1fr}} /* ========================================================= Responsive (structure) ========================================================= */ @media (max-width:980px){ .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--c-navy);flex-direction:column;padding:14px 20px;box-shadow:var(--shadow-md);border-top:1px solid rgba(255,255,255,.1)} .nav-menu.open{display:flex} .nav-menu>li{width:100%;border-bottom:1px solid rgba(255,255,255,.06)} .nav-menu>li>a::after{content:none} /* Sub-menus are collapsed accordion-style on mobile — expanded only via .submenu-toggle / .sub-open */ .nav-menu .submenu,.nav-menu .flyout{display:none;position:static;background:transparent;box-shadow:none;border:0;opacity:1;visibility:visible;transform:none;padding-left:18px;max-height:none;overflow:visible} .nav-menu li.sub-open>.submenu,.nav-menu li.sub-open>.flyout{display:block} .nav-menu .submenu a,.nav-menu .flyout a{color:rgba(255,255,255,.78)} .nav-menu .submenu a:hover,.nav-menu .flyout a:hover{background:rgba(255,255,255,.06);color:#fff} .nav-menu .submenu .has-flyout>a::after{content:none} .nav-menu .has-sub>a,.nav-menu .has-flyout>a{padding-right:44px} .submenu-toggle{ display:block;position:absolute;right:0;top:0;bottom:0;width:44px; background:transparent;border:0;color:rgba(255,255,255,.7);font-size:16px;cursor:pointer; transition:transform .2s var(--t); } .nav-menu li.sub-open>.submenu-toggle{transform:rotate(180deg);color:#fff} .burger{display:block} .nav-cta{display:none} .about-split{grid-template-columns:1fr;gap:34px} .contact-wrap{grid-template-columns:1fr;gap:30px} .footer-grid{grid-template-columns:1fr 1fr;gap:32px} .form-row{grid-template-columns:1fr} section{padding:68px 0} .about-split ul{grid-template-columns:1fr} } @media (max-width:560px){ .footer-grid{grid-template-columns:1fr} .hero h1{font-size:2rem} } /* ========================================================= MOBILE-FIRST RESPONSIVE OVERRIDES ========================================================= */ @media (max-width:900px){ .container{padding:0 20px} section{padding:68px 0} body{font-size:17px} h1{font-size:clamp(1.9rem,5vw,2.8rem)} h2{font-size:clamp(1.5rem,4vw,2.1rem)} .page-head{padding:70px 0 56px} .section-head{margin-bottom:44px} .topbar{font-size:13px;padding:9px 0} .topbar a.tb-phone{font-size:16px} .topbar .tb-right{display:none} .brand img{height:60px !important} .navbar.scrolled .brand img{height:52px !important} .services-spotlight{padding:72px 0} .ssh-phone a{font-size:1.2rem} .stats{padding:56px 0} .stat .num{font-size:2.4rem} .cta-banner{padding:64px 0} .cta-banner h2{font-size:1.7rem} .area-card{padding:26px 24px} .area-num{font-size:2rem} .trust-strip{padding:18px 0} .trust-strip .container{gap:16px} .trust-item{font-size:12px} .trust-item strong{font-size:1.2rem} .service-card .sc-img{height:200px} .hero-inner{padding:80px 0 64px} } @media (max-width:640px){ .container{padding:0 18px} section{padding:56px 0} body{font-size:16px;line-height:1.7} .section-head{margin-bottom:34px;padding:0 4px} .section-head p{font-size:.96rem} .topbar{padding:9px 0;font-size:12px} .topbar .container{justify-content:center;text-align:center} .topbar .container > div:first-child{display:flex;flex-direction:column;gap:2px} .topbar a.tb-phone{font-size:18px;display:block} .nav-inner{padding:10px 0} .brand img{height:52px !important} .navbar.scrolled .brand img{height:46px !important} .nav-cta{padding:10px 18px;font-size:12px} .hero-inner{padding:60px 0 52px} .hero h1{font-size:1.8rem;line-height:1.25} .hero p{font-size:1rem !important} .hero-cta{flex-direction:column;width:100%;gap:10px} .hero-cta .btn{width:100%;justify-content:center;padding:14px 20px} .trust-strip .container{flex-direction:column;align-items:flex-start;gap:10px} .btn{padding:13px 24px;min-height:46px} .btn-xl{padding:15px 28px} .services-spotlight{padding:52px 0} .ssh-head{margin-bottom:32px;text-align:center} .ssh-phone{text-align:center} .ssh-phone a{font-size:1.3rem;display:block;margin-top:4px;margin-left:0} .ssh-head h2{font-size:1.55rem;text-align:center} .ssh-card{padding:24px 22px;min-height:auto} .ssh-icon{width:48px;height:48px;font-size:24px} .ssh-title{font-size:1.05rem} .ssh-featured{padding:30px 24px} .ssh-featured h3{font-size:1.25rem} .ssh-featured-btns{flex-direction:column} .ssh-featured-btns .btn{width:100%;justify-content:center} .about-split{gap:26px} .about-split ul{grid-template-columns:1fr} .about-split img{border-radius:var(--r-sm)} .stats{padding:44px 0} .stats-grid{gap:20px} .stat .num{font-size:2rem} .stat .lbl{font-size:11px;letter-spacing:1.2px} .services-grid{grid-template-columns:1fr;gap:18px} .service-card .sc-img{height:210px} .service-card .sc-body{padding:24px} .mv-card{padding:32px 26px} .mv-card h3{font-size:1.2rem} .mv-icon{width:52px;height:52px;font-size:26px} .mv-actions{flex-direction:column;width:100%} .mv-actions .btn{width:100%;justify-content:center} .area-grid{grid-template-columns:1fr;gap:14px} .area-card{flex-direction:row;align-items:flex-start;padding:24px 22px;gap:16px} .area-num{font-size:1.8rem} .area-body h3{font-size:1.2rem} .feat-blocks{gap:16px} .feat-card{padding:28px 24px} .feat-num{font-size:2.2rem} .feat-card h3{font-size:1.15rem} .zip-strip{padding:30px 22px} .zip-strip h3{font-size:1.15rem} .zip-grid span{font-size:11px;padding:5px 10px} .cta-banner{padding:52px 0} .cta-banner h2{font-size:1.5rem;margin-bottom:14px} .cta-banner p{font-size:.96rem !important;margin-bottom:20px !important} .cta-banner .container{display:flex;flex-direction:column;gap:10px} .cta-banner .btn{width:100%;justify-content:center} .page-head{padding:60px 0 48px} .page-head h1{font-size:1.85rem} .page-head p{font-size:1rem !important} .form-card{padding:26px 22px} .form-field input,.form-field select,.form-field textarea{font-size:16px} .contact-info{padding:30px 24px} .ci-item{margin-bottom:20px} .testimonial-grid{grid-template-columns:1fr;gap:16px} .testimonial{padding:26px} .faq-item summary{padding:18px 22px;font-size:.98rem} .faq-a{padding:0 22px 18px;padding-top:14px;font-size:.95rem} .gx-slide{flex-basis:calc(100% - 6px)} .gx-arrow{width:40px;height:40px;font-size:20px} .footer-grid{grid-template-columns:1fr;gap:32px;text-align:center} .footer-brand{text-align:center} .footer-logo-box{display:inline-block} .social{justify-content:center} .footer-trust{grid-template-columns:1fr;text-align:center;gap:22px} .ft-contact{justify-content:center;font-size:14px} .ft-badges{justify-content:center} } @media (max-width:420px){ .container{padding:0 16px} .brand img{height:48px !important} .navbar.scrolled .brand img{height:42px !important} .nav-cta{padding:9px 14px;font-size:11px} .hero h1{font-size:1.6rem} .hero p{font-size:.95rem !important} .ssh-head h2{font-size:1.35rem} .ssh-phone a{font-size:1.15rem} h2{font-size:1.5rem !important} .topbar a.tb-phone{font-size:17px} } @media (max-height:500px) and (orientation:landscape){ .hero-inner{padding:48px 0} .page-head{padding:44px 0 34px} section{padding:44px 0} } @media (hover:none){ .service-card:hover,.ssh-card:hover,.area-card:hover,.mv-card:hover,.feat-card:hover{transform:none} .nav-cta:hover{transform:none} }