/*
  ============================================================
  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:        70vh;  /* Full-screen hero */
  --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;
}

/* 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%;
  z-index: 1000;
  /* 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;
  z-index: 1100;
}

.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%;
  height: var(--hero-height);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #0d3a4a 0%, #041018 60%, var(--color-bg-deep) 100%);
}

/* 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%;
  z-index: 1;
  pointer-events: none;
}
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}
/* 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;
  padding: calc(var(--nav-height) + 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;
  /* Push content below fixed nav */
  margin-top: 0;
  padding-top: var(--nav-height);
  
}

.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); }
}


/* ============================================================
   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);
    /* Hidden offscreen to the right by default */
    transform: translateX(100%);
    transition: transform var(--transition-mid);
    padding: 1rem 0;
  }

  /* 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;
  }

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

  /* Reduce section padding on mobile */
  .content-section {
    padding: 3rem 0 4rem;
  }

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

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

  .navbar {
    padding: 0 1.2rem;
  }

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

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

  .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;
}