/*
  Silverstone website stylesheet

  This file defines the global styles, color variables, typography and
  layout utilities used throughout the Silverstone website. The goal
  is to create a sleek, futuristic and professional look that remains
  accessible and readable on any device. The palette and font pairing
  follow the specification: bright electric blues, neon purples and
  cyber greens set against deep space black and crisp whites. Every
  element uses consistent spacing and sizing to maintain rhythm and
  balance across pages.
*/

:root {
  --color-blue: #00AEEF;
  --color-purple: #9D4EDD;
  --color-green: #00FF9D;
  --color-black: #0B0C10;
  --color-silver: #C0C0C0;
  --color-white: #FFFFFF;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --font-cta: 'Montserrat', sans-serif;
  --max-width: 1200px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-white);
  background-color: var(--color-black);
  line-height: 1.6;
  font-size: 16px;
}

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-purple);
  text-decoration: underline;
}

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

/* Containers */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ------------------------------------------------------------------
   Header styles
   ------------------------------------------------------------------
   The header is fixed to the top of the viewport and collapses when
   scrolling down. A CSS custom property (--headerH) defines the
   height so it can be read by JavaScript to adjust scroll padding
   and title spacing. The logo lives inside the header container and
   scales proportionally to the header height. Retina versions of the
   logo are served via <picture> elements in the HTML.
*/

/* Define a sensible default for the header height. On larger screens
   this variable will be overridden in a media query. A JavaScript
   hook updates this value on load so the CSS variable always matches
   the computed height. */
/* Header height variable used by both CSS and JavaScript. It clamps
   between 56px and 72px based on viewport height. No separate
   definitions are needed for different breakpoints because clamp
   automatically adapts. */
:root {
  --headerH: clamp(56px, 8vh, 72px);
}

header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-white);
  /* Use the custom property for the header height */
  height: var(--headerH);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
}

/* Container for header contents */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

header .logo {
  display: flex;
  align-items: center;
}

header .logo img {
  /* Constrain logo height relative to the header height minus a small margin.
     Width is automatic to preserve aspect ratio. */
  max-height: calc(var(--headerH) - 12px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Hide the header when scrolling down and reveal on scroll up */
.header-hidden {
  transform: translateY(-100%);
}

/* Background image helpers for sections
   Each class applies a different vibrant background and a dark overlay
   to ensure text remains legible. The parent section must set
   position: relative so the overlay pseudo element sits correctly.
*/
.section.bg-lines,
.section.bg-circuit,
.section.bg-city,
.section.bg-mesh,
.section.bg-waves {
  background-size: cover;
  background-position: center;
  position: relative;
}

.section.bg-lines {
  /* Use WebP for faster loading */
  background-image: url('../images/internet/section-abstract-lines.webp');
}
.section.bg-circuit {
  background-image: url('../images/internet/section-circuit.webp');
}
.section.bg-city {
  background-image: url('../images/internet/section-city.webp');
}
.section.bg-mesh {
  background-image: url('../images/internet/section-mesh.webp');
}
.section.bg-waves {
  background-image: url('../images/internet/section-waves.webp');
}

/* Dark overlay to ensure text contrast on image backgrounds */
.section.bg-lines::before,
.section.bg-circuit::before,
.section.bg-city::before,
.section.bg-mesh::before,
.section.bg-waves::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 0;
}

/* Ensure content within a background image section sits above the overlay */
.section.bg-lines > .container,
.section.bg-circuit > .container,
.section.bg-city > .container,
.section.bg-mesh > .container,
.section.bg-waves > .container {
  position: relative;
  z-index: 1;
}

/* Simple fade‑in animations for sections */
.animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate.visible {
  opacity: 1;
  transform: translateY(0);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

nav a {
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
}

nav a:hover,
nav a.active {
  color: var(--color-purple);
}

/* Mobile navigation */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.nav-toggle span {
  width: 100%;
  height: 2px;
  background: var(--color-black);
  margin-bottom: 4px;
  transition: transform 0.3s ease;
}

@media (max-width: 768px) {
  nav ul {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    width: 200px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

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

  .nav-toggle {
    display: flex;
  }
}

/* Hero section */
.hero {
  min-height: 100vh; height: 100svh; height: 100dvh;
  min-
  position: relative;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1rem;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Ensure page titles have breathing room below the header. The
   padding-top is set relative to the current header height plus an
   additional 24px for extra space. JavaScript updates the CSS
   variable --headerH dynamically to ensure this remains accurate on
   resize. */
.title-band {
  /* Increase space between the header and page titles for better breathing room */
  /* Provide even more space to ensure titles never appear squashed beneath the header */
  padding-top: calc(var(--headerH) + 80px);
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.30), rgba(0,0,0,0.60));
  z-index: 0;
}

.hero .content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;

  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.hero p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  color: var(--color-silver);

  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-cta);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-green);
  color: var(--color-black);
}

.btn-primary:hover {
  background-color: var(--color-purple);
  color: var(--color-white);
}

