@font-face {
   font-family: 'PPNeueMontrealBook';
   src: url('fonts/PPNeueMontreal-Book.woff2') format('woff2'),
        url('fonts/PPNeueMontreal-Book.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'PPNeueMontrealMedium';
   src: url('fonts/PPNeueMontreal-Medium.woff2') format('woff2'),
        url('fonts/PPNeueMontreal-Medium.woff') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'AprisReg';
   src: url('fonts/Apris-Regular.woff2') format('woff2'),
        url('fonts/Apris-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

/* Fallback Font Imports for Development/Production */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@300;400;500;600&display=swap');

:root {
	/* Core Color Palette (Hex & HSL mappings) */
	--primary-emerald: #00805E;                  /* HSL(164, 100%, 25%) - Signature Emerald accent */
	--primary-emerald-rgb: 0, 128, 94;
	
	--secondary-sage: #377E60;                   /* HSL(154, 39%, 35%) - Secondary buttons & indicators */
	--secondary-sage-rgb: 55, 126, 96;
	
	--bg-black: #000000;                         /* Pure black base background */
	--bg-dark: #010101;                          /* Form & secondary page background */
	--surface-light: #F1F1F1;                    /* Alternate section surface background */
	
	--off-white: #F9F4F0;                        /* Alabaster/Cream primary button background */
	--white: #FFFFFF;                            /* High contrast typography & borders */
	--border-muted: #B3B3B3;                     /* Muted gray for lines, borders & labels */
	
	/* Typography Scale */
	--font-display: 'AprisReg', 'Playfair Display', Georgia, serif; /* Editorial serif */
	--font-sans: 'PPNeueMontrealBook', 'Inter', -apple-system, sans-serif; /* Grotesque sans */
	--font-sans-medium: 'PPNeueMontrealMedium', -apple-system, sans-serif;
    
	--fs-h1: 2.25rem;                            /* 36px - Display H1 / Form Titles */
	--fs-h2: 1.875rem;                           /* 30px - Page sections / Hero headings */
	--fs-h3: 1.3375rem;                          /* 21.4px - Card headings / Event listings */
	--fs-body: 1.1875rem;                        /* 15px - Default body copy */
	--fs-nav: 0.75rem;                           /* 12px - Navigation links & metadata */
	--fs-input: 0.75rem;                         /* 12px - Placeholder / Input text */
	--fs-label: 0.625rem;                        /* 10px - Form labels */
	--fs-btn-small: 0.6875rem;                   /* 11px - Primary button text */
	
	/* Structural Tokens */
	--border-radius-none: 0px;                   /* Strictly sharp corners for premium aesthetic */
	--transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	--grid-col-padding: 6.35rem;                 /* 101.6px - Symmetrical padding for alternating grid */
	
	/* Bootstrap CSS Variables Overrides */
	--bs-primary: var(--primary-emerald);
	--bs-primary-rgb: var(--primary-emerald-rgb);
	--bs-body-font-family: var(--font-sans);
	--bs-body-bg: var(--bg-black);
	--bs-body-color: var(--white);
	--bs-link-color: var(--white);
	--bs-link-hover-color: var(--primary-emerald);
	--bs-border-color: var(--border-muted);		
}

#coming-soon {
	background-color: var(--color-black);
	color: var(--color-white);	
	height: 100vh;
}

.cs-logo {
	height: 200px;
}


/* ==========================================================================
   2. GLOBAL RESETS & BASE STYLES
   ========================================================================== */
body {
	background-color: var(--bg-black);
	color: var(--white);
	font-family: var(--bs-body-font-family);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.33;                           /* 20px line spacing on 15px body text */
	letter-spacing: -0.01em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Elegant Text Selection */
::selection {
	background-color: var(--primary-emerald);
	color: var(--white);
}

/* Muted Divider Lines */
hr, .divider-line {
	border: 0;
	border-top: 1px solid var(--border-muted);
	opacity: 0.2;
	margin: 0;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, .h1 {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 2rem;
	letter-spacing: -0.02em;
}

h2, .h2 {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: 1.25;
	margin-bottom: 1.5rem;
	letter-spacing: -0.01em;
}

h3, .h3 {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: 1.3;
	margin-bottom: 1rem;
}

/* Text formatting helper for serif display titles */
.display-title {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	text-transform: none;
	font-weight: 400;
}

p, .body-text {
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.33;
	margin-bottom: 1.25rem;
	color: rgba(255, 255, 255, 0.9);
}

/* Metadata text (e.g. Dates and Locations) */
.metadata-text {
    font-size: var(--fs-nav);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   4. COMPONENTS & LAYOUT SPACING
   ========================================================================== */

/* --- NAVIGATION --- */
.navbar-custom {
    padding-top: 3.125rem;                       /* ~50px top padding matching design coordinate */
    padding-bottom: 2rem;
    background: transparent;
}

/* Elegant navbar items using display serif at 17px */
.navbar-custom .nav-link {
    font-family: var(--font-display);
    font-size: 1.0625rem;                        /* 17px */
    font-weight: 400;
    color: var(--white);
    transition: var(--transition-smooth);
    padding: 0.5rem 0;
}

.navbar-custom .nav-link:hover {
    color: var(--primary-emerald);
}

/* --- BUTTONS --- */
/* Custom overrides for Bootstrap .btn */
.btn {
    border-radius: var(--border-radius-none) !important;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    transition: var(--transition-smooth);
}

/* 1. Primary White/Cream Action Button (130px x 40px) */
.btn-custom-primary {
    min-width: 8.125rem;                         /* 130px */
    height: 2.5rem;                              /* 40px */
    background-color: var(--off-white) !important;
    color: var(--bg-black) !important;
    font-size: var(--fs-btn-small);
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-custom-primary:hover, 
.btn-custom-primary:focus {
    background-color: var(--primary-emerald) !important;
    color: var(--white) !important;
}

/* 2. Sage/Muted Green Form Action Button (80px x 40px) */
.btn-custom-sage {
    min-width: 5rem;                             /* 80px */
    height: 2.5rem;                              /* 40px */
    background-color: var(--secondary-sage) !important;
    color: var(--white) !important;
    font-size: var(--fs-body);                   /* 15px button labels like "Continue" / "Back" */
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-custom-sage:hover,
.btn-custom-sage:focus {
    background-color: var(--primary-emerald) !important;
    color: var(--white) !important;
}

/* --- FORMS & INPUTS --- */
.form-container {
    max-width: 44.1875rem;                       /* ~707px centered form layout width */
    margin-left: auto;
    margin-right: auto;
}

.form-label {
    font-size: var(--fs-label);                  /* 10px label size */
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--border-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

/* Minimalist borderless inputs with only a bottom underline */
.form-control, 
.form-select {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border-muted) !important;
    border-radius: var(--border-radius-none) !important;
    color: var(--white) !important;
    font-size: var(--fs-input);                  /* 12px input values */
    font-family: var(--font-sans);
    font-weight: 400;
    height: 2.5rem;                              /* 40px height */
    padding-left: 1rem !important;               /* ~16px padding matching Left:351.8 offset */
    padding-right: 1rem !important;
    transition: var(--transition-smooth);
}

/* Focus and Active States */
.form-control:focus, 
.form-select:focus {
    box-shadow: none !important;
    border-bottom-color: var(--primary-emerald) !important;
}

/* Styling placeholders */
.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--fs-input);
}

/* Dark mode select dropdown support */
.form-select option {
    background-color: var(--bg-dark);
    color: var(--white);
}

/* --- STEP SYSTEM / PROCESS INDICATORS --- */
.step-indicator-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3.5rem;
}

.step-indicator-line {
    height: 2px;
    width: 3.7625rem;                            /* 60.2px horizontal divider line */
    background-color: var(--white);
    opacity: 0.2;
    margin: 0 0.5rem;
}

.step-indicator-line.active {
    opacity: 1;
    background-color: var(--primary-emerald);
}

/* --- LAYOUTS & CONTAINERS --- */
.section-block {
    padding-top: 7rem;
    padding-bottom: 7rem;
    position: relative;
}

/* Container override for strict alignment */
.container {
    max-width: 1140px;                           /* Symmetrical container matching grid system */
}

/* Alternating Chess-Board Tiles Layout (Image & Text rows) */
.alternate-row {
    --bs-gutter-x: 0;                            /* No grid gaps between column boundaries */
}

.alternate-col-img {
    aspect-ratio: 1 / 1;                         /* Enforces square 683px x 683px layouts */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.alternate-col-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: var(--grid-col-padding);       /* Symmetrical 101.6px inner margins */
    padding-right: var(--grid-col-padding);
    background-color: var(--bg-black);
}

/* --- FOOTER --- */
.footer-custom {
    background-color: var(--primary-emerald);    /* Base green footer accent */
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    position: relative;
}

.footer-custom.dark {
    background-color: var(--bg-dark);            /* Optional off-black footer variant */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);                     /* ~30px logo */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--white);
    text-decoration: none;
}

.footer-column-title {
    font-size: var(--fs-nav);
    font-family: var(--font-sans);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

.footer-link {
    font-size: var(--fs-nav);                    /* 12px nav links */
    font-family: var(--font-sans);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--white);
    text-decoration: none;
    display: block;
    padding: 0.375rem 0;                        /* Creates exact line height spacing of 24px */
    transition: var(--transition-smooth);
}

.footer-link:hover {
    color: var(--bg-black);                      /* Inverts color against green background */
}

.footer-custom.dark .footer-link:hover {
    color: var(--primary-emerald);
}

.hero-banner {
    position: relative;
    overflow: hidden;
    height: 100vh;
    min-height: 500px;
}

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

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
}

.hero-layout-wrapper {
    position: relative;
    z-index: 3;
    height: 100%;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.25;
}

.hero-subtitle {
    font-family: var(--font-sans);
    font-size: clamp(0.85rem, 1.5vw, 1.1875rem);
    font-weight: 300;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.btn-hero-pill {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #000000 !important;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50rem !important;
    padding: 0.75rem 2.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-hero-pill:hover,
.btn-hero-pill:focus {
    background-color: #00805E;
    color: #ffffff !important;
    border-color: #00805E;
    box-shadow: 0 6px 25px rgba(0, 128, 94, 0.25);
    transform: translateY(-1px);
}

/* Fixed Navigation Bar Styling */
.custom-navbar {
    background-color: transparent;
    padding: 1.5rem 2rem;
    transition: var(--transition-smooth);
    z-index: 1030; /* Above regular content */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Scroll effect: Add solid background & backdrop blur on scroll */
.custom-navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1rem 2rem;
}

/* Container setup for perfect three-column layout (Left, Center, Right) */
.navbar-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
}

/* Left: Custom Menu Toggle Trigger */
.menu-toggle {
    background: transparent;
    border: none;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0.5rem 0;
    font-family: var(--font-display);
    font-size: 1.0625rem; /* ~17px */
    font-weight: 400;
    text-decoration: none;
    transition: var(--transition-smooth);
    cursor: pointer;
    justify-self: start;
}

.menu-toggle:hover {
    color: var(--primary-emerald);
}

/* Minimalist Custom Hamburger Icon */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 11px;
}

.hamburger-icon span {
    display: block;
    height: 1px;
    width: 100%;
    background-color: currentColor;
    transition: var(--transition-smooth);
}

/* Center: Stylized Brand Logo */
.navbar-brand-centered {
    justify-self: center;
}

.brand-logo-svg {
    width: 44px;
    height: 44px;
    transition: var(--transition-smooth);
}

.brand-logo-svg:hover {
    transform: rotate(5deg) scale(1.05);
}

/* Right: Action Buttons Group */
.navbar-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 2rem; /* Spacing between Apply and Log In */
}

