/* Custom variables matching luxury fluid styling rules */
html {
  font-size: clamp(14px, 0.85vw + 6px, 20px);
  scroll-behavior: smooth;
  font-family: var(--font-family, serif);
}

body {
  margin: 0;
  padding: 0;
  background-color: #141412;
  color: #FFFFFF;
  font-family: var(--font-family, serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fluid spacing and offset classes */
header#site-header {
  height: var(--hdr-height);
  background-color: var(--hdr-bg);
  padding: 0 var(--hdr-logo-x);
  display: flex;
  justify-content: space-between;
  align-items: center; /* Enforces native vertical alignment across all headers [1] */
}

#header-logo {
  width: var(--hdr-logo-w);
  transform: translateY(var(--hdr-logo-y)) !important; /* Clean translation offset without breaking center [1] */
}

#header-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Locks navigation geometrically in the exact horizontal and vertical center of the screen [1] */
  transform: translate(-50%, calc(-50% + var(--hdr-nav-v-offset))) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hdr-nav-gap);
}

.nav-link {
  font-size: var(--hdr-nav-fs);
  color: var(--hdr-nav-color);
  letter-spacing: var(--hdr-nav-ls);
  position: relative;
  transition: transform var(--hdr-nav-h-dur) ease, color 0.3s ease;
}

.nav-link:focus-visible {
  outline: 2px solid var(--hdr-nav-color);
  outline-offset: 4px;
}

/* SECTION 1 - HERO INDEPENDENT COORDINATES (Offset Preserving) [1] */
#s1-logo-small {
  width: var(--s1-logo-sm-w);
  --base-x: var(--s1-logo-sm-x);
  --base-y: var(--s1-logo-sm-y);
}

#s1-logo-large {
  width: var(--s1-logo-lg-w);
  --base-x: var(--s1-logo-lg-x);
  --base-y: var(--s1-logo-lg-y);
}

#s1-tagline {
  font-size: var(--s1-tagline-fs);
  color: var(--s1-tagline-color);
  --base-x: var(--s1-tagline-x);
  --base-y: var(--s1-tagline-y);
}

#s1-buttons {
  gap: var(--s1-btn-gap);
  --base-x: var(--s1-btn-x, 0px);
  --base-y: var(--s1-btn-y, 0px);
  position: absolute;
}

/* LUXURY INTERACTIVE COMPONENT HOVER OVERRIDES */
/* Merges physical offsets and scale factors inside a single, bulletproof rule to prevent layout resets when hovered [1] */
.btn-filled, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: translate(var(--base-x, 0px), var(--base-y, 0px)) scale(1) !important;
  transition: transform var(--hover-dur, 0.3s) cubic-bezier(0.25, 1, 0.5, 1), 
              border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn-filled:hover, .btn-outline:hover {
  transform: translate(var(--base-x, 0px), var(--base-y, 0px)) scale(var(--hover-scale, 1.05)) !important;
}

.btn-filled:focus-visible, .btn-outline:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

#s1-indicator {
  --base-x: 0px;
  --base-y: calc(-1 * var(--s1-indicator-y));
}

#s1-indicator-text {
  font-size: var(--s1-indicator-fs);
  color: var(--s1-indicator-color);
}

/* SECTION 2 - 5 PINNING CHAIN COORDINATES */
#morph-sequence-wrapper {
  background-color: #000000; /* Solid mask to prevent Section 1 from peeking through [1] */
}

#section2 {
  background-color: var(--s2-bg-color);
}
#s2-text {
  font-size: var(--s2-text-fs);
  color: var(--s2-text-color);
  transform: translate(var(--s2-text-x), var(--s2-text-y));
}
#s2-indicator {
  bottom: var(--s2-indicator-y);
}

#s3-text {
  font-size: var(--s3-text-fs);
  color: var(--s3-text-color);
  transform: translate(var(--s3-text-x), var(--s3-text-y));
}
#s3-indicator {
  bottom: var(--s3-indicator-y);
}

#section4 {
  background-color: var(--s4-bg-color);
}
#s4-text {
  font-size: var(--s4-text-fs);
  color: var(--s4-text-color);
  transform: translate(var(--s4-text-x), var(--s4-text-y));
}
#s4-indicator {
  bottom: var(--s4-indicator-y);
}

#s5-text {
  font-size: var(--s5-text-fs);
  color: var(--s5-text-color);
  transform: translate(var(--s5-text-x), var(--s5-text-y));
}
#s5-indicator {
  bottom: var(--s5-indicator-y);
}

/* STANDALONE SECTION 6 (Solidified to block background peeking during loads) */
#section6 {
  background-color: #000000; /* Force solid black fill before video initializes */
}
#s6-text-topleft {
  font-size: var(--s6-t1-fs);
  color: var(--s6-t1-color);
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--s6-t1-x)), calc(-50% + var(--s6-t1-y)));
}

#s6-text-bottomright {
  font-size: var(--s6-t2-fs);
  color: var(--s6-t2-color);
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--s6-t2-x)), calc(-50% + var(--s6-t2-y)));
}
#s6-indicator {
  bottom: var(--s6-indicator-y);
}

