:root {
  --navy: #071b35;
  --navy-2: #0d2a4d;
  --blue: #087bd8;
  --blue-light: #e9f5ff;
  --red: #ef3d24;
  --text: #16283d;
  --muted: #637184;
  --line: #dbe4ec;
  --off-white: #f5f8fb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Manrope", sans-serif; color: var(--text); overflow-x: hidden; }
h1, h2, h3, h4, h5 { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: -.035em; }
a { text-decoration: none; }
.container { max-width: 1200px; }
.section-pad { padding: 105px 0; }
.topbar { background: var(--navy); color: #c6d4e4; font-size: .78rem; font-weight: 600; }
.topbar a { color: #c6d4e4; }
.brand-logo { width: 235px; height: 67px; object-fit: contain; }
.navbar { padding: .45rem 0; }
.navbar .nav-link { color: var(--text); font-weight: 700; font-size: .9rem; padding: 1rem .65rem !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--blue); }
.btn { border-radius: 7px; font-weight: 800; padding: .8rem 1.25rem; border-width: 2px; font-size: .9rem; }
.btn-lg { padding: 1rem 1.45rem; }
.btn-primary { background: var(--red); border-color: var(--red); }
.btn-primary:hover { background: #d82f18; border-color: #d82f18; transform: translateY(-1px); }

.hero {
  min-height: 680px;
  color: #fff;
  position: relative;
  background:
    linear-gradient(90deg, rgba(4,22,43,.96) 0%, rgba(4,22,43,.87) 48%, rgba(4,22,43,.2) 75%),
    url("assets/hero-hvac.png") center/cover;
}
.hero::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(6,23,43,.25), transparent 45%); pointer-events:none; }
.hero .container { z-index: 1; }
.min-vh-75 { min-height: 680px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 800; color: #d2eaff; display:flex; align-items:center; gap:10px; }
.eyebrow span { width: 28px; height: 3px; background: var(--red); display:inline-block; }
.hero h1 { font-size: clamp(3.2rem, 6vw, 5.9rem); line-height: .99; max-width: 820px; margin: 0; }
.hero h1 em { color: #53b7ff; font-style: normal; }
.hero-copy { max-width: 670px; font-size: 1.13rem; line-height: 1.8; color: #c9d7e7; }
.hero .btn-outline-light:hover { color: var(--navy); }
.hero-trust { font-size: .85rem; font-weight: 700; color: #d9e4ef; }
.hero-trust i { color: #53b7ff; margin-right: 7px; }
.hero-card { position: absolute; right: 5%; bottom: -31px; z-index: 2; background:#fff; color:var(--text); display:flex; align-items:center; gap:15px; padding:17px 24px; border-radius:8px; box-shadow:0 18px 40px rgba(4,20,40,.22); }
.hero-card .icon-wrap { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--red); }
.hero-card small, .hero-card strong { display:block; }
.hero-card small { color:var(--muted); font-size:.72rem; }

.quick-strip { background: #fff; border-bottom: 1px solid var(--line); }
.quick-item { padding: 30px 15px; border-right: 1px solid var(--line); }
.quick-item:last-child { border-right: 0; }
.quick-item strong { font-family:"Plus Jakarta Sans"; font-size:1.55rem; color:var(--blue); display:block; }
.quick-item span { font-size:.75rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.section-kicker { color:var(--blue); font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; display:block; margin-bottom:14px; }
h2 { font-size:clamp(2.2rem, 4vw, 3.5rem); line-height:1.1; margin:0; }
.section-lead { color:var(--muted); line-height:1.8; }
.service-card { border:1px solid var(--line); padding:32px 27px; height:100%; border-radius:10px; transition:.25s ease; background:#fff; }
.service-card:hover { transform:translateY(-7px); box-shadow:0 18px 40px rgba(10,39,70,.1); border-color:transparent; }
.service-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:8px; background:var(--blue-light); color:var(--blue); font-size:1.6rem; margin-bottom:28px; }
.service-icon.hot { background:#fff0ed; color:var(--red); }
.service-icon.green { background:#eaf9f2; color:#169268; }
.service-icon.gold { background:#fff8df; color:#c39100; }
.service-card h3 { font-size:1.28rem; margin-bottom:13px; }
.service-card p { color:var(--muted); font-size:.9rem; line-height:1.75; min-height:96px; }
.service-card a { color:var(--text); font-weight:800; font-size:.82rem; }
.service-card a i { color:var(--blue); margin-left:6px; }

.about-section { background:var(--off-white); }
.about-photo { position:relative; padding:0 35px 35px 0; }
.about-photo::before { content:""; position:absolute; right:0; bottom:0; width:82%; height:80%; background:var(--blue); border-radius:12px; }
.about-photo img { width:100%; height:560px; object-fit:cover; position:relative; border-radius:12px; z-index:1; }
.experience-badge { position:absolute; z-index:2; right:-7px; bottom:70px; background:#fff; padding:19px 22px; border-radius:8px; box-shadow:0 14px 35px rgba(0,0,0,.16); display:flex; align-items:center; gap:12px; }
.experience-badge strong { font:800 2rem "Plus Jakarta Sans"; color:var(--red); }
.experience-badge span { font-size:.72rem; line-height:1.5; font-weight:700; text-transform:uppercase; color:var(--muted); }
.feature { display:flex; gap:17px; margin-bottom:24px; }
.feature > i { flex:0 0 32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--blue); color:#fff; font-size:1.15rem; }
.feature h4 { font-size:1rem; margin:2px 0 5px; }
.feature p { margin:0; color:var(--muted); font-size:.87rem; }

.emergency-section { margin-top:-2px; background:var(--off-white); }
.emergency-inner { background:var(--red); color:#ffd9d2; border-radius:12px; padding:44px 50px; position:relative; overflow:hidden; }
.emergency-inner::after { content:"24/7"; position:absolute; right:28%; top:-40px; font:800 9rem "Plus Jakarta Sans"; color:rgba(255,255,255,.07); }
.emergency-label { font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.73rem; }
.emergency-inner h2 { font-size:clamp(1.8rem, 4vw, 2.7rem); }
.emergency-inner .btn { position:relative; z-index:1; color:var(--red); }
.section-heading { max-width:650px; }
.step { position:relative; text-align:center; padding:15px 35px; }
.step > span { position:absolute; top:-2px; left:25%; font:800 3.8rem "Plus Jakarta Sans"; color:#edf2f6; z-index:-1; }
.step > i { width:74px; height:74px; display:grid; place-items:center; margin:0 auto 25px; border:1px solid var(--line); border-radius:50%; color:var(--blue); font-size:1.75rem; background:#fff; }
.step h3 { font-size:1.12rem; }
.step p { color:var(--muted); font-size:.87rem; line-height:1.7; }

.areas-section { background:var(--navy) radial-gradient(circle at 15% 30%, #153d68 0, transparent 32%); color:#9fb1c5; }
.areas-section p { line-height:1.8; max-width:470px; }
.area-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.area-grid span { background:rgba(255,255,255,.07); color:#e7eff7; padding:16px; border:1px solid rgba(255,255,255,.1); border-radius:6px; font-weight:700; font-size:.84rem; text-align:center; }
.area-grid span::before { content:""; width:6px; height:6px; display:inline-block; background:#53b7ff; border-radius:50%; margin-right:8px; vertical-align:middle; }
.reviews-section { display:none; }
.rating { display:inline-grid; grid-template-columns:auto auto; column-gap:12px; align-items:center; }
.rating strong { font:800 2.8rem "Plus Jakarta Sans"; grid-row:span 2; }
.stars { color:#f5a623; letter-spacing:2px; font-size:.9rem; }
.rating small { color:var(--muted); font-size:.72rem; }
blockquote { border:1px solid var(--line); border-radius:9px; padding:30px; margin:0; height:100%; }
blockquote p { font-size:.95rem; line-height:1.8; margin:18px 0 25px; }
blockquote footer strong, blockquote footer span { display:block; }
blockquote footer strong { font-size:.86rem; }
blockquote footer span { color:var(--muted); font-size:.75rem; margin-top:3px; }

.faq-section { background:var(--off-white); }
.faq-section .accordion { border-top:1px solid var(--line); }
.faq-section .accordion-item { border-color:var(--line); background:transparent; }
.faq-section .accordion-button { background:transparent; color:var(--text); font:700 1rem "Manrope", sans-serif; padding:1.4rem .25rem; box-shadow:none; }
.faq-section .accordion-button:not(.collapsed) { color:var(--blue); }
.faq-section .accordion-button::after { filter:none; }
.faq-section .accordion-body { color:var(--muted); line-height:1.8; padding:.1rem 2.5rem 1.5rem .25rem; }

.contact-section { background:var(--off-white); }
.contact-shell { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 18px 55px rgba(7,27,53,.11); }
.contact-copy { background:var(--navy); color:#aebdd0; padding:55px 48px; }
.contact-copy p { line-height:1.8; margin:20px 0 35px; }
.contact-detail { display:flex; gap:14px; align-items:center; margin:22px 0; }
.contact-detail > i { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.1); color:#54b9ff; }
.contact-detail small, .contact-detail a { display:block; }
.contact-detail small { color:#7f95ad; font-size:.7rem; text-transform:uppercase; font-weight:700; }
.contact-detail a { color:#fff; font-weight:700; margin-top:3px; }
.contact-form-wrap { padding:55px 50px; }
.form-label { font-size:.78rem; font-weight:800; }
.form-control, .form-select { border:1px solid var(--line); border-radius:6px; padding:.85rem 1rem; font-size:.88rem; background:#fafcfd; }
.form-control:focus, .form-select:focus { border-color:var(--blue); box-shadow:0 0 0 .2rem rgba(8,123,216,.1); }
.form-note { color:var(--muted); }

footer { background:#041426; color:#869aae; padding:65px 0 25px; font-size:.83rem; }
.footer-logo { width:225px; height:66px; object-fit:contain; background:#fff; border-radius:5px; }
footer h5 { color:#fff; font-size:.9rem; margin-bottom:18px; }
footer a { color:#869aae; display:block; margin-bottom:10px; }
footer a:hover { color:#fff; }
footer p { line-height:1.8; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:45px; padding-top:22px; font-size:.72rem; }
.whatsapp-float { position:fixed; z-index:99; right:22px; bottom:22px; display:flex; align-items:center; gap:9px; background:#25d366; color:#fff; border-radius:50px; padding:14px 20px; box-shadow:0 8px 25px rgba(0,0,0,.25); font-weight:800; font-size:.88rem; transition:transform .2s ease, background .2s ease; }
.whatsapp-float i { font-size:1.35rem; line-height:1; }
.whatsapp-float:hover { background:#1ebe5d; color:#fff; transform:translateY(-2px); }

@media (max-width: 991.98px) {
  .navbar-collapse { padding:8px 0 18px; }
  .brand-logo { width:190px; height:58px; }
  .hero, .min-vh-75 { min-height:650px; }
  .hero { background-position:66% center; }
  .hero h1 { font-size:4rem; }
  .quick-item:nth-child(2) { border-right:0; }
  .quick-item:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .section-pad { padding:80px 0; }
  .about-photo img { height:480px; }
  .contact-copy, .contact-form-wrap { padding:45px 38px; }
}

@media (max-width: 575.98px) {
  body { padding-bottom:12px; }
  .whatsapp-float { right:16px; bottom:16px; padding:13px 17px; }
  .hero, .min-vh-75 { min-height:650px; }
  .hero { background-position:65% center; }
  .hero h1 { font-size:3.25rem; }
  .hero-copy { font-size:1rem; line-height:1.65; }
  .hero .btn { width:100%; }
  .quick-item { padding:23px 8px; }
  .quick-item span { font-size:.62rem; }
  .section-pad { padding:67px 0; }
  h2 { font-size:2.25rem; }
  .about-photo { padding:0 16px 20px 0; }
  .about-photo img { height:410px; }
  .experience-badge { right:-4px; bottom:42px; padding:12px 15px; }
  .emergency-inner { padding:35px 25px; border-radius:0; }
  .emergency-section .container { padding:0; }
  .area-grid { grid-template-columns:repeat(2, 1fr); }
  .contact-section .container { padding:0; }
  .contact-shell { border-radius:0; }
  .contact-copy, .contact-form-wrap { padding:38px 24px; }
}