/* ==========================================================================
   ENTRY PRELOADER CURTAINS & LOGO (WHITE & NAVY)
   ========================================================================== */
.preloader-gate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 200;
  display: flex;
  overflow: hidden;
  pointer-events: auto;
  /* Prevent click-through while loading */
  transition: opacity 0.5s ease;
}

.preloader-gate.active {
  pointer-events: none;
  /* Allow interaction once preloader is opened */
}

.preloader-panel {
  position: absolute;
  top: 0;
  width: 50vw;
  height: 100%;
  background-color: var(--color-curtain-bg);
  transition: transform 1.2s var(--transition-fluid);
  will-change: transform;
  overflow: hidden;
  /* Cuts logo and progress line in half at the seam */
}

.preloader-panel.left {
  left: 0;
}

.preloader-panel.right {
  right: 0;
}

.preloader-gate.active .preloader-panel.left {
  transform: translateX(-100%);
}

.preloader-gate.active .preloader-panel.right {
  transform: translateX(100%);
}

/* Centered wrappers inside both panels, locked to viewport coordinates */
.preloader-text-half {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader-panel.left .preloader-text-half {
  left: 0;
}

.preloader-panel.right .preloader-text-half {
  right: 0;
}

.preloader-logo-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.preloader-logo {
  font-family: var(--font-headings);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  color: var(--color-curtain-text);
  line-height: 1;
}

.preloader-line {
  width: 100%;
  height: 1.5px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s ease 0.2s;
}

/* ==========================================================================
   HERO CONTAINER (EDITORIAL WHITE FRAME)
   ========================================================================== */
.hero {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  height: auto;
  padding: 110px 0 50px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-bg);
}

/* ==========================================================================
   CINEMATIC SHARP BACKGROUND
   ========================================================================== */
.hero-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center bottom;
  transform-origin: bottom center;
  transform: scale(1.1);
  opacity: 0;
  filter: brightness(0.72) contrast(1.2);
  transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.8s ease;
  will-change: transform, opacity;
}

.hero.loaded .hero-bg-img {
  transform: scale(1.02);
  opacity: 1;
}

.hero-bg-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center,
      rgba(8, 24, 46, 0.1) 0%,
      rgba(8, 24, 46, 0.55) 60%,
      rgba(8, 24, 46, 0.95) 100%),
    linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, transparent 100%);
  pointer-events: none;
}

/* ==========================================================================
   HERO TYPOGRAPHY & BUTTONS
   ========================================================================== */
.hero-content {
  position: relative;
  z-index: 5;
  width: 90%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}

.subtitle-wrapper {
  overflow: hidden;
  padding: 6px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 2.2vw, 1.15rem);
  /* Scaled down on smaller screens to prevent clipping */
  font-weight: 700;
  letter-spacing: clamp(0.12em, 1.2vw, 0.32em);
  /* Reduced letter-spacing on smaller screens to prevent overflow */
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.1;
  display: inline-block;
}

.hero-title {
  font-family: var(--font-headings);
  font-size: clamp(2.6rem, 5.5vw, 5.2rem);
  font-weight: 300;
  color: var(--color-white);
  max-width: 900px;
  letter-spacing: -0.01em;
}

.cta-wrapper {
  overflow: hidden;
  margin-top: 1rem;
}

.btn-minimal {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 2.2rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition:
    background-color 0.4s var(--transition-smooth),
    border-color 0.4s var(--transition-smooth),
    color 0.4s var(--transition-smooth),
    transform 0.4s var(--transition-smooth);
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--transition-smooth);
}

.btn-minimal:hover {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.btn-minimal:hover .btn-icon {
  transform: translateX(4px);
}

/* ==========================================================================
   CHIARA LUZZANA FULLSCREEN NAVIGATION SYSTEM
   ========================================================================== */

/* Vertical Guide Lines for Margins */
.editorial-margin-line {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.05);
  /* Extremely subtle guideline */
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease 0.8s, background-color 0.5s ease;
}

/* Enable visibility once preloader split is complete and header reveals */
.header-minimal.loaded~.editorial-margin-line {
  opacity: 1;
}

.editorial-margin-line.left {
  left: 60px;
  /* Aligns exactly with logo padding! */
}

.editorial-margin-line.right {
  right: 60px;
  /* Aligns exactly with trigger padding! */
}

body.menu-active .editorial-margin-line {
  background-color: rgba(8, 24, 46, 0.04);
  /* Primary ink color when menu is open */
}

.editorial-margin-line-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #D4AF37, transparent);
  transform-origin: top;
  transform: scaleY(0);
  will-change: transform;
}

/* Fixed Header Layout */
.header-minimal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
  pointer-events: none;
  opacity: 0;
  /* Removed padding transition to eliminate layout jerking & reflow */
  transition:
    opacity 0.8s var(--transition-smooth),
    background-color 0.6s ease,
    border-color 0.6s ease,
    backdrop-filter 0.6s ease;
}

.header-minimal.loaded {
  opacity: 1;
}

