/* ============================================================
   service.css — Service page stylesheet
   Las Vegas Official Bail Bonds

   PART 1 + PART 2 are the homepage theme, lifted verbatim from the
   <style> blocks inside index.php so a service page renders in the
   exact same black + gold system. index.php keeps those blocks inline,
   so they cannot be @imported — they are mirrored here instead.
   PART 3 holds the service-page-only rules.
   ============================================================ */

/* ============================================================
   PART 1 — Hero (index.php style block 1)
   ============================================================ */
/* Reset */
* {
  box-sizing: border-box;
}

/* Hero Section - Premium Professional Design */
.hero-section {
  padding: 100px 5%;
  background: #000000;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(20,20,20,1) 100%);
  z-index: 0;
}

.hero-section::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 150%;
  background: radial-gradient(ellipse at center, rgba(139,116,70,0.08) 0%, transparent 70%);
  z-index: 0;
}

/* Heading on Top */
.hero-title-h1 {
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  margin-bottom: 50px;
  letter-spacing: -1px;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  z-index: 2;
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 1400px;
}

/* Flex Container for Image (Left) and Content (Right) - CENTERED */
.hero-flex-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 50px;
  z-index: 2;
  position: relative;
  width: 100%;
  max-width: 1400px;
}

/* Hero Image - Left Side */
.hero-image {
  flex: 0 0 auto;
  max-width: 450px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.image-container {
  position: relative;
  width: 100%;
  /*height: 600px;*/
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(139,116,70,0.2);
  margin-bottom: 30px;
  border: 1px solid rgba(139,116,70,0.2);
}

.image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139,116,70,0.1) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
}

.image-container img {
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.5s ease;
  filter: brightness(0.95) contrast(1.1);
  margin-top: -15%;
}

.image-container:hover img {
  transform: scale(1.03);
}

.image-overlay {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 2;
}

.quality-badge {
  background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(20,20,20,0.85) 100%);
  padding: 15px 20px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(139,116,70,0.3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.badge-text {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 6px;
  letter-spacing: 2px;
}

.stars {
  color: #8B7446;
  font-size: 16px;
  letter-spacing: 2px;
}

.location-badge {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(20,20,20,0.85) 100%);
  color: #fff;
  padding: 18px 25px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(139,116,70,0.3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.location-icon {
  font-size: 24px;
  color: #8B7446;
}

.location-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.location-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: 1.5px;
  color: #FFFFFF;
}

.location-subtitle {
  font-size: 11px;
  opacity: 0.7;
  letter-spacing: 1px;
  color: #8B7446;
}

/* Hero Content - Right Side */
.hero-content {
  flex: 1;
  max-width: 700px;
  min-width: 320px;
  z-index: 2;
  position: relative;
}

.hero-description-box {
  background: linear-gradient(135deg, rgba(139,116,70,0.05) 0%, rgba(255,255,255,0.02) 100%);
  padding: 35px;
  border-left: 3px solid #8B7446;
  border-right: 1px solid rgba(139,116,70,0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  position: relative;
}

.hero-description-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,116,70,0.3), transparent);
}

.hero-description {
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
  margin-bottom: 20px;
  font-weight: 300;
}

.hero-description:last-child {
  margin-bottom: 0;
}

.hero-description a {
  color: #8B7446;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
  border-bottom: 1px solid rgba(139,116,70,0.3);
}

.hero-description a:hover {
  color: #A89968;
  border-bottom-color: #A89968;
}

/* Mobile Responsive */
@media (max-width: 1200px) {
  .hero-flex-container {
    gap: 40px;
  }
  
  .hero-image {
    max-width: 400px;
  }
  
  .hero-content {
    max-width: 600px;
  }
}

@media (max-width: 992px) {
  .hero-section {
    padding: 80px 5%;
  }
  
  .hero-flex-container {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  
  .hero-image {
    max-width: 600px;
  }
  
  .image-container {
    height: 500px;
  }
  
  .hero-content {
    width: 100%;
    max-width: 100%;
  }
  
  .hero-description-box {
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 60px 5%;
    min-height: auto;
  }
  
  .hero-description {
    font-size: 15px;
  }
  
  .hero-image {
    max-width: 450px;
  }
  
  .image-container {
    height: 450px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 50px 5%;
  }
  
  .hero-description-box {
    padding: 20px;
  }
  
  .hero-description {
    font-size: 14px;
  }
  
  .image-container {
    height: 400px;
  }
  
  .image-overlay {
    bottom: 15px;
    right: 15px;
  }
  
  .quality-badge {
    padding: 12px 16px;
  }
  
  .location-badge {
    padding: 15px 20px;
    gap: 12px;
  }
}

/* ============================================================
   PART 2A — Structural premium layer (index.php style block 4)
   ============================================================ */
/* Premium Global Styles */
.container-premium {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Section Divider */
.section-divider {
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, rgba(139,116,70,0.05) 50%, transparent 100%);
  position: relative;
}

.section-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,116,70,0.3), transparent);
}

.section-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #8B7446;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(139,116,70,0.4);
}

.section-header-premium {
  text-align: center;
  margin-bottom: 60px;
}

.section-title-premium {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  text-transform: uppercase;
  line-height: 1.3;
}

.accent-text {
  color: #8B7446;
}

.title-line {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #8B7446, transparent);
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(139,116,70,0.3);
}

/* Content Sections */
.content-section {
  padding: 80px 0;
  position: relative;
}

.content-section-dark {
  background: linear-gradient(180deg, #000000 0%, #0A0A0A 50%, #000000 100%);
}

.content-section-light {
  background: linear-gradient(180deg, #0A0A0A 0%, #050505 50%, #0A0A0A 100%);
}

.content-text-premium {
  max-width: 900px;
  margin: 0 auto 50px auto;
  text-align: center;
}

.content-text-premium p {
  font-size: 17px;
  line-height: 1.9;
  color: rgba(255,255,255,0.7);
  margin-bottom: 25px;
  font-weight: 300;
}

/* Content Wrappers */
.content-wrapper-premium {
  max-width: 1000px;
  margin: 0 auto;
}

.content-card-large {
  background: linear-gradient(135deg, rgba(139,116,70,0.05) 0%, rgba(255,255,255,0.02) 100%);
  padding: 50px;
  border-left: 3px solid #8B7446;
  border-right: 1px solid rgba(139,116,70,0.1);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  position: relative;
}

.content-card-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(139,116,70,0.4), transparent);
}

.content-paragraph {
  font-size: 17px;
  line-height: 1.9;
  color: rgba(255,255,255,0.75);
  margin-bottom: 25px;
  font-weight: 300;
}

.content-paragraph:last-child {
  margin-bottom: 0;
}

