/* Fonts (incl. Space Grotesk) are loaded via in each page — NOT @import (which is render-blocking). */ /* Overdoors of Florida — V2 (stylized). Same brand + photos as the faithful replica, modernized: bolder type, whitespace, custom SVG icons, card grids, soft depth. navy #1e376d · crimson #c81e3e · cream #fdf4e3 · gold #ffc834 */ :root{ --navy:#2a4a82; --navy-2:#1e3660; --navy-3:#132345; --crimson:#c81e3e; --crimson-2:#a8172f; --cream:#fdf4e3; --gold:#ffc834; --gold-2:#f4b41a; --ink:#1f2733; --ink-dim:#5b6673; --line:#e7eaf1; --white:#fff; --wash:#f4f6fb; --wash-2:#eef1f8; --serif:'Playfair Display',Georgia,serif; --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --mono:'Space Grotesk',var(--sans); --wrap:1200px; --radius:18px; --radius-sm:12px; --shadow:0 18px 44px rgba(18,36,74,.10); --shadow-sm:0 8px 22px rgba(18,36,74,.09); --shadow-lg:0 30px 70px rgba(14,28,57,.22); --grad-navy:linear-gradient(135deg,#2e5090 0%,#1e3660 60%,#132345 100%); --grad-gold:linear-gradient(135deg,#ffd45e,#ffc834 55%,#f4b41a); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);line-height:1.65;background:var(--white);-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} h1,h2,h3{font-family:var(--serif);line-height:1.12;color:var(--navy);font-weight:800;letter-spacing:-.01em} .section{padding:92px 0} .section.tight{padding:64px 0} /* offset anchor jumps so the sticky header doesn't cover the target */ #services,#reviews,#about{scroll-margin-top:150px} .eyebrow{display:inline-block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-weight:600;font-size:.76rem;color:var(--crimson);margin-bottom:14px} .eyebrow.gold{color:var(--gold-2)} .center{text-align:center} .head{max-width:720px;margin:0 auto 52px;text-align:center} .head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:2px 0 14px} .head p{color:var(--ink-dim);font-size:1.08rem} /* icons */ .ico{width:1.15em;height:1.15em;fill:none;stroke:currentColor;display:inline-block;vertical-align:-.18em;flex:none} .stars .ico.st{width:1em;height:1em;fill:var(--gold);stroke:var(--gold);stroke-width:1} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:700; padding:14px 26px;border-radius:11px;border:2px solid transparent;cursor:pointer;font-size:1rem;transition:transform .16s,box-shadow .16s,background .16s;white-space:nowrap} .btn .ico{width:1.05em;height:1.05em;stroke-width:2.2} .btn-primary{background:var(--crimson);color:#fff;border-color:var(--crimson);box-shadow:0 10px 24px rgba(200,30,62,.28)} .btn-primary:hover{background:var(--crimson-2);border-color:var(--crimson-2);transform:translateY(-2px);box-shadow:0 16px 30px rgba(200,30,62,.34)} .btn-gold{background:var(--grad-gold);color:var(--navy-2);border-color:transparent;box-shadow:0 10px 24px rgba(244,180,26,.32)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(244,180,26,.42)} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff} .btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)} .btn-navy:hover{background:var(--navy-2);transform:translateY(-2px)} .btn-outline{background:transparent;color:var(--navy);border-color:var(--line)} .btn-outline:hover{border-color:var(--crimson);color:var(--crimson)} .btn-lg{padding:17px 34px;font-size:1.07rem} .btn-block{width:100%} /* ============ HEADER ============ */ /* reserve the injected header's space so partials.js injection causes ZERO layout shift (CLS) */ #site-header{display:block;min-height:178px} /* ---- a11y utilities ---- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:8px;top:-52px;z-index:200;background:var(--crimson);color:#fff;padding:10px 18px;border-radius:8px;font-weight:700;transition:top .15s} .skip:focus{top:8px} a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px} .hdr{position:sticky;top:0;z-index:80;background:#fff;transition:box-shadow .2s,padding .2s} .hdr.scrolled{box-shadow:0 6px 24px rgba(18,36,74,.12)} .hdr-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:22px 0} .hdr.scrolled .hdr-grid{padding:12px 0} .hdr-left{display:flex;flex-direction:column;gap:6px} .rating{font-size:.82rem;color:var(--ink-dim);font-weight:600;display:flex;align-items:center;gap:6px} .rating .stars{color:var(--gold);display:inline-flex;gap:1px} .rating b{color:var(--navy)} .rating a.rc{color:var(--crimson);font-weight:700;text-decoration:underline;text-underline-offset:2px;transition:color .15s} .rating a.rc:hover{color:var(--crimson-2)} .serving{font-size:.86rem;color:var(--ink-dim);line-height:1.4} .serving strong{color:var(--navy);font-size:1rem;font-family:var(--serif)} .serving-years{color:var(--crimson);font-weight:700;font-size:.84rem} .brand{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center} .brand img{height:88px;width:auto;transition:height .2s} .hdr.scrolled .brand img{height:66px} .brand .bt{font-family:var(--serif);font-style:italic;font-size:.8rem;color:var(--ink-dim);font-weight:600} .hdr-right{display:flex;align-items:center;justify-content:flex-end;gap:16px} .hdr-call-cta{display:flex;flex-direction:column;align-items:center;gap:4px} .hdr-call-btn{display:inline-flex;align-items:center;gap:10px;background:var(--grad-crimson,var(--crimson));color:#fff;border-radius:12px;padding:10px 20px;text-decoration:none;font-weight:700;transition:transform .15s,box-shadow .15s;box-shadow:0 6px 20px rgba(179,27,50,.28)} .hdr-call-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(179,27,50,.38)} .hdr-call-btn .ico{width:22px;height:22px;stroke:#fff;stroke-width:2.2;fill:none;flex-shrink:0} .hdr-call-inner{display:flex;flex-direction:column;line-height:1.1} .hdr-call-inner em{font-family:var(--mono);font-style:normal;font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.85} .hdr-call-inner b{font-family:var(--serif);font-size:1.12rem;font-weight:800;letter-spacing:.01em} .hdr-call-lead{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)} .hdr-text-sub{justify-content:center} .hdr-contacts{display:flex;flex-direction:column;gap:5px} .hdr-phone{display:inline-flex;align-items:center;gap:9px;color:var(--navy)} .hdr-phone .ico{width:30px;height:30px;padding:6px;border-radius:9px;background:rgba(30,55,109,.08);stroke:var(--navy);stroke-width:2;box-sizing:border-box} .hdr-phone span{display:flex;flex-direction:column;line-height:1.05} .hdr-phone em{font-family:var(--mono);font-style:normal;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)} .hdr-phone b{font-family:var(--serif);font-weight:800;font-size:1.08rem;color:var(--navy)} /* nav strip + dropdowns */ .navstrip{background:var(--grad-navy);border-top:3px solid var(--crimson)} .navstrip .wrap{display:flex;align-items:center;justify-content:center;gap:6px;position:relative} .navstrip>.wrap>a,.navstrip .navtop{color:#eaf0ff;font-weight:600;font-size:1rem;padding:15px 16px;display:inline-flex;align-items:center;gap:7px;position:relative;transition:color .15s} .navstrip>.wrap>a::after,.navstrip .navtop::after{content:"";position:absolute;left:16px;right:16px;bottom:9px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s} .navstrip>.wrap>a:hover,.navstrip .navitem:hover .navtop,.navstrip a.active{color:#fff} .navstrip>.wrap>a:hover::after,.navstrip .navitem:hover .navtop::after,.navstrip a.active::after{transform:scaleX(1)} .navstrip .navitem{position:relative;display:flex;align-items:center} .navstrip .caret{font-size:.66em;transition:transform .2s} .navstrip .navitem:hover .caret{transform:rotate(180deg)} .navstrip .submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:270px;background:#fff;border-radius:0 0 14px 14px;border-top:3px solid var(--gold);box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;z-index:90} .navstrip .navitem:hover .submenu,.navstrip .navitem:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .navstrip .submenu a{display:flex;align-items:center;gap:12px;color:var(--navy);padding:12px 14px;font-weight:600;font-size:.96rem;white-space:nowrap;border-radius:9px;transition:background .14s,color .14s} .navstrip .submenu a .ico{width:20px;height:20px;stroke:var(--crimson);stroke-width:1.9;flex:none} .navstrip .submenu a:hover{background:var(--wash);color:var(--crimson)} .burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px;position:absolute;right:22px;top:22px} .burger span{width:26px;height:3px;background:var(--navy);border-radius:2px} /* ============ HERO ============ */ .hero{position:relative;background:var(--navy-3);color:#fff;overflow:hidden} .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;animation:kenburns 26s ease-in-out infinite alternate} @keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.13)}} @media(prefers-reduced-motion:reduce){.hero-bg{animation:none}} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(14,28,57,.58) 0%,rgba(22,41,79,.42) 45%,rgba(14,28,57,.22) 100%);z-index:1} .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;padding-top:78px;padding-bottom:86px} .hero-copy{max-width:620px} .hero .kick{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);background:rgba(255,200,52,.12);border:1px solid rgba(255,200,52,.3);padding:8px 15px;border-radius:100px;margin-bottom:22px} .hero h1{color:#fff;font-size:clamp(2.5rem,5vw,4rem);line-height:1.05;margin-bottom:18px} .hero h1 em{font-style:normal;color:#fff} .hero .sub{font-size:1.18rem;color:#d5ddef;max-width:520px;margin-bottom:26px} .hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px} .hero-chips li{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600;color:#eaf0ff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:9px 15px;border-radius:100px;backdrop-filter:blur(4px)} .hero-chips .ico{width:18px;height:18px;stroke:var(--gold);stroke-width:2} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .hero-actions .callnote{font-family:var(--mono);font-size:.82rem;color:#aab8d6;letter-spacing:.06em} .hero-actions .callnote b{display:block;font-family:var(--serif);font-size:1.35rem;color:#fff;letter-spacing:0} .hero-trust{display:flex;align-items:center;gap:11px;margin-top:22px;font-size:.9rem;color:#c7d1e8;flex-wrap:wrap} .hero-trust .hstars{display:inline-flex;gap:2px} .hero-trust .hstars .ico{width:17px;height:17px;fill:var(--gold);stroke:var(--gold);stroke-width:1} .hero-trust b{color:#fff;font-weight:700} /* floating request card */ .qcard{background:#fff;color:var(--ink);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.5);position:relative} .qcard::before{content:"";position:absolute;top:0;left:26px;right:26px;height:4px;background:var(--grad-gold);border-radius:0 0 4px 4px} .qcard h2{font-size:1.5rem;margin-bottom:5px} .qcard .sm{font-size:.92rem;color:var(--ink-dim);margin-bottom:18px} .qcard .field{margin-bottom:11px} .qcard input,.qcard select,.qcard textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:.97rem;color:var(--ink);background:var(--wash);transition:border .15s,background .15s} .qcard input:focus,.qcard select:focus,.qcard textarea:focus{outline:none;border-color:var(--crimson);background:#fff;box-shadow:0 0 0 3px rgba(200,30,62,.28)} .qcard ::placeholder{color:#6a7482;opacity:1} .qcard textarea{resize:vertical} .qcard .consent{display:flex;gap:9px;font-size:.76rem;color:var(--ink-dim);margin:6px 0 16px;line-height:1.4} .qcard .consent input{width:auto;margin-top:3px} /* ============ STATS BAND ============ */ .stats{background:var(--grad-navy);color:#fff;position:relative} .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:44px 24px} .stat{text-align:center;padding:8px 10px;position:relative} .stat+.stat::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:1px;height:56px;background:rgba(255,255,255,.14)} .stat .ico{width:30px;height:30px;stroke:var(--gold);stroke-width:1.8;margin-bottom:8px} .stat .num{font-family:var(--mono);font-weight:700;font-size:2.15rem;line-height:1;color:#fff} .stat .lbl{font-size:.85rem;color:#bcc8e6;margin-top:6px;letter-spacing:.02em} /* ============ FEATURES ============ */ /* Why Choose = bold red band with white boxes (keeps stats blue; red sits lower on the page) */ .features{background:linear-gradient(140deg,#d42544 0%,#b31c39 55%,#8f1428 100%);position:relative;overflow:hidden} .features::before{content:"";position:absolute;inset:0;background:url('img/abstract.jpg') center/cover;opacity:.12;mix-blend-mode:screen;pointer-events:none} .features::after{content:"";position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,200,52,.14),transparent 68%);pointer-events:none} .features .wrap{position:relative;z-index:1} .features .head .eyebrow{color:#fff} .features .head h2{color:#fff} .features .head p{color:#fff} .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .fcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden} .fcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform .22s} .fcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent} .fcard:hover::before{transform:scaleX(1)} .chip{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;background:rgba(30,55,109,.08)} .chip .ico{width:28px;height:28px;stroke:var(--navy);stroke-width:1.9} .chip.crimson{background:rgba(200,30,62,.09)}.chip.crimson .ico{stroke:var(--crimson)} .chip.gold{background:rgba(255,200,52,.18)}.chip.gold .ico{stroke:var(--gold-2)} /* white boxes on the red band: crimson icon chips, gold hover accent */ .features .fcard{background:#fff} .features .chip{background:rgba(200,30,62,.12)} .features .chip .ico{stroke:var(--crimson)} .features .fcard::before{background:var(--grad-gold)} .features .fcard:hover{border-color:transparent;box-shadow:var(--shadow-lg)} .fcard h3{font-family:var(--serif);color:var(--navy);font-size:1.25rem;margin-bottom:8px} .fcard p{color:var(--ink-dim);font-size:.97rem} /* ============ SERVICES (card grid) ============ */ .scards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .scard{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--navy-2);min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .2s,box-shadow .2s} .scard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .scard .simg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;transition:transform .4s} .scard:hover .simg{transform:scale(1.06)} .scard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,28,57,.15) 0%,rgba(14,28,57,.55) 55%,rgba(14,28,57,.92) 100%)} .scard .sbadge{position:absolute;top:18px;left:18px;z-index:2;width:48px;height:48px;border-radius:13px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center} .scard .sbadge .ico{width:24px;height:24px;stroke:#fff;stroke-width:2} .scard .sbody{position:relative;z-index:2;padding:26px;color:#fff} .scard h3{color:#fff;font-size:1.4rem;margin-bottom:8px} .scard p{color:#d5ddef;font-size:.95rem;margin-bottom:14px} .scard .more{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:600;font-size:.86rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold)} .scard .more .ico{width:16px;height:16px;stroke:var(--gold);stroke-width:2.4;transition:transform .18s} .scard:hover .more .ico{transform:translateX(4px)} /* ============ INTRO / VALUE ============ */ .intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .intro .ic-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .intro .ic-media img{width:100%;height:440px;object-fit:cover} .intro .ic-media .badge{position:absolute;left:24px;bottom:24px;background:#fff;border-radius:14px;padding:16px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px} .intro .ic-media .badge .ico{width:34px;height:34px;stroke:var(--crimson);stroke-width:1.9} .intro .ic-media .badge b{font-family:var(--serif);font-size:1.5rem;color:var(--navy);display:block;line-height:1} .intro .ic-media .badge span{font-size:.82rem;color:var(--ink-dim)} .intro h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:16px} .intro p{color:var(--ink-dim);margin-bottom:15px} .intro .btn{margin-top:10px} /* ============ REVIEWS ============ */ .reviews{background:var(--cream)} .rtop{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:46px;text-align:center} .rtop .rscore{font-family:var(--mono);font-weight:700;font-size:3rem;color:var(--navy);line-height:1} .rtop .stars{color:var(--gold);display:inline-flex;gap:3px}.rtop .stars .ico{width:22px;height:22px;fill:var(--gold);stroke:var(--gold);stroke-width:1} .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .rcard{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);position:relative;border:1px solid var(--line)} .rcard .quote{font-family:var(--serif);font-size:3.4rem;line-height:.6;color:var(--gold);height:26px;display:block} .rcard .rstars{color:var(--gold);display:inline-flex;gap:2px;margin:6px 0 10px}.rcard .rstars .ico{width:17px;height:17px;fill:var(--gold);stroke:var(--gold);stroke-width:1} .rcard p{color:var(--ink);font-size:.98rem;margin-bottom:16px} .rcard .who{font-weight:700;color:var(--navy)} .rcard .when{font-size:.82rem;color:var(--ink-dim)} /* ============ ABOUT / VIDEO ============ */ .about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .about h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:16px} .about p{color:var(--ink-dim);margin-bottom:15px} .about .areas{color:var(--navy);font-weight:600} .vid{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit} .vid img{width:100%;height:400px;object-fit:cover} .vid .play{position:absolute;inset:0;display:grid;place-items:center} .vid .play span{width:78px;height:78px;border-radius:50%;background:var(--crimson);display:grid;place-items:center;box-shadow:0 12px 30px rgba(200,30,62,.5);transition:transform .18s} .vid .play span::before{content:"";border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;margin-left:5px} .vid:hover .play span,.vid:focus-visible .play span{transform:scale(1.08)} /* video lightbox modal */ .vmodal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(10,16,32,.86)} .vmodal.open{display:flex} .vmodal-inner{position:relative;width:100%;max-width:920px} .vmodal video{width:100%;max-height:80vh;border-radius:12px;display:block;background:#000} .vmodal-close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s} .vmodal-close:hover,.vmodal-close:focus-visible{background:rgba(255,255,255,.28)} /* ============ CTA BAND ============ */ /* reserve the injected CTA band's space so partials.js injection causes ZERO layout shift (CLS) */ #site-cta{display:block;min-height:236px} @media(max-width:700px){#site-cta{min-height:398px}} .ctaband{background:var(--grad-navy);color:#fff;position:relative;overflow:hidden} .ctaband::before{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,200,52,.16),transparent 70%)} .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:34px;padding:58px 0;flex-wrap:wrap;position:relative;z-index:1} .cta-inner h2{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);margin:2px 0 8px} .cta-inner p{color:#c8d3ec;max-width:460px} .cta-btns{display:flex;flex-direction:column;gap:12px} /* ============ FOOTER ============ */ #site-footer{display:block;min-height:360px} .ft{background:var(--navy-3);color:#c8d3ec;padding-top:64px} .ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:44px} .ft h3{color:#fff;font-family:var(--serif);font-size:1.12rem;margin-bottom:16px} .fbrand img{height:62px;width:auto;margin-bottom:14px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))} .fbrand p{font-size:.92rem;color:#98a6c8;max-width:290px;margin-bottom:16px} .pay{display:flex;gap:8px}.pay img{height:26px;background:#fff;border-radius:5px;padding:3px 5px} .fnav{list-style:none;display:grid;gap:10px} .fnav li,.fnav a{font-size:.94rem;color:#a9b6d6} .fnav a:hover{color:var(--gold)} .fcontact{list-style:none;display:grid;gap:13px} .fcontact li{display:flex;align-items:flex-start;gap:11px;font-size:.93rem;color:#c0cbe6} .fcontact .ico{width:19px;height:19px;stroke:var(--gold);stroke-width:2;margin-top:2px;flex:none} .fcontact a:hover{color:var(--gold)} .ft-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem;color:#7e8db0;max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px} /* ============ FLOATING RAIL ============ */ .rail{position:fixed;right:16px;bottom:22px;z-index:70;display:flex;flex-direction:column;gap:11px} .rail a{width:52px;height:52px;border-radius:50%;background:var(--crimson);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(200,30,62,.4);transition:transform .16s,background .16s} .rail a:nth-child(2){background:var(--navy)} .rail a:hover{transform:translateY(-3px) scale(1.05)} .rail .ico{width:23px;height:23px;stroke:#fff;stroke-width:2} /* ============ INTERIOR PAGES ============ */ .pagehero{position:relative;background:var(--navy-2);background-size:cover;background-position:center;color:#fff;padding:78px 0 70px;text-align:center;overflow:hidden} .pagehero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,41,79,.74),rgba(14,28,57,.92));z-index:0} .pagehero .wrap{position:relative;z-index:1} .pagehero h1{color:#fff;font-size:clamp(2rem,4vw,3rem);margin-bottom:12px} .pagehero p{color:#d5ddef;max-width:720px;margin:0 auto;font-size:1.12rem} .crumb{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.78rem;color:#9fb0d4;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-bottom:18px} .crumb a:hover{color:var(--gold)} .pagegrid{display:grid;grid-template-columns:1fr 396px;gap:48px;align-items:start} .pagemain h2{font-size:1.7rem;margin:30px 0 12px} .pagemain h2:first-child{margin-top:0} .pagemain p{margin-bottom:15px;color:var(--ink)} .pagemain .pimg{border-radius:var(--radius);box-shadow:var(--shadow);margin:12px 0 24px;width:100%;height:340px;object-fit:cover;background-size:cover;background-position:center} .checks{list-style:none;margin:8px 0 24px;display:grid;gap:13px} .checks li{position:relative;padding-left:38px;color:var(--ink)} .checks li::before{content:"";position:absolute;left:0;top:0;width:26px;height:26px;background:rgba(200,30,62,.1);border-radius:8px} .checks li::after{content:"";position:absolute;left:7px;top:7px;width:12px;height:8px;border-left:2.4px solid var(--crimson);border-bottom:2.4px solid var(--crimson);transform:rotate(-45deg)} .pageside{position:sticky;top:172px;display:flex;flex-direction:column;gap:20px} .pageside .qcard::before{display:none} /* credentials / license block (contact page) */ .creds{border:1px solid var(--line);border-left:4px solid var(--crimson);border-radius:12px;padding:22px 26px;background:var(--wash);margin-top:26px} .creds h2{font-size:1.28rem;margin:0 0 14px} .creds .checks{margin:0} .creds .checks li{padding-top:1px} .creds .lic{display:inline-block;margin-top:3px;font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:var(--ink-dim)} .creds .lic b{color:var(--navy);letter-spacing:.12em} .contact-photo{border-radius:14px;box-shadow:var(--shadow);width:100%;height:300px;object-fit:cover;margin-top:26px;display:block} .sidecard{background:var(--grad-navy);color:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);text-align:center} .sidecard .sc-ic{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.12);display:grid;place-items:center;margin:0 auto 14px} .sidecard .sc-ic .ico{width:26px;height:26px;stroke:var(--gold);stroke-width:2} .sidecard h3{font-family:var(--serif);color:#fff;font-size:1.2rem;margin-bottom:6px} .sidecard .big{font-family:var(--serif);font-size:1.7rem;font-weight:800;color:var(--gold);display:block;margin-bottom:12px} .sidecard p{color:#c2cee8;font-size:.9rem;margin-bottom:16px} /* reviews page */ .review-summary{text-align:center;max-width:640px;margin:0 auto 44px} .review-summary .big48{font-family:var(--mono);font-weight:700;font-size:3.4rem;color:var(--navy);line-height:1} .review-summary .stars{display:inline-flex;gap:4px;margin:8px 0 6px} .review-summary .stars .ico{width:26px;height:26px;fill:var(--gold);stroke:var(--gold);stroke-width:1} .review-summary .rcount{color:var(--ink-dim);font-size:1.02rem} .review-summary .rbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px} /* one review per row: a clean, well-separated single-column feed */ .review-cols{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:22px} .review-cols .rcard{width:100%;padding:28px 32px} .rhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px} .rhead .rstars{margin:0} .rhead .when{font-size:.85rem;color:var(--ink-dim);white-space:nowrap} .rcard>p{color:var(--ink);font-size:1.04rem;line-height:1.62;margin:0 0 14px} .rmeta{display:flex;align-items:center;gap:8px;margin-top:2px} .rmeta .who{font-weight:700;color:var(--navy);font-size:1rem} .rmeta .who::before{content:"— "} .rreply{margin-top:16px;padding:14px 18px;background:var(--wash);border-left:3px solid var(--crimson);border-radius:0 10px 10px 0} .rreply b{display:block;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--crimson);margin-bottom:5px} .rreply p{font-size:.9rem;color:var(--ink-dim);margin:0;line-height:1.55} .loadmore-wrap{max-width:820px;margin:30px auto 0;text-align:center} .reviews-end{color:var(--ink-dim);font-size:.95rem;margin-top:6px} .reviews-end a{color:var(--crimson);font-weight:700} @media(max-width:640px){.review-cols .rcard{padding:24px 22px}.rcard>p{font-size:1rem}} /* suppliers marquee */ .suppliers{padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;overflow:hidden} .suppliers-hd{text-align:center;margin-bottom:20px} .marquee-outer{overflow:hidden;position:relative} .marquee-outer::before,.marquee-outer::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none} .marquee-outer::before{left:0;background:linear-gradient(to right,#fff,transparent)} .marquee-outer::after{right:0;background:linear-gradient(to left,#fff,transparent)} .marquee-track{display:flex;width:max-content;animation:marquee-scroll 22s linear infinite} .marquee-slide{display:flex;align-items:center;gap:72px;padding:0 36px;flex-shrink:0} .marquee-slide img{height:72px;width:auto;object-fit:contain;opacity:.85;filter:grayscale(15%);transition:opacity .2s,filter .2s} .marquee-slide img:hover{opacity:1;filter:none} @keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-25%)}} @media(prefers-reduced-motion:reduce){.marquee-track{animation:none}} /* faq */ .faqlist{max-width:880px;margin:0 auto;display:grid;gap:14px} .faq{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .16s} .faq[open]{box-shadow:var(--shadow)} .faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:700;color:var(--navy);font-family:var(--serif);font-size:1.12rem;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--crimson);font-size:1.6rem;font-weight:300;transition:transform .18s;flex:none} .faq[open] summary::after{transform:rotate(45deg)} .faq .fa{padding:0 24px 22px;color:var(--ink-dim)} /* blog */ .bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s} .post:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .post .pimg{height:196px;background-size:cover;background-position:center} .post .pbody{padding:22px} .post .pdate{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--crimson);font-weight:600} .post h3{font-size:1.2rem;margin:8px 0 10px} .post p{color:var(--ink-dim);font-size:.94rem;margin-bottom:14px} .post a[href]{font-family:var(--mono);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--crimson)} /* reveal-on-scroll — only hidden when JS is active, so content is never lost */ /* opacity-only (no transform/translate) so the fade-in never registers as a Cumulative Layout Shift */ .js .reveal{opacity:0;transition:opacity .6s ease} .js .reveal.in{opacity:1} @media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}} /* ============ RESPONSIVE ============ */ @media(max-width:1024px){ .fgrid,.scards,.rgrid,.bloggrid{grid-template-columns:repeat(2,1fr)} } @media(max-width:960px){ .section{padding:64px 0} .hero .wrap{grid-template-columns:1fr;gap:34px;padding-top:54px;padding-bottom:60px} .hero-copy{max-width:none} .intro .wrap,.about .wrap{grid-template-columns:1fr;gap:32px} .intro .ic-media{order:-1} .stats .wrap{grid-template-columns:repeat(2,1fr);gap:28px} .stat:nth-child(3)::before{display:none} /* compact mobile header: logo + phone icon + burger; full nav collapses behind the burger */ #site-header{min-height:64px} .hdr-grid{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0} .hdr.scrolled .hdr-grid{padding:7px 0} .hdr-left{display:none} .brand{flex-direction:row;align-items:center;gap:9px;text-align:left;flex:1 1 auto;min-width:0} .brand img{height:46px} .hdr.scrolled .brand img{height:42px} .brand .bt{display:none} .hdr-right{gap:10px;flex:none} .hdr-right .btn{display:none} .hdr-phone span{display:none} .burger{display:flex;position:static;right:auto;top:auto} .navstrip{display:none} .navstrip.open{display:block} .navstrip .wrap{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:6px 0} .navstrip>.wrap>a,.navstrip .navtop{padding:13px 18px;justify-content:flex-start;width:100%} .navstrip>.wrap>a::after,.navstrip .navtop::after{display:none} .navstrip .navitem{flex-direction:column;align-items:stretch;width:100%} .navstrip .submenu{position:static;transform:none;opacity:1;visibility:hidden;display:none;min-width:0;background:rgba(0,0,0,.18);border:0;border-radius:0;box-shadow:none;padding:2px 0 6px} .navstrip .navitem.open .submenu{display:block;visibility:visible} .navstrip .submenu a{color:#cfe0ff;justify-content:flex-start;padding:11px 30px} .navstrip .submenu a:hover{background:rgba(255,255,255,.06);color:var(--gold)} .navstrip .submenu a .ico{stroke:var(--gold)} .cta-inner{flex-direction:column;align-items:flex-start} .ft-grid{grid-template-columns:1fr 1fr} .pagegrid{grid-template-columns:1fr;gap:30px}.pageside{position:static} } @media(max-width:600px){ .fgrid,.scards,.rgrid,.bloggrid{grid-template-columns:1fr} .stats .wrap{grid-template-columns:1fr 1fr} .ft-grid{grid-template-columns:1fr} .rtop .rscore{font-size:2.4rem} .hero-actions{flex-direction:column;align-items:flex-start} } /* CLS fix: reserve the JS-injected header height so it doesn't push content down */ #site-header{min-height:178px} @media(max-width:960px){#site-header{min-height:64px}}