/*
  ============================================================
  AETHER MECHANIC - Main Stylesheet
  ============================================================
  File:         css/style.css
  Description:  All visual styling for the Aether Mechanic
                website. Fully responsive (mobile-first design).

  TABLE OF CONTENTS:
    1.  CSS Custom Properties (Variables)
    2.  Reset & Base Styles
    3.  Typography
    4.  Layout Utilities
    5.  Navigation Bar
    6.  Mobile Navigation (Hamburger Menu)
    7.  Hero Section (Home Page)
    8.  Page Hero Banner (Inner Pages)
    9.  Welcome Banner
    10. Content Sections
    11. Content Cards
    12. Offering Cards
    13. Testimonial Cards
    14. FAQ Accordion
    15. Footer
    16. Animations & Keyframes
    17. Media Queries (Responsive Breakpoints)
  ============================================================
*/


/* ============================================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   Edit these to globally change colors, fonts, and spacing.
   ============================================================ */
:root {
  /* --- Color Palette --- */
  --color-bg-deep:      #030d14;          /* Deepest background (near-black teal) */
  --color-bg-mid:       #071c2a;          /* Mid-depth background */
  --color-bg-card:      rgba(5, 25, 40, 0.80); /* Card/panel background */
  --color-teal-bright:  #12c2c2;          /* Primary accent (bright teal) */
  --color-teal-mid:     #0a8a8a;          /* Secondary accent (mid teal) */
  --color-teal-dark:    #0d5f6e;          /* Subtle teal for borders */
  --color-teal-banner:  #0d6e7a;          /* Welcome banner background */
  --color-text-primary: #e8f4f8;          /* Main body text (off-white) */
  --color-text-muted:   #a0c4d4;          /* Muted / secondary text */
  --color-text-heading: #ffffff;          /* Heading text */
  --color-gold:         #c9a84c;          /* Accent gold for highlights */
  --color-star:         rgba(255,255,255,0.8); /* Star particle color */

  /* --- Typography --- */
  --font-display:  'Marhey', cursive;             /* Headings, logo */
  --font-nav:      'Arial Black', Arial, sans-serif; /* Navigation links */
  --font-body:     'Marhey', cursive;             /* Body text, UI */

  /* --- Sizing & Spacing --- */
  --nav-height:         70px;   /* Fixed navigation bar height */
  --hero-height:        auto;   /* MOBILE FIX: was 70vh — now auto so content never clips */
  --hero-min-height:    70vh;   /* Minimum height on large screens preserved */
  --page-hero-height:   20vh;   /* Shorter hero for inner pages */
  --container-max:      960px;  /* Max content width */
  --border-radius:      8px;    /* Standard card border radius */
  --border-radius-lg:   16px;   /* Larger radius for big cards */

  /* --- Transitions --- */
  --transition-fast:    0.2s ease;
  --transition-mid:     0.4s ease;
  --transition-slow:    0.7s ease;
}


/* ============================================================
   2. RESET & BASE STYLES
   Normalize browser defaults for consistency.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Smooth scrolling for anchor links (e.g., scroll-down arrow) */
  background-color: var(--color-bg-deep);
  scroll-behavior: smooth;
  font-size: 16px;
  /* overflow-x on html instead of body — prevents fixed positioning bug */
  overflow-x: hidden;
}

body {
  background-color: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  min-height: 100vh;
  /* MOBILE FIX: compensate for fixed nav so content is never hidden beneath it */
  padding-top: var(--nav-height);
}

/* Remove default list styling */
ul, ol {
  list-style: none;
}

/* Remove default link styling */
a {
  color: inherit;
  text-decoration: none;
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Blockquote defaults */
blockquote {
  font-style: normal;
}

/* Canvas element should not interfere with layout */
canvas {
  display: block;
}


/* ============================================================
   3. TYPOGRAPHY
   Global heading and text styles.
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  line-height: 1.2;
  letter-spacing: 0.03em;
}

p {
  margin-bottom: 1.2em;
}

p:last-child {
  margin-bottom: 0;
}

cite {
  font-style: normal;
}


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* ============================================================
   5. NAVIGATION BAR
   Fixed top bar with logo left, links right.
   Becomes opaque on scroll (handled via JS class .scrolled).
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* MOBILE FIX: raised to 1100 to sit above hero canvas (z-index:1) and main content (z-index:2) */
  z-index: 1100;
  /* Starts transparent; becomes semi-opaque on scroll */
  background: rgba(3, 13, 20, 0.0);
  border-bottom: 1px solid transparent;
  transition: background var(--transition-mid), border-color var(--transition-mid);
}