/* Frosted glass sticky layout over dark hero fold */
.header-minimal.scrolled {
  background-color: rgba(8, 24, 46, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 20px 60px;
  /* Keep padding constant to prevent layout reflow */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Transitions to warm paper document color over light sections */
body.scrolled-past-hero .header-minimal.scrolled {
  background-color: rgba(245, 244, 240, 0.75);
  border-bottom-color: rgba(8, 24, 46, 0.06);
}

/* Dynamic color shift for trigger icons over light sections */
body.scrolled-past-hero .menu-trigger .scale-svg {
  stroke: var(--color-primary);
}

body.scrolled-past-hero .menu-trigger .trigger-circle {
  border-color: rgba(8, 24, 46, 0.1);
  background-color: rgba(8, 24, 46, 0.02);
}

body.menu-active .header-minimal.scrolled {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

/* Magnetic Trigger Area */
.menu-trigger {
  pointer-events: auto;
  position: relative;
  width: 78px;
  height: 78px;
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1002;
  border-radius: 50%;
  padding: 0;
  color: #FFFFFF;
  /* Animate transform instead of width/height for 60FPS scroll performance */
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.4s ease;
  will-change: transform, color;
}

.trigger-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    border-color 0.4s ease,
    background-color 0.4s ease,
    transform 0.12s ease-out;
  will-change: transform;
  pointer-events: none;
  /* Let click pass to parent button */
}

.trigger-burger {
  position: relative;
  z-index: 2;
  width: 64px;
  /* Fit nicely inside the 78px circle */
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.4s var(--transition-smooth);
  /* Only animate transform */
  will-change: transform;
  pointer-events: none;
  /* Let click pass to parent button */
}

/* Base Styles for trigger SVG/image icons */
.trigger-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  stroke: var(--color-white);
  fill: none;
  pointer-events: none;
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.8s ease,
    stroke 0.5s ease;
  will-change: transform, opacity, stroke;
}



/* Logo Image (Default visible, Close X hidden) */
.trigger-icon.scale-svg {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  border-radius: 50%;
  object-fit: cover;
}

.trigger-icon.close-svg {
  opacity: 0;
  transform: scale(0.35) rotate(-45deg);
  /* Scaled down inside the box */
}

/* Hover tilt effect on the logo trigger */
.menu-trigger:hover .scale-svg {
  transform: scale(1.08) rotate(4deg);
}

/* Adjust size of trigger and burger elements when header is scrolled via GPU scale transform */
.header-minimal.scrolled .menu-trigger {
  transform: scale(0.77);
}

/* Active Open Menu Trigger Styling */
body.menu-active .trigger-circle {
  border-color: rgba(8, 24, 46, 0.1);
  background-color: rgba(8, 24, 46, 0.03);
}

body.menu-active .trigger-icon {
  stroke: var(--color-primary);
  /* Turn Navy Blue when menu is open */
}

/* Active Open state transitions (Slower morph to match 1.4s clip-path reveal) */
body.menu-active .trigger-icon.scale-svg {
  opacity: 0;
  transform: scale(0.5) rotate(45deg);
}

body.menu-active .trigger-icon.close-svg {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Active Menu Trigger States on Hover */
body.menu-active .menu-trigger:hover .trigger-circle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

body.menu-active .menu-trigger:hover .trigger-burger .line {
  background-color: var(--color-white);
}

/* Fullscreen Navigation Menu Overlay (Slide Down / Slide Up Transition) */
.fs-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #e5e3dc;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  clip-path: circle(0px at calc(100% - 99px) 79px);
  transition:
    clip-path 1.0s cubic-bezier(0.85, 0, 0.15, 1),
    visibility 1.0s;
  will-change: clip-path;
}

.fs-menu.open {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 99px) 79px);
  transition:
    clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 1.4s;
}

/* Overlay Grid Layout */
.fs-menu-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  width: 85%;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 8vh;
  gap: 5vw;
  align-items: center;
}

.fs-menu-col {
  display: flex;
  flex-direction: column;
}

.left-col {
  gap: 0.5rem;
  max-height: 80vh;
  overflow: visible;
  padding-right: 0;
  display: flex;
  flex-direction: column;
}

.right-col {
  position: relative;
  padding-left: 5vw;
  border-left: 1px solid rgba(8, 24, 46, 0.08);
  min-height: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Left Column Main Links */
.fs-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.9rem 2.8rem;
  border-radius: 40px;
  overflow: hidden;
  cursor: pointer;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  transition: color 0.4s var(--transition-smooth);
}

/* Static Golden Dot representation using ::before to prevent reflow */
.fs-menu-item::before {
  content: '';
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #c4a572;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fs-menu-item:hover::before,
.fs-menu-item.pseudo-hover::before,
.fs-menu-item:active::before,
.fs-menu-item:focus-within::before {
  opacity: 0;
}

/* Golden Dot (Hover Bubble Placeholder) - Rewritten to scale(0) -> scale(1) to avoid layout reflows */
.hover-bubble {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 35px 15px 35px 15px;
  background-color: var(--color-primary);
  transform: scale(0);
  transform-origin: 1.7rem center;
  z-index: 1;
  pointer-events: none;
  transition:
    transform 0.5s cubic-bezier(0.76, 0, 0.24, 1),
    border-radius 0.6s cubic-bezier(0.76, 0, 0.24, 1),
    background-color 0.4s ease;
  will-change: transform, border-radius;
}

/* On hover / active / touch: Liquid expand circle to organic background capsule covering 100% */
.fs-menu-item:hover .hover-bubble,
.fs-menu-item.pseudo-hover .hover-bubble,
.fs-menu-item:active .hover-bubble,
.fs-menu-item:focus-within .hover-bubble {
  transform: scale(1) !important;
  border-radius: 35px 15px 35px 15px;
  background-color: var(--color-primary);
}

/* Text color inversion on hover */
.fs-menu-item:hover .fs-menu-link,
.fs-menu-item:hover .fs-menu-link .char,
.fs-menu-item.pseudo-hover .fs-menu-link,
.fs-menu-item.pseudo-hover .fs-menu-link .char {
  color: #FFFFFF !important;
}

.fs-menu-item:hover .fs-menu-link-sub,
.fs-menu-item.pseudo-hover .fs-menu-link-sub {
  color: rgba(255, 255, 255, 0.6) !important;
  transform: translateX(8px);
  /* Shift sub-description to the right on hover */
}

.fs-menu-link-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
  /* Spacing between main block and dropdown indicator */
}

