/* ============================================================
   CLIFFBROOK CONSTRUCTION LLC - MASTER STYLESHEET
   Brand Colors from Logo:
   - Blue  (#2196F3) > "CLIFFBROOK" text
   - Green (#4CAF50) > "CONSTRUCTION LLC" text
   - Navy  (#1B2A4A) > Navbar / dark sections
   - Dark  (#0D1B2E) > Footer / hero
   ============================================================ */

/* ---------- GOOGLE FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* ---------- CSS VARIABLES ---------- */
:root {
  --navy:       #1B2A4A;
  --navy-dark:  #0D1B2E;
  --blue:       #2196F3;
  --blue-dark:  #1565C0;
  --blue-light: #42A5F5;
  --green:      #4CAF50;
  --green-dark: #388E3C;
  --green-light:#66BB6A;
  --silver:     #B0B8C0;
  --silver-light:#D8DDE3;
  --white:      #FFFFFF;
  --off-white:  #F5F7FA;
  --text-dark:  #1A1A2E;
  --text-mid:   #444466;
  --text-light: #6B7280;
  --border:     #E5E7EB;
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.18);
  --shadow-xl:  0 16px 60px rgba(0,0,0,0.25);
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.18s ease;
  --font-head:  'Oswald', sans-serif;
  --font-body:  'Roboto', sans-serif;
  --navbar-h:   80px;
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.15;
  color: var(--text-dark);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-mid);
}

.lead {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--text-light);
}

/* ---------- LAYOUT UTILITIES ---------- */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

.section-alt {
  background: var(--off-white);
}

.section-dark {
  background: var(--navy-dark);
  color: var(--white);
}

.section-navy {
  background: var(--navy);
  color: var(--white);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

/* ---------- SECTION HEADER ---------- */
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 64px;
}

.section-header .eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
  position: relative;
  padding: 0 20px;
}

.section-header .eyebrow::before,
.section-header .eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30px;
  height: 2px;
  background: var(--blue);
}
.section-header .eyebrow::before { right: 100%; transform: translateX(16px); }
.section-header .eyebrow::after  { left:  100%; transform: translateX(-16px); }

.section-header h2 {
  margin-bottom: 16px;
}

.section-header p {
  font-size: 1.05rem;
}

/* Dark section overrides */
.section-dark .section-header h2,
.section-navy .section-header h2 {
  color: var(--white);
}

.section-dark .section-header p,
.section-navy .section-header p {
  color: var(--silver-light);
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  transition: var(--transition-fast);
}
.btn:hover::after { opacity: 1; }

.btn-green {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.35);
}
.btn-green:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(76, 175, 80, 0.45);
}

.btn-blue {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.35);
}
.btn-blue:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(33, 150, 243, 0.45);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.7);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn-outline-blue {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}
.btn-outline-blue:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(27,42,74,0.35);
}
.btn-navy:hover {
  background: var(--navy-dark);
  transform: translateY(-2px);
}

.btn-lg {
  font-size: 1rem;
  padding: 17px 40px;
}

.btn-sm {
  font-size: 0.78rem;
  padding: 10px 22px;
}

/* ---------- NAVBAR ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--navbar-h);
  background: var(--navy);
  display: flex;
  align-items: center;
  transition: var(--transition);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.navbar.scrolled {
  background: rgba(13, 27, 46, 0.98);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  height: 68px;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo img {
  height: 54px;
  width: auto;
  transition: var(--transition);
}

.navbar.scrolled .nav-logo img {
  height: 46px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a,
.nav-dropdown > a {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  position: relative;
}

.nav-links a:hover,
.nav-dropdown > a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

.nav-links a.active,
.nav-dropdown.active > a {
  color: var(--blue);
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
}

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--navy-dark);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  min-width: 220px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-xl);
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px !important;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.8) !important;
  font-size: 0.8rem !important;
  letter-spacing: 1px !important;
  background: transparent !important;
}

.dropdown-menu a:hover {
  background: rgba(33,150,243,0.15) !important;
  color: var(--blue) !important;
}

.dropdown-menu a svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.dropdown-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: var(--transition-fast);
}
.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

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

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  cursor: pointer;
  z-index: 1001;
  position: relative;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--navbar-h);
  left: 0;
  right: 0;
  background: var(--navy-dark);
  z-index: 1000;
  padding: 16px 0 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  max-height: calc(100vh - var(--navbar-h));
  overflow-y: auto;
  transform: translateY(-10px);
  opacity: 0;
  transition: var(--transition);
  pointer-events: none;
}

.mobile-nav.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.mobile-nav a {
  display: block;
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 13px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: var(--transition-fast);
}

.mobile-nav a:hover {
  color: var(--blue);
  background: rgba(33,150,243,0.08);
  padding-left: 36px;
}

.mobile-nav a.active { color: var(--blue); }

.mobile-nav .mobile-sub {
  background: rgba(0,0,0,0.2);
}
.mobile-nav .mobile-sub a {
  padding-left: 44px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
}

.mobile-nav .btn {
  margin: 16px 24px 0;
  justify-content: center;
}

/* ---------- PAGE HERO / HEADER ---------- */
.page-hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  padding: 120px 0 64px;
  margin-top: var(--navbar-h);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(33,150,243,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(76,175,80,0.08) 0%, transparent 50%);
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.page-hero-inner {
  position: relative;
  z-index: 1;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}

.breadcrumb a {
  color: rgba(255,255,255,0.55);
  transition: var(--transition-fast);
}
.breadcrumb a:hover { color: var(--blue); }

.breadcrumb svg { opacity: 0.45; }

.breadcrumb span:last-child { color: var(--blue-light); }

.page-hero h1 {
  color: var(--white);
  margin-bottom: 16px;
}

.page-hero p {
  color: var(--silver-light);
  max-width: 600px;
  font-size: 1.05rem;
}

/* ---------- PLACEHOLDER IMAGE ---------- */
.img-placeholder {
  background: linear-gradient(135deg, #1a2744 0%, #0d1b2e 100%);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 32px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(33,150,243,0.2);
}

.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(33,150,243,0.03) 20px,
    rgba(33,150,243,0.03) 21px
  );
}

.img-placeholder svg {
  color: var(--blue);
  opacity: 0.6;
}

.img-placeholder p {
  color: var(--silver);
  font-size: 0.85rem;
  text-align: center;
  font-family: var(--font-head);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.img-placeholder.tall  { min-height: 420px; }
.img-placeholder.hero-ph { min-height: 500px; }
.img-placeholder.sq    { aspect-ratio: 1; }
.img-placeholder.card  { min-height: 240px; }

/* ---------- CARDS ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-color: rgba(33,150,243,0.25);
}

.card-body { padding: 32px; }

/* ---------- SERVICE CARDS ---------- */
.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transform: scaleX(0);
  transition: var(--transition);
  transform-origin: left;
}

.service-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
  border-color: rgba(33,150,243,0.2);
}

.service-card:hover::before { transform: scaleX(1); }

.service-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(33,150,243,0.12), rgba(76,175,80,0.08));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--blue);
  transition: var(--transition);
  border: 1px solid rgba(33,150,243,0.15);
}

.service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: var(--white);
  border-color: transparent;
}

.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: var(--text-dark);
}

.service-card p {
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.learn-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  transition: var(--transition-fast);
}

.learn-more svg {
  transition: var(--transition-fast);
}

.learn-more:hover {
  color: var(--blue-dark);
}
.learn-more:hover svg {
  transform: translateX(4px);
}

/* ---------- FEATURE / WHY US ---------- */
.feature-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.feature-icon-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(33,150,243,0.12), rgba(76,175,80,0.08));
  border: 1px solid rgba(33,150,243,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}

.feature-item h4 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--text-dark);
}

.feature-item p {
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ---------- STAT CARDS ---------- */
.stat-item {
  text-align: center;
  padding: 24px 16px;
}

.stat-num {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: 0;
}

.stat-label {
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-light);
  font-family: var(--font-head);
}

/* ---------- PROCESS STEPS ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.process-grid::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  z-index: 0;
}

.process-step {
  text-align: center;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.step-num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  border: 3px solid var(--blue);
  position: relative;
  transition: var(--transition);
}

.step-num::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(33,150,243,0.3);
}

.process-step:hover .step-num {
  background: var(--blue);
  transform: scale(1.1);
}

.process-step h4 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.process-step p {
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ---------- TESTIMONIAL CARDS ---------- */
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: var(--transition);
  position: relative;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 20px;
  right: 28px;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(33,150,243,0.08);
  font-weight: 700;
}

.testimonial-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
  color: #F59E0B;
}

.testimonial-card blockquote {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-mid);
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.author-info strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  color: var(--text-dark);
}

.author-info span {
  font-size: 0.78rem;
  color: var(--text-light);
}

/* ---------- CTA BANNER ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(33,150,243,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(76,175,80,0.1) 0%, transparent 50%);
}

.cta-banner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.cta-inner .eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.75rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}

.cta-inner h2 {
  color: var(--white);
  margin-bottom: 16px;
}

.cta-inner p {
  color: var(--silver-light);
  font-size: 1.05rem;
  margin-bottom: 36px;
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 1px;
  transition: var(--transition-fast);
}
.cta-phone:hover { color: var(--blue); }

.cta-phone svg { color: var(--blue); }

/* ---------- CHECKLIST ---------- */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text-mid);
}

.checklist li svg {
  flex-shrink: 0;
  color: var(--green);
}

