:root{
  /* Harmonious bright theme (mobile-first, clean & modern) */
  --bg:#f7f9ff;
  --bg2:#eef4ff;
  --bg3:#ffffff;

  --surface: rgba(255,255,255,.72);
  --surface2: rgba(255,255,255,.86);
  --surface3: rgba(255,255,255,.96);

  --text:#0b1220;
  --muted: rgba(11,18,32,.72);
  --muted2: rgba(11,18,32,.58);

  --line: rgba(15,23,42,.12);
  --line2: rgba(15,23,42,.18);

  --brand:#2563eb;   /* blue */
  --brand2:#06b6d4;  /* cyan */
  --hot:#f97316;     /* warm accent */
  --violet:#7c3aed;  /* violet */

  --shadow: 0 18px 50px rgba(2,6,23,.12);
  --radius: 18px;
  --radius2: 24px;
  --container: 1160px;

  --ease: cubic-bezier(.2,.8,.2,1);
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 720px at 8% -15%, rgba(6,182,212,.18), transparent 62%),
    radial-gradient(1050px 700px at 104% 6%, rgba(124,58,237,.12), transparent 64%),
    radial-gradient(1100px 760px at 72% 118%, rgba(249,115,22,.10), transparent 66%),
    radial-gradient(1200px 780px at 48% -22%, rgba(37,99,235,.10), transparent 68%),
    linear-gradient(180deg, var(--bg2), var(--bg) 55%, var(--bg3));
}

a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none !important}

.container{max-width:var(--container);margin:0 auto;padding:0 18px}
@media (min-width: 980px){
  .container{padding:0 22px}
}

/* Accessibility */
.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:-9999px;top:-9999px;background:#fff;color:#000;padding:10px;border-radius:12px}
.skip:focus{left:12px;top:12px;z-index:9999}
:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:3px;border-radius:12px}

/* Reveal animations */
.reveal{
  opacity:0;
  transform: translateY(16px) scale(.985);
  filter: blur(2px);
  transition:
    opacity .65s var(--ease),
    transform .65s var(--ease),
    filter .65s var(--ease);
  transition-delay: var(--d,0s);
  will-change: opacity, transform, filter;
}
.reveal.is-revealed{opacity:1; transform:none; filter:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; filter:none; transition:none}
}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(90deg, rgba(255,255,255,.86), rgba(255,255,255,.70));
  border-bottom: 1px solid var(--line);
}
.header--scrolled{background: rgba(255,255,255,.92); border-bottom-color: var(--line2)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand__mark{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:1000;letter-spacing:.6px;
  background: linear-gradient(135deg, rgba(6,182,212,.34), rgba(124,58,237,.26), rgba(249,115,22,.18));
  border:1px solid var(--line2);
  box-shadow: 0 14px 44px rgba(6,182,212,.12), 0 14px 44px rgba(124,58,237,.10);
}
.brand__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand__name{font-weight:900;line-height:1;letter-spacing:-.01em}
.brand__sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}

.nav{display:flex;align-items:center;gap:12px}
.nav__menu{display:flex;align-items:center;gap:14px}
.nav__link{
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  color: var(--text);
  padding:10px 10px;
  border-radius: 12px;
}
.nav__link:hover{background: var(--surface);color: var(--text)}

.nav__cta{display:flex;align-items:center;gap:10px;margin-left:6px}