/* Elegant gold plus indicator for sub-menu items */
.fs-menu-dropdown-indicator {
  font-family: var(--font-body);
  font-size: 1.55rem;
  font-weight: 300;
  color: #c4a572;
  /* Golden Highlight */
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.4s ease;
  will-change: transform, color;
  user-select: none;
}

/* Rotate and color-invert the indicator when menu option is hovered */
.fs-menu-item:hover .fs-menu-dropdown-indicator,
.fs-menu-item.pseudo-hover .fs-menu-dropdown-indicator {
  color: #FFFFFF;
  transform: rotate(45deg);
  /* Bounces to a clean X indicator */
}

.fs-menu-link-mask {
  overflow: hidden;
  display: block;
  white-space: nowrap;
}

.fs-menu-link {
  display: block;
  font-family: var(--font-headings);
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
  transition: color 0.4s ease;
}

.fs-menu-link.split-text .char {
  display: inline-block;
  transform: translateY(105%) skewY(10deg);
  opacity: 0;
  transform-origin: left bottom;
  /* Added transform transitions for hover bounces */
  transition:
    transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.7s ease,
    color 0.4s ease;
  will-change: transform, opacity, color;
}

/* Bouncy letter wave floats staggered index-by-index on option hover */
.fs-menu-item:hover .fs-menu-link.split-text .char,
.fs-menu-item.pseudo-hover .fs-menu-link.split-text .char {
  transform: translateY(-4px);
  transition-delay: calc(var(--char-index) * 0.015s) !important;
}

/* Stagger entrance cascade of characters across all 5 menu items when open */
.fs-menu.open .fs-menu-link.split-text .char {
  transform: translateY(0) skewY(0);
  opacity: 1;
}

.fs-menu.open .fs-menu-item:nth-child(1) .char {
  transition-delay: calc(var(--char-index) * 0.015s + 0.08s);
}

.fs-menu.open .fs-menu-item:nth-child(2) .char {
  transition-delay: calc(var(--char-index) * 0.015s + 0.18s);
}

.fs-menu.open .fs-menu-item:nth-child(3) .char {
  transition-delay: calc(var(--char-index) * 0.015s + 0.28s);
}

.fs-menu.open .fs-menu-item:nth-child(4) .char {
  transition-delay: calc(var(--char-index) * 0.015s + 0.38s);
}

.fs-menu.open .fs-menu-item:nth-child(5) .char {
  transition-delay: calc(var(--char-index) * 0.015s + 0.48s);
}

/* Smooth exit transition for characters when closed */
.fs-menu:not(.open) .fs-menu-link.split-text .char {
  transform: translateY(105%) skewY(10deg);
  opacity: 0;
  transition:
    transform 0.65s cubic-bezier(0.85, 0, 0.15, 1),
    opacity 0.45s ease;
}

/* Fast exit for sub-details when closing */
.fs-menu:not(.open) .fs-menu-link-sub {
  transform: translateY(10px);
  opacity: 0;
  transition:
    transform 0.65s cubic-bezier(0.85, 0, 0.15, 1),
    opacity 0.45s ease;
}

/* Fast exit transition for right column blocks when closed */
.fs-menu:not(.open) .fs-info-block {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.45s ease,
    transform 0.65s cubic-bezier(0.85, 0, 0.15, 1);
}

.fs-menu-link-sub {
  font-family: var(--font-headings);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(8, 24, 46, 0.42);
  margin-top: 0.15rem;
  transform: translateY(10px);
  opacity: 0;
  transition:
    transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.8s ease,
    color 0.4s ease;
  will-change: transform, opacity;
  display: block;
}

.fs-menu.open .fs-menu-link-sub {
  transform: translateY(0);
  opacity: 1;
}

.fs-menu.open .fs-menu-item:nth-child(1) .fs-menu-link-sub {
  transition-delay: 0.25s;
}

.fs-menu.open .fs-menu-item:nth-child(2) .fs-menu-link-sub {
  transition-delay: 0.33s;
}

.fs-menu.open .fs-menu-item:nth-child(3) .fs-menu-link-sub {
  transition-delay: 0.41s;
}

.fs-menu.open .fs-menu-item:nth-child(4) .fs-menu-link-sub {
  transition-delay: 0.49s;
}

.fs-menu.open .fs-menu-item:nth-child(5) .fs-menu-link-sub {
  transition-delay: 0.57s;
}



.left-col.has-hovered-item .fs-menu-item:not(:hover):not(.pseudo-hover) .fs-menu-link {
  opacity: 0.25;
}

/* Right Column Content Blocks */
.fs-info-block {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  margin-bottom: 2rem;
}

.fs-info-block:last-child {
  margin-bottom: 0;
}

.fs-menu.open .fs-info-block {
  opacity: 1;
  transform: translateY(0);
}

.fs-menu.open .fs-info-block.block-1 {
  transition-delay: 0.4s;
}

.fs-menu.open .fs-info-block.block-2 {
  transition-delay: 0.5s;
}

.fs-menu.open .fs-info-block.block-3 {
  transition-delay: 0.6s;
}

.fs-block-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(8, 24, 46, 0.45);
  margin-bottom: 0.4rem;
  display: block;
}

.fs-block-text {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(8, 24, 46, 0.7);
  line-height: 1.55;
  margin: 0;
}

.fs-block-link {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  align-self: flex-start;
  transition: color 0.3s ease;
  margin-top: 0.3rem;
  display: inline-block;
}

.fs-block-link:hover {
  color: rgba(8, 24, 46, 0.7);
}

.fs-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fs-block-list li {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(8, 24, 46, 0.7);
  margin-bottom: 0.4rem;
  position: relative;
  padding-left: 14px;
}

.fs-block-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(8, 24, 46, 0.3);
}