/* ---------- BADGE ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(33,150,243,0.12);
  border: 1px solid rgba(33,150,243,0.3);
  color: var(--blue);
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-family: var(--font-head);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

.badge-green {
  background: rgba(76,175,80,0.12);
  border-color: rgba(76,175,80,0.3);
  color: var(--green-dark);
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--navy-dark);
  padding: 72px 0 0;
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer-brand {}

.footer-logo {
  display: block;
  margin-bottom: 20px;
}

.footer-logo img {
  height: 60px;
  width: auto;
}

.footer-tagline {
  font-size: 0.88rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.5);
  margin-bottom: 28px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: var(--transition);
}

.social-icon:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  transform: translateY(-3px);
}

.footer-col h5 {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--blue);
  display: inline-block;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-links a:hover {
  color: var(--blue);
  padding-left: 4px;
}

.footer-links a svg {
  flex-shrink: 0;
  opacity: 0.5;
  transition: var(--transition-fast);
}

.footer-links a:hover svg { opacity: 1; }

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-contact-item svg {
  flex-shrink: 0;
  color: var(--blue);
  margin-top: 2px;
}

.footer-contact-item p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}

.footer-contact-item a {
  color: rgba(255,255,255,0.5);
  transition: var(--transition-fast);
}
.footer-contact-item a:hover { color: var(--blue); }

.footer-bottom {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.6;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  transition: var(--transition-fast);
}
.footer-bottom-links a:hover { color: var(--blue); }

/* ---------- TRUST BAR ---------- */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}

.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-mid);
}

.trust-item svg { color: var(--blue); }

/* ---------- STATS FLOATING BAR ---------- */
.stats-bar {
  background: var(--navy);
  padding: 48px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.stats-grid .stat-num { color: var(--blue); }
.stats-grid .stat-label { color: rgba(255,255,255,0.55); }

.stats-divider {
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.1);
  align-self: center;
  margin: 0 auto;
}

/* ---------- FORM STYLES ---------- */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 8px;
  font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 13px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-dark);
  font-size: 0.95rem;
  transition: var(--transition-fast);
  outline: none;
  appearance: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(33,150,243,0.12);
}

.form-group textarea {
  min-height: 130px;
  resize: vertical;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-message {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-top: 12px;
  display: none;
}

.form-message.success {
  background: rgba(76,175,80,0.1);
  border: 1px solid rgba(76,175,80,0.4);
  color: var(--green-dark);
  display: block;
}

.form-message.error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: #B91C1C;
  display: block;
}

/* ---------- CONTACT INFO CARDS ---------- */
.contact-card {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: var(--transition);
}

.contact-card:hover {
  border-color: rgba(33,150,243,0.3);
  box-shadow: var(--shadow-sm);
}

.contact-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}

.contact-card h4 {
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  color: var(--text-light);
  margin-bottom: 6px;
}

.contact-card p, .contact-card a {
  font-size: 0.95rem;
  color: var(--text-dark);
  line-height: 1.6;
}

.contact-card a:hover { color: var(--blue); }

/* ---------- GALLERY ---------- */
.gallery-filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.filter-btn {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  color: var(--text-mid);
  background: var(--white);
  transition: var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(33,150,243,0.3);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
}

.gallery-item .img-placeholder {
  border-radius: 0;
  height: 100%;
  min-height: unset;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,27,46,0.95) 0%, rgba(13,27,46,0.3) 60%, transparent 100%);
  opacity: 0;
  transition: var(--transition);
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

.gallery-item:hover .gallery-overlay { opacity: 1; }

.gallery-overlay h4 {
  color: var(--white);
  font-size: 1rem;
  margin-bottom: 4px;
}

.gallery-overlay span {
  font-size: 0.8rem;
  color: var(--blue-light);
  font-family: var(--font-head);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.gallery-item[data-cat] {
  transition: opacity 0.3s, transform 0.3s;
}

.gallery-item.hidden {
  display: none;
}

/* ---------- MAP ---------- */
.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.map-wrap iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: none;
}

/* ---------- SCROLL ANIMATIONS ---------- */
.reveal {
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1);
}

.reveal.from-left {
  transform: translateX(-32px);
}

.reveal.from-right {
  transform: translateX(32px);
}

.reveal.visible,
.js-ready .reveal.visible {
  opacity: 1;
  transform: translate(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ---------- BACK TO TOP ---------- */
.back-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  transition: var(--transition);
  z-index: 500;
  pointer-events: none;
}

.back-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.back-top:hover {
  background: var(--blue-dark);
  transform: translateY(-3px);
}

/* ---------- DIVIDER ---------- */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 0;
}

/* ---------- UTILS ---------- */
.text-blue   { color: var(--blue); }
.text-green  { color: var(--green); }
.text-white  { color: var(--white); }
.text-silver { color: var(--silver); }
.text-center { text-align: center; }
.mb-8  { margin-bottom: 8px;  }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-12      { gap: 12px; }
.gap-16      { gap: 16px; }
.gap-24      { gap: 24px; }
.w-full      { width: 100%; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* 1100px - Collapse grid */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .process-grid::before { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 900px - Tablet */
@media (max-width: 900px) {
  :root { --navbar-h: 70px; }

  .section { padding: 72px 0; }
  .grid-2  { grid-template-columns: 1fr; gap: 40px; }
  .grid-3  { grid-template-columns: repeat(2, 1fr); }

  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-nav { display: block; }

  .nav-right .btn { display: none; }

  .page-hero { padding: 100px 0 52px; }
}

/* 640px - Mobile */
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .grid-3  { grid-template-columns: 1fr; }
  .grid-4  { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }

  .cta-actions { flex-direction: column; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: 1fr; }

  .trust-bar-inner { gap: 20px; }
  .section-header { margin-bottom: 44px; }
}

/* 400px - Small phones */
@media (max-width: 400px) {
  .container { padding: 0 16px; }
  .gallery-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   HOME PAGE SPECIFIC STYLES
   ============================================================ */
/* charset: utf-8 */
/* =======================================
   HOME PAGE - PREMIUM REDESIGN STYLES
======================================= */

/* -- HERO -- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--navbar-h);

  /* Rich layered background */
  background:
    radial-gradient(ellipse at 70% 30%, rgba(33,150,243,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 80%, rgba(76,175,80,0.1) 0%, transparent 45%),
    linear-gradient(145deg, #020810 0%, #061224 35%, #0D1B2E 65%, #1B2A4A 100%);
}

/* Animated grid lines */
.hero::before {
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(33,150,243,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,150,243,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: gridMove 25s linear infinite;
}

@keyframes gridMove {
  0%   { transform: translateY(0); }
  100% { transform: translateY(64px); }
}

/* Glow orbs */
.hero::after {
  content:'';
  position:absolute;
  width:700px;height:700px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(33,150,243,0.12) 0%, transparent 70%);
  top:-200px;right:-150px;
  pointer-events:none;
  animation: pulse 6s ease-in-out infinite;
}

@keyframes pulse {
  0%,100% { transform: scale(1); opacity:0.6; }
  50%      { transform: scale(1.1); opacity:1; }
}

.hero-inner {
  position:relative;z-index:2;
  width:100%;max-width:1240px;margin:0 auto;padding:80px 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
}

/* Left: content */
.hero-badge {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(76,175,80,0.15);border:1px solid rgba(76,175,80,0.35);
  color:#66BB6A;padding:8px 18px;border-radius:50px;
  font-family:var(--font-head);font-size:0.72rem;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:28px;
}

.hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  color: var(--white);
  line-height: 1.08;
  margin-bottom: 24px;
  letter-spacing: 2px;
}

.hero h1 .highlight-blue  { color: var(--blue); }
.hero h1 .highlight-green { color: var(--green); }

.hero-desc {
  font-size:1.05rem;color:rgba(255,255,255,0.6);
  line-height:1.8;margin-bottom:40px;max-width:520px;
}

.hero-actions {
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:52px;
}

/* Stats row */
.hero-stats {
  display:flex;align-items:stretch;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:32px;gap:0;
}
.hero-stat {
  flex:1;text-align:center;padding:0 20px;
  border-right:1px solid rgba(255,255,255,0.1);
}
.hero-stat:first-child { padding-left:0; }
.hero-stat:last-child  { border-right:none; }
.hero-stat-num {
  font-family:var(--font-head);font-size:2.2rem;font-weight:700;
  color:var(--blue);line-height:1;margin-bottom:5px;letter-spacing:-1px;
}
.hero-stat-label {
  font-size:0.7rem;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,0.4);font-family:var(--font-head);
}

/* Right: visual */
.hero-visual { position:relative; }

.hero-img-frame {
  border-radius:20px;overflow:hidden;position:relative;
  border:1px solid rgba(33,150,243,0.2);
  box-shadow:0 32px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);
}

.hero-ph {
  min-height:520px;
  background:linear-gradient(145deg,#0a1628 0%,#1B2A4A 60%,#0a1628 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  position:relative;
}

.hero-ph::before {
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(33,150,243,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,150,243,0.06) 1px, transparent 1px);
  background-size:40px 40px;
}

.hero-ph-icon {
  position:relative;z-index:1;width:72px;height:72px;border-radius:16px;
  background:rgba(33,150,243,0.15);border:1px solid rgba(33,150,243,0.3);
  display:flex;align-items:center;justify-content:center;color:var(--blue);
}
.hero-ph-text {
  position:relative;z-index:1;text-align:center;
}
.hero-ph-text strong {
  display:block;font-family:var(--font-head);font-size:0.8rem;letter-spacing:2px;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:4px;
}
.hero-ph-text span {
  font-size:0.7rem;color:rgba(255,255,255,.22);
}

