/* ==========================================================================
   ZETA ONE - Dark Brutalist Theme
   Inspired by Zone BMS / dbrand aesthetic
   ========================================================================== */

:root {
  /* Brand */
  --accent: #ba232e;
  --accent-hover: #d42a36;
  --accent-muted: #8a1a22;

  /* Core darks */
  --black: #000000;
  --black-card: #0a0a0a;
  --black-elevated: #141414;
  --black-muted: #1a1a1a;

  /* Core lights */
  --white: #ffffff;
  --white-page: #f5f5f5;
  --white-muted: #fafafa;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;
  --text-dark: #0a0a0a;

  /* Borders */
  --border: #262626;
  --border-strong: #404040;

  /* Status */
  --green: #22c55e;
  --blue: #3b82f6;
  --yellow: #eab308;
  --red: #ef4444;

  /* Typography */
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* Header */
  --header-height: 64px;

  /* Timing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration: 0.6s;
  --duration-fast: 0.3s;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}
a:hover { color: var(--accent-hover); }

::selection {
  background: var(--accent);
  color: var(--white);
}

/* ==========================================================================
   Skip Link
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  z-index: 9999;
}
.skip-link:focus { top: 0; color: var(--white); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--black);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.site-header.scrolled {
  /* No backdrop-filter: it makes .site-header a containing block for the
     position:fixed mobile nav-menu, which broke the hamburger when scrolled.
     A near-opaque background gives the same effect without that side effect. */
  background: rgba(0, 0, 0, 0.97);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo img {
  height: 36px;
  width: auto;
}

.logo-text {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.logo-accent {
  color: var(--accent);
  font-weight: 700;
}

/* Navigation */
.main-nav {
  display: flex;
  align-items: center;
}

/* Mobile menu overlay is hidden on desktop (desktop uses the inline .nav-menu) */
.mobile-nav { display: none; }

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: all var(--duration-fast) ease;
}

.nav-link:hover {
  color: var(--white);
  border-bottom-color: var(--accent);
}

.dropdown-arrow { transition: transform var(--duration-fast) ease; }
.nav-item.has-dropdown:hover .dropdown-arrow { transform: rotate(180deg); }

/* Dropdown */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  /* Sit above the header scroll-progress bar (which is absolute at the header's
     bottom edge, exactly where the dropdown opens). */
  z-index: 20;
  min-width: 220px;
  background: var(--black-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  list-style: none;
  padding: var(--space-xs) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--duration-fast) ease;
}

.nav-item.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-left: 2px solid transparent;
  transition: all var(--duration-fast) ease;
}

.dropdown-menu a:hover {
  color: var(--white);
  background: var(--black-elevated);
  border-left-color: var(--accent);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.search-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-sm);
  transition: color var(--duration-fast) ease;
}
.search-toggle:hover { color: var(--white); }

.header-cta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--accent);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--accent);
  transition: all var(--duration-fast) ease;
}
.header-cta:hover {
  background: var(--accent-hover);
  color: var(--white);
}

/* Header progress bar */
.header-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  width: 0%;
  /* Keep below the open dropdown menu (z-index: 20) so the red line never
     crosses in front of the services list. */
  z-index: 1;
  transition: width 0.1s linear;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: var(--space-sm) 10px;
  position: relative;
  width: 40px;
  height: 36px;
}

.hamburger {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--white);
  position: relative;
  transition: background var(--duration-fast) ease;
}
.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--white);
  left: 0;
  transition: all var(--duration-fast) ease;
}
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .hamburger { background: transparent; }
.nav-toggle[aria-expanded="true"] .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Search Overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-fast) ease;
}
.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-container {
  width: 100%;
  max-width: 640px;
  padding: var(--space-lg);
}

.search-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.search-input-wrap {
  display: flex;
  border: 1px solid var(--border-strong);
  border-bottom: 2px solid var(--accent);
}