.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--color-green);
  color: var(--color-green);
}

.btn-secondary:hover {
  background-color: var(--color-green);
  color: var(--color-black);
}

/* Section headings */
.section {
  padding: 4rem 0;
}

.section-title {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--color-blue);
  margin-bottom: 1rem;
}

.section-subtitle {
  text-align: center;
  font-size: 1rem;
  color: var(--color-silver);
  margin-bottom: 2rem;
}

/* Feature cards */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

/* Feature cards now float on the page with a translucent background and subtle border */
.feature-card {
  background-color: rgba(11,12,16,0.8);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  padding: 2rem;
  flex: 1 1 300px;
  max-width: 350px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.6);
}

/* ------------------------------------------------------------------
   Neon card styling
   ------------------------------------------------------------------
   Cards and modules wrapped with the .neon-card class appear to float
   above the background with a soft glow. Use this class on feature
   cards, service content wrappers and call‑to‑action modules to add
   visual hierarchy while maintaining legibility. Hovering lifts the
   card slightly and increases the glow.
*/
.neon-card {
  background: rgba(12,16,24,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,174,239,0.25);
  box-shadow:
    0 0 0 1px rgba(157,78,221,0.25) inset,
    0 8px 28px rgba(0,0,0,0.35),
    0 0 24px rgba(0,174,239,0.25);
  border-radius: 18px;
  padding: clamp(16px, 3vw, 28px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.neon-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(157,78,221,0.35) inset,
    0 12px 40px rgba(0,0,0,0.4),
    0 0 36px rgba(0,174,239,0.35);
}

/* When a service image has the neon-card class, style it as a tight floating box */
.service-image.neon-card {
  background: rgba(12,16,24,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,174,239,0.25);
  box-shadow:
    0 0 0 1px rgba(157,78,221,0.25) inset,
    0 8px 28px rgba(0,0,0,0.35),
    0 0 24px rgba(0,174,239,0.25);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}

.service-image.neon-card img {
  /* Allow the image to define the height of its neon card. Use full width but natural height so the border hugs the image tightly. */
  width: 100%;
  height: auto;
  /* Preserve the entire image within the neon card. Contain avoids cropping while the dark backdrop absorbs any empty space. */
  object-fit: contain;
}

/* Tight neon cards for image galleries and collages */
.gallery-grid .neon-card,
.collage .neon-card {
  padding: 0;
  overflow: hidden;
}

.gallery-grid .neon-card img,
.collage .neon-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Values and feature cards can adopt neon styling if they include this class */
.feature-card.neon-card,
.value-card.neon-card,
.service-content.neon-card,
.cta-card.neon-card {
  /* nothing extra here; included for semantic grouping */
}

/* When a value card also has the neon-card class, the neon-card styling
   should take precedence over the default value-card background and
   shadow. Reset conflicting properties to allow neon styles through. */
.value-card.neon-card {
  background: inherit;
  backdrop-filter: inherit;
  border: inherit;
  box-shadow: inherit;
}

/* Remove default card styling when service-content also uses neon-card */
.service-content.neon-card {
  background: inherit;
  backdrop-filter: inherit;
  border: inherit;
  box-shadow: inherit;
}

/* Brand gradient utility
   Use this class to create seamless transitions between sections
   without resorting to plain grey. The gradient flows from deep
   space black through electric blue into cyber green. */
.brand-gradient {
  background-image: linear-gradient(180deg, rgba(11,12,16,1) 0%, rgba(0,174,239,0.8) 50%, rgba(0,255,157,0.7) 100%);
  background-size: cover;
  background-position: center;
}

.feature-card i {
  font-size: 2.5rem;
  color: var(--color-green);
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-green);
}

.feature-card p {
  color: var(--color-silver);
  font-size: 0.9rem;
}

/* Service listing */
.service-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;
}

.service-row:nth-child(even) {
  flex-direction: row-reverse;
}

.service-image {
  flex: 1 1 45%;
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  /* Remove the black window behind service images. The image will sit
     directly on the section background or within a neon card. */
  background-color: transparent;
}

.service-image .ratio {
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  position: relative;
  background-color: transparent;
}

.service-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-content {
  flex: 1 1 50%;
  /* Float service descriptions on a translucent panel for better contrast */
  background: rgba(11,12,16,0.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* When a service-content element should not be styled as a card (used for Pattern 1) */
.service-content.no-card {
  background: transparent;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.service-content h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-blue);
  margin-bottom: 1rem;
}

.service-content p {
  color: var(--color-silver);
  margin-bottom: 1rem;
}

.service-content ul {
  list-style: none;
  margin-bottom: 1.5rem;
}

.service-content ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-silver);
}

.service-content ul li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--color-green);
  margin-right: 0.5rem;
}

/* Collage */
.collage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.collage img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  border-radius: 0.5rem;
  /* Remove dark window behind collage images */
  background-color: transparent;
  padding: 0;
}

