/* ═════════════════════════════════════════════
   LS PAVERS — PREMIUM HOMEPAGE
   Self-contained design system
   Colors: Navy #0f172a · Gold #f4c430 · Blue #0078e3
   ═════════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:#fff; color:#1e293b; overflow-x:hidden; line-height:1.6; }
h1,h2,h3,h4,h5 { font-family:'Montserrat',sans-serif; line-height:1.15; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

:root {
  --navy:#0f172a; --navy2:#1e293b; --navy3:#334155;
  --gold:#f4c430; --gold2:#d4a017; --gold3:#fde68a;
  --blue:#0078e3; --blue2:#005bb5; --blue3:#3b9eff;
  --white:#f9fafb; --muted:#64748b; --border:#e2e8f0;
  --radius:16px; --radius-sm:10px; --radius-lg:24px;
  --shadow:0 8px 32px rgba(0,0,0,.10);
  --shadow-lg:0 20px 60px rgba(0,0,0,.15);
  --transition:all .3s cubic-bezier(.4,0,.2,1);
  --section:88px 0;
}

.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ══ BUTTONS ══ */
.btn-gold {
  display:inline-flex; align-items:center; gap:.6rem;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy); font-weight:800; font-size:.95rem;
  padding:14px 32px; border-radius:50px; border:none; cursor:pointer;
  box-shadow:0 6px 24px rgba(244,196,48,.4);
  transition:var(--transition); font-family:'Inter',sans-serif;
}
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(244,196,48,.55); color:var(--navy); }

.btn-outline-white {
  display:inline-flex; align-items:center; gap:.6rem;
  background:transparent; color:#fff; font-weight:700; font-size:.95rem;
  padding:13px 30px; border-radius:50px; border:2px solid rgba(255,255,255,.55);
  transition:var(--transition);
}
.btn-outline-white:hover { background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); color:#fff; }

.btn-blue {
  display:inline-flex; align-items:center; gap:.6rem;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff; font-weight:700; font-size:.95rem;
  padding:13px 30px; border-radius:50px;
  box-shadow:0 6px 20px rgba(0,120,227,.35);
  transition:var(--transition);
}
.btn-blue:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,120,227,.5); color:#fff; }

/* ══ SECTION LABEL ══ */
.sec-label {
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 16px; border-radius:50px; margin-bottom:1rem;
}
.sec-label-blue  { background:rgba(0,120,227,.09); color:var(--blue);  border:1px solid rgba(0,120,227,.2); }
.sec-label-gold  { background:rgba(244,196,48,.12); color:var(--gold2); border:1px solid rgba(244,196,48,.3); }
.sec-label-white { background:rgba(255,255,255,.12); color:#fff;        border:1px solid rgba(255,255,255,.25); }

/* ═══════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════ */
.header {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  background:rgba(15,23,42,.96); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(244,196,48,.12);
  box-shadow:0 2px 28px rgba(0,0,0,.35);
}
.navbar { padding:.85rem 0; }
.navbar .container { display:flex; align-items:center; justify-content:space-between; }
.nav-brand .logo { height:52px; width:auto; }
.nav-menu { display:flex; align-items:center; }
.nav-list { display:flex; align-items:center; gap:1.6rem; }
.nav-link { color:#e2e8f0; font-weight:500; font-size:.9rem; letter-spacing:.02em; transition:var(--transition); position:relative; }
.nav-link:hover, .nav-link.active { color:var(--gold); }
.header-phone {
  display:flex; align-items:center; gap:.45rem;
  color:var(--gold) !important; font-weight:700; font-size:.9rem;
  background:rgba(244,196,48,.1); padding:7px 15px; border-radius:50px;
  border:1px solid rgba(244,196,48,.3); transition:var(--transition);
}
.header-phone:hover { background:rgba(244,196,48,.2); }
.nav-cta-btn {
  background:linear-gradient(135deg,var(--gold),var(--gold2)) !important;
  color:var(--navy) !important; font-weight:800 !important; font-size:.85rem !important;
  padding:9px 20px !important; border-radius:50px !important;
  box-shadow:0 4px 16px rgba(244,196,48,.3) !important;
  transition:var(--transition) !important; white-space:nowrap;
}
.nav-cta-btn:hover { transform:translateY(-2px) !important; box-shadow:0 7px 24px rgba(244,196,48,.48) !important; color:var(--navy)!important; }
.dropdown { position:relative; }
.dropdown-menu {
  position:absolute; top:110%; left:0;
  background:var(--navy2); min-width:210px;
  border:1px solid rgba(244,196,48,.12); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); padding:.5rem 0;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:var(--transition);
}
.dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-link { display:block; padding:.5rem 1.1rem; color:#e2e8f0; font-size:.875rem; transition:var(--transition); }
.dropdown-link:hover { color:var(--gold); background:rgba(244,196,48,.07); }
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.bar { width:26px; height:2.5px; background:#e2e8f0; border-radius:2px; transition:var(--transition); }

/* ═══════════════════════════════════════════════
   HERO — SPLIT LAYOUT
   ═══════════════════════════════════════════════ */
.hero {
  position:relative; min-height:91vh;
  display:flex; align-items:center;
  padding-top:80px; overflow:hidden;
  perspective:1200px;
}
.hero-bg {
  position:absolute; top:22px; right:22px; bottom:22px; left:22px;
  background: linear-gradient(120deg, rgba(15,23,42,0.72) 0%, rgba(244,196,48,0.16) 100%), url('images/screen-enclosure-installation-jacksonville-fl.jpg') center 38%/cover no-repeat;
  filter: brightness(0.98) blur(0.5px) saturate(1.08);
  transform:rotateY(-6deg) rotateX(2.5deg) scale(1.06);
  transform-style:preserve-3d;
  transform-origin:center center;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 34px 80px rgba(0,0,0,.34),0 14px 36px rgba(139,94,60,.18),0 0 0 1px rgba(255,255,255,.08) inset,0 0 32px rgba(244,196,48,.08);
  transition:transform 7s ease-out, box-shadow .45s ease, filter .7s;
  will-change:transform, filter;
}
.hero-bg::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.24), transparent 34%, rgba(255,255,255,.08) 68%, transparent 100%);
  pointer-events:none;
}
.hero.loaded .hero-bg { transform:rotateY(-4deg) rotateX(1.5deg) scale(1); }
.hero:hover .hero-bg {
  transform:rotateY(0deg) rotateX(0deg) translateY(-8px) scale(1.02);
  box-shadow:0 42px 95px rgba(0,0,0,.4),0 18px 42px rgba(139,94,60,.24),0 0 0 1px rgba(255,255,255,.12) inset,0 0 40px rgba(244,196,48,.12);
}
.hero-overlay {
  position:absolute; top:22px; right:22px; bottom:22px; left:22px;
  background:linear-gradient(110deg,rgba(15,23,42,.88) 0%,rgba(15,23,42,.70) 52%,rgba(15,23,42,.44) 100%);
  border-radius:30px;
}

