/* ============================================================
   BLACK STAR ROOFING — Modernized UI redesign
   Keeps all original content, swaps visual language only.
   ============================================================ */

*,:before,:after{box-sizing:border-box;margin:0;padding:0}

:root{
  --page-bg:#f4f6f8;
  --surface:#f5f7fa;
  --surface-2:#ffffff;
  --surface-3:#edf2f6;
  --ink:#12202a;
  --ink-soft:#4f5e69;
  --ink-faint:#7a8792;
  --teal:#0e5b63;
  --teal-2:#0a3f46;
  --teal-3:#06242a;
  --mint:#d9f3c5;
  --mint-2:#bee9a3;
  --stroke:rgba(17,34,45,.11);
  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shell:100%;
  --section-pad:clamp(28px,4.2vw,56px);
  --site-pad:clamp(16px,4.2vw,56px);
  --roof-accent:#d6a24d;
}

html{scroll-behavior:smooth;overflow-x:hidden}

body{
  font-family:'Manrope',sans-serif;
  background:var(--page-bg);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding:0;
}

img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* Shared shell */
.alert-bar,
.nav,
.mobile-menu,
.hero,
.ticker-wrap,
.sec,
.sec-cta,
.footer{
  width:var(--shell);
  margin-left:0;
  margin-right:0;
}

/* Alert */
.alert-bar{
  min-height:42px;
  background:linear-gradient(120deg,#041924,#0b3643);
  color:#d4e2e9;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 var(--site-pad);
}

.alert-inner{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#c7d8df;
}

.alert-phone{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:#e7f4f9;
}

/* Nav */
.nav{
  position:sticky;
  top:0;
  z-index:500;
  min-height:78px;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--stroke);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--site-pad);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.nav--stuck{box-shadow:0 8px 22px rgba(15,35,47,.12)}

.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-img{height:38px;width:auto;display:block}

.nav-gem{
  width:22px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 34%,#1bb8a3 0 32%,#0a3d45 33% 100%);
  box-shadow:0 2px 9px rgba(10,63,70,.3);
}

.nav-logo-text{font-size:16px;font-weight:700;letter-spacing:-.02em}

.nav-links{
  display:flex;
  align-items:center;
  list-style:none;
  gap:30px;
}

.nav-links a{
  font-size:13px;
  color:var(--ink-soft);
  transition:color .25s;
}

.nav-links a:hover{color:var(--teal)}

.nav-right{display:flex;align-items:center;gap:16px}

.nav-license{font-size:12px;color:var(--ink-faint)}

.btn-nav-cta{
  height:42px;
  padding:0 22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#0f5760,#0a3840);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  transition:transform .25s,box-shadow .3s;
}

.btn-nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(12,66,73,.25)}

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  border:0;
  background:transparent;
  cursor:pointer;
  min-width:44px;
  min-height:44px;
}

.hamburger span{
  display:block;
  width:20px;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:.25s var(--ease);
}

.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{
  display:none;
  flex-direction:column;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--stroke);
  padding:12px 18px 18px;
  position:sticky;
  top:78px;
  z-index:490;
}

.mobile-menu.open{display:flex}

.mm-link{
  font-size:14px;
  color:var(--ink-soft);
  padding:11px 4px;
  border-bottom:1px solid rgba(16,36,47,.08);
}

.mm-cta{
  margin-top:12px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--teal),#0b444b);
  color:#fff;
  font-size:13px;
  font-weight:700;
}

/* Hero */
.hero{
  background:#0d2a35;
  min-height:max(760px,calc(100vh - 120px));
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,rgba(5,18,25,.88) 8%,rgba(7,31,40,.72) 44%,rgba(10,52,62,.52) 100%),
    url('https://images.unsplash.com/photo-1464146072230-91cabc968266?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixlib=rb-4.1.0&q=80&w=1800') center/cover no-repeat;
  transform:scale(1.02);
}

.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 28%,rgba(214,162,77,.25),transparent 34%),
    linear-gradient(0deg,rgba(3,13,19,.58) 0%,rgba(3,13,19,.12) 60%,rgba(3,13,19,.28) 100%);
  pointer-events:none;
}