.nav__toggle{
  display:none;
  width:46px;height:46px;
  border-radius:16px;
  border:1px solid var(--line);
  background: var(--surface);
  color:var(--text);
}
.nav__toggleLines{
  width:18px;height:2px;background:var(--text);
  display:block;margin:0 auto;position:relative;border-radius:2px;
}
.nav__toggleLines::before,.nav__toggleLines::after{
  content:"";
  position:absolute;left:0;
  width:18px;height:2px;background:var(--text);
  border-radius:2px;
}
.nav__toggleLines::before{top:-6px}
.nav__toggleLines::after{top:6px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius: 16px;
  padding:12px 14px;
  border:1px solid var(--line);
  background: var(--surface);
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  transition: transform .10s var(--ease), filter .12s var(--ease), background .12s var(--ease), border-color .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{background: rgba(255,255,255,.12);border-color: rgba(255,255,255,.18)}
.btn:active{transform: translateY(1px) scale(.99)}
.btn--primary,
.btn--solid,
.btn--ghost{
  background: linear-gradient(135deg, var(--brand) 0%, var(--violet) 55%, var(--brand2) 100%);
  color: #ffffff;
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 55px rgba(37,99,235,.18), 0 18px 60px rgba(124,58,237,.14);
}
.btn--primary:hover,
.btn--solid:hover,
.btn--ghost:hover{filter: brightness(1.07) saturate(1.05)}
.btn--ghost{background: linear-gradient(135deg, var(--brand) 0%, var(--violet) 55%, var(--brand2) 100%)}
.btn--lg{padding:14px 16px;border-radius:18px;font-size:15px}
.btn--block{width:100%}

/* Typography + spacing */
h1{font-size: clamp(30px, 4.0vw, 46px); line-height:1.08; margin:14px 0 12px; letter-spacing:-0.02em}
h2{font-size: clamp(22px, 2.6vw, 34px); line-height:1.18; margin:0; letter-spacing:-0.01em}
h3{font-size: 18px; line-height:1.25; margin:0 0 8px}
.h3{font-size:18px;margin:0 0 8px}
.lead{font-size:16px;color: var(--text);max-width: 74ch}
.muted{color: var(--muted)}
.tiny{font-size:12px;color: var(--muted2)}

p{margin:0; line-height:1.75}
.lead{margin:0 0 14px}
.section__head{margin-bottom:18px}
.section__head p{margin-top:10px;max-width: 80ch}

/* Hero */
.hero{position:relative;padding:38px 0 18px;overflow:hidden}
.hero__bg{
  position:absolute;inset:-2px;
  background:
    radial-gradient(1000px 520px at 12% 10%, rgba(37,99,235,.18), transparent 62%),
    radial-gradient(900px 520px at 88% 14%, rgba(6,182,212,.14), transparent 60%),
    radial-gradient(900px 520px at 52% 112%, rgba(99,102,241,.12), transparent 58%),
    linear-gradient(180deg, #f8fafc, #eef2ff);
  background-size: cover;
  background-position: center;
}
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background: url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?auto=format&fit=crop&w=1800&q=70');
  background-size: cover;
  background-position: center;
  opacity: .16;
  filter: saturate(1.05) contrast(1.04);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(248,250,252,.70), rgba(248,250,252,.92));
}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns: 1.15fr .85fr;gap:18px;align-items:stretch}

.hero__content{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  background: var(--surface2);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding:24px;
}

.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.80);
  font-weight:900;
  font-size:13px;
  color: rgba(11,18,32,.92);
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
}
.dot{width:10px;height:10px;border-radius:50%;background: var(--brand);box-shadow: 0 0 0 6px rgba(37,99,235,.12)}

.hero__title{
  color: rgba(11,18,32,.96);
  text-shadow: 0 10px 40px rgba(37,99,235,.10);
  margin:14px 0 8px;
}
.hero__tagline{
  margin:0 0 12px;
  font-weight:850;
  color: rgba(30,41,59,.78);
}
.hero__lead{
  color: rgba(15,23,42,.86);
  max-width: 78ch;
}

.kw{
  display:inline-flex;
  align-items:center;
  padding:.22em .64em;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 30px rgba(2,6,23,.12);
  line-height:1.05;
  font-weight:800;
  white-space:nowrap;
}
.kw--boilers{
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(6,182,212,.10));
  border-color: rgba(37,99,235,.22);
  color:#1d4ed8;
}
.kw--heat{
  background: linear-gradient(135deg, rgba(6,182,212,.16), rgba(124,58,237,.10));
  border-color: rgba(6,182,212,.22);
  color:#0e7490;
}
.kw--plumb{
  background: linear-gradient(135deg, rgba(249,115,22,.16), rgba(37,99,235,.08));
  border-color: rgba(249,115,22,.22);
  color:#c2410c;
}

.smallNote{margin-top:10px}

.priceTag{
  display:inline-flex;
  align-self:flex-start;
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(6,182,212,.08));
  color: rgba(11,18,32,.86);
}

.hero__sublead{margin-top:12px;max-width: 64ch}

.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.hero__link{flex-basis:100%;display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;text-decoration:none;opacity:.95}
.hero__link:hover{opacity:1;text-decoration:underline}
.hero__link:active{transform:translateY(1px)}

.hero__highlights{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:18px;
}

.mini{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 12px;
  border-radius: 18px;
  border:1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(12px);
}
.mini__icon{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.12);
  border:1px solid var(--line2);
}
.mini__title{font-weight:950;margin-bottom:2px;letter-spacing:-.01em}
.mini__text{font-size:12px;color: var(--muted);line-height:1.5}
.mini--hot{border-color: rgba(124,58,237,.38); box-shadow: 0 18px 55px rgba(124,58,237,.10)}
.mini--hot .mini__icon{
  background: linear-gradient(135deg, rgba(124,58,237,.92), rgba(6,182,212,.80));
  border-color: rgba(255,255,255,.20);
  color:#061018;
  font-weight:950;
}

