/* 
========================================================================
  DESIGN SYSTEM & LAYOUT FRAMEWORK (REUSABLE PRODUCTION-READY TEMPLATE)
========================================================================
  This stylesheet contains the underlying structural styles, layout logic,
  typography scale, and interactive styling. Rebranding is managed via
  the CSS custom properties (variables) defined in the :root selector.
========================================================================
*/

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

/* --- DESIGN SYSTEM TOKENS (VERT OLIVE BRANDING) --- */
:root {
  /* Render native form controls (date picker, calendar icon, spinners,
     scrollbars) in the light palette by default. Overridden in dark theme
     so the date input's calendar indicator stays visible on dark fields. */
  color-scheme: light;

  /* Brand Colors — CHANAKA Palette (Baoulé Gold, Terracotta, Rich Ebony) */
  --color-primary-hue: 43;
  --color-primary-saturation: 65%;
  --color-primary-lightness: 45%; /* #BE9227 Baoulé Gold */
  --color-primary: hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness));

  --color-secondary-hue: 15;
  --color-secondary-saturation: 65%;
  --color-secondary-lightness: 48%; /* #C84B31 Terracotta Crimson */
  --color-secondary: hsl(
    var(--color-secondary-hue),
    var(--color-secondary-saturation),
    var(--color-secondary-lightness)
  );

  --color-accent-hue: 40;
  --color-accent-saturation: 85%;
  --color-accent-lightness: 55%; /* Warm Glowing Amber Gold */
  --color-accent: hsl(var(--color-accent-hue), var(--color-accent-saturation), var(--color-accent-lightness));

  /* Neutral Tones */
  --color-text: #1a1614; /* Deep Warm Ebony */
  --color-text-light: #595149; /* Warm Muted Charcoal */
  --color-bg-base: #faf8f5; /* Luxury Warm Ivory */
  --color-bg-alt: #f4efea; /* Soft Gold-Ivory Tint */
  --color-bg-dark: #12100e; /* Deep Stage Night */
  --color-border: #e6dfd5; /* Soft Warm Border */
  --color-border-dark: rgba(255, 255, 255, 0.12);

  /* Typography */
  --font-headings: "Cormorant Garamond", serif;
  --font-body: "Montserrat", sans-serif;

  /* Font Sizes */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.75rem;
  --fs-5xl: 4.75rem;

  /* Line Heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.7;

  /* Spacing (Scale based on 8px / 0.5rem) */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-8: 3rem; /* 48px */
  --space-10: 4rem; /* 64px */
  --space-12: 6rem; /* 96px */

  /* Border Radii (Minimalist, Editorial) */
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-full: 9999px;

  /* Shadows (Elevations) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 12px rgba(55, 66, 58, 0.04);
  --shadow-lg: 0 12px 24px rgba(55, 66, 58, 0.06);
  --shadow-xl: 0 20px 40px rgba(55, 66, 58, 0.08);

  /* Transitions */
  --transition-fast: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-normal: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Max Widths */
  --container-width: 1200px;
  --container-width-wide: 1440px;
}

/* --- RESET & BASE STYLES --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg-base);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* --- TYPOGRAPHY UTILITIES --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headings);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}

h1 {
  font-size: var(--fs-4xl);
  font-weight: 400;
  letter-spacing: 0.01em;
}
h2 {
  font-size: var(--fs-3xl);
  font-weight: 400;
  letter-spacing: 0.02em;
}
h3 {
  font-size: var(--fs-2xl);
  font-weight: 400;
  letter-spacing: 0.02em;
}
h4 {
  font-size: var(--fs-xl);
  font-weight: 500;
}
h5 {
  font-size: var(--fs-lg);
  font-weight: 500;
}
h6 {
  font-size: var(--fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 767px) {
  h1 {
    font-size: var(--fs-3xl);
  }
  h2 {
    font-size: var(--fs-2xl);
  }
  h3 {
    font-size: var(--fs-xl);
  }
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.text-center {
  text-align: center;
}
.color-white {
  color: #ffffff !important;
}
.color-secondary {
  color: var(--color-secondary) !important;
}
.color-accent {
  color: var(--color-accent) !important;
}

/* --- STRUCTURAL LAYOUT SYSTEM --- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-wide {
  width: 100%;
  max-width: var(--container-width-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.section-padding {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (max-width: 767px) {
  .section-padding {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
}

/* Grids */
.grid {
  display: grid;
  grid-gap: var(--space-6);
}

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

@media (max-width: 991px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Flex Alignments */
.flex-h {
  display: flex;
  flex-direction: row;
}
.flex-v {
  display: flex;
  flex-direction: column;
}
.align-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}

/* --- HEADER & NAVIGATION --- */
.header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color var(--transition-normal);
}