/* Right Column Secondary Links */
.fs-sub-link-wrap {
  overflow: hidden;
  display: inline-block;
  margin-right: 1.5rem;
}

.fs-sub-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 600;
  color: rgba(8, 24, 46, 0.65);
  position: relative;
  padding: 0.2rem 0;
  transition: color 0.3s ease;
}

.fs-sub-link:hover {
  color: var(--color-primary);
}

.fs-sub-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background-color: var(--color-primary);
  transition:
    width 0.4s var(--transition-smooth),
    left 0.4s var(--transition-smooth);
}

.fs-sub-link:hover::after {
  width: 100%;
  left: 0;
}

/* Hover Sub-menus Switcher panel styles */
.fs-info-submenu {
  position: absolute;
  top: 0;
  left: 5vw;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.6s;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.fs-submenu-links {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1rem;
}

.fs-submenu-item-link {
  font-family: var(--font-headings);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  width: fit-content;
  transform: translateX(-15px);
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease,
    color 0.3s ease;
}

/* Subtle gold ink underline on hover */
.fs-submenu-item-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: #c4a572;
  /* Gold */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fs-submenu-item-link:hover::after {
  transform: scaleX(1);
}

/* Sibling focus dimming for submenu links */
.fs-submenu-links:hover .fs-submenu-item-link:not(:hover) {
  opacity: 0.35;
}

/* State controls for Hover Switcher (triggered by JS classes) */
.right-col.show-services .fs-info-block,
.right-col.show-about .fs-info-block {
  opacity: 0;
  transform: translateY(15px);
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active Service Submenu State */
.right-col.show-services #submenu-services {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.right-col.show-services #submenu-services .fs-submenu-item-link {
  transform: translateX(0);
  opacity: 1;
}

/* Staggered entrance cascade for services items */
.right-col.show-services #submenu-services .fs-submenu-item-link:nth-child(1) {
  transition-delay: 0.05s;
}

.right-col.show-services #submenu-services .fs-submenu-item-link:nth-child(2) {
  transition-delay: 0.12s;
}

.right-col.show-services #submenu-services .fs-submenu-item-link:nth-child(3) {
  transition-delay: 0.19s;
}

.right-col.show-services #submenu-services .fs-submenu-item-link:nth-child(4) {
  transition-delay: 0.26s;
}

/* Active About Submenu State */
.right-col.show-about #submenu-about {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.right-col.show-about #submenu-about .fs-submenu-item-link {
  transform: translateX(0);
  opacity: 1;
}

/* Staggered entrance cascade for about items */
.right-col.show-about #submenu-about .fs-submenu-item-link:nth-child(1) {
  transition-delay: 0.05s;
}

.right-col.show-about #submenu-about .fs-submenu-item-link:nth-child(2) {
  transition-delay: 0.12s;
}

.right-col.show-about #submenu-about .fs-submenu-item-link:nth-child(3) {
  transition-delay: 0.19s;
}

.right-col.show-about #submenu-about .fs-submenu-item-link:nth-child(4) {
  transition-delay: 0.26s;
}

/* Creative Quote Footer */
.fs-menu-footer {
  position: absolute;
  bottom: 45px;
  left: 7.5%;
  width: 85%;
  padding-top: 25px;
  display: flex;
  justify-content: flex-start;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.8s ease,
    transform 0.8s var(--transition-smooth);
  transition-delay: 0.65s;
}

.fs-menu.open .fs-menu-footer {
  opacity: 1;
  transform: translateY(0);
}

.fs-footer-text {
  font-family: var(--font-headings);
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(8, 24, 46, 0.4);
  letter-spacing: 0.04em;
}

/* Trust Metrics stats */
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s var(--transition-smooth);
  transition-delay: 0.4s;
  z-index: 5;
}