.hero__card{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding:20px;
}

/* Form */
.form{display:grid;gap:12px;margin-top:12px}
.field{display:grid;gap:6px}
.field span{font-weight:900;font-size:13px;color: var(--text)}
input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  outline:none;
}
input::placeholder, textarea::placeholder{color: var(--muted2)}
textarea{resize: vertical; min-height: 92px}
input:focus, select:focus, textarea:focus{
  border-color: rgba(6,182,212,.55);
  box-shadow: 0 0 0 4px rgba(6,182,212,.14);
}
.form__fineprint{font-size:12px;color: var(--muted);line-height:1.45}

.divider{height:1px;background: rgba(255,255,255,.16);margin:14px 0}
.contactPills{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;
  border-radius: 999px;
  background: var(--surface);
  border:1px solid var(--line);
  text-decoration:none;
  font-weight:950;
  font-size:13px;
}
.pill:hover{background: var(--surface2)}
.pill--hot{
  background: linear-gradient(135deg, rgba(6,182,212,.18), rgba(124,58,237,.14));
  border-color: var(--line2);
  box-shadow: 0 16px 44px rgba(6,182,212,.10);
}

/* Sections */
.section{position:relative;padding:52px 0}
.section::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-28px;
  height:56px;
  background: linear-gradient(90deg,
    rgba(6,182,212,0) 0%,
    rgba(6,182,212,.18) 22%,
    rgba(124,58,237,.16) 52%,
    rgba(249,115,22,.14) 78%,
    rgba(249,115,22,0) 100%);
  filter: blur(12px);
  opacity:.95;
  pointer-events:none;
}
.section--alt{
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(6,182,212,.14), transparent 60%),
    radial-gradient(900px 520px at 88% 0%, rgba(124,58,237,.10), transparent 60%),
    rgba(2,6,23,.02);
}

/* Wrapper \"card\" for each section to feel organized on mobile */
.sectionCard{position:relative;overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(900px 260px at 15% 0%, rgba(6,182,212,.12), transparent 60%),
    radial-gradient(900px 260px at 85% 100%, rgba(124,58,237,.10), transparent 60%),
    rgba(255,255,255,.06);
  border-radius: var(--radius2);
  padding:18px;
  box-shadow: var(--shadow);
}