/* Hide old scenic layers to match the clean reference style */
.h-sky,.h-haze,.h-mtn-far,.h-mtn-near,.h-trees,.h-ground,.h-vign{display:none}

.h-body{
  position:relative;
  z-index:2;
  padding:76px var(--site-pad) 24px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:34px;
  align-items:center;
}

.h-left{
  max-width:740px;
  margin:0;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.h-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#d6e5ec;
  margin-bottom:20px;
  opacity:0;
  animation:fu .7s var(--ease) forwards .2s;
  font-weight:700;
}

.h-ey-dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--roof-accent);
}

.h-title{
  font-size:clamp(40px,5.9vw,78px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-.026em;
  color:#fff;
  text-transform:uppercase;
}

.h-title .ln{display:block;overflow:hidden}

.h-title .ln span{
  display:block;
  transform:translateY(108%);
  opacity:0;
  animation:lr .9s var(--ease) forwards;
}

.h-title .last-ln{
  color:var(--roof-accent);
}

.h-title sup{font-size:.26em;font-weight:600}

.h-sub{
  margin-top:16px;
  font-size:17px;
  line-height:1.6;
  color:#dceaf0;
  max-width:620px;
  opacity:0;
  animation:fu .7s var(--ease) forwards .9s;
}

.h-sub em{font-style:normal;color:var(--roof-accent)}

.h-btns{
  margin-top:26px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
  opacity:0;
  animation:fu .7s var(--ease) forwards 1.06s;
}

.h-trust{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  opacity:0;
  animation:fu .7s var(--ease) forwards 1.2s;
}

.h-trust span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(208,233,243,.36);
  background:rgba(3,20,29,.34);
  color:#e1eff5;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}

.btn-start,
.btn-ghost,
.btn-phone,
.btn-call{
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s,box-shadow .3s,background .3s,color .3s,border-color .3s;
}

.btn-start{
  min-height:50px;
  padding:0 32px;
  background:linear-gradient(135deg,var(--roof-accent),#b67f2e);
  color:#261a09;
  font-size:13px;
  font-weight:800;
  letter-spacing:.01em;
}

.btn-start:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(8,35,44,.34);
}

.btn-ghost{
  min-height:50px;
  padding:0 30px;
  border:1px solid rgba(225,240,247,.52);
  color:#edf6fb;
  font-size:13px;
  font-weight:700;
  background:rgba(3,20,29,.36);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(6,28,39,.56)}

.h-right{
  display:flex;
  justify-content:flex-end;
  width:100%;
}

.f-card{
  width:min(470px,100%);
  background:rgba(5,24,33,.62);
  border:1px solid rgba(198,229,241,.24);
  border-radius:22px;
  padding:22px;
  box-shadow:0 24px 40px rgba(2,16,22,.36);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  opacity:0;
  transform:translateY(20px);
  animation:cr .8s var(--ease) forwards 1.05s;
}

.f-tabs{display:flex;gap:8px;flex-wrap:wrap}

.f-tab{
  border:1px solid rgba(199,230,242,.28);
  background:rgba(255,255,255,.05);
  color:#d9edf4;
  padding:8px 13px;
  border-radius:999px;
  font-size:11px;
  cursor:pointer;
}

.f-tab--on{background:#e9f5fb;border-color:#e9f5fb;color:#102734}

.f-card-title{
  margin-top:16px;
  font-size:34px;
  letter-spacing:-.02em;
  line-height:1.08;
  color:#fff;
}

.f-card-sub{margin-top:8px;color:#c2d8e3;font-size:14px}

.f-points{
  margin-top:12px;
  list-style:none;
  display:grid;
  gap:8px;
}

.f-points li{
  position:relative;
  padding-left:20px;
  color:#d6e7ef;
  font-size:12px;
  line-height:1.4;
}

.f-points li::before{
  content:'';
  position:absolute;
  left:0;
  top:6px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--roof-accent),#ba842f);
  box-shadow:0 0 0 2px rgba(214,162,77,.18);
}

.f-media{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:12px;
}

.f-vid{
  min-height:116px;
  border-radius:16px;
  background:
    linear-gradient(140deg,rgba(6,30,41,.42),rgba(6,30,41,.62)),
    url('https://images.unsplash.com/photo-1605152276897-4f618f831968?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixlib=rb-4.1.0&q=80&w=900') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.f-vid::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(140deg,rgba(9,44,58,.06),rgba(7,31,42,.25));
}

.f-play{
  width:50px;
  height:50px;
  border-radius:50%;
  background:#fff;
  color:#0a3f46;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 26px rgba(8,44,51,.28);
  position:relative;
  z-index:1;
}

.f-play svg{width:15px;height:15px;margin-left:2px}

.f-showcase{
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(196,228,240,.22);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.f-showcase-img{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(199,227,239,.18),rgba(191,219,232,.08));
  min-height:80px;
}

.f-showcase-lbl{
  text-align:center;
  padding:9px 10px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#d9ebf2;
}

.f-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}

.f-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(207,233,243,.25);
  cursor:pointer;
}

