:root {
  --ocean-blue: #4a90e2;
  --teal: #5fb3b3;
  --light-teal: #7fd8d8;
  --white: #ffffff;
  --glass-bg: rgba(0, 0, 0, 0.3);
  --glass-border: rgba(255, 255, 255, 0.1);
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --bg-dark: #0a0e27;
  --bg-darker: #050710;
  --hero-content-bg: rgba(0, 0, 0, 0.4);
  --hero-content-border: rgba(255, 255, 255, 0.1);
  --hero-content-shadow: rgba(0, 0, 0, 0.5);
  --glass-card-hover-bg: rgba(0, 0, 0, 0.4);
  --glass-card-hover-border: rgba(255, 255, 255, 0.2);
  --glass-card-hover-shadow: rgba(0, 0, 0, 0.7);
  --text-shadow: rgba(0, 0, 0, 0.3);
  --button-shadow: rgba(74, 144, 226, 0.5);
  --button-hover-shadow: rgba(74, 144, 226, 0.7);
  --icon-filter: brightness(1.2);
}

@media (prefers-color-scheme: light) {
  :root {
    --ocean-blue: #2e7bd6;
    --teal: #4a9b9b;
    --light-teal: #5fc4c4;
    --white: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.4);
    --glass-border: rgba(0, 0, 0, 0.1);
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --bg-dark: #f5f7fa;
    --bg-darker: #e8ecf1;
    --hero-content-bg: rgba(255, 255, 255, 0.5);
    --hero-content-border: rgba(0, 0, 0, 0.1);
    --hero-content-shadow: rgba(0, 0, 0, 0.15);
    --glass-card-hover-bg: rgba(255, 255, 255, 0.5);
    --glass-card-hover-border: rgba(0, 0, 0, 0.15);
    --glass-card-hover-shadow: rgba(0, 0, 0, 0.2);
    --text-shadow: rgba(255, 255, 255, 0.5);
    --button-shadow: rgba(74, 144, 226, 0.4);
    --button-hover-shadow: rgba(74, 144, 226, 0.6);
    --icon-filter: brightness(1.2) invert(1);
  }
}

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

html {
  color-scheme: light dark;
  overflow-x: hidden;
  width: 100%;
  scroll-behavior: smooth;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
    "Cantarell", sans-serif;
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 16px; /* Base font size for better mobile readability */
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
  background-attachment: fixed;
}

h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 400; /* Increased from 300 for better legibility */
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2; /* Tighter line height for headers */
}

main {
  position: relative;
  z-index: 5;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 4rem 2rem; /* Reduced top padding to allow overlap */
  width: 100%;
  box-sizing: border-box;
}

section {
  margin: 6rem 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.section-services,
.section-how-we-work {
  position: relative;
  z-index: 2;
  margin-bottom: 4rem;
}

.section-services {
  /* Overlap hero on large screens only; on small screens we stack below hero (see media queries) */
  margin-top: -40vh;
}

.section-hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  text-align: center;
  padding: clamp(8rem, 12vh, 10rem) 2rem 6rem 2rem; /*Responsive top padding accounting for header, reduced to show more content */
  display: flex;
  align-items: flex-start; /* Changed from center to flex-start to position content higher */
  justify-content: center;
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  z-index: 1;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

#wave-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hero-content {
  position: relative;
  z-index: 10; /* Above service cards to maintain visual hierarchy */
  max-width: 800px;
  margin: clamp(2rem, 4vh, 3rem) auto 0 auto; /* Top margin for spacing from header */
  padding: 3rem 2.5rem;
  background: var(--hero-content-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hero-content-border);
  border-radius: 20px;
  box-shadow: 0 8px 32px var(--hero-content-shadow);
}

.section-hero h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 500; /* Increased from 400 for better legibility on dark background */
  line-height: 1.3; /* Improved from 1.4 for better readability */
  color: var(--text-primary);
  margin: 0 auto;
  text-shadow:
    0 2px 10px var(--text-shadow),
    0 4px 20px var(--text-shadow);
  letter-spacing: 0.02em;
}

.divider {
  width: 100%;
  height: 1px;
  background: var(--text-secondary);
  margin: 1rem 0;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 8px 32px var(--hero-content-shadow);
  transition: all 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px var(--glass-card-hover-shadow);
  border-color: var(--glass-card-hover-border);
  background: var(--glass-card-hover-bg);
}

.section-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  justify-items: center;
  gap: 2rem;
  margin-top: 1rem; /* Reduced top margin since we're overlapping more */
}

@media (min-width: 768px) {
  .section-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.icon-card {
  text-align: center;
  max-width: 400px;
  width: 100%;
  min-height: 0; /* Allow grid item to shrink if needed */
}

.icon-card .icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
  -webkit-filter: var(--icon-filter);
  filter: var(--icon-filter);
}

.icon-card h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 500; /* Increased from 400 for better hierarchy */
  margin-bottom: 1rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.icon-card p {
  font-size: clamp(1rem, 2vw, 1.1rem); /* Minimum 16px for mobile readability */
  line-height: 1.7; /* Increased from 1.6 for better readability */
  color: var(--text-secondary);
}

/* Services and How We Work share section spacing and .section-grid layout (same sizing, flow, responsiveness) */

.process-quote {
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 2.5rem;
  margin-bottom: 0;
}

.section-cta {
  text-align: center;
  padding: 4rem 3rem;
  max-width: 700px;
  margin: 0 auto;
}