/* Class added by JS when user scrolls down */
.site-header.scrolled {
  background: rgba(3, 13, 20, 0.95);
  border-bottom-color: var(--color-teal-dark);
  backdrop-filter: blur(10px);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Brand / Logo --- */
.nav-brand {
  flex-shrink: 0;
}

.brand-link {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 369
  ;
  color: var(--color-text-heading);
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
}

.brand-link:hover {
  color: var(--color-teal-bright);
}

/* --- Navigation Menu (desktop) --- */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  font-family: var(--font-nav);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--color-text-primary);
  padding: 0.4rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--color-teal-bright);
  outline: none;
}

/* Active page link gets a border box (matches reference screenshot) */
.nav-link.active {
  border-color: var(--color-text-primary);
  color: var(--color-text-heading);
}

.nav-link.active:hover {
  border-color: var(--color-teal-bright);
  color: var(--color-teal-bright);
}


/* ============================================================
   6. MOBILE NAVIGATION (HAMBURGER MENU)
   Hidden on desktop, shown on mobile. Managed by JS.
   ============================================================ */

/* Hamburger button — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  /* MOBILE FIX: raised to 1300 so button stays tappable above the open menu panel */
  z-index: 1300;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: 2px;
  transition: transform var(--transition-mid), opacity var(--transition-mid);
}

/* Animate hamburger to X when menu is open */
.nav-toggle.open .hamburger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.nav-toggle.open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open .hamburger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}


/* ============================================================
   7. HERO SECTION (HOME PAGE)
   Full viewport-height opening panel with star background.
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  /* MOBILE FIX: auto height so all subtitle lines are visible; min-height keeps desktop look */
  height: var(--hero-height);
  min-height: var(--hero-min-height);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* MOBILE FIX: was overflow:hidden — caused text clipping on small screens */
  overflow: visible;
  background: radial-gradient(ellipse at center, #0d3a4a 0%, #041018 60%, var(--color-bg-deep) 100%);
  /* MOBILE FIX: bottom padding so content breathes above welcome banner */
  padding-bottom: 2rem;
}

/* Star canvas fills the hero */
.star-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body > .star-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* MOBILE FIX: z-index 0 (was 1) — ensures canvas never intercepts touch events on nav/menu */
  z-index: 0;
  pointer-events: none;
}
main,
.site-footer {
  position: relative;
  /* MOBILE FIX: z-index 2 keeps content above the z-index:0 star canvas */
  z-index: 2;
}

/* site-header keeps its own z-index:1100 from the .site-header rule above —
   do NOT include it in the z-index:2 group or it collapses the stacking context
   and the nav-toggle / nav-menu z-indexes become ineffective on mobile */
/* Glowing orb overlays for depth effect */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-glow--center {
  width: 300px;
  height: 200px;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(12,140,140,0.1) 0%, transparent 70%);
}
/* Add this AFTER the existing .hero-glow--center rule */
.page-hero .hero-glow--center {
  background: radial-gradient(ellipse, rgba(12,140,140,0.33) 0%, transparent 70%);
}

.hero-glow--bottom {
  width: 100%;
  height: 200px;
  bottom: 0;
  left: 0;
  border-radius: 0;
  background: linear-gradient(to top, rgba(13,110,122,0.08), transparent);
}

/* Hero text content */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  /* MOBILE FIX: body padding-top already clears the nav bar;
     only add a small top breathing room here instead of double-counting nav height */
  padding: 2rem 1.5rem 0;
  animation: fadeInUp 1.2s ease both;
}

.hero-title {
  font-size: clamp(3.5rem, 3rem, 5rem);
  font-weight: 369;
  color: var(--color-text-heading);
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 60px rgba(18, 194, 194, 0.3);
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 2.5vw, 1.3rem);
  font-weight: 369;
  color: var(--color-text-muted);
  max-width: 680px;
  margin: 0 auto 1.2rem;
  letter-spacing: 0.02em;
  padding-left: 1.5rem;
  text-align: left;
  position: relative;
}
.hero-subtitle::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

.hero-subtitle--italic {
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
}

/* Scroll down chevron */
.scroll-arrow {
  display: inline-block;
  color: var(--color-text-muted);
  font-size: 2rem;
  animation: bounce 2.5s ease-in-out infinite;
  transition: color var(--transition-fast);
}

.scroll-arrow:hover {
  color: var(--color-teal-bright);
}

.arrow-icon {
  display: block;
  line-height: 1;
}


/* ============================================================
   8. PAGE HERO BANNER (INNER PAGES)
   Shorter hero used on all pages except Home.
   ============================================================ */