/* Floating cards on hero image */
.hero-float-1 {
  position:absolute;bottom:-20px;left:-28px;
  background:var(--white);border-radius:14px;padding:18px 22px;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
  display:flex;align-items:center;gap:14px;min-width:210px;
  border:1px solid rgba(255,255,255,0.8);
}
.hf-icon {
  width:46px;height:46px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.hf-text strong {
  display:block;font-family:var(--font-head);font-size:0.9rem;
  letter-spacing:.5px;color:var(--text-dark);
}
.hf-text span { font-size:0.75rem;color:var(--text-light); }

.hero-float-2 {
  position:absolute;top:-20px;right:-28px;
  background:var(--navy);border-radius:14px;padding:18px 24px;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
  border:1px solid rgba(33,150,243,0.2);text-align:center;
}
.hf2-num {
  font-family:var(--font-head);font-size:1.8rem;font-weight:700;
  color:var(--blue);line-height:1;letter-spacing:-1px;
}
.hf2-label {
  font-size:0.66rem;color:rgba(255,255,255,.45);
  font-family:var(--font-head);letter-spacing:1.5px;text-transform:uppercase;margin-top:3px;
}

/* -- TRUST BAR (Fixed - single row) -- */
.trust-bar {
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:18px 0;
}
.trust-bar-inner {
  display:flex;align-items:center;justify-content:center;
  gap:0;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;
}
.trust-bar-inner::-webkit-scrollbar { display:none; }

.trust-item {
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:0.72rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-mid);white-space:nowrap;
  padding:0 28px;
  border-right:1px solid var(--border);
  flex-shrink:0;
}
.trust-item:last-child { border-right:none; }
.trust-item svg { color:var(--blue);flex-shrink:0; }

/* -- SERVICES SECTION -- */
.services-section {
  padding:96px 0;
  background: var(--off-white);
}

.service-card-v2 {
  background:var(--white);border-radius:var(--radius-lg);
  padding:36px 28px 32px;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);transition:var(--transition);
  position:relative;overflow:hidden;cursor:pointer;
}
.service-card-v2::before {
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  transform:scaleX(0);transition:var(--transition);transform-origin:left;
}
.service-card-v2:hover {
  box-shadow:var(--shadow-xl);transform:translateY(-8px);
  border-color:rgba(33,150,243,0.2);
}
.service-card-v2:hover::before { transform:scaleX(1); }

.sc2-icon {
  width:62px;height:62px;border-radius:14px;
  background:linear-gradient(135deg,rgba(33,150,243,0.12),rgba(76,175,80,0.06));
  border:1px solid rgba(33,150,243,0.15);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);margin-bottom:22px;transition:var(--transition);
}
.service-card-v2:hover .sc2-icon {
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:var(--white);border-color:transparent;
}
.service-card-v2 h3 { font-size:1.15rem;margin-bottom:10px; }
.service-card-v2 p  { font-size:.88rem;line-height:1.7;margin-bottom:20px; }
.sc2-link {
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-head);font-size:.75rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--blue);transition:var(--transition-fast);
}
.sc2-link svg { transition:var(--transition-fast); }
.service-card-v2:hover .sc2-link { color:var(--blue-dark); }
.service-card-v2:hover .sc2-link svg { transform:translateX(4px); }

/* -- WHY US -- */
.why-section { padding:96px 0; background:var(--white); }

.why-img-wrap { position:relative; }
.why-img-frame {
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(33,150,243,.15);
  box-shadow:var(--shadow-xl);
}
.why-ph {
  min-height:500px;
  background:linear-gradient(145deg,#0a1628 0%,#1B2A4A 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.why-badge {
  position:absolute;bottom:-20px;right:-20px;
  width:110px;height:110px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--navy));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:var(--shadow-xl);border:4px solid var(--white);z-index:2;
}
.why-badge strong {
  font-family:var(--font-head);font-size:2rem;color:var(--white);line-height:1;letter-spacing:-1px;
}
.why-badge span {
  font-size:0.58rem;color:rgba(255,255,255,.7);text-align:center;
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.5px;line-height:1.3;
}

.features-2x2 {
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px;
}
.feat-item {
  display:flex;gap:16px;align-items:flex-start;
  background:var(--off-white);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:22px 20px;
  transition:var(--transition);
}
.feat-item:hover {
  border-color:rgba(33,150,243,.25);box-shadow:var(--shadow-sm);
  background:var(--white);
}
.feat-icon {
  width:46px;height:46px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(33,150,243,.1),rgba(76,175,80,.06));
  border:1px solid rgba(33,150,243,.14);
  display:flex;align-items:center;justify-content:center;color:var(--blue);
}
.feat-item h4 { font-size:.92rem;margin-bottom:5px; }
.feat-item p  { font-size:.83rem;line-height:1.6;margin-bottom:0; }

/* -- PROCESS -- */
.process-section { padding:96px 0; background:var(--off-white); }

.process-v2 {
  display:grid;grid-template-columns:repeat(4,1fr);
  position:relative;gap:0;
}
.process-v2::before {
  content:'';position:absolute;top:38px;left:12.5%;right:12.5%;
  height:2px;background:linear-gradient(90deg,var(--blue),var(--green));z-index:0;
}
.proc-step {
  text-align:center;padding:0 20px;position:relative;z-index:1;
}
.proc-num {
  width:76px;height:76px;border-radius:50%;
  background:var(--navy);border:3px solid var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:1.5rem;font-weight:700;color:var(--white);
  margin:0 auto 24px;position:relative;transition:var(--transition);
  box-shadow:0 8px 24px rgba(27,42,74,.4);
}
.proc-num::after {
  content:'';position:absolute;inset:-8px;border-radius:50%;
  border:1px dashed rgba(33,150,243,.3);
}
.proc-step:hover .proc-num {
  background:var(--blue);transform:scale(1.1);box-shadow:0 12px 32px rgba(33,150,243,.4);
}
.proc-step h4 { font-size:1rem;margin-bottom:10px; }
.proc-step p  { font-size:.87rem;line-height:1.65; }

/* -- TESTIMONIALS -- */
.testi-section { padding:96px 0; background:var(--white); }

.testi-card {
  background:var(--white);border-radius:var(--radius-lg);padding:36px 32px;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
  transition:var(--transition);position:relative;
}
.testi-card::before {
  content:'"';position:absolute;top:16px;right:24px;
  font-family:Georgia,serif;font-size:5rem;line-height:1;
  color:rgba(33,150,243,.07);font-weight:700;
}
.testi-card:hover {
  box-shadow:var(--shadow-lg);transform:translateY(-4px);
  border-color:rgba(33,150,243,.2);
}
.tc-stars { display:flex;gap:3px;color:#F59E0B;margin-bottom:16px; }
.tc-quote { font-size:.94rem;line-height:1.8;color:var(--text-mid);font-style:italic;margin-bottom:22px; }
.tc-author {
  display:flex;align-items:center;gap:12px;
  border-top:1px solid var(--border);padding-top:18px;
}
.tc-avatar {
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:.9rem;font-weight:700;color:var(--white);
}
.tc-info strong {
  display:block;font-family:var(--font-head);font-size:.87rem;letter-spacing:.5px;color:var(--text-dark);
}
.tc-info span { font-size:.75rem;color:var(--text-light); }

/* -- CTA BANNER -- */
.cta-v2 {
  padding:100px 0;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#020810 0%,#061224 40%,#0D1B2E 70%,#1B2A4A 100%);
}
.cta-v2::before {
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(33,150,243,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(33,150,243,.04) 1px,transparent 1px);
  background-size:56px 56px;
}
.cta-v2::after {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--green));
}
.cta-v2-orb1 {
  position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(33,150,243,.14) 0%,transparent 70%);
  left:-150px;top:50%;transform:translateY(-50%);pointer-events:none;
}
.cta-v2-orb2 {
  position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(76,175,80,.1) 0%,transparent 70%);
  right:-100px;top:50%;transform:translateY(-50%);pointer-events:none;
}
.cta-v2-inner {
  position:relative;z-index:1;text-align:center;max-width:740px;margin:0 auto;
}
.cta-v2-eyebrow {
  display:inline-block;font-family:var(--font-head);font-size:.72rem;
  letter-spacing:4px;text-transform:uppercase;color:var(--green);margin-bottom:18px;
}
.cta-v2-inner h2 { color:var(--white);margin-bottom:18px; }
.cta-v2-inner p  { color:rgba(255,255,255,.58);font-size:1.05rem;margin-bottom:40px; }
.cta-v2-actions {
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
}
.cta-v2-phone {
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-size:1.1rem;font-weight:600;
  color:var(--white);letter-spacing:1px;transition:var(--transition-fast);
  text-decoration:none;
}
.cta-v2-phone:hover { color:var(--blue); }
.cta-v2-phone svg  { color:var(--blue); }

/* -- RESPONSIVE -- */
@media(max-width:900px){
  .hero-inner { grid-template-columns:1fr;gap:48px;text-align:center;padding:60px 24px; }
  .hero-desc  { max-width:100%;margin:0 auto 40px; }
  .hero-actions { justify-content:center; }
  .hero-stats { justify-content:center; }
  .hero-float-1,.hero-float-2 { display:none; }
  .hero-ph { min-height:320px; }
  .trust-bar-inner { justify-content:flex-start;padding:0 16px; }
  .features-2x2  { grid-template-columns:1fr; }
  .process-v2     { grid-template-columns:1fr 1fr;gap:40px; }
  .process-v2::before { display:none; }
}