.section-cta h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 400; /* Increased from 300 for better legibility */
  margin-bottom: 2rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.section-cta > p {
  font-size: clamp(1rem, 2.2vw, 1.2rem); /* Minimum 16px for mobile */
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.7;
}

.cta-button {
  display: inline-block;
  padding: clamp(0.875rem, 2vw, 1rem) clamp(2rem, 5vw, 2.5rem);
  background: linear-gradient(135deg, var(--ocean-blue), var(--teal));
  color: var(--white);
  text-decoration: none;
  border-radius: 50px;
  font-size: clamp(1rem, 2vw, 1.1rem); /* Minimum 16px for mobile */
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px var(--button-shadow);
  margin-bottom: 1rem;
  letter-spacing: 0.01em; /* Slight letter spacing for button text */
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px var(--button-hover-shadow);
  filter: brightness(1.1);
}

.cta-button:focus-visible {
  outline: 2px solid var(--ocean-blue);
  outline-offset: 4px;
}

.email {
  font-size: clamp(0.95rem, 2vw, 1.1rem); /* Minimum ~15px for mobile */
  color: var(--text-secondary);
  margin-top: 0;
  line-height: 1.6;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.section-about .about-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem;
  text-align: left;
}

.section-about .about-content p {
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.section-about .about-content p:last-child {
  margin-bottom: 0;
}

/* Disable hero/Services overlap on medium and small viewports so Services never covers hero-content */
@media (max-width: 1024px) {
  .section-services {
    margin-top: 2rem;
  }
}

@media (max-width: 768px) {
  /* Typography is now handled with clamp() for fluid scaling */
  /* Additional mobile-specific adjustments */

  /* Scroll snap for smooth card-to-card scrolling */
  html {
    scroll-snap-type: y mandatory;
    height: 100%;
  }

  body {
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .glass-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Centered state for mobile - replicates hover effects */
  .glass-card.centered {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px var(--glass-card-hover-shadow);
    border-color: var(--glass-card-hover-border);
    background: var(--glass-card-hover-bg);
  }

  .section-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem; /* Reduced gap on mobile */
  }

  .process-quote {
    margin-top: 2rem;
  }

  main {
    padding: 0 clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2rem)
      clamp(1rem, 3vw, 2rem);
  }

  section {
    margin: clamp(3rem, 8vw, 4rem) 0;
  }

  /* No overlap on small screens: Services starts below the hero to avoid overlapping hero content */
  .section-services {
    margin-top: 2rem;
  }

  .hero-content {
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
  }

  .glass-card {
    padding: clamp(1.5rem, 4vw, 3rem);
  }

  .section-cta {
    padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2rem);
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .section-cta h2 {
    font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    margin-bottom: 1.5rem;
    line-height: 1.35;
    padding: 0 0.25rem;
  }

  .section-cta .cta-button {
    display: block;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    text-align: center;
  }

  .icon-card .icon {
    width: clamp(3rem, 8vw, 4rem);
    height: clamp(3rem, 8vw, 4rem);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
  }

  .section-title {
    margin-bottom: 2rem;
  }
}

/* Additional mobile optimization for very small screens */
@media (max-width: 480px) {
  body {
    font-size: 15px; /* Slightly smaller base on very small screens */
  }

  .section-services {
    margin-top: 1.5rem;
  }

  /* CTA: compact layout and full-width tap target */
  .section-cta {
    padding: 1.75rem 1rem;
  }

  .section-cta h2 {
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
  }

  .section-cta .cta-button {
    max-width: none;
    padding: 1rem 1.25rem;
    min-height: 48px;
  }
}

/* Icon filter is driven by --icon-filter (set per theme) so no extra mobile rule needed */

/* Accessibility - Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Accessibility - Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #wave-canvas {
    display: none;
  }
}

/* Print Stylesheet - Optimize layout for printing */
@media print {
  /* Hide decorative and non-essential elements */
  #wave-canvas {
    display: none !important;
  }

  .divider {
    display: none;
  }

  /* Reset backgrounds and colors for print */
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    background: white !important;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Optimize page layout */
  @page {
    margin: 2cm;
  }

  /* Remove fixed positioning and viewport constraints */
  .section-hero {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    padding: 2rem 0 !important;
    page-break-inside: avoid;
  }

  main {
    max-width: 100% !important;
    padding: 0 !important;
  }

  section {
    margin: 2rem 0 !important;
    page-break-inside: avoid;
  }

  /* Simplify cards for print */
  .hero-content,
  .glass-card {
    background: white !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
    padding: 1.5rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    page-break-inside: avoid;
  }

  /* Remove hover effects */
  .glass-card:hover {
    transform: none !important;
  }

  /* Optimize typography for print */
  h1,
  h2,
  h3 {
    color: black !important;
    page-break-after: avoid;
  }

  /* Show URLs for links */
  .cta-button {
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
    text-decoration: underline;
  }

  .cta-button::after {
    content: " (info@coastaldigital.ca)";
    font-size: 0.9em;
  }

  /* Optimize images */
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
  }

  /* Optimize grids for print */
  .section-grid {
    display: block !important;
  }

  .icon-card {
    margin-bottom: 1.5rem;
    page-break-inside: avoid;
    max-width: 350px;
  }

  /* Ensure proper spacing */
  .section-cta {
    padding: 2rem 0 !important;
    page-break-inside: avoid;
  }

  /* Hide visually hidden elements in print */
  .visually-hidden {
    display: none !important;
  }
}