.page-hero {
  position: relative;
  width: 100%;
  height: var(--page-hero-height);
  min-height: 240px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
  background: transparent;
  /* MOBILE FIX: removed margin-top/padding-top nav compensation —
     body padding-top already handles this; double-adding created excess whitespace */
  margin-top: 0;
  padding-top: 0;
}

.page-hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 1.8rem 1.5rem 0;
  animation: fadeInUp 1.2s ease both;
}

.page-title {
  font-size: clamp(3.5rem, 3rem, 5rem);
  font-weight: 369;
  color: var(--color-text-heading);
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 40px rgba(18, 194, 194, 0.3);
}

.page-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: var(--color-text-muted);
  font-style: italic;
  letter-spacing: 0.05em;
}


/* ============================================================
   9. WELCOME BANNER
   Dark teal strip below the hero (Home page).
   ============================================================ */
.welcome-banner {
  background-color: var(--color-teal-banner);
  padding: 1.4rem 2rem;
  text-align: center;
}

.welcome-text {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-primary);
  letter-spacing: 0.03em;
  margin: 0;
  max-width: 800px;
  margin: 0 auto;
}


/* ============================================================
   10. CONTENT SECTIONS
   Standard page section wrapper with top/bottom padding.
   ============================================================ */
.content-section {
  padding: 1% 0 0.1rem;
}

/* Inner pages: add top padding to compensate for fixed nav
   (page-hero already handles this, but standalone sections may not) */
.page-inner main > .content-section:first-child {
  padding-top: 2rem;
}

.content-text {
  font-size: 1rem;
  font-family: Helvetica, Arial, sans-serif;
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: 1.5rem;
}


/* ============================================================
   11. CONTENT CARDS
   Frosted glass-style dark panels with teal glow border.
   ============================================================ */
.content-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-teal-dark);
  border-radius: var(--border-radius-lg);
  padding: 2.5rem 2.5rem;
  margin-bottom: 2rem;
}

/* Glowing card variant — subtle teal glow on hover */
.glow-card {
  transition: border-color var(--transition-mid), box-shadow var(--transition-mid);
  box-shadow: 0 0 30px rgba(12, 140, 140, 0.08);
}

.glow-card:hover {
  border-color: var(--color-teal-mid);
  box-shadow: 0 0 50px rgba(12, 194, 194, 0.15);
}

.card-title {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 400;
  color: var(--color-teal-bright);
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-teal-dark);
  text-align: center;
}


/* ============================================================
   12. OFFERING CARDS
   Individual offering items on the Offerings page.
   ============================================================ */
.offering-card 
  


/* ============================================================
   13. TESTIMONIAL CARDS
   Client quote styling with large decorative quotation mark.
   ============================================================ */
.testimonial-card {
  position: relative;
  padding-top: 3rem;
}

/* Large decorative opening quote mark */
.testimonial-quote-mark {
  position: absolute;
  top: 1rem;
  left: 2rem;
  font-family: Georgia, serif;
  font-size: 4rem;
  color: var(--color-teal-mid);
  line-height: 1;
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.testimonial-quote {
  margin-bottom: 1.5rem;
}

.testimonial-quote p {
  font-family: Helvetica, Arial, sans-serif;  /* ← add this line */
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.85;
  margin-bottom: 1rem;
}

.testimonial-attribution {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-teal-bright);
  letter-spacing: 0.06em;
  text-align: right;
}


/* ============================================================
   14. FAQ ACCORDION
   Clickable question/answer pairs that expand on click.
   JS adds/removes .open class on .faq-item.
   ============================================================ */
.faq-item {
  border-bottom: 1px solid var(--color-teal-dark);
  padding: 1.5rem 0;
  cursor: pointer;
  user-select: none;
}

.faq-item:first-child {
  border-top: 1px solid var(--color-teal-dark);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.faq-item:hover .faq-question,
.faq-item.open .faq-question {
  color: var(--color-teal-bright);
}

/* Plus/Minus toggle icon */
.faq-icon {
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--color-teal-mid);
  transition: transform var(--transition-mid);
  line-height: 1;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

/* Answer panel — hidden by default, shown when .open */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.4s ease, padding 0.3s ease;
  padding-top: 0;
}

.faq-item.open .faq-answer {
  max-height: 800px;   /* Large enough to accommodate any answer */
  opacity: 1;
  padding-top: 1.2rem;
}

.faq-answer p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.97rem;
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: 0.8rem;
}

/* Keyboard focus style for accessibility */
.faq-item:focus {
  outline: 2px solid var(--color-teal-bright);
  outline-offset: 4px;
  border-radius: 4px;
}