.search-input {
  flex: 1;
  padding: var(--space-md);
  font-family: var(--font-sans);
  font-size: 1.25rem;
  background: var(--black-card);
  color: var(--white);
  border: none;
  outline: none;
}
.search-input::placeholder { color: var(--text-muted); }

.search-submit {
  padding: var(--space-md) var(--space-lg);
  background: var(--accent);
  border: none;
  color: var(--white);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}
.search-submit:hover { background: var(--accent-hover); }

.search-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-sm);
  transition: all var(--duration-fast) ease;
}
.search-close:hover {
  border-color: var(--accent);
  color: var(--white);
}

/* ==========================================================================
   Main Content
   ========================================================================== */

#content {
  margin-top: var(--header-height);
}

/* ==========================================================================
   Scroll-Reveal Animations
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

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

/* ==========================================================================
   Hero Slider (CMS Block Override)
   ========================================================================== */

.hero-slider {
  position: relative;
  height: calc(100vh - var(--header-height));
  min-height: 500px;
  overflow: hidden;
}

.hero-slider .swiper {
  height: 100%;
}

.hero-slider .swiper-slide {
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-slider .swiper-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.slide-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: var(--space-xl);
}

.slide-heading {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.slide-heading .accent { color: var(--accent); }

.slide-subheading {
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 2vw, 1.125rem);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 560px;
  margin-bottom: var(--space-lg);
}

.slide-text {
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 2vw, 1.125rem);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 560px;
}

.hero-slider .swiper-pagination {
  bottom: var(--space-xl) !important;
}

.hero-slider .swiper-pagination-bullet {
  width: 24px;
  height: 2px;
  border-radius: 0;
  background: var(--text-muted);
  opacity: 1;
  transition: all var(--duration-fast) ease;
}

.hero-slider .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 48px;
}

.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
  color: var(--white);
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.5);
  transition: all var(--duration-fast) ease;
}

.hero-slider .swiper-button-prev:hover,
.hero-slider .swiper-button-next:hover {
  border-color: var(--accent);
  background: var(--accent);
}

.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after {
  font-size: 16px;
}

.scroll-indicator {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: pulse-down 2s ease-in-out infinite;
  text-decoration: none;
}

.scroll-indicator:hover { color: var(--accent); }

@keyframes pulse-down {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 0.5; }
}

/* ==========================================================================
   Section Titles (used across blocks)
   ========================================================================== */

.section-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.section-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--accent);
}

.section-title {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: var(--space-md);
}

.section-desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 600px;
}

/* ==========================================================================
   CMS Content Blocks
   ========================================================================== */

.text-block,
.heading-block,
.image-block,
.gallery-block,
.video-block,
.map-block,
.contact-form-block,
.booking-block,
.columns-block,
.info-box-block,
.faq-block,
.about-section,
.pricing-cards {
  padding: var(--space-2xl) var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.block-heading {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-bottom: var(--space-md);
}

h2.block-heading { font-size: 1.75rem; }
h3.block-heading { font-size: 1.25rem; }

.text-block p,
.text-block li {
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: 0.9375rem;
}

/* Inline text links only, NOT .btn buttons (buttons kept red bg + white text;
   without :not(.btn) the button text went red on hover/tap and vanished). */
.text-block a:not(.btn) { border-bottom: 1px solid var(--accent); }
.text-block a:not(.btn):hover { color: var(--accent-hover); }

/* Heading Block */
.heading-block {
  border-top: 1px solid var(--border);
}

/* Image Block */
.image-block img {
  width: 100%;
  border: 1px solid var(--border);
}

.image-caption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: var(--space-sm);
  letter-spacing: 0.05em;
}

/* Video & Map */
.video-wrapper,
.map-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
}

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

.video-title,
.map-title {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

/* Gallery */
.gallery-title {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-lg);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px;
}

.gallery-item {
  display: block;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration) var(--ease-out);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(186, 35, 46, 0);
  transition: background var(--duration-fast) ease;
}

.gallery-item:hover::after {
  background: rgba(186, 35, 46, 0.15);
}