@media(max-width:600px){
  .hero h1   { font-size:2.1rem; }
  .trust-item { padding:0 16px;font-size:.65rem; }
  .process-v2 { grid-template-columns:1fr; }
}
  

/* ============================================================
   REVEAL OVERRIDE - Elements always visible (no JS dependency)
   ============================================================ */
.reveal,
.reveal.from-left,
.reveal.from-right {
  opacity: 1 !important;
  transform: none !important;
}


/* == GALLERY PAGE == */

    /* -- STATS BAR -- */
    .gal-stats-bar{background:var(--navy);border-bottom:3px solid transparent;border-image:linear-gradient(90deg,var(--blue),var(--green)) 1;}
    .gal-stats-inner{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;}
    .gal-stat-item{padding:36px 24px;border-right:1px solid rgba(255,255,255,0.07);transition:var(--transition);}
    .gal-stat-item:last-child{border-right:none;}
    .gal-stat-item:hover{background:rgba(33,150,243,0.06);}
    .gal-stat-num{font-family:var(--font-head);font-size:2.6rem;font-weight:700;color:var(--blue);line-height:1;letter-spacing:-1px;margin-bottom:6px;}
    .gal-stat-label{font-family:var(--font-head);font-size:0.72rem;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.45);}
    /* -- FILTER -- */
    .filter-wrap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
    .fpill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;padding:11px 24px;border-radius:50px;border:1.5px solid var(--border);color:var(--text-mid);background:var(--white);cursor:pointer;transition:var(--transition-fast);white-space:nowrap;}
    .fpill:hover{border-color:var(--blue);color:var(--blue);background:rgba(33,150,243,0.04);}
    .fpill.active{background:var(--navy);border-color:var(--navy);color:var(--white);box-shadow:0 4px 14px rgba(27,42,74,0.3);}
    .gal-count{text-align:center;font-family:var(--font-head);font-size:0.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-light);margin-bottom:36px;}
    .gal-count strong{color:var(--blue);font-size:0.85rem;}
    /* -- GRID -- */
    .gal-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:280px;gap:16px;}
    .gal-item.tall{grid-row:span 2;}
    .gal-item{position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;background:#0d1b2e;transition:transform 0.35s cubic-bezier(.4,0,.2,1),box-shadow 0.35s ease;}
    .gal-item.hidden{display:none;}
    .gal-item:hover{transform:scale(1.02);box-shadow:0 20px 48px rgba(0,0,0,0.35);z-index:3;}
    /* -- PLACEHOLDER -- */
    .gal-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(145deg,#0d1b2e 0%,#1B2A4A 60%,#0d1b2e 100%);transition:transform 0.5s ease;}
    .gal-item:hover .gal-ph{transform:scale(1.05);}
    .gal-ph::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(33,150,243,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(33,150,243,0.05) 1px,transparent 1px);background-size:32px 32px;}
    .gal-ph::after{content:'';position:absolute;inset:14px;border:1px solid rgba(33,150,243,0.12);border-radius:var(--radius-sm);pointer-events:none;}
    .gal-ph-icon{position:relative;z-index:1;width:56px;height:56px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;}
    .gal-ph-icon.blue{background:rgba(33,150,243,0.14);border:1px solid rgba(33,150,243,0.28);color:var(--blue);}
    .gal-ph-icon.green{background:rgba(76,175,80,0.14);border:1px solid rgba(76,175,80,0.28);color:var(--green);}
    .gal-ph-icon.silver{background:rgba(176,184,192,0.14);border:1px solid rgba(176,184,192,0.28);color:var(--silver);}
    .gal-ph-text{position:relative;z-index:1;text-align:center;}
    .gal-ph-text strong{display:block;font-family:var(--font-head);font-size:0.76rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:4px;}
    .gal-ph-text span{font-size:0.68rem;color:rgba(255,255,255,0.28);font-family:var(--font-body);}
    /* -- BADGE -- */
    .gal-badge{position:absolute;top:14px;left:14px;z-index:4;display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:50px;font-family:var(--font-head);font-size:0.62rem;letter-spacing:1.5px;text-transform:uppercase;backdrop-filter:blur(8px);}
    .gal-badge.kitch{background:rgba(33,150,243,0.88);color:#fff;}
    .gal-badge.bath{background:rgba(76,175,80,0.88);color:#fff;}
    .gal-badge.add{background:rgba(176,184,192,0.88);color:#0d1b2e;}
    /* -- OVERLAY -- */
    .gal-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,15,30,.97) 0%,rgba(5,15,30,.55) 50%,rgba(5,15,30,.05) 100%);opacity:0;transition:opacity .35s ease;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;z-index:2;}
    .gal-item:hover .gal-ov{opacity:1;}
    .gal-ov h4{color:#fff;font-size:1rem;letter-spacing:.5px;margin-bottom:4px;transform:translateY(8px);transition:transform .3s ease .05s;}
    .gal-item:hover .gal-ov h4{transform:translateY(0);}
    .gal-ov-loc{display:inline-flex;align-items:center;gap:5px;color:var(--blue-light);font-size:.78rem;font-family:var(--font-head);letter-spacing:1px;text-transform:uppercase;transform:translateY(8px);transition:transform .3s ease .1s;}
    .gal-item:hover .gal-ov-loc{transform:translateY(0);}
    /* -- ZOOM BTN -- */
    .gal-zoom{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transform:scale(.8);transition:opacity .25s ease,transform .25s ease;z-index:4;cursor:pointer;}
    .gal-item:hover .gal-zoom{opacity:1;transform:scale(1);}
    .gal-zoom:hover{background:var(--blue)!important;}
    /* -- EMPTY -- */
    .gal-empty{grid-column:1/-1;text-align:center;padding:80px 24px;display:none;}
    .gal-empty.show{display:block;}
    .gal-empty-icon{width:72px;height:72px;border-radius:50%;background:var(--off-white);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--silver);margin:0 auto 16px;}
    .gal-empty p{color:var(--text-light);font-family:var(--font-head);letter-spacing:1.5px;text-transform:uppercase;font-size:.82rem;}
    /* -- FEATURES ROW -- */
    .gal-features{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:72px;}
    .gf-item{background:var(--white);padding:32px 24px;text-align:center;transition:var(--transition);}
    .gf-item:hover{background:var(--off-white);}
    .gf-icon{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,rgba(33,150,243,.1),rgba(76,175,80,.06));border:1px solid rgba(33,150,243,.12);display:flex;align-items:center;justify-content:center;color:var(--blue);margin:0 auto 14px;}
    .gf-item h4{font-size:.92rem;margin-bottom:4px;}
    .gf-item p{font-size:.82rem;color:var(--text-light);margin-bottom:0;line-height:1.55;}
    /* -- LIGHTBOX -- */
    .lightbox{position:fixed;inset:0;background:rgba(3,8,18,.97);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:all .3s ease;}
    .lightbox.open{opacity:1;visibility:visible;}
    .lb-inner{position:relative;max-width:980px;width:100%;}
    .lb-close{position:absolute;top:-18px;right:-18px;width:44px;height:44px;background:var(--blue);border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;z-index:2;transition:var(--transition);}
    .lb-close:hover{background:var(--blue-dark);transform:scale(1.1) rotate(90deg);}
    .lb-img-wrap{border-radius:var(--radius-lg);overflow:hidden;background:#0d1b2e;min-height:480px;display:flex;align-items:center;justify-content:center;}
    .lb-ph{width:100%;min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(145deg,#0a1628 0%,#1B2A4A 100%);}
    .lb-ph p{color:rgba(255,255,255,.35);font-family:var(--font-head);letter-spacing:2px;text-transform:uppercase;font-size:.85rem;}
    .lb-info{margin-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
    .lb-info h4{color:#fff;font-size:1.1rem;}
    .lb-info .loc{color:var(--blue-light);font-family:var(--font-head);font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;}
    .lb-ctr{font-family:var(--font-head);font-size:.75rem;letter-spacing:2px;color:rgba(255,255,255,.3);text-transform:uppercase;}
    .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:var(--transition);}
    .lb-nav:hover{background:var(--blue);border-color:var(--blue);}
    .lb-nav.prev{left:-64px;}
    .lb-nav.next{right:-64px;}
    /* -- RESPONSIVE -- */
    @media(max-width:900px){
      .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:240px;}
      .gal-item.tall{grid-row:span 1;}
      .gal-stats-inner{grid-template-columns:repeat(2,1fr);}
      .gal-features{grid-template-columns:repeat(2,1fr);}
      .lb-nav{display:none;}
    }
    @media(max-width:560px){
      .gal-grid{grid-template-columns:1fr;grid-auto-rows:260px;}
    }
  

/* == ABOUT.HTML == */

    /* -- ABOUT PAGE SPECIFIC -- */

    /* Story section */
    .about-story-img {
      position: relative;
    }

    .years-badge {
      position: absolute;
      bottom: -20px;
      right: -20px;
      width: 110px;
      height: 110px;
      background: linear-gradient(135deg, var(--blue), var(--navy));
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-xl);
      border: 4px solid var(--white);
      z-index: 2;
    }

    .years-badge strong {
      font-family: var(--font-head);
      font-size: 2rem;
      color: var(--white);
      line-height: 1;
      letter-spacing: 0;
    }

    .years-badge span {
      font-size: 0.6rem;
      color: rgba(255,255,255,0.75);
      text-align: center;
      letter-spacing: 0.5px;
      font-family: var(--font-head);
      text-transform: uppercase;
      line-height: 1.3;
    }

    /* Values cards */
    .value-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 40px 32px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .value-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      transform: scaleX(0);
      transition: var(--transition);
      transform-origin: left;
    }

    .value-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-6px);
      border-color: rgba(33,150,243,0.2);
    }

    .value-card:hover::after { transform: scaleX(1); }

    .value-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(33,150,243,0.12), rgba(76,175,80,0.08));
      border: 2px solid rgba(33,150,243,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      color: var(--blue);
      transition: var(--transition);
    }

    .value-card:hover .value-icon {
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
      color: var(--white);
      border-color: transparent;
    }

    .value-card h3 {
      font-size: 1.15rem;
      margin-bottom: 12px;
    }

    /* Team area */
    .area-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(33,150,243,0.08);
      border: 1px solid rgba(33,150,243,0.2);
      color: var(--blue);
      padding: 6px 14px;
      border-radius: 50px;
      font-size: 0.78rem;
      font-family: var(--font-head);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin: 4px;
    }

    /* Mission strip */
    .mission-strip {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
      padding: 64px 0;
      position: relative;
      overflow: hidden;
    }

    .mission-strip::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 30% 50%, rgba(33,150,243,0.15) 0%, transparent 55%);
    }

    .mission-strip::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--green));
    }

    .mission-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      position: relative;
      z-index: 1;
    }

    .mission-item {
      text-align: center;
      padding: 32px 40px;
      border-right: 1px solid rgba(255,255,255,0.08);
    }

    .mission-item:last-child { border-right: none; }

    .mission-icon {
      width: 56px;
      height: 56px;
      border-radius: var(--radius-md);
      background: rgba(33,150,243,0.15);
      border: 1px solid rgba(33,150,243,0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue);
      margin: 0 auto 20px;
    }

    .mission-item h3 {
      color: var(--white);
      font-size: 1.15rem;
      margin-bottom: 10px;
    }

    .mission-item p {
      color: rgba(255,255,255,0.5);
      font-size: 0.9rem;
      line-height: 1.65;
    }

    @media (max-width: 900px) {
      .mission-grid { grid-template-columns: 1fr; }
      .mission-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
      .mission-item:last-child { border-bottom: none; }
      .years-badge { right: 16px; bottom: 16px; }
    }
  