/* Technical Details Grid */
.technical-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.detail-card {
  background: linear-gradient(135deg, rgba(139,116,70,0.03) 0%, rgba(255,255,255,0.01) 100%);
  padding: 45px 35px;
  border: 1px solid rgba(139,116,70,0.2);
  transition: all 0.4s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.detail-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(139,116,70,0.5), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.detail-card:hover::before {
  opacity: 1;
}

.detail-card:hover {
  background: linear-gradient(135deg, rgba(139,116,70,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border-color: rgba(139,116,70,0.4);
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(139,116,70,0.15);
}

.detail-icon-wrapper {
  width: 90px;
  height: 90px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, rgba(139,116,70,0.1) 0%, rgba(139,116,70,0.05) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(139,116,70,0.2);
  transition: all 0.4s ease;
}

.detail-card:hover .detail-icon-wrapper {
  background: linear-gradient(135deg, rgba(139,116,70,0.2) 0%, rgba(139,116,70,0.1) 100%);
  border-color: rgba(139,116,70,0.4);
  transform: scale(1.1);
}

.detail-icon {
  font-size: 45px;
}

.detail-title {
  font-size: 14px;
  font-weight: 600;
  color: #8B7446;
  margin-bottom: 18px;
  letter-spacing: 1.3px;
}

.detail-text {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
  margin: 0;
  font-weight: 300;
}

/* Process Grid */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
  max-width: 1200px;
  margin: 0 auto;
}

.process-card {
  background: linear-gradient(135deg, rgba(139,116,70,0.04) 0%, rgba(0,0,0,0.3) 100%);
  padding: 40px 30px;
  border: 1px solid rgba(139,116,70,0.25);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.process-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #8B7446, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.process-card:hover::after {
  opacity: 1;
}

.process-card:hover {
  background: linear-gradient(135deg, rgba(139,116,70,0.08) 0%, rgba(0,0,0,0.4) 100%);
  border-color: rgba(139,116,70,0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.process-number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 48px;
  font-weight: 700;
  color: rgba(139,116,70,0.15);
  line-height: 1;
}

.process-icon-wrapper {
  width: 85px;
  height: 85px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, rgba(139,116,70,0.15) 0%, rgba(139,116,70,0.05) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(139,116,70,0.3);
  transition: all 0.4s ease;
}

.process-card:hover .process-icon-wrapper {
  background: linear-gradient(135deg, rgba(139,116,70,0.25) 0%, rgba(139,116,70,0.1) 100%);
  transform: scale(1.15);
  box-shadow: 0 10px 30px rgba(139,116,70,0.2);
}

.process-icon {
  font-size: 40px;
}

.process-title {
  font-size: 15px;
  font-weight: 600;
  color: #8B7446;
  margin-bottom: 15px;
  letter-spacing: 1.2px;
}

.process-text {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  margin: 0;
  font-weight: 300;
}

/* Table Styles */
.table-responsive-premium {
  overflow-x: auto;
  max-width: 1100px;
  margin: 0 auto;
}

.detention-table-premium {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(135deg, rgba(139,116,70,0.03) 0%, rgba(0,0,0,0.3) 100%);
  border: 1px solid rgba(139,116,70,0.2);
}

.detention-table-premium thead {
  background: linear-gradient(135deg, rgba(139,116,70,0.15) 0%, rgba(139,116,70,0.05) 100%);
}

.detention-table-premium th {
  padding: 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #8B7446;
  letter-spacing: 1.2px;
  border-bottom: 2px solid rgba(139,116,70,0.3);
  text-transform: uppercase;
}

.detention-table-premium td {
  padding: 18px 20px;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(139,116,70,0.15);
}

.detention-table-premium tr:hover {
  background: rgba(139,116,70,0.05);
}

.detention-table-premium a {
  color: #8B7446;
  text-decoration: none;
  transition: color 0.3s ease;
}

.detention-table-premium a:hover {
  color: #A89968;
}

/* Features Grid */
.features-premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-premium-item {
  background: linear-gradient(135deg, rgba(139,116,70,0.03) 0%, rgba(0,0,0,0.3) 100%);
  padding: 40px 25px;
  text-align: center;
  border: 1px solid rgba(139,116,70,0.2);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.feature-premium-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(139,116,70,0.5), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.feature-premium-item:hover::before {
  opacity: 1;
}

.feature-premium-item:hover {
  background: linear-gradient(135deg, rgba(139,116,70,0.08) 0%, rgba(0,0,0,0.4) 100%);
  border-color: rgba(139,116,70,0.4);
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

.feature-premium-highlight {
  background: linear-gradient(135deg, rgba(139,116,70,0.12) 0%, rgba(139,116,70,0.05) 100%);
  border-color: rgba(139,116,70,0.4);
}

.feature-icon-bg {
  width: 80px;
  height: 80px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, rgba(139,116,70,0.12) 0%, rgba(139,116,70,0.05) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(139,116,70,0.25);
  transition: all 0.4s ease;
}

.feature-premium-item:hover .feature-icon-bg {
  background: linear-gradient(135deg, rgba(139,116,70,0.2) 0%, rgba(139,116,70,0.1) 100%);
  border-color: rgba(139,116,70,0.5);
  transform: scale(1.1);
}

.feature-icon-bg-highlight {
  background: linear-gradient(135deg, rgba(139,116,70,0.25) 0%, rgba(139,116,70,0.15) 100%);
  border-color: rgba(139,116,70,0.4);
}

.feature-icon-premium {
  font-size: 40px;
}

.feature-title-premium {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin: 0 0 15px 0;
  line-height: 1.5;
  letter-spacing: 1.5px;
}

.feature-description {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  margin: 0;
  font-weight: 300;
}

.feature-premium-highlight .feature-title-premium {
  color: #8B7446;
}

/* CTA Section */
.cta-section-premium {
  padding: 100px 0;
  background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(20,20,20,1) 50%, rgba(0,0,0,1) 100%);
  position: relative;
  overflow: hidden;
}

.cta-section-premium::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(139,116,70,0.08) 0%, transparent 70%);
  pointer-events: none;
}

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

.cta-title-premium {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  margin-bottom: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  text-transform: uppercase;
  line-height: 1.3;
}

.cta-text-premium {
  font-size: 18px;
  line-height: 1.9;
  color: rgba(255,255,255,0.75);
  margin-bottom: 45px;
  font-weight: 300;
}

.cta-button-premium {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 22px 55px;
  background: linear-gradient(135deg, rgba(139,116,70,0.15) 0%, rgba(139,116,70,0.08) 100%);
  color: #8B7446;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  border: 2px solid #8B7446;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.cta-button-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.6s ease;
}

.cta-button-premium:hover::before {
  left: 100%;
}

.cta-button-premium:hover {
  background: linear-gradient(135deg, #8B7446 0%, #A89968 100%);
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(139,116,70,0.4);
}

.button-arrow {
  font-size: 20px;
  transition: transform 0.4s ease;
}

.cta-button-premium:hover .button-arrow {
  transform: translateX(5px);
}

/* Services Section Premium */
.services-section-premium {
  padding: 80px 0;
  background: linear-gradient(180deg, #000000 0%, #0A0A0A 50%, #000000 100%);
  position: relative;
}

.services-premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 35px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card-premium {
  background: linear-gradient(135deg, rgba(139,116,70,0.03) 0%, rgba(0,0,0,0.3) 100%);
  padding: 45px;
  border: 1px solid rgba(139,116,70,0.2);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 25px;
}

.service-card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #8B7446, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-card-premium:hover::before {
  opacity: 1;
}

.service-card-premium:hover {
  background: linear-gradient(135deg, rgba(139,116,70,0.08) 0%, rgba(0,0,0,0.4) 100%);
  border-color: rgba(139,116,70,0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.service-badge {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(139,116,70,0.15) 0%, rgba(139,116,70,0.05) 100%);
  border: 2px solid rgba(139,116,70,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #8B7446;
  transition: all 0.4s ease;
}

.service-card-premium:hover .service-badge {
  background: linear-gradient(135deg, rgba(139,116,70,0.3) 0%, rgba(139,116,70,0.15) 100%);
  transform: scale(1.1);
  box-shadow: 0 5px 20px rgba(139,116,70,0.3);
}

.service-content {
  flex: 1;
}

.service-title-h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 18px 0;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.service-title-h2 a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.3s ease;
}

.service-title-h2 a:hover {
  color: #8B7446;
}

.service-text-premium {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
  margin: 0;
  font-weight: 300;
}

/* Testimonials Section */
.testimonials-section-premium {
  padding: 80px 0;
  background: linear-gradient(180deg, #000000 0%, #0A0A0A 50%, #000000 100%);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 35px;
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-card {
  background: linear-gradient(135deg, rgba(139,116,70,0.04) 0%, rgba(0,0,0,0.3) 100%);
  padding: 40px;
  border: 1px solid rgba(139,116,70,0.2);
  transition: all 0.4s ease;
  position: relative;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 20px;
  left: 30px;
  font-size: 80px;
  color: rgba(139,116,70,0.15);
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-card:hover {
  border-color: rgba(139,116,70,0.4);
  background: linear-gradient(135deg, rgba(139,116,70,0.08) 0%, rgba(0,0,0,0.4) 100%);
  transform: translateY(-5px);
  box-shadow: 0 15px 45px rgba(0,0,0,0.5);
}

.testimonial-stars {
  color: #8B7446;
  font-size: 20px;
  margin-bottom: 20px;
  letter-spacing: 3px;
}

.testimonial-text {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.75);
  margin-bottom: 25px;
  font-weight: 300;
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 20px;
  border-top: 1px solid rgba(139,116,70,0.2);
}

.author-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(139,116,70,0.15) 0%, rgba(139,116,70,0.05) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 2px solid rgba(139,116,70,0.3);
}

.author-info {
  flex: 1;
}

.author-name {
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 5px 0;
  letter-spacing: -0.3px;
}

.author-link {
  font-size: 12px;
  color: #8B7446;
  text-decoration: none;
  transition: color 0.3s ease;
}

.author-link:hover {
  color: #A89968;
}

/* Location Widget Wrapper */
.location-widget-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.map-container-premium {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(139,116,70,0.2);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.weather-container-premium {
  text-align: center;
}

/* Trust Section */
.trust-section-premium {
  padding: 80px 0;
  background: linear-gradient(180deg, #000000 0%, #0A0A0A 50%, #000000 100%);
}

.trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto 50px auto;
}

.trust-badge-item {
  background: linear-gradient(135deg, rgba(139,116,70,0.08) 0%, rgba(0,0,0,0.3) 100%);
  padding: 40px 30px;
  text-align: center;
  border: 2px solid rgba(139,116,70,0.3);
  transition: all 0.4s ease;
}

.trust-badge-item:hover {
  background: linear-gradient(135deg, rgba(139,116,70,0.15) 0%, rgba(139,116,70,0.05) 100%);
  border-color: rgba(139,116,70,0.5);
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(139,116,70,0.2);
}

.trust-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.trust-title {
  font-size: 14px;
  font-weight: 600;
  color: #8B7446;
  margin: 0;
  letter-spacing: 1.5px;
}

.hashtags-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px;
  background: linear-gradient(135deg, rgba(139,116,70,0.04) 0%, rgba(0,0,0,0.3) 100%);
  border: 1px solid rgba(139,116,70,0.2);
  text-align: center;
}

.hashtags-text {
  font-size: 13px;
  line-height: 2;
  color: rgba(139,116,70,0.8);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* FAQ Section Premium */
.faq-section-premium {
  padding: 80px 0;
  background: linear-gradient(180deg, #0A0A0A 0%, #000000 50%, #0A0A0A 100%);
}

.faq-premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

.faq-premium-item {
  background: linear-gradient(135deg, rgba(139,116,70,0.03) 0%, rgba(0,0,0,0.3) 100%);
  border: 1px solid rgba(139,116,70,0.2);
  transition: all 0.3s ease;
  overflow: hidden;
}

.faq-premium-item.active {
  border-color: rgba(139,116,70,0.4);
  background: linear-gradient(135deg, rgba(139,116,70,0.08) 0%, rgba(0,0,0,0.4) 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.faq-premium-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.faq-premium-question::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,116,70,0.2), transparent);
}

.faq-premium-item.active .faq-premium-question::after {
  background: linear-gradient(90deg, transparent, rgba(139,116,70,0.4), transparent);
}

.faq-premium-question h3 {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin: 0;
  line-height: 1.5;
  flex: 1;
  padding-right: 20px;
  letter-spacing: -0.3px;
}

.faq-premium-item.active .faq-premium-question h3 {
  color: #8B7446;
}

.faq-premium-toggle {
  font-size: 28px;
  color: #8B7446;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  font-weight: 300;
  background: rgba(139,116,70,0.1);
  border-radius: 50%;
}

.faq-premium-item.active .faq-premium-toggle {
  transform: rotate(45deg);
  background: rgba(139,116,70,0.2);
}

.faq-premium-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 30px;
}

.faq-premium-item.active .faq-premium-answer {
  max-height: 500px;
  padding: 0 30px 30px 30px;
}

.faq-premium-answer p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
  margin: 0;
  font-weight: 300;
  padding-left: 20px;
  border-left: 2px solid rgba(139,116,70,0.3);
}

/* Responsive Design */
@media (max-width: 992px) {
  .container-premium {
    padding: 0 25px;
  }
  
  .services-premium-grid,
  .faq-premium-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  
  .features-premium-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
  }
  
  .technical-details-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .content-section,
  .services-section-premium,
  .cta-section-premium,
  .faq-section-premium,
  .testimonials-section-premium,
  .trust-section-premium {
    padding: 60px 0;
  }
  
  .section-divider {
    height: 60px;
  }
  
  .section-header-premium {
    margin-bottom: 50px;
  }
  
  .section-title-premium {
    font-size: clamp(1.6rem, 3.5vw, 2rem);
  }
  
  .service-card-premium,
  .feature-premium-item,
  .detail-card,
  .process-card,
  .testimonial-card {
    padding: 30px;
  }
  
  .content-card-large {
    padding: 35px;
  }
  
  .faq-premium-question {
    padding: 25px;
  }
  
  .faq-premium-item.active .faq-premium-answer {
    padding: 0 25px 25px 25px;
  }
  
  .service-card-premium {
    flex-direction: column;
    gap: 20px;
  }
  
  .service-badge {
    width: 55px;
    height: 55px;
    font-size: 18px;
  }
  
  .detention-table-premium th,
  .detention-table-premium td {
    padding: 15px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .container-premium {
    padding: 0 20px;
  }
  
  .section-title-premium {
    font-size: clamp(1.5rem, 3.5vw, 1.8rem);
  }
  
  .cta-title-premium {
    font-size: clamp(1.6rem, 3.5vw, 2rem);
  }
  
  .service-card-premium,
  .detail-card,
  .process-card,
  .testimonial-card {
    padding: 25px;
  }
  
  .content-card-large {
    padding: 30px 25px;
  }
  
  .faq-premium-question h3 {
    font-size: 14px;
  }
}

/* ============================================================
   PART 2B — Premium enhancement layer (index.php style block 5)
   Loaded last of the mirrored blocks so it wins on source order.
   ============================================================ */
:root {
  /* Metallic gold ramp (brand #8B7446 stays the anchor) */
  --lx-gold-deep: #6E5A33;
  --lx-gold: #8B7446;
  --lx-gold-mid: #A8905A;
  --lx-gold-light: #C9AE74;
  --lx-gold-champagne: #E7D3A8;

  --lx-metal: linear-gradient(135deg, #8B7446 0%, #C9AE74 34%, #E7D3A8 50%, #A8905A 68%, #8B7446 100%);
  --lx-metal-line: linear-gradient(90deg, transparent 0%, rgba(139,116,70,.35) 20%, rgba(231,211,168,.9) 50%, rgba(139,116,70,.35) 80%, transparent 100%);
  --lx-edge: linear-gradient(180deg, var(--lx-gold-champagne) 0%, var(--lx-gold) 45%, transparent 100%);

  /* Surfaces */
  --lx-surface: linear-gradient(158deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 42%, rgba(0,0,0,.28) 100%);
  --lx-surface-hover: linear-gradient(158deg, rgba(201,174,116,.10) 0%, rgba(255,255,255,.03) 42%, rgba(0,0,0,.30) 100%);
  --lx-hairline: rgba(201,174,116,.20);
  --lx-hairline-strong: rgba(201,174,116,.42);

  /* Depth */
  --lx-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -14px rgba(0,0,0,.9);
  --lx-shadow-hover: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(201,174,116,.14);
  --lx-glow: 0 0 34px -10px rgba(201,174,116,.45);

  --lx-ease: cubic-bezier(.22,.61,.36,1);
  --lx-font: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* Fine film grain — gives flat black a tactile, printed depth */
  --lx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ---------- Typography foundation ---------- */
.hero-section,
.content-section,
.services-section-premium,
.cta-section-premium,
.faq-section-premium,
.testimonials-section-premium,
.trust-section-premium,
.service-areas-section-premium {
  font-family: var(--lx-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-section h1, .hero-section h2, .hero-section h3,
.content-section h2, .content-section h3,
.services-section-premium h2, .services-section-premium h3,
.cta-section-premium h2,
.faq-section-premium h2, .faq-section-premium h3,
.testimonials-section-premium h2, .testimonials-section-premium h3, .testimonials-section-premium h4,
.trust-section-premium h2,
.service-areas-section-premium h2, .service-areas-section-premium h3, .service-areas-section-premium h4 {
  font-family: var(--lx-font);
  text-wrap: balance;
}

/* Display headings keep the site's Playfair signature; everything else is Inter.
   Typed selectors so these outrank the section-scoped rule above. */
h2.hero-headline,
h2.hero-box-title,
h2.section-title-premium,
h2.cta-title-premium {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

/* ---------- Grain + a warmer ground on the dark sections ---------- */
.content-section-dark,
.services-section-premium,
.testimonials-section-premium {
  background-image: var(--lx-grain), radial-gradient(120% 80% at 50% 0%, rgba(139,116,70,.055) 0%, transparent 60%), linear-gradient(180deg, #000 0%, #0A0908 50%, #000 100%);
  background-size: 160px 160px, auto, auto;
}

.content-section-light,
.faq-section-premium {
  background-image: var(--lx-grain), radial-gradient(120% 80% at 50% 100%, rgba(139,116,70,.05) 0%, transparent 60%), linear-gradient(180deg, #0A0908 0%, #030303 50%, #0A0908 100%);
  background-size: 160px 160px, auto, auto;
}

.cta-section-premium {
  background-image: var(--lx-grain), linear-gradient(135deg, #000 0%, #131110 50%, #000 100%);
  background-size: 160px 160px, auto;
}

.cta-section-premium::before {
  background: radial-gradient(ellipse at center, rgba(201,174,116,.13) 0%, transparent 70%);
}

/* These three paint an opaque ::before over the section, so the grain rides on that layer */
.hero-section::before {
  background-image:
    var(--lx-grain),
    radial-gradient(80% 55% at 50% -10%, rgba(201,174,116,.10) 0%, transparent 62%),
    radial-gradient(70% 50% at 50% 118%, rgba(0,0,0,.92) 0%, transparent 62%),
    linear-gradient(135deg, #000 0%, #0C0B09 60%, #000 100%);
  background-size: 160px 160px, auto, auto, auto;
}

.hero-section::after {
  background: radial-gradient(ellipse at center, rgba(201,174,116,.11) 0%, transparent 70%);
}

.trust-section-premium::before,
.service-areas-section-premium::before {
  background-image: var(--lx-grain), linear-gradient(135deg, #000 0%, #0F0D0B 55%, #000 100%);
  background-size: 160px 160px, auto;
}

.service-areas-section-premium::after {
  background: radial-gradient(ellipse at center, rgba(201,174,116,.10) 0%, transparent 70%);
}

/* ---------- Eyebrow: small-caps label above each title ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 7px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--lx-gold-light);
  background: linear-gradient(135deg, rgba(201,174,116,.10) 0%, rgba(201,174,116,.02) 100%);
  border: 1px solid rgba(201,174,116,.22);
  backdrop-filter: blur(6px);
  line-height: 1;
}

.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 14px;
  height: 1px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, rgba(201,174,116,.65));
}

.eyebrow::after {
  background: linear-gradient(90deg, rgba(201,174,116,.65), transparent);
}

.eyebrow-live::before,
.eyebrow-live::after { display: none; }

.eyebrow-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #4ADE80;
  animation: lxPulse 2.6s var(--lx-ease) infinite;
}

@keyframes lxPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ---------- Metallic accent text ---------- */
.accent-text {
  color: var(--lx-gold-light);
  background: var(--lx-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Section headers ---------- */
.section-header-premium { margin-bottom: 64px; }

.section-title-premium {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.25;
  margin: 0 auto 22px;
  max-width: 940px;
}

.title-line {
  width: 120px;
  height: 1px;
  background: var(--lx-metal-line);
  box-shadow: 0 0 14px rgba(201,174,116,.35);
  position: relative;
}

.title-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: var(--lx-gold-champagne);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 12px rgba(231,211,168,.6);
}

/* ---------- Section divider ----------
   It lives between sections, so without an explicit ground the white page
   background shows through and breaks the dark theme. */
.section-divider {
  background-color: #000;
  background-image: var(--lx-grain), linear-gradient(180deg, rgba(139,116,70,.06) 0%, rgba(139,116,70,.02) 50%, rgba(139,116,70,.06) 100%);
  background-size: 160px 160px, auto;
}

.section-divider::before {
  background: var(--lx-metal-line);
  opacity: .7;
}

.section-divider::after {
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--lx-gold-champagne);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 18px rgba(231,211,168,.55);
}

/* ---------- Hero ---------- */
.hero-intro {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin-bottom: 56px;
  text-align: center;
}

.hero-headline {
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1.06;
}

.hero-subheadline {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: rgba(255,255,255,.62);
  font-weight: 400;
  letter-spacing: .4px;
  margin: 0;
}

.hero-box-title {
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 26px;
  text-transform: uppercase;
  letter-spacing: -0.1px;
  line-height: 1.3;
}

/* Left metallic edge drawn as a background layer — no border-image quirks */
.hero-description-box,
.content-card-large,
.coverage-info-box {
  border-left: none;
  border-right: none;
  background-image: var(--lx-edge), var(--lx-surface);
  background-size: 2px 100%, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: left top, left top;
  box-shadow: var(--lx-shadow);
}

/* style-new.css centres the whole hero below 992px, which strands long body copy
   as ragged centred text. Keep the reading column left-aligned at every width. */
.hero-description-box {
  padding: 40px;
  text-align: left;
}

.hero-description-box::before { display: none; }
.content-card-large::before { display: none; }

.hero-description {
  font-size: 16.5px;
  line-height: 1.85;
  color: rgba(255,255,255,.72);
  font-weight: 400;
}

.hero-description a {
  color: var(--lx-gold-light);
  border-bottom-color: rgba(201,174,116,.35);
}

.hero-description a:hover { color: var(--lx-gold-champagne); }

/* Image frame with a thin metallic edge.
   style-new.css puts margin:25px and border-radius:20px on every .image-container,
   which overflows the hero column on mobile and fights the page's sharp geometry. */
.image-container {
  margin: 0 0 30px;
  border-radius: 0;
  border: 1px solid var(--lx-hairline);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(201,174,116,.10);
}

.image-container::before {
  background: linear-gradient(180deg, rgba(201,174,116,.10) 0%, transparent 40%, rgba(0,0,0,.55) 100%);
}

.image-container img {
  transition: transform 1.1s var(--lx-ease), filter .6s var(--lx-ease);
}

.image-container:hover img {
  transform: scale(1.045);
  filter: brightness(1.02) contrast(1.12);
}

/* A second .image-overlay rule further down style-new.css (written for service
   cards) sets opacity:0 over the whole box, which hid the hero's 24/7 badge. */
.hero-image .image-overlay {
  top: auto;
  left: auto;
  right: 30px;
  bottom: 30px;
  opacity: 1;
  background: none;
  display: block;
}

.quality-badge,
.location-badge {
  background: linear-gradient(135deg, rgba(10,9,8,.92) 0%, rgba(24,21,16,.86) 100%);
  border: 1px solid var(--lx-hairline);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.9);
}

.location-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 15px;
  color: var(--lx-gold-light);
  background: linear-gradient(135deg, rgba(201,174,116,.16), rgba(201,174,116,.04));
  border: 1px solid rgba(201,174,116,.24);
}

.stars { color: var(--lx-gold-light); letter-spacing: 3px; }
.location-subtitle { color: var(--lx-gold-light); }

/* Hero trust chips */
.hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .6px;
  color: rgba(255,255,255,.82);
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(201,174,116,.18);
  transition: border-color .35s var(--lx-ease), color .35s var(--lx-ease), transform .35s var(--lx-ease);
}

.hero-chip i { color: var(--lx-gold-light); font-size: 13px; }

.hero-chip:hover {
  border-color: var(--lx-hairline-strong);
  color: #fff;
  transform: translateY(-2px);
}

/* Hero buttons */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 34px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--lx-ease), box-shadow .4s var(--lx-ease), background .4s var(--lx-ease), color .4s var(--lx-ease), border-color .4s var(--lx-ease);
}

.btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--lx-ease);
}

.btn-premium:hover::before { left: 160%; }

.btn-premium-solid {
  color: #14110C;
  background: var(--lx-metal);
  border: 1px solid rgba(231,211,168,.65);
  box-shadow: 0 14px 34px -14px rgba(201,174,116,.85);
}

.btn-premium-solid:hover {
  color: #14110C;
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -16px rgba(201,174,116,.95), var(--lx-glow);
}

.btn-premium-ghost {
  color: var(--lx-gold-light);
  background: transparent;
  border: 1px solid rgba(201,174,116,.35);
}

.btn-premium-ghost:hover {
  color: var(--lx-gold-champagne);
  border-color: var(--lx-hairline-strong);
  background: rgba(201,174,116,.07);
  transform: translateY(-3px);
}

.btn-premium-arrow { transition: transform .4s var(--lx-ease); }
.btn-premium:hover .btn-premium-arrow { transform: translateX(5px); }

/* ---------- Shared card polish ---------- */
.feature-premium-item,
.detail-card,
.process-card,
.service-card-premium,
.testimonial-card,
.faq-premium-item,
.location-card-premium,
.trust-badge-card {
  background: var(--lx-surface);
  border: 1px solid var(--lx-hairline);
  box-shadow: var(--lx-shadow);
  transition: transform .45s var(--lx-ease), box-shadow .45s var(--lx-ease), border-color .45s var(--lx-ease), background .45s var(--lx-ease);
}

.feature-premium-item:hover,
.detail-card:hover,
.process-card:hover,
.service-card-premium:hover,
.testimonial-card:hover,
.location-card-premium:hover,
.trust-badge-card:hover {
  background: var(--lx-surface-hover);
  border-color: var(--lx-hairline-strong);
  transform: translateY(-6px);
  box-shadow: var(--lx-shadow-hover);
}

/* Always-on hairline at the top edge, brightening on hover */
.feature-premium-item::before,
.detail-card::before,
.service-card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 1px;
  background: var(--lx-metal-line);
  opacity: .35;
  transition: opacity .45s var(--lx-ease);
}

.feature-premium-item:hover::before,
.detail-card:hover::before,
.service-card-premium:hover::before { opacity: 1; }

.process-card::after {
  height: 1px;
  background: var(--lx-metal-line);
  opacity: .3;
}

.process-card:hover::after { opacity: 1; }

/* ---------- Icon system ---------- */
.feature-icon-premium,
.detail-icon,
.process-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--lx-gold-light);
  text-shadow: 0 0 22px rgba(201,174,116,.35);
}

.feature-icon-premium { font-size: 28px; }
.detail-icon { font-size: 30px; }
.process-icon { font-size: 27px; }

.feature-icon-bg,
.detail-icon-wrapper,
.process-icon-wrapper {
  background: radial-gradient(circle at 30% 25%, rgba(201,174,116,.18) 0%, rgba(201,174,116,.04) 60%, transparent 100%);
  border: 1px solid rgba(201,174,116,.26);
  box-shadow: 0 0 0 6px rgba(201,174,116,.03);
  transition: transform .45s var(--lx-ease), border-color .45s var(--lx-ease), box-shadow .45s var(--lx-ease);
}

.feature-icon-bg { width: 68px; height: 68px; margin: 0 auto 26px; }
.detail-icon-wrapper { width: 74px; height: 74px; margin: 0 auto 26px; }
.process-icon-wrapper { width: 70px; height: 70px; margin: 0 auto 26px; }

.feature-premium-item:hover .feature-icon-bg,
.detail-card:hover .detail-icon-wrapper,
.process-card:hover .process-icon-wrapper {
  transform: scale(1.06);
  border-color: var(--lx-hairline-strong);
  box-shadow: 0 0 0 8px rgba(201,174,116,.05), var(--lx-glow);
}

/* ---------- Feature / detail / process copy ---------- */
.feature-title-premium,
.detail-title,
.process-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.55;
  margin-bottom: 14px;
  color: #FFFFFF;
}

.detail-title,
.process-title { color: var(--lx-gold-light); }

.feature-description,
.detail-text,
.process-text {
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(255,255,255,.62);
  font-weight: 400;
}

.feature-premium-highlight {
  background: linear-gradient(158deg, rgba(201,174,116,.14) 0%, rgba(201,174,116,.04) 45%, rgba(0,0,0,.3) 100%);
  border-color: var(--lx-hairline-strong);
}

.feature-premium-highlight .feature-title-premium { color: var(--lx-gold-champagne); }

/* Outlined numerals read more editorial than solid fills */
.process-number {
  top: 16px;
  right: 22px;
  font-size: 62px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,174,116,.28);
  font-variant-numeric: tabular-nums;
  transition: -webkit-text-stroke-color .45s var(--lx-ease);
}

.process-card:hover .process-number { -webkit-text-stroke-color: rgba(231,211,168,.55); }

/* ---------- Long-form copy ---------- */
.content-text-premium p,
.content-paragraph {
  font-size: 17px;
  line-height: 1.9;
  color: rgba(255,255,255,.66);
  font-weight: 400;
}

.content-card-large { padding: 54px; }

.content-card-large .content-paragraph:first-child {
  font-size: 18.5px;
  color: rgba(255,255,255,.82);
}

/* ---------- Services ---------- */
.service-badge {
  width: 54px;
  height: 54px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--lx-gold-light);
  background: linear-gradient(135deg, rgba(201,174,116,.16), rgba(201,174,116,.03));
  border: 1px solid rgba(201,174,116,.28);
}

.service-card-premium:hover .service-badge {
  transform: none;
  color: #14110C;
  background: var(--lx-metal);
  border-color: rgba(231,211,168,.6);
  box-shadow: var(--lx-glow);
}

.service-title-h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.4;
}