/* SERVICE HERO — match index hero look */
.service-hero { position:relative; min-height:91vh; display:flex; align-items:center; padding-top:80px; overflow:hidden; perspective:1200px; }
.service-hero .hero-background {
  position:absolute; top:22px; right:22px; bottom:22px; left:22px;
  border-radius:30px; overflow:hidden;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 34px 80px rgba(0,0,0,.34),0 14px 36px rgba(139,94,60,.18),0 0 0 1px rgba(255,255,255,.08) inset,0 0 32px rgba(244,196,48,.08);
  transform:rotateY(-6deg) rotateX(2.5deg) scale(1.06);
  transform-style:preserve-3d; transform-origin:center center;
  transition:transform 7s ease-out, box-shadow .45s ease, filter .7s; will-change:transform, filter;
}
.service-hero .hero-background::before { content:''; position:absolute; inset:0; background:linear-gradient(110deg,rgba(15,23,42,.88) 0%,rgba(15,23,42,.70) 52%,rgba(15,23,42,.44) 100%); }
.service-hero .hero-background::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, rgba(255,255,255,.24), transparent 34%, rgba(255,255,255,.08) 68%, transparent 100%); }
.service-hero .hero-bg-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.98) blur(.5px) saturate(1.08); }
.service-hero:hover .hero-background { transform:rotateY(0deg) rotateX(0deg) translateY(-8px) scale(1.02); box-shadow:0 42px 95px rgba(0,0,0,.4),0 18px 42px rgba(139,94,60,.24),0 0 0 1px rgba(255,255,255,.12) inset,0 0 40px rgba(244,196,48,.12); }
.service-hero .service-hero-content { position:relative; z-index:2; max-width:760px; text-align:left; }
.service-hero h1 { font-size:clamp(2.1rem,4vw,3.5rem); margin:0 0 1.3rem; color:#fff !important; -webkit-background-clip:initial !important; background-clip:initial !important; text-shadow:0 2px 24px rgba(0,0,0,.35); letter-spacing:-.025em; }
/* Per-page background override: Driveway service */
#driveway-hero .hero-bg {
  background: linear-gradient(120deg, rgba(15,23,42,0.72) 0%, rgba(244,196,48,0.16) 100%), url('../../images/paver-driveway-jacksonville-fl.jpg') center 50%/cover no-repeat;
}
/* Per-page background override: Paver Installation service */
#paver-installation-hero .hero-bg {
  background: linear-gradient(120deg, rgba(15,23,42,0.72) 0%, rgba(244,196,48,0.16) 100%), url('../../images/paver-driveway-installation-jacksonville-1.jpeg') center 50%/cover no-repeat;
}
/* Per-page background override: Patio service */
#patio-hero .hero-bg {
  background: linear-gradient(120deg, rgba(15,23,42,0.72) 0%, rgba(244,196,48,0.16) 100%), url('../../images/beautiful-patio-pavers-jacksonville-2.jpeg') center 50%/cover no-repeat;
}
/* Decorative glass ribbons */
.hero-ribbon-l {
  position:absolute; top:0; left:0; bottom:0; width:80px; z-index:1; pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,.09),transparent);
}
.hero-ribbon-r {
  position:absolute; top:0; right:0; bottom:0; width:80px; z-index:1; pointer-events:none;
  background:linear-gradient(to left,rgba(255,255,255,.09),transparent);
}
.hero-ribbon-b {
  position:absolute; bottom:0; left:0; right:0; height:100px; z-index:1; pointer-events:none;
  background:linear-gradient(to top,rgba(15,23,42,.6),transparent);
}
/* Gold accent line */
.hero-accent {
  position:absolute; top:0; left:0; right:0; height:3px; z-index:3;
  background:linear-gradient(to right,transparent 0%,var(--gold) 30%,var(--gold2) 70%,transparent 100%);
}
.hero-inner { position:relative; z-index:2; width:100%; padding:60px 0 72px; }
.hero-grid  { display:grid; grid-template-columns:1fr 430px; gap:3.5rem; align-items:center; }

/* — LEFT — */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(244,196,48,.14); border:1px solid rgba(244,196,48,.38);
  color:var(--gold); font-size:.74rem; font-weight:700;
  padding:6px 16px; border-radius:50px; letter-spacing:.09em; text-transform:uppercase;
  margin-bottom:1.3rem;
  animation:fadeUp .6s ease both .1s;
}
.hero-h1 {
  font-size:clamp(2.1rem,4vw,3.5rem); font-weight:900; color:#fff;
  line-height:1.1; margin-bottom:1.3rem; letter-spacing:-.025em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
  animation:fadeUp .6s ease both .2s;
}
/* Force hero headings to remain white (override any gradient heading styles elsewhere) */
.hero .hero-h1 { color:#fff !important; -webkit-background-clip: initial !important; background-clip: initial !important; }
.hero-h1 em { font-style:normal; color:var(--gold); }
.hero-sub {
  font-size:1.06rem; color:rgba(255,255,255,.86); line-height:1.78;
  margin-bottom:2.2rem; max-width:510px;
  animation:fadeUp .6s ease both .3s;
}
.hero-pills {
  display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2.2rem;
  animation:fadeUp .6s ease both .4s;
}
.hero-pill {
  display:inline-flex; align-items:center; gap:.38rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.9); font-size:.8rem; font-weight:600;
  padding:6px 14px; border-radius:50px;
}
.hero-pill i { color:var(--gold); font-size:.82rem; }
.hero-btns { display:flex; flex-wrap:wrap; gap:1rem; animation:fadeUp .6s ease both .45s; }

/* — RIGHT — Form Card — */
  .hero-form-card {
    background:#fff; border-radius:22px;
    padding:2.2rem 1.9rem;
    box-shadow:0 28px 72px rgba(0,0,0,.38), 0 0 0 1px rgba(244,196,48,.16);
    animation:slideLeft .7s ease both .25s;
    transform-style:preserve-3d;
    will-change:transform;
    transition:transform .25s ease;
  }
  .hero-form-card h3 {
    font-size:1.22rem; font-weight:800; color:var(--navy);
    margin-bottom:.2rem; text-align:center;
  }
