@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); }
/* ======= Mobile-first: everything below is the small-screen base.
   Larger-screen enhancements only live inside @media (min-width: 760px). ======= */
:root {
  /* Visual direction: Florida night sky (trust, engineering) + sun/amber as the one warm accent.
     Dark navy is now a dominant field color (hero, trust band, final CTA), not just text,
     and the accent is more saturated — fixes the "pale, no authority" feedback. */
  --bg: #F5F6F5;
  --surface: #FFFFFF;
  --border: #E1E5E4;
  --ink: #122C46;
  --ink-soft: #57677A;
  --accent: #E0960A;
  --accent-dark: #8F5800; /* darkened from #A86A06 — the lighter value measured 4.4:1 on white, below the 4.5:1 AA floor for small text */
  --accent-soft: #FDEFD6;
  --night: #0A1B2C;
  --night-2: #1B4868;
  --tap: 46px; /* minimum touch target */
  /* spacing scale — used on newer / redesigned surfaces (calculator page) */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px;
}
* { box-sizing: border-box; }
/* iOS Safari ignores overflow-x on <html> alone for touch panning: it must be on both
   html and body, and touch-action locks one-finger drags to vertical (pinch-zoom still works). */
/* hidden first as the fallback; clip wins where supported (iOS 16+) and, unlike hidden,
   doesn't turn body into a scroll container — which would break the sticky header. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; position: relative; touch-action: pan-y pinch-zoom; max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  padding-bottom: 72px; /* keeps the fixed mobile CTA bar from covering content */
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.preview-flag {
  background: var(--night); color: #D9D5C8; font-size: 12px; text-align: center;
  padding: 8px 14px; font-weight: 600;
}
.preview-flag b { color: #F2B544; }
h1, h2, h3 { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
a { color: inherit; }

/* header */
header { position: sticky; top: 0; background: rgba(245,246,245,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); z-index: 30; }
.nav { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; gap: 8px; }
.logo { font-family:'IBM Plex Sans', sans-serif; font-weight:700; font-size: 19px; letter-spacing: .01em; display:flex; align-items:center; gap: 8px; min-width: 0; white-space: nowrap; min-height: 44px; }
.logo-icon-wrap { background: var(--ink); border-radius: 7px; padding: 4px 6px; display:flex; align-items:center; justify-content:center; }
.logo-icon { height: 20px; width: auto; display:block; }
.logo span { color: var(--accent-dark); } /* bright amber is ~2.3:1 on the light header; the darker tone passes */
.nav-right { display:flex; align-items:center; gap: 10px; }
.phone { display:none; } /* mobile keeps phone access in the call button + fixed bar only */
.btn { font-family: inherit; font-weight: 700; font-size: 14px; border-radius: 10px; padding: 12px 18px; min-height: var(--tap); text-decoration: none; display: inline-flex; align-items:center; justify-content:center; border: none; cursor: pointer; transition: background .15s ease, transform .1s ease; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: #F0A523; }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: 10px 14px; font-size: 13px; min-height: 44px; white-space: nowrap; }
.nav-right .btn-sm { display: none; } /* mobile: the fixed bottom bar carries the primary action; desktop re-enables below */
.btn[disabled] { opacity: .6; cursor: default; }

/* Custom icon set — inline SVG sprite (see <svg><defs> near top of <body>),
   recolored per-context via currentColor. Replaces the old per-color PNG
   pairs: no more raster cropping/aspect-ratio bugs, one file, any size. */
.icon { width: 20px; height: 20px; display:inline-block; vertical-align:middle; flex-shrink:0; fill: none; stroke: currentColor; color: var(--ink); }
.btn .icon, .pill .icon, .hero-eyebrow .icon, .phone .icon { margin-right: 6px; margin-top: -2px; }
.hero-eyebrow .icon, .hero-note .icon { color: #fff; }

/* mobile hamburger menu */
.menu-btn { display:flex; align-items:center; justify-content:center; width: 44px; height:44px; flex: 0 0 44px; background:none; border:1px solid var(--border); border-radius:8px; cursor:pointer; }
.menu-btn span, .menu-btn::before, .menu-btn::after { content:""; display:block; width:18px; height:2px; background:var(--ink); }
.menu-btn { flex-direction:column; gap:4px; }
/* Mobile call button: same quiet outline as the menu button, so "call" is one tap away on every screen
   (the header is sticky) without competing with the amber estimate button. Desktop shows the number instead. */
.call-btn { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 44px; border:1px solid var(--border); border-radius:8px; color: var(--ink); }
.call-btn .icon { width:22px; height:22px; margin:0; }
.call-btn:active { background: var(--border); }
.mobile-nav { display:none; flex-direction:column; gap: 2px; padding: 8px 20px 16px; border-top: 1px solid var(--border); }
.mobile-nav.open { display:flex; }
.mobile-nav a { padding: 12px 4px; font-size: 15px; font-weight:600; min-height: var(--tap); display:flex; align-items:center; border-bottom: 1px solid var(--border); }
.mobile-nav a:last-child { border-bottom:none; }
.nav-links { display:none; } /* desktop only, see media query */

/* hero — full-bleed dark band (photography goes in behind the gradient once available) */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    linear-gradient(100deg, rgba(8,20,33,.92) 0%, rgba(10,27,44,.82) 38%, rgba(10,27,44,.45) 68%, rgba(10,27,44,.25) 100%),
    url('hero-photo.jpg') center 38% / cover no-repeat;
}
.hero.hero--plain { background: linear-gradient(135deg, var(--night) 0%, #15324C 55%, var(--night-2) 100%); }
.hero::before { content:""; position:absolute; right:-10%; top:-25%; width:75%; height:150%; background: radial-gradient(circle, rgba(224,150,10,.10), transparent 60%); pointer-events:none; }
.hero-inner { position: relative; z-index: 2; padding-block: 40px 36px; } /* padding-block, not the shorthand — the shorthand's 0 inline value was overriding .wrap's padding-inline, pinning the hero text to the viewport edge */
.hero-copy { display:flex; flex-direction:column; gap: 16px; max-width: 560px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; font-weight:700; font-size: 12px; padding: 7px 12px; border-radius: 8px; width: fit-content; line-height:1.3; }
.hero-copy h1 { font-size: 38px; line-height: 1.06; letter-spacing: -.015em; color: #fff; }
.hero-sub { font-size: 15.5px; color: rgba(255,255,255,.78); margin:0; }
.hero-ctas { display:flex; flex-direction:column; gap: 10px; }
.hero-ctas .btn { width:100%; }
.pills { display:flex; gap: 10px; }
.pill { background:#fff; color: var(--ink); border:1px solid var(--border); padding:9px 14px; border-radius: 999px; font-size:13px; font-weight:700; text-decoration:none; display:flex; align-items:center; gap:6px; min-height: 44px; }
.hero-note { position: relative; z-index: 2; padding-bottom: 18px; font-size: 12px; color: rgba(255,255,255,.72); }

/* trust band — full-bleed dark, high-contrast amber numbers (replaces the pale card version) */
.trust { background: var(--night); color: #fff; padding: 26px 0; }
.trust-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; text-align:center; }
.trust-num { font-family:'IBM Plex Sans', sans-serif; font-size: 22px; font-weight:700; color: var(--accent); line-height:1.2; }
.trust-label { font-size: 12px; color: rgba(255,255,255,.65); margin-top:2px; }

/* general sections */
.section { padding: 44px 0; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: none; }
.count { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 11px; letter-spacing:.08em; text-transform:uppercase; color: var(--accent-dark); font-weight:700; margin: 0 0 8px; }
.section h2 { font-size: 26px; margin-bottom: 26px; line-height:1.15; }
.steps { display:flex; flex-direction:column; gap: 22px; }
.step-num { width:44px; height:44px; border-radius:50%; background: var(--accent-soft); color:var(--accent-dark); font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:17px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.step h3 { font-size:16px; font-weight:700; font-family:'IBM Plex Sans',sans-serif; margin-bottom:6px; }
.step p { font-size: 14px; color: var(--ink-soft); margin:0; }

/* residential/commercial */
.split { display:flex; flex-direction:column; gap: 16px; }
.card { background: var(--surface); border:1px solid var(--border); border-radius: 14px; padding: 24px; }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; }
.card a { font-weight:700; font-size:14px; text-decoration:none; color: var(--accent-dark); display:inline-block; min-height:44px; display:flex; align-items:center; }

/* testimonials */
.testi-grid { display:flex; flex-direction:column; gap: 16px; }
.testi { background: var(--surface); border:1px solid var(--border); border-radius: 14px; padding: 22px; }
.testi p { font-size: 14px; color: var(--ink); margin: 0 0 14px; font-style: italic; }
.testi .who { font-weight: 700; font-size: 13px; }
.testi .role { font-size: 12px; color: var(--ink-soft); }

/* service areas */
.areas-grid { display:flex; flex-direction:column; gap: 24px; }
.area-map { aspect-ratio: 16/10; border-radius: 14px; background: var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; padding: 20px; overflow:hidden; }
.area-map img { width: 100%; height: 100%; object-fit: contain; }
.section-sub { font-size: 14px; color: var(--ink-soft); margin: -14px 0 24px; max-width: 580px; }
.area-list { display:flex; flex-direction:column; gap: 2px; }
.area-list a { font-size: 15px; font-weight: 700; text-decoration:none; padding: 13px 2px; border-bottom: 1px solid var(--border); min-height: var(--tap); display:flex; align-items:center; }
.area-list a.more { color: var(--accent-dark); border:none; }

/* faq */
.faq { display:flex; flex-direction:column; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; font-weight: 700; font-size: 14.5px; cursor:pointer; min-height: var(--tap); }
.faq-item .a { font-weight: 400; font-size: 14px; color: var(--ink-soft); margin-top: 10px; display:none; }
.faq-item.open .a { display:block; }

/* final CTA — full-bleed dark band, matches hero/trust authority treatment */
.final-cta { background: var(--night); color: #fff; padding: 44px 0; text-align:center; }
.final-cta h2 { color: #fff; font-size: 24px; margin-bottom: 10px; }
.final-cta p { color: rgba(255,255,255,.7); margin: 0 0 20px; font-size: 14px; }
.final-cta .btn { width:100%; }

footer { border-top: 1px solid var(--border); padding: 22px 20px 24px; display:flex; flex-direction:column; gap: 8px; font-size: 13px; color: var(--ink-soft); }

/* fixed mobile contact bar — designed in from the start, not a bolted-on extra */
.mobile-cta { display:flex; position: fixed; bottom:0; left:0; right:0; background: #fff; border-top: 1px solid var(--border); padding: 10px 16px; gap:10px; z-index: 20; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.mobile-cta .btn { flex:1; white-space: nowrap; font-size: 15px; padding-inline: 12px; }

@media (max-width: 360px) {
  .nav-right { gap: 6px; }
  .logo { font-size: 17px; gap: 6px; }
  .logo-icon-wrap { padding: 3px 5px; }
}

/* ======= Larger-screen (tablet/desktop) enhancements from here down ======= */
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .preview-flag { font-size: 13px; padding: 10px 16px; }
  .wrap { padding-inline: 24px; }
  .nav { padding: 18px 24px; }
  .logo { font-size: 21px; }
  .logo-icon { height: 24px; }
  .nav-links { display:flex; gap: 28px; font-size: 14px; font-weight: 600; }
  .nav-links a { text-decoration:none; color: var(--ink-soft); transition: color .15s; padding-block: 12px; }
  .nav-links a:hover { color: var(--ink); }
  .phone { display:inline-block; padding-block: 12px; font-weight: 700; font-size: 14px; text-decoration:none; white-space:nowrap; }
  .nav-right .btn-sm { display: inline-flex; }
  .nav { gap: 12px; }
  .menu-btn, .mobile-nav, .call-btn { display:none !important; }
  .phone .icon { width:16px; height:16px; margin-right:6px; margin-top:-2px; }

  .hero-inner { padding-block: 76px 64px; }
  .hero-copy h1 { font-size: 60px; }
  .hero-sub { font-size: 18px; max-width: 480px; }
  .hero-ctas { flex-direction:row; gap:14px; }
  .hero-ctas .btn { width:auto; }
  .hero-note { padding-bottom: 28px; }

  .trust { padding: 36px 0; }
  .trust-grid { display:flex; justify-content:space-around; gap: 24px; flex-wrap: wrap; }
  .trust-num { font-size: 30px; }

  .section { padding: 72px 0; }
  .section h2 { font-size: 34px; max-width: 580px; }
  .steps { flex-direction:row; gap: 28px; }
  .step { flex:1 1 220px; }

  .split { flex-direction:row; gap: 24px; }
  .card { flex:1 1 320px; padding: 32px; }

  .testi-grid { flex-direction:row; flex-wrap: wrap; gap: 20px; }
  .testi { flex:1 1 calc(50% - 10px); }

  .areas-grid { flex-direction:row; gap: 40px; align-items:center; }
  .area-map { flex: 1 1 360px; aspect-ratio: 4/3; }
  .section-sub { margin: -18px 0 28px; }
  .area-list { flex: 1 1 280px; gap: 10px; }

  .final-cta { padding: 64px 0; }
  .final-cta h2 { font-size: 32px; }
  .final-cta p { font-size: 16px; }
  .final-cta .btn { width:auto; }

  footer { flex-direction:row; justify-content:space-between; padding: 28px 24px; }
  .mobile-cta { display:none; }
}