.service-title-h2 a {
  background-image: linear-gradient(90deg, var(--lx-gold-light), var(--lx-gold-light));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 3px;
  transition: color .35s var(--lx-ease), background-size .45s var(--lx-ease);
}

.service-card-premium:hover .service-title-h2 a {
  color: var(--lx-gold-light);
  background-size: 100% 1px;
}

.service-text-premium {
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(255,255,255,.62);
  font-weight: 400;
}

/* ---------- Testimonials ---------- */
.testimonial-card { padding: 44px 40px; }

.testimonial-card::before {
  top: 14px;
  left: 32px;
  font-size: 96px;
  color: rgba(201,174,116,.13);
  font-family: Georgia, 'Times New Roman', serif;
}

.testimonial-stars {
  font-size: 15px;
  letter-spacing: 5px;
  color: var(--lx-gold-light);
  text-shadow: 0 0 18px rgba(201,174,116,.3);
}

.testimonial-text {
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(255,255,255,.7);
  font-weight: 400;
}

.author-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--lx-gold-light);
  background: radial-gradient(circle at 30% 25%, rgba(201,174,116,.2), rgba(201,174,116,.04));
  border: 1px solid rgba(201,174,116,.32);
}

.testimonial-author { border-top-color: var(--lx-hairline); }
.author-name { font-size: 14.5px; letter-spacing: .2px; }
.author-link { color: var(--lx-gold-light); letter-spacing: .4px; }

