/* ==========================================================================
   MARINE HULL CLEANING - STYLESHEET
   Tech-Maritime Theme inspired by Hullbot.com
   ========================================================================== */

/* Google Fonts Import - Including Space Mono for technical widgets/tags */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* Color Palette - Sustainable Ecosubsea-style Light Theme */
  --bg-abyss: #ffffff;
  --bg-navy: #f8fafc;
  --bg-navy-light: #f1f5f9;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-hover: rgba(0, 0, 0, 0.15);
  
  --primary: #06202b;      /* Deep navy for text/headings */
  --primary-glow: rgba(6, 32, 43, 0.08);
  --secondary: #475569;    /* Slate grey */
  --secondary-glow: rgba(71, 85, 105, 0.04);
  
  --primary-accent: #36a1d9; /* Sky blue */
  --primary-accent-glow: rgba(54, 161, 217, 0.2);
  --sustainable-green: #10b981;
  --beacon-red: #ff3b30;
  --beacon-green: #10b981;
  
  --text-primary: #06202b;
  --text-secondary: #475569;
  --text-dark: #64748b;
  --success: #10b981;
  
  /* Fonts */
  --font-primary: 'Inter', sans-serif;
  --font-heading: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', monospace;
  
  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;
}

/* Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-abyss);
  color-scheme: light;
}

body {
  font-family: var(--font-primary);
  background-color: var(--bg-abyss);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

p {
  color: var(--text-secondary);
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

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

/* Utility Layouts */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-padding {
  padding: 8rem 0;
}

@media (max-width: 768px) {
  .section-padding {
    padding: 5rem 0;
  }
}

/* Header & Navigation */
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  transition: var(--transition-smooth);
  border-bottom: 1px solid transparent;
}

header.site-header.scrolled {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
  padding: 0.5rem 0;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 110px;
  transition: var(--transition-smooth);
}

header.site-header.scrolled .header-container {
  height: 85px;
}

.logo-link img {
  height: 90px;
  width: auto;
  mix-blend-mode: multiply;
  transition: var(--transition-smooth);
}

header.site-header.scrolled .logo-link img {
  height: 70px;
}

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

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

.nav-item {
  position: relative;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-link:hover, .nav-item:hover > .nav-link {
  color: var(--primary-accent);
}

/* Dropdown styling */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  visibility: hidden;
  background: var(--bg-navy);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  min-width: 260px;
  max-height: 400px;
  overflow-y: auto;
  padding: 0.75rem;
  box-shadow: 0 10px 30px rgba(6, 32, 43, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: var(--transition-smooth);
  scrollbar-width: thin;
  scrollbar-color: var(--primary-glow) transparent;
}

/* Custom Scrollbar for Dropdowns */
.dropdown-menu::-webkit-scrollbar {
  width: 6px;
}
.dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--glass-border-hover);
  border-radius: 3px;
}

/* Desktop-only: opening dropdowns on hover. Scoped to min-width:1025px
   (the mobile breakpoint below is max-width:1024px) because touchscreens
   simulate :hover on tap, and this rule's higher specificity than the
   mobile reset was re-applying transform: translateX(-50%) to the open
   Marinas/Service Areas panel - shifting it left by half its own width and
   clipping city/marina names against the nav drawer's edge. */
@media (min-width: 1025px) {
  .nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.dropdown-link {
  font-size: 0.85rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  color: var(--text-secondary);
  display: block;
}

.dropdown-link:hover {
  color: var(--primary);
  background: rgba(0, 242, 254, 0.08);
  padding-left: 1.2rem;
}

/* Group Headers inside Dropdowns */
.dropdown-group-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 0.05em;
  padding: 0.5rem 0.8rem 0.25rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 0.25rem;
}

/* Action Buttons */
.cta-button {
  background: var(--primary-accent);
  color: #ffffff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary-accent);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.cta-button:hover {
  background: transparent;
  color: var(--primary-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(54, 161, 217, 0.2);
}

.cta-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--primary);
  padding: 0.75rem 2rem;
  border-radius: 50px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.cta-outline:hover {
  border-color: var(--primary-accent);
  background: var(--primary-accent);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1.5rem;
}

