/* ============================================================
       CSS CUSTOM PROPERTIES — DESIGN TOKENS
    ============================================================ */
    :root {
      --color-bg:        #FFFFFF;
      --color-text:      #111111;
      --color-muted:     #666666;
      --color-border:    #ECECEC;
      --color-accent:    #000000;
      --color-gold:      #C8A97E;
      --font-display:    'Cormorant Garamond', Georgia, serif;
      --font-body:       'Inter', -apple-system, sans-serif;
      --transition-base: 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --transition-fast: 0.25s ease;
    }

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

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

    body {
      font-family: var(--font-body);
      background: var(--color-bg);
      color: var(--color-text);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

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

    a {
      color: inherit;
      text-decoration: none;
    }

    /* ============================================================
       TYPOGRAPHY SYSTEM
    ============================================================ */
    .display-hero {
      font-family: var(--font-display);
      font-size: clamp(3.5rem, 10vw, 9rem);
      font-weight: 300;
      line-height: 0.92;
      letter-spacing: -0.02em;
    }

    .display-xl {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 6vw, 6.5rem);
      font-weight: 300;
      line-height: 0.95;
      letter-spacing: -0.015em;
    }

    .display-lg {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 4.5rem);
      font-weight: 300;
      line-height: 1.05;
      letter-spacing: -0.01em;
    }

    .display-md {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3vw, 3rem);
      font-weight: 400;
      line-height: 1.1;
    }

    .eyebrow {
      font-family: var(--font-body);
      font-size: 0.625rem;
      font-weight: 500;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--color-muted);
    }

    .body-lg {
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.75;
      color: var(--color-muted);
    }

    /* ============================================================
       UTILITY CLASSES
    ============================================================ */
    .section-pad {
      padding-top: clamp(5rem, 10vw, 10rem);
      padding-bottom: clamp(5rem, 10vw, 10rem);
    }

    .section-pad-sm {
      padding-top: clamp(3rem, 6vw, 6rem);
      padding-bottom: clamp(3rem, 6vw, 6rem);
    }

    .border-top-thin { border-top: 1px solid var(--color-border); }
    .border-bottom-thin { border-bottom: 1px solid var(--color-border); }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn-mayunda {
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
      font-family: var(--font-body);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 1rem 2rem;
      border: 1px solid var(--color-text);
      background: transparent;
      color: var(--color-text);
      cursor: pointer;
      transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
      position: relative;
      overflow: hidden;
    }

    .btn-mayunda::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--color-text);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--transition-base);
      z-index: 0;
    }

    .btn-mayunda span { position: relative; z-index: 1; }
    .btn-mayunda i { position: relative; z-index: 1; transition: transform var(--transition-fast); }

    .btn-mayunda:hover::after { transform: scaleX(1); }
    .btn-mayunda:hover { color: #fff; }
    .btn-mayunda:hover i { transform: translateX(4px); }

    .btn-mayunda-light {
      border-color: rgba(255,255,255,0.6);
      color: #fff;
      background:rgba(0,0,0,0.7);   
    }
    .btn-mayunda-light::after { background: rgba(0,0,0,0.7); }
    .btn-mayunda-light:hover { color: #fff; }

    .btn-mayunda-ghost {
      border: none;
      padding: 0;
      font-size: 0.6875rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 500;
      gap: 0.5rem;
      color: var(--color-text);
      background: transparent;
      display: inline-flex;
      align-items: center;
      transition: gap var(--transition-fast);
      cursor: pointer;
    }
    .btn-mayunda-ghost::after { display: none; }
    .btn-mayunda-ghost:hover { gap: 0.85rem; }
    .btn-mayunda-ghost:hover { color: var(--color-text); }

    /* ============================================================
       SCROLL REVEAL (JS-driven)
    ============================================================ */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ============================================================
       NAVIGATION
    ============================================================ */
    #navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      padding: 1.5rem 0;
      transition: background var(--transition-base), padding var(--transition-base), box-shadow var(--transition-base);
    }

    #navbar.scrolled {
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(12px);
      padding: 1rem 0;
      box-shadow: 0 1px 0 var(--color-border);
    }

    .navbar-brand-text {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
      transition: color var(--transition-fast);
      white-space: nowrap;
    }

    #navbar.scrolled .navbar-brand-text { color: var(--color-text); }

    .nav-link-main {
      font-family: var(--font-body);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
      padding: 0.25rem 0 !important;
      position: relative;
      transition: color var(--transition-fast);
    }

    .nav-link-main::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0;
      width: 0; height: 1px;
      background: currentColor;
      transition: width var(--transition-base);
    }

    .nav-link-main:hover::after,
    .nav-link-main.active::after { width: 100%; }
    .nav-link-main:hover { color: #fff; }

    #navbar.scrolled .nav-link-main { color: var(--color-muted); }
    #navbar.scrolled .nav-link-main:hover { color: var(--color-text); }

    /* Mobile nav toggle */
    .nav-toggle {
      width: 32px; height: 22px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      border: none;
      background: transparent;
      padding: 0;
    }

    .nav-toggle span {
      display: block;
      height: 1px;
      background: #fff;
      transition: transform var(--transition-base), opacity var(--transition-fast), background var(--transition-fast);
    }

    #navbar.scrolled .nav-toggle span { background: var(--color-text); }

    .nav-toggle.open span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

    /* Fullscreen mobile menu */
    #mobileMenu {
      position: fixed;
      inset: 0;
      background: #111;
      z-index: 999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 2rem 2.5rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition-base);
    }

    #mobileMenu.open { opacity: 1; pointer-events: all; }

    .mobile-nav-link {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 10vw, 4.5rem);
      font-weight: 300;
      color: #fff;
      line-height: 1.15;
      letter-spacing: -0.01em;
      display: block;
      opacity: 0;
      transform: translateX(-20px);
      transition: opacity 0.4s ease, transform 0.4s ease, color var(--transition-fast);
    }

    #mobileMenu.open .mobile-nav-link {
      opacity: 1;
      transform: translateX(0);
    }

    #mobileMenu.open .mobile-nav-link:nth-child(1) { transition-delay: 0.05s; }
    #mobileMenu.open .mobile-nav-link:nth-child(2) { transition-delay: 0.1s; }
    #mobileMenu.open .mobile-nav-link:nth-child(3) { transition-delay: 0.15s; }
    #mobileMenu.open .mobile-nav-link:nth-child(4) { transition-delay: 0.2s; }
    #mobileMenu.open .mobile-nav-link:nth-child(5) { transition-delay: 0.25s; }

    .mobile-nav-link:hover { color: var(--color-gold); }

    .mobile-menu-footer {
      position: absolute;
      bottom: 2.5rem; left: 2.5rem; right: 2.5rem;
      border-top: 1px solid rgba(255,255,255,0.12);
      padding-top: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* ============================================================
       HERO SECTION
    ============================================================ */
    #hero {
      position: relative;
      height: 100vh;
      min-height: 600px;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      padding-bottom: clamp(3rem, 6vw, 5rem);
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: #1a1a1a;
      overflow: hidden;
    }

    /* Mosaic of fashion images using CSS — since we're using Unsplash embeds */
    .hero-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 20%;
      opacity: 0.75;
      transform: scale(1.05);
      animation: heroZoom 14s ease-in-out infinite alternate;
    }

    @keyframes heroZoom {
      from { transform: scale(1.05); }
      to   { transform: scale(1.12); }
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.28) 55%,
        rgba(0,0,0,0.18) 100%
      );
    }

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

    .hero-line { overflow: hidden; }

    .hero-line-inner {
      display: block;
      opacity: 0;
      transform: translateY(100%);
      animation: lineReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .hero-line-inner:nth-child(1) { animation-delay: 0.2s; }
    .hero-line-inner:nth-child(2) { animation-delay: 0.35s; }

    @keyframes lineReveal {
      to { opacity: 1; transform: translateY(0); }
    }

    .hero-sub {
      opacity: 0;
      animation: fadeUp 1s ease 0.7s forwards;
    }

    .hero-cta {
      opacity: 0;
      animation: fadeUp 1s ease 0.9s forwards;
    }

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

    /* Scroll indicator */
    .scroll-indicator {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      opacity: 0;
      animation: fadeUp 1s ease 1.2s forwards;
    }

    .scroll-indicator span {
      font-family: var(--font-body);
      font-size: 0.5625rem;
      font-weight: 500;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
    }

    .scroll-line {
      width: 1px;
      height: 40px;
      background: rgba(255,255,255,0.25);
      position: relative;
      overflow: hidden;
    }

    .scroll-line::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 50%;
      background: rgba(255,255,255,0.7);
      animation: scrollDrop 1.8s ease infinite;
    }

    @keyframes scrollDrop {
      0%   { transform: translateY(-100%); }
      100% { transform: translateY(300%); }
    }

    /* ============================================================
       SECTION: FEATURED TALENT
    ============================================================ */
     #men-wrapper {
         background: #f2f2f0;
    }

    .talent-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
    }

    /* Large card */
    .talent-card--lg { grid-column: span 5; }
    /* Medium */
    .talent-card--md { grid-column: span 4; }
    /* Portrait narrow */
    .talent-card--sm { grid-column: span 3; }

    @media (max-width: 991px) {
      .talent-card--lg,
      .talent-card--md,
      .talent-card--sm { grid-column: span 6; }
    }

    @media (max-width: 575px) {
      .talent-grid { gap: 0.5rem; }
      .talent-card--lg,
      .talent-card--md,
      .talent-card--sm { grid-column: span 12; }
    }

    .talent-card {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      background: #f2f2f0;
    }

    .talent-card__img-wrap {
      position: relative;
      overflow: hidden;
    }

    .talent-card--lg .talent-card__img-wrap  { aspect-ratio: 3/4; }
    .talent-card--md .talent-card__img-wrap  { aspect-ratio: 3/4.5; }
    .talent-card--sm .talent-card__img-wrap  { aspect-ratio: 2/3; }

    .talent-card__img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }

    .talent-card:hover .talent-card__img { transform: scale(1.07); }

    .talent-card__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, transparent 55%);
      opacity: 0;
      transition: opacity var(--transition-base);
    }

    .talent-card:hover .talent-card__overlay { opacity: 1; }

    .talent-card__info {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 1.5rem;
      color: #fff;
      transform: translateY(8px);
      opacity: 0;
      transition: opacity var(--transition-base), transform var(--transition-base);
    }

    .talent-card:hover .talent-card__info { opacity: 1; transform: translateY(0); }

    .talent-card__name {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 300;
      line-height: 1.1;
      margin-bottom: 0.25rem;
    }

    .talent-card__meta {
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      font-weight: 400;
      margin-bottom: 0.75rem;
    }

    .talent-card__link {
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 500;
      color: #fff;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      border-bottom: 1px solid rgba(255,255,255,0.4);
      padding-bottom: 2px;
      transition: gap var(--transition-fast), border-color var(--transition-fast);
    }

    .talent-card:hover .talent-card__link { gap: 0.7rem; border-color: rgba(255,255,255,0.8); }

    /* Static label below card (shown before hover) */
    .talent-card__label {
      padding: 0.875rem 0 0.25rem;
    }

    .talent-card__label-name {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: var(--color-text);
    }

    .talent-card__label-origin {
      font-size: 0.5625rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-muted);
      font-weight: 400;
    }

    /* ============================================================
       SECTION: ABOUT AGENCY
    ============================================================ */