/* ============================================================
   15. FOOTER
   Simple centered footer strip.
   ============================================================ */
.site-footer {
  background: rgba(3, 10, 18, 0.95);
  border-top: 1px solid var(--color-teal-dark);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-text-heading);
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.footer-tagline {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 0.4rem;
}

.footer-copy {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0.2rem 0;
}


/* ============================================================
   16. ANIMATIONS & KEYFRAMES
   ============================================================ */

/* Fade in + slide up for hero content */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bounce animation for scroll-down arrow */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(10px); }
}


/* Bio two-column grid — stacks on mobile */
.about-bio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}


/* ============================================================
   17. MEDIA QUERIES (RESPONSIVE BREAKPOINTS)
   
   Mobile-first approach:
     - Base styles apply to all screen sizes
     - Larger breakpoints override where needed
   
   Breakpoints:
     768px  — Tablet / large mobile
     480px  — Small mobile
   ============================================================ */

/* --- Tablet and smaller (max 768px) --- */
@media (max-width: 768px) {

  /* Show hamburger button */
  .nav-toggle {
    display: flex;
  }

  /* Mobile nav menu: full-width dropdown, hidden by default */
  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(3, 13, 20, 0.98);
    border-bottom: 1px solid var(--color-teal-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* MOBILE FIX: Safari support */
    /* MOBILE FIX: was translateX(100%) — slides in from right;
       kept as-is but z-index raised to 1200 so it renders above hero canvas and all content */
    transform: translateX(100%);
    transition: transform var(--transition-mid);
    padding: 1rem 0;
    z-index: 1200; /* MOBILE FIX: was missing — menu was hidden behind hero layers */
  }

  /* JS adds .open class to show the menu */
  .nav-menu.open {
    transform: translateX(0);
  }

  /* Mobile nav links: full-width touch targets */
  .nav-link {
    display: block;
    padding: 1rem 2rem;
    font-size: 0.9rem;
    border: none;
    border-bottom: 1px solid rgba(13, 95, 110, 0.3);
    border-radius: 0;
  }

  .nav-link.active {
    border: none;
    border-bottom: 1px solid rgba(13, 95, 110, 0.3);
    background: rgba(18, 194, 194, 0.06);
    color: var(--color-teal-bright);
  }

  .nav-link:last-child {
    border-bottom: none;
  }

  /* Adjust hero on mobile */
  .hero-title {
    font-size: 2.4rem;
  }

  /* MOBILE FIX: ensure subtitle text wraps cleanly and is fully readable */
  .hero-subtitle {
    font-size: 1rem;
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 0.5rem;
  }

  /* Reduce card padding on mobile */
  .content-card {
    padding: 1.75rem 1.5rem;
  }

  /* MOBILE FIX: was "3rem 0 4rem" — excessive bottom padding caused footer
     to appear to overlap content on short pages; reduced to sensible values */
  .content-section {
    padding: 2rem 0 2rem;
  }

  /* Testimonial quote mark slightly smaller on mobile */
  .testimonial-quote-mark {
    font-size: 3rem;
  }

  /* MOBILE FIX: tighten welcome banner padding on small screens */
  .welcome-banner {
    padding: 1.2rem 1rem;
  }

  /* Stack about bio columns on mobile */
  .about-bio-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* --- Small mobile (max 480px) --- */
@media (max-width: 480px) {

  .navbar {
    padding: 0 1.2rem;
  }

  .content-card {
    padding: 1.5rem 1.2rem;
  }

  /* MOBILE FIX: further reduce hero title on very small screens */
  .hero-title {
    font-size: 1.9rem;
  }

  .hero-subtitle {
    font-size: 0.92rem;
  }

  .page-title {
    font-size: 2rem;
  }
}


/* ============================================================
   18. CONTACT FORM STYLES
   Styles for the contact page form elements.
   ============================================================ */

/* Inline link (used in contact intro text) */
.inline-link {
  color: var(--color-teal-bright);
  text-decoration: underline;
  text-decoration-color: rgba(18, 194, 194, 0.4);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.inline-link:hover {
  color: #fff;
  text-decoration-color: rgba(255,255,255,0.5);
}

/* Intro card — slightly less padding at top */
.contact-intro-card {
  margin-bottom: 1.5rem;
}

/* Form card */
.contact-form-card {
  margin-bottom: 0;
}

/* Success / Error banner */
.form-message {
  display: none;
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
}
.form-message--success {
  display: block;
  background: rgba(18, 194, 130, 0.12);
  border: 1px solid rgba(18, 194, 130, 0.4);
  color: #7ff5c2;
}
.form-message--error {
  display: block;
  background: rgba(220, 80, 80, 0.12);
  border: 1px solid rgba(220, 80, 80, 0.4);
  color: #f5a0a0;
}

/* Honeypot — visually hidden from real users */
.honeypot-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  
}

/* Two-column row on desktop, stacks on mobile */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* Individual form field wrapper */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.4rem;
  position: relative;
}