@media (max-width: 1024px) {
  .mobile-toggle {
    display: block;
  }
  
  nav.main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    /* 100vh alone doesn't shrink for the mobile browser's address bar, so an
       expanded Marinas/Service Areas dropdown could extend below the real
       visible area even though the panel itself is scrollable. 100dvh
       tracks the actual visible viewport as browser chrome shows/hides. */
    height: 100vh;
    height: 100dvh;
    background: var(--bg-navy);
    border-left: 1px solid var(--glass-border);
    flex-direction: column;
    align-items: flex-start;
    padding: 6rem 2rem 2rem 2rem;
    gap: 2rem;
    transition: var(--transition-smooth);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  nav.main-nav.active {
    right: 0;
  }
  
  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 1.5rem;
  }
  
  .nav-item {
    width: 100%;
  }
  
  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
    box-shadow: none;
    border: none;
    /* Indent from the right edge instead of the left: the mobile nav
       drawer is docked flush against the right edge of the screen (its
       guaranteed-safe edge), while the left edge is the one that was
       getting clipped. Anchoring the indent/divider to the right keeps
       marina and city names from being pushed off-screen. */
    border-right: 1px solid var(--glass-border);
    border-radius: 0;
    margin-left: 0;
    margin-right: 1rem;
    margin-top: 0.5rem;
    background: transparent;
    padding: 0;
    max-height: none;
    /* The desktop rule's `min-width: 260px` is meant for the floating,
       centered dropdown and was never reset here - on narrow phones it can
       force this panel wider than the space actually available inside the
       mobile nav drawer, pushing marina/city names out past the left edge. */
    min-width: 0;
    width: auto;
  }
  
  .nav-item.active .dropdown-menu {
    display: flex;
  }
}

@media (max-width: 480px) {
  /* The logo mark is now wider than tall after cropping its excess canvas
     padding, so shrink it on narrow phones to leave room for the toggle
     button and avoid a cramped header. */
  .header-container {
    height: 80px;
  }

  header.site-header.scrolled .header-container {
    height: 64px;
  }

  .logo-link img {
    height: 56px;
  }

  header.site-header.scrolled .logo-link img {
    height: 46px;
  }
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-navy);
  text-align: center;
  padding: 0 1.5rem;
}

.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.75; /* Extremely clear and rich video visibility */
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: radial-gradient(circle at 50% 50%, rgba(54, 161, 217, 0.08) 0%, transparent 80%),
              linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.25) 70%, var(--bg-abyss) 100%);
  pointer-events: none;
}

.hero-grid {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  z-index: 3;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-title {
  font-size: 4.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  line-height: 1.1;
  color: var(--primary);
  letter-spacing: -0.03em;
  text-transform: none;
  max-width: 800px;
}

.hero-title .highlight-text {
  color: var(--sustainable-green);
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.8rem;
  }
}

.hero-desc {
  font-size: 1.25rem;
  margin-bottom: 3rem;
  color: var(--text-secondary);
  max-width: 650px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .hero-desc {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
  }
}

.hero-ctas {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

@media (max-width: 480px) {
  .hero-ctas {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    gap: 1rem;
  }
}

/* Trust Badges / Stats Section */
.stats-bar {
  background: var(--glass-bg);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 2.5rem 0;
  position: relative;
  z-index: 20;
}

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

@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.25rem;
  text-shadow: 0 0 15px rgba(0,242,254,0.3);
}

.stat-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

/* Section Header */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 5rem auto;
}

.section-tag {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  padding: 0.4rem 1.2rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.section-desc {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* Services Grid & Cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

.service-card {
  background: #ffffff;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.service-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.service-card-image {
  height: 220px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-card:hover .service-card-image img {
  transform: scale(1.05);
}

.service-card-content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: rgba(54, 161, 217, 0.08);
  border: 1px solid rgba(54, 161, 217, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-accent);
  font-size: 1.5rem;
  margin-bottom: 2rem;
  transition: var(--transition-smooth);
}

.service-card:hover .service-icon-wrapper {
  background: rgba(54, 161, 217, 0.15);
  border-color: var(--primary-accent);
  box-shadow: 0 0 15px rgba(54, 161, 217, 0.2);
}

.service-card h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--primary);
}

.service-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  flex-grow: 1;
  color: var(--text-secondary);
}

.service-link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--primary-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.service-link span {
  transition: var(--transition-fast);
}

.service-card:hover .service-link span {
  transform: translateX(4px);
}

/* Interactive Grooming Selector Styles */
.grooming-selector {
  background: var(--bg-navy);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 3rem;
  margin-top: 4rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {
  .grooming-selector {
    padding: 1.5rem;
  }
}

.selector-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 1rem;
}

@media (max-width: 768px) {
  .selector-tabs {
    flex-direction: column;
    gap: 0.5rem;
  }
}