.ctaBar{
  margin-top:18px;
  border-radius: var(--radius2);
  padding:16px;
  border:1px solid var(--line);
  background:
    radial-gradient(900px 220px at 10% 0%, rgba(6,182,212,.16), transparent 60%),
    radial-gradient(900px 220px at 90% 100%, rgba(124,58,237,.14), transparent 60%),
    rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.ctaBar__title{font-weight:950; letter-spacing:-.01em}
.ctaBar__text{color: var(--muted); margin-top:6px; line-height:1.6}
.ctaBar__actions{display:flex; gap:10px; flex-wrap:wrap}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.tab{
  border-radius: 999px;
  padding:12px 14px;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight:950;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab:hover{background: rgba(255,255,255,.12)}
.tab.is-active{
  background: linear-gradient(135deg, rgba(6,182,212,.98), rgba(124,58,237,.26) 55%, rgba(249,115,22,.68));
  border-color: var(--line2);
  color:#061018;
}

/* Panels */
.tabPanels{position:relative}
.panel{will-change: transform, opacity; display:block; animation:none}
@keyframes panelIn{from{opacity:0; transform: translateY(10px)} to{opacity:1; transform:none}}
.panel.is-active{animation: panelIn .40s var(--ease)}

/* Grids + cards */
.grid{display:grid;grid-template-columns: repeat(12, 1fr);gap:14px}

.card{
  grid-column: span 4;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface2);
  backdrop-filter: blur(12px);
  padding:18px 18px 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: transform .14s var(--ease), background .14s var(--ease);
}
.card:hover{transform: translateY(-2px); background: rgba(255,255,255,.10)}
.card h3{margin:0}
.card p{color: var(--muted); margin:0; line-height:1.75}

.list{
  margin:0;
  padding-left:18px;
  color: var(--muted);
  line-height:1.65;
  display:grid;
  gap:8px;
}
.list li{margin:0}
.card--glow{
  border-color: var(--line2);
  box-shadow: 0 26px 80px rgba(0,0,0,.22), 0 20px 60px rgba(6,182,212,.06), 0 20px 60px rgba(124,58,237,.06);
}

/* Process */
.steps{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:16px;
}
.step{
  grid-column: span 3;
  padding:18px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: var(--surface2);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 48px rgba(0,0,0,.16);
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.step__num{
  width:38px;height:38px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:950;
  background: linear-gradient(135deg, rgba(6,182,212,.22), rgba(124,58,237,.14));
  border:1px solid var(--line2);
  flex:0 0 auto;
}
.step__body{display:grid; gap:6px}
.step__title{font-weight:950; letter-spacing:-.01em}
.step__text{color: var(--muted);font-size:13px;line-height:1.6}

/* Stats */
.stats{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:16px;
}
.stat{
  grid-column: span 4;
  border:1px solid var(--line);
  background: var(--surface2);
  backdrop-filter: blur(12px);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 16px 48px rgba(0,0,0,.14);
  display:grid;
  gap:8px;
}
.stat__num{font-weight:950; letter-spacing:-.01em}
.stat__label{color: var(--muted); font-size:13px; line-height:1.55}

/* Works / gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:16px;
}
.shot{
  grid-column: span 3;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--surface2);
  box-shadow: 0 16px 48px rgba(0,0,0,.16);
  transition: transform .16s var(--ease), filter .16s var(--ease);
}
.shot:hover{transform: translateY(-2px); filter: brightness(1.03)}
.shot img{
  width:100%;
  height:230px;
  object-fit:cover;
  filter:saturate(1.06) contrast(1.04);
}
.note{
  margin-top:16px;
  border-radius: 18px;
  padding:14px 16px;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  line-height:1.65;
}
.note strong{color: var(--text)}

/* Note bar */
.noteBar{
  margin-top:18px;
  border-radius: 18px;
  padding:16px 16px;
  border:1px solid var(--line);
  background:
    radial-gradient(700px 180px at 20% 0%, rgba(6,182,212,.14), transparent 60%),
    radial-gradient(700px 180px at 80% 100%, rgba(124,58,237,.12), transparent 60%),
    rgba(255,255,255,.06);
}
.noteBar__title{font-weight:950;letter-spacing:-.01em}
.noteBar__text{color: var(--muted);margin-top:6px; line-height:1.6}

/* Reviews */
.reviews{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:16px;
}
.review{
  grid-column: span 4;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: var(--surface2);
  backdrop-filter: blur(12px);
  padding:18px;
  box-shadow: 0 16px 48px rgba(0,0,0,.14);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition: transform .14s var(--ease);
}
.review:hover{transform: translateY(-2px)}
.review__top{display:flex;align-items:center;gap:12px}
.avatarImg{width:44px;height:44px;border-radius:16px;object-fit:cover;border:1px solid rgba(255,255,255,.22);box-shadow: 0 10px 24px rgba(0,0,0,.18)}
.review__name{font-weight:950}
.review__meta{color: var(--muted); font-size:12px; margin-top:2px}
.review p{margin:0; color: var(--muted); line-height:1.75}
.stars{
  font-weight:950;
  letter-spacing:2px;
  font-size:12px;
  margin:6px 0 2px;
  background: linear-gradient(90deg, var(--brand), var(--hot), var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* FAQ (details/summary) */
.accordion{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:16px;
}
.acc{
  grid-column: span 6;
  border:1px solid var(--line);
  background: var(--surface2);
  backdrop-filter: blur(12px);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.14);
}
.acc summary{
  list-style:none;
  cursor:pointer;
  padding:16px 16px;
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"+";
  width:30px;height:30px;
  border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.12);
  transition: transform .22s var(--ease);
  flex:0 0 auto;
}
.acc[open] summary::after{transform: rotate(45deg)}
.acc__body{
  padding:0 16px 16px;
  color: var(--muted);
  line-height:1.75;
}

/* Contacts */
.section--dark{
  background:
    radial-gradient(1000px 520px at 15% 0%, rgba(6,182,212,.14), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(124,58,237,.12), transparent 60%),
    rgba(255,255,255,.02);
}

.contactGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
  align-items:start;
}
.contactGrid > div:first-child{grid-column: span 7}

.contactCards{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:16px;
}
.contactCard{
  grid-column: span 4;
  border:1px solid var(--line);
  background: var(--surface2);
  backdrop-filter: blur(12px);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 16px 48px rgba(0,0,0,.14);
  display:grid;
  gap:10px;
}
.contactCard__title{font-weight:950; color: var(--text)}
.contactCard__value{font-weight:950; text-decoration:none}
.contactCard__note{color: var(--muted); font-size:12px; line-height:1.55}
.contactList a{font-weight:950; text-decoration:none}
.contactActions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

.mapCard{
  grid-column: span 5;
  border:1px solid var(--line);
  background: var(--surface2);
  backdrop-filter: blur(12px);
  border-radius: var(--radius2);
  padding:18px;
  box-shadow: var(--shadow);
  display:grid;
  gap:12px;
}
.mapCard__top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.mapCard__title{font-weight:950}
.mapCard__sub{color: var(--muted); font-size:12px; margin-top:2px}
.mapCard__link{text-decoration:none; color: var(--muted); font-weight:950}
.mapCard__link:hover{color: var(--text)}

.mapWrap{
  border:1px solid var(--line2);
  background: var(--surface);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.mapFrame{width:100%; height:340px; border:0; display:block; filter: saturate(1.05) contrast(1.05)}
.mapNote{padding:12px 14px; border-top:1px solid var(--line); color: var(--muted)}

.footer{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line);
  color: var(--muted);
  font-size:13px
}
.footer a{color: var(--muted);text-decoration:none}
.footer a:hover{color: var(--text)}
.sep{opacity:.5}

/* Floating actions (phone / WhatsApp / to top) */
.floatActions{
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fab{
  width: 54px;
  height: 54px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(135deg, var(--brand) 0%, var(--violet) 55%, var(--brand2) 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 18px 55px rgba(37,99,235,.18), 0 18px 60px rgba(124,58,237,.14);
  backdrop-filter: blur(12px);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform .12s var(--ease), filter .12s var(--ease), box-shadow .12s var(--ease), opacity .12s var(--ease);
  animation: fabGlow 2.8s ease-in-out infinite;
}
.fab:hover{filter: brightness(1.06) saturate(1.05)}
.fab:active{transform: translateY(1px) scale(.98)}
.fab svg{width: 22px; height: 22px; fill: currentColor}

@keyframes fabGlow{
  0%,100%{ box-shadow: 0 18px 55px rgba(37,99,235,.18), 0 18px 60px rgba(124,58,237,.12); }
  50%{ box-shadow: 0 22px 70px rgba(37,99,235,.24), 0 22px 70px rgba(6,182,212,.16); }
}

.fab--top{
  animation: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}
.fab--top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr;}
  .hero__highlights{grid-template-columns: 1fr;}
  .card{grid-column: span 6}
  .step{grid-column: span 6}
  .stat{grid-column: span 6}
  .shot{grid-column: span 6}
  .review{grid-column: span 6}
  .acc{grid-column: span 12}
  .contactCard{grid-column: span 6}
  .mapCard{grid-column: span 12}
}

@media (max-width: 760px){
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav__menu{
    position: fixed;
    inset: 72px 12px auto 12px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px;
    border-radius: 22px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
  }
  body.navOpen .nav__menu{display:flex}
  .nav__cta{margin:4px 0 0}
  .nav__link{padding:12px 12px; font-size:15px}

  /* Floating action buttons already fixed; no extra bottom padding needed */

  .section{padding:42px 0}
  .sectionCard{position:relative;overflow:hidden;padding:16px}

  .section__head{margin-bottom:16px}
  .section__head p{margin-top:10px}

  .hero{padding:32px 0 12px}
  .hero__content{padding:18px}
  .hero__card{padding:18px}

  .hero__actions{gap:10px}
  .btn--lg{width:100%}

  .card{grid-column: span 12}
  .step{grid-column: span 12}
  .stat{grid-column: span 12}
  .contactCard{grid-column: span 12}
  .mapCard{grid-column: span 12}
  .acc{grid-column: span 12}
  .shot{grid-column: span 12}
  .review{grid-column: span 12}

  .shot img{height:220px}
  .mapFrame{height:280px}

  .brand__sub{display:none}
}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
}

.sectionCard::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 10px);
  opacity:.18;
  mix-blend-mode: overlay;
  pointer-events:none;
}

.card:active{transform: translateY(1px) scale(.99)}

.shot{transition: transform .12s var(--ease), filter .12s var(--ease)}
.shot:active{transform: scale(.99)}

.btn--primary{position:relative;overflow:hidden}
.btn--primary::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width:40%;
  height:180%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  transform: rotate(18deg) translateX(-120%);
  transition: transform .55s var(--ease);
  pointer-events:none;
  opacity:.85;
}
.btn--primary:hover::before{transform: rotate(18deg) translateX(320%)}


/* Mini helper card under the lead form */
.miniCard{
  margin-top: 14px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}
.miniCard__title{
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.miniList{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}
.miniList li{ margin: 6px 0; }

/* Hero Typography */
@media (max-width: 640px){
  .hero__title{font-size:34px;}
  .hero__tagline{font-size:14px;}
}