.header-wrapper.scrolled {
  position: fixed;
  background-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  animation: slideDown 0.4s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Top Mini Header */
.top-header {
  background-color: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--color-border-dark);
  font-size: var(--fs-xs);
  color: #ffffff;
  padding: var(--space-2) 0;
}

.top-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-header-contacts {
  display: flex;
  gap: var(--space-4);
}

.top-header-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.top-header-socials {
  display: flex;
  gap: var(--space-3);
}

.top-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.parent-portal-link {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-dark);
}

/* Main Navigation Bar */
.main-nav {
  padding: var(--space-4) 0;
  transition: padding var(--transition-normal);
}

.header-wrapper.scrolled .main-nav {
  padding: var(--space-2) 0;
}

.main-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-link img {
  height: 60px;
  width: auto;
  transition: height var(--transition-normal);
}

.header-wrapper.scrolled .logo-link img {
  height: 48px;
}

/* Navigation Links */
.nav-menu {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  font-family: var(--font-headings);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffff;
  padding: var(--space-2) 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-secondary);
  transition: width var(--transition-normal);
}

.nav-item:hover .nav-link::after {
  width: 100%;
}

/* Dropdown styling */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--color-primary);
  border-top: 3px solid var(--color-secondary);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal),
    visibility var(--transition-normal);
  z-index: 1001;
  padding: var(--space-2) 0;
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-link {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  color: #ffffff;
  border-bottom: 1px solid var(--color-border-dark);
}

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

.dropdown-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-secondary);
}

.nav-cta-btn {
  background-color: var(--color-primary);
  color: #12100e;
  font-family: var(--font-headings);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-sm);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.nav-cta-btn:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Hamburger menu button */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
}

.hamburger span {
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition:
    transform var(--transition-normal),
    opacity var(--transition-normal);
}

/* Mobile Nav Styles */
/* Breakpoint is 1099px (not 991px) because the full horizontal nav —
   six long labels + CTA + language/theme controls + wordmark — needs
   ~1100px to sit on one line; below that it wrapped to two lines. The
   drawer therefore takes over up to 1099px. */
@media (max-width: 1099px) {
  .hamburger {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100vh;
    background-color: var(--color-primary);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-12) var(--space-6);
    box-shadow: var(--shadow-xl);
    transition: right var(--transition-normal);
    z-index: 1002;
    overflow-y: auto;
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-dark);
  }

  .nav-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border-top: none;
    border-radius: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin-left: var(--space-4);
    transition: max-height var(--transition-normal);
  }

  .nav-item.active .nav-dropdown {
    max-height: 350px;
  }
}

/* --- HERO SLIDER / WRAPPER --- */
.hero-slider-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background-color: var(--color-primary);
}

.slider-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-slow),
    visibility var(--transition-slow);
  z-index: 1;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.slide-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4) contrast(1.05);
}

.slide-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 3;
  /* Contrast scrim: a left-weighted gradient (the hero copy is
     left-aligned) that guarantees white-text legibility even where the
     gown photo is bright, while fading to clear on the right so the
     dress stays visible. Sits above the image, behind the text. */
  background: linear-gradient(
    90deg,
    rgba(18, 22, 19, 0.7) 0%,
    rgba(18, 22, 19, 0.45) 35%,
    rgba(18, 22, 19, 0.12) 65%,
    rgba(18, 22, 19, 0) 100%
  );
}

.slide-content {
  color: #ffffff;
  max-width: 750px;
  animation: fadeInUp 0.8s ease forwards;
  opacity: 0;
}

.slide.active .slide-content {
  opacity: 1;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-subtitle {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
  display: block;
}

.hero-title {
  font-size: var(--fs-5xl);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-5);
  color: #ffffff;
}

.hero-desc {
  font-size: var(--fs-md);
  margin-bottom: var(--space-6);
  opacity: 0.9;
}

.hero-cta-wrap {
  display: flex;
  gap: var(--space-4);
}

@media (max-width: 575px) {
  .hero-cta-wrap {
    flex-direction: column;
  }
}

/* --- Mobile hero + top-bar refinements ---------------------------------- */
@media (max-width: 767px) {
  /* The secondary contact strip (phone / email / socials / showroom) is too
     cramped to be usable on phones; the same details live in the footer and
     the hamburger menu, so hide it here to declutter and stop it colliding
     with the hero. */
  .top-header {
    display: none;
  }
  /* A display size of fs-5xl (~76px) overflows narrow screens and, with the
     longer French strings, collides with the header. Scale the hero headline
     down. !important also overrides the inline font-size on slide 2's
     <h2 class="hero-title">. */
  .hero-title {
    font-size: var(--fs-3xl) !important;
  }
  .hero-desc {
    font-size: var(--fs-base);
  }
  /* Inner-page banner headings use an inline fs-4xl; scale down on phones so
     they don't dominate the banner or push content into the header. */
  .inner-hero h1 {
    font-size: var(--fs-3xl) !important;
  }
  /* On phones the hero copy wraps across most of the width and is
     vertically centred, so the left-weighted scrim leaves the right-hand
     text edge low-contrast. Swap to an even, slightly bottom-weighted
     scrim that covers the whole text block. */
  .slide-content-wrapper {
    background: linear-gradient(180deg, rgba(18, 22, 19, 0.4) 0%, rgba(18, 22, 19, 0.55) 100%);
  }
}