/* ---------- Detention table ---------- */
.detention-table-premium {
  background: var(--lx-surface);
  border: 1px solid var(--lx-hairline);
}

.detention-table-premium thead {
  background: linear-gradient(135deg, rgba(201,174,116,.14) 0%, rgba(201,174,116,.03) 100%);
}

.detention-table-premium th {
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--lx-gold-light);
  border-bottom: 1px solid var(--lx-hairline-strong);
}

.detention-table-premium td {
  font-size: 14.5px;
  color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(201,174,116,.10);
}

.detention-table-premium tbody tr { transition: background .3s var(--lx-ease); }
.detention-table-premium tbody tr:nth-child(even) { background: rgba(255,255,255,.014); }
.detention-table-premium tbody tr:hover { background: rgba(201,174,116,.07); }
.detention-table-premium a { color: var(--lx-gold-light); }
.detention-table-premium a:hover { color: var(--lx-gold-champagne); }

/* ---------- CTA ---------- */
.cta-title-premium {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  letter-spacing: -0.2px;
  line-height: 1.25;
}

.cta-text-premium {
  font-size: 17.5px;
  color: rgba(255,255,255,.68);
  font-weight: 400;
  margin-bottom: 40px;
}

.cta-button-premium {
  padding: 22px 52px;
  color: #14110C;
  background: var(--lx-metal);
  border: 1px solid rgba(231,211,168,.6);
  letter-spacing: 2px;
  box-shadow: 0 18px 44px -18px rgba(201,174,116,.9);
  transition: transform .45s var(--lx-ease), box-shadow .45s var(--lx-ease);
}