#about-wrapper {
    background-color: #000;
}


    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }

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

    .about-img-wrap {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4/5;
    }

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

    .about-img-wrap:hover img { transform: scale(1.04); }

    .about-content {
      padding: clamp(3rem, 6vw, 7rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .about-stat {
      display: flex;
      flex-direction: column;
    }

    .about-stat__num {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 4vw, 4rem);
      font-weight: 300;
      color: var(--color-text);
      line-height: 1;
    }

    .about-stat__label {
      font-size: 0.5625rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-muted);
      font-weight: 400;
      margin-top: 0.25rem;
    }

    /* ============================================================
       SECTION: WHY CHOOSE MAYUNDA
    ============================================================ */
    .why-card {
      padding: 2.5rem 2rem;
      border: 1px solid var(--color-border);
      transition: border-color var(--transition-base), transform var(--transition-base);
      height: 100%;
    }

    .why-card:hover {
      border-color: var(--color-text);
      transform: translateY(-4px);
    }

    .why-card__icon {
      font-size: 1.25rem;
      color: var(--color-gold);
      margin-bottom: 1.5rem;
      display: block;
    }

    .why-card__title {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 400;
      margin-bottom: 0.875rem;
      line-height: 1.15;
    }

    .why-card__body {
      font-size: 0.875rem;
      line-height: 1.75;
      color: var(--color-muted);
      font-weight: 300;
    }

    /* ============================================================
       SECTION: BECOME A MODEL
    ============================================================ */
    #become {
      position: relative;
      overflow: hidden;
      min-height: 70vh;
      display: flex;
      align-items: center;
    }

    .become-bg {
      position: absolute;
      inset: 0;
    }

    .become-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
      transition: transform 1.2s ease;
    }

    #become:hover .become-bg img { transform: scale(1.03); }

    .become-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.52);
    }

    .become-content {
      position: relative;
      z-index: 2;
      color: #fff;
    }

    /* ============================================================
       SECTION: EDITORIAL GALLERY (Masonry)
    ============================================================ */
    .gallery-masonry {
      columns: 3;
      column-gap: 0.75rem;
    }

    @media (max-width: 991px) { .gallery-masonry { columns: 2; } }
    @media (max-width: 575px) { .gallery-masonry { columns: 1; column-gap: 0.5rem; } }

    .gallery-item {
      break-inside: avoid;
      margin-bottom: 0.75rem;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    @media (max-width: 575px) { .gallery-item { margin-bottom: 0.5rem; } }

    .gallery-item img {
      width: 100%;
      display: block;
      transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .gallery-item:hover img { transform: scale(1.06); }

    .gallery-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.38);
      opacity: 0;
      transition: opacity var(--transition-base);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gallery-overlay span {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 300;
      letter-spacing: 0.08em;
      color: #fff;
      border-bottom: 1px solid rgba(255,255,255,0.5);
      padding-bottom: 4px;
    }

    .gallery-item:hover .gallery-overlay { opacity: 1; }

    /* ============================================================
       SECTION: CLIENT LOGOS MARQUEE
    ============================================================ */
    .marquee-track {
      display: flex;
      align-items: center;
      gap: 4rem;
      animation: marquee 32s linear infinite;
      white-space: nowrap;
    }

    .marquee-wrap {
      overflow: hidden;
      display: flex;
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .client-logo {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 300;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #bbb;
      white-space: nowrap;
      transition: color var(--transition-fast);
    }

    .client-logo:hover { color: var(--color-text); }

    /* ============================================================
       SECTION: TESTIMONIALS
    ============================================================ */
    .testimonial-wrap {
      position: relative;
      overflow: hidden;
    }

    .testimonial-slide {
      display: none;
    }

    .testimonial-slide.active {
      display: block;
      animation: fadeIn 0.6s ease;
    }

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

    .testimonial-quote {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      font-weight: 300;
      font-style: italic;
      line-height: 1.4;
      color: var(--color-text);
      max-width: 800px;
      margin: 0 auto;
    }

    .testimonial-author {
      font-size: 0.6875rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--color-muted);
      margin-top: 2rem;
    }

    .testimonial-dots {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 2.5rem;
    }

    .t-dot {
      width: 24px; height: 1px;
      background: var(--color-border);
      cursor: pointer;
      transition: background var(--transition-fast), width var(--transition-fast);
      border: none;
    }

    .t-dot.active { background: var(--color-text); width: 40px; }

    /* ============================================================
       SECTION: INSTAGRAM FEED
    ============================================================ */
    .insta-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0.5rem;
    }

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

    .insta-item {
      aspect-ratio: 1;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

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

    .insta-item:hover img { transform: scale(1.08); }

    .insta-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity var(--transition-base);
    }

    .insta-item:hover .insta-overlay { opacity: 1; }

    .insta-overlay i { color: #fff; font-size: 1.25rem; }

    /* ============================================================
       FOOTER
    ============================================================ */
   


 .luxury-footer {
      position: relative;
      background:#dad3ca;
      overflow: hidden;
     font-family: var(--font-display);
    }

    .luxury-footer__inner {
      min-height: 100vh;
      padding-top: clamp(3.5rem, 8vw, 6.5rem);
      padding-bottom: clamp(2rem, 4vw, 3.5rem);
    }

    .footer-column {
      max-width: 100%;
    }

    .footer-contact {
      position: relative;
      display: inline-block;
      color: #1c1714;
      text-decoration: none;
      line-height: 1;
      letter-spacing: -0.04em;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .footer-contact:hover,
    .footer-contact:focus-visible {
      color: #1c1714;
      transform: translateY(-1px);
      opacity: 0.9;
      outline: none;
    }

    .footer-email {
      font-size: clamp(2.35rem, 4vw, 4rem);
      font-weight: 400;
      margin-bottom: clamp(3rem, 7vw, 5rem);
      padding-bottom: 0.65rem;
      border-bottom: 1px solid rgba(28, 23, 20, 0.28);
      width: fit-content;
    }

    .footer-phone {
      display: inline-block;
      font-size: clamp(1.8rem, 2.2vw, 2.5rem);
      font-weight: 400;
      margin-bottom: clamp(2.1rem, 5vw, 3.1rem);
      padding-bottom: 0.45rem;
      border-bottom: 1px solid rgba(28, 23, 20, 0.28);
      width: fit-content;
    }

    .social-links {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin: 0 0 clamp(2rem, 4vw, 3rem);
      padding: 0;
      list-style: none;
    }

    .social-links a {
      color: #1c1714;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      line-height: 1;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .icon-x {
      width: 1.05em;
      height: 1.05em;
      display: block;
    }
.social-links a:hover,
    .social-links a:focus-visible {
      transform: translateY(-2px) scale(1.05);
      opacity: 0.8;
      outline: none;
    }

    .footer-nav {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(1.5rem, 2.3vw, 2.2rem);
      margin: 0 0 clamp(2rem, 4vw, 3rem);
      padding: 0;
      list-style: none;
    }

    .footer-nav a {
      position: relative;
      color: rgba(28, 23, 20, 0.9);
      text-decoration: none;
      font-size: clamp(1.05rem, 1.1vw, 1.2rem);
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0;
      transition: color 0.3s ease;
    }

    .footer-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -0.28rem;
      width: 100%;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.3s ease;
      opacity: 0.6;
    }

    .footer-nav a:hover::after,
    .footer-nav a:focus-visible::after {
      transform: scaleX(1);
    }

    .footer-nav a:hover,
    .footer-nav a:focus-visible {
      color: #1c1714;
      outline: none;
    }

    .footer-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      color: rgba(28, 23, 20, 0.62);
      font-size: clamp(1rem, 1.05vw, 1.1rem);
      line-height: 1.2;
    }

    .footer-meta a {
      color: inherit;
      text-decoration: none;
      transition: opacity 0.3s ease;
    }

    .footer-meta a:hover,
    .footer-meta a:focus-visible {
      opacity: 0.75;
      outline: none;
    }

    .footer-spacer {
      min-height: 1px;
    }

    /* Match the open right side on wide screens while staying responsive */
    @media (min-width: 992px) {
      .luxury-footer__inner .row {
        align-items: end;
      }
    }

    @media (max-width: 991.98px) {
      .luxury-footer__inner {
        min-height: auto;
        padding-top: 4rem;
        padding-bottom: 3rem;
      }

      .footer-column {
        padding-right: 0;
      }
    }

    @media (max-width: 575.98px) {
      .luxury-footer__inner {
        padding-top: 3rem;
        padding-bottom: 2.25rem;
      }

      .footer-email {
        font-size: 2.1rem;
        margin-bottom: 2.25rem;
      }

      .footer-phone {
        font-size: 1.65rem;
        margin-bottom: 1.85rem;
      }

      .social-links {
        gap: 1.15rem;
        margin-bottom: 1.75rem;
      }

      .footer-nav {
        gap: 1rem 1.2rem;
        margin-bottom: 1.6rem;
      }

      .footer-meta {
        gap: 0.75rem 1rem;
      }
    }

    /* ============================================================
       DIVIDER LINE
    ============================================================ */
    .divider-label {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    .divider-label::before,
    .divider-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--color-border);
    }

    /* ============================================================
       LOADING OVERLAY
    ============================================================ */
    #loader {
      position: fixed;
      inset: 0;
      background: #fff;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      transition: opacity 0.7s ease, visibility 0.7s ease;
    }

    #loader.hidden { opacity: 0; visibility: hidden; }

    .loader-brand {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 300;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #111;
    }

    .loader-bar-wrap {
      width: 120px;
      height: 1px;
      background: #eee;
      overflow: hidden;
    }

    .loader-bar {
      height: 100%;
      background: #111;
      animation: loadBar 1.4s ease forwards;
    }

    @keyframes loadBar {
      from { width: 0; }
      to   { width: 100%; }
    }

    /* ============================================================
       GOLD ACCENT RULE
    ============================================================ */
    .gold-rule {
      width: 40px;
      height: 1px;
      background: var(--color-gold);
      margin-bottom: 1.5rem;
    }

    /* ============================================================
       RESPONSIVE TWEAKS
    ============================================================ */
    @media (max-width: 767px) {
      .about-content { padding: 2.5rem 1.5rem; }
      .why-card { padding: 2rem 1.5rem; }
    }

    /* ============================================================
       REDUCED MOTION
    ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }