/* ========================================================================== GlassStones — site styles Exterior cleaning, Kent. Brand: clarity of glass, solidity of stone. Fonts (Sora / Manrope / Space Mono) are loaded via in each . ========================================================================== */ /* ---- Design tokens ---------------------------------------------------- */ :root{ --navy:#0A1E3F; /* primary dark / ink */ --navy-2:#0E2A5C; /* gradient mid */ --blue-deep:#16438F; /* hero gradient end */ --blue:#15428C; /* mid blue accent */ --accent:#3a86ff; /* bright blue (logo) */ --cta:#EE6A1E; /* call-to-action orange */ --cta-soft:#FFF7F1; /* selected chip fill */ --footer:#081730; /* footer background */ --bg:#ffffff; --bg-soft:#F5F6F9; /* alt section bg */ --bg-softer:#FAFBFC; /* card bg */ --border:#e6e9ef; /* hairline borders */ --border-2:#d7dbe2; /* input borders */ --gold:#ffc24b; /* stars */ --muted:#5b6677; /* body secondary */ --muted-2:#6b7686; /* tertiary */ --muted-3:#8a94a3; /* placeholder ink */ --on-dark:#c5d2e8; /* paragraph on navy */ --on-dark-2:#c4d0e6; /* nav links on navy */ --f-head:'Sora',system-ui,sans-serif; --f-body:'Manrope',system-ui,sans-serif; --f-mono:'Space Mono',ui-monospace,monospace; --shadow-card:0 18px 40px -28px rgba(10,30,63,.4); --shadow-cta:0 16px 30px -12px rgba(238,106,30,.85); --radius:12px; --pad-x:56px; /* section horizontal padding (desktop) */ } /* ---- Reset / base ----------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--navy); font-family:var(--f-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;} h1,h2,h3{font-family:var(--f-head);margin:0;} p{margin:0;} :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;} .visually-hidden{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---- Layout helpers --------------------------------------------------- */ .container,.container--wide,.container--mid,.container--tight{margin-left:auto;margin-right:auto;} .container{max-width:1200px;} .container--wide{max-width:1240px;} .container--mid{max-width:1140px;} .container--tight{max-width:1100px;} .section{padding:78px var(--pad-x) 70px;} .section--soft{background:var(--bg-soft);border-top:1px solid #e9ecf1;} .section--white{background:var(--bg);} .eyebrow{ font-family:var(--f-mono);font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:var(--cta); } .eyebrow--blue{color:#8fb0e8;} .eyebrow--muted{color:var(--muted-2);} /* ---- Buttons ---------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--f-head);font-weight:700;font-size:16px; padding:16px 26px;border-radius:11px;text-decoration:none;border:0;cursor:pointer; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; } .btn:hover{transform:translateY(-1px);} .btn--cta{background:var(--cta);color:#fff;box-shadow:var(--shadow-cta);} .btn--cta:hover{box-shadow:0 20px 36px -12px rgba(238,106,30,.9);} .btn--dark{background:var(--navy);color:#fff;} .btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;} .btn--ghost:hover{background:rgba(255,255,255,.08);} .btn--ghost-fill{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);color:#fff;} .btn--sm{font-size:15px;padding:12px 20px;border-radius:10px;} .btn--block{display:flex;width:100%;} /* ========================================================================== Header / nav ========================================================================== */ .site-header{ position:sticky;top:0;z-index:60; display:flex;align-items:center;justify-content:space-between; gap:20px;padding:16px var(--pad-x); background:rgba(10,30,63,.96);backdrop-filter:blur(10px); color:#fff;border-bottom:1px solid rgba(255,255,255,.08); } .site-header--light{ background:#fff;color:var(--navy);border-bottom:1px solid #ebeef3;backdrop-filter:none; } .brand{display:flex;align-items:center;gap:12px;text-decoration:none;} .brand__mark{ width:46px;height:46px;border-radius:11px;flex:none; background:linear-gradient(140deg,#3a86ff,#0E2A5C); display:flex;align-items:center;justify-content:center; font-family:var(--f-head);font-weight:800;font-size:19px;color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -6px rgba(46,116,240,.8); } /* real logo image variant (replaces the CSS-drawn GS tile when present) */ img.brand__mark{ object-fit:cover;background:#fff;padding:0;border:0; box-shadow:0 6px 14px -6px rgba(0,0,0,.5); } .brand__name{font-family:var(--f-head);font-weight:700;font-size:21px;letter-spacing:-.01em;} .brand__name .a{color:#fff;} .brand__name .b{color:#9db4d8;} .site-header--light .brand__name .a{color:var(--blue);} .site-header--light .brand__name .b{color:var(--muted-3);} .nav{display:flex;gap:30px;font-size:15px;font-weight:500;} .nav a{color:var(--on-dark-2);text-decoration:none;transition:color .15s ease;} .nav a:hover{color:#fff;} .site-header--light .nav a{color:#465061;} .site-header--light .nav a:hover{color:var(--navy);} .header__right{display:flex;align-items:center;gap:20px;} .header__phone{text-align:right;line-height:1.1;text-decoration:none;color:inherit;} .header__phone .label{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:#7e92b6;} .header__phone .num{font-family:var(--f-head);font-weight:700;font-size:16px;color:inherit;} /* hamburger (hidden on desktop) */ .nav-toggle{ display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer; align-items:center;justify-content:center;color:inherit;border-radius:10px; } .nav-toggle span{position:relative;width:22px;height:2px;background:currentColor;border-radius:2px;transition:.2s;} .nav-toggle span::before,.nav-toggle span::after{ content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;border-radius:2px;transition:.2s; } .nav-toggle span::before{top:-7px;} .nav-toggle span::after{top:7px;} .nav-toggle[aria-expanded="true"] span{background:transparent;} .nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);} .nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);} /* mobile slide-down panel */ .mobile-nav{ display:none;position:fixed;inset:64px 0 auto 0;z-index:55; background:var(--navy);border-bottom:1px solid rgba(255,255,255,.1); padding:14px var(--pad-x) 22px; } .mobile-nav.is-open{display:block;} .mobile-nav a{ display:block;padding:13px 0;color:#dbe4f3;text-decoration:none;font-weight:600;font-size:17px; border-bottom:1px solid rgba(255,255,255,.08); } .mobile-nav a:last-child{border-bottom:0;} .mobile-nav .btn{margin-top:16px;} .mobile-nav__phone{display:block;margin-top:14px;color:#fff;font-family:var(--f-head);font-weight:700;font-size:18px;text-decoration:none;} /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative;overflow:hidden;color:#fff;padding:74px var(--pad-x) 92px; background:linear-gradient(165deg,#0A1E3F 0%,#0E2A5C 52%,#16438F 100%); } .hero__glow{position:absolute;inset:0;background:radial-gradient(900px 380px at 78% 8%,rgba(58,134,255,.28),transparent 60%);} .hero__grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;} .hero h1{font-weight:800;font-size:58px;line-height:1.04;letter-spacing:-.02em;margin:18px 0 0;} .hero__lead{font-size:18px;line-height:1.6;color:var(--on-dark);max-width:480px;margin:20px 0 0;} .hero__cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;} .hero__trust{display:flex;align-items:center;gap:26px;margin-top:34px;font-size:14px;color:#aebfdb;flex-wrap:wrap;} .hero__trust span.dot{color:var(--accent);} .stars{color:var(--gold);letter-spacing:1px;} .hero__media{position:relative;} .media-frame{ border-radius:16px;border:1px solid rgba(255,255,255,.16);overflow:hidden; background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 16px,rgba(255,255,255,.025) 16px 32px); display:flex;align-items:center;justify-content:center; } .media-frame img{width:100%;height:100%;object-fit:cover;} .media-frame__ph{font-family:var(--f-mono);font-size:13px;color:#9fb1d2;letter-spacing:.1em;} .hero__media .media-frame{aspect-ratio:4/4.4;} .float-card{ position:absolute;left:-26px;bottom:-26px;width:270px; background:rgba(255,255,255,.1);backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:18px 20px; box-shadow:0 24px 50px -20px rgba(0,0,0,.5);animation:gsFloat 6s ease-in-out infinite; } @keyframes gsFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}} .float-card .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:#bcd0f0;text-transform:uppercase;} .float-card .t{font-family:var(--f-head);font-weight:700;font-size:15px;margin-top:8px;} .float-card .p{font-family:var(--f-head);font-weight:800;font-size:38px;line-height:1;margin-top:2px;} .float-card .p small{font-size:15px;font-weight:600;color:#bcd0f0;} @media (prefers-reduced-motion:reduce){.float-card{animation:none;}html{scroll-behavior:auto;}} /* ========================================================================== Stat bar ========================================================================== */ .stat-bar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg-soft);border-bottom:1px solid var(--border);} .stat-bar__item{padding:22px 28px;border-right:1px solid var(--border);} .stat-bar__item:last-child{border-right:0;} .stat-bar__n{font-family:var(--f-head);font-weight:800;font-size:22px;color:var(--navy);} .stat-bar__d{font-size:13px;color:var(--muted-2);margin-top:2px;} /* ========================================================================== Services ========================================================================== */ .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;} .section-head h2{font-weight:700;font-size:42px;line-height:1.08;letter-spacing:-.02em;color:var(--navy);margin:14px 0 0;} .section-head__lead{font-size:16px;color:var(--muted);max-width:380px;line-height:1.6;margin:0;} .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px;} .service-card{ border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff; box-shadow:var(--shadow-card);text-decoration:none;color:inherit;display:block; transition:transform .18s ease,box-shadow .18s ease; } a.service-card:hover{transform:translateY(-3px);box-shadow:0 26px 50px -28px rgba(10,30,63,.5);} .service-card__media{ aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center; background:repeating-linear-gradient(135deg,#e9edf3 0 14px,#e2e7ef 14px 28px); } .service-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .service-card__badge{ position:absolute;top:12px;left:12px;z-index:1;background:var(--cta);color:#fff; font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;padding:5px 9px;border-radius:6px; } .service-card__ph{font-family:var(--f-mono);font-size:12px;color:var(--muted-3);} .service-card__body{padding:22px 22px 24px;} .service-card__body h3{font-weight:700;font-size:21px;color:var(--navy);margin:0;} .service-card__body p{font-size:14px;color:var(--muted);line-height:1.55;margin:9px 0 0;} .service-card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;} .service-card__price{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--blue);} .service-card__more{color:var(--cta);font-weight:700;font-size:14px;} .services-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px;} .mini-card{ border:1px solid var(--border);border-radius:14px;padding:20px 22px; display:flex;align-items:center;gap:16px;background:var(--bg-softer);text-decoration:none;color:inherit; } .mini-card:hover{border-color:#d4dbe6;} .mini-card__icon{ width:46px;height:46px;flex:none;border-radius:11px;background:#EEF3FC; display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:20px; } .mini-card h3{font-weight:700;font-size:17px;color:var(--navy);margin:0;} .mini-card .meta{font-size:13px;color:var(--muted-2);margin-top:2px;} /* ========================================================================== Why ========================================================================== */ .why-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;} .why__media .media-frame{aspect-ratio:4/4.6;background:repeating-linear-gradient(135deg,#e6ebf2 0 16px,#dfe5ee 16px 32px);border:1px solid #d7dbe2;} .why__media .media-frame__ph{color:var(--muted-3);} .why h2{font-weight:700;font-size:40px;line-height:1.1;letter-spacing:-.02em;color:var(--navy);margin:14px 0 0;} .why__lead{font-size:16px;color:var(--muted);line-height:1.65;margin:16px 0 0;max-width:520px;} .why-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px;} .why-card{background:#fff;border:1px solid var(--border);border-radius:13px;padding:18px 20px;} .why-card h3{font-weight:700;font-size:16px;color:var(--navy);} .why-card p{font-size:13.5px;color:var(--muted-2);margin-top:5px;line-height:1.5;} /* ========================================================================== Process ========================================================================== */ .process{text-align:center;} .process h2{font-weight:700;font-size:40px;letter-spacing:-.02em;color:var(--navy);margin:14px 0 46px;} .process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:left;} .step{position:relative;padding:28px 24px;border:1px solid var(--border);border-radius:16px;} .step__n{ font-family:var(--f-head);font-weight:800;font-size:15px;color:#fff;background:var(--navy); width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center; } .step--last .step__n{background:var(--cta);} .step h3{font-weight:700;font-size:19px;color:var(--navy);margin:18px 0 0;} .step p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:8px 0 0;} /* ========================================================================== Quote (instant quote centrepiece) ========================================================================== */ .quote{ position:relative;overflow:hidden;color:#fff;padding:74px var(--pad-x); background:linear-gradient(165deg,#0A1E3F 0%,#0E2A5C 60%,#15428C 100%); } .quote__glow{position:absolute;inset:0;background:radial-gradient(800px 360px at 18% 0%,rgba(58,134,255,.25),transparent 60%);} .quote__grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center;} .quote h2{font-weight:800;font-size:44px;line-height:1.06;letter-spacing:-.02em;margin:14px 0 0;} .quote__lead{font-size:17px;line-height:1.6;color:var(--on-dark);margin:18px 0 0;max-width:420px;} .quote__list{display:flex;flex-direction:column;gap:13px;margin-top:30px;} .quote__list div{display:flex;align-items:center;gap:11px;font-size:15px;color:#d5e0f2;} .quote__list .tick{color:var(--cta);} .gf-card{background:#fff;border-radius:18px;padding:28px;box-shadow:0 40px 80px -30px rgba(0,0,0,.55);color:var(--navy);} .gf-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;} .gf-card__head .t{font-family:var(--f-head);font-weight:700;font-size:20px;color:var(--navy);} .gf-card__note{font-size:13px;color:var(--muted-2);margin:0 0 18px;line-height:1.5;} .gf-card__rating{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--muted-2);} /* ========================================================================== Lead form (shared: quote + contact) ========================================================================== */ .lead-form{display:flex;flex-direction:column;gap:14px;} .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;} .field__label{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase;margin-bottom:6px;display:block;} .input,.select,.textarea{ width:100%;border:1px solid var(--border-2);border-radius:10px;padding:13px 15px; font-size:15px;font-family:var(--f-body);color:var(--navy);background:#fff;outline:none; transition:border-color .15s ease,box-shadow .15s ease; } .input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(58,134,255,.15);} .textarea{min-height:84px;resize:vertical;} /* service chips (accessible: real checkbox inside label) */ .chips{display:flex;flex-wrap:wrap;gap:9px;} .chip{ position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer; border:1.5px solid #e3e7ee;background:#fff;color:var(--muted); font-weight:600;font-size:14px;padding:9px 15px;border-radius:9px; transition:border-color .15s ease,background .15s ease,color .15s ease;user-select:none; } .chip:hover{border-color:#c9d2e0;} .chip input{position:absolute;opacity:0;width:1px;height:1px;} .chip::before{content:"";font-weight:700;color:var(--cta);width:0;overflow:hidden;transition:width .1s ease;} .chip:has(input:checked),.chip.is-on{border-color:var(--cta);background:var(--cta-soft);color:var(--navy);} .chip:has(input:checked)::before,.chip.is-on::before{content:"✓ ";width:auto;} .chip input:focus-visible + span{text-decoration:underline;} .form-note{text-align:center;font-size:12.5px;color:var(--muted-2);margin-top:2px;} .form-success{ display:none;background:#EAF7EE;border:1px solid #bfe6cb;color:#1c6b39; border-radius:12px;padding:16px 18px;font-weight:600;text-align:center; } .lead-form.is-sent .form-success{display:block;} /* ========================================================================== Reviews ========================================================================== */ .reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:38px;} .reviews-head h2{font-weight:700;font-size:40px;letter-spacing:-.02em;color:var(--navy);margin:14px 0 0;} .rating-badge{display:flex;align-items:center;gap:14px;background:var(--bg-soft);border:1px solid var(--border);border-radius:13px;padding:14px 20px;} .rating-badge__n{font-family:var(--f-head);font-weight:800;font-size:34px;color:var(--navy);} .rating-badge__d{font-size:13px;color:var(--muted-2);} .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .review-card{border:1px solid var(--border);border-radius:16px;padding:26px;background:var(--bg-softer);} .review-card p{font-size:15px;color:#33404f;line-height:1.6;margin:14px 0 18px;} .review-card__who{display:flex;align-items:center;gap:12px;} .review-card__avatar{width:40px;height:40px;border-radius:50%;background:#dde4ee;flex:none;overflow:hidden;} .review-card__name{font-family:var(--f-head);font-weight:700;font-size:14px;color:var(--navy);} .review-card__loc{font-size:12px;color:var(--muted-2);} /* ========================================================================== CTA band ========================================================================== */ .cta-band{padding:60px var(--pad-x);background:var(--cta);color:#fff;} .cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;} .cta-band h2{font-weight:800;font-size:34px;letter-spacing:-.02em;margin:0;} .cta-band p{font-size:16px;opacity:.9;margin:8px 0 0;} .cta-band__btns{display:flex;gap:14px;flex-wrap:wrap;} /* ========================================================================== Footer ========================================================================== */ .site-footer{background:var(--footer);color:#aebccf;padding:58px var(--pad-x) 30px;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;} .footer__brand{display:flex;align-items:center;gap:11px;margin-bottom:16px;} .footer__brand .brand__mark{width:42px;height:42px;font-size:17px;box-shadow:none;} .footer__brand .brand__name .b{color:#7e92b6;} .footer__about{font-size:14px;line-height:1.6;max-width:280px;margin:0;} .footer-col__h{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:#5f7596;text-transform:uppercase;margin-bottom:14px;} .footer-col__list{display:flex;flex-direction:column;gap:9px;font-size:14px;} .footer-col__list a{color:inherit;text-decoration:none;} .footer-col__list a:hover{color:#fff;} .footer__phone{color:#fff;font-family:var(--f-head);font-weight:700;font-size:17px;} .footer-bottom{ max-width:1200px;margin:34px auto 0;padding-top:22px;border-top:1px solid #16294a; display:flex;justify-content:space-between;font-size:12.5px;color:#6b7d99;flex-wrap:wrap;gap:10px; } .footer-bottom a{color:inherit;text-decoration:none;} .footer-bottom a:hover{color:#fff;} .footer-former{color:#6b7d99;} /* subtle "formerly Clear View Services" */ /* simple centred footer (sub pages) */ .footer-simple{background:var(--footer);color:#aebccf;padding:40px var(--pad-x);text-align:center;font-size:13px;} .footer-simple__brand{font-family:var(--f-head);font-weight:700;font-size:18px;color:#fff;margin-bottom:8px;} .footer-simple__brand .b{color:#7e92b6;} .footer-simple a{color:#9db4d8;text-decoration:none;} /* ========================================================================== Service detail page ========================================================================== */ .svc-hero{color:#fff;padding:44px var(--pad-x) 60px;background:linear-gradient(165deg,#0A1E3F,#15428C);} .breadcrumb{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:#8fb0e8;} .breadcrumb a{color:#8fb0e8;text-decoration:none;} .svc-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-top:24px;} .badge-pill{display:inline-block;background:var(--cta);color:#fff;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;padding:5px 11px;border-radius:6px;} .svc-hero h1{font-weight:800;font-size:50px;line-height:1.05;letter-spacing:-.02em;margin:16px 0 0;} .svc-hero__lead{font-size:18px;line-height:1.6;color:var(--on-dark);max-width:480px;margin:18px 0 0;} .svc-hero__cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;} .svc-hero__media{aspect-ratio:4/3.2;} .svc-body{display:grid;grid-template-columns:1.3fr .7fr;gap:54px;} .included-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;} .included{display:flex;gap:13px;align-items:flex-start;} .included .tick{color:var(--cta);font-size:18px;margin-top:1px;} .included h3{font-weight:700;font-size:15.5px;color:var(--navy);} .included p{font-size:13.5px;color:var(--muted-2);line-height:1.5;margin-top:2px;} /* FAQ accordion */ .faq{margin-top:18px;border-top:1px solid var(--border);} .faq__item{border-bottom:1px solid var(--border);} .faq__q{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px; background:none;border:0;cursor:pointer;text-align:left;padding:18px 0;color:var(--navy); font-family:var(--f-head);font-weight:700;font-size:16px; } .faq__icon{color:var(--muted-3);font-size:22px;line-height:1;transition:transform .2s ease;flex:none;} .faq__q[aria-expanded="true"] .faq__icon{transform:rotate(45deg);} .faq__a{max-height:0;overflow:hidden;transition:max-height .25s ease;} .faq__a p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0 0 18px;max-width:620px;} .pricing-card{position:sticky;top:90px;border:1px solid var(--border);border-radius:16px;padding:24px;background:var(--bg-softer);box-shadow:0 20px 44px -28px rgba(10,30,63,.35);} .pricing-card__h{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase;} .pricing-rows{margin-top:14px;display:flex;flex-direction:column;gap:11px;} .pricing-row{display:flex;justify-content:space-between;font-size:15px;color:#33404f;} .pricing-row b{font-family:var(--f-head);font-weight:700;color:var(--navy);} .pricing-card__note{font-size:12.5px;color:var(--muted-2);margin-top:14px;line-height:1.5;} .pricing-card .rating{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;font-size:13px;color:var(--muted-2);} .bundle-band{padding:50px var(--pad-x);background:var(--navy);color:#fff;} .bundle-band__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .bundle-band h2{font-weight:700;font-size:28px;margin:0;} /* ========================================================================== Contact page ========================================================================== */ .contact-hero{padding:56px var(--pad-x) 72px;background:linear-gradient(180deg,#FBFCFD,#F1F3F7);} .contact-intro{text-align:center;max-width:600px;margin:0 auto 40px;} .contact-intro h1{font-weight:700;font-size:46px;letter-spacing:-.02em;color:var(--navy);margin:14px 0 0;} .contact-intro p{font-size:17px;color:var(--muted);line-height:1.6;margin:14px 0 0;} .contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:start;} .form-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:0 24px 50px -32px rgba(10,30,63,.4);} .contact-aside{display:flex;flex-direction:column;gap:16px;} .aside-call{background:var(--navy);color:#fff;border-radius:16px;padding:26px;} .aside-call__k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:#8fb0e8;text-transform:uppercase;} .aside-call__num{display:block;font-family:var(--f-head);font-weight:800;font-size:28px;margin-top:8px;color:#fff;text-decoration:none;} .aside-call__hours{font-size:14px;color:var(--on-dark);margin-top:6px;} .aside-call__rule{height:1px;background:#1c3258;margin:18px 0;} .aside-call__contact{font-size:14px;color:var(--on-dark);line-height:1.7;} .aside-rating{border:1px solid var(--border);border-radius:16px;padding:22px;background:#fff;} .aside-rating__top{display:flex;align-items:center;gap:10px;} .aside-rating__top b{font-family:var(--f-head);font-weight:700;font-size:16px;color:var(--navy);} .aside-rating p{font-size:13.5px;color:var(--muted-2);margin-top:6px;} .aside-map .media-frame{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,#e9edf3 0 14px,#e2e7ef 14px 28px);border:1px solid #d7dbe2;} .aside-map .media-frame__ph{color:var(--muted-3);} /* ========================================================================== Blog / long-form prose (used by WP single/archive later) ========================================================================== */ .prose{max-width:720px;margin:0 auto;} .prose h2{font-size:28px;margin:34px 0 12px;color:var(--navy);} .prose h3{font-size:21px;margin:26px 0 10px;color:var(--navy);} .prose p{font-size:17px;line-height:1.7;color:#33404f;margin:0 0 18px;} .prose ul,.prose ol{font-size:17px;line-height:1.7;color:#33404f;padding-left:22px;margin:0 0 18px;} .prose a{color:var(--blue);} .prose img{border-radius:12px;margin:22px 0;} .prose blockquote{border-left:3px solid var(--cta);margin:22px 0;padding:6px 0 6px 20px;color:var(--muted);font-style:italic;} .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:start;} /* ========================================================================== Gravity Forms — restyle plugin output to match the design (applies once the migrated forms are embedded; harmless otherwise) ========================================================================== */ .gform_wrapper form{display:flex;flex-direction:column;gap:14px;} .gform_wrapper .gform_fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:0;margin:0;list-style:none;} .gform_wrapper .gfield{margin:0;} .gform_wrapper .gfield--width-full,.gform_wrapper .gfield:has(textarea),.gform_wrapper .gfield:has(.gfield_checkbox){grid-column:1/-1;} .gform_wrapper .gfield_label{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase;margin-bottom:6px;display:block;font-weight:400;} .gform_wrapper input[type=text],.gform_wrapper input[type=tel],.gform_wrapper input[type=email], .gform_wrapper input[type=number],.gform_wrapper select,.gform_wrapper textarea{ width:100%;border:1px solid var(--border-2);border-radius:10px;padding:13px 15px; font-size:15px;font-family:var(--f-body);color:var(--navy);background:#fff;outline:none; } .gform_wrapper input:focus,.gform_wrapper select:focus,.gform_wrapper textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(58,134,255,.15);} .gform_wrapper textarea{min-height:84px;resize:vertical;} /* checkbox choices → service chips */ .gform_wrapper .gfield_checkbox{display:flex;flex-wrap:wrap;gap:9px;} .gform_wrapper .gfield_checkbox .gchoice{position:relative;} .gform_wrapper .gfield_checkbox input{position:absolute;opacity:0;width:1px;height:1px;} .gform_wrapper .gfield_checkbox label{ display:inline-flex;align-items:center;gap:6px;cursor:pointer; border:1.5px solid #e3e7ee;background:#fff;color:var(--muted); font-weight:600;font-size:14px;padding:9px 15px;border-radius:9px;font-family:var(--f-body); transition:border-color .15s ease,background .15s ease,color .15s ease;user-select:none; } .gform_wrapper .gchoice:has(input:checked) label{border-color:var(--cta);background:var(--cta-soft);color:var(--navy);} .gform_wrapper .gchoice:has(input:checked) label::before{content:"✓ ";color:var(--cta);font-weight:700;} /* submit button */ .gform_wrapper .gform_footer{margin:0;padding:0;} .gform_wrapper input[type=submit],.gform_wrapper .gform_button{ display:flex;width:100%;align-items:center;justify-content:center; font-family:var(--f-head);font-weight:700;font-size:16px; padding:16px 26px;border-radius:11px;border:0;cursor:pointer; background:var(--cta);color:#fff;box-shadow:var(--shadow-cta); transition:transform .15s ease,box-shadow .15s ease; } .gform_wrapper input[type=submit]:hover{transform:translateY(-1px);} .gform_wrapper .gform_validation_errors,.gform_wrapper .validation_message{font-size:13px;color:#b3261e;} .gform_confirmation_message{ background:#EAF7EE;border:1px solid #bfe6cb;color:#1c6b39; border-radius:12px;padding:16px 18px;font-weight:600;text-align:center; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width:980px){ .footer-grid{grid-template-columns:1fr 1fr;gap:30px;} .hero h1{font-size:clamp(34px,7vw,58px);} .svc-hero h1{font-size:clamp(32px,6.5vw,50px);} .quote h2,.section-head h2,.why h2,.process h2,.reviews-head h2,.contact-intro h1{font-size:clamp(30px,5.5vw,44px);} } @media (max-width:880px){ :root{--pad-x:24px;} .nav,.header__phone,.header__cta{display:none;} .nav-toggle{display:inline-flex;} .hero__grid,.why-grid,.quote__grid,.svc-body,.svc-hero__grid,.contact-grid,.about-grid{grid-template-columns:1fr;gap:34px;} .gform_wrapper .gform_fields{grid-template-columns:1fr;} .services-grid,.services-mini,.process-grid,.reviews-grid,.card-grid{grid-template-columns:1fr 1fr;} .stat-bar{grid-template-columns:1fr 1fr;} .stat-bar__item:nth-child(2){border-right:0;} .stat-bar__item:nth-child(1),.stat-bar__item:nth-child(2){border-bottom:1px solid var(--border);} .pricing-card{position:static;} .float-card{left:auto;right:0;bottom:-20px;width:240px;} .hero__media{margin-bottom:18px;} } @media (max-width:600px){ body{font-size:15px;} .section{padding:52px var(--pad-x) 48px;} .hero{padding:48px var(--pad-x) 70px;} .services-grid,.services-mini,.process-grid,.reviews-grid,.card-grid, .field-grid,.included-grid,.why-cards{grid-template-columns:1fr;} .stat-bar{grid-template-columns:1fr;} .stat-bar__item{border-right:0;border-bottom:1px solid var(--border);} .stat-bar__item:last-child{border-bottom:0;} .section-head h2{font-size:32px;} .cta-band__inner,.bundle-band__inner,.reviews-head,.section-head{flex-direction:column;align-items:flex-start;} .btn{width:100%;} .hero__cta,.svc-hero__cta,.cta-band__btns{flex-direction:column;align-items:stretch;} .float-card{position:static;width:auto;margin-top:16px;animation:none;} }