@media (max-width: 400px) {
  .hero-title {
    font-size: var(--fs-2xl) !important;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #12100e;
}

.btn-primary:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
}

.btn-secondary {
  border: 2px solid var(--color-primary);
  color: var(--color-text);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: #12100e;
  transform: translateY(-2px);
}

/* Modifier for the few contexts that are always a dark image/panel
   background regardless of the site's light/dark theme toggle
   (hero slides, the dark Concert Spotlight section, dark contact banners). */
.btn-secondary.btn-on-dark {
  border-color: #ffffff;
  color: #ffffff;
}

.btn-secondary.btn-on-dark:hover {
  background-color: #ffffff;
  color: var(--color-primary);
}

/* Slider Controls */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background-color var(--transition-fast);
}

.slider-arrow:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

.slider-arrow-prev {
  left: var(--space-5);
}
.slider-arrow-next {
  right: var(--space-5);
}

/* --- COUNTER SECTION (STATS) --- */
.stats-section {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: var(--space-6) 0;
  position: relative;
  z-index: 10;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
}

@media (max-width: 991px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.stat-item {
  padding: var(--space-5);
  text-align: center;
  border-right: 1px solid var(--color-border-dark);
}

.stat-item:last-child {
  border-right: none;
}

@media (max-width: 991px) {
  .stat-item:nth-child(2),
  .stat-item:last-child {
    border-right: none;
  }
  .stat-item:nth-child(1),
  .stat-item:nth-child(2) {
    border-bottom: 1px solid var(--color-border-dark);
  }
}

@media (max-width: 479px) {
  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--color-border-dark);
  }
  .stat-item:last-child {
    border-bottom: none;
  }
}

.stat-number {
  font-family: var(--font-headings);
  font-size: var(--fs-4xl);
  font-weight: 800;
  color: var(--color-secondary);
  margin-bottom: var(--space-2);
}

.stat-label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

/* --- SERVICES CARD SECTION --- */
.services-section {
  background-color: var(--color-bg-alt);
}

.section-header {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-10);
}

.section-tagline {
  font-family: var(--font-headings);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-secondary);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--space-2);
}

.service-card {
  background-color: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  border: 1px solid var(--color-border);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.service-img-wrapper {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.service-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.service-card:hover .service-img-wrapper img {
  transform: scale(1.05);
}

.service-card-content {
  padding: var(--space-5);
}

.service-card-title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-3);
}

.service-card-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
  line-height: var(--lh-normal);
}

.service-card-link {
  font-family: var(--font-headings);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.service-card-link::after {
  content: "→";
  transition: transform var(--transition-fast);
}

.service-card:hover .service-card-link::after {
  transform: translateX(4px);
}

/* --- FACILITIES HIGHLIGHTS --- */
.facilities-section {
  background-color: var(--color-bg-base);
}

.facility-masonry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--space-4);
}

.facility-tile {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 250px;
  box-shadow: var(--shadow-sm);
}

.facility-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.tile-span-8 {
  grid-column: span 8;
}
.tile-span-4 {
  grid-column: span 4;
}
.tile-span-6 {
  grid-column: span 6;
}

@media (max-width: 767px) {
  .tile-span-8,
  .tile-span-4,
  .tile-span-6 {
    grid-column: span 12;
  }
}

.facility-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(1, 16, 46, 0.8) 0%, rgba(1, 16, 46, 0.2) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  color: #ffffff;
  transition: background-color var(--transition-normal);
}

.facility-tile:hover .facility-overlay {
  background: linear-gradient(0deg, rgba(1, 16, 46, 0.95) 0%, rgba(1, 16, 46, 0.4) 100%);
}

.facility-title {
  color: #ffffff;
  margin-bottom: var(--space-1);
}

.facility-desc {
  font-size: var(--fs-xs);
  opacity: 0.8;
}

/* --- MISSION / ACCORDION --- */
.mission-section {
  background-color: var(--color-primary);
  color: #ffffff;
}

.mission-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-gap: var(--space-10);
  align-items: center;
}

@media (max-width: 991px) {
  .mission-split {
    grid-template-columns: 1fr;
  }
}

.mission-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 4px solid rgba(255, 255, 255, 0.1);
}