/* Innovation gallery grid on the Services page */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.gallery-grid img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  border-radius: 0.5rem;
  /* Remove dark window behind innovation gallery images */
  background-color: transparent;
  padding: 0;
}

/* Cards for values */
.values {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

/* Value cards share the glass effect for a cohesive look */
.value-card {
  background-color: rgba(11,12,16,0.8);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  padding: 2rem 1.5rem;
  flex: 1 1 260px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.6);
}

.value-card i {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--color-green);
}

.value-card h4 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-blue);
}

.value-card p {
  font-size: 0.9rem;
  color: var(--color-silver);
}

/* Forms */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  /* Give forms a subtle floating panel effect */
  background: rgba(11,12,16,0.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* Calendly placeholder */
form label {
  font-weight: 600;
  color: var(--color-silver);
  margin-bottom: 0.3rem;
}

form input,
form textarea,
form select {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #333;
  background-color: #1a1d24;
  color: var(--color-white);
  font-family: var(--font-body);
  resize: vertical;
}

form input::placeholder,
form textarea::placeholder {
  color: #777;
}

form button {
  align-self: flex-start;
}

/* Map section */
.map-container {
  position: relative;
  width: 100%;
  /* Reduce overall map height; using a smaller aspect ratio keeps the map
     from dominating the page. */
  height: 0;
  /* Make the map container square */
  padding-bottom: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  /* Push the map down so its top aligns roughly with the first form field (Name) */
  
  /* Add a subtle neon border to match the site’s aesthetic */
  border: 1px solid rgba(0,174,239,0.25);
  box-shadow: 0 0 12px rgba(0,174,239,0.15);
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Footer */
footer {
  background-color: var(--color-black);
  color: var(--color-silver);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.875rem;
}

footer a {
  color: var(--color-blue);
}

/* Utility classes */
.text-center { text-align: center; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }

/* Responsive typography */
@media (min-width: 768px) {
  .hero h1 {
    font-size: 3rem;
  
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
  .section-title {
    font-size: 2.25rem;
  }
  .hero p {
    font-size: 1.25rem;
  
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
}

/* === Neon stacking + overlay isolation overrides (appended) === */
.section.bg-lines,
.section.bg-circuit,
.section.bg-city,
.section.bg-mesh,
.section.bg-waves {
  position: relative;
  isolation: isolate; /* ensure overlay sits below content */
}
.section.bg-lines::before,
.section.bg-circuit::before,
.section.bg-city::before,
.section.bg-mesh::before,
.section.bg-waves::before {
  z-index: 0;
  pointer-events: none;
}
.section.bg-lines > .container,
.section.bg-circuit > .container,
.section.bg-city > .container,
.section.bg-mesh > .container,
.section.bg-waves > .container {
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Neon cards and service blocks above overlay */
.neon-card,
.service-row,
.service-image,
.service-content {
  position: relative;
  z-index: 2;
  overflow: visible;
}

/* Robust neon card visual (ensure glow is visible) */
.neon-card {
  box-shadow:
    0 0 0 1px rgba(157,78,221,0.25) inset,
    0 8px 28px rgba(0,0,0,0.35),
    0 0 36px rgba(0,174,239,0.35) !important;
  border: 1px solid rgba(0,174,239,0.25);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}

/* Tight, image-first cards for service images */
.service-image.neon-card img,
.neon-card > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Fade-in safety */
.animate.visible, .visible {
  opacity: 1;
  transform: translateY(0);
}


/* === Layout corrections for services/about/booking image + text === */

.service-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Image card sizing */
.service-row .service-image.neon-card {
  flex: 0 1 420px;
  width: 100%;
  max-width: 520px;
  padding: 0;
  overflow: visible; /* allow glow to extend */
}

/* Text card sizing */
.service-row .service-content.neon-card {
  flex: 1 1 480px;
  min-width: 280px;
  padding: 1.75rem;
}

/* Alternate reversed rows for visual rhythm */
.service-row:nth-of-type(even) { flex-direction: row-reverse; }

/* Stronger responsive behaviour */
@media (min-width: 900px) {
  .service-row .service-image.neon-card { flex-basis: 40%; }
  .service-row .service-content.neon-card { flex-basis: 56%; }
}

/* Ensure images scale nicely inside neon cards */
.service-image.neon-card img,
.neon-card > img {
  display: block;
  width: 100%;
  height: auto;
}

/* About/Booking: if they use the same service-row structure, these rules will apply.
   If not, the image neon cards will still be capped by the max-width above. */


/* === Neon & layout normalization (v2) === */

/* Isolate and layer section overlays behind content */
.section.bg-lines,
.section.bg-circuit,
.section.bg-city,
.section.bg-mesh,
.section.bg-waves {
  position: relative;
  isolation: isolate;
}
.section.bg-lines::before,
.section.bg-circuit::before,
.section.bg-city::before,
.section.bg-mesh::before,
.section.bg-waves::before {
  z-index: 0;
  pointer-events: none;
}

/* Ensure content sits above overlay */
.section > .container {
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Service/Two-column rows */
.service-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
}
/* Alternate direction for rhythm */
.service-row:nth-of-type(even) {
  flex-direction: row-reverse;
}

/* Image column */
.service-row .service-image {
  flex: 0 1 420px;
  width: 100%;
  max-width: 520px;
}

/* Text column */
.service-row .service-content {
  flex: 1 1 520px;
  min-width: 280px;
}

/* Neon card visual for both text & image columns */
.neon-card {
  position: relative;
  z-index: 2;
  background: rgba(12,16,24,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,174,239,0.25);
  box-shadow:
    0 0 0 1px rgba(157,78,221,0.25) inset,
    0 8px 28px rgba(0,0,0,0.35),
    0 0 36px rgba(0,174,239,0.35);
  border-radius: 18px;
  overflow: visible;
}
.service-content.neon-card { padding: 1.75rem; }
.service-image.neon-card { padding: 0; }

/* Images scale within their neon cards */
.service-image.neon-card img,
.neon-card > img {
  display: block;
  width: 100%;
  height: auto;
}

/* If any 'no-card' slipped in, neutralize it when neon-card is present */
.service-content.no-card.neon-card,
.service-image.no-card.neon-card {
  background: rgba(12,16,24,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,174,239,0.25);
  box-shadow:
    0 0 0 1px rgba(157,78,221,0.25) inset,
    0 8px 28px rgba(0,0,0,0.35),
    0 0 36px rgba(0,174,239,0.35);
  padding: 1.75rem;
}
@media (min-width: 900px) {
  .service-row .service-image { flex-basis: 40%; }
  .service-row .service-content { flex-basis: 56%; }
}


/* === Patch v3: Fix overlapping service rows, ensure neon floating cards, neon image borders, and remove contact/map boxes === */

/* Ensure section overlays sit behind content */
.section { position: relative; }
.section::before { z-index: 0; pointer-events:none; }
.section > .container { position: relative; z-index: 1; overflow: visible; }

/* Use CSS Grid for service rows to prevent overlap and keep image/text aligned */
.service-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 3rem;
}
@media (min-width: 980px) {
  .service-row {
    grid-template-columns: 1fr 1fr; /* side-by-side */
  }
  /* Alternate every other row */
  .service-row:nth-of-type(even) .service-image { order: 2; }
  .service-row:nth-of-type(even) .service-content { order: 1; }
}

/* Floating neon cards for text and images */
.neon-card {
  position: relative;
  background: rgba(12,16,24,0.55);
  border: 1px solid rgba(0,174,239,0.35);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(157,78,221,0.25) inset,
    0 10px 30px rgba(0,0,0,0.45),
    0 0 40px rgba(0,174,239,0.35);
}
/* Text card padding */
.service-content.neon-card { padding: 1.75rem; }
/* Image card: no inner padding so image fills; add neon border */
.service-image.neon-card { padding: 0; overflow: hidden; }
.service-image.neon-card img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0,174,239,0.55); /* neon border on image */
  box-shadow: 0 0 32px rgba(0,174,239,0.35);
}

/* Guardrails against overlapping: never allow negative margins on service blocks */
.service-row .service-content,
.service-row .service-image { margin: 0 !important; }

/* Contact page: remove boxes around the contact form and Google Map */
.contact-form,
.contact-form.neon-card,
.map-container,
.map-container.neon-card,
#map,
.google-map,
iframe[src*="google.com/maps"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}


/* === Patch v5: Perfect alignment (equal heights), neon consistency, restore Google Map without box === */

/* Service rows: stretch items so both columns match height exactly */
.service-row {
  align-items: stretch;            /* equal height */
  grid-auto-rows: 1fr;             /* ensure rows expand evenly */
}

/* Make both cards fill the row height */
.service-content.neon-card,
.service-image.neon-card { 
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Image fills card height; crop as needed to keep tops/bottoms aligned */
.service-image.neon-card img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional: keep text cards comfy while filling height */
.service-content.neon-card { padding: 1.75rem; }

/* ABOUT: ensure story/mission rows (same classes) benefit from the same rules */

/* CONTACT: show the Google Map (explicit height), but remove any box styling */
.map-container,
#map,
.google-map,
iframe[src*="google.com/maps"] {
  width: 100%;
  height: 420px;                   /* restore visibility */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Keep the contact form visible, spacing ok, but no neon box/background */
.contact-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Defensive: prevent negative margins that can cause overlap */
.service-row .service-content,
.service-row .service-image { margin: 0 !important; }

/* Ensure innovation gallery and what drives us images display properly */
.innovation-gallery img,
.what-drives-us img {
  display: block;
}


/* === Patch v6: Restore small gallery cards (Innovation Gallery, What Drives Us) === */

/* Robust grid and visibility for small galleries */
.gallery-grid,
.collage,
.values-gallery,
.drives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* Ensure gallery cards behave independently of service image rules */
.gallery-grid .neon-card,
.collage .neon-card,
.values-gallery .neon-card,
.drives-grid .neon-card {
  position: relative;
  z-index: 2;
  padding: 0;
  overflow: hidden;
}

/* Gallery images should size themselves naturally (not stretch to 100% height) */
.gallery-grid .neon-card img,
.collage .neon-card img,
.values-gallery .neon-card img,
.drives-grid .neon-card img {
  display: block;
  width: 100%;
  height: auto !important;   /* override any height:100% from other patches */
  object-fit: cover;
  border: 1px solid rgba(0,174,239,0.45);
  box-shadow: 0 0 24px rgba(0,174,239,0.25);
}

/* Guard against accidental flex inheritance inside gallery cards */
.gallery-grid .neon-card,
.collage .neon-card,
.values-gallery .neon-card,
.drives-grid .neon-card {
  display: block;
}


/* === Patch v8: Force gallery tiles to render (override height:100%) === */
.gallery-grid .neon-card,
.collage .neon-card,
.values-gallery .neon-card,
.drives-grid .neon-card,
.what-drives-us .neon-card,
.what-drives-us-grid .neon-card {
  display: block !important;
  padding: 0;
  overflow: hidden;
}

.gallery-grid .neon-card img,
.collage .neon-card img,
.values-gallery .neon-card img,
.drives-grid .neon-card img,
.what-drives-us .neon-card img,
.what-drives-us-grid .neon-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;        /* KEY FIX: do not stretch when parent has no explicit height */
  object-fit: cover;
  border: 1px solid rgba(0,174,239,0.45);
  box-shadow: 0 0 24px rgba(0,174,239,0.25);
}

.gallery-grid,
.collage,
.values-gallery,
.drives-grid,
.what-drives-us,
.what-drives-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}


/* === Patch v9: Decouple gallery tiles from service equal-height rules === */

/* Service equal-height images apply ONLY within .service-row */
.service-row .service-image.neon-card img { height: 100% !important; object-fit: cover; }
.service-image.neon-card img { height: auto; } /* default fallback for non-service contexts */

/* Gallery containers */
.gallery-grid, .collage, .values-gallery, .drives-grid, .what-drives-us, .what-drives-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* Gallery card look */
.gallery-grid .neon-card,
.collage .neon-card,
.values-gallery .neon-card,
.drives-grid .neon-card,
.what-drives-us .neon-card,
.what-drives-us-grid .neon-card { 
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  position: relative;
}

/* Gallery images: natural height; visible; neon border+glow */
.gallery-grid .neon-card img,
.collage .neon-card img,
.values-gallery .neon-card img,
.drives-grid .neon-card img,
.what-drives-us .neon-card img,
.what-drives-us-grid .neon-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  border: 1px solid rgba(0,174,239,0.45);
  box-shadow: 0 0 24px rgba(0,174,239,0.25);
}

/* Prevent animate/IntersectionObserver from hiding gallery tiles if not observed */
.gallery-grid .neon-card.animate,
.collage .neon-card.animate,
.values-gallery .neon-card.animate,
.drives-grid .neon-card.animate,
.what-drives-us .neon-card.animate,
.what-drives-us-grid .neon-card.animate {
  opacity: 1 !important;
  transform: none !important;
}


/* === Patch v10: Uniformly scale down service rows (text + images) without affecting galleries === */

/* Global scale for service sections only */
:root {
  --service-scale: 0.88; /* adjust this single value if needed */
}

/* Tighter spacing per row */
.service-row {
  gap: calc(2rem * var(--service-scale));
  margin-bottom: calc(3rem * var(--service-scale));
}

/* Image column: smaller cap + basis */
.service-row .service-image.neon-card {
  max-width: calc(520px * var(--service-scale));   /* was ~520px */
}
@media (min-width: 980px) {
  .service-row .service-image { flex-basis: 36%; }  /* was ~40% */
  .service-row .service-content { flex-basis: 60%; }/* was ~56% */
}

/* Text card padding and typography */
.service-row .service-content.neon-card {
  padding: calc(1.75rem * var(--service-scale));
}
.service-row .service-content h3 {
  font-size: calc(1.75rem * var(--service-scale));  /* heading */
  line-height: 1.2;
  margin-bottom: calc(1rem * var(--service-scale));
}
.service-row .service-content p {
  font-size: calc(1rem * var(--service-scale));
}
.service-row .service-content li {
  font-size: calc(0.985rem * var(--service-scale));
}
.service-row .service-content .btn {
  padding: calc(0.65rem * var(--service-scale)) calc(1.2rem * var(--service-scale));
}

/* Preserve equal-height alignment */
.service-row { align-items: stretch; }
.service-row .service-content.neon-card,
.service-row .service-image.neon-card { height: 100%; }
.service-row .service-image.neon-card img { height: 100%; object-fit: cover; }


/* === Patch v11: Make page longer + shrink service rows more; ensure galleries fully render === */

/* Smaller uniform scale for service sections */
:root { --service-scale: 0.82; } /* previously 0.88 */

/* Extra vertical space in the services section (so gallery fits visibly) */
.section.bg-circuit {
  padding-bottom: clamp(5rem, 8vw, 9rem);
}

/* Ensure containers don't clip the bottom row */
.section > .container { overflow: visible; }

/* Keep galleries spacious and visible */
.gallery-grid { margin-top: 2rem; margin-bottom: 3rem; }
.gallery-grid, .collage, .values-gallery, .drives-grid,
.what-drives-us, .what-drives-us-grid {
  min-height: 1px; /* guard against collapse */
}

/* Gallery cards/images should never inherit service equal-height constraints */
.gallery-grid .neon-card,
.collage .neon-card,
.values-gallery .neon-card,
.drives-grid .neon-card,
.what-drives-us .neon-card,
.what-drives-us-grid .neon-card {
  display: block;
  height: auto !important;
}
.gallery-grid .neon-card img,
.collage .neon-card img,
.values-gallery .neon-card img,
.drives-grid .neon-card img,
.what-drives-us .neon-card img,
.what-drives-us-grid .neon-card img {
  height: auto !important;
  width: 100% !important;
  object-fit: cover;
}

/* Safety: animated gallery tiles should default to visible */
.gallery-grid .neon-card.animate,
.collage .neon-card.animate,
.values-gallery .neon-card.animate,
.drives-grid .neon-card.animate,
.what-drives-us .neon-card.animate,
.what-drives-us-grid .neon-card.animate {
  opacity: 1 !important;
  transform: none !important;
}


/* === Patch v12: Move services upward & increase bottom padding to ensure Innovation Gallery fits === */

/* Reduce top margin/padding before service rows to move them up */
.services-section,
.section.bg-circuit {
  padding-top: clamp(1rem, 4vw, 2rem) !important; /* was larger */
  margin-top: 0 !important;
}

/* Increase bottom padding to push gallery fully into view */
.section.bg-circuit {
  padding-bottom: clamp(8rem, 12vw, 14rem) !important; /* more than v11 */
}

/* Slightly smaller scale to help fit */
:root { --service-scale: 0.80; }

/* Prevent clipping and ensure all rows render */
.section > .container { overflow: visible !important; }


/* === Patch v12: Nudge services upward & add more bottom space === */

/* Slightly reduce space above the services list */
.section.bg-circuit {
  margin-top: clamp(-2rem, -4vw, -3rem);   /* move section upward a bit */
  padding-top: clamp(1.5rem, 4vw, 3rem);   /* keep some breathing room */
  padding-bottom: clamp(8rem, 12vw, 16rem);/* more space so gallery fully fits */
}

/* Keep uniform smaller scale so everything fits */
:root { --service-scale: 0.80; } /* was 0.82 */

/* Ensure containers don't clip any content */
.section > .container { overflow: visible; }


/* === Patch v13: Move services closer to title, add generous bottom space, lock 2-col layout & equal gaps === */

/* Global knobs */
:root {
  --service-scale: 0.78;           /* smaller overall footprint for service pairs */
  --service-gap: 1.5rem;           /* consistent gap between image and text */
}

/* Pull the "Services" section up and give the gallery ample breathing room below */
.section.bg-circuit {
  margin-top: clamp(-3rem, -6vw, -5rem);    /* move section up toward the title */
  padding-top: clamp(1rem, 3vw, 2rem);      /* maintain some top padding */
  padding-bottom: clamp(12rem, 16vw, 22rem);/* BIG bottom padding so gallery always fits */
}

/* Services: strict two-column grid with consistent gaps, alternate left/right on wide screens */
.service-row {
  display: grid;
  grid-template-columns: 1fr;               /* single column on mobile */
  gap: var(--service-gap);
  margin-bottom: calc(3rem * var(--service-scale));
  align-items: stretch;                      /* equal heights */
}
@media (min-width: 980px) {
  .service-row { grid-template-columns: 1fr 1fr; }
  .service-row:nth-of-type(even) .service-image { order: 2; }
  .service-row:nth-of-type(even) .service-content { order: 1; }
}

/* Ensure the gap is the same everywhere; no rogue margins */
.service-row .service-image,
.service-row .service-content { margin: 0 !important; }

/* Image/text card visuals + equal-height behavior */
.service-content.neon-card,
.service-image.neon-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-image.neon-card {
  padding: 0;
  overflow: hidden;
}
.service-row .service-image.neon-card {
  max-width: none;                             /* allow the grid to size the column */
}

.service-row .service-image.neon-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text card comfortable padding + scaled typography */
.service-row .service-content.neon-card { padding: calc(1.5rem * var(--service-scale)); }
.service-row .service-content h3 {
  font-size: calc(1.65rem * var(--service-scale));
  margin-bottom: calc(1rem * var(--service-scale));
  line-height: 1.2;
}
.service-row .service-content p,
.service-row .service-content li { font-size: calc(1rem * var(--service-scale)); }
.service-row .service-content .btn {
  padding: calc(0.6rem * var(--service-scale)) calc(1.1rem * var(--service-scale));
}

/* Containers never clip the gallery rows below */
.section > .container { overflow: visible; }

/* Guard: gallery tiles remain independent of service equal-height rules */
.gallery-grid .neon-card img,
.collage .neon-card img,
.values-gallery .neon-card img,
.drives-grid .neon-card img,
.what-drives-us .neon-card img,
.what-drives-us-grid .neon-card img {
  height: auto !important;
}


/* === v13 services-only fix: show full service images (no crop) + ensure gallery tiles visible === */
.page-services .service-row .service-image.neon-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* full image, not cropped */
  background: transparent;
}