.f-dot--on{width:24px;border-radius:999px;background:var(--roof-accent)}

.h-bar{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  padding:0 var(--site-pad) 28px;
  position:relative;
  z-index:2;
}

.h-bar-warranty,
.h-bar-stats,
.h-bar-cta{
  border-radius:18px;
  border:1px solid rgba(203,232,244,.26);
  min-height:196px;
  background:rgba(5,26,36,.5);
}

.h-bar-warranty{
  color:#fff;
  padding:20px;
}

.hbw-title{font-size:31px;line-height:1.05;letter-spacing:-.02em}
.hbw-sub{margin-top:8px;color:#d5e8f1;font-size:13px;line-height:1.45}

.hbw-layers{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.hbl{height:8px;border-radius:999px;opacity:.95}

.h-bar-stats{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:20px;
}

.hbs-avs{display:flex;margin-bottom:8px}

.hbs-av{
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid rgba(5,26,36,.65);
  margin-left:-10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
}

.hbs-av:first-child{margin-left:0}

.hbs-num{font-size:52px;font-weight:800;line-height:1;color:#fff}
.hbs-lbl{font-size:12px;color:#d4e7f0;margin-top:5px;text-align:center}

.h-bar-cta{
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.hbc-title{font-size:30px;line-height:1.08;letter-spacing:-.02em;color:#fff}

.hbc-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  color:var(--roof-accent);
  font-size:13px;
  font-weight:700;
}

.hbc-link:hover{gap:12px}

/* Ticker */
.ticker-wrap{
  margin-top:16px;
  background:linear-gradient(130deg,#063138,#07262c);
  border-radius:18px;
  border:1px solid rgba(181,232,241,.14);
  overflow:hidden;
  padding:14px 0;
}

.ticker-track{
  display:flex;
  width:max-content;
  white-space:nowrap;
  align-items:center;
  animation:ticker 28s linear infinite;
}

.ti{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 30px;
  color:rgba(222,243,246,.8);
  font-size:12px;
}

.td{width:5px;height:5px;border-radius:50%;background:var(--mint)}

/* Shared sections */
.sec{
  margin-top:16px;
  border-radius:var(--radius-xl);
  padding:var(--section-pad);
  border:1px solid var(--stroke);
  position:relative;
}

.sec::before{display:none}

.eyebrow{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:12px;
  display:block;
  font-weight:700;
}

.sec-title{
  font-size:clamp(34px,4.9vw,58px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:800;
}

.sec-title em{font-style:normal;color:var(--teal)}

.sec-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:32px;
}

.see-all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink-soft);
  border-bottom:1px solid rgba(15,36,48,.22);
  padding-bottom:2px;
}

.see-all:hover{color:var(--teal);border-bottom-color:var(--teal)}

/* Services section (dark) */
.sec-svc{
  background:linear-gradient(145deg,#0b4c54,#082f35 76%);
  color:#f2fbff;
  border-color:rgba(178,228,236,.15);
}

.sec-svc .eyebrow{color:#c8e7ee}
.sec-svc .sec-title{color:#fff}
.sec-svc .sec-title em{color:var(--mint)}
.sec-svc .see-all{color:#d6eff4;border-bottom-color:rgba(210,238,244,.35)}

.svc-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.svc-card{
  background:rgba(8,44,51,.4);
  border:1px solid rgba(188,230,236,.12);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .28s var(--ease),border-color .3s;
}

.svc-card:hover{transform:translateY(-3px);border-color:rgba(210,243,248,.35)}

.svc-img{width:100%;height:180px;object-fit:cover;opacity:.92}

.svc-body{padding:18px 16px 20px}

.svc-tag{
  display:inline-block;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#d7f6ff;
  background:rgba(181,224,235,.14);
  border:1px solid rgba(181,224,235,.24);
  padding:4px 10px;
  border-radius:999px;
}

.svc-name{margin-top:10px;font-size:24px;line-height:1.1;letter-spacing:-.02em;color:#fff}
.svc-desc{margin-top:8px;font-size:13px;color:rgba(232,248,252,.8);line-height:1.55}

.svc-card--dark{
  background:rgba(4,25,30,.78)!important;
  border-color:rgba(208,241,246,.22);
}

.svc-dark-inner{padding:24px 18px 20px;display:flex;flex-direction:column;flex:1;gap:10px}
.svc-dark-name{font-size:29px;line-height:1.06;color:#fff}
.svc-dark-tag{
  width:fit-content;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(216,243,197,.15);
  border:1px solid rgba(216,243,197,.24);
  color:var(--mint);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.svc-dark-desc{font-size:13px;line-height:1.6;color:rgba(221,243,250,.82);flex:1}

.btn-call{
  height:42px;
  padding:0 20px;
  width:fit-content;
  background:var(--mint);
  color:#123128;
  font-size:12px;
  font-weight:800;
}

.btn-call:hover{background:#e8f9db}

/* Why */
.sec-why{
  background:var(--surface-2);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
}

.why-left{display:flex;flex-direction:column;gap:26px;justify-content:space-between}

.why-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.why-cta-phone{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--teal);
  text-decoration:none;
}
.why-cta-phone:hover{color:var(--ink)}

.why-list{display:flex;flex-direction:column}

.why-item{
  display:flex;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid rgba(15,36,48,.1);
}

.why-item:first-child{border-top:1px solid rgba(15,36,48,.1)}

.why-num{font-size:38px;font-weight:800;color:rgba(11,78,86,.2);line-height:1}
.why-name{font-size:24px;line-height:1.1;letter-spacing:-.02em}
.why-desc{margin-top:7px;font-size:14px;line-height:1.62;color:var(--ink-soft)}

.why-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(14,37,49,.12);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface);
}

.why-stat{padding:18px 12px;text-align:center}
.why-stat-div{width:1px;background:rgba(14,37,49,.11)}
.why-stat-n{font-size:38px;font-weight:800;color:var(--teal);line-height:1}
.why-stat-l{margin-top:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

.why-right{position:relative;overflow:hidden;border-radius:20px;min-height:460px;background:#0d1c14}

.why-right img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

.why-badge{
  position:absolute;
  left:20px;
  bottom:20px;
  border-radius:14px;
  padding:14px 16px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(14,37,49,.12);
  backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column;
  gap:3px;
}

.why-badge-num{font-size:28px;font-weight:800;color:var(--teal)}
.why-badge-lbl{font-size:12px;color:var(--ink-soft);line-height:1.35}

/* Projects */
.sec-proj{
  background:linear-gradient(145deg,#081f25,#06161c);
  color:#f3fbff;
  border-color:rgba(170,218,226,.16);
}

.sec-proj .eyebrow{color:#c8e7ee}
.sec-proj .sec-title{color:#fff}
.sec-proj .sec-title em{color:var(--mint)}
.sec-proj .see-all{color:#d6eff4;border-bottom-color:rgba(210,238,244,.35)}

.proj-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-height:220px}

/* Loading skeleton */
.proj-loading{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  width:100%;
}
.proj-loading span{
  display:block;height:260px;border-radius:16px;
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.06) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

.proj-card{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/3}
.proj-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .6s var(--ease)}
.proj-card:hover img{transform:scale(1.05)}

.proj-over{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(2,16,22,.95) 0,rgba(2,16,22,.42) 54%,rgba(2,16,22,.1) 100%);
}

.proj-info{position:absolute;inset:auto 0 0 0;padding:18px}

.proj-tag{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(216,243,197,.14);
  border:1px solid rgba(216,243,197,.24);
  color:var(--mint);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.proj-name{margin-top:9px;font-size:24px;line-height:1.12;letter-spacing:-.02em;color:#fff}

.proj-loc{
  margin-top:7px;
  display:flex;
  align-items:center;
  gap:6px;
  color:rgba(223,246,252,.82);
  font-size:12px;
}

.proj-desc{margin-top:8px;font-size:13px;line-height:1.55;color:rgba(223,246,252,.85)}
.proj-quote{
  margin-top:8px;
  font-size:11.5px;
  line-height:1.5;
  color:rgba(200,232,245,.78);
  font-style:italic;
  padding-left:10px;
  border-left:2px solid rgba(150,210,230,.35);
}
.proj-link{margin-top:10px;display:inline-block;font-size:12px;color:var(--mint);font-weight:700}

/* Reviews */
.sec-rev{background:var(--surface-2)}

.rev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:28px}

.rev-rating{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:13px;color:var(--ink-soft)}

.rev-stars,.rev-stars-sm{display:flex;gap:4px}

.rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

.rev-card{
  border-radius:16px;
  border:1px solid rgba(16,37,49,.11);
  background:var(--surface);
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  gap:13px;
}

.rev-quote{font-size:20px;line-height:1.52;letter-spacing:-.01em}
.rev-div{height:1px;background:rgba(16,37,49,.1)}
.rev-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rev-name{font-size:14px;font-weight:800}
.rev-loc{font-size:12px;color:var(--ink-soft)}

/* CTA */
.sec-cta{
  margin-top:16px;
  min-height:500px;
  overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid rgba(173,222,230,.24);
  position:relative;
  display:flex;
  align-items:center;
}

.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8)}

.cta-over{
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(4,31,37,.94),rgba(10,70,77,.82)),
    radial-gradient(circle at 74% 20%,rgba(154,209,217,.24),transparent 40%);
}

.cta-body{
  position:relative;
  z-index:1;
  width:min(700px,100%);
  padding:var(--section-pad);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.cta-title{font-size:clamp(44px,6vw,72px);line-height:.95;letter-spacing:-.03em;color:#fff;font-weight:800}

.cta-sub{font-size:15px;line-height:1.7;color:rgba(228,246,251,.9)}

.cta-btns{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px}

.btn-phone{
  min-height:50px;
  padding:0 24px;
  background:var(--mint);
  color:#113127;
  font-size:14px;
  font-weight:800;
}

.btn-phone:hover{background:#e8f9db}

/* Footer */
.footer{
  margin-top:16px;
  background:linear-gradient(145deg,#071b21,#051117);
  border-radius:var(--radius-xl);
  border:1px solid rgba(183,228,235,.14);
  padding:36px var(--section-pad) 24px;
  color:#e9f5fa;
}

.ft-top{display:grid;grid-template-columns:1.65fr 1fr 1fr 1.2fr;gap:26px}

.ft-brand{display:flex;flex-direction:column;gap:10px}
.ft-logo{display:flex;align-items:center;gap:10px}
.ft-gem{
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 34%,#24c4ab 0 32%,#0a3d45 33% 100%);
}

.ft-name{font-size:17px;font-weight:800;letter-spacing:-.02em}
.ft-tag{font-size:13px;line-height:1.68;color:rgba(221,243,248,.78);max-width:380px}

.ft-col{display:flex;flex-direction:column;gap:8px}
.ft-col-head{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#c8e8ef;font-weight:700;margin-bottom:2px}
.ft-col a{font-size:13px;color:rgba(221,243,248,.8)}

.ft-line{margin-top:24px;height:1px;background:rgba(188,230,236,.16)}

.ft-bottom{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ft-copy{font-size:12px;color:rgba(221,243,248,.64)}
.ft-legal{display:flex;gap:18px}
.ft-legal a{font-size:12px;color:rgba(221,243,248,.74)}

/* ── Quote Modal ────────────────────────────────── */
.qm-backdrop{
  position:fixed;inset:0;z-index:9200;
  background:rgba(4,18,10,.7);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .32s var(--ease);
}
.qm-backdrop.qm--open{opacity:1;pointer-events:all}

.qm-panel{
  position:relative;
  width:100%;max-width:680px;
  max-height:92vh;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 32px 100px rgba(4,18,10,.4);
  transform:translateY(22px) scale(.97);
  transition:transform .35s var(--ease);
  display:flex;flex-direction:column;
}
.qm-backdrop.qm--open .qm-panel{transform:translateY(0) scale(1)}

.qm-close{
  position:absolute;top:16px;right:16px;z-index:10;
  width:34px;height:34px;border-radius:50%;
  background:rgba(10,31,20,.07);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#0a1f14;transition:background .2s;
}
.qm-close:hover{background:rgba(10,31,20,.14)}

.qm-body{overflow-y:auto;padding:36px 36px 28px;flex:1}

/* Header */
.qm-logo{
  display:flex;align-items:center;gap:9px;
  margin-bottom:18px;
}
.qm-gem{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),#0a5c3e);
}
.qm-logo span{font-size:13px;font-weight:700;color:#0a1f14;letter-spacing:.02em}
.qm-title{
  font-size:26px;font-weight:800;letter-spacing:-.02em;
  color:#0a1f14;line-height:1.15;
}
.qm-sub{
  margin-top:8px;font-size:14px;line-height:1.6;
  color:#4f5e69;margin-bottom:24px;
}

/* Form layout */
.qm-form{display:flex;flex-direction:column;gap:16px}
.qm-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qm-field{display:flex;flex-direction:column;gap:6px}
.qm-field--full{grid-column:1/-1}

.qm-label{
  font-size:12.5px;font-weight:600;color:#0a1f14;letter-spacing:.01em;
}
.qm-label span{color:#2a8c5a}
.qm-optional{font-weight:400;color:#7a8792;font-size:11.5px}

.qm-input,.qm-select,.qm-textarea{
  padding:11px 14px;
  border:1.5px solid #d8e4dc;
  border-radius:10px;
  font-size:14px;color:#0a1f14;
  background:#fff;
  outline:none;
  transition:border-color .18s;
  font-family:inherit;
  width:100%;box-sizing:border-box;
}
.qm-input::placeholder,.qm-textarea::placeholder{color:#9aaba2}
.qm-input:focus,.qm-select:focus,.qm-textarea:focus{border-color:#2a8c5a}
.qm-input--err{border-color:#e05555!important}
.qm-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234f5e69' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.qm-textarea{resize:vertical;min-height:100px}

/* Upload */
.qm-upload{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:20px;
  border:1.5px dashed #b8d4c4;border-radius:10px;
  cursor:pointer;color:#4f5e69;font-size:13px;
  transition:border-color .18s,background .18s;
  text-align:center;
}
.qm-upload:hover{border-color:#2a8c5a;background:#f4faf7}

/* Submit */
.qm-submit{
  width:100%;padding:14px;
  background:linear-gradient(135deg,#0e5c32,#0a3d22);
  color:#fff;font-size:15px;font-weight:700;
  border:none;border-radius:12px;cursor:pointer;
  letter-spacing:.02em;
  transition:opacity .2s,transform .2s;
  margin-top:4px;
}
.qm-submit:hover{opacity:.9;transform:translateY(-1px)}

/* Privacy note */
.qm-privacy{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:#7a8792;margin-top:8px;
  justify-content:center;text-align:center;
}

/* Success state */
.qm-success{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  padding:56px 36px;gap:16px;
}
.qm-success-icon{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#0e5c32,#0a3d22);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.qm-success-title{font-size:28px;font-weight:800;color:#0a1f14;letter-spacing:-.02em}
.qm-success-msg{font-size:15px;line-height:1.65;color:#4f5e69;max-width:420px}

/* Responsive */
@media(max-width:600px){
  .qm-body{padding:24px 20px 20px}
  .qm-row{grid-template-columns:1fr}
  .qm-title{font-size:22px}
}

/* ── Media Lightbox ─────────────────────────────── */
.mlb-backdrop{
  position:fixed;inset:0;z-index:9500;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .28s ease;
}
.mlb-backdrop.mlb--open{opacity:1;pointer-events:all}
.mlb-close{
  position:absolute;top:16px;right:16px;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.mlb-close:hover{background:rgba(255,255,255,.22)}
.mlb-video{
  max-width:90vw;max-height:85vh;
  width:100%;border-radius:12px;
  outline:none;
  transform:scale(.95);transition:transform .28s ease;
}
.mlb-image{
  max-width:90vw;max-height:85vh;
  object-fit:contain;border-radius:12px;
  transform:scale(.95);transition:transform .28s ease;
}
.mlb-backdrop.mlb--open .mlb-video,
.mlb-backdrop.mlb--open .mlb-image{transform:scale(1)}

/* ── Project Modal ──────────────────────────────── */
.pm-backdrop{
  position:fixed;inset:0;z-index:9000;
  background:rgba(2,12,7,.78);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.pm-backdrop.pm--open{opacity:1;pointer-events:all}

.pm-panel{
  position:relative;
  display:grid;
  grid-template-columns:1fr 380px;
  width:100%;max-width:1060px;
  max-height:90vh;
  background:var(--cream3);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 40px 120px rgba(10,6,2,.55);
  transform:translateY(24px) scale(.97);
  transition:transform .38s var(--ease);
}
.pm-backdrop.pm--open .pm-panel{transform:translateY(0) scale(1)}

/* Close btn */
.pm-close{
  position:absolute;top:14px;right:14px;z-index:10;
  width:36px;height:36px;border-radius:50%;
  background:rgba(26,12,4,.75);border:1px solid rgba(196,168,130,.3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(240,235,227,.9);transition:background .2s,border-color .2s;
}
.pm-close:hover{background:rgba(196,168,130,.25);border-color:var(--tan)}

/* Gallery */
.pm-gallery{
  display:flex;flex-direction:column;
  background:#061209;
  min-height:0;
}
.pm-img-wrap{
  position:relative;flex:1;min-height:0;overflow:hidden;
}
.pm-img-main{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .15s ease;
}
.pm-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  background:rgba(240,235,227,.88);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);transition:background .2s;
}
.pm-nav:hover{background:#fff}
.pm-nav--prev{left:14px}
.pm-nav--next{right:14px}
.pm-count{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.1em;
  color:rgba(255,255,255,.78);
  background:rgba(0,0,0,.38);
  padding:3px 10px;border-radius:999px;
  pointer-events:none;
}

/* Thumbnail strip */
.pm-thumbs{
  display:flex;gap:6px;padding:10px 12px;
  background:#061209;overflow-x:auto;
  scrollbar-width:none;
}
.pm-thumbs::-webkit-scrollbar{display:none}
.pm-thumb{
  flex:0 0 60px;height:42px;border-radius:6px;
  overflow:hidden;border:2px solid transparent;
  background:none;padding:0;cursor:pointer;
  transition:border-color .2s;
}
.pm-thumb img{width:100%;height:100%;object-fit:cover}
.pm-thumb--on{border-color:var(--tan)}

/* Details panel */
.pm-details{
  padding:36px 28px 28px;
  display:flex;flex-direction:column;
  overflow-y:auto;
  background:#0a1f10;
}
.pm-tag{
  display:inline-block;
  padding:4px 12px;border-radius:999px;
  background:rgba(160,220,180,.12);border:1px solid rgba(160,220,180,.4);
  color:#a8e0b8;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.pm-title{
  margin-top:14px;
  font-family:'Cormorant Garamond',serif;
  font-size:26px;line-height:1.15;letter-spacing:-.01em;
  color:#fff;font-weight:700;
}
.pm-loc{
  margin-top:10px;display:flex;align-items:center;gap:7px;
  font-size:12px;color:#a8e0b8;font-weight:500;
}
.pm-divider{
  margin:18px 0;height:1px;
  background:linear-gradient(90deg,rgba(196,168,130,.35),transparent);
}
.pm-desc{
  font-size:14px;line-height:1.7;color:rgba(240,235,227,.88);
}
.pm-quote{
  margin-top:18px;
  font-size:13px;line-height:1.65;
  font-style:italic;color:rgba(240,235,227,.75);
  padding:14px 16px;
  background:rgba(196,168,130,.08);
  border-left:3px solid var(--tan);
  border-radius:0 8px 8px 0;
}
.pm-cta{margin-top:auto;padding-top:22px}
.pm-btn{
  display:inline-block;
  padding:13px 28px;
  background:var(--tan);color:var(--ink);
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;text-decoration:none;
  transition:background .2s,transform .2s;
}
.pm-btn:hover{background:var(--cream);transform:translateY(-1px)}

/* Responsive */
@media(max-width:740px){
  .pm-panel{
    grid-template-columns:1fr;
    grid-template-rows:50vh auto;
    max-height:92vh;
    border-radius:16px;
  }
  .pm-details{padding:22px 20px 24px}
  .pm-title{font-size:22px}
}

/* Scroll reveal */
.sc{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.sc.sc--right{transform:translateX(26px)}
.sc.vis{opacity:1!important;transform:none!important}

/* Animations */
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes lr{from{opacity:0;transform:translateY(108%)}to{opacity:1;transform:translateY(0)}}
@keyframes cr{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Responsive */
@media (max-width:1180px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-top{grid-template-columns:1fr 1fr}
  .h-bar{grid-template-columns:1fr 1fr}
  .h-bar-warranty{grid-column:1/-1}
}

@media (max-width:980px){
  .nav-links,
  .nav-license{display:none}

  .hamburger{display:flex}

  .h-body{
    grid-template-columns:1fr;
    gap:24px;
    padding-top:56px;
  }

  .h-right{justify-content:flex-start}

  .f-card{width:min(620px,100%)}

  .h-bar{grid-template-columns:1fr 1fr}

  .h-bar-warranty{grid-column:1/-1}

  .sec-why{grid-template-columns:1fr}

  .why-right{min-height:360px}

  .f-media{grid-template-columns:1fr}
}

@media (max-width:760px){
  .alert-bar{padding:0 14px}

  .nav{padding:0 14px;top:0;min-height:68px}

  .mobile-menu{top:68px}

  .hero{min-height:640px}

  .h-body{
    padding:36px 16px 16px;
    grid-template-columns:1fr;
  }

  .h-left{max-width:none}

  .h-title{font-size:clamp(40px,11vw,64px)}

  .h-sub{font-size:14px}

  .h-trust{
    width:100%;
    gap:7px;
  }

  .h-trust span{
    width:100%;
    justify-content:center;
    min-height:32px;
    font-size:10.5px;
  }

  .h-bar{grid-template-columns:1fr;padding:0 16px 18px}

  .h-bar-warranty,
  .h-bar-stats,
  .h-bar-cta{min-height:unset}

  .sec{padding:24px 16px}

  .svc-grid,
  .proj-grid,
  .rev-grid{grid-template-columns:1fr}

  .sec-head{margin-bottom:24px}

  .why-stats{grid-template-columns:1fr}

  .why-stat-div{width:100%;height:1px}

  .cta-body{padding:24px 16px}

  .cta-title{font-size:clamp(36px,12vw,52px)}

  .ft-top{grid-template-columns:1fr}

  .ft-bottom{flex-direction:column;align-items:flex-start}
}