/* Columns */
.columns-grid {
  display: grid;
  gap: var(--space-lg);
}

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

.column-title {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

/* Info Boxes */
.info-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.info-box {
  padding: var(--space-xl);
  background: var(--black-card);
  border: 1px solid var(--border);
  border-left: 2px solid transparent;
  margin: -0.5px;
  transition: all var(--duration-fast) ease;
}

/* Info boxes are static info cards, not clickable. No hover or "selected"
   state, and (the real fix for mobile) no tap-highlight or text-selection, so a
   tap can't make a card look "selected". */
.info-box, .column-item {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.info-box-title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.info-box h6 {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.info-box p {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* FAQ Accordion */
.faq-title {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-lg);
}

.faq-accordion {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-md) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  transition: color var(--duration-fast) ease;
}

.faq-question:hover { color: var(--accent); }

.faq-icon {
  transition: transform var(--duration-fast) ease;
  color: var(--accent);
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 0 var(--space-lg);
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* Contact Form */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.form-title {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-lg);
}

.form-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--black-card);
  color: var(--white);
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  transition: border-color var(--duration-fast) ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
}

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

.alert {
  padding: var(--space-md);
  border: 1px solid;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: var(--space-md);
}

.alert-success {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--green);
  color: var(--green);
}

.alert-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--red);
  color: var(--red);
}

/* Booking */
.booking-block {
  background: var(--black-card);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border);
}

.booking-title {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--white);
  text-decoration: none;
}

.btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
}

.btn-outline:hover {
  background: var(--accent);
  color: var(--white);
}

.btn-large {
  padding: var(--space-md) var(--space-xl);
  font-size: 0.75rem;
}

.btn-explore {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--white);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast) ease;
}
.btn-explore:hover {
  background: var(--accent-hover);
  color: var(--white);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--black);
  border-top: 1px solid var(--border);
  padding: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: var(--space-xl);
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}

.footer-logo {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--space-md);
}
.footer-logo:hover { color: var(--white); }

.footer-tagline {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-bottom: var(--space-lg);
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: var(--space-sm);
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  border-left: 2px solid transparent;
  padding-left: var(--space-sm);
  transition: all var(--duration-fast) ease;
}

.footer-links a:hover {
  color: var(--white);
  border-left-color: var(--accent);
}

.footer-contact .contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

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

.footer-contact .contact-item a {
  color: var(--text-secondary);
}
.footer-contact .contact-item a:hover {
  color: var(--white);
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all var(--duration-fast) ease;
}

.social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: var(--space-md) var(--space-lg);
}

.footer-bottom-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copyright {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.footer-legal {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  width: 44px;
  height: 44px;
  background: var(--black-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-fast) ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--black-elevated);
}

/* ==========================================================================
   Error Pages
   ========================================================================== */

.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: var(--space-xl);
}