/* Accordion layout */
.value-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.accordion-item {
  border-bottom: 1px solid var(--color-border-dark);
  padding-bottom: var(--space-3);
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  cursor: pointer;
}

.accordion-title {
  font-family: var(--font-headings);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: #ffffff;
}

.accordion-icon {
  width: 24px;
  height: 24px;
  position: relative;
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  background-color: var(--color-secondary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.accordion-icon::before {
  width: 14px;
  height: 2px;
}

.accordion-icon::after {
  width: 2px;
  height: 14px;
  transition: transform var(--transition-normal);
}

.accordion-item.active .accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.accordion-content p {
  padding-top: var(--space-2);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--lh-normal);
}

/* --- TESTIMONIAL SLIDER --- */
.testimonial-section {
  background-color: var(--color-bg-alt);
  overflow: hidden;
}

.testimonial-container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  height: 300px;
}

.testimonial-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
  text-align: center;
  z-index: 1;
}

.testimonial-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.quote-icon {
  font-size: var(--fs-5xl);
  line-height: 1;
  color: var(--color-secondary);
  font-family: var(--font-headings);
  margin-bottom: var(--space-2);
}

.testimonial-quote {
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: var(--lh-snug);
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}

.testimonial-author {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text-light);
}

.testimonial-author-role {
  font-size: var(--fs-xs);
  color: var(--color-secondary);
  text-transform: uppercase;
  margin-top: 2px;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.dot.active {
  background-color: var(--color-secondary);
  width: 16px;
}

/* --- FOOTER --- */
.footer {
  background-color: var(--color-primary);
  color: #ffffff;
  border-top: 4px solid var(--color-secondary);
  padding-top: var(--space-12);
  padding-bottom: var(--space-4);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  grid-gap: var(--space-6);
  margin-bottom: var(--space-10);
}

@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.footer-brand img {
  height: 80px;
  margin-bottom: var(--space-4);
}

.footer-desc {
  font-size: var(--fs-sm);
  opacity: 0.8;
  margin-bottom: var(--space-4);
}

.footer-socials {
  display: flex;
  gap: var(--space-3);
}

.footer-social-link {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--color-border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.footer-social-link:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

.footer-menu-title {
  font-family: var(--font-headings);
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  position: relative;
  padding-bottom: var(--space-2);
}

.footer-menu-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--color-secondary);
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-link {
  font-size: var(--fs-sm);
  opacity: 0.85;
}

.footer-link:hover {
  opacity: 1;
  color: var(--color-secondary);
  padding-left: 4px;
}

.footer-contact-item {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  opacity: 0.85;
}

.footer-contact-icon {
  color: var(--color-secondary);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-badges {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.footer-badges img {
  height: 50px;
  width: auto;
}

.footer-bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  opacity: 0.7;
}

@media (max-width: 767px) {
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }
}

/* --- GENERAL INNER PAGES HEROES --- */
.inner-hero {
  position: relative;
  /* min-height (not a fixed height): the banner must grow to fit its content.
     A fixed 350px combined with align-items:flex-end caused taller content
     (longer headings, wrapped French copy) to overflow upward and get clipped
     under the absolutely-positioned header on small screens. */
  min-height: 350px;
  background-color: var(--color-primary);
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-8);
  overflow: hidden;
}

.inner-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.35);
  z-index: 1;
}

.inner-hero-content {
  position: relative;
  z-index: 2;
  color: #ffffff;
}

.inner-hero-subtitle {
  font-family: var(--font-headings);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-secondary);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.inner-hero-title {
  color: #ffffff;
  font-size: var(--fs-4xl);
  font-weight: 800;
  margin-bottom: 0;
}

/* --- ADMISSIONS INQUIRY FORM LAYOUT --- */
.form-split {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  grid-gap: var(--space-8);
}

@media (max-width: 991px) {
  .form-split {
    grid-template-columns: 1fr;
  }
}

.form-sidebar {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-dark);
}

.form-sidebar-title {
  color: #ffffff;
}

.form-card {
  background-color: #ffffff;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--space-4);
  margin-bottom: var(--space-5);
}

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

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-group-full {
  grid-column: span 2;
}

@media (max-width: 575px) {
  .form-group-full {
    grid-column: span 1;
  }
}

.form-label {
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--color-primary);
}

.form-input,
.form-select,
.form-textarea {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  background-color: #ffffff;
}

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

/* Native date picker: make the calendar affordance obviously clickable.
   Visibility across themes is handled by `color-scheme` (light on :root,
   dark on body.dark-theme), which repaints the indicator icon and value
   text to match the field. */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.75;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Visually-hidden but still focusable — keeps custom-styled radio/checkbox
   options operable by keyboard and screen readers (never use display:none). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link: off-screen until keyboard-focused (WCAG 2.4.1 Bypass Blocks). */
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--space-4);
  z-index: 100;
  background: var(--color-primary);
  color: #12100e;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Visible keyboard focus ring on the custom time-slot cards. */
