/* ========================================================= SwiftLift Garage Door — premium design system (v2 "flagship") Editorial fluid type, layered soft shadows, animated aurora, gradient-bordered glass, sheen buttons, a whisper of grain. Webfonts (Sora + Inter) load in ; system stack falls back. One shared stylesheet → upgrades every page at once. ========================================================= */ :root{ --navy:#0a1730; --navy-deep:#060e1e; --blue:#2563eb; --blue-light:#3b82f6; --azure:#38bdf8; --violet:#7c3aed; /* luxe accent in mesh gradients */ --accent:#2f6bff; /* primary call-to-action blue */ --accent-dark:#1d4ed8; --ink:#0f1b2d; --muted:#5a6b85; --bg:#ffffff; --bg-alt:#f3f7ff; --bg-soft:#eef4fe; --line:#e6edf9; --gold:#fbbf24; /* review stars only */ --radius:20px; --radius-sm:13px; --radius-lg:28px; /* layered, soft, expensive shadows (close + far) */ --shadow-sm:0 1px 2px rgba(10,23,48,.04),0 8px 18px -10px rgba(10,23,48,.12); --shadow:0 4px 12px rgba(10,23,48,.05),0 26px 52px -22px rgba(10,23,48,.26); --shadow-lg:0 10px 24px rgba(10,23,48,.08),0 54px 96px -30px rgba(10,23,48,.42); --glow:0 16px 40px -10px rgba(47,107,255,.55); --ring:0 0 0 1px rgba(47,107,255,.10); --grad-accent:linear-gradient(135deg,#5b9bff 0%,#2563eb 50%,#1d4ed8 100%); --grad-sheen:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%); --grad-dark:linear-gradient(160deg,#0a1730 0%,#0b2c63 55%,#070f22 100%); --grad-text:linear-gradient(120deg,#cfe4ff,#5b9bff 55%,#9ecbff); --max:1200px; --display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} :target{scroll-margin-top:96px} body{font-family:var(--body);color:var(--ink);line-height:1.7;background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative} /* whisper-fine grain overlay — gives the page an expensive, printed depth */ body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.022;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--display);line-height:1.08;color:var(--navy);font-weight:800;letter-spacing:-.025em;text-wrap:balance} .hidden{position:absolute!important;left:-9999px} .container{max-width:var(--max);margin:0 auto;padding:0 22px} .container--narrow{max-width:800px} /* ---------- Scroll-reveal (added by JS only to below-the-fold items) ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .reveal.in{opacity:1;transform:none} /* ---------- Buttons ---------- */ .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--display);font-weight:700;font-size:1rem;padding:.9rem 1.65rem;border-radius:999px; border:1.5px solid transparent;cursor:pointer;letter-spacing:-.01em; transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,background .25s ease,border-color .25s ease} /* sheen sweep on hover */ .btn::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--grad-sheen);transform:translateX(-130%) skewX(-18deg);transition:transform .65s cubic-bezier(.22,1,.36,1);pointer-events:none} .btn:hover::after{transform:translateX(130%) skewX(-18deg)} .btn:hover{transform:translateY(-3px)} .btn:active{transform:translateY(0)} .btn--accent{background:var(--grad-accent);color:#fff;box-shadow:var(--glow)} .btn--accent:hover{box-shadow:0 20px 44px -8px rgba(47,107,255,.7)} .btn--call{background:#fff;color:var(--navy);border-color:#fff} .btn--white{background:#fff;color:var(--navy);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)} .btn--white:hover{background:#eef4ff} .btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(8px)} .btn--ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)} .btn--lg{padding:1.05rem 1.8rem;font-size:1.08rem} .btn--block{width:100%} /* ---------- Top announcement bar ---------- */ .topbar{background:var(--navy-deep);color:#cdddf7;font-size:.85rem;font-weight:500} .topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 22px} .topbar__phone{font-weight:700;color:#fff} /* ---------- Header ---------- */ .header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line); transition:padding .25s ease,box-shadow .25s ease,background .25s ease,backdrop-filter .25s ease} .header.scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);box-shadow:0 10px 34px -12px rgba(10,23,48,.28);border-bottom-color:transparent} .header__inner{display:flex;align-items:center;gap:1rem;padding:.85rem 22px;transition:padding .25s ease} .header.scrolled .header__inner{padding-top:.5rem;padding-bottom:.5rem} .logo{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-size:1.22rem;font-weight:800;color:var(--navy);letter-spacing:-.02em} .logo__mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--grad-accent);color:#fff;font-size:1.25rem;box-shadow:var(--glow)} .logo__text strong{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent} .logo--light{color:#fff} .nav{margin-left:auto;display:flex;gap:1.5rem;font-weight:600;font-size:.97rem} .nav a{position:relative;color:var(--ink);padding:.35rem 0} .nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--grad-accent);transition:width .25s ease;border-radius:2px} .nav a:hover{color:var(--navy)} .nav a:hover::after{width:100%} .header__cta{margin-left:1rem} .nav-toggle{display:none;margin-left:auto;font-size:1.7rem;background:none;border:none;color:var(--navy);cursor:pointer;line-height:1} /* ---------- Hero ---------- */ .hero{position:relative;isolation:isolate;color:#fff;padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(3rem,6vw,5.5rem);overflow:hidden;background:var(--grad-dark)} /* slow-drifting aurora — premium living backdrop */ .hero::after{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none; background: radial-gradient(38% 52% at 80% 6%, rgba(56,189,248,.36), transparent 60%), radial-gradient(44% 56% at 8% 20%, rgba(47,107,255,.52), transparent 55%), radial-gradient(34% 46% at 62% 92%, rgba(124,58,237,.30), transparent 60%); filter:blur(6px);animation:aurora 20s ease-in-out infinite alternate} @keyframes aurora{0%{transform:translate3d(-2%,-1%,0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.08)}100%{transform:translate3d(-1%,1%,0) scale(1.05)}} /* Photo hero — drop a real garage-door image behind a brand-blue overlay. Save the image as /images/hero.jpg (falls back to the dark gradient if missing). */ .hero--photo{background: linear-gradient(100deg,rgba(7,15,34,.90) 0%,rgba(8,20,46,.66) 48%,rgba(10,28,66,.40) 100%), url("../images/hero.jpg") center/cover no-repeat, var(--grad-dark)} .hero--photo::after{display:none} /* no aurora over a photo */ .hero--photo::before{opacity:.18} /* soften the grid overlay */ .hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(900px 500px at 70% 0%,#000,transparent 75%); mask-image:radial-gradient(900px 500px at 70% 0%,#000,transparent 75%)} .hero__inner{display:grid;grid-template-columns:1.18fr .82fr;gap:2.8rem;align-items:center} .hero h1{color:#fff;font-size:clamp(2.5rem,5.4vw,4.3rem);margin-bottom:1.1rem;letter-spacing:-.038em;line-height:1.01} .hero h1 span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .hero__sub{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.22;color:#bcd6ff;margin:-.3rem 0 1rem;letter-spacing:-.01em;max-width:30ch} .lede{font-size:1.15rem;color:#cfe0f7;margin-bottom:1.6rem;max-width:48ch;font-weight:400} .hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:1.5rem} .hero__trust{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem} .hero__trust li{display:inline-flex;align-items:center;gap:.4em;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px);padding:.45rem .85rem;border-radius:999px;font-size:.86rem;font-weight:600;color:#eaf2ff} /* eyebrow as a pill (works on light + dark) */ .eyebrow{display:inline-flex;align-items:center;gap:.5em;text-transform:uppercase;letter-spacing:.14em; font-family:var(--display);font-weight:700;font-size:.74rem;color:var(--blue); background:rgba(47,107,255,.10);padding:.42rem .9rem;border-radius:999px;margin-bottom:1rem} .hero .eyebrow{color:#bcd6ff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18)} /* rating pill */ .rating-pill{display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px);padding:.5rem 1rem;border-radius:999px;font-weight:600;font-size:.9rem;color:#fff;margin-bottom:1.1rem} .rating-pill .stars{color:var(--gold);letter-spacing:1px} /* hero glass quote card */ .hero__card{position:relative;background:rgba(255,255,255,.98);color:var(--ink);border-radius:var(--radius-lg);padding:2rem; box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.6)} .hero__card::before{content:"";position:absolute;inset:-1px;border-radius:29px;padding:1px;z-index:-1; background:linear-gradient(140deg,rgba(56,189,248,.7),rgba(47,107,255,.2)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .hero__card h2{font-size:1.45rem;margin-bottom:.25rem} .hero__card p{color:var(--muted);margin-bottom:1rem;font-size:.95rem} /* ---------- Forms ---------- */ .quickform input,.quickform select,.bigform input,.bigform select,.bigform textarea{ width:100%;padding:.85rem .95rem;border:1.5px solid var(--line);border-radius:12px;font-size:1rem;font-family:inherit;margin-bottom:.7rem;background:#fbfdff;transition:border-color .2s,box-shadow .2s} .quickform :focus,.bigform :focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,107,255,.14);background:#fff} .quickform small{display:block;color:var(--muted);font-size:.78rem;margin-top:.3rem} .bigform{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow)} .field{margin-bottom:.45rem} .field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem;color:var(--navy)} /* ---------- Trust strip ---------- */ .strip{background:#fff;border-bottom:1px solid var(--line)} .strip__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:2.4rem 22px;text-align:center} .strip__inner > div{position:relative} .strip__inner > div:not(:last-child)::after{content:"";position:absolute;right:0;top:15%;height:70%;width:1px;background:var(--line)} .strip strong{display:block;font-family:var(--display);font-size:clamp(1.6rem,2.5vw,2.05rem);font-weight:800;letter-spacing:-.02em; background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent} .strip span{font-size:.85rem;color:var(--muted);font-weight:500} /* ---------- Sections ---------- */ .section{padding:clamp(3.5rem,6vw,5.5rem) 0} .section--alt{background:linear-gradient(180deg,var(--bg-alt),var(--bg-soft))} .section__head{text-align:center;max-width:720px;margin:0 auto clamp(2rem,4vw,3rem)} .section__head .eyebrow{margin-bottom:.8rem} .section__head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:.7rem;letter-spacing:-.03em} .section__sub{color:var(--muted);font-size:1.1rem} /* ---------- Cards ---------- */ .grid{display:grid;gap:1.4rem} .grid--3{grid-template-columns:repeat(3,1fr)} .card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem; box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden} .card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--grad-accent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease} .card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg),0 30px 60px -34px rgba(47,107,255,.5);border-color:rgba(47,107,255,.22)} .card:hover::before{transform:scaleX(1)} .card__icon{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;font-size:1.6rem;margin-bottom:.9rem; background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(47,107,255,.16));border:1px solid rgba(47,107,255,.12)} .card h3{font-size:1.22rem;margin-bottom:.45rem} .card h3 a{transition:color .2s}.card h3 a:hover{color:var(--blue)} .card p{color:var(--muted);font-size:.96rem;margin-bottom:.9rem} .card__link{display:inline-flex;align-items:center;gap:.3em;color:var(--blue);font-weight:700;font-size:.93rem;font-family:var(--display)} .card__link:hover{gap:.6em} .card--accent{background:var(--grad-dark);color:#fff;border:none} .card--accent::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.4),transparent 70%)} .card--accent h3{color:#fff}.card--accent h3 a{color:#fff}.card--accent p{color:#cfe0f7}.card--accent .card__icon{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)} .card--accent .card__link{color:var(--azure)} /* ---------- Split (why us / quote) ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:2.8rem;align-items:center} .split__copy h2{font-size:2rem;margin-bottom:1rem} .split__copy > p{color:var(--muted);margin-bottom:1rem} .ticks{list-style:none;margin-bottom:1.5rem} .ticks li{padding-left:2rem;position:relative;margin-bottom:.8rem;color:var(--ink)} .ticks li::before{content:"";position:absolute;left:0;top:.32em;width:20px;height:20px;border-radius:50%; background:var(--grad-accent);box-shadow:0 4px 10px -2px rgba(47,107,255,.5)} .ticks li::after{content:"✓";position:absolute;left:5px;top:.18em;color:#fff;font-size:.72rem;font-weight:800} .ticks strong{color:var(--navy)} .ticks a{color:var(--blue);font-weight:600} .steps{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-sm)} .steps h3{margin-bottom:1.1rem;font-size:1.25rem} .steps ol{list-style:none} .steps li{display:flex;gap:1rem;margin-bottom:1.2rem} .steps li > span{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--grad-accent);color:#fff;font-family:var(--display);font-weight:800;box-shadow:var(--glow)} .steps strong{color:var(--navy)} .steps p{color:var(--muted);font-size:.92rem} .contact-list{list-style:none;font-size:1.05rem} .contact-list li{margin-bottom:.7rem} .contact-list a{color:var(--blue);font-weight:700} /* ---------- Areas ---------- */ .areas{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;max-width:880px;margin:0 auto} .areas li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.85rem;text-align:center;font-weight:600;color:var(--navy);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s} .areas li:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent} .areas a{display:block;margin:-.85rem;padding:.85rem;color:var(--navy)} .areas a:hover{color:var(--blue)} /* ---------- Reviews ---------- */ .review{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow-sm)} .review::before{content:"\201C";position:absolute;top:.2rem;right:1.1rem;font-family:Georgia,serif;font-size:4rem;color:rgba(47,107,255,.12);line-height:1} .review p{color:var(--ink);margin-bottom:1rem;font-size:1.02rem} .review footer{color:var(--gold);font-weight:700;font-size:1rem;letter-spacing:1px} .review footer strong{color:var(--navy);letter-spacing:normal} /* ---------- FAQ ---------- */ .faq{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:.8rem;overflow:hidden;transition:box-shadow .2s,border-color .2s} .faq[open]{box-shadow:var(--shadow-sm);border-color:rgba(47,107,255,.3)} .faq summary{cursor:pointer;font-family:var(--display);font-weight:700;color:var(--navy);padding:1.1rem 1.3rem;list-style:none;position:relative;font-size:1.02rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:1.3rem;font-size:1.4rem;color:var(--blue);transition:transform .25s} .faq[open] summary::after{content:"–"} .faq p{padding:0 1.3rem 1.2rem;color:var(--muted)} /* ---------- CTA band ---------- */ .cta{position:relative;isolation:isolate;color:#fff;text-align:center;padding:clamp(3.2rem,6vw,5rem) 0;overflow:hidden;background:var(--grad-dark)} .cta::after{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none; background:radial-gradient(40% 60% at 28% -10%,rgba(56,189,248,.34),transparent 60%),radial-gradient(42% 60% at 78% 110%,rgba(124,58,237,.30),transparent 60%); filter:blur(6px);animation:aurora 22s ease-in-out infinite alternate} .cta h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:.5rem;letter-spacing:-.03em} .cta p{margin-bottom:1.6rem;font-size:1.08rem;color:#cfe0f7} .cta .btn--accent{background:#fff;color:var(--accent-dark);box-shadow:0 16px 40px -10px rgba(0,0,0,.5)} .cta .btn--accent:hover{background:#eef4ff} /* ---------- Footer ---------- */ .footer{background:var(--navy-deep);color:#aebfda;padding-top:3.2rem;font-size:.94rem} .footer__grid{display:grid;grid-template-columns:1.4fr .9fr 1.7fr 1fr;gap:2.2rem;padding-bottom:2.2rem} .footer__areacol{columns:2;column-gap:1.4rem;font-size:.9rem} .footer__areacol li{break-inside:avoid} .footer h4{font-family:var(--display);color:#fff;margin-bottom:.9rem;font-size:1.02rem} .footer ul{list-style:none} .footer li{margin-bottom:.5rem} .footer a:hover{color:#fff} .footer__about{margin:.9rem 0;line-height:1.7;color:#8ea3c8} .footer__areas{border-top:1px solid rgba(255,255,255,.1);padding:1.6rem 0 .2rem} .footer__areas h4{font-family:var(--display);color:#fff;font-size:1rem;margin-bottom:.9rem} .footer__arealinks{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem 1.4rem} .footer__arealinks a{color:#9fb2d6;font-size:.9rem} .footer__arealinks a:hover{color:#fff} .footer__bar{border-top:1px solid rgba(255,255,255,.1);padding:1.2rem 0;font-size:.83rem;color:#7187ab} /* ---------- Skip link (accessibility) ---------- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff; padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-family:var(--display);font-weight:700} .skip-link:focus{left:0} /* ---------- Legal / policy pages ---------- */ .legal h1{font-size:2.2rem;margin-bottom:.4rem;letter-spacing:-.02em} .legal .legal__updated{color:var(--muted);font-size:.92rem;margin-bottom:1.8rem} .legal h2{font-size:1.3rem;margin:1.9rem 0 .6rem;color:var(--navy)} .legal p{color:#36475f;margin-bottom:.9rem} .legal a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px} .legal__list{list-style:disc;margin:0 0 1rem 1.3rem} .legal__list li{color:#36475f;margin-bottom:.5rem} /* ---------- Footer legal row ---------- */ .footer__bar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.2rem} .footer__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem} .footer__legal a{color:#9fb2d6} .footer__legal a:hover{color:#fff} /* ---------- Sticky mobile call bar ---------- */ .callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--grad-accent);color:#fff; text-align:center;font-family:var(--display);font-weight:800;padding:1rem;animation:barPulse 2.4s ease-in-out infinite} @keyframes barPulse{0%,100%{box-shadow:0 -4px 16px rgba(0,0,0,.2)}50%{box-shadow:0 -6px 30px rgba(47,107,255,.7)}} /* ---------- Brand wall ---------- */ .brandwall{padding:2.6rem 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .brandwall__head{text-align:center} .brandwall__head .eyebrow{margin-bottom:.6rem} .brandwall__head h2{font-size:1.6rem;margin-bottom:.5rem} .brandwall__head p{color:var(--muted);font-size:.96rem;max-width:640px;margin:0 auto} .brandwall__logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 2.4rem;max-width:940px;margin:1.5rem auto 0} .brandwall__logos span{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:#8595ad; filter:grayscale(1);opacity:.75;transition:color .25s,opacity .25s,transform .25s} .brandwall__logos span:hover{color:var(--blue);opacity:1;transform:translateY(-2px)} .brandwall__note{text-align:center;color:var(--muted);font-size:.86rem;margin-top:1.3rem} /* ---------- Promise / guarantee ---------- */ .promise{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:stretch} .promise__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem;box-shadow:var(--shadow-sm)} .promise__card h3{font-size:1.3rem;margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem} .promise__card p{color:var(--ink)} .promise__warranty{background:var(--grad-dark);color:#fff;border:none;position:relative;overflow:hidden} .promise__warranty h3{color:#fff} .promise__warranty::after{content:"";position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.32),transparent 70%)} .promise__warranty p{color:#d6e4fa;font-size:.96rem;line-height:1.7;position:relative} .promise__warranty strong{color:#fff} .promise__list{list-style:none;counter-reset:g} .promise__list li{counter-increment:g;position:relative;padding-left:2.6rem;margin-bottom:1.05rem;color:var(--ink);font-size:.97rem} .promise__list li:last-child{margin-bottom:0} .promise__list li::before{content:counter(g);position:absolute;left:0;top:-.05em;width:30px;height:30px;border-radius:50%; background:var(--grad-accent);color:#fff;font-family:var(--display);font-weight:800;font-size:.9rem;display:grid;place-items:center;box-shadow:var(--glow)} .promise__list strong{color:var(--navy)} /* ---------- Credentials bar ---------- */ .creds{padding:2.6rem 0} .creds__inner{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;max-width:920px;margin:0 auto} .creds__chip{display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--line); border-radius:999px;padding:.7rem 1.25rem;font-weight:600;font-size:.92rem;color:var(--navy);box-shadow:var(--shadow-sm)} .creds__chip b{color:var(--blue);font-weight:800} .creds__note{text-align:center;color:var(--muted);font-size:.84rem;margin-top:1.1rem} /* ---------- Google-style reviews ---------- */ .gstars{color:var(--gold);letter-spacing:2px;line-height:1} .gsummary{display:flex;align-items:center;gap:1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:1.2rem 1.6rem;box-shadow:var(--shadow-sm);max-width:780px;margin:0 auto 1.9rem} .gsummary__logo{width:42px;height:42px;flex:none} .gsummary__meta{display:flex;flex-direction:column;gap:.12rem} .gsummary__name{font-family:var(--display);font-weight:700;color:var(--navy);font-size:.95rem} .gsummary__rateline{display:flex;align-items:center;gap:.55rem} .gsummary__score{font-family:var(--display);font-size:2.05rem;font-weight:800;color:#e7711b;line-height:1} .gsummary__rateline .gstars{font-size:1.15rem} .gsummary__count{color:var(--muted);font-size:.82rem} .gsummary__cta{margin-left:auto;font-size:.92rem;padding:.7rem 1.2rem;white-space:nowrap} .greviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.2rem} .greview{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:1.45rem;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .greview:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} .greview__top{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem} .greview__avatar{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:var(--av,#1565C0); color:#fff;font-weight:700;font-family:var(--display);display:grid;place-items:center;font-size:1.15rem} .greview__g{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;background:#fff;border-radius:50%;padding:2px;box-shadow:0 1px 3px rgba(0,0,0,.25)} .greview__who{display:flex;flex-direction:column;line-height:1.25} .greview__name{font-weight:700;color:var(--navy);font-size:.95rem} .greview__sub{color:var(--muted);font-size:.8rem} .greview__stars{margin-bottom:.55rem;font-size:1rem} .greview__text{color:#3a4a63;font-size:.92rem;line-height:1.6;margin-bottom:.9rem} .greview__src{margin-top:auto;color:#9aa7bd;font-size:.74rem} /* ---------- Accessibility widget (self-built, no external service) ---------- */ .a11y-fab{position:fixed;left:18px;bottom:18px;z-index:120;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer; display:grid;place-items:center;color:#fff;background:var(--grad-accent);box-shadow:var(--glow); transition:transform .2s ease,box-shadow .25s ease} .a11y-fab:hover{transform:translateY(-2px) scale(1.05)} .a11y-fab:focus-visible{outline:3px solid #0a1730;outline-offset:3px} .a11y-panel{position:fixed;left:18px;bottom:82px;z-index:121;width:264px;background:#fff;border:1px solid var(--line); border-radius:16px;box-shadow:var(--shadow-lg);padding:1rem;display:flex;flex-direction:column;gap:.45rem} .a11y-panel[hidden]{display:none} .a11y-title{font-size:1.05rem;margin-bottom:.3rem;color:var(--navy)} .a11y-opt{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;text-align:left;cursor:pointer; font-family:var(--body);font-weight:600;font-size:.94rem;color:var(--ink);background:#f6f9ff;border:1px solid var(--line); border-radius:11px;padding:.62rem .8rem;transition:border-color .2s} .a11y-opt:hover{border-color:var(--blue)} .a11y-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .a11y-sw{flex:none;width:38px;height:22px;border-radius:999px;background:#c9d6ec;position:relative;transition:background .2s} .a11y-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s} .a11y-opt[aria-pressed="true"] .a11y-sw{background:var(--accent)} .a11y-opt[aria-pressed="true"] .a11y-sw::after{transform:translateX(16px)} .a11y-reset{margin-top:.2rem;background:none;border:none;color:var(--blue);font-weight:700;font-family:var(--display); cursor:pointer;font-size:.9rem;text-align:left;padding:.3rem .2rem} .a11y-statement{color:var(--muted);font-size:.82rem;text-decoration:underline;text-underline-offset:2px;padding:.1rem .2rem} /* effect classes applied to */ html.a11y-bigtext{font-size:118%} html.a11y-contrast{--muted:#21324d;--line:#8aa0c0} html.a11y-contrast body{color:#0a1320} html.a11y-contrast .lede,html.a11y-contrast .section__sub,html.a11y-contrast .card p, html.a11y-contrast .greview__text,html.a11y-contrast .legal p,html.a11y-contrast .legal__list li{color:#16233a} html.a11y-contrast a:not(.btn):not(.logo){text-decoration:underline} html.a11y-links a:not(.btn):not(.logo){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px} html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} /* ========================================================= Responsive ========================================================= */ @media (max-width:920px){ .hero__inner,.split,.promise,.footer__grid{grid-template-columns:1fr} .gsummary{flex-wrap:wrap;justify-content:center;text-align:center} .gsummary__cta{margin-left:0;width:100%;justify-content:center} .grid--3{grid-template-columns:repeat(2,1fr)} .areas{grid-template-columns:repeat(3,1fr)} .nav{display:none} .nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff; padding:1rem 22px;gap:.5rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow)} .header__cta{display:none} .nav-toggle{display:block} .hero h1{font-size:2.3rem} .section__head h2{font-size:1.9rem} } @media (max-width:560px){ .grid--3{grid-template-columns:1fr} .strip__inner{grid-template-columns:1fr 1fr;gap:1.4rem 1rem} .strip__inner > div:nth-child(2)::after{display:none} .areas{grid-template-columns:repeat(2,1fr)} .hero{padding:2.6rem 0 2.4rem} .hero h1{font-size:2.05rem} .hero__sub{font-size:1.12rem;max-width:none;margin:.1rem 0 .9rem} .lede{font-size:1.02rem} .rating-pill{font-size:.8rem;padding:.45rem .85rem} .hero__cta{flex-direction:column;align-items:stretch;gap:.6rem} .hero__cta .btn{width:100%} .hero--photo{background:linear-gradient(180deg,rgba(8,18,40,.82),rgba(9,20,46,.72)),url("../images/hero.jpg") center/cover no-repeat,var(--grad-dark)} .section{padding:3rem 0} .section__head{margin-bottom:2rem} .callbar{display:block} body{padding-bottom:60px} .a11y-fab{bottom:74px} .a11y-panel{bottom:138px;width:240px} .topbar__inner span{display:none} .topbar__inner{justify-content:center} } @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .callbar,.hero::after,.cta::after{animation:none} .btn::after{display:none} *{scroll-behavior:auto} }