.cta-button-premium::before {
  left: -120%;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--lx-ease);
}

.cta-button-premium:hover::before { left: 160%; }

.cta-button-premium:hover {
  background: var(--lx-metal);
  color: #14110C;
  transform: translateY(-4px);
  box-shadow: 0 26px 56px -20px rgba(201,174,116,1), var(--lx-glow);
}

.cta-reassurance {
  margin: 26px 0 0;
  font-size: 12.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

/* ---------- Service-area cards ---------- */
.location-card-premium { padding: 24px 28px; }

.location-icon-wrapper {
  width: 44px;
  height: 44px;
  background: radial-gradient(circle at 30% 25%, rgba(201,174,116,.18), rgba(201,174,116,.03));
  border: 1px solid rgba(201,174,116,.24);
}

.location-card-premium:hover .location-icon-wrapper {
  transform: none;
  border-color: var(--lx-hairline-strong);
  box-shadow: var(--lx-glow);
}

.location-pin {
  display: inline-flex;
  font-size: 16px;
  color: var(--lx-gold-light);
}

.location-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .8px;
  color: rgba(255,255,255,.88);
}

.location-card-premium:hover .location-name { color: var(--lx-gold-champagne); }
.location-arrow { font-size: 16px; color: var(--lx-gold-light); }
.location-card-premium::after { background: var(--lx-gold-light); }

.coverage-info-box {
  padding: 34px 38px;
  align-items: center;
}

.coverage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 21px;
  color: var(--lx-gold-light);
  background: radial-gradient(circle at 30% 25%, rgba(201,174,116,.18), rgba(201,174,116,.03));
  border: 1px solid rgba(201,174,116,.24);
}