#timeSlotContainer label:focus-within {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Accessible inline feedback for form submissions (replaces alert dialogs). */
.form-status {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-secondary);
}
.form-status:empty {
  display: none;
}

/* --- LEGAL / POLICY PAGE TYPOGRAPHY --- */
.policy-heading {
  font-family: var(--font-headings);
  font-size: var(--fs-xl);
  color: var(--color-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.policy-list {
  margin: 0 0 var(--space-4) var(--space-5);
  list-style: disc;
}
.policy-list li {
  margin-bottom: var(--space-2);
}

/* --- ANIMATION-ON-SCROLL UTILITIES --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Scroll-driven animations progressive enhancement */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes fade-in-up {
      from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .scroll-reveal {
      animation: fade-in-up auto linear forwards;
      animation-timeline: view();
      animation-range: entry 10% entry 40%;
    }
  }
}

/* --- VERT OLIVE LUXURY UI SPECIFIC ADDITIONS --- */

/* Frosted glass overlay */
.glass-panel {
  background: rgba(250, 249, 246, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.header-wrapper.scrolled {
  background-color: rgba(55, 66, 58, 0.85); /* Deep Olive with blur */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Luxury button variants */
.btn-luxury-outline {
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  background: transparent;
  letter-spacing: 0.12em;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  transition: all var(--transition-normal);
  text-transform: uppercase;
}

.btn-luxury-outline:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  box-shadow: 0 4px 15px rgba(197, 168, 128, 0.2);
}

.btn-luxury-solid {
  background-color: var(--color-primary);
  color: var(--color-bg-base);
  border: 1px solid var(--color-primary);
  letter-spacing: 0.12em;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  transition: all var(--transition-normal);
  text-transform: uppercase;
}

.btn-luxury-solid:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-primary);
  box-shadow: 0 4px 15px rgba(197, 168, 128, 0.25);
}

/* Gold details */
.gold-divider {
  width: 60px;
  height: 1px;
  background-color: var(--color-secondary);
  margin: var(--space-4) auto;
}

.luxury-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
}

/* Luxury Dress Cards */
.dress-card {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  overflow: hidden;
  position: relative;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    opacity var(--transition-normal);
  display: flex;
  flex-direction: column;
  opacity: 1;
}

.dress-card.hidden {
  display: none !important;
  opacity: 0;
}

.dress-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.dress-card-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.dress-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.dress-card:hover .dress-card-img {
  transform: scale(1.05);
}

.dress-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(55, 66, 58, 0.4);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  transition: opacity var(--transition-normal);
}

.dress-card:hover .dress-card-overlay {
  opacity: 1;
}

.dress-card-content {
  padding: var(--space-4);
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dress-card-title {
  font-size: var(--fs-md);
  font-family: var(--font-headings);
  margin-bottom: var(--space-1);
}

.dress-card-collection {
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.dress-card-price {
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-primary);
}

/* WhatsApp Concierge floating button */
.whatsapp-concierge {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.whatsapp-icon-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: #25d366; /* Official WhatsApp color */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.whatsapp-icon-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}

.whatsapp-tooltip {
  background: var(--color-primary);
  color: #ffffff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateX(10px);
  visibility: hidden;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
  white-space: nowrap;
}

.whatsapp-concierge:hover .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

/* Booking step panel styling */
.booking-steps-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  position: relative;
}

.booking-steps-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  z-index: 1;
}

.booking-step-indicator {
  position: relative;
  z-index: 2;
  background-color: var(--color-bg-base);
  padding: 0 var(--space-3);
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  font-weight: 500;
}

.booking-step-indicator.active {
  color: var(--color-secondary);
  font-weight: 700;
}

.booking-step-indicator span {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-base);
  line-height: 22px;
  margin: 0 auto var(--space-1) auto;
  font-size: 10px;
}

.booking-step-indicator.active span {
  border-color: var(--color-secondary);
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

.booking-step-panel {
  display: none;
}

.booking-step-panel.active {
  display: block;
  animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Before and After transformations styling */
.before-after-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.before-after-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-after-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.before-after-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-secondary);
  left: 50%;
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 10;
}

.before-after-handle::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}