.selector-tab-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: 4px;
  transition: var(--transition-smooth);
  text-align: left;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.selector-tab-btn:hover {
  color: var(--primary);
  background: rgba(0, 0, 0, 0.02);
}

.selector-tab-btn.active {
  color: var(--primary);
  background: #ffffff;
  border-color: var(--glass-border-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.selector-panel {
  display: none;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}

.selector-panel.active {
  display: grid;
  animation: fade-in-panel 0.4s ease forwards;
}

@keyframes fade-in-panel {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .selector-panel {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.panel-data {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.panel-data-title {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.2;
}

.panel-data-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.panel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.panel-stat-item {
  background: #ffffff;
  border: 1px solid var(--glass-border);
  padding: 1.25rem;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
}

.panel-stat-val {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--primary);
}

.panel-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

/* Visual Graph representation */
.panel-visual-graph {
  background: #ffffff;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.graph-bar-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.graph-bar-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
}

.graph-bar-label span:last-child {
  color: var(--primary);
}

.graph-bar-container {
  height: 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  overflow: hidden;
}

.graph-bar-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.bar-accent {
  background: var(--primary-accent);
  box-shadow: 0 0 10px rgba(54, 161, 217, 0.2);
}

.bar-red {
  background: var(--beacon-red);
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.2);
}

.bar-grey {
  background: #94a3b8;
}

/* Local SEO Coverage Map Showcase */
.map-showcase {
  background: radial-gradient(circle at 10% 30%, rgba(10, 132, 255, 0.08) 0%, transparent 55%);
}

.map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 1024px) {
  .map-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.map-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.county-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.county-group {
  border-left: 2px solid var(--glass-border);
  padding-left: 1.5rem;
}

.county-group:hover {
  border-color: var(--primary);
}

.county-name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.county-cities {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.map-visual {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 2.5rem;
  text-align: center;
  box-shadow: 0 15px 35px rgba(6, 32, 43, 0.08);
  overflow: hidden;
}

.map-visual::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  background: var(--primary-glow);
  filter: blur(80px);
  top: -50px;
  right: -50px;
  pointer-events: none;
}

.map-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--primary);
}

/* Marina list pills style */
.marina-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.marina-pill {
  background: var(--bg-navy-light);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  transition: var(--transition-fast);
}

.marina-pill:hover {
  background: var(--primary);
  color: var(--bg-abyss);
  box-shadow: 0 0 10px var(--primary-glow);
  transform: translateY(-1px);
}

/* Call to Action Banner */
.cta-banner {
  position: relative;
  background: linear-gradient(135deg, #06202b 0%, #0c3345 100%);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 5rem 3rem;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(6, 32, 43, 0.12);
  color: #ffffff;
}

.cta-banner::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  top: -150px;
  left: -150px;
  pointer-events: none;
}

.cta-banner::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--secondary-glow) 0%, transparent 70%);
  bottom: -150px;
  right: -150px;
  pointer-events: none;
}

.cta-banner h2 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  font-weight: 800;
  color: #ffffff;
}

@media (max-width: 768px) {
  .cta-banner {
    padding: 3rem 1.5rem;
  }
  .cta-banner h2 {
    font-size: 2.2rem;
  }
}

.cta-banner p {
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto 2.5rem auto;
  color: rgba(255, 255, 255, 0.85);
}

/* Footer Section */
footer.site-footer {
  background: var(--bg-navy);
  border-top: 1px solid var(--glass-border);
  padding: 6rem 0 2rem 0;
  color: var(--text-secondary);
}

footer.site-footer .footer-brand img {
  mix-blend-mode: multiply;
  opacity: 0.95;
}

footer.site-footer .footer-brand p {
  color: var(--text-secondary);
}

footer.site-footer .footer-heading {
  color: var(--primary);
}

footer.site-footer .footer-heading::after {
  background: var(--primary-accent);
}

footer.site-footer .footer-link a,
footer.site-footer .footer-link span {
  color: var(--text-secondary);
}

footer.site-footer .footer-link a:hover {
  color: var(--primary-accent);
}

footer.site-footer .footer-contact-item {
  color: var(--text-primary);
}

footer.site-footer .footer-contact-item a:hover {
  color: var(--primary-accent);
}