.hero-stats.active {
  opacity: 1;
  transform: translateY(0);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.stat-num {
  font-family: var(--font-headings);
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  font-weight: 400;
  color: var(--color-white);
}

.stat-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.stat-item-divider {
  width: 1px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Centered official accreditations bar */
.hero-accreditations {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  transform: translateY(20px) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  z-index: 5;
  transition:
    opacity 1.2s ease,
    transform 1.2s var(--transition-smooth);
  transition-delay: 0.6s;
  width: 100%;
  max-width: 1000px;
  text-align: center;
  margin-top: 1rem;
}

.hero-accreditations.active {
  opacity: 1;
  transform: translateY(0) !important;
}

.accred-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.accred-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-headings);
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   RESPONSIVE LAYOUT FOR MOBILE AND TABLETS
   ========================================================================== */
@media (max-width: 900px) {
  .header-minimal {
    padding: 20px 24px;
    justify-content: space-between;
  }

  .header-minimal.scrolled {
    padding: 14px 20px;
  }

  .menu-trigger {
    width: 62px;
    height: 62px;
    margin-left: auto;
    /* Locked strictly to the far right edge */
  }

  .trigger-burger {
    width: 50px;
    height: 50px;
  }

  .fs-menu {
    clip-path: circle(0px at calc(100% - 48px) 48px);
    transition:
      clip-path 1.0s cubic-bezier(0.85, 0, 0.15, 1),
      visibility 1.0s;
  }

  .fs-menu.open {
    clip-path: circle(150% at calc(100% - 48px) 48px);
    transition:
      clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 1.4s;
  }

  .fs-menu-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 80px;
    padding-bottom: 20px;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  .left-col {
    font-size: clamp(2rem, 5vw, 3.2rem);
    max-height: none;
    overflow: visible;
    gap: 0.6rem;
  }

  .fs-menu-item {
    width: 100% !important;
    padding: 0.85rem 1.6rem !important;
    border-radius: 30px !important;
    box-sizing: border-box !important;
  }

  .fs-menu-link-wrapper {
    width: 100% !important;
    gap: 1.2rem !important;
    display: flex !important;
    align-items: center !important;
  }

  .fs-menu-link {
    font-size: clamp(1.5rem, 5.5vw, 2.2rem) !important;
    width: 100% !important;
  }

  .fs-menu-item:hover .hover-bubble,
  .fs-menu-item.pseudo-hover .hover-bubble,
  .fs-menu-item:active .hover-bubble {
    border-radius: 30px !important;
  }

  .right-col {
    border-left: none;
    border-top: 1px solid rgba(8, 24, 46, 0.08);
    padding-left: 0;
    padding-top: 1.5rem;
    gap: 1.8rem;
    min-height: auto;
    height: auto !important;
    justify-content: flex-start;
  }

  .fs-info-submenu {
    position: relative;
    left: 0;
  }

  .fs-menu-footer {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 1.5rem;
    padding-top: 14px;
    padding-bottom: 90px !important; /* Safety zone for Safari bottom address bar */
    justify-content: center !important;
    text-align: center !important;
  }

  /* Android & Mobile Hero Section Layout Optimization */
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto !important;
    /* Allow auto height on mobile to prevent layout clipping */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 120px !important;
    /* Increase padding-top to prevent header overlap glitch */
    padding-bottom: 75px !important;
    position: relative;
    overflow: hidden;
  }

  .hero-content {
    width: 92%;
    max-width: 600px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.1rem;
    margin: 0 auto !important;
    z-index: 5;
  }

  .subtitle-wrapper {
    justify-content: center;
    width: 100%;
  }

  .hero-subtitle {
    font-size: clamp(0.62rem, 2.5vw, 0.82rem);
    letter-spacing: clamp(0.08em, 1vw, 0.16em);
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  .hero-title {
    font-size: clamp(2rem, 6.8vw, 3.2rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0 auto;
  }

  .cta-wrapper {
    margin-top: 0.4rem;
  }

  .btn-minimal {
    padding: 0.75rem 1.8rem;
    font-size: 0.68rem;
  }

  /* Trust Metrics stats - Inline Horizontal Row for Android Phones & Tablets */
  .hero-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.4rem !important;
    margin-top: 1rem !important;
  }

  .stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
  }

  .stat-num {
    font-size: clamp(1.25rem, 4.2vw, 1.8rem) !important;
    line-height: 1.1;
  }

  .stat-label {
    font-size: clamp(0.52rem, 2.1vw, 0.68rem) !important;
    letter-spacing: 0.06em !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center;
    margin-top: 0.2rem;
  }

  .stat-item-divider {
    display: block !important;
    width: 1px !important;
    height: 26px !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    flex-shrink: 0;
  }

  /* Accreditations - Flow Relative inside Hero Content */
  .hero-accreditations {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    transform: translateY(0) !important;
    width: 100% !important;
    max-width: 600px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    z-index: 5 !important;
    margin-top: 0.8rem !important;
  }

  .hero-accreditations.active {
    transform: translateY(0) !important;
  }

  .accred-label {
    font-size: 0.55rem;
    letter-spacing: 0.14em;
  }

  .accred-list {
    font-size: 0.72rem;
    gap: 0.3rem 0.5rem;
    justify-content: center;
  }
}

/* ==========================================================================
   ABOUT US SECTION (EDITORIAL PAPER GRID & PARALLAX)
   ========================================================================== */
.about-section {
  position: relative;
  background-color: #f5f4f0;
  /* Warm document paper color */
  color: var(--color-primary);
  padding: 180px 0;
  width: 100vw;
  overflow: hidden;
  z-index: 5;
  border-top: 1px solid rgba(8, 24, 46, 0.05);
}

.about-container {
  width: 85%;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 8%;
  align-items: center;
}

.about-text-col {
  display: flex;
  flex-direction: column;
}

.about-header {
  margin-bottom: 50px;
}

.about-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(8, 24, 46, 0.45);
  margin-bottom: 1.5rem;
}

.about-title {
  font-family: var(--font-headings);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--color-primary);
  margin: 0;
}

.about-narrative {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.about-para-lead {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.6;
  font-weight: 500;
  color: var(--color-primary);
  margin: 0;
}

.about-para {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  font-weight: 400;
  color: rgba(8, 24, 46, 0.7);
  margin: 0 0 1.5rem 0;
}

.about-para:last-child {
  margin-bottom: 0;
}

/* Visual Column & Parallax Wrapper */
.about-visual-col {
  position: relative;
  width: 100%;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Parallax outer wrappers (moved by JS transform) */
.about-parallax-wrapper {
  position: absolute;
  will-change: transform;
}

.about-parallax-wrapper.main-parallax {
  top: 0;
  right: 0;
  width: 80%;
  height: 85%;
  z-index: 1;
}

.about-parallax-wrapper.overlap-parallax {
  bottom: 0;
  left: 0;
  width: 60%;
  height: 50%;
  z-index: 2;
}

/* Image Container masks (for GSAP ScrollTrigger animations) */
.about-img-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(8, 24, 46, 0.08);
  background-color: #e5e3dc;
  will-change: transform, opacity;
  opacity: 0;
}

/* GPU-Accelerated Image Wipe Cover Layer */
.reveal-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
  /* Matches paper background */
  z-index: 20;
  transform-origin: right;
  will-change: transform;
  pointer-events: none;
}

/* Double-border frame on overlapping image to stand out against paper background */
.about-parallax-wrapper.overlap-parallax .about-img-container {
  border: 8px solid #f5f4f0;
}