/* --- ACCESSIBILITY & FOCUS VISIBILITY --- */
:focus-visible,
.before-after-handle:focus-visible {
  outline: 2px solid var(--color-secondary) !important;
  outline-offset: 4px !important;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --- DARK THEME OVERRIDES --- */
body.dark-theme {
  /* Flip native controls to their dark rendering so the date input's
     calendar picker icon and value text stay legible on dark fields. */
  color-scheme: dark;
  --color-text: #faf9f6; /* Ivory Text */
  --color-text-light: #a0aba0; /* Muted Sage Charcoal */
  --color-bg-base: #121613; /* Very Dark Slate Olive */
  --color-bg-alt: #1a1f1b; /* Muted Dark Olive */
  --color-border: #2f3931; /* Dark Green-Grey Border */
}

/* Override inline styling for white/light elements in dark theme */
body.dark-theme [style*="background: white"],
body.dark-theme [style*="background-color: white"],
body.dark-theme [style*="background-color: #ffffff"],
body.dark-theme [style*="background-color: #FFFFFF"] {
  background-color: var(--color-bg-alt) !important;
  background: var(--color-bg-alt) !important;
  color: var(--color-text) !important;
}

body.dark-theme article.dress-card,
body.dark-theme form#showroomBookingForm,
body.dark-theme .service-card,
body.dark-theme .stat-card {
  background-color: var(--color-bg-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
  background-color: var(--color-bg-base) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* Ensure secondary colors inside buttons don't clip */
body.dark-theme .btn-luxury-outline {
  border-color: var(--color-secondary) !important;
  color: var(--color-secondary) !important;
}

body.dark-theme .btn-luxury-outline:hover {
  background-color: var(--color-secondary) !important;
  color: var(--color-primary) !important;
}

/* Theme & Lang Toggler Controls Styling */
.header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-4);
}

.control-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: var(--space-2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  min-width: 44px;
  height: 44px;
}

.control-btn:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

/* Smooth layout color transitions */
body {
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal),
    border-color var(--transition-normal);
}

/* --- Reference Layout Overrides (The Greene School inspired) --- */
.floating-quick-links {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-right: none;
  box-shadow: var(--shadow-lg);
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  overflow: hidden;
  transition: background-color var(--transition-normal);
}

body.dark-theme .floating-quick-links {
  background: var(--color-bg-alt);
}

.quick-link-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

body.dark-theme .quick-link-item {
  color: var(--color-text);
}

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

.quick-link-item:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary) !important;
}

.quick-link-item .icon {
  font-size: 16px;
}

.quick-link-item .label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s ease;
}

.floating-quick-links:hover .quick-link-item .label {
  max-width: 120px;
}

/* Custom Header adjustments for Transparent Sticky Header */
.main-nav {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.main-nav.scrolled {
  background-color: var(--color-primary) !important;
  border-bottom: 1px solid var(--color-border);
}

body.dark-theme .main-nav.scrolled {
  background-color: var(--color-bg-base) !important;
}

/* Hero Slide text layouts */
.hero-slider-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Facility and Gown Category Cards */
.category-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.category-card-img-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.category-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.category-card:hover .category-card-img {
  transform: scale(1.06);
}

.category-card-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  color: #ffffff;
}

.category-card-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.category-card-title {
  font-family: var(--font-headings);
  font-size: var(--fs-xl);
  font-weight: 400;
  margin-bottom: var(--space-3);
  color: #ffffff !important;
}

/* Marquee Stats section styled like reference site */
.marquee-banner-container {
  overflow: hidden;
  white-space: nowrap;
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5) 0;
}

.marquee-banner-track {
  display: inline-block;
  animation: marquee 30s linear infinite;
}

.marquee-banner-item {
  display: inline-block;
  font-family: var(--font-headings);
  font-size: var(--fs-xl);
  color: var(--color-primary);
  margin-right: var(--space-10);
  font-weight: 400;
}

body.dark-theme .marquee-banner-item {
  color: var(--color-text);
}