/* == SERVICES.HTML == */

    /* -- SERVICES PAGE SPECIFIC -- */

    .service-detail-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: var(--transition);
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .service-detail-card:nth-child(even) {
      direction: rtl;
    }
    .service-detail-card:nth-child(even) > * {
      direction: ltr;
    }

    .service-detail-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-4px);
      border-color: rgba(33,150,243,0.2);
    }

    .sdc-image {
      position: relative;
      min-height: 320px;
    }

    .sdc-image .img-placeholder {
      height: 100%;
      min-height: 320px;
      border-radius: 0;
    }

    .sdc-body {
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .sdc-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, rgba(33,150,243,0.12), rgba(76,175,80,0.08));
      border: 1px solid rgba(33,150,243,0.18);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue);
      margin-bottom: 20px;
    }

    .sdc-body h3 {
      font-size: 1.5rem;
      margin-bottom: 12px;
      color: var(--text-dark);
    }

    .sdc-body > p {
      font-size: 0.95rem;
      line-height: 1.75;
      margin-bottom: 24px;
      color: var(--text-mid);
    }

    .sdc-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 28px;
    }

    .sdc-features li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.85rem;
      color: var(--text-mid);
    }

    .sdc-features li svg { color: var(--green); flex-shrink: 0; }

    /* Why strip */
    .why-strip {
      background: var(--navy);
      padding: 56px 0;
    }

    .why-strip-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      text-align: center;
    }

    .why-strip-item svg {
      color: var(--blue);
      margin-bottom: 14px;
    }

    .why-strip-item h4 {
      font-size: 0.95rem;
      color: var(--white);
      margin-bottom: 8px;
    }

    .why-strip-item p {
      font-size: 0.83rem;
      color: rgba(255,255,255,0.48);
      line-height: 1.6;
    }

    /* Pricing note */
    .pricing-note {
      background: linear-gradient(135deg, rgba(33,150,243,0.06), rgba(76,175,80,0.04));
      border: 1px solid rgba(33,150,243,0.18);
      border-radius: var(--radius-lg);
      padding: 40px 48px;
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .pricing-note-icon {
      flex-shrink: 0;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
    }

    .pricing-note h3 { font-size: 1.2rem; margin-bottom: 8px; }
    .pricing-note p  { font-size: 0.95rem; color: var(--text-mid); margin-bottom: 0; }

    @media (max-width: 900px) {
      .service-detail-card { grid-template-columns: 1fr; }
      .service-detail-card:nth-child(even) { direction: ltr; }
      .sdc-body { padding: 32px 28px; }
      .why-strip-grid { grid-template-columns: repeat(2, 1fr); }
      .pricing-note { flex-direction: column; text-align: center; padding: 32px 24px; }
    }

    @media (max-width: 600px) {
      .sdc-features { grid-template-columns: 1fr; }
      .why-strip-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    }
  

/* == KITCHEN-REMODELING.HTML == */

    /* -- SERVICE DETAIL PAGE -- */
    .service-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: start;
    }

    .service-intro-content {}

    .feature-checklist-box {
      background: var(--off-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px;
      margin-bottom: 28px;
    }

    .feature-checklist-box h4 {
      font-size: 1rem;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--blue);
      color: var(--text-dark);
      letter-spacing: 1px;
    }

    .feature-checklist-box ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .feature-checklist-box li {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 0.88rem;
      color: var(--text-mid);
      line-height: 1.4;
    }

    .feature-checklist-box li svg { color: var(--green); flex-shrink: 0; }

    /* Gallery strip */
    .gallery-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .gallery-strip-item {
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 4/3;
      position: relative;
      cursor: pointer;
    }

    .gallery-strip-item .img-placeholder {
      border-radius: 0;
      height: 100%;
      min-height: unset;
      transition: transform 0.4s ease;
    }

    .gallery-strip-item:hover .img-placeholder {
      transform: scale(1.04);
    }

    /* Benefits grid */
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .benefit-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px 28px;
      text-align: center;
      transition: var(--transition);
    }

    .benefit-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
      border-color: rgba(33,150,243,0.2);
    }

    .benefit-num {
      font-family: var(--font-head);
      font-size: 2.6rem;
      font-weight: 700;
      color: var(--blue);
      line-height: 1;
      margin-bottom: 8px;
    }

    .benefit-card h4 {
      font-size: 0.95rem;
      margin-bottom: 8px;
    }

    .benefit-card p {
      font-size: 0.85rem;
      line-height: 1.6;
    }

    /* Related services */
    .related-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px;
      display: flex;
      align-items: center;
      gap: 24px;
      transition: var(--transition);
      text-decoration: none;
      color: inherit;
    }

    .related-card:hover {
      box-shadow: var(--shadow-md);
      border-color: rgba(33,150,243,0.25);
      transform: translateY(-3px);
    }

    .related-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, rgba(33,150,243,0.1), rgba(76,175,80,0.06));
      border: 1px solid rgba(33,150,243,0.15);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue);
      flex-shrink: 0;
      transition: var(--transition);
    }

    .related-card:hover .related-icon {
      background: var(--blue);
      color: var(--white);
      border-color: transparent;
    }

    .related-card h4 { font-size: 1rem; margin-bottom: 6px; }
    .related-card p  { font-size: 0.88rem; color: var(--text-light); margin-bottom: 0; }

    .related-arrow {
      margin-left: auto;
      color: var(--blue);
      flex-shrink: 0;
      transition: var(--transition-fast);
    }
    .related-card:hover .related-arrow { transform: translateX(5px); }

    @media (max-width: 900px) {
      .service-intro { grid-template-columns: 1fr; gap: 40px; }
      .feature-checklist-box ul { grid-template-columns: 1fr; }
      .gallery-strip { grid-template-columns: 1fr 1fr; }
      .benefits-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 560px) {
      .gallery-strip { grid-template-columns: 1fr; }
      .benefits-grid { grid-template-columns: 1fr; }
    }
  