/* Innovation Gallery: 4-column collage with natural image sizing */
.page-services .gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 900px) {
  .page-services .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}
.page-services .gallery-grid .neon-card {
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}
.page-services .gallery-grid .neon-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;    /* override any 100% height inheritance */
  object-fit: cover;
  border: 1px solid rgba(0,174,239,0.45);
  box-shadow: 0 0 24px rgba(0,174,239,0.25);
}
/* If any gallery tile still has .animate via markup, force visibility */
.page-services .gallery-grid .neon-card.animate { opacity: 1 !important; transform: none !important; }


/* === Patch v16: Services images hug neon border (no gap) === */
.page-services .service-row .service-image.neon-card {
  padding: 0 !important;                 /* no inner padding */
  background: transparent;               /* no background that can show as a gap */
  overflow: hidden;                       /* clip to rounded border */
}
.page-services .service-row .service-image.neon-card img {
  display: block;                         /* remove baseline gap */
  margin: 0 !important;                   /* no default margins */
  width: 100% !important;
  height: auto !important;
  border: 0 !important;                   /* image border off so border = card border */
  border-radius: inherit !important;      /* match card radius */
  object-fit: cover;                      /* fill the frame edge to edge */
}
/* If you require no cropping at all, switch to object-fit: contain; but that will introduce letterboxing (visible space).
   Using 'cover' ensures there is *zero* space between the neon border and the image, per request. */