.marquee-banner-item span {
  color: var(--color-secondary);
  font-weight: 700;
  margin-right: var(--space-2);
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Document Language Content Toggles */
html[lang="en"] .lang-fr-only {
  display: none !important;
}
html[lang="fr"] .lang-en-only {
  display: none !important;
}

/*
========================================================================
  RESPONSIVE REFINEMENTS (mobile-first polish, non-destructive)
  ------------------------------------------------------------------
  Layered on top of the existing breakpoints. `!important` is used only
  where a rule must override an element's own inline style (inline styles
  otherwise beat class selectors); it never fights another stylesheet
  rule. Nothing here changes branding, copy, or behaviour.
========================================================================
*/

/* --- Header: larger touch target + tidier mobile bar --------------- */
/* Matches the 1099px nav breakpoint above so the enlarged hamburger and
   right-grouped controls apply exactly while the drawer nav is active. */
@media (max-width: 1099px) {
  /* Enlarge the hamburger hit area to ~44x44 (WCAG 2.5.5) while keeping
     the 24px bar visual. box-sizing:border-box keeps the three bars
     centred, so the existing open/close animation is unaffected. */
  .hamburger {
    width: 44px;
    height: 44px;
    padding: 13px 10px;
  }
  /* Keep the logo on the left and group the hamburger with the
     language/theme controls on the right, instead of `space-between`
     spreading all three and floating the hamburger in the middle. */
  .main-nav-container .logo-link {
    margin-right: auto;
  }
  .header-controls {
    margin-left: var(--space-3);
  }
}

/* On the narrowest phones, scale the wordmark down so the logo +
   hamburger + language/theme controls never crowd the header bar.
   !important overrides the span's inline font-size. */
@media (max-width: 380px) {
  .logo-link span {
    font-size: var(--fs-lg) !important;
    letter-spacing: 0.1em !important;
  }
}

/* --- Hero: dynamic viewport height + short/landscape guard --------- */
/* svh tracks the *small* viewport so mobile browser chrome (the address
   bar) never crops the hero the way 100vh can. */
@supports (height: 100svh) {
  .hero-slider-section {
    height: 100svh;
  }
}
/* On short viewports (landscape phones) a 600px min-height forces the
   whole hero off-screen; relax it so the fold stays usable. */
@media (max-height: 560px) {
  .hero-slider-section {
    min-height: 420px;
  }
}

/* --- Hero slider arrows: smaller + tucked to the edges on phones --- */
@media (max-width: 575px) {
  .slider-arrow {
    width: 40px;
    height: 40px;
  }
  .slider-arrow-prev {
    left: var(--space-2);
  }
  .slider-arrow-next {
    right: var(--space-2);
  }
}

/* --- Inline two-column form grids: collapse on small screens ------- */
/* These grids set `grid-template-columns` inline, so the override needs
   !important to win. Desktop layout is untouched. */
@media (max-width: 767px) {
  .form-two-col {
    grid-template-columns: 1fr !important;
  }
  /* Gutters meant for the desktop two-column layouts must not linger
     once the columns stack, or the copy sits oddly indented. */
  .stack-flush-left {
    padding-left: 0 !important;
  }
  .stack-flush-right {
    padding-right: 0 !important;
  }
}
/* Silhouette checkbox pairs stay two-up on small tablets but go single
   on the narrowest phones where the labels would wrap raggedly. */
@media (max-width: 479px) {
  .checkbox-two-col {
    grid-template-columns: 1fr !important;
  }
}

/* --- Catalog "Request Guide" inline forms: stack when cramped ------ */
/* The email input's default min-width prevents it shrinking, so the
   input + nowrap button overflow a narrow row. Stack them instead.
   Shared #catalogDownloadForm id is reused across about / stylists /
   collections / product-detail, so one rule covers all four. */
@media (max-width: 575px) {
  #catalogDownloadForm {
    flex-direction: column;
  }
  #catalogDownloadForm > input,
  #catalogDownloadForm > button {
    width: 100%;
  }
}
/* Footer newsletter row: allow the input to shrink so it never pushes
   the Subscribe button past the viewport on very small phones. */
#newsletterForm input {
  min-width: 0;
}

/* --- Product gallery thumbnails: wrap instead of overflowing ------- */
/* Thumbnails are fixed 80px children injected into a flex row; without
   wrapping, 4+ of them exceed a 320px viewport and get clipped. */
#galleryThumbnails {
  flex-wrap: wrap;
}

/* --- Booking step indicator: fit four steps on phones -------------- */
/* Centred labels sit under dots pinned to the row's edges, so long
   labels ("PREFERENCES", "CONTACT") overflow and clip on phones. Below
   576px, hide the labels via font-size:0 and keep only the numbered
   circles (re-asserting the circle's own font-size); the panel heading
   already names each step. */
@media (max-width: 575px) {
  .booking-step-indicator {
    padding: 0 var(--space-2);
  }
  /* Keep the numbered circle (first span), hide the text label (second
     span) so edge steps can't overflow the row. */
  .booking-step-indicator span:nth-child(2) {
    display: none;
  }
}

/* --- Global overflow safety net ------------------------------------ */
/* Belt-and-braces guard so an unforeseen wide child can never introduce
   a horizontal scrollbar on small screens (body already hides overflow-x,
   this also covers the root element). */
html {
  overflow-x: hidden;
}
img,
video,
svg {
  max-width: 100%;
}

/* ========================================================================
   CHANAKA ARTIST UI COMPONENTS & DESIGN SYSTEM EXTENSIONS
   ======================================================================== */
.badge-gold {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.85rem;
  background: rgba(190, 146, 39, 0.15);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.badge-terracotta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.85rem;
  background: rgba(200, 75, 49, 0.15);
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

/* Streaming Platform Badges */
.streaming-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.streaming-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-dark);
  color: #ffffff;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.streaming-btn:hover {
  background: var(--color-primary);
  color: #12100e;
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(190, 146, 39, 0.25);
}