/* The actual image tags (No CSS transitions to allow clean GSAP scrubbing) */
.about-parallax-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* Scroll-Driven Guideline Ink color shift past Hero */
body.scrolled-past-hero .editorial-margin-line {
  background-color: rgba(8, 24, 46, 0.08);
  /* Darken guideline over light sections */
}

/* Standard Scroll Reveal animation setups */
.scroll-reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

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

/* Stagger scroll reveals when they trigger together */
.about-subtitle.scroll-reveal {
  transition-delay: 0.05s;
}

.about-title.scroll-reveal {
  transition-delay: 0.15s;
}

.about-narrative .about-lead-wrapper.scroll-reveal {
  transition-delay: 0.25s;
}

.about-narrative .about-details.scroll-reveal {
  transition-delay: 0.35s;
}

.about-visual-col .main-container.scroll-reveal {
  transition-delay: 0.2s;
}

.about-visual-col .overlap-container.scroll-reveal {
  transition-delay: 0.4s;
}

/* Responsive adjustments for mobile */
@media (max-width: 900px) {
  .about-section {
    padding: 100px 0;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .about-visual-col {
    height: 450px;
  }

  .about-parallax-wrapper.main-parallax {
    width: 90%;
    height: 80%;
  }

  .about-parallax-wrapper.overlap-parallax {
    width: 65%;
    height: 50%;
  }
}

/* Fullscreen Menu Gold Decorative Numbers */
.fs-menu-number {
  font-family: var(--font-headings);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: rgba(196, 165, 114, 0.25);
  /* Gold outline effect with opacity */
  transition:
    color 0.4s ease,
    transform 0.4s var(--transition-smooth);
  margin-right: 1.5rem;
  line-height: 1;
  display: inline-block;
  flex-shrink: 0;
}

.fs-menu-item:hover .fs-menu-number,
.fs-menu-item.pseudo-hover .fs-menu-number {
  color: #c4a572;
  /* Solid gold on hover */
  transform: translateX(4px);
}

/* Credentials stats grid inside menu overlay right column */
.fs-menu-brand-block {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fs-menu-stats-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: auto 0;
}

.fs-menu-stat-card {
  border: 1px solid rgba(8, 24, 46, 0.05);
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1.25rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(8, 24, 46, 0.02);
  transition:
    border-color 0.4s var(--transition-smooth),
    transform 0.4s var(--transition-smooth),
    box-shadow 0.4s ease;
}

.fs-menu-stat-card:hover {
  border-color: rgba(196, 165, 114, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(8, 24, 46, 0.04);
}

.fs-menu-stat-num {
  font-family: var(--font-headings);
  font-size: 1.85rem;
  font-weight: 400;
  color: #c4a572;
  display: block;
  margin-bottom: 0.25rem;
}

.fs-menu-stat-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(8, 24, 46, 0.6);
}

.fs-menu-contact-footer {
  border-top: 1px solid rgba(8, 24, 46, 0.06);
  padding-top: 1.5rem;
}

/* What We Offer Section Styles */
.services-section {
  position: relative;
  width: 100vw;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background-color: var(--color-primary);
  /* Dark Navy */
}

.services-img-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  will-change: transform, opacity, clip-path;
  opacity: 0;
  clip-path: inset(0% 100% 0% 0%);
  /* Initially clipped horizontally from right */
}

.services-experience-badge {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(8, 24, 46, 0.85);
  /* Darker navy background for crisp readability */
}

@media (max-width: 900px) {
  .services-section {
    padding: 100px 0;
  }

  .services-container .grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .services-visual-col {
    height: 450px;
  }

  .services-image-wrapper {
    width: 95%;
    height: 85%;
  }
}

/* Gentle continuous float animation for experience badge */
@keyframes float-gentle {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.animate-float-gentle {
  animation: float-gentle 4.5s ease-in-out infinite;
}

.services-image-frame {
  will-change: transform;
}

/* Why Choose Us Section Styles */
.why-us-section {
  background-color: var(--color-bg-paper);
  /* Light Paper */
}

.why-us-img-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 25px 50px rgba(8, 24, 46, 0.08);
  will-change: transform, opacity, clip-path;
  opacity: 0;
  clip-path: inset(0% 100% 0% 0%);
  /* Initially clipped horizontally from right */
  background-color: #e5e3dc;
}

.why-us-image-frame {
  will-change: transform;
}

/* Responsive adjustments for mobile in Why Us section */
@media (max-width: 900px) {
  .why-us-section {
    padding: 100px 0;
  }

  .why-us-container .grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .why-us-visual-wrapper {
    height: 350px;
    order: 2;
    /* Put image below text on mobile flow */
  }
}