.hfc-sub {
  text-align:center; font-size:.82rem; color:var(--muted);
  margin-bottom:1.4rem; display:flex; align-items:center; justify-content:center; gap:.3rem;
}
.hfc-sub i { color:#22c55e; }
.hf-row { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.hf-group { margin-bottom:.72rem; }
.hf-group input,
.hf-group select,
.hf-group textarea {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:10px;
  font-size:.88rem; font-family:'Inter',sans-serif;
  color:var(--navy2); background:#f8fafc; transition:var(--transition); outline:none;
}
.hf-group input:focus,
.hf-group select:focus,
.hf-group textarea:focus {
  border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(0,120,227,.1);
}
.hf-group textarea { resize:vertical; min-height:70px; }
.hf-submit {
  width:100%; padding:14px; margin-top:.1rem;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy); font-weight:800; font-size:1rem;
  border:none; border-radius:50px; cursor:pointer;
  box-shadow:0 5px 20px rgba(244,196,48,.42);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Inter',sans-serif; transition:var(--transition);
}
.hf-submit:hover { transform:translateY(-2px); box-shadow:0 9px 28px rgba(244,196,48,.55); }
.contact-submit-button {
  --primary:#fff4bf;
  --neutral-1:#d4a017;
  --neutral-2:#b8860b;
  --radius:14px;
  cursor:pointer;
  border-radius:var(--radius);
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  border:none;
  box-shadow:0 0.5px 0.5px 1px rgba(0,0,0,.2),0 10px 20px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:all 0.3s ease;
  width:100%;
  padding:20px;
  min-height:68px;
  font-family:"Inter", "Poppins", "Montserrat", sans-serif;
  font-size:18px;
  font-weight:700;
  color:#000000;
  background:var(--neutral-1);
  overflow:hidden;
  margin-top:0.6rem;
}
.contact-submit-button:hover {
  transform:scale(1.02);
  box-shadow:0 0 1px 2px rgba(255,255,255,.3),0 15px 30px rgba(0,0,0,.3),0 10px 3px -3px rgba(0,0,0,.04);
}
.contact-submit-button:active {
  transform:scale(1);
  box-shadow:0 0 1px 2px rgba(255,255,255,.3),0 10px 3px -3px rgba(0,0,0,.2);
}
.contact-submit-button::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);
  border:2.5px solid transparent;
  background:linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box, linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.45)) border-box;
  z-index:0;
  transition:all 0.4s ease;
}
.contact-submit-button:hover::after {
  transform:scale(1.05, 1.1);
  box-shadow:inset 0 -1px 3px 0 rgba(50,50,50,1);
}
.contact-submit-button::before {
  content:"";
  inset:7px 6px 6px 6px;
  position:absolute;
  background:linear-gradient(to top, var(--neutral-1), var(--neutral-2));
  border-radius:30px;
  filter:blur(0.5px);
  z-index:1;
}
.contact-submit-button .outline {
  position:absolute;
  border-radius:inherit;
  overflow:hidden;
  z-index:2;
  opacity:0;
  transition:opacity 0.4s ease;
  inset:-2px -3.5px;
}
.contact-submit-button .outline::before {
  content:"";
  position:absolute;
  inset:-100%;
  background:conic-gradient(from 180deg, transparent 60%, rgba(255,244,191,0.9) 80%, transparent 100%);
  animation:contact-spin 2s linear infinite;
  animation-play-state:paused;
}
.contact-submit-button:hover .outline {
  opacity:1;
}
.contact-submit-button:hover .outline::before {
  animation-play-state:running;
}
.contact-submit-button .state {
  padding-left:32px;
  z-index:3;
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
}
.contact-submit-button .state p {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:0;
}
.contact-submit-button .state p span {
  display:block;
  color:#000000;
  opacity:0;
  animation:contact-slide-down 0.8s ease forwards calc(var(--i) * 0.03s);
}
.contact-submit-button:hover .state p span {
  opacity:1;
  animation:contact-wave 0.5s ease forwards calc(var(--i) * 0.02s);
}
.contact-submit-button .icon {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  margin:auto;
  transform:scale(1.1);
  transition:all 0.3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
}
.contact-submit-button .icon svg {
  overflow:visible;
}
.contact-submit-button:hover .state--default .icon {
  transform:rotate(45deg) scale(1.15);
}
.contact-submit-button .state--default .icon::before {
  content:"";
  position:absolute;
  top:50%;
  height:2px;
  width:0;
  left:-5px;
  background:linear-gradient(to right, transparent, rgba(255,248,214,0.85));
}
.contact-submit-button .state--sent {
  display:none;
}
.contact-submit-button .state--sent svg {
  transform:scale(1.15);
  margin-right:8px;
}
.contact-submit-button:focus .state--default,
.contact-submit-button.is-submitting .state--default {
  position:absolute;
}
.contact-submit-button:focus .state--default .icon,
.contact-submit-button.is-submitting .state--default .icon {
  transform:rotate(0) scale(1.1);
}
.contact-submit-button:focus .state--default .icon::before,
.contact-submit-button.is-submitting .state--default .icon::before {
  animation:contact-contrail 0.8s linear forwards;
}
.contact-submit-button:focus .state--default svg,
.contact-submit-button.is-submitting .state--default svg {
  animation:contact-takeoff 0.8s linear forwards;
}
.contact-submit-button:focus .state p span,
.contact-submit-button.is-submitting .state p span {
  opacity:1;
  animation:contact-disappear 0.6s ease forwards calc(var(--i) * 0.03s);
}
.contact-submit-button:focus .state--sent,
.contact-submit-button.is-submitting .state--sent {
  display:flex;
}
.contact-submit-button:focus .state--sent span,
.contact-submit-button.is-submitting .state--sent span {
  opacity:0;
  animation:contact-slide-down 0.8s ease forwards calc(var(--i) * 0.2s);
}
.contact-submit-button:focus .state--sent .icon svg,
.contact-submit-button.is-submitting .state--sent .icon svg {
  opacity:0;
  animation:contact-appear 1.2s ease forwards 0.8s;
}
@keyframes contact-spin {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
@keyframes contact-wave {
  30% { opacity:1; transform:translateY(4px) translateX(0) rotate(0); }
  50% { opacity:1; transform:translateY(-3px) translateX(0) rotate(0); color:#000000; }
  100% { opacity:1; transform:translateY(0) translateX(0) rotate(0); color:#000000; }
}
@keyframes contact-slide-down {
  0% { opacity:0; transform:translateY(-20px) translateX(5px) rotate(-90deg); color:#000000; filter:blur(5px); }
  30% { opacity:1; transform:translateY(4px) translateX(0) rotate(0); color:#000000; filter:blur(0); }
  50% { opacity:1; transform:translateY(-3px) translateX(0) rotate(0); color:#000000; }
  100% { opacity:1; transform:translateY(0) translateX(0) rotate(0); color:#000000; }
}
@keyframes contact-disappear {
  from { opacity:1; }
  to { opacity:0; transform:translateX(5px) translateY(20px); color:var(--primary); filter:blur(5px); }
}
@keyframes contact-takeoff {
  0% { opacity:1; }
  60% { opacity:1; transform:translateX(70px) rotate(45deg) scale(2); }
  100% { opacity:0; transform:translateX(160px) rotate(45deg) scale(0); }
}
@keyframes contact-contrail {
  0% { width:0; opacity:1; }
  8% { width:15px; }
  60% { opacity:0.7; width:80px; }
  100% { opacity:0; width:160px; }
}
@keyframes contact-appear {
  0% { opacity:0; transform:scale(4) rotate(-40deg); color:var(--primary); filter:blur(4px); }
  30% { opacity:1; transform:scale(0.6); filter:blur(1px); }
  50% { opacity:1; transform:scale(1.2); filter:blur(0); }
  100% { opacity:1; transform:scale(1); }
}
.hf-trust {
  text-align:center; font-size:.75rem; color:#94a3b8;
  margin-top:.75rem; display:flex; align-items:center; justify-content:center; gap:.3rem;
}
.form-msg { padding:10px; border-radius:8px; margin-top:.7rem; font-size:.86rem; font-weight:600; text-align:center; display:none; }
.form-msg.ok  { display:block; background:rgba(34,197,94,.1); color:#16a34a; border:1px solid rgba(34,197,94,.28); }
.form-msg.err { display:block; background:rgba(239,68,68,.09); color:#dc2626; border:1px solid rgba(239,68,68,.22); }

@keyframes fadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideLeft { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }

/* ═══════════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════════ */
.stats-bar {
  background:var(--navy); border-top:1px solid rgba(244,196,48,.14);
  border-bottom:1px solid rgba(244,196,48,.14); padding:30px 0;
}
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center; }
.stat-val {
  font-family:'Montserrat',sans-serif; font-size:2.1rem; font-weight:900;
  color:var(--gold); line-height:1; margin-bottom:.28rem;
}
.stat-lbl { font-size:.78rem; color:#94a3b8; font-weight:500; text-transform:uppercase; letter-spacing:.06em; }

/* ═══════════════════════════════════════════════
   WELCOME SECTION
   ═══════════════════════════════════════════════ */
.sec-welcome { padding:var(--section); background:#fff; }
.welcome-grid { display:grid; grid-template-columns:1fr 480px; gap:5rem; align-items:center; }
.welcome-text h2 { font-size:clamp(1.9rem,3vw,2.7rem); font-weight:900; color:var(--navy); margin-bottom:1.2rem; }
.welcome-text h2 span { color:var(--blue); }
.welcome-text p { color:var(--muted); font-size:.97rem; line-height:1.82; margin-bottom:1.1rem; }
.check-list { margin:1.4rem 0 2rem; display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.check-list li { display:flex; align-items:center; gap:.55rem; font-size:.9rem; font-weight:600; color:var(--navy2); }
.check-list li i { color:var(--gold); font-size:.9rem; }

/* ═══ IMAGE FRAME — style 1 ═══ */
.img-frame-1 {
  position:relative; border-radius:20px; overflow:visible;
}
.img-frame-1 img {
  width:100%; height:480px; object-fit:cover;
  border-radius:20px;
  box-shadow:0 24px 64px rgba(0,0,0,.18);
  display:block;
}
/* Gold decorative border offset */
.img-frame-1::before {
  content:''; position:absolute;
  top:-12px; left:-12px; right:12px; bottom:12px;
  border:3px solid var(--gold); border-radius:22px;
  pointer-events:none; z-index:-1;
}
/* Dark badge strip */
.img-frame-1::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:90px;
  background:linear-gradient(to top,rgba(15,23,42,.72),transparent);
  border-radius:0 0 20px 20px; pointer-events:none;
}
/* Driveway page: normalize existing image blocks to match image frame aesthetics */
.materials-grid .material-image,
.gallery-grid .gallery-item { position:relative; border-radius:20px; overflow:hidden; }
.materials-grid .material-image img,
.gallery-grid .gallery-item img {
  height:320px; object-fit:cover; border-radius:20px; box-shadow:0 24px 64px rgba(0,0,0,.18);
}
.materials-grid .material-image { height:320px !important; }
.gallery-grid .gallery-overlay { border-radius:20px; }

@media(max-width:900px){
  .materials-grid .material-image { height:260px !important; }
  .materials-grid .material-image img,
  .gallery-grid .gallery-item img { height:260px; }
}

/* Outdoor Kitchen Materials: show full images inside fixed card height */
.paver-materials .material-image { height:320px !important; }
.paver-materials .material-image img { width:100%; height:100% !important; object-fit:contain !important; }
@media(max-width:900px){
  .paver-materials .material-image { height:260px !important; }
}
.img-badge-strip {
  position:absolute; bottom:20px; left:20px; right:20px;
  display:flex; gap:1.4rem;
  background:rgba(15,23,42,.88); border:1px solid rgba(244,196,48,.3);
  border-radius:14px; padding:1rem 1.3rem;
  backdrop-filter:blur(8px); z-index:2;
}
.ibs-stat { text-align:center; }
.ibs-num  { font-family:'Montserrat',sans-serif; font-size:1.5rem; font-weight:900; color:var(--gold); line-height:1; }
.ibs-lbl  { font-size:.68rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

/* ═══════════════════════════════════════════════
   WHY PAVERS MATTER
   ═══════════════════════════════════════════════ */
.sec-why { padding:var(--section); background:linear-gradient(160deg,#f0f7ff,#f8fafc); }
.sec-header { text-align:center; margin-bottom:3.8rem; }
.sec-header h2 { font-size:clamp(1.9rem,3.5vw,2.7rem); font-weight:900; color:var(--navy); margin-bottom:.8rem; }
.sec-header p { font-size:1rem; color:var(--muted); max-width:560px; margin:0 auto; line-height:1.75; }
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem; }
.why-card {
  background:#fff; border-radius:18px; padding:2rem 1.8rem;
  border:1px solid #e2eaf4; box-shadow:0 4px 20px rgba(0,0,0,.054);
  display:flex; gap:1.4rem; align-items:flex-start;
  transition:var(--transition);
}
.why-card:hover { transform:translateY(-6px); box-shadow:0 14px 44px rgba(0,0,0,.1); border-color:rgba(0,120,227,.22); }
.why-icon {
  width:58px; height:58px; min-width:58px; border-radius:14px;
  background:linear-gradient(135deg,rgba(0,120,227,.1),rgba(0,120,227,.05));
  display:flex; align-items:center; justify-content:center;
  font-size:1.45rem; color:var(--blue);
}
.why-card h3 { font-size:1.05rem; font-weight:800; color:var(--navy); margin-bottom:.5rem; }
.why-card p  { font-size:.91rem; color:var(--muted); line-height:1.72; margin:0; }

/* ═══════════════════════════════════════════════
   SERVICES GRID — Beautiful image frames
   ═══════════════════════════════════════════════ */
.sec-services { padding:var(--section); background:#fff; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.7rem; margin-top:3.5rem; }

.svc-card {
  border-radius:20px; overflow:hidden;
  background:#fff; border:1px solid #e8edf2;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  transition:var(--transition);
}
.svc-card:hover { transform:translateY(-9px); box-shadow:0 20px 52px rgba(0,0,0,.13); border-color:rgba(0,120,227,.22); }

/* ═══ IMAGE FRAME — style 2 (card) ═══ */
.svc-img {
  position:relative; height:210px; overflow:hidden;
}
.svc-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s ease;
}
.svc-card:hover .svc-img img { transform:scale(1.07); }
/* Diagonal gradient overlay */
.svc-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(145deg,rgba(15,23,42,.55) 0%,transparent 55%,rgba(244,196,48,.18) 100%);
  transition:var(--transition);
}
.svc-card:hover .svc-img-overlay { opacity:.7; }
/* Top-left icon badge */
.svc-icon-badge {
  position:absolute; top:14px; left:14px;
  width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:var(--blue);
  box-shadow:0 4px 14px rgba(0,0,0,.18); z-index:2;
}
/* Bottom label ribbon */
.svc-ribbon {
  position:absolute; bottom:0; left:0; right:0;
  padding:.8rem 1.1rem .7rem;
  background:linear-gradient(to top,rgba(15,23,42,.85),transparent);
}
.svc-ribbon span {
  font-family:'Montserrat',sans-serif; font-size:.98rem; font-weight:800;
  color:#fff; letter-spacing:-.01em;
}
/* Gold corner accent line */
.svc-img::after {
  content:''; position:absolute;
  top:0; left:0; bottom:0; width:4px;
  background:linear-gradient(to bottom,var(--gold),transparent);
  pointer-events:none;
}
.svc-body { padding:1.3rem 1.5rem 1.7rem; flex:1; display:flex; flex-direction:column; }
.svc-body p { font-size:.875rem; color:var(--muted); line-height:1.7; margin:0 0 1.2rem; flex:1; }
.svc-link {
  display:inline-flex; align-items:center; gap:.44rem;
  color:var(--blue); font-weight:700; font-size:.875rem;
  padding:8px 18px; border:2px solid var(--blue); border-radius:50px;
  transition:var(--transition); align-self:flex-start;
}
.svc-link:hover { background:var(--blue); color:#fff; }

/* ═══════════════════════════════════════════════
   PROPERTY VALUE — Dark section
   ═══════════════════════════════════════════════ */
.sec-value {
  padding:var(--section); background:var(--navy);
  position:relative; overflow:hidden;
}
.sec-value::before {
  content:''; position:absolute; top:-120px; right:-100px;
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(244,196,48,.07),transparent 70%);
  pointer-events:none;
}
.sec-value::after {
  content:''; position:absolute; bottom:-80px; left:-60px;
  width:450px; height:450px;
  background:radial-gradient(circle,rgba(0,120,227,.06),transparent 70%);
  pointer-events:none;
}
.sec-value .sec-header h2 { color:#fff; }
.sec-value .sec-header p  { color:#94a3b8; }
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; position:relative; z-index:1; }
.val-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:20px; padding:2.2rem 1.8rem; text-align:center;
  transition:var(--transition);
}
.val-card:hover { background:rgba(255,255,255,.08); border-color:rgba(244,196,48,.25); transform:translateY(-7px); }
.val-icon {
  width:66px; height:66px; margin:0 auto 1.2rem;
  border-radius:50%; background:rgba(244,196,48,.12);
  border:1px solid rgba(244,196,48,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:1.55rem; color:var(--gold);
}
.val-big { font-family:'Montserrat',sans-serif; font-size:2.7rem; font-weight:900; color:var(--gold); line-height:1; margin-bottom:.35rem; }
.val-card h3 { font-size:1rem; font-weight:700; color:#fff; margin-bottom:.65rem; }
.val-card p  { font-size:.875rem; color:#94a3b8; line-height:1.72; margin:0; }

/* ═══════════════════════════════════════════════
   LOCAL SEO SECTION
   ═══════════════════════════════════════════════ */
.sec-local { padding:var(--section); background:#f8fafc; }
.local-grid { display:grid; grid-template-columns:1fr 370px; gap:5rem; align-items:start; }
.local-text h2 { font-size:clamp(1.8rem,3vw,2.4rem); font-weight:900; color:var(--navy); margin-bottom:1.3rem; }
.local-text h2 span { color:var(--blue); }
.local-text p { color:var(--muted); font-size:.96rem; line-height:1.82; margin-bottom:1.25rem; }
.area-tags { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.6rem 0 2rem; }
.area-tag {
  display:inline-flex; align-items:center; gap:.38rem;
  background:rgba(0,120,227,.07); color:var(--blue);
  border:1px solid rgba(0,120,227,.2); font-size:.82rem; font-weight:600;
  padding:7px 16px; border-radius:50px; transition:var(--transition);
}
.area-tag:hover { background:var(--blue); color:#fff; }
.area-tag i { font-size:.72rem; }

/* ═══ INFO ASIDE with beautiful frame ═══ */
.local-aside {
  position:sticky; top:100px;
}
/* ═══ IMAGE FRAME — style 3 (rotated geo) ═══ */
.img-frame-3 {
  position:relative; margin-bottom:1.8rem;
}
.img-frame-3 img {
  width:100%; height:280px; object-fit:cover;
  border-radius:18px; border-left:4px solid var(--gold);
  box-shadow:0 18px 52px rgba(0,0,0,.17);
}
/* Floating corner ornament */
.img-frame-3::before {
  content:''; position:absolute;
  top:-10px; right:-10px; width:60px; height:60px;
  border-top:3px solid var(--gold); border-right:3px solid var(--gold);
  border-radius:0 12px 0 0; pointer-events:none;
}
.img-frame-3::after {
  content:''; position:absolute;
  bottom:-10px; left:-10px; width:60px; height:60px;
  border-bottom:3px solid var(--gold); border-left:3px solid var(--gold);
  border-radius:0 0 0 12px; pointer-events:none;
}
.local-info-box {
  background:#fff; border:1px solid #dde8f6; border-radius:18px; padding:1.8rem;
}
.local-info-box h3 { font-size:1.1rem; font-weight:800; color:var(--navy); margin-bottom:1.3rem; }
.lib-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 0; border-bottom:1px solid #e2eaf4;
  font-size:.88rem; color:#334155; font-weight:500;
}
.lib-item:last-child { border-bottom:none; }
.lib-item i { color:var(--gold); font-size:.9rem; width:18px; text-align:center; }

/* ═══════════════════════════════════════════════
   WHY CHOOSE US
   ═══════════════════════════════════════════════ */
.sec-whyus { padding:var(--section); background:#fff; }
.whyus-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }

/* ═══ IMAGE FRAME — style 4 (layered stack) ═══ */
.img-stack {
  position:relative; padding:20px 20px 0 0;
}
.img-stack-main {
  width:100%; height:520px; object-fit:cover;
  border-radius:20px;
  box-shadow:0 24px 64px rgba(0,0,0,.2);
}
/* Back plate */
.img-stack::before {
  content:''; position:absolute;
  top:0; right:0; width:88%; height:88%;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(0,120,227,.18),rgba(244,196,48,.15));
  z-index:-1;
}
/* Gold stroke frame */
.img-stack::after {
  content:''; position:absolute;
  bottom:-14px; left:-14px;
  width:55%; height:55%;
  border-radius:16px;
  border:3px solid var(--gold);
  pointer-events:none;
}
.img-stack-badge {
  position:absolute; bottom:28px; right:-20px;
  background:var(--navy); border:1px solid rgba(244,196,48,.35);
  border-radius:16px; padding:1.1rem 1.5rem;
  display:flex; gap:1.5rem; backdrop-filter:blur(8px);
  box-shadow:0 12px 36px rgba(0,0,0,.28);
}
.isb-item { text-align:center; }
.isb-num { font-family:'Montserrat',sans-serif; font-size:1.6rem; font-weight:900; color:var(--gold); line-height:1; }
.isb-lbl { font-size:.68rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

.whyus-text h2 { font-size:clamp(1.9rem,3vw,2.6rem); font-weight:900; color:var(--navy); margin-bottom:1rem; }
.whyus-text h2 span { color:var(--blue); }
.whyus-text > p { color:var(--muted); line-height:1.8; margin-bottom:2rem; }
.why-items { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.wi-card {
  display:flex; gap:.85rem; align-items:flex-start;
  padding:1.1rem 1.1rem; background:#f8fafc;
  border:1px solid var(--border); border-radius:14px; transition:var(--transition);
}
.wi-card:hover { border-color:rgba(0,120,227,.22); background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.06); }
.wi-icon {
  width:42px; height:42px; min-width:42px;
  background:rgba(0,120,227,.1); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--blue);
}
.wi-card h4 { font-size:.88rem; font-weight:700; color:var(--navy); margin-bottom:.22rem; }
.wi-card p  { font-size:.8rem; color:var(--muted); line-height:1.55; margin:0; }

/* ═══════════════════════════════════════════════
   GALLERY — Light theme masonry with modern frames
   ═══════════════════════════════════════════════ */
.sec-gallery { padding:var(--section); background:var(--light-gray); }
.sec-gallery .sec-header h2 { color:var(--blue); }
.sec-gallery .sec-header p  { color:var(--text-muted); }

.gallery-masonry {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:220px;
  gap:1.25rem; margin-top:3.5rem;
}
.gal-item {
  position:relative; border-radius:16px; overflow:hidden;
  cursor:pointer;
  background:#fff;
  border:1px solid var(--border-color);
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  transition:transform .35s ease, box-shadow .35s ease;
}
.gal-item:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,0.12);
  z-index:2;
}
.gal-item.tall   { grid-row:span 2; }
.gal-item.wide   { grid-column:span 2; }

.gal-item img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.gal-item:hover img { transform:scale(1.06); }

/* Subtle overlay */
.gal-frame {
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,0.35) 100%);
  transition:var(--transition);
  pointer-events:none;
}
/* Gold corner accents */
.gal-item::before {
  content:''; position:absolute; top:12px; left:12px;
  width:28px; height:28px; z-index:3; pointer-events:none;
  border-top:2px solid rgba(244,196,48,.9); border-left:2px solid rgba(244,196,48,.9);
  border-radius:3px 0 0 0;
  opacity:0; transition:opacity .3s ease;
}
.gal-item::after {
  content:''; position:absolute; bottom:12px; right:12px;
  width:28px; height:28px; z-index:3; pointer-events:none;
  border-bottom:2px solid rgba(244,196,48,.9); border-right:2px solid rgba(244,196,48,.9);
  border-radius:0 0 3px 0;
  opacity:0; transition:opacity .3s ease;
}
.gal-item:hover::before, .gal-item:hover::after { opacity:1; }

.gal-label {
  position:absolute; bottom:0; left:0; right:0; z-index:4;
  padding:1rem 1.15rem .9rem;
  background:linear-gradient(to top,rgba(15,23,42,.92),transparent);
  transform:translateY(100%); transition:transform .35s ease;
}
.gal-item:hover .gal-label { transform:translateY(0); }
.gal-label span { font-size:.85rem; font-weight:700; color:#fff; letter-spacing:.02em; }

/* ═══════════════════════════════════════════════
   REVIEWS — Modern beautiful design
   ═══════════════════════════════════════════════ */
.sec-reviews {
  padding: 96px 0;
  background: linear-gradient(180deg, #fcfaf6 0%, #ffffff 48%, #f8f5ef 100%);
  position: relative;
  overflow: hidden;
 }
 .sec-reviews::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(244,196,48,0.12) 0%, transparent 70%);
  pointer-events: none;
 }
 .sec-reviews::after {
  content: '';
  position: absolute;
  bottom: -200px; left: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(15,23,42,0.05) 0%, transparent 70%);
  pointer-events: none;
 }
 .sec-reviews .container { position: relative; z-index: 1; }
 .sec-reviews .sec-header { max-width: 760px; margin: 0 auto; text-align: center; }

 /* Premium rating summary */
 .reviews-summary {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 1.35rem;
  margin: 2.25rem auto 3rem;
  align-items: stretch;
 }
 .rsum-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: linear-gradient(135deg, #fffaf0, #ffffff);
  border: 1px solid rgba(212,160,23,.22);
  border-radius: 24px;
  padding: 1.8rem;
  box-shadow: 0 18px 42px rgba(15,23,42,.08);
 }
 .rsum-big {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.7rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.rsum-stars {
  color: var(--gold);
  font-size: 1.3rem;
  letter-spacing: 3px;
}
 .rsum-label {
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 600;
 }
 .rsum-divider {
  display: none;
 }
 .rsum-google {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.6rem 1.8rem;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 42px rgba(15,23,42,.08);
 }
 .rsum-google-logo {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg,#ffffff,#f8fafc);
  border: 1px solid rgba(15,23,42,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
 }
 .rsum-google-logo i { background: linear-gradient(135deg,#4285f4,#ea4335,#fbbc05,#34a853); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
 .rsum-google-text { display: flex; flex-direction: column; }
 .rsum-google-title { font-weight: 800; color: var(--text-dark); font-size: 1rem; }
 .rsum-google-sub { font-size: .84rem; color: var(--text-muted); }

 .reviews-proof {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: flex-end;
 }
 .reviews-proof span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .9rem;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.08);
  color: var(--text-dark);
  font-size: .78rem;
  font-weight: 700;
 }
 .reviews-proof i { color: var(--gold); }

 .reviews-track-wrap { padding: .35rem 0; }
 .reviews-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  justify-items: center;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
 }

 .rv-card {
  width: 100%;
  max-width: 260px;
  background: #ffffff;
  border: 1px solid rgba(139,94,60,.14);
  border-radius: 20px;
  padding: 1.2rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.07);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1;
  min-height: 260px;
  overflow: hidden;
  }
  .rv-card::before {
  content: none;
  position: absolute;
  top: 12px; left: 18px;
  font-family: Georgia, serif;
  font-size: 4rem;
  color: rgba(212,160,23,0.16);
  line-height: 1;
  font-weight: 700;
  }
  .rv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(139,94,60,.18);
  border-color: rgba(139,94,60,.22);
  }

  .rv-google-badge {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  }
  .rv-google-badge i { background: linear-gradient(135deg,#4285f4,#ea4335,#fbbc05,#34a853); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

  .rv-stars {
  color: var(--gold);
  font-size: .94rem;
  letter-spacing: 2px;
  margin-bottom: .6rem;
  position: relative;
  z-index: 1;
  margin-top: 0;
  }
  .rv-text {
  font-size: .81rem;
  color: #374151;
  line-height: 1.45;
  margin: 0;
  position: relative;
  z-index: 1;
  font-weight: 400;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  }
  .rv-author {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .75rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(15,23,42,.08);
  }
  .rv-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4c430 0%, #d4a017 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dark);
  font-weight: 800;
  font-size: .72rem;
  box-shadow: 0 6px 14px rgba(244,196,48,0.22);
  flex-shrink: 0;
  }
  .rv-name { font-weight: 800; color: #1f2933; font-size: .78rem; margin-bottom: 1px; line-height: 1.3; }
  .rv-date { font-size: .66rem; color: var(--text-muted); }
  .rv-verified { font-size: .65rem !important; margin-top: .1rem !important; }
  .rv-google-badge { top: 14px !important; right: 14px !important; }
  .rv-g { display: none; }
  .rv-verified {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .62rem;
  color: #34a853;
  font-weight: 600;
  margin-top: .2rem;
  }
 .rv-verified i { font-size: .75rem; }

 @media (max-width: 1100px) {
  .reviews-summary {
    grid-template-columns: 1fr;
  }
  .rsum-google {
    flex-direction: column;
    align-items: flex-start;
  }
  .reviews-proof {
    justify-content: flex-start;
  }
  .reviews-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 900px;
  }
 }

 @media (max-width: 800px) {
  .reviews-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
  }
 }

 @media (max-width: 520px) {
  .sec-reviews {
    padding: 80px 0;
  }
  .reviews-track {
    grid-template-columns: 1fr;
    gap: .9rem;
    max-width: 100%;
  }
  .rv-card {
    aspect-ratio: auto;
    max-width: 100%;
    min-height: 240px;
    padding: 1.1rem;
  }
  .rv-text {
    font-size: .86rem;
    line-height: 1.55;
    line-clamp: unset;
    -webkit-line-clamp: unset;
  }
 }

 /* ═══════════════════════════════════════════════
   PROCESS STEPS
   ═══════════════════════════════════════════════ */
.sec-process { padding:var(--section); background:var(--navy); }
.sec-process .sec-header h2 { color:#fff; }
.sec-process .sec-header p  { color:#94a3b8; }
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; position:relative; }
.process-steps::before {
  content:''; position:absolute;
  top:36px; left:12%; right:12%; height:2px;
  background:linear-gradient(to right,var(--gold),rgba(244,196,48,.2)); z-index:0;
}
.ps-card {
  text-align:center; padding:1.8rem 1.2rem; position:relative; z-index:1;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:18px; transition:var(--transition);
}
.ps-card:hover { background:rgba(255,255,255,.08); border-color:rgba(244,196,48,.25); transform:translateY(-5px); }
.ps-num {
  width:72px; height:72px; margin:0 auto 1.2rem;
  border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; font-size:1.5rem; font-weight:900; color:var(--navy);
  box-shadow:0 8px 24px rgba(244,196,48,.4);
}
.ps-card h3 { font-size:1rem; font-weight:800; color:#fff; margin-bottom:.6rem; }
.ps-card p  { font-size:.85rem; color:#94a3b8; line-height:1.68; margin:0; }

/* ═══════════════════════════════════════════════
   MID LEAD FORM
   ═══════════════════════════════════════════════ */
.sec-midform {
  padding:var(--section); background:#fff;
  background-image:radial-gradient(ellipse 70% 50% at 100% 50%,rgba(0,120,227,.04),transparent);
}
.midform-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.midform-text h2 { font-size:clamp(1.9rem,3vw,2.6rem); font-weight:900; color:var(--navy); margin-bottom:1rem; }
.midform-text h2 span { color:var(--gold2); }
.midform-text p { color:var(--muted); font-size:.97rem; line-height:1.8; margin-bottom:1.5rem; }
.mf-perks { list-style:none; padding:0; margin-bottom:2rem; }
.mf-perks li { display:flex; align-items:center; gap:.65rem; color:var(--navy2); font-size:.92rem; padding:.38rem 0; }
.mf-perks li i { color:var(--gold); font-size:.96rem; }
.mf-card {
  background:linear-gradient(135deg,var(--navy),#1a2c4a);
  border-radius:22px; padding:2.4rem;
  border:1px solid rgba(244,196,48,.15);
  box-shadow:0 24px 64px rgba(0,0,0,.22);
}
.mf-card h3 { color:#fff; font-size:1.25rem; font-weight:800; margin-bottom:.2rem; text-align:center; }
.mf-card .mf-sub { text-align:center; font-size:.82rem; color:#94a3b8; margin-bottom:1.4rem; }
.dark-input input,
.dark-input select,
.dark-input textarea {
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.15) !important;
  color:#fff !important;
}
.dark-input input::placeholder,
.dark-input textarea::placeholder { color:rgba(255,255,255,.45); }
.dark-input input:focus,
.dark-input select:focus,
.dark-input textarea:focus {
  border-color:var(--gold) !important;
  background:rgba(255,255,255,.11) !important;
  box-shadow:0 0 0 3px rgba(244,196,48,.15) !important;
}
.dark-input select { color:rgba(255,255,255,.7); }

/* ═══════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════ */
.sec-faq { padding:var(--section); background:linear-gradient(160deg,#f0f7ff,#f8fafc); }
.faq-list { max-width:820px; margin:0 auto; }
.faq-item {
  background:#fff; border:1px solid #e2eaf4; border-radius:14px;
  margin-bottom:1rem; overflow:hidden; transition:var(--transition);
}
.faq-item:hover { border-color:rgba(0,120,227,.22); box-shadow:0 4px 16px rgba(0,0,0,.06); }
.faq-item.open { border-color:rgba(0,120,227,.3); box-shadow:0 4px 20px rgba(0,120,227,.1); }
.faq-q {
  display:flex; align-items:center; gap:1rem;
  padding:1.3rem 1.5rem; cursor:pointer; user-select:none;
}
.faq-q-icon { width:36px; height:36px; min-width:36px; border-radius:10px;
  background:rgba(0,120,227,.1); display:flex; align-items:center; justify-content:center;
  color:var(--blue); font-size:.9rem;
}
.faq-q h3 { font-size:.95rem; font-weight:700; color:var(--navy); flex:1; margin:0; }
.faq-toggle { width:28px; height:28px; min-width:28px; border-radius:50%;
  background:#f1f5f9; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.75rem; transition:var(--transition);
}
.faq-item.open .faq-toggle { background:var(--blue); color:#fff; transform:rotate(180deg); }
.faq-a { display:none; padding:0 1.5rem 1.4rem 3.6rem; }
.faq-a p { font-size:.91rem; color:var(--muted); line-height:1.75; margin:0; }
.faq-item.open .faq-a { display:block; }

/* ═══════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════ */
.sec-cta {
  padding:100px 0; text-align:center;
  background:linear-gradient(135deg,#0f172a 0%,#162033 60%,#0f172a 100%);
  position:relative; overflow:hidden;
}
.sec-cta::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(244,196,48,.07),transparent 70%);
}
.sec-cta .cta-inner > div {
  position:relative;
  max-width:960px; margin:0 auto;
  padding:42px 38px;
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(0,120,227,.12), rgba(15,23,42,.55))
    ,rgba(15,23,42,.28);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 28px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(244,196,48,.14) inset;
  backdrop-filter: blur(10px);
}
/* subtle brand-color accents */
.sec-cta .cta-inner > div::before,
.sec-cta .cta-inner > div::after {
  content:''; position:absolute; pointer-events:none; border-radius:inherit; filter: blur(18px);
}
.sec-cta .cta-inner > div::before { top:-18px; left:-18px; width:180px; height:180px; background:radial-gradient(circle, rgba(244,196,48,.22), transparent 70%); }
.sec-cta .cta-inner > div::after  { bottom:-18px; right:-18px; width:220px; height:220px; background:radial-gradient(circle, rgba(0,120,227,.22), transparent 70%); }
.cta-inner { position:relative; z-index:1; }
.cta-h2 { font-size:clamp(2.1rem,4.2vw,3.4rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:1.1rem; }
.cta-h2 span { color:var(--gold); }
.cta-sub { font-size:1.05rem; color:#94a3b8; max-width:520px; margin:0 auto 2.6rem; line-height:1.75; }
.cta-btns { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }
.cta-btns a { font-size:1.05rem; padding:17px 40px; }

/* ═══════════════════════════════════════════════
   INTERNAL LINKS — SERVICE AREAS
   ═══════════════════════════════════════════════ */
.sec-areas { padding:80px 0; background:#f8fafc; }
.areas-header { text-align:center; margin-bottom:2.5rem; }
.areas-header h2 { font-size:1.8rem; font-weight:900; color:var(--navy); margin-bottom:.6rem; }
.areas-header p  { color:var(--muted); }
.area-pills { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.area-pill {
  display:inline-flex; align-items:center; gap:.38rem;
  background:#fff; color:var(--blue); border:1px solid rgba(0,120,227,.2);
  font-size:.82rem; font-weight:600; padding:8px 18px; border-radius:50px;
  transition:var(--transition); box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.area-pill:hover { background:var(--blue); color:#fff; transform:translateY(-2px); }
.area-pill i { font-size:.72rem; }

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.footer { background:var(--navy); padding:64px 0 0; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; }
.footer-logo { height:50px; margin-bottom:1rem; }
.footer-brand p { color:#94a3b8; font-size:.87rem; line-height:1.75; margin-bottom:1rem; }
.footer-phone-big {
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--gold); font-weight:800; font-size:1.05rem;
  margin-bottom:1rem;
}
.footer-phone-big:hover { color:var(--gold3); }
.footer-social { display:flex; gap:.65rem; margin-top:.8rem; }
.footer-social a {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  color:#94a3b8; font-size:.85rem; transition:var(--transition);
}
.footer-social a:hover { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.footer-col h3 { color:#fff; font-size:.95rem; font-weight:800; margin-bottom:1.2rem; }
.footer-col li { margin-bottom:.55rem; }
.footer-col li a { color:#94a3b8; font-size:.85rem; transition:var(--transition); }
.footer-col li a:hover { color:var(--gold); }
.footer-contact p { display:flex; align-items:center; gap:.6rem; color:#94a3b8; font-size:.85rem; margin-bottom:.55rem; }
.footer-contact p i { color:var(--gold); width:16px; }
.footer-contact a { color:#94a3b8; transition:var(--transition); }
.footer-contact a:hover { color:var(--gold); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.07); margin-top:3rem;
  padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.footer-bottom a { color:#94a3b8; font-size:.8rem; margin-left:1.2rem; transition:var(--transition); }
.footer-bottom a:hover { color:var(--gold); }
.footer-bottom p { color:#64748b; font-size:.8rem; }

/* ═══════════════════════════════════════════════
   MOBILE STICKY + FLOAT WIDGET
   ═══════════════════════════════════════════════ */
.mobile-sticky {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:999;
  display:grid; grid-template-columns:1fr 1fr;
}
.ms-call { background:var(--blue);  color:#fff; text-align:center; padding:1rem; font-weight:700; font-size:.9rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.ms-quote{ background:var(--gold);  color:var(--navy); text-align:center; padding:1rem; font-weight:800; font-size:.9rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.ms-call:hover  { background:var(--blue2); color:#fff; }
.ms-quote:hover { background:var(--gold2); color:var(--navy); }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media(max-width:1100px){
  .hero-grid { grid-template-columns:1fr 400px; gap:3rem; }
  .welcome-grid { grid-template-columns:1fr 400px; gap:3.5rem; }
  .footer-grid { grid-template-columns:1.2fr 1fr 1fr; }
  .footer-grid .footer-col:last-child { grid-column:1; }
}
@media(max-width:900px){
  .sec-cta .cta-inner > div { padding:28px 22px; border-radius:18px; }
  :root { --section:68px 0; }
  .nav-toggle { display:flex; }
  .nav-menu { display:none; position:absolute; top:100%; left:0; width:100%; background:rgba(15,23,42,.98); padding:1.5rem 2rem; border-top:1px solid rgba(255,255,255,.1); box-shadow:0 10px 30px rgba(0,0,0,.3); flex-direction:column; }
  .nav-list { flex-direction:column; gap:1.2rem; width:100%; align-items:flex-start; }
  .nav-list li { width:100%; }
  .dropdown-menu { position:static; opacity:1; visibility:visible; transform:none; background:transparent; border:none; box-shadow:none; padding-left:1rem; display:none; }
  .dropdown:hover .dropdown-menu { display:block; }
  .header-phone, .nav-cta-btn { text-align:center; justify-content:center; }
  .hero-grid { grid-template-columns:1fr; gap:2.5rem; }
  .hero-inner { padding:48px 0 56px; }
  .hero-bg {
    top:14px; right:14px; bottom:14px; left:14px;
    background: linear-gradient(120deg, rgba(15,23,42,0.72) 0%, rgba(244,196,48,0.16) 100%), url('images/screen-enclosure-installation-jacksonville-fl.jpg') center 38%/cover no-repeat;
    filter: brightness(0.98) blur(0.5px) saturate(1.08);
    transform:rotateY(-2deg) rotateX(1deg) scale(1.03);
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.26);
    box-shadow:0 34px 80px rgba(0,0,0,.34),0 14px 36px rgba(139,94,60,.18),0 0 0 1px rgba(255,255,255,.08) inset,0 0 32px rgba(244,196,48,.08);
    transition:transform 7s ease-out, box-shadow .45s ease, filter .7s;
    will-change:transform, filter;
  }
  .hero.loaded .hero-bg { transform:rotateY(-1deg) rotateX(.5deg) scale(1); }
  .hero:hover .hero-bg { transform:translateY(-4px) scale(1.01); }
  .hero-overlay { top:14px; right:14px; bottom:14px; left:14px; border-radius:20px; }
  .hero-form-card { max-width:520px; margin:0 auto; }
  .welcome-grid { grid-template-columns:1fr; gap:3rem; }
  .img-frame-1 img { height:340px; }
  .why-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .value-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .local-grid { grid-template-columns:1fr; gap:3rem; }
  .local-aside { position:static; }
  .whyus-grid { grid-template-columns:1fr; gap:3rem; }
  .img-stack-main { height:360px; }
  .img-stack-badge { right:0; }
  .gallery-masonry { grid-template-columns:repeat(2,1fr); }
  .process-steps { grid-template-columns:repeat(2,1fr); }
  .process-steps::before { display:none; }
  .midform-grid { grid-template-columns:1fr; gap:3rem; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:1.2rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid .footer-brand { grid-column:span 2; }
  .why-items { grid-template-columns:1fr; }
}
@media(max-width:580px){
  .hero-h1 { font-size:1.95rem; }
  .hf-row { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .gallery-masonry { grid-template-columns:1fr; }
  .gallery-masonry .gal-item.wide { grid-column:span 1; }
  .gallery-masonry .gal-item.tall { grid-row:span 1; }
  .hero-pills { display:none; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid .footer-brand { grid-column:span 1; }
  .footer-bottom { flex-direction:column; align-items:center; text-align:center; }
  .desktop-only { display:none !important; }
}
@media(min-width:768px){ .mobile-sticky { display:none; } }
@media(max-width:767px){ .mobile-sticky { display:grid; } body { padding-bottom:60px; } }