/* == BATHROOM-REMODELING.HTML == */

    .service-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: start;
    }

    .feature-checklist-box {
      background: var(--off-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px;
      margin-bottom: 28px;
    }

    .feature-checklist-box h4 {
      font-size: 1rem;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--blue);
      color: var(--text-dark);
      letter-spacing: 1px;
    }

    .feature-checklist-box ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .feature-checklist-box li {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 0.88rem;
      color: var(--text-mid);
      line-height: 1.4;
    }

    .feature-checklist-box li svg { color: var(--green); flex-shrink: 0; }

    /* Types of remodels */
    .remodel-types {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .remodel-type-card {
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--border);
      transition: var(--transition);
      background: var(--white);
    }

    .remodel-type-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-5px);
      border-color: rgba(33,150,243,0.2);
    }

    .remodel-type-img {
      aspect-ratio: 4/3;
      position: relative;
    }

    .remodel-type-img .img-placeholder {
      border-radius: 0;
      height: 100%;
      min-height: unset;
    }

    .remodel-type-body {
      padding: 24px;
    }

    .remodel-type-body h4 {
      font-size: 1rem;
      margin-bottom: 8px;
      color: var(--text-dark);
    }

    .remodel-type-body p {
      font-size: 0.87rem;
      line-height: 1.65;
      margin-bottom: 0;
    }

    /* Spa features */
    .spa-features {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .spa-feature {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 24px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      transition: var(--transition);
    }

    .spa-feature:hover {
      border-color: rgba(33,150,243,0.25);
      box-shadow: var(--shadow-sm);
    }

    .spa-feature-icon {
      width: 46px;
      height: 46px;
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, rgba(33,150,243,0.1), rgba(76,175,80,0.06));
      border: 1px solid rgba(33,150,243,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue);
      flex-shrink: 0;
    }

    .spa-feature h4 { font-size: 0.92rem; margin-bottom: 5px; }
    .spa-feature p  { font-size: 0.83rem; line-height: 1.6; margin-bottom: 0; }

    /* Gallery strip */
    .gallery-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .gallery-strip-item {
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 4/3;
      position: relative;
      background: #0d1b2e;
    }

    .gallery-strip-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      position: absolute;
      inset: 0;
    }

    .gallery-strip-item .img-placeholder {
      border-radius: 0;
      height: 100%;
      min-height: unset;
    }

    /* Benefits */
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .benefit-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px 28px;
      text-align: center;
      transition: var(--transition);
    }

    .benefit-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
      border-color: rgba(33,150,243,0.2);
    }

    .benefit-num {
      font-family: var(--font-head);
      font-size: 2.6rem;
      font-weight: 700;
      color: var(--blue);
      line-height: 1;
      margin-bottom: 8px;
    }

    .benefit-card h4 { font-size: 0.95rem; margin-bottom: 8px; }
    .benefit-card p  { font-size: 0.85rem; line-height: 1.6; }

    /* Related */
    .related-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px;
      display: flex;
      align-items: center;
      gap: 24px;
      transition: var(--transition);
      color: inherit;
    }

    .related-card:hover {
      box-shadow: var(--shadow-md);
      border-color: rgba(33,150,243,0.25);
      transform: translateY(-3px);
    }

    .related-icon {
      width: 60px; height: 60px;
      background: linear-gradient(135deg, rgba(33,150,243,0.1), rgba(76,175,80,0.06));
      border: 1px solid rgba(33,150,243,0.15);
      border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center;
      color: var(--blue); flex-shrink: 0;
      transition: var(--transition);
    }

    .related-card:hover .related-icon { background: var(--blue); color: var(--white); border-color: transparent; }
    .related-card h4 { font-size: 1rem; margin-bottom: 6px; }
    .related-card p  { font-size: 0.88rem; color: var(--text-light); margin-bottom: 0; }
    .related-arrow   { margin-left: auto; color: var(--blue); flex-shrink: 0; transition: var(--transition-fast); }
    .related-card:hover .related-arrow { transform: translateX(5px); }

    @media (max-width: 900px) {
      .service-intro     { grid-template-columns: 1fr; gap: 40px; }
      .feature-checklist-box ul { grid-template-columns: 1fr; }
      .remodel-types     { grid-template-columns: 1fr; }
      .spa-features      { grid-template-columns: 1fr; }
      .gallery-strip     { grid-template-columns: 1fr 1fr; }
      .benefits-grid     { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 560px) {
      .gallery-strip  { grid-template-columns: 1fr; }
      .benefits-grid  { grid-template-columns: 1fr; }
    }
  

/* == HOME-ADDITIONS.HTML == */

    .service-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: start;
    }

    .feature-checklist-box {
      background: var(--off-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px;
      margin-bottom: 28px;
    }

    .feature-checklist-box h4 {
      font-size: 1rem;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--blue);
      letter-spacing: 1px;
    }

    .feature-checklist-box ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .feature-checklist-box li {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 0.88rem;
      color: var(--text-mid);
    }

    .feature-checklist-box li svg { color: var(--green); flex-shrink: 0; }

    /* Addition types grid */
    .addition-types {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .addition-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px 28px;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .addition-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      transform: scaleX(0);
      transition: var(--transition);
      transform-origin: left;
    }

    .addition-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-6px);
      border-color: rgba(33,150,243,0.2);
    }

    .addition-card:hover::before { transform: scaleX(1); }

    .addition-card-icon {
      width: 56px;
      height: 56px;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, rgba(33,150,243,0.1), rgba(76,175,80,0.06));
      border: 1px solid rgba(33,150,243,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue);
      margin-bottom: 20px;
      transition: var(--transition);
    }

    .addition-card:hover .addition-card-icon {
      background: var(--blue);
      color: var(--white);
      border-color: transparent;
    }

    .addition-card h4 { font-size: 1rem; margin-bottom: 10px; }
    .addition-card p  { font-size: 0.87rem; line-height: 1.65; margin-bottom: 0; }

    /* Process timeline (vertical for this page) */
    .timeline {
      position: relative;
      max-width: 820px;
      margin: 0 auto;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 32px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, var(--blue), var(--green));
    }

    .timeline-item {
      display: flex;
      gap: 32px;
      align-items: flex-start;
      margin-bottom: 40px;
      position: relative;
    }

    .timeline-item:last-child { margin-bottom: 0; }

    .timeline-dot {
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--navy);
      border: 3px solid var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-head);
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--white);
      position: relative;
      z-index: 1;
      transition: var(--transition);
    }

    .timeline-item:hover .timeline-dot {
      background: var(--blue);
      transform: scale(1.1);
    }

    .timeline-content {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px 32px;
      flex: 1;
      transition: var(--transition);
    }

    .timeline-item:hover .timeline-content {
      border-color: rgba(33,150,243,0.25);
      box-shadow: var(--shadow-sm);
    }

    .timeline-content h4 { font-size: 1rem; margin-bottom: 8px; }
    .timeline-content p  { font-size: 0.9rem; line-height: 1.65; margin-bottom: 0; }

    /* Gallery strip */
    .gallery-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .gallery-strip-item {
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 4/3;
    }

    .gallery-strip-item .img-placeholder {
      border-radius: 0;
      height: 100%;
      min-height: unset;
    }

    /* Benefits */
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .benefit-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px 28px;
      text-align: center;
      transition: var(--transition);
    }

    .benefit-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
      border-color: rgba(33,150,243,0.2);
    }

    .benefit-num {
      font-family: var(--font-head);
      font-size: 2.6rem;
      font-weight: 700;
      color: var(--blue);
      line-height: 1;
      margin-bottom: 8px;
    }

    .benefit-card h4 { font-size: 0.95rem; margin-bottom: 8px; }
    .benefit-card p  { font-size: 0.85rem; line-height: 1.6; }

    /* Permit note */
    .permit-note {
      background: linear-gradient(135deg, rgba(33,150,243,0.05), rgba(76,175,80,0.03));
      border: 1px solid rgba(33,150,243,0.15);
      border-radius: var(--radius-lg);
      padding: 36px 40px;
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }

    .permit-note-icon {
      width: 52px;
      height: 52px;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      flex-shrink: 0;
    }

    .permit-note h4 { font-size: 1rem; margin-bottom: 8px; }
    .permit-note p  { font-size: 0.9rem; color: var(--text-mid); margin-bottom: 0; }

    /* Related */
    .related-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px;
      display: flex;
      align-items: center;
      gap: 24px;
      transition: var(--transition);
      color: inherit;
    }

    .related-card:hover {
      box-shadow: var(--shadow-md);
      border-color: rgba(33,150,243,0.25);
      transform: translateY(-3px);
    }

    .related-icon {
      width: 60px; height: 60px;
      background: linear-gradient(135deg, rgba(33,150,243,0.1), rgba(76,175,80,0.06));
      border: 1px solid rgba(33,150,243,0.15);
      border-radius: var(--radius-md);
      display: flex; align-items: center; justify-content: center;
      color: var(--blue); flex-shrink: 0; transition: var(--transition);
    }

    .related-card:hover .related-icon { background: var(--blue); color: var(--white); border-color: transparent; }
    .related-card h4 { font-size: 1rem; margin-bottom: 6px; }
    .related-card p  { font-size: 0.88rem; color: var(--text-light); margin-bottom: 0; }
    .related-arrow   { margin-left: auto; color: var(--blue); flex-shrink: 0; transition: var(--transition-fast); }
    .related-card:hover .related-arrow { transform: translateX(5px); }

    @media (max-width: 900px) {
      .service-intro { grid-template-columns: 1fr; gap: 40px; }
      .feature-checklist-box ul { grid-template-columns: 1fr; }
      .addition-types { grid-template-columns: 1fr 1fr; }
      .gallery-strip  { grid-template-columns: 1fr 1fr; }
      .benefits-grid  { grid-template-columns: 1fr 1fr; }
      .timeline::before { left: 28px; }
      .timeline-dot { width: 56px; height: 56px; }
      .permit-note { flex-direction: column; }
    }

    @media (max-width: 560px) {
      .addition-types { grid-template-columns: 1fr; }
      .gallery-strip  { grid-template-columns: 1fr; }
      .benefits-grid  { grid-template-columns: 1fr; }
    }
  