/* Interactive Services Dashboard Styles */
.service-tab-btn {
  border-left: 4px solid rgba(255, 255, 255, 0.05);
  /* Constant width of 4px to prevent reflow */
  transition: border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-tab-btn:hover {
  border-left-color: rgba(212, 175, 55, 0.4);
  background-color: rgba(255, 255, 255, 0.02);
  transform: translate3d(4px, 0, 0);
  /* translate3d instead of translateX */
}

.service-tab-btn.active {
  border-left-color: var(--color-secondary);
  /* Gold */
  background-color: rgba(255, 255, 255, 0.04);
  transform: translate3d(6px, 0, 0);
  /* translate3d instead of translateX */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.service-tab-panel {
  animation: panelFadeIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Glassmorphic Dashboard Container */
.services-dashboard-panel {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Parallax elements inside dashboard */
.services-panel-badge {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Luxury Interactive Footer Form Pills */
.interest-pill.active,
.revenue-pill.active {
  background-color: #D4AF37 !important;
  /* Gold Brand */
  border-color: #D4AF37 !important;
  color: #0A1128 !important;
  /* Navy */
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25);
}

/* Scroll-Linked Word Highlights */
.scroll-highlight-text span {
  display: inline-block;
  opacity: 0.25;
  transition: color 0.15s ease;
}

/* Card Glow & Shadow Effect Trackers */
.glow-card {
  position: relative;
}

/* Compositor-accelerated box shadow hover transition using pseudo-element opacity */
.glow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 20px 40px -10px rgba(212, 175, 55, 0.08);
  opacity: 0;
  transition: opacity 0.4s var(--transition-smooth);
  pointer-events: none;
  z-index: 1;
}

.glow-card:hover::after,
.glow-card.active-glow::after {
  opacity: 1;
}

.glow-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(400px circle at var(--x, 0px) var(--y, 0px), rgba(212, 175, 55, 0.06), transparent 80%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.glow-card:hover .glow-overlay,
.glow-card.active-glow .glow-overlay {
  opacity: 1;
}

/* Breathing Ambient Blurs for Footer */
@keyframes breathing-blur {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.18);
  }
}

.footer-contact-section .absolute.bg-secondary\/5 {
  animation: breathing-blur 9s infinite ease-in-out;
}

/* Gliding Footer Link Items with Gold Arrow Reveal */
.footer-link-item {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 15px;
  /* keep room for arrow always */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease !important;
}

.footer-link-item::before {
  content: '→';
  position: absolute;
  left: 0;
  opacity: 0;
  color: #D4AF37;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  transform: translateX(-5px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-link-item:hover {
  transform: translateX(5px);
  color: #D4AF37 !important;
}

.footer-link-item:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Premium Light Sweep Reflection Animation for Buttons */
.btn-sweep {
  position: relative;
  overflow: hidden;
}

.btn-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  transform: skewX(-25deg);
  transition: transform 0.75s ease;
  pointer-events: none;
  z-index: 1;
}

.btn-sweep:hover::after {
  transform: translate3d(300%, 0, 0) skewX(-25deg);
}

/* Form Inputs Gold Glow on Focus */
#footer-consultation-form input:focus {
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.25);
  border-color: #D4AF37 !important;
}

/* ==========================================================================
   MOBILE & TABLET OPTIMIZATIONS (UP TO 1024PX)
   ========================================================================== */
@media (max-width: 1024px) {

  /* Allow the fullscreen navigation menu to scroll vertically on smaller viewports */
  .fs-menu {
    display: block !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .fs-menu-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 100px 24px 20px 24px !important;
    gap: 2.5rem !important;
  }

  .fs-menu-col.left-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem !important;
  }

  .fs-menu-item {
    padding: 0.5rem 0 !important;
  }

  .fs-menu-link {
    font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
  }

  .fs-menu-number {
    font-size: 0.9rem !important;
  }

  .fs-menu-link-sub {
    font-size: 0.7rem !important;
  }

  .fs-menu-col.right-col {
    border-left: none !important;
    border-top: 1px solid rgba(8, 24, 46, 0.08) !important;
    padding-left: 0 !important;
    padding-top: 2rem !important;
    height: auto !important;
    min-height: auto !important;
    justify-content: flex-start !important;
    gap: 2.5rem !important;
  }

  .fs-menu-footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin-top: 2rem !important;
    padding-top: 20px !important;
    padding-bottom: 90px !important; /* Safety zone to prevent Safari bottom toolbar overlay */
    text-align: center !important;
    justify-content: center !important;
  }

  /* Reset about parallax layout shifts on mobile */
  #about-gsap-main-wrap,
  #about-gsap-overlap-wrap {
    transform: none !important;
  }
}

/* Make Why Choose Us section stack vertically on tablets and mid-size laptops (< 1200px) */
@media (max-width: 1200px) {
  .why-us-section {
    padding: 80px 0 !important;
    min-height: auto !important;
    height: auto !important;
  }

  .why-us-container .flex.flex-col.lg\:flex-row {
    flex-direction: column !important;
    gap: 3.5rem !important;
  }

  .why-us-left-col {
    width: 100% !important;
    text-align: center;
  }

  .why-us-title {
    margin-bottom: 1.5rem !important;
  }

  .why-us-right-col {
    width: 100% !important;
    overflow: visible !important;
  }

  .why-us-horizontal-track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
    transform: none !important;
  }

  .why-us-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 2rem !important;
  }
}

/* GPU-Accelerated Topographical SVG wave compositor animations (0ms JS overhead) */
.svg-wave-path {
  will-change: transform, opacity;
  transform-origin: center;
}

.svg-wave-path-1 {
  animation: svgWaveRipple1 22s infinite ease-in-out;
}

.svg-wave-path-2 {
  animation: svgWaveRipple2 26s infinite ease-in-out;
}

.svg-wave-path-3 {
  animation: svgWaveRipple1 30s infinite ease-in-out;
  animation-delay: -5s;
}

.svg-wave-path-4 {
  animation: svgWaveRipple2 34s infinite ease-in-out;
  animation-delay: -8s;
}

@keyframes svgWaveRipple1 {

  0%,
  100% {
    transform: translateY(0) scaleY(1) rotate(0deg);
    opacity: 0.7;
  }

  50% {
    transform: translateY(-25px) scaleY(1.08) rotate(1.2deg);
    opacity: 1;
  }
}

@keyframes svgWaveRipple2 {

  0%,
  100% {
    transform: translateY(0) scaleY(1.05) rotate(0deg);
    opacity: 0.8;
  }

  50% {
    transform: translateY(20px) scaleY(0.95) rotate(-1.2deg);
    opacity: 0.5;
  }
}