/* SECTION 7, 9, 10, 11 HEIGHT & VISIBILITY CONFIGURATIONS */
#section7 {
  height: var(--s7-h);
  background-color: var(--s7-bg);
}
#s7-img {
  width: var(--s7-img-w) !important;
  transform: translate(var(--s7-img-x), var(--s7-img-y)) !important;
  max-height: 80vh !important;
  max-width: none !important; /* Bypasses Tailwind global 100% boundary to support over-scaling [1] */
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  display: block;

  /* Contour-aware luxury drop shadow (neutralizes white rectangular borders) [1] */
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.16)) !important;
}
#s7-heading {
  font-size: var(--s7-head-fs);
  color: var(--s7-head-color);
}
#s7-body {
  font-size: var(--s7-body-fs);
  color: var(--s7-body-color);
  line-height: var(--s7-body-lh);
}

#section8 #s8-logo {
  width: var(--s8-logo-w);
  transform: translate(var(--s8-logo-x), var(--s8-logo-y));
}
#section8 #s8-tagline {
  font-size: var(--s8-tagline-fs);
  color: var(--s8-tagline-color);
  transform: translate(var(--s8-tagline-x), var(--s8-tagline-y));
}
#s8-indicator {
  bottom: var(--s8-indicator-y);
}

#section9 {
  height: var(--s9-h);
}
#s9-heading {
  font-size: var(--s9-head-fs);
  color: var(--s9-head-color);
  transform: translate(var(--s9-head-x), var(--s9-head-y)) !important; /* Dynamic X and Y translation [1] */
}
#s9-body {
  font-size: var(--s9-body-fs);
  color: var(--s9-body-color);
  line-height: var(--s9-body-lh);
  transform: translate(var(--s9-body-x), var(--s9-body-y)) !important; /* Dynamic X and Y translation [1] */
}
#s9-btn-enquire {
  --base-x: var(--s9-btn-x, 0px);
  --base-y: var(--s9-btn-y, 0px);
  --hover-scale: var(--s9-btn-h-scale, 1.05);
  --hover-dur: var(--s9-btn-h-dur, 0.3s);
}

#section10 {
  height: var(--s10-h);
  background-color: var(--s10-bg);
}
#s10-img {
  width: var(--s10-img-w) !important;
  transform: translate(var(--s10-img-x), var(--s10-img-y)) !important;
  max-height: 80vh !important;
  max-width: none !important; /* Bypasses Tailwind global 100% boundary to support over-scaling [1] */
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  display: block;

  /* Contour-aware luxury drop shadow (neutralizes white rectangular borders) [1] */
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.16)) !important;
}
#s10-heading {
  font-size: var(--s10-head-fs);
  color: var(--s10-head-color);
  transform: translate(var(--s10-head-x), var(--s10-head-y)); /* Dual coordinate control [1] */
}
#s10-minerals-grid {
  transform: translate(var(--s10-text-x), var(--s10-text-y)); /* Dual coordinate control [1] */
}
.mineral-row {
  border-bottom: 1px solid rgba(28, 28, 26, 0.1);
  padding-bottom: 8px;
  font-size: var(--s10-min-fs);
  color: var(--s10-min-color);
}

#section11 {
  height: var(--s11-h);
  background-color: var(--s11-bg);
}
#s11-img {
  width: var(--s11-img-w) !important;
  transform: translate(var(--s11-img-x), var(--s11-img-y)) !important;
  max-height: 80vh !important;
  max-width: none !important; /* Bypasses Tailwind global 100% boundary to support over-scaling [1] */
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  display: block;

  /* Contour-aware luxury drop shadow (neutralizes white rectangular borders) [1] */
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.16)) !important;
}
#s11-heading {
  font-size: var(--s11-head-fs);
  color: var(--s11-head-color);
  transform: translate(var(--s11-head-x), var(--s11-head-y)); /* Dual coordinate control [1] */
}
#s11-text-col > div {
  transform: translate(var(--s11-text-x), var(--s11-text-y)); /* Dual coordinate control [1] */
}
#s11-row-email, #s11-row-phone {
  gap: var(--s11-icon-gap);
  font-size: var(--s11-c-fs);
  color: var(--s11-c-color);
}
#s11-row-email svg, #s11-row-phone svg {
  width: var(--s11-icon-sz);
  height: var(--s11-icon-sz);
}

/* FOOTER BASE CONFIGURATION */
#site-footer {
  background-color: var(--ftr-bg);
  height: var(--ftr-h) !important; /* Exact physical height [1] */
  padding: var(--ftr-pad) !important; /* Exact inner padding [1] */
  gap: var(--ftr-gap) !important; /* Exact layout gap spacing [1] */
  box-sizing: border-box !important; /* Stops clipping when size is modified [1] */
}
#footer-logo {
  width: var(--ftr-logo-w);
}
#footer-details {
  gap: 20px;
  font-size: var(--ftr-details-fs);
  color: var(--ftr-details-color);
}
#footer-copyright {
  font-size: var(--ftr-copy-fs);
  color: var(--ftr-copy-color);
}

/* STICKY REVEAL (Mechanic B) - SPECIFIC COUPLING */
.sticky-bottom-bound {
  position: sticky;
  top: 0;
  z-index: 10;
}
.incoming-scroll-layer {
  position: relative;
  z-index: 20;
}

/* ACCESSIBILITY FOCUS FALLBACKS */
.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}