.coverage-title { font-size: 17px; letter-spacing: .3px; }
.coverage-text { color: rgba(255,255,255,.66); }
.coverage-text a { color: var(--lx-gold-light); }

/* ---------- Trust badges ---------- */
.trust-badge-card { padding: 28px 22px; }

.trust-badge-img {
  filter: saturate(.85) brightness(.98);
  transition: transform .5s var(--lx-ease), filter .5s var(--lx-ease);
}

.trust-badge-card:hover .trust-badge-img {
  transform: scale(1.06);
  filter: saturate(1.05) brightness(1.06);
}

.hashtags-container {
  background: linear-gradient(135deg, rgba(201,174,116,.05) 0%, rgba(255,255,255,.015) 100%);
  border-top: 1px solid var(--lx-hairline);
  border-bottom: 1px solid var(--lx-hairline);
}

.hashtags-text {
  font-size: 12.5px;
  letter-spacing: 1.2px;
  color: rgba(201,174,116,.72);
}

/* ---------- FAQ ---------- */
.faq-premium-item.active {
  border-color: var(--lx-hairline-strong);
  background: var(--lx-surface-hover);
  box-shadow: var(--lx-shadow-hover);
}

.faq-premium-question { padding: 28px 32px; }

.faq-premium-question h3 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.55;
  color: rgba(255,255,255,.9);
}

.faq-premium-item.active .faq-premium-question h3 { color: var(--lx-gold-champagne); }

.faq-premium-question::after {
  left: 32px;
  right: 32px;
  background: var(--lx-metal-line);
  opacity: .35;
}

.faq-premium-item.active .faq-premium-question::after { opacity: .9; }

.faq-premium-toggle {
  width: 34px;
  height: 34px;
  font-size: 22px;
  border-radius: 0;
  color: var(--lx-gold-light);
  background: transparent;
  border: 1px solid rgba(201,174,116,.28);
  transition: transform .35s var(--lx-ease), background .35s var(--lx-ease), border-color .35s var(--lx-ease);
}

.faq-premium-item.active .faq-premium-toggle {
  background: rgba(201,174,116,.14);
  border-color: var(--lx-hairline-strong);
}

.faq-premium-answer p {
  font-size: 15px;
  color: rgba(255,255,255,.66);
  border-left: 1px solid rgba(201,174,116,.35);
  padding-left: 22px;
}

/* ---------- Map frame ---------- */
.map-container-premium {
  border: 1px solid var(--lx-hairline);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.95);
}

.map-container-premium iframe {
  display: block;
  filter: grayscale(.25) contrast(1.05);
}

/* ---------- Focus visibility ---------- */
.hero-section a:focus-visible,
.content-section a:focus-visible,
.services-section-premium a:focus-visible,
.cta-section-premium a:focus-visible,
.testimonials-section-premium a:focus-visible,
.service-areas-section-premium a:focus-visible,
.faq-premium-question:focus-visible {
  outline: 2px solid var(--lx-gold-champagne);
  outline-offset: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .hero-intro { margin-bottom: 42px; }
  .content-card-large { padding: 40px; }
  .testimonial-card { padding: 36px 32px; }
}

@media (max-width: 768px) {
  .section-header-premium { margin-bottom: 48px; }
  .eyebrow { font-size: 10px; letter-spacing: 2px; padding: 6px 13px; }
  .hero-headline { letter-spacing: -0.2px; }
  .hero-description-box { padding: 28px; }
  .content-card-large { padding: 32px 26px; }
  .coverage-info-box { padding: 26px; align-items: flex-start; }
  .process-number { font-size: 50px; }
  .hero-actions { gap: 12px; }
  .btn-premium { width: 100%; padding: 17px 24px; font-size: 13px; }
  .cta-button-premium { padding: 19px 30px; font-size: 13.5px; letter-spacing: 1.2px; }
  .faq-premium-question { padding: 24px; }
  .faq-premium-question::after { left: 24px; right: 24px; }
}

@media (max-width: 480px) {
  .hero-chip { font-size: 11.5px; padding: 9px 13px; }
  .testimonial-card { padding: 30px 24px; }
  .cta-reassurance { font-size: 11px; letter-spacing: 1px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   PART 3 — Service-page-only rules
   Everything below is new: the service hero (H1 + checklist +
   sentence CTA), the intro + quote-form section, the themed
   bullet grids, note cards and the CTA-band sentence button.
   ============================================================ */

/* ---------- Service hero ---------- */
.svc-hero {
  min-height: auto;
  padding: 70px 5% 80px;
}

.svc-hero .hero-flex-container {
  align-items: stretch;
}

/* The enhancement layer only types h2 for the display face, so the
   service H1 needs its own rule to inherit the Playfair signature. */
h1.svc-hero-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.2rem, 4.6vw, 3.35rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 26px;
  text-wrap: balance;
}

.svc-hero .hero-image {
  max-width: 430px;
}

.svc-hero .image-container img {
  height: 100%;
  margin-top: 0;
  aspect-ratio: 4 / 5;
}

.svc-hero .hero-content {
  display: flex;
  flex-direction: column;
}

/* ---------- Hero checklist ---------- */
.svc-checklist {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
}

.svc-checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .84);
}

.svc-checklist li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  font-size: 11px;
  font-weight: 700;
  color: #14110C;
  background: var(--lx-metal);
  border: 1px solid rgba(231, 211, 168, .6);
  box-shadow: 0 0 14px -4px rgba(201, 174, 116, .8);
}

/* ---------- Sentence CTA (hero + CTA band) ----------
   The doc's call-to-action is a full sentence, so the whole sentence
   becomes the button rather than duplicating the phone number in a
   separate label. */
.svc-cta-sentence {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 20px 30px;
  text-decoration: none;
  text-align: left;
  color: var(--lx-gold-champagne);
  background: linear-gradient(135deg, rgba(201, 174, 116, .12) 0%, rgba(201, 174, 116, .03) 100%);
  border: 1px solid rgba(201, 174, 116, .38);
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--lx-ease), box-shadow .45s var(--lx-ease),
              border-color .45s var(--lx-ease), background .45s var(--lx-ease);
}

.svc-cta-sentence::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--lx-ease);
}

.svc-cta-sentence:hover::before { left: 160%; }

.svc-cta-sentence:hover {
  color: var(--lx-gold-champagne);
  background: linear-gradient(135deg, rgba(201, 174, 116, .2) 0%, rgba(201, 174, 116, .06) 100%);
  border-color: var(--lx-hairline-strong);
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -20px rgba(0, 0, 0, .95), var(--lx-glow);
}

.svc-cta-sentence__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  font-size: 18px;
  color: var(--lx-gold-light);
  background: radial-gradient(circle at 30% 25%, rgba(201, 174, 116, .22), rgba(201, 174, 116, .04));
  border: 1px solid rgba(201, 174, 116, .28);
}

.svc-cta-sentence__text {
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: .2px;
}

.svc-cta-sentence__text strong {
  font-weight: 700;
  letter-spacing: .6px;
  white-space: nowrap;
  background: var(--lx-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.svc-cta-sentence .btn-premium-arrow {
  margin-left: auto;
  font-size: 19px;
  color: var(--lx-gold-light);
  transition: transform .4s var(--lx-ease);
}

.svc-cta-sentence:hover .btn-premium-arrow { transform: translateX(5px); }

/* CTA-band variant sits centred under the band copy */
.cta-content-premium .svc-cta-sentence {
  margin-top: 8px;
  padding: 22px 34px;
}

/* ---------- Section 2: intro copy + quote form ---------- */
.svc-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 46px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.svc-form-intro .content-paragraph:last-child { margin-bottom: 0; }

.svc-form-card {
  background-image: var(--lx-edge), var(--lx-surface);
  background-size: 2px 100%, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: left top, left top;
  border: 1px solid var(--lx-hairline);
  box-shadow: var(--lx-shadow);
  padding: 42px 38px;
  position: relative;
}

.svc-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lx-metal-line);
  opacity: .5;
}

/* Retheme the shared top_form.php markup for the dark surface.
   style.css styles #quote_form as a white, blue-bordered, 50px-radius
   card built for the old light template — the ID outranks a class, so
   these overrides are scoped through .svc-form-card to win. */
.svc-form-card #quote_form {
  color: rgba(255, 255, 255, .8);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.svc-form-card h2 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #FFFFFF;
  margin-bottom: 26px !important;
}