.error-page h1 {
  font-family: var(--font-mono);
  font-size: 6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.error-page h2 {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.error-details {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--black-card);
  border: 1px solid var(--border);
  text-align: left;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

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

  .contact-layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 768px) {
  :root {
    --header-height: 56px;
  }

  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .header-cta { display: none; }

  /* Hide the inline desktop nav on mobile; use the top-level .mobile-nav overlay */
  .nav-menu { display: none; }

  .mobile-nav {
    display: block;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black);
    padding: var(--space-lg);
    border-top: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform var(--duration-fast) var(--ease-out);
    overflow-y: auto;
    z-index: 2500;
  }
  .mobile-nav.active { transform: translateX(0); }
  .mobile-nav-menu { list-style: none; margin: 0; padding: 0; }
  .mobile-nav a {
    display: block;
    padding: var(--space-md);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    border-left: 2px solid transparent;
  }
  .mobile-nav a:active { color: var(--white); border-left-color: var(--accent); }
  .mobile-nav-sub a { padding-left: var(--space-lg); color: var(--text-muted); font-size: 0.8125rem; }
  .mobile-nav-cta { margin-top: var(--space-lg); border-bottom: none; }
  .mobile-nav-cta a {
    display: inline-block;
    background: var(--accent);
    color: var(--white);
    border: none;
    padding: var(--space-md) var(--space-lg);
    font-size: 0.8125rem;
  }

  .nav-link {
    padding: var(--space-md) 0;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
    border-left: 2px solid transparent;
    padding-left: var(--space-md);
  }

  .nav-link:hover {
    border-left-color: var(--accent);
    border-bottom-color: var(--border);
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    border-top: none;
    border-left: 2px solid var(--accent);
    margin-left: var(--space-md);
    display: none;
  }

  .nav-item.has-dropdown.open .dropdown-menu {
    display: block;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .columns-2 .columns-grid,
  .columns-3 .columns-grid,
  .columns-4 .columns-grid {
    grid-template-columns: 1fr;
  }

  .hero-slider {
    height: 70vh;
    min-height: 400px;
  }

  .hero-slider .swiper-button-prev,
  .hero-slider .swiper-button-next {
    display: none;
  }

  .hero-slider .swiper-pagination {
    bottom: var(--space-lg) !important;
  }

  .slide-content {
    padding: var(--space-lg) var(--space-md);
  }

  .text-block,
  .heading-block,
  .image-block,
  .gallery-block,
  .video-block,
  .map-block,
  .contact-form-block,
  .booking-block,
  .columns-block,
  .info-box-block,
  .faq-block,
  .about-section,
  .pricing-cards {
    padding: var(--space-xl) var(--space-md);
  }

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

  .info-boxes {
    grid-template-columns: 1fr;
  }

  .about-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }

  .about-values {
    grid-template-columns: 1fr !important;
  }

  .slide-heading {
    font-size: 1.5rem;
  }

  .slide-subheading {
    font-size: 0.8125rem;
  }

  .btn-explore {
    font-size: 0.6875rem;
    padding: var(--space-sm) var(--space-md);
  }

  .section-title {
    font-size: 1.25rem;
  }

  .heading-block .block-heading {
    font-size: 1.5rem;
  }
}

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

  .slide-heading {
    font-size: 1.25rem;
  }

  .slide-content {
    padding: var(--space-md);
  }
}

/* About section layout (home page) */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: var(--space-xl) 0;
}

.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.about-value-card {
  border: 1px solid var(--border);
  padding: var(--space-lg);
  border-left: 2px solid var(--accent);
}

.about-value-card .value-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 4px;
}