footer.site-footer .footer-bottom {
  border-top: 1px solid var(--glass-border);
  color: var(--text-secondary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

@media (max-width: 580px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.footer-brand img {
  height: 90px;
  margin-bottom: 1.5rem;
}

.footer-brand p {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.footer-contact-item a:hover {
  color: var(--primary);
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: var(--primary);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.footer-link a,
.footer-link span {
  display: block;
  width: 100%;
  padding: 0.15rem 0;
}

.footer-link a:hover {
  color: var(--primary);
  padding-left: 0.35rem;
}

.footer-bottom {
  border-top: 1px solid var(--glass-border);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Custom Branding in Footer */
.luisa-branding {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
}

.luisa-branding a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-primary);
  font-weight: 500;
}

.luisa-branding a:hover {
  color: #cda250; /* Coffee Tone */
}

.coffee-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* FAQ Accordion Styling */
.faq-group-title {
  font-size: 1.4rem;
  color: var(--primary);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--glass-border);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.faq-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.faq-item:hover, .faq-item.active {
  border-color: var(--glass-border-hover);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.faq-header {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
}

.faq-header:hover {
  color: var(--primary);
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: var(--transition-smooth);
}

.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background-color: var(--primary);
  border-radius: 2px;
}

.faq-icon::before {
  top: 9px;
  left: 3px;
  width: 14px;
  height: 2px;
}

.faq-icon::after {
  top: 3px;
  left: 9px;
  width: 2px;
  height: 14px;
  transition: var(--transition-smooth);
}

.faq-item.active .faq-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-content-inner {
  padding: 0 1.5rem 1.5rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Detail/Service pages styling */
.detail-hero {
  padding: 10rem 0 6rem 0;
  background: linear-gradient(to bottom, var(--bg-navy) 0%, var(--bg-abyss) 100%);
  border-bottom: 1px solid var(--glass-border);
  text-align: center;
}

.detail-hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 4rem;
  margin-top: 4rem;
}

@media (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.detail-content h2 {
  font-size: 1.75rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.detail-content p {
  font-size: 1.05rem;
  line-height: 1.7;
}

.features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.feature-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.feature-bullet svg {
  color: var(--primary);
  width: 20px;
  height: 20px;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.detail-inline-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  display: block;
}

@media (max-width: 768px) {
  .detail-inline-img {
    height: 220px;
  }
}

/* The location/marina service-card text blocks reuse the homepage's
   .service-card component (flex column, stretch-sized for an image +
   content pairing). Nested inside .detail-content's flex column with no
   image sibling here, that stretch context inflates each card to match
   the tallest element on the page, which then overlaps the footer.
   Force these back to natural, content-sized boxes. */
.detail-content .service-card {
  height: auto;
  align-self: flex-start;
}

.sidebar-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 2rem;
}

.sidebar-box h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 0.75rem;
}

.sidebar-box.highlight {
  background: linear-gradient(135deg, rgba(54, 161, 217, 0.08) 0%, rgba(54, 161, 217, 0.02) 100%);
  border-color: rgba(54, 161, 217, 0.2);
}

.sidebar-box.highlight h3 {
  color: var(--primary);
  border-bottom: 1px solid rgba(6, 32, 43, 0.08);
}

.sidebar-box.highlight p {
  color: var(--text-secondary);
}

/* Quote Page Embedded Form */
.quote-frame-wrapper {
  background: #ffffff;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  margin-top: 2rem;
  min-height: 500px;
}

/* Success Thank You Page */
.thank-you-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 5rem 3rem;
  max-width: 600px;
  margin: 6rem auto;
  text-align: center;
  box-shadow: 0 15px 35px rgba(6, 32, 43, 0.08);
}

.thank-you-card .success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.1);
  color: var(--success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  margin-bottom: 2rem;
}

.thank-you-card h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.thank-you-card p {
  margin-bottom: 2.5rem;
  font-size: 1.1rem;
}

/* Scroll Animation classes - fail-safe / progressive enhancement:
   .reveal content is only hidden once JS confirms it can un-hide it again
   (see main.js, section 5). If JS errors out or IntersectionObserver isn't
   supported, .js-reveal-ready never gets added and this content stays
   visible instead of silently disappearing. */
.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-reveal-ready .reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Global Quote Modal Dialog */
.quote-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 32, 43, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1.5rem;
}

.quote-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.quote-modal-card {
  background: #ffffff;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.quote-modal-overlay.active .quote-modal-card {
  transform: translateY(0);
}

.quote-modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quote-modal-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary);
}

.quote-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  margin-right: -0.5rem;
  transition: var(--transition-fast);
}

.quote-modal-close:hover {
  color: var(--beacon-red);
}

.quote-modal-body {
  padding: 2rem;
  overflow-y: auto;
  flex-grow: 1;
  -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbar for Modal Body */
.quote-modal-body::-webkit-scrollbar {
  width: 6px;
}
.quote-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}