/* === v17 Services-only: remove neon box from service images; align heights with text; no crop === */
.page-services .service-row { align-items: stretch; display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 980px) { .page-services .service-row { grid-template-columns: 1fr 1fr; } }
/* alternate sides remain handled by existing CSS (nth-of-type even orders) */

.page-services .service-row .service-image { 
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden;            /* clip any overflow to match text height */
  height: 100%;                /* stretch to row height */
  display: flex; 
}

.page-services .service-row .service-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Image fills height without cropping; width auto; centered horizontally */
.page-services .service-row .service-image img,
.page-services .service-row .service-image .service-img {
  width: auto !important;
  height: 100% !important;     /* match text column height from the row stretch */
  max-width: 100% !important;
  object-fit: contain !important;  /* never crop */
  margin: 0 auto;              /* center if narrower than container */
  display: block;
  border: 0 !important;
  background: transparent !important;
}

/* Enforce equal height between the two columns in each row */
.page-services .service-row > * { min-height: 100%; }
.page-services .service-row .service-content.neon-card { padding: 1.5rem; }

/* Keep gaps consistent */
.page-services .service-row .service-image,
.page-services .service-row .service-content { margin: 0 !important; }

/* Innovation Gallery: 4 columns & always visible */
.page-services .gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}
@media (min-width: 900px) {
  .page-services .gallery-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.page-services .gallery-grid .neon-card { 
  display: block; padding: 0; overflow: hidden; border-radius: 14px;
}
.page-services .gallery-grid .neon-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;     /* natural height so all rows show */
  object-fit: cover;
}
/* Kill animation/hiding on gallery tiles just in case */
.page-services .gallery-grid .neon-card.animate { opacity: 1 !important; transform: none !important; }