/* Label */
.form-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

/* Required asterisk */
.required-star {
  color: var(--color-teal-bright);
  margin-left: 2px;
}

/* Input, select, textarea — shared base styles */
.form-input {
  background: rgba(3, 18, 30, 0.7);
  border: 1px solid var(--color-teal-dark);
  border-radius: var(--border-radius);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.97rem;
  padding: 0.75rem 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  outline: none;
  width: 100%;
}

.form-input::placeholder {
  color: rgba(160, 196, 212, 0.35);
}

.form-input:focus {
  border-color: var(--color-teal-bright);
  box-shadow: 0 0 0 3px rgba(18, 194, 194, 0.12);
  background: rgba(3, 25, 40, 0.85);
}

/* Error state */
.form-input.input-error {
  border-color: #e07a7a;
  box-shadow: 0 0 0 3px rgba(220, 80, 80, 0.1);
}

/* Select dropdown — custom arrow */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230a8a8a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Select options (browser-rendered, limited styling) */
.form-select option {
  background: #071c2a;
  color: var(--color-text-primary);
}

/* Textarea */
.form-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.7;
}

/* Inline error message */
.form-error {
  display: block;
  color: #f5a0a0;
  font-size: 0.8rem;
  margin-top: 0.35rem;
  min-height: 1em;
}

/* Character counter */
.char-counter {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
  transition: color var(--transition-fast);
}

/* Submit row */
.form-submit-row {
  margin-bottom: 0;
  margin-top: 0.5rem;
}

/* Submit button */
.btn-submit {
  background: transparent;
  border: 1px solid var(--color-teal-bright);
  border-radius: var(--border-radius);
  color: var(--color-teal-bright);
  cursor: pointer;
  font-family: var(--font-nav);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 0.85rem 2.5rem;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  text-transform: uppercase;
}

.btn-submit:hover:not(:disabled) {
  background: var(--color-teal-bright);
  color: var(--color-bg-deep);
  box-shadow: 0 0 20px rgba(18, 194, 194, 0.3);
}

.btn-submit:focus {
  outline: 2px solid var(--color-teal-bright);
  outline-offset: 3px;
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive: stack form row on mobile */
@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* Offering bullet list */
.offering-list {
  list-style: none;
  font-family: Helvetica, Arial, sans-serif;
  padding-left: 1rem;
  margin-bottom: 1.2rem;
}

.offering-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.offering-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-text-primary);
}

/* lucia-pricing bullet list */
.lucia-pricing {
  list-style: none;
  padding-left: 1rem;
  margin-bottom: 1.2rem;
}

.lucia-pricing li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1.7;
}

.lucia-pricing li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-text-primary);
}


/* ── Offering Two-Column Layout ── */
.offering-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.offering-col-left,
.offering-col-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Image placeholder — swap for <img> when ready */
.offering-img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(13, 95, 110, 0.2);
  border: 2px dashed var(--color-teal-dark);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

/* Booking button */
.offering-btn-row {
  text-align: center;
  margin-top: 1.5rem;
}

.offering-btn {
  display: inline-block;
  background: var(--color-teal-mid);
  color: var(--color-text-heading);
  padding: 0.85rem 2rem;
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.offering-btn:hover {
  background: var(--color-teal-bright);
  color: var(--color-bg-deep);
  box-shadow: 0 0 20px rgba(18, 194, 194, 0.3);
}

/* Stack to single column on mobile */
@media (max-width: 768px) {
  .offering-two-col {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ABOUT PAGE STYLES
   ============================================================ */

/* Column heading — underline, not bold */
.about-col-heading {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-text-primary);
  text-decoration: underline;
  margin-bottom: 1rem;
}

/* Competence list — native bullets, white */
.about-competence-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.about-competence-list li {
  line-height: 1.6;
  color: var(--color-text-primary);
}

.about-competence-list li::marker {
  color: var(--color-text-primary);
}

/* Links — white with underline, teal on hover */
.about-competence-link {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: rgba(232, 244, 248, 0.4);
  transition: color var(--transition-fast);
}

.about-competence-link:hover {
  color: var(--color-teal-bright);
  text-decoration-color: var(--color-teal-bright);
}

/* Italic note beneath each link */
.about-competence-note {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 0.15rem;
}
.about-photo-caption {
  margin-bottom: 0.15rem;
}