.svc-form-card .form-control,
.svc-form-card .form-floating > .form-control {
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--lx-hairline);
  border-radius: 0;
  color: #FFFFFF;
  box-shadow: none;
  transition: border-color .35s var(--lx-ease), background .35s var(--lx-ease);
}

.svc-form-card .form-control::placeholder { color: rgba(255, 255, 255, .35); }

.svc-form-card .form-control:focus,
.svc-form-card .form-floating > .form-control:focus {
  background: rgba(255, 255, 255, .07);
  border-color: var(--lx-hairline-strong);
  color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(201, 174, 116, .12);
}

.svc-form-card .form-floating > label {
  color: rgba(255, 255, 255, .5);
  font-size: 14px;
  padding: 1rem .9rem;
}

.svc-form-card .form-floating > .form-control:focus ~ label,
.svc-form-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--lx-gold-light);
  opacity: 1;
}

/* Bootstrap paints an opaque white sliver behind a floated label */
.svc-form-card .form-floating > label::after {
  background: transparent !important;
}

.svc-form-card #captcha_code {
  display: block;
  margin-bottom: 10px;
}

.svc-form-card #captcha_code img {
  width: 78px;
  height: 34px;
  object-fit: contain;
  border: 1px solid var(--lx-hairline);
  background: #fff;
  padding: 3px;
}

.svc-form-card #response p { margin: 14px 0 0; font-size: 14px; }
.svc-form-card #response .success { color: #4ADE80; }
.svc-form-card #response .error { color: #F87171; }

.svc-form-card .btn-primary {
  border-radius: 0 !important;
  color: #14110C;
  background: var(--lx-metal);
  border: 1px solid rgba(231, 211, 168, .6);
  letter-spacing: 1.6px;
  box-shadow: 0 16px 38px -18px rgba(201, 174, 116, .9);
}

.svc-form-card .btn-primary:hover {
  background: var(--lx-metal);
  color: #14110C;
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -20px rgba(201, 174, 116, 1), var(--lx-glow);
}

/* A four-step process reads better as a balanced 2x2 than as 3 + 1.
   The base 1-column rule below 992px lives earlier in this file, so it
   has to be restated here to win on source order. */
.process-grid--2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1000px;
}

@media (max-width: 992px) {
  .process-grid--2x2 { grid-template-columns: 1fr; }
}

/* Five detail cards on a three-column grid strand the fifth one alone on the
   left. Six tracks with each card spanning two keeps three per row, and
   offsetting the fourth card by one track centres the closing pair.
   The base 1-column rule below 992px lives earlier in this file, so it has to
   be restated here to win on source order. */
.technical-details-grid--5up {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.technical-details-grid--5up > .detail-card { grid-column: span 2; }
.technical-details-grid--5up > .detail-card:nth-child(4) { grid-column: 2 / span 2; }

@media (max-width: 992px) {
  .technical-details-grid--5up { grid-template-columns: 1fr; }
  .technical-details-grid--5up > .detail-card,
  .technical-details-grid--5up > .detail-card:nth-child(4) { grid-column: auto; }
}

/* ---------- Themed bullet grids ---------- */
.svc-list-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.svc-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--lx-surface);
  border: 1px solid var(--lx-hairline);
  box-shadow: var(--lx-shadow);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .86);
  transition: transform .45s var(--lx-ease), box-shadow .45s var(--lx-ease),
              border-color .45s var(--lx-ease), background .45s var(--lx-ease);
}

.svc-list-item:hover {
  background: var(--lx-surface-hover);
  border-color: var(--lx-hairline-strong);
  transform: translateY(-4px);
  box-shadow: var(--lx-shadow-hover);
}

.svc-list-item__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  font-size: 15px;
  color: var(--lx-gold-light);
  background: radial-gradient(circle at 30% 25%, rgba(201, 174, 116, .18), rgba(201, 174, 116, .03));
  border: 1px solid rgba(201, 174, 116, .26);
  transition: border-color .45s var(--lx-ease), box-shadow .45s var(--lx-ease);
}

.svc-list-item:hover .svc-list-item__mark {
  border-color: var(--lx-hairline-strong);
  box-shadow: var(--lx-glow);
}

/* ---------- Lead-in line above a bullet grid ---------- */
.svc-listlead {
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--lx-gold-light);
}

/* ---------- Closing note card under a bullet grid ---------- */
.svc-note-card {
  max-width: 1000px;
  margin: 34px auto 0;
  padding: 32px 38px;
  background-image: var(--lx-edge), var(--lx-surface);
  background-size: 2px 100%, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: left top, left top;
  border: 1px solid var(--lx-hairline);
  box-shadow: var(--lx-shadow);
}

.svc-note-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .7);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .svc-form-layout { gap: 36px; }
}

@media (max-width: 992px) {
  .svc-hero { padding: 60px 5% 70px; }
  /* .hero-flex-container already switches to a column here, and the image
     is first in the DOM, so it stacks above the hero copy on its own. */
  .svc-hero .hero-image { max-width: 560px; }
  .svc-hero .image-container { height: auto; }
  .svc-form-layout { grid-template-columns: 1fr; gap: 34px; }
  .svc-note-card { padding: 28px 30px; }
}

@media (max-width: 768px) {
  .svc-hero { padding: 46px 5% 60px; }
  h1.svc-hero-title { margin-bottom: 20px; }
  .svc-checklist { grid-template-columns: 1fr; gap: 11px; }
  .svc-cta-sentence { width: 100%; padding: 18px 20px; gap: 13px; }
  .svc-cta-sentence__icon { width: 40px; height: 40px; font-size: 16px; }
  .svc-cta-sentence__text { font-size: 14.5px; }
  .svc-cta-sentence .btn-premium-arrow { display: none; }
  .cta-content-premium .svc-cta-sentence { padding: 18px 20px; }
  .svc-form-card { padding: 30px 24px; }
  .svc-list-item { padding: 17px 19px; font-size: 14.5px; gap: 13px; }
  .svc-list-item__mark { width: 34px; height: 34px; font-size: 14px; }
  .svc-note-card { padding: 26px 24px; }
  .svc-note-card p { font-size: 15px; }
  .svc-listlead { font-size: 15px; margin-bottom: 26px; }
}

@media (max-width: 480px) {
  .svc-hero { padding: 38px 5% 52px; }
  .svc-hero .image-container { height: auto; }
  .svc-form-card { padding: 26px 20px; }
  .svc-checklist li { font-size: 14px; }
}

/* ---------- Secondary (ghost) sentence CTA ---------- */
.svc-cta-sentence--ghost {
  color: var(--lx-gold-light);
  background: transparent;
  border-color: rgba(201, 174, 116, .26);
  box-shadow: none;
}

.svc-cta-sentence--ghost:hover {
  color: var(--lx-gold-champagne);
  background: rgba(201, 174, 116, .07);
}

.svc-cta-sentence--ghost .svc-cta-sentence__icon {
  background: transparent;
  border-color: rgba(201, 174, 116, .2);
}

/* Two CTAs in a band sit side by side on desktop, stacked on mobile */
.cta-content-premium .svc-cta-sentence {
  margin: 8px 5px 0;
  text-align: left;
  vertical-align: top;
}

/* ---------- Name/address/hours block inside a CTA band ---------- */
.svc-note-card--cta {
  max-width: 520px;
  margin: 8px auto 30px;
  padding: 26px 30px;
  text-align: left;
}

.svc-note-card--cta p {
  font-size: 15px;
  line-height: 2;
  color: rgba(255, 255, 255, .74);
}

/* ---------- Hero supporting line (plain sentence above the CTA) ----------
   Reads as body copy, not a button, so the single gold CTA underneath it
   stays the only thing in the hero that looks clickable. */
.svc-hero-note {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 28px 0 0;
  padding: 0;
  max-width: 560px;
}

.svc-hero-note__icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lx-gold-light);
  opacity: .85;
}

.svc-hero-note__text {
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .74);
}

.svc-hero-note__text strong {
  font-weight: 600;
  letter-spacing: .4px;
  white-space: nowrap;
  color: var(--lx-gold-champagne);
}

/* The CTA now follows a sentence rather than the checklist, so it needs less
   air above it than the stand-alone 28px default. Its label is short, so it
   hugs its text instead of stretching across the flex-column hero (the 768px
   rule below still gives it full width on mobile). */
.svc-hero-note + .svc-cta-sentence {
  align-self: flex-start;
  margin-top: 18px;
}

/* ---------- NAP card (name / address / phone / hours) ----------
   Replaces the <br>-separated paragraph in the closing CTA band: same four
   facts, laid out as labelled rows so each one is scannable. */