/* == TESTIMONIALS.HTML == */

    /* ==============================
       TESTIMONIALS PAGE - STYLES
    ============================== */

    /* -- HERO RATING STRIP -- */
    .rating-strip {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
      padding: 0;
      position: relative;
      overflow: hidden;
    }
    .rating-strip::before {
      content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse at 20% 50%,rgba(33,150,243,.18) 0%,transparent 55%);
    }
    .rating-strip::after {
      content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,var(--blue),var(--green));
    }
    .rs-inner {
      position:relative;z-index:1;
      display:grid;grid-template-columns:auto 1px 1fr 1px 1fr 1px 1fr;
      align-items:center;
    }
    .rs-divider {
      width:1px;height:80px;background:rgba(255,255,255,0.1);
    }

    /* Big 4.9 score */
    .rs-big {
      text-align:center;padding:48px 56px 48px 0;
    }
    .rs-big-num {
      font-family:var(--font-head);font-size:5.5rem;font-weight:700;
      color:var(--white);line-height:1;letter-spacing:-3px;margin-bottom:10px;
    }
    .rs-big-stars {
      display:flex;gap:4px;justify-content:center;color:#F59E0B;margin-bottom:8px;
    }
    .rs-big-label {
      font-family:var(--font-head);font-size:0.7rem;letter-spacing:3px;
      text-transform:uppercase;color:rgba(255,255,255,0.4);
    }

    /* Stat items - uses stat-num for JS counter */
    .rs-stat {
      text-align:center;padding:48px 40px;
    }
    .rs-num {
      font-family:var(--font-head);font-size:2.8rem;font-weight:700;
      color:var(--blue);line-height:1;letter-spacing:-1px;margin-bottom:8px;
    }
    .rs-label {
      font-family:var(--font-head);font-size:0.7rem;letter-spacing:3px;
      text-transform:uppercase;color:rgba(255,255,255,0.4);
    }

    /* -- FEATURED REVIEW -- */
    .featured-wrap {
      max-width:960px;margin:0 auto;
    }
    .featured-card {
      background:linear-gradient(135deg,rgba(33,150,243,.05),rgba(76,175,80,.03));
      border:1px solid rgba(33,150,243,.2);
      border-radius:var(--radius-xl);
      padding:60px 72px;
      text-align:center;
      position:relative;
      overflow:hidden;
    }
    .featured-card::before {
      content:'"';position:absolute;top:-30px;left:50%;transform:translateX(-50%);
      font-family:Georgia,serif;font-size:14rem;line-height:1;
      color:rgba(33,150,243,.05);font-weight:700;pointer-events:none;
    }
    .featured-card .stars {
      display:flex;gap:5px;justify-content:center;color:#F59E0B;margin-bottom:24px;
    }
    .featured-card blockquote {
      font-size:1.35rem;line-height:1.7;color:var(--text-dark);
      font-style:italic;max-width:820px;margin:0 auto 36px;
      position:relative;z-index:1;
    }
    .featured-author {
      display:inline-flex;align-items:center;gap:18px;
    }
    .feat-avatar {
      width:56px;height:56px;border-radius:50%;
      background:linear-gradient(135deg,var(--navy),var(--blue));
      display:flex;align-items:center;justify-content:center;
      font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--white);
      flex-shrink:0;
      box-shadow:0 4px 16px rgba(33,150,243,.3);
    }
    .feat-info strong {
      display:block;font-family:var(--font-head);font-size:1rem;
      letter-spacing:.5px;color:var(--text-dark);text-align:left;
    }
    .feat-info span {
      font-size:0.82rem;color:var(--text-light);
    }

    /* -- REVIEW CARDS -- */
    .reviews-grid {
      display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
    }
    .rev-card {
      background:var(--white);border-radius:var(--radius-lg);
      padding:36px 32px;box-shadow:var(--shadow-sm);
      border:1px solid var(--border);transition:var(--transition);
      position:relative;display:flex;flex-direction:column;
    }
    .rev-card::before {
      content:'"';position:absolute;top:14px;right:22px;
      font-family:Georgia,serif;font-size:5.5rem;line-height:1;
      color:rgba(33,150,243,.06);font-weight:700;pointer-events:none;
    }
    .rev-card:hover {
      box-shadow:var(--shadow-lg);transform:translateY(-6px);
      border-color:rgba(33,150,243,.22);
    }
    .rev-stars {
      display:flex;gap:3px;color:#F59E0B;margin-bottom:18px;
    }
    .rev-card blockquote {
      font-size:.94rem;line-height:1.8;color:var(--text-mid);
      font-style:italic;margin-bottom:24px;flex:1;
    }
    .rev-meta {
      display:flex;align-items:center;gap:12px;
      padding-top:20px;border-top:1px solid var(--border);
    }
    .rev-avatar {
      width:44px;height:44px;border-radius:50%;
      background:linear-gradient(135deg,var(--navy),var(--blue));
      display:flex;align-items:center;justify-content:center;
      font-family:var(--font-head);font-size:.9rem;font-weight:700;
      color:var(--white);flex-shrink:0;
    }
    .rev-info strong {
      display:block;font-family:var(--font-head);font-size:.87rem;
      letter-spacing:.5px;color:var(--text-dark);
    }
    .rev-info span { font-size:.76rem;color:var(--text-light); }
    .rev-tag {
      margin-left:auto;display:inline-flex;align-items:center;
      background:rgba(33,150,243,.08);border:1px solid rgba(33,150,243,.18);
      color:var(--blue);padding:4px 10px;border-radius:50px;
      font-size:.66rem;font-family:var(--font-head);letter-spacing:1px;
      text-transform:uppercase;white-space:nowrap;
    }

    /* -- RATING BREAKDOWN -- */
    .breakdown-wrap {
      max-width:880px;margin:0 auto;
      background:var(--off-white);border:1px solid var(--border);
      border-radius:var(--radius-lg);padding:48px 56px;
      display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;
    }
    .bd-score {
      text-align:center;padding-right:56px;
      border-right:1px solid var(--border);
    }
    .bd-num {
      font-family:var(--font-head);font-size:5.5rem;font-weight:700;
      color:var(--text-dark);line-height:1;letter-spacing:-3px;
    }
    .bd-stars {
      display:flex;justify-content:center;gap:3px;color:#F59E0B;margin:10px 0;
    }
    .bd-total {
      font-size:.76rem;color:var(--text-light);font-family:var(--font-head);
      letter-spacing:1.5px;text-transform:uppercase;
    }
    .bd-bars { display:flex;flex-direction:column;gap:13px; }
    .bd-row { display:flex;align-items:center;gap:14px; }
    .bd-star-label {
      font-family:var(--font-head);font-size:.78rem;letter-spacing:1px;
      color:var(--text-mid);width:36px;text-align:right;flex-shrink:0;
    }
    .bd-track {
      flex:1;height:10px;background:var(--border);
      border-radius:5px;overflow:hidden;
    }
    .bd-fill {
      height:100%;background:linear-gradient(90deg,var(--blue),var(--green));
      border-radius:5px;width:0;transition:width 1.3s cubic-bezier(.4,0,.2,1);
    }
    .bd-fill.go { width:var(--w); }
    .bd-count {
      font-size:.76rem;color:var(--text-light);width:30px;flex-shrink:0;
    }

    /* -- PLATFORM CARDS -- */
    .platform-grid {
      display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
      max-width:800px;margin:0 auto;
    }
    .plat-card {
      background:var(--white);border:1px solid var(--border);
      border-radius:var(--radius-lg);padding:32px 24px;text-align:center;
      transition:var(--transition);
    }
    .plat-card:hover {
      box-shadow:var(--shadow-md);border-color:rgba(33,150,243,.2);
      transform:translateY(-3px);
    }
    .plat-icon {
      width:56px;height:56px;border-radius:var(--radius-md);
      display:flex;align-items:center;justify-content:center;
      margin:0 auto 16px;
    }
    .plat-stars {
      display:flex;justify-content:center;gap:2px;
      color:#F59E0B;margin-bottom:10px;
    }
    .plat-card h4 { font-size:1rem;margin-bottom:4px; }
    .plat-card p  { font-size:.83rem;color:var(--text-light);margin-bottom:0; }

    /* -- RESPONSIVE -- */
    @media(max-width:1000px){
      .rs-inner{grid-template-columns:1fr;text-align:center;gap:0;}
      .rs-divider{display:none;}
      .rs-big{padding:40px 24px 20px;}
      .breakdown-wrap{grid-template-columns:1fr;gap:32px;padding:32px 28px;}
      .bd-score{border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:32px;}
    }
    @media(max-width:900px){
      .reviews-grid{grid-template-columns:1fr 1fr;}
      .featured-card{padding:40px 32px;}
      .featured-card blockquote{font-size:1.1rem;}
    }
    @media(max-width:600px){
      .reviews-grid{grid-template-columns:1fr;}
      .featured-card{padding:32px 24px;}
      .platform-grid{grid-template-columns:1fr;}
    }
  

