/* 
========================================================================
  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 */
  --color-primary-hue: 135;
  --color-primary-saturation: 12%;
  --color-primary-lightness: 24%; /* #37423A Deep Olive Green */
  --color-primary: hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness));

  --color-secondary-hue: 34;
  --color-secondary-saturation: 40%;
  --color-secondary-lightness: 64%; /* #C5A880 Champagne Gold Accent */
  --color-secondary: hsl(
    var(--color-secondary-hue),
    var(--color-secondary-saturation),
    var(--color-secondary-lightness)
  );

  --color-accent-hue: 128;
  --color-accent-saturation: 10%;
  --color-accent-lightness: 58%; /* #8C9E8E Sage Olive Accent */
  --color-accent: hsl(var(--color-accent-hue), var(--color-accent-saturation), var(--color-accent-lightness));

  /* Neutral Tones */
  --color-text: #1c201c; /* Soft Charcoal */
  --color-text-light: #5a625a; /* Soft Sage Charcoal */
  --color-bg-base: #faf9f6; /* Warm Luxury Ivory */
  --color-bg-alt: #f3f4f1; /* Soft Sage Ivory Tint */
  --color-bg-dark: #1e2520; /* Rich Deep Olive Dark */
  --color-border: #e3e5e1; /* Soft Sage Border */
  --color-border-dark: rgba(255, 255, 255, 0.08);

  /* 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-secondary);
  color: var(--color-primary);
  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 */
@media (max-width: 991px) {
  .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;
}

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

@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-secondary);
  color: var(--color-primary);
}

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

.btn-secondary {
  border: 2px solid #ffffff;
  color: #ffffff;
}

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

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

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