/* === v19 services-only: smaller gallery tiles (no crop) + extra bottom space; center service images === */

/* Center images within their service columns */
.page-services .service-row .service-image { 
  justify-self: center !important;   /* horizontal centering in the grid column */
  align-self: center !important;     /* vertical centering if column is taller */
}
.page-services .service-row .service-image img {
  margin: 0 auto !important;         /* ensure the <img> itself is centered */
}

/* Innovation Gallery — smaller tiles without cropping */
.page-services .gallery-grid .neon-card, 
.page-services .gallery-grid .gallery-card {
  display: grid;
  place-items: center;                /* center the image inside the tile */
  padding: 0.25rem;                   /* tiny breathing room inside the neon frame if present */
}

.page-services .gallery-grid .neon-card img,
.page-services .gallery-grid .gallery-card img {
  width: auto !important;
  height: auto !important;
  max-width: 78% !important;         /* smaller than full width */
  max-height: 78% !important;        /* keep proportionally smaller */
  object-fit: contain !important;     /* no cropping */
  display: block;
}

/* Add generous space under the Innovation Gallery so it's not cramped */
.page-services .gallery-grid { 
  margin-bottom: clamp(6rem, 10vw, 12rem) !important;
}

/* === v21: Services text box opacity tune for legibility === */
.page-services .service-content.neon-card {
  /* Darker glass while keeping background slightly visible */
  background: rgba(12, 16, 24, 0.80) !important;
  border-color: rgba(0,174,239,0.30) !important;
  box-shadow:
    0 0 0 1px rgba(157,78,221,0.22) inset,
    0 8px 28px rgba(0,0,0,0.35),
    0 0 24px rgba(0,174,239,0.20) !important;
}