.nav-apply-link {
    font-family: var(--font-display);
    font-size: 1.0625rem; /* ~17px */
    font-weight: 400;
    color: #ffffff;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.nav-apply-link:hover {
    color: var(--primary-emerald);
}

/* Pill-Shaped Emerald Log In Button */
.btn-nav-login {
    font-family: var(--font-display);
    font-size: 1.0625rem; /* ~17px */
    font-weight: 400;
    color: #ffffff !important;
    background-color: var(--primary-emerald);
    border: 1px solid var(--primary-emerald);
    border-radius: 50rem; /* Pill shape */
    padding: 0.5rem 1.75rem;
    transition: var(--transition-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-nav-login:hover {
    background-color: transparent;
    color: var(--primary-emerald) !important;
}

/* --- PREMIUM FULL-SCREEN OFFCANVAS DRAWER --- */
.offcanvas-custom {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 400px;
    max-width: 100vw;
}

.offcanvas-custom .btn-close-white {
    opacity: 0.7;
    transition: var(--transition-smooth);
}

.offcanvas-custom .btn-close-white:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* Drawer Link list utilizing extracted sizes */
.offcanvas-nav-link {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-smooth);
}

.offcanvas-nav-link:hover {
    color: var(--primary-emerald);
    padding-left: 10px;
}

.intro-text {
    padding-top: 10rem;
    padding-block: 10rem;
}

/* Grid Component Styles */
.grid-section {
    background-color: #000000;
}

/* Container for each tile */
.tile-container {
    position: relative;
    overflow: hidden;
    display: block;
    /* Enforces 4:3 landscape ratio matching the mockup */
    aspect-ratio: 4 / 3;
    width: 100%;
    cursor: pointer;
}

/* Image layer */
.tile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Luxury dark gradient overlay to ensure text contrast at the bottom */
.tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0) 60%
    );
    z-index: 2;
}