.svc-nap-card {
  max-width: 560px;
  margin: 14px auto 34px;
  padding: 26px 30px 10px;
  text-align: left;
  background-image: var(--lx-edge), var(--lx-surface);
  background-size: 2px 100%, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: left top, left top;
  border: 1px solid var(--lx-hairline);
  box-shadow: var(--lx-shadow);
}

.svc-nap-card__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(201, 174, 116, .16);
}

.svc-nap-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 16px;
  color: var(--lx-gold-light);
  background: radial-gradient(circle at 30% 25%, rgba(201, 174, 116, .22), rgba(201, 174, 116, .04));
  border: 1px solid rgba(201, 174, 116, .28);
}

.svc-nap-card__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .3px;
  background: var(--lx-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.svc-nap-card__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lx-gold-champagne);
  background: rgba(201, 174, 116, .09);
  border: 1px solid rgba(201, 174, 116, .26);
}

.svc-nap-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lx-gold-champagne);
  box-shadow: 0 0 8px rgba(231, 211, 168, .9);
  animation: svcNapPulse 2.4s var(--lx-ease) infinite;
}

@keyframes svcNapPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

.svc-nap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-nap-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.svc-nap-item:last-child { border-bottom: 0; }

.svc-nap-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--lx-gold-light);
  background: rgba(201, 174, 116, .07);
  border: 1px solid rgba(201, 174, 116, .18);
}

.svc-nap-item__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.svc-nap-item__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(201, 174, 116, .72);
}

.svc-nap-item__value {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
}

.svc-nap-item__value--link {
  align-self: flex-start;
  font-weight: 700;
  letter-spacing: .5px;
  text-decoration: none;
  color: var(--lx-gold-champagne);
  border-bottom: 1px solid rgba(201, 174, 116, .3);
  transition: color .35s var(--lx-ease), border-color .35s var(--lx-ease);
}

.svc-nap-item__value--link:hover {
  color: #fff;
  border-bottom-color: var(--lx-hairline-strong);
}

@media (max-width: 768px) {
  .svc-hero-note { gap: 11px; margin-top: 24px; }
  .svc-hero-note__text { font-size: 14.5px; }
  .svc-hero-note + .svc-cta-sentence { margin-top: 16px; }
  .svc-nap-card { padding: 22px 20px 8px; }
  .svc-nap-card__head { flex-wrap: wrap; gap: 11px; padding-bottom: 16px; }
  .svc-nap-card__name { flex-basis: calc(100% - 51px); font-size: 15px; }
  .svc-nap-card__status { margin-left: 51px; }
  .svc-nap-item { padding: 14px 0; gap: 12px; }
  .svc-nap-item__value { font-size: 14.5px; }
}

/* ---------- H3 inside a CTA band ---------- */
.svc-cta-subtitle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lx-gold-light);
  margin: 34px 0 16px;
}

/* Bullet text is wrapped in its own span so a bold "Label:" lead-in wraps
   cleanly beside the icon instead of pushing it out of line. */
.svc-list-item > span:last-child { min-width: 0; }
.svc-list-item strong { color: var(--lx-gold-light); font-weight: 600; }

/* Bullets carrying a Label: sentence are much taller than plain ones, so give
   that pattern room and top-align the icon. */
.svc-list-grid .svc-list-item { align-items: center; }
.svc-list-item:has(strong) { align-items: flex-start; }
.svc-list-item:has(strong) .svc-list-item__mark { margin-top: 1px; }

@media (max-width: 768px) {
  .cta-content-premium .svc-cta-sentence { margin: 8px 0 0; }
  .svc-note-card--cta { padding: 22px 20px; }
  .svc-note-card--cta p { font-size: 14.5px; line-height: 1.9; }
}

/* ---------- "Label: sentence" paragraph cards ----------
   Used where a doc runs several paragraphs that each open with a bold label.
   They stay paragraphs (no heading promotion) but read as a grid. */
.svc-labeled-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
}

.svc-labeled-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 30px;
  background: var(--lx-surface);
  border: 1px solid var(--lx-hairline);
  box-shadow: var(--lx-shadow);
  transition: transform .45s var(--lx-ease), box-shadow .45s var(--lx-ease),
              border-color .45s var(--lx-ease), background .45s var(--lx-ease);
}

.svc-labeled-card:hover {
  background: var(--lx-surface-hover);
  border-color: var(--lx-hairline-strong);
  transform: translateY(-6px);
  box-shadow: var(--lx-shadow-hover);
}

.svc-labeled-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  font-size: 18px;
  color: var(--lx-gold-light);
  background: radial-gradient(circle at 30% 25%, rgba(201, 174, 116, .18), rgba(201, 174, 116, .03));
  border: 1px solid rgba(201, 174, 116, .26);
  transition: border-color .45s var(--lx-ease), box-shadow .45s var(--lx-ease);
}

.svc-labeled-card:hover .svc-labeled-card__icon {
  border-color: var(--lx-hairline-strong);
  box-shadow: var(--lx-glow);
}

.svc-labeled-card p {
  margin: 0;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(255, 255, 255, .64);
}

.svc-labeled-card strong {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--lx-gold-light);
}

@media (max-width: 768px) {
  .svc-labeled-grid { gap: 16px; }
  .svc-labeled-card { padding: 22px 20px; gap: 14px; }
  .svc-labeled-card__icon { width: 40px; height: 40px; font-size: 16px; }
}

/* Multiple closing paragraphs share one note card */
.svc-note-card p + p { margin-top: 18px; }

/* ---------- Inline links in service copy ----------
   The docs hyperlink the brand name once per page; without this it renders as a
   default blue link on the dark ground. */
.svc-form-intro a,
.content-text-premium a,
.content-paragraph a,
.svc-note-card a,
.feature-description a,
.detail-text a,
.process-text a,
.svc-list-item a,
.svc-labeled-card a,
.faq-premium-answer a,
.cta-text-premium a {
  color: var(--lx-gold-light);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(201, 174, 116, .35);
  transition: color .3s var(--lx-ease), border-color .3s var(--lx-ease);
}

.svc-form-intro a:hover,
.content-text-premium a:hover,
.content-paragraph a:hover,
.svc-note-card a:hover,
.feature-description a:hover,
.detail-text a:hover,
.process-text a:hover,
.svc-list-item a:hover,
.svc-labeled-card a:hover,
.faq-premium-answer a:hover,
.cta-text-premium a:hover {
  color: var(--lx-gold-champagne);
  border-bottom-color: var(--lx-gold-champagne);
}

/* ==========================================================================
   Bullet list panel
   A heading that introduces a list used to render as a body-less .detail-card
   with the lead-in line and the list left outside it, so the three read as
   unrelated blocks. This panel holds the heading, its lead-in and its list
   together as one unit.
   ========================================================================== */
.svc-list-panel {
  max-width: 1200px;
  margin: 0 auto;
  padding: 38px 42px 42px;
  background-image: var(--lx-edge), var(--lx-surface);
  background-size: 2px 100%, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: left top, left top;
  border: 1px solid var(--lx-hairline);
  box-shadow: var(--lx-shadow);
}

.technical-details-grid + .svc-list-panel,
.svc-list-panel + .svc-list-panel {
  margin-top: 32px;
}

.svc-list-panel__head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--lx-hairline);
}

/* the icon badge is centred + stacked inside a card; here it sits inline */
.svc-list-panel__head .detail-icon-wrapper {
  width: 56px;
  height: 56px;
  margin: 0;
  flex-shrink: 0;
}

.svc-list-panel__head .detail-icon {
  font-size: 23px;
}

.svc-list-panel__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--lx-gold-champagne);
}

/* inside the panel the lead-in introduces the list directly beneath it, so it
   reads left-aligned and full width rather than centred in its own column */
.svc-list-panel .svc-listlead {
  max-width: none;
  margin: 0 0 24px;
  text-align: left;
}

.svc-list-panel .svc-list-grid {
  max-width: none;
}

/* a grid left holding one card shouldn't stretch the full 1200px */
.technical-details-grid--single {
  max-width: 760px;
}

@media (max-width: 768px) {
  .svc-list-panel {
    padding: 28px 22px 30px;
  }

  .svc-list-panel__head {
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 20px;
  }

  .svc-list-panel__head .detail-icon-wrapper {
    width: 48px;
    height: 48px;
  }

  .svc-list-panel__head .detail-icon {
    font-size: 20px;
  }

  .svc-list-panel__title {
    font-size: 16.5px;
  }
}