@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:Manrope,Arial,sans-serif;color:#12323f;background:#f5f7f6;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{max-width:1200px;margin:auto;padding-left:32px;padding-right:32px}
.demo-strip{background:#082b3b;color:#d0e7e6;text-align:center;padding:8px 15px;font:700 10px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.header{height:92px;padding:0 max(32px,calc((100vw - 1136px)/2));display:flex;align-items:center;gap:42px;background:#f8faf9;position:relative;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;line-height:1.05;letter-spacing:.11em;white-space:nowrap}
.brand-logo{display:block;width:118px;height:78px;object-fit:contain}
.brand-sub{display:block;letter-spacing:.09em;font-size:9px;margin-top:4px}
.header nav{display:flex;gap:30px;margin-left:auto}
.header nav a{font-size:13px;font-weight:700;color:#32515b}
.header nav a:hover,.text-link:hover{text-decoration:underline}
.header-call{background:#0d6170;color:white;padding:15px 20px;border-radius:3px;font-weight:800;font-size:12px;white-space:nowrap}
.menu{display:none}
.hero{min-height:625px;position:relative;background:#153c51;color:white;display:flex;align-items:center;overflow:hidden}
.hero-img{position:absolute;inset:0;background:url('assets/naples-tech-repair.webp') center 55%/cover no-repeat}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,35,53,.94) 0%,rgba(5,35,53,.75) 38%,rgba(5,35,53,.08) 74%),linear-gradient(0deg,rgba(5,35,53,.42),transparent 35%)}
.hero-content{position:relative;z-index:1;width:100%;padding-top:70px;padding-bottom:105px}
.eyebrow,.kicker{font:800 11px/1.3 'DM Sans',sans-serif;letter-spacing:.22em;color:#0b7782}
.eyebrow{color:#9be0d9;display:flex;align-items:center;gap:14px}
.line{width:27px;height:1px;background:#9be0d9}
h1,h2,h3,p{margin-top:0}
.hero h1{font-size:clamp(42px,5.3vw,78px);line-height:1.08;letter-spacing:-.055em;margin:23px 0}
.hero em,.contact em{color:#9ce4dd;font-style:normal}
.hero p{max-width:500px;font-size:17px;line-height:1.8;color:#e2eeee}
.hero-actions,.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:18px 23px;min-height:55px;font-size:13px;font-weight:800;border-radius:3px}
.button span,.text-link span{font-size:18px;font-weight:400}
.primary{background:#8eddd5;color:#073640}
.outline{border:1px solid rgba(255,255,255,.65);color:white}
.secondary{border:1px solid #1b5e69;color:#174956}
.button:hover,.header-call:hover{filter:brightness(.92)}
.hero-foot{font-size:11px;color:#d7e5e7;margin-top:48px}
.image-note{position:absolute;bottom:14px;right:24px;color:#fff;font-size:10px;opacity:.8}
.intro{display:grid;grid-template-columns:1.1fr .7fr;gap:12%;padding-top:88px;padding-bottom:91px;align-items:center}
.intro h2,.section-heading h2,.about h2,.area h2,.contact h2{font-size:clamp(31px,3.5vw,49px);line-height:1.2;letter-spacing:-.055em;margin:16px 0 0}
.intro p,.about p,.area p,.contact p{font-size:16px;line-height:1.9;color:#546b72;margin:20px 0 0}
.services{background:#e9f0ef;padding:92px 0 104px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:36px}
.section-heading h2{max-width:610px}
.text-link{font-size:13px;font-weight:800;color:#0b6673;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{background:#fff;padding:30px 25px 26px;min-height:393px;display:flex;flex-direction:column;position:relative}
.num{font-size:10px;letter-spacing:.15em;font-weight:800;color:#478e94}
.card-image{width:100%;height:132px;object-fit:cover;display:block;margin:20px 0 0}
.card h3{font-size:20px;letter-spacing:-.035em;margin:20px 0 10px}
.card p{font-size:13px;line-height:1.7;color:#5c7279;margin:0}
.card-mark{position:absolute;right:23px;top:26px;font-size:23px;color:#629aa0}
.about{display:grid;grid-template-columns:1fr 1fr;gap:12%;padding-top:116px;padding-bottom:116px;align-items:center}
.big-circle{margin-top:28px;width:300px;height:300px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.big-circle::after{content:"";position:absolute;inset:0;border:8px solid #0b4352;border-radius:inherit;box-sizing:border-box;pointer-events:none;z-index:2}
.circle-logo{position:absolute;inset:24px;width:calc(100% - 48px);height:calc(100% - 48px);object-fit:contain}
.big-circle span{font-size:30px;position:absolute;right:50px;bottom:67px;z-index:3}
.about .text-link{display:inline-block;margin-top:24px}
.area{background:#0b3747;color:#fff;padding:100px 0}
.area-inner{display:grid;grid-template-columns:1fr 380px;gap:90px;align-items:center}
.area h2{margin-top:20px}
.area p{color:#c1d5d9;max-width:510px}
.area .kicker{color:#8eddd5}
.area-card{border:1px solid #4d7a85;min-height:410px;padding:0;overflow:hidden;display:grid;grid-template-rows:220px 1fr}
.area-card>img{width:100%;height:220px;display:block;object-fit:cover}
.area-card-copy{padding:23px 28px 28px;display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:18px}
.area-card-copy>span{color:#8eddd5;font-size:11px;letter-spacing:.2em;font-weight:800}
.area-card-copy strong{font-size:22px;line-height:1.3;letter-spacing:-.04em}
.area-card-copy a{color:#9ce4dd;font-weight:800;font-size:15px;display:flex;justify-content:space-between}
.reviews{background:#e9f0ef;padding:100px 0}
.reviews-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:36px}
.reviews-heading h2{font-size:clamp(31px,3.5vw,49px);line-height:1.2;letter-spacing:-.055em;margin:16px 0 0}
.reviews-rating{display:grid;grid-template-columns:auto auto;column-gap:12px;align-items:center;color:#0b4352}
.reviews-rating strong{font-size:38px;line-height:1;letter-spacing:-.06em}
.reviews-rating>span,.review-stars{color:#d98b20;letter-spacing:.1em}
.reviews-rating small{grid-column:1/-1;color:#546b72;font-size:11px;margin-top:5px}
.reviews-rating b{grid-column:1/-1;color:#0b6673;font-size:12px;margin-top:9px}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.review-card{background:#fff;margin:0;padding:30px;min-height:242px;display:flex;flex-direction:column}
.review-card blockquote{font-size:19px;line-height:1.45;letter-spacing:-.03em;margin:22px 0;color:#12323f}
.review-card figcaption{margin-top:auto;font-size:13px;font-weight:800;color:#0b4352}
.review-card figcaption span{display:block;margin-top:5px;font-size:10px;color:#6b8288;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.contact{text-align:center;padding-top:110px;padding-bottom:120px}
.contact h2{font-size:clamp(40px,5vw,70px)}
.contact em{color:#0b8890}
.contact p{max-width:550px;margin:20px auto}
.contact-actions{justify-content:center}
.contact small{display:block;color:#688087;font-size:11px;margin-top:25px}
footer{background:#072a39;color:#d5e4e6}
.footer-inner{padding-top:35px;padding-bottom:35px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;font-size:12px}
.footer-inner .brand{color:white;margin-right:auto}
.footer-inner .brand-logo{width:128px;height:86px}
.footer-note{flex-basis:100%;font-size:10px;color:#9cb8bc;line-height:1.6}
@media(max-width:900px){.header{gap:20px;padding:0 24px}
.header nav{gap:14px}
.header-call{display:none}
.grid{grid-template-columns:repeat(2,1fr)}
.area-inner{gap:35px;grid-template-columns:1fr 320px}
.review-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){.wrap{padding-left:22px;padding-right:22px}
.demo-strip{font-size:9px}
.header{height:72px;padding:0 22px}
.brand{font-size:14px}
.brand-logo{width:102px;height:68px}
.brand-sub{font-size:8px}
.menu{display:block;margin-left:auto;border:1px solid #9bb7b8;background:transparent;padding:9px 12px;color:#12323f;font-size:12px;font-weight:800}
.header nav{display:none;position:absolute;top:72px;left:0;right:0;background:#f8faf9;padding:20px 22px 28px;box-shadow:0 14px 20px #12323f24;flex-direction:column;gap:22px}
.header nav.open{display:flex}
.header nav a{font-size:16px}
.hero{min-height:610px;align-items:end}
.hero-img{background-position:84% center}
.hero-shade{background:linear-gradient(0deg,rgba(5,35,53,.97),rgba(5,35,53,.6) 60%,rgba(5,35,53,.2))}
.hero-content{padding-top:110px;padding-bottom:58px}
.hero h1{font-size:43px}
.hero p{font-size:15px}
.hero-foot{margin-top:35px}
.image-note{bottom:8px;right:9px;font-size:8px}
.intro,.about,.area-inner{display:block}
.intro{padding-top:70px;padding-bottom:74px}
.intro p{margin-top:22px}
.services{padding:75px 0}
.section-heading{display:block}
.section-heading .text-link{display:inline-block;margin-top:22px}
.grid{grid-template-columns:1fr}
.card{min-height:0}
.card-image{height:150px}
.card h3{margin-top:20px}
.about{padding-top:80px;padding-bottom:85px}
.big-circle{width:210px;height:210px;margin:30px 0 50px}
.big-circle span{right:30px;bottom:44px}
.area{padding:75px 0}
.area-card{margin-top:45px;min-height:360px;grid-template-rows:190px 1fr}
.area-card>img{height:190px}
.area-card-copy{padding:22px}
.reviews{padding:75px 0}
.reviews-heading{display:block}
.reviews-rating{margin-top:26px}
.review-grid{grid-template-columns:1fr}
.review-card{min-height:0}
.contact{padding-top:85px;padding-bottom:90px}
.contact-actions .button{width:100%}
.footer-inner{gap:20px}
.footer-inner .brand{flex-basis:100%}
}

.quote-form{max-width:650px;text-align:left;margin:70px auto 0;padding:34px;background:#e9f0ef}
.quote-form h3{font-size:24px;letter-spacing:-.04em;margin-bottom:5px}
.quote-form p{margin:0 0 20px;font-size:14px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quote-form label{display:block;font-size:13px;font-weight:800;margin-bottom:16px}
.quote-form input,.quote-form textarea{display:block;width:100%;margin-top:8px;border:1px solid #a8bdc0;border-radius:2px;padding:13px 14px;font:500 15px Manrope,Arial,sans-serif;color:#12323f;background:white}
.quote-form input:focus,.quote-form textarea:focus{outline:2px solid #0b8890;outline-offset:1px}
.quote-form .button{border:0;cursor:pointer}
.quote-form small{line-height:1.5;text-align:left;margin-top:14px}
@media(max-width:640px){.quote-form{padding:22px;margin-top:48px}
.fields{grid-template-columns:1fr;gap:0}
}