/* Bottom-centered luxury serif typography */
.tile-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 2.5rem; /* Margins text from the bottom edge */
    text-align: center;
    z-index: 3;
}

.tile-title {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.75rem); /* Responsive font sizing */
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}

/* Subtle hover effect zooms the background image slightly */
.tile-container:hover .tile-image {
    transform: scale(1.05);
}

.tile-container:hover .tile-title {
    color: #00805E; /* Accent text transitions to signature Emerald green */
}

/* Footer Component Styles */
.footer-luxury {
    background-color: #00805E;                  /* Exact Signature Emerald Green background */
    padding-top: 4.5rem;                        /* ~72px top padding for open feel */
    padding-bottom: 4.5rem;                     /* ~72px bottom padding */
    color: #000000;                             /* Dark text matching the design mockup */
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Logo Typography (Serif display at 30px) */
.footer-brand {
    font-family: var(--font-display);
    font-size: 1.875rem;                        /* 30px */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #000000;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.3s ease;
}

.footer-brand:hover {
    color: #000000;
    opacity: 0.8;
}

/* Footer Links List Setup */
.footer-links-col {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.footer-links-col li {
    margin-bottom: 0.75rem;                     /* Creates exact 24px vertical distance */
}

.footer-links-col li:last-child {
    margin-bottom: 0;
}

/* Footer Navigation Link Typography (12px, uppercase, medium weight) */
.footer-nav-link {
    font-family: var(--font-sans);
    font-size: 0.75rem;                         /* 12px */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;                     /* Elegant tracking/letter-spacing */
    color: #000000;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: inline-block;
}

/* Hover State: Fades to white for a subtle luxury interaction */
.footer-nav-link:hover {
    color: #ffffff;
    transform: translateX(2px);
}

/* Mobile Adaptations */
@media (max-width: 768px) {
    .custom-navbar {
        padding: 1rem 1.25rem;
    }
    .custom-navbar.scrolled {
        padding: 0.75rem 1.25rem;
    }
    .navbar-actions {
        gap: 1rem;
    }
    .nav-apply-link {
        display: none; /* Collapses "Apply" text into Menu to prevent clutter on mobile */
    }
    .btn-nav-login {
        padding: 0.4rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .footer-luxury {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    .footer-brand-wrapper {
        text-align: center;
        margin-bottom: 3rem;                     /* Stacks logo on top of links on mobile */
    }
    .footer-links-wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

  /* Hero Section */
  .hero-section {
    height: 90vh;
    min-height: 550px;
    position: relative;
    overflow: hidden;
  }

  .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Editorial Text Sections */
  .section-editorial {
    padding: 7rem 1.5rem;
  }

  .editorial-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
  }

  .editorial-subtitle {
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 680px;
    margin: 0 auto;
  }

  /* Chessboard Row Layout */
  .chessboard-row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }

  .chessboard-img-col {
    min-height: 480px;
    position: relative;
  }

  .chessboard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 480px;
  }

  .chessboard-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 3rem;
    background-color: #000000;
  }

  .chessboard-desc {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    max-width: 480px;
  }

  /* Pill Button */
  .btn-membership-pill {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #000000 !important;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 50rem;
    padding: 0.85rem 2.5rem;
    text-decoration: none;
    display: inline-block;
    transition: var(--transition-smooth);
  }

  .btn-membership-pill:hover {
    background-color: var(--primary-emerald);
    border-color: var(--primary-emerald);
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 128, 94, 0.3);
  }

  /* Responsive Rules */
  @media (max-width: 991.98px) {
    .chessboard-text-col {
      padding: 4rem 2rem;
    }
  }

  @media (max-width: 767.98px) {
    .section-editorial {
      padding: 4.5rem 1.25rem;
    }
    .chessboard-img-col,
    .chessboard-img {
      min-height: 350px;
    }
  }