/* == CONTACT.HTML == */

    /* -- CONTACT PAGE -- */

    .contact-layout {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 64px;
      align-items: start;
    }

    /* -- FORM PANEL -- */
    .form-panel {
      background: var(--white);
      border-radius: var(--radius-xl);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }

    .form-panel-header {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
      padding: 36px 40px 32px;
      position: relative;
      overflow: hidden;
    }

    .form-panel-header::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--green));
    }

    .form-panel-header::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 80% 50%, rgba(33,150,243,0.15) 0%, transparent 60%);
    }

    .form-panel-header h3 {
      color: var(--white);
      font-size: 1.4rem;
      margin-bottom: 6px;
      position: relative;
      z-index: 1;
    }

    .form-panel-header p {
      color: rgba(255,255,255,0.6);
      font-size: 0.9rem;
      margin-bottom: 0;
      position: relative;
      z-index: 1;
    }

    .free-badge {
      position: absolute;
      top: 28px;
      right: 32px;
      background: var(--green);
      color: var(--white);
      font-family: var(--font-head);
      font-size: 0.68rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 50px;
      z-index: 1;
    }

    .form-body {
      padding: 36px 40px 40px;
    }

    /* Form grid */
    .form-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    /* Submit btn loader */
    .btn-loader {
      display: none;
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255,255,255,0.4);
      border-top-color: var(--white);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      flex-shrink: 0;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* -- INFO PANEL -- */
    .info-panel {}

    .info-panel-title {
      font-family: var(--font-head);
      font-size: 0.78rem;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--blue);
      display: block;
      margin-bottom: 12px;
    }

    .info-panel h2 {
      font-size: 1.8rem;
      margin-bottom: 16px;
      line-height: 1.2;
    }

    .info-panel > p {
      color: var(--text-mid);
      font-size: 0.95rem;
      line-height: 1.75;
      margin-bottom: 36px;
    }

    /* Contact cards */
    .contact-cards {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 36px;
    }

    .contact-info-card {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      background: var(--off-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 20px 24px;
      transition: var(--transition);
      text-decoration: none;
      color: inherit;
    }

    .contact-info-card:hover {
      border-color: rgba(33,150,243,0.3);
      box-shadow: var(--shadow-sm);
      background: var(--white);
    }

    .ci-icon {
      width: 46px;
      height: 46px;
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      flex-shrink: 0;
    }

    .ci-label {
      font-family: var(--font-head);
      font-size: 0.72rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-light);
      margin-bottom: 4px;
    }

    .ci-value {
      font-size: 0.95rem;
      color: var(--text-dark);
      font-weight: 500;
      line-height: 1.5;
    }

    .ci-value a {
      color: var(--text-dark);
      transition: var(--transition-fast);
    }

    .ci-value a:hover { color: var(--blue); }

    /* Hours card */
    .hours-card {
      background: var(--off-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 20px 24px;
      margin-bottom: 36px;
    }

    .hours-card h4 {
      font-size: 0.78rem;
      letter-spacing: 2px;
      color: var(--text-light);
      margin-bottom: 14px;
      text-transform: uppercase;
    }

    .hours-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.88rem;
    }

    .hours-row:last-child { border-bottom: none; }

    .hours-day { color: var(--text-mid); font-weight: 500; }

    .hours-time {
      font-family: var(--font-head);
      font-size: 0.8rem;
      letter-spacing: 0.5px;
    }

    .hours-time.open  { color: var(--green-dark); }
    .hours-time.closed { color: #EF4444; }

    /* Social links row */
    .social-row {
      display: flex;
      gap: 10px;
    }

    .social-link {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--off-white);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 16px;
      font-family: var(--font-head);
      font-size: 0.72rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-mid);
      transition: var(--transition-fast);
      text-decoration: none;
    }

    .social-link:hover {
      border-color: var(--blue);
      color: var(--blue);
      background: rgba(33,150,243,0.04);
    }

    /* Map */
    .map-section {
      margin-top: 72px;
    }

    .map-wrap {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      border: 1px solid var(--border);
      position: relative;
    }

    .map-wrap iframe {
      display: block;
      width: 100%;
      height: 420px;
      border: none;
    }

    /* Map overlay badge */
    .map-badge {
      position: absolute;
      top: 20px;
      left: 20px;
      background: var(--white);
      border-radius: var(--radius-md);
      padding: 14px 20px;
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 2;
      pointer-events: none;
    }

    .map-badge-icon {
      width: 38px;
      height: 38px;
      background: linear-gradient(135deg, var(--blue), var(--blue-dark));
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      flex-shrink: 0;
    }

    .map-badge strong {
      display: block;
      font-family: var(--font-head);
      font-size: 0.85rem;
      letter-spacing: 0.5px;
      color: var(--text-dark);
    }

    .map-badge span {
      font-size: 0.75rem;
      color: var(--text-light);
    }

    /* Why contact us strip */
    .why-contact {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-bottom: 72px;
    }

    .wc-item {
      text-align: center;
      padding: 32px 20px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      transition: var(--transition);
    }

    .wc-item:hover {
      box-shadow: var(--shadow-md);
      border-color: rgba(33,150,243,0.2);
      transform: translateY(-4px);
    }

    .wc-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(33,150,243,0.1), rgba(76,175,80,0.06));
      border: 1px solid rgba(33,150,243,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--blue);
      margin: 0 auto 16px;
    }

    .wc-item h4 { font-size: 0.92rem; margin-bottom: 6px; }
    .wc-item p  { font-size: 0.83rem; line-height: 1.6; margin-bottom: 0; }

    @media (max-width: 1000px) {
      .contact-layout { grid-template-columns: 1fr; gap: 48px; }
      .why-contact { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 600px) {
      .form-panel-header { padding: 28px 24px; }
      .form-body { padding: 28px 24px; }
      .form-row-2 { grid-template-columns: 1fr; }
      .why-contact { grid-template-columns: 1fr 1fr; }
      .free-badge { display: none; }
      .social-row { flex-wrap: wrap; }
      .map-badge { display: none; }
    }

    @media (max-width: 400px) {
      .why-contact { grid-template-columns: 1fr; }
    }
  

/* ============================================================
   GLOBAL RESPONSIVE FIX - ALL PAGES
   ============================================================ */

/* Prevent horizontal overflow on ALL pages */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

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

img {
  max-width: 100%;
  height: auto;
}

/* Container responsive padding */
@media (max-width: 768px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- TABLET (max 900px) ---- */
@media (max-width: 900px) {

  /* Page Hero */
  .page-hero { padding: 90px 0 48px !important; }
  .page-hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem) !important; }
  .page-hero p  { font-size: 1rem !important; }

  /* All 2-col grids stack */
  .grid-2 { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* 3-col grids become 2 */
  .grid-3 { grid-template-columns: repeat(2,1fr) !important; }

  /* Section headers */
  .section-header h2 { font-size: clamp(1.6rem, 4vw, 2.4rem) !important; }

  /* CTA actions */
  .cta-actions { flex-direction: column !important; align-items: center !important; }
  .cta-actions .btn { width: 100% !important; max-width: 360px !important; justify-content: center !important; }
  .cta-phone { justify-content: center !important; }

  /* Rating strip */
  .rs-inner { grid-template-columns: 1fr 1fr !important; }
  .rs-divider { display: none !important; }
  .rs-big { padding: 32px 20px !important; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .rs-stat { padding: 28px 20px !important; }

  /* Gallery stats */
  .gal-stats-inner { grid-template-columns: repeat(2,1fr) !important; }
  .gal-stat-item { padding: 28px 16px !important; }

  /* Features 2x2 */
  .features-2x2 { grid-template-columns: 1fr !important; }

  /* Process steps */
  .process-v2 { grid-template-columns: repeat(2,1fr) !important; }
  .process-v2::before { display: none !important; }

  /* Hero section */
  .hero-inner { grid-template-columns: 1fr !important; text-align: center !important; padding: 60px 24px !important; }
  .hero-actions { justify-content: center !important; }
  .hero-stats { justify-content: center !important; }
  .hero-float-1, .hero-float-2 { display: none !important; }

  /* Service detail cards */
  .service-detail-card { grid-template-columns: 1fr !important; }
  .sdc-image { min-height: 260px !important; }

  /* Gallery strip */
  .gallery-strip { grid-template-columns: 1fr 1fr !important; }

  /* Why section */
  .why-badge { bottom: -12px !important; right: -12px !important; width: 90px !important; height: 90px !important; }

  /* Trust bar scroll on mobile */
  .trust-bar-inner { overflow-x: auto !important; justify-content: flex-start !important; padding: 0 16px !important; }

  /* Benefits grid */
  .benefits-grid { grid-template-columns: 1fr !important; }
  .timeline-grid { grid-template-columns: 1fr !important; }
}

/* ---- MOBILE (max 640px) ---- */
@media (max-width: 640px) {

  /* 3-col grids stack */
  .grid-3 { grid-template-columns: 1fr !important; }

  /* Reviews grid */
  .reviews-grid { grid-template-columns: 1fr !important; }

  /* Gallery grid */
  .gal-grid { grid-template-columns: 1fr !important; grid-auto-rows: 260px !important; }
  .gal-item.tall { grid-row: span 1 !important; }

  /* Features row */
  .gal-features { grid-template-columns: 1fr !important; }
  .gallery-features { grid-template-columns: 1fr !important; }

  /* Platform grid */
  .platform-grid { grid-template-columns: 1fr !important; }

  /* Breakdown wrap */
  .breakdown-wrap { grid-template-columns: 1fr !important; padding: 28px 20px !important; }
  .bd-score { border-right: none !important; border-bottom: 1px solid var(--border) !important; padding-bottom: 28px !important; padding-right: 0 !important; }

  /* Gallery strip 1 col */
  .gallery-strip { grid-template-columns: 1fr !important; }

  /* Process 1 col */
  .process-v2 { grid-template-columns: 1fr !important; }

  /* Stats */
  .hero-stat-num { font-size: 1.8rem !important; }
  .hero-stats { gap: 0 !important; }
  .hero-stat { padding: 0 12px !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 12px !important; }
  .footer-bottom-links { flex-wrap: wrap !important; justify-content: center !important; }

  /* Page hero buttons */
  .page-hero-inner .btn { width: 100% !important; justify-content: center !important; }

  /* Contact form */
  .form-grid { grid-template-columns: 1fr !important; }

  /* Featured card */
  .featured-card { padding: 32px 20px !important; }
  .featured-card blockquote { font-size: 1rem !important; }

  /* About stats */
  .about-stats { grid-template-columns: repeat(2,1fr) !important; }

  /* Section header */
  h1 { font-size: clamp(1.6rem, 6vw, 2.5rem) !important; }
  h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
}

/* ---- SMALL PHONE (max 400px) ---- */
@media (max-width: 400px) {
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .gal-stats-inner { grid-template-columns: 1fr 1fr !important; }
  .gal-num { font-size: 2rem !important; }
  .btn-lg { padding: 14px 20px !important; font-size: 0.8rem !important; }
}