.about-value-card .value-desc {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* CTA section */
.cta-section {
  border-top: 1px solid var(--border);
  padding: var(--space-xl) 0;
  text-align: center;
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  body { background: var(--white); color: var(--text-dark); }
  .site-header, .back-to-top, .search-overlay { display: none; }
  .site-footer { break-inside: avoid; }
  a { color: var(--text-dark); }
}

/* ==========================================================================
   Brand token bridge (native CMS Brand & Design editor)
   The core Brand editor sets --color-primary / --color-primary-dark (via a
   <style> injected before this sheet). Bridge them onto the brutalist accent
   so changing the brand colour in admin actually recolours the site. Falls
   back to the original red if no token is set.
   ========================================================================== */
:root {
  --accent: var(--color-primary, #ba232e);
  --accent-hover: var(--color-primary, #d42a36);
  --accent-muted: var(--color-primary-dark, #8a1a22);
  --text-primary: var(--color-text, #ffffff);
  --black: var(--color-bg, #000000);
  --black-card: var(--color-bg-alt, #0a0a0a);
  --font-sans: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  --font-mono: var(--font-heading, 'JetBrains Mono', monospace);
}

/* Non-linked "coming soon" footer item (Zone portal) */
.footer-soon { color: var(--text-muted); font-size: 0.8125rem; }

/* Anchored section headings: keep clear of the fixed header when linked to */
.heading-block[id] { scroll-margin-top: 90px; }

/* CTA bands: make the heading match the brutalist section headings (mono),
   not the default body font, so it is consistent with the rest of the site */
.zo-cta-band .text-content h2 {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--white);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  margin: 0 0 var(--space-xl);
}
.zo-cta-band .text-content p { color: var(--text-secondary); margin: 0; }
.zo-cta-band .text-content p + p { margin-top: var(--space-md); }

/* Give buttons that follow body text (e.g. the Zone portal sections) breathing room */
.text-content .zo-actions { margin-top: var(--space-xl); }

/* ==========================================================================
   Native block eyebrow numbers (were hard-coded per box before; now automatic)
   ========================================================================== */
.info-boxes { counter-reset: infobox; }
.info-box { counter-increment: infobox; }
.info-box .info-box-title::before {
  content: counter(infobox, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   Section rhythm - headings are now their own blocks, so couple a heading to
   the block that follows it and calm the overall vertical spacing (was ~160px
   gaps between a heading and its content).
   ========================================================================== */
.text-block, .heading-block, .columns-block, .info-box-block,
.contact-form-block, .about-section, .pricing-cards {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.heading-block { padding-bottom: var(--space-sm); }
.heading-block + .info-box-block,
.heading-block + .columns-block,
.heading-block + .text-block,
.heading-block + .contact-form-block,
.heading-block + .pricing-cards { padding-top: 0; }

/* ==========================================================================
   Mobile overflow safety - stop long content/words spilling past the viewport
   (the old "dogpoo on mobile" clipping). Layered after all other rules.
   ========================================================================== */
img, svg, video, iframe, canvas, table { max-width: 100%; height: auto; }
.text-content, .info-box-content, .column-content, .block-heading, .section-desc,
.slide-heading, .slide-subheading, .slide-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.text-content table { display: block; overflow-x: auto; }
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .container { width: 100%; }
  .slide-content { width: 100%; box-sizing: border-box; }
}
/* Long mono uppercase headings scale to the viewport on small screens */
@media (max-width: 560px) {
  .block-heading { font-size: clamp(1.15rem, 6vw, 1.5rem); line-height: 1.15; }
  h1.block-heading { font-size: clamp(1.4rem, 7.5vw, 1.9rem); }
}

/* ==========================================================================
   Robust reveal - the old reveal hid content with opacity:0 and only showed it
   when a JS IntersectionObserver fired. If JS/IO was slow or blocked, sections
   stayed invisible. Replace with a pure-CSS entrance animation that ALWAYS
   plays and ALWAYS ends visible. Content is never stuck hidden; reduced-motion
   users just see it immediately. (Overrides the earlier .reveal opacity rules.)
   ========================================================================== */
.reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 0;
    animation: zo-reveal-in 0.7s var(--ease-out, ease-out) forwards;
  }
  .reveal-left  { animation-name: zo-reveal-left; }
  .reveal-right { animation-name: zo-reveal-right; }
  .reveal-scale { animation-name: zo-reveal-scale; }
  .stagger-1 { animation-delay: 0.08s; }
  .stagger-2 { animation-delay: 0.16s; }
  .stagger-3 { animation-delay: 0.24s; }
  .stagger-4 { animation-delay: 0.32s; }
  .stagger-5 { animation-delay: 0.40s; }
}
@keyframes zo-reveal-in    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes zo-reveal-left  { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes zo-reveal-right { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes zo-reveal-scale { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   ZO v3 - Cohesive card system, iconography, credibility, section polish.
   Evolves the brutalist look: columns render as proper cards (they were plain
   text), info-boxes + cards share ONE hairline-grid + hover language, service
   cards get a line-icon and a link arrow, and section headings get a red
   eyebrow tab. This is the fix for "the boxes don't match the vibe".
   ========================================================================== */

/* --- Section heading eyebrow tab (consistent section markers) --- */
.heading-block h2.block-heading::before {
  content: ''; display: block; width: 34px; height: 3px;
  background: var(--accent); margin-bottom: 16px;
}
.heading-block h1.block-heading::before {
  content: ''; display: block; width: 44px; height: 3px;
  background: var(--accent); margin-bottom: 18px;
}

/* --- One card grid: columns + info-boxes share hairline separators --- */
.columns-block .columns-grid,
.info-boxes {
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.info-box { margin: 0; border: none; border-left: 2px solid transparent; }

/* --- Columns render as cards (they were borderless plain text before) --- */
.column-item {
  background: var(--black-card);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
  border-left: 2px solid transparent;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.column-icon { display: inline-flex; color: var(--accent); margin-bottom: 2px; }
.column-icon svg { width: 30px; height: 30px; }
.column-title { margin: 0; font-size: 0.9375rem; color: var(--white); }
.column-content { margin: 0; }
.column-content p { margin: 0; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.7; }
.column-content p + p { margin-top: 10px; }

/* Linked service cards */
.column-item--link { text-decoration: none; color: inherit; cursor: pointer; }
.column-item--link:hover {
  background: var(--black-elevated);
  border-left-color: var(--accent);
  transform: translateY(-3px);
}
.column-arrow {
  margin-top: auto; padding-top: 6px; display: inline-flex;
  color: var(--accent); opacity: 0.5;
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.column-arrow svg { width: 20px; height: 20px; }
.column-item--link:hover .column-arrow { opacity: 1; transform: translateX(5px); }

/* --- Info boxes share the card hover language --- */
.info-box { padding: 32px 28px; }
.info-box:hover { background: var(--black-elevated); border-left-color: var(--accent); }
.info-box .info-box-content p { font-size: 0.85rem; }

/* --- Credibility / stats band (columns w/ className "zo-stats") --- */
.zo-stats .columns-grid { background: transparent; border: none; gap: 12px; }
.zo-stats .column-item {
  background: var(--black-card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  gap: 6px; padding: 26px 24px;
}
.zo-stats .column-icon { display: none; }
.zo-stats .column-title { font-size: 1.9rem; letter-spacing: -0.01em; text-transform: none; }
.zo-stats .column-content p {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}

/* --- Tools / tech ticker (text_block w/ className "zo-tools") --- */
.zo-tools .text-content { display: block; }
.zo-tools .text-content p { margin: 0; }
/* single-line revolving ticker, framed by hairlines, faded at both edges */
.zo-marquee {
  overflow: hidden; position: relative;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.zo-marquee-track {
  display: flex; width: max-content;
  animation: zo-scroll 42s linear infinite;
}
.zo-marquee:hover .zo-marquee-track { animation-play-state: paused; }
.zo-marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.zo-tick {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary);
  white-space: nowrap;
}
.zo-sep { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); margin: 0 16px; }
@keyframes zo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .zo-marquee-track { animation: none; } }

/* --- Lead paragraph (intro under a page H1) --- */
.zo-lead .text-content p {
  font-size: 1.05rem; line-height: 1.75; color: var(--text-primary); max-width: 760px;
}

/* --- Cyber Essentials: five-control numbered list (avoids the odd-grid gap) --- */
.zo-controls { border: 1px solid var(--border); background: var(--black-card); }
.zo-control { display: flex; gap: 20px; padding: 22px 26px; border-top: 1px solid var(--border); }
.zo-control:first-child { border-top: none; }
.zo-control-n {
  font-family: var(--font-mono); color: var(--accent); font-size: 0.85rem;
  font-weight: 600; padding-top: 2px; min-width: 30px; flex-shrink: 0;
}
.zo-control-body h3 {
  font-family: var(--font-mono); font-size: 0.9rem; text-transform: uppercase;
  letter-spacing: 0.03em; margin: 0 0 6px;
}
.zo-control-body p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.65; }
@media (max-width: 640px) { .zo-control { padding: 18px 18px; gap: 14px; } }

/* --- Alternating quiet band for vertical rhythm --- */
.zo-band { background: var(--black-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

@media (max-width: 768px) {
  .column-item, .info-box { padding: 24px 20px; }
  .zo-tick, .zo-sep { font-size: 0.68rem; }
  .zo-sep { margin: 0 12px; }
}