/* === v21: Fallback — disable neon on first two gallery cards === */
.page-services .gallery-grid .gallery-card:nth-child(-n+2) {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* === v21: Innovation Gallery 4‑column layout === */
@media (min-width: 1024px) {
  .page-services .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.25rem !important;
  }
}
/* Remove neon/animations only for the first two gallery items (leftmost) */
.page-services .gallery-grid .gallery-card:nth-child(-n+2),
.page-services .gallery-grid .gallery-card:nth-child(-n+2) * {
  animation: none !important;
  transition: none !important;
  filter: none !important;
}

/* === v21: Book page — un-crop and center calendar image === */
.page-book .service-image {
  overflow: visible !important;
}
.page-book .service-image img {
  position: static !important;
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain !important; /* ensure no cropping */
}
.page-book .service-image.neon-card {
  padding: 0 !important; /* keep container tight but neutral */
}

/* === v21: Contact page — remove neon styling for form and map === */
.page-contact .service-content.neon-card,
.page-contact .service-image.neon-card {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: none !important;
}
/* Neutralize any decorative animations inside these blocks */
.page-contact .service-content.neon-card *,
.page-contact .service-image.neon-card * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
}
/* A touch of spacing after removing padding, for aesthetics */
.page-contact .service-content.neon-card { padding: 0 !important; }
.page-contact .service-image.neon-card { padding: 0 !important; }
.page-contact .service-content.neon-card form { margin-top: 0.5rem; }
.page-contact .map-container {  }