/* Event Cards & Banners */
.event-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-6);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary);
}

.event-card-img-wrap {
  position: relative;
  height: 100%;
  min-height: 220px;
  overflow: hidden;
}

.event-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.event-card:hover .event-card-img {
  transform: scale(1.05);
}

.event-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.event-date-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: rgba(18, 16, 14, 0.88);
  backdrop-filter: blur(8px);
  color: #ffffff;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid rgba(190, 146, 39, 0.4);
  min-width: 60px;
}

.event-date-day {
  font-family: var(--font-headings);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}

.event-date-month {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--color-text-light);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}

.event-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.paf-badge {
  display: inline-block;
  background: rgba(200, 75, 49, 0.1);
  color: var(--color-secondary);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-secondary);
  font-size: var(--fs-sm);
}

/* Social Feed Engine Cards */
.social-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.social-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-fast);
}

.social-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.social-card-header {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.social-platform-tag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.social-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000000;
}

.social-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.social-card:hover .social-card-media img {
  transform: scale(1.03);
}

.social-card-body {
  padding: var(--space-4);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.social-caption {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.social-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* Audio Player Widget */
.audio-player-card {
  background: var(--color-bg-dark);
  color: #ffffff;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-dark);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.audio-cover {
  width: 90px;
  height: 90px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.audio-details {
  flex-grow: 1;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.play-btn-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #12100e;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.play-btn-circle:hover {
  transform: scale(1.1);
}

.btn:disabled,
.play-btn-circle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:disabled:hover,
.play-btn-circle:disabled:hover {
  transform: none;
}

@media (max-width: 768px) {
  .event-card {
    grid-template-columns: 1fr;
  }
  .event-card-img-wrap {
    height: 220px;
  }
  .audio-player-card {
    flex-direction: column;
    text-align: center;
  }
}

/* --- ENHANCED NAVIGATION & DROPDOWNS --- */
.nav-item {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--color-bg-dark);
  border: 1px solid rgba(190, 146, 39, 0.25);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-fast);
  z-index: 1000;
}

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

.nav-dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-bg-alt);
  font-weight: 500;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
  background: rgba(190, 146, 39, 0.15);
  color: var(--color-primary);
}

.nav-dropdown-item-desc {
  display: block;
  font-size: 11px;
  color: var(--color-text-light);
  font-weight: 400;
  margin-top: 2px;
}

/* Quick Action Header Controls */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Breadcrumb Navigation */
.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.breadcrumb-trail a {
  color: var(--color-primary);
}

.breadcrumb-trail a:hover {
  text-decoration: underline;
}

.breadcrumb-sep {
  opacity: 0.5;
}

/* --- COUNTDOWN BANNER WIDGET --- */
.countdown-banner {
  background: linear-gradient(135deg, rgba(18, 16, 14, 0.95), rgba(40, 20, 15, 0.95));
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  color: #ffffff;
  box-shadow: var(--shadow-xl);
}

.countdown-grid {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
  flex-wrap: wrap;
}

.countdown-box {
  background: rgba(18, 16, 14, 0.8);
  border: 1px solid rgba(190, 146, 39, 0.4);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 80px;
  text-align: center;
}

.countdown-val {
  font-family: var(--font-headings);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.countdown-lbl {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  margin-top: 4px;
}

/* --- DISCOGRAPHY PLAYLIST & MEDIA PLAYER --- */
.playlist-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-6);
}

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

.track-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.track-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.track-item:hover,
.track-item.active {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
}

.track-item.active {
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.track-number {
  font-weight: 700;
  color: var(--color-primary);
  font-size: var(--fs-sm);
  width: 24px;
}

.track-title-wrap {
  flex-grow: 1;
  margin: 0 var(--space-3);
}

.track-title {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.track-meta {
  font-size: var(--fs-xs);
  color: var(--color-text-light);
}

.track-duration {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-light);
}

/* --- PRESS KIT & MEDIA ASSET CARDS --- */
.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.press-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-fast);
}

.press-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.press-asset-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(190, 146, 39, 0.15);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

/* --- INTERACTIVE CALCULATORS & ESTIMATORS --- */
.calculator-box {
  background: var(--color-bg-alt);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}

.calc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.calc-total {
  background: var(--color-bg-dark);
  color: #ffffff;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  text-align: center;
  margin-top: var(--space-4);
}

.calc-total-num {
  font-family: var(--font-headings);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--color-primary);
}

/* --- VIDEO SHOWCASE MODAL --- */
.video-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
}

.video-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.video-modal-content {
  width: 90%;
  max-width: 800px;
  background: #000000;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-primary);
  position: relative;
}

.video-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Navigation Dropdown Accordion */
@media (max-width: 991px) {
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.04);
    display: none;
    padding-left: var(--space-4);
  }

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