/* Tactile active state scale feedback on tap for Android & Mobile */
@media (max-width: 1024px) {

  .btn-minimal:active,
  .menu-trigger:active,
  .social-icon-btn:active,
  .fs-menu-item:active,
  .about-card:active,
  .why-us-card:active {
    transform: scale(0.96) !important;
    transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

/* Override card transition-all classes to prevent conflict with GSAP transforms/opacity */
.why-us-card,
.about-card {
  transition: background-color 0.3s ease, border-color 0.3s ease, border-left-width 0.3s ease, box-shadow 0.3s ease !important;
}

/* Premium FAQ Accordion Design System (Reference Image Cards Match) */
.faq-item {
  background-color: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 0 28px !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease !important;
  will-change: transform;
}

.faq-item:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}

.faq-item.is-active {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(0) !important;
}

/* Custom Interactive Plus Icon on the Left */
.faq-plus-icon {
  display: inline-block;
  color: var(--color-secondary);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.faq-item.is-active .faq-plus-icon {
  transform: rotate(45deg);
}

.faq-question-text {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.faq-item:hover .faq-question-text {
  color: #FFFFFF;
}

/* Editorial quote answer format */
.faq-answer-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 0 24px 34px !important;
  /* aligns nicely with the text under the plus */
  margin: 0;
  border: none !important;
  background-color: transparent;
  transition: color 0.4s ease;
}

/* Two-column responsive layout */
.faq-grid-wrapper {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

@media (min-width: 1024px) {
  .faq-grid-wrapper {
    display: grid !important;
    grid-template-columns: 0.38fr 0.62fr !important;
    gap: 80px !important;
    align-items: start !important;
  }

  .faq-header-column {
    position: sticky !important;
    top: 120px !important;
  }
}

.faq-section {
  background-color: #08182e !important;
  color: #ffffff;
}

.faq-section a.bg-white {
  color: #08182e !important;
}

.faq-section a.bg-white:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   HERO OVERRIDES FOR LIGHT PARCHMENT Another1.jpg BACKGROUND
   ========================================================================== */
.hero-subtitle {
  color: #a88310 !important; /* Darker rich gold */
  font-weight: 800 !important;
}

.hero-title {
  color: #030a14 !important; /* Deepest black-navy */
  font-weight: 400 !important; /* Bolder font weight for readability */
}

.hero-description {
  color: #030a14 !important; /* Deepest black-navy */
  font-weight: 500 !important; /* Bolder readable weight */
}

.hero .btn-minimal {
  color: #030a14 !important;
  border-color: rgba(8, 24, 46, 0.45) !important;
  font-weight: 800 !important;
}

.hero .btn-minimal:hover {
  color: #ffffff !important;
  border-color: #030a14 !important;
  background-color: #030a14 !important;
}

.stat-num {
  color: #000000 !important;
  font-weight: 700 !important;
}

.stat-label {
  color: #000000 !important;
  font-weight: 800 !important; /* Extra bold black */
}

.stat-item-divider {
  background-color: rgba(0, 0, 0, 0.45) !important;
}

.accred-label {
  color: #000000 !important;
  font-weight: 800 !important; /* Extra bold black */
}

.accred-list {
  color: #000000 !important;
  font-family: var(--font-body) !important; /* Use solid sans-serif Manrope instead of thin Garamond */
  font-style: normal !important; /* Remove thin italic style */
  font-weight: 700 !important; /* Bolder readable list */
}

.accred-bullet {
  color: #a88310 !important;
  font-weight: 900 !important;
}

/* Adjust vignette and brightness for light parchment background */
.hero-bg-vignette {
  background: radial-gradient(circle at center,
      rgba(247, 245, 240, 0.02) 0%,
      rgba(8, 24, 46, 0.1) 60%,
      rgba(8, 24, 46, 0.3) 100%) !important;
  transition: background 0.3s ease;
}

.hero-bg-img {
  filter: brightness(0.95) contrast(1.05) !important;
  background-position: center bottom !important;
  transform-origin: bottom center !important;
}

/* Desktop layout: top-aligned to keep text in empty parchment center & prevent overlap with books */
@media (min-width: 1024px) {
  .hero {
    justify-content: flex-start !important;
    padding-top: 105px !important; /* Adjusted slightly up for card heights */
  }
  .hero-content {
    max-width: 650px !important; /* Slightly wider to let cards look spacious */
    gap: 1.2rem !important;
  }
  .hero-stats {
    margin-top: 2rem !important;
    gap: 2.2rem !important;
    background: rgba(251, 250, 247, 0.93) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(168, 131, 16, 0.18) !important;
    border-radius: 20px !important;
    padding: 1.2rem 2.2rem !important;
    box-shadow: 0 15px 35px rgba(8, 24, 46, 0.04) !important;
    width: 100% !important;
  }
  .hero-accreditations {
    margin-top: 1.5rem !important;
    background: rgba(251, 250, 247, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(168, 131, 16, 0.15) !important;
    border-radius: 16px !important;
    padding: 0.8rem 1.8rem !important;
    box-shadow: 0 15px 35px rgba(8, 24, 46, 0.03) !important;
    width: 100% !important;
  }
}

/* Mobile & Android Optimizations (contrast overlay & GPU cycle saver) */
@media (max-width: 900px) {
  .hero-bg-vignette {
    background: rgba(247, 245, 240, 0.88) !important; /* Soft parchment fade for perfect contrast */
  }
  .hero-stats {
    background: rgba(251, 250, 247, 0.94) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(168, 131, 16, 0.15) !important;
    border-radius: 16px !important;
    padding: 0.8rem 1rem !important;
    width: 100% !important;
  }
  .hero-accreditations {
    background: rgba(251, 250, 247, 0.92) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(168, 131, 16, 0.12) !important;
    border-radius: 14px !important;
    padding: 0.6rem 1rem !important;
    width: 100% !important;
  }
  /* Stop CPU-intensive keyframes on mobile browser to prevent scroll lag */
  .svg-wave-path {
    animation: none !important;
  }
}