/* === v21: Services helper — ensure service images center within their wrappers === */
.page-services .service-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-services .service-image img {
  position: static;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 767.98px) {
  /* On small screens, let images be natural height to avoid odd spacing */
  .page-services .service-image { min-height: 0 !important; }
}

/* === v21.1: Services — Innovation Gallery full responsiveness ===
   Ensure all images render and scale cleanly; tune gaps + breakpoints.
*/
.page-services .gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}

/* Tablet: move to 3 columns */
@media (min-width: 640px) {
  .page-services .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

/* Desktop: 4 columns */
@media (min-width: 1024px) {
  .page-services .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }
}

/* Image behavior: fill card width, natural height; no cropping */
.page-services .gallery-grid .gallery-card {
  padding: 0 !important;
}
.page-services .gallery-grid .gallery-card img {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Defensive reset against any inherited transforms/animations
   that could hide or offset images within gallery cards */
.page-services .gallery-grid .gallery-card * {
  transform: none !important;
}


/* Book page: unify calendar image neon border with image edge, color-matched */
.page-book #calendar-visual {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.page-book #calendar-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 4px solid rgb(102,0,255); /* electric violet */
  box-shadow:
    0 0 22px rgba(102,0,255,0.85),
    0 0 70px rgba(102,0,255,0.50),
    0 0 140px rgba(102,0,255,0.35);
}


/* Contact page: map sits directly on background, aligned with form top */
.page-contact .map-col {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
  flex: 0 1 520px;
  width: 100%;
  max-width: 520px;
  align-self: flex-start;
}
.page-contact .map-col .map-container,
.page-contact .map-col iframe {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 420px !important;
}
.page-contact .service-row {
  align-items: flex-start !important;
}

.page-book .service-row { align-items: center !important; }

.page-contact .map-container { margin-top: 0 !important; }


/* Scoped: ensure symmetric spacing around Calendly section on Book page */
.page-book .section.brand-gradient.animate {
  margin-top: 0 !important;
}


/* === Contact Page Grid (v21 update) === */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form-card, .contact-map-card {
  padding: 1.5rem;
}

.contact-form label {
  display: block;
  margin: 0.5rem 0 0.25rem;
  font-weight: 500;
}

.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-surface-2, #2a2a2a);
  background: var(--color-surface-1, #121212);
  color: var(--color-white, #fff);
  outline: none;
  margin-bottom: 0.75rem;
}

.contact-form input:focus, .contact-form textarea:focus {
  box-shadow: 0 0 0 2px rgba(0, 153, 255, 0.35);
}

.map-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 1rem;
  overflow: hidden;
}

.map-iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}


/* Ensure heroes fill the window without extra top padding from title-band */
.hero.title-band { padding-top: 0 !important; }