/* ================================================================
   VAQAR · وقار  —  Premium Collector House
   style.css  v4  |  ~3000 lines  |  World-class luxury design
   ================================================================ */

/* ═══════════════════════════════════════════════════════════════
   1.  CUSTOM PROPERTIES
═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Color palette ──────────────────────────── */
  --c-bg:         #080808;
  --c-bg-1:       #0f0f0f;
  --c-bg-2:       #141414;
  --c-bg-3:       #1a1a1a;
  --c-bg-4:       #222222;

  --c-gold:       #D4AF37;
  --c-gold-2:     #E8C84A;
  --c-gold-3:     #F0D878;
  --c-gold-dk:    #9A7D1A;
  --c-gold-pale:  rgba(212, 175, 55, 0.08);
  --c-gold-mid:   rgba(212, 175, 55, 0.18);
  --c-gold-glow:  rgba(212, 175, 55, 0.28);

  --c-white:      #F0F0F0;
  --c-off-white:  #D8D8D8;
  --c-muted:      #686868;
  --c-muted-2:    #909090;
  --c-muted-3:    #ABABAB;

  --c-border:     rgba(255, 255, 255, 0.055);
  --c-border-2:   rgba(255, 255, 255, 0.09);
  --c-border-gold:rgba(212, 175, 55, 0.22);

  /* ── Typography ────────────────────────────────────── */
  --f-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --f-sans:  'Montserrat', 'DM Sans', -apple-system, system-ui, sans-serif;
  --f-ar:    'Scheherazade New', 'Traditional Arabic', serif;

  /* ── Spacing — Fibonacci scale (px) ─────────── */
  --sp-1:  8px;    /* fibonacci: 8 */
  --sp-2:  13px;   /* 13 */
  --sp-3:  21px;   /* 21 */
  --sp-4:  34px;   /* 34 */
  --sp-5:  55px;   /* 55 */
  --sp-6:  89px;   /* 89 */
  --sp-7: 144px;   /* 144 */

  /* ── Radii ───────────────────────────────────── */
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg: 12px;

  /* ── Easing ──────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-circ:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Durations ───────────────────────────────── */
  --t-xs:  150ms;
  --t-sm:  300ms;
  --t-md:  600ms;
  --t-lg: 1000ms;
  --t-xl: 1400ms;
}

/* ═══════════════════════════════════════════════════════════════
   2.  RESET & BASE
═══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background: var(--c-bg);
  color: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  font-family: var(--f-sans);
  line-height: 1.6;
  overflow-x: hidden;
  background: var(--c-bg);
}

a  { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul  { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
canvas { display: block; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,.5); }

/* Selection */
::selection { background: rgba(212,175,55,.25); color: var(--c-white); }

/* ═══════════════════════════════════════════════════════════════
   3.  TYPOGRAPHY SYSTEM
═══════════════════════════════════════════════════════════════ */
.heading-xl {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 3.2vw + 0.8rem, 3.6rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--c-white);
  letter-spacing: -0.01em;
}
.heading-xl em {
  font-style: italic;
  color: var(--c-gold-2);
}

.heading-lg {
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 2.5vw + 0.5rem, 2.8rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--c-white);
}
.heading-lg em { font-style: italic; color: var(--c-gold-2); }

.heading-md {
  font-family: var(--f-serif);
  font-size: clamp(1.3rem, 1.8vw + 0.3rem, 2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-white);
}

.label {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-2);
}

.body-md {
  font-size: clamp(0.93rem, 0.85vw + 0.5rem, 1.02rem);
  line-height: 1.78;
  color: var(--c-muted-3);
  margin-bottom: var(--sp-3);
  font-weight: 300;
}

.body-sm {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--c-muted-2);
}

/* ═══════════════════════════════════════════════════════════════
   4.  LAYOUT UTILITIES
═══════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: clamp(var(--sp-3), 5vw, var(--sp-6));
}

.section {
  padding-block: clamp(var(--sp-6), 11vw, var(--sp-7));
}

.section-head {
  text-align: center;
  margin-bottom: clamp(var(--sp-5), 8vw, var(--sp-6));
  max-width: 700px;
  margin-inline: auto;
}
.section-head .label { justify-content: center; display: block; }

/* ═══════════════════════════════════════════════════════════════
   5.  DECORATIVE ELEMENTS
═══════════════════════════════════════════════════════════════ */
.gold-line {
  width: 48px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-2), transparent);
  margin: var(--sp-4) 0;
  border-radius: 2px;
}
.gold-line--sm { width: 30px; margin: var(--sp-2) 0 var(--sp-3); }
.gold-line--center { margin-inline: auto; }

.alert-box {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  background: rgba(212,175,55,0.04);
  border: 1px solid rgba(212,175,55,0.14);
  border-left: 3px solid var(--c-gold);
  padding: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
}
.alert-box svg { flex-shrink: 0; margin-top: 2px; }
.alert-box p { font-size: 0.9rem; color: var(--c-muted-3); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════════
   6.  KEYFRAME ANIMATIONS
═══════════════════════════════════════════════════════════════ */

/* Reveal animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Preloader */
@keyframes preloaderFade {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}
@keyframes preloaderLogoFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes preloaderTextBlink {
  0%,100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* Hero */
@keyframes heroZoom {
  from { transform: scale(1.08) translateY(0); }
  to   { transform: scale(1.0) translateY(-12px); }
}
@keyframes heroLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes scrollPulse {
  0%, 100% { height: 0; opacity: 0; }
  50%       { height: 52px; opacity: 1; }
}
@keyframes grainMove {
  0%  { transform: translate(0, 0); }
  20% { transform: translate(-2%, -4%); }
  40% { transform: translate(4%, 2%); }
  60% { transform: translate(-3%, 5%); }
  80% { transform: translate(5%, -3%); }
  100%{ transform: translate(0, 0); }
}

/* Number counting pop */
@keyframes numPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Marquee */
@keyframes marqueeRoll {
  to { transform: translateX(-50%); }
}

/* Cursor */
@keyframes cursorRingPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* Gold shimmer */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* Rotate */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pulse glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(212,175,55,0.2); }
  50%       { box-shadow: 0 0 32px rgba(212,175,55,0.45); }
}

/* Card scan line */
@keyframes scanLine {
  from { top: -100%; }
  to   { top: 110%; }
}

/* Stagger fade up */
@keyframes staggerUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Border draw */
@keyframes borderGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Float bob */
@keyframes floatBob {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}

/* Path line draw animation */
@keyframes pathDraw {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* CTA particle float */
@keyframes ctaParticle {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-220px) scale(0.2); opacity: 0; }
}

/* Hero badge pulse */
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(212,175,55,0); }
}

/* Typing cursor blink */
@keyframes blink {
  50% { opacity: 0; }
}

/* Modal open */
@keyframes modalIn {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Frame corner draw */
@keyframes cornerExpand {
  from { width: 0; height: 0; opacity: 0; }
  to   { width: 28px; height: 28px; opacity: 1; }
}

/* Number counter reveal */
@keyframes numberReveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Underline sweep */
@keyframes underlineSweep {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* ═══════════════════════════════════════════════════════════════
   7.  PRELOADER
═══════════════════════════════════════════════════════════════ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--ease-out), visibility 0.8s;
}
.preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  animation: preloaderLogoFloat 2.5s ease-in-out infinite;
}

.preloader__logo {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader__img { width: 100%; height: 100%; object-fit: contain; }

.preloader__bar {
  width: 160px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.preloader__fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-2));
  transition: width 0.1s linear;
}
.preloader__text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-serif);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--c-muted-2);
  animation: preloaderTextBlink 1.5s ease-in-out infinite;
}
.preloader__en { text-transform: uppercase; }
.preloader__dot { color: var(--c-gold); font-size: 0.5rem; }
.preloader__ar { color: var(--c-gold-2); }

/* ═══════════════════════════════════════════════════════════════
   8.  CUSTOM CURSOR
═══════════════════════════════════════════════════════════════ */
.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
  will-change: left, top;
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.45);
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(212,175,55,0.08);
  transition: width 0.35s var(--ease-out),
              height 0.35s var(--ease-out),
              border-color 0.35s,
              background 0.35s,
              box-shadow 0.35s,
              opacity 0.35s;
  will-change: left, top;
}
body.cursor-hover .cursor-dot  { width: 10px; height: 10px; }
body.cursor-hover .cursor-ring { 
  width: 54px; 
  height: 54px; 
  border-color: var(--c-gold); 
  background: rgba(212,175,55,0.04);
  box-shadow: 0 0 15px rgba(212,175,55,0.22);
}
body.cursor-click .cursor-ring {
  animation: cursorRingPulse 0.5s var(--ease-out) forwards;
}
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   9.  BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
  background: var(--c-gold);
  padding: 16px 34px;
  position: relative;
  overflow: hidden;
  transition: background var(--t-sm) var(--ease-circ),
              color var(--t-sm),
              box-shadow var(--t-md),
              gap var(--t-sm) var(--ease-spring);
  cursor: none;
}
.btn-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  background-size: 200% 100%;
  transform: translateX(-100%);
  transition: transform 0.55s var(--ease-out);
}
.btn-gold:hover::before { transform: translateX(100%); }
.btn-gold:hover {
  background: var(--c-gold-2);
  box-shadow: 0 8px 32px rgba(212,175,55,0.35), 0 2px 8px rgba(212,175,55,0.2);
  gap: var(--sp-3);
}
.btn-gold--lg { padding: 20px 48px; font-size: 0.85rem; }
.btn-gold__arrow {
  transition: transform var(--t-sm) var(--ease-spring);
  flex-shrink: 0;
}
.btn-gold:hover .btn-gold__arrow { transform: translateX(4px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted-3);
  padding: 15px 32px;
  border: 1px solid rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
  transition: color var(--t-sm), border-color var(--t-sm), background var(--t-sm);
  cursor: none;
}
.btn-outline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(212,175,55,0.05);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.btn-outline:hover { color: var(--c-gold); border-color: rgba(212,175,55,0.5); }
.btn-outline:hover::after { transform: scaleX(1); }

/* Magnetic button wrapper */
.mag-btn { cursor: none; }

/* ═══════════════════════════════════════════════════════════════
   10. HEADER
═══════════════════════════════════════════════════════════════ */
.hdr {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 800;
  padding-block: 22px;
  background: rgba(8,8,8,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition:
    padding var(--t-sm) var(--ease-circ),
    background var(--t-sm),
    backdrop-filter var(--t-sm),
    border-color var(--t-sm);
  will-change: padding, background;
}
.hdr.is-scrolled {
  padding-block: 14px;
  background: rgba(8,8,8,0.96);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border-color: var(--c-border);
}
.hdr.is-hidden { transform: translateY(-100%); transition: transform 0.4s var(--ease-circ); }
.hdr.is-visible { transform: translateY(0); }

.hdr__inner {
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: clamp(var(--sp-3), 5vw, var(--sp-6));
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Logo */
.hdr__logo { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.hdr__logo-img { height: 36px; width: auto; object-fit: contain; transition: filter var(--t-sm); }
.hdr__logo:hover .hdr__logo-img { filter: brightness(1.2); }
.hdr__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  gap: 1px;
}
.hdr__en { font-family: var(--f-serif); font-size: 1.1rem; font-weight: 500; letter-spacing: 0.1em; color: var(--c-white); }
.hdr__ar { font-family: var(--f-serif); font-size: 0.78rem; color: var(--c-gold); letter-spacing: 0.04em; }

/* Nav */
.hdr__nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-3), 2.5vw, var(--sp-5));
  margin-inline: auto;
}
.hdr__link {
  position: relative;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  transition: color var(--t-xs);
  padding-bottom: 3px;
  cursor: none;
}
.hdr__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s var(--ease-out);
  box-shadow: 0 1px 4px var(--c-gold-glow);
}
.hdr__link:hover { color: var(--c-gold); }
.hdr__link:hover::after { transform: scaleX(1); }
.hdr__link.is-active { color: var(--c-gold); }
.hdr__link.is-active::after { transform: scaleX(1); }

/* Header CTA */
.hdr__cta {
  flex-shrink: 0;
  font-size: 0.7rem;
  padding: 10px 22px;
}

/* Burger */
.hdr__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  cursor: pointer;
}
.hdr__burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--c-white);
  transition: transform 0.38s var(--ease-out), opacity 0.38s, width 0.38s;
  transform-origin: center;
}
.hdr__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hdr__burger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.hdr__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════
   11. MOBILE NAV
═══════════════════════════════════════════════════════════════ */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 790;
  pointer-events: none;
  overflow: hidden;
}
.mnav__bg {
  position: absolute;
  inset: 0;
  background: rgba(6,6,6,0.98);
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease-inout);
}
.mnav.is-open .mnav__bg { transform: translateY(0); }
.mnav.is-open { pointer-events: all; }

.mnav__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-4);
  opacity: 0;
  transition: opacity 0.4s 0.2s;
}
.mnav.is-open .mnav__content { opacity: 1; }

.mnav__nav { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.mnav__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 10px 20px;
  width: 100%;
  justify-content: center;
  border-bottom: 1px solid var(--c-border);
  transition: background var(--t-xs);
  cursor: pointer;
}
.mnav__link:last-child { border-bottom: none; }
.mnav__link:hover { background: rgba(212,175,55,0.04); }
.mnav__num {
  font-family: var(--f-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--c-gold);
  opacity: 0.7;
  min-width: 22px;
}
.mnav__label {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 300;
  color: var(--c-muted-3);
  transition: color var(--t-xs);
}
.mnav__link:hover .mnav__label { color: var(--c-gold); }

.mnav__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.mnav__social {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.mnav__social a { color: var(--c-muted); transition: color var(--t-xs); }
.mnav__social a:hover { color: var(--c-gold); }

/* ═══════════════════════════════════════════════════════════════
   12. HERO
═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  overflow: hidden;
  background: var(--c-bg);
}

/* Canvas particles */
.hero__canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__canvas {
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

/* Background image */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.22;
  animation: heroZoom 25s ease-in-out infinite alternate;
  will-change: transform;
}
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 65% 50%, rgba(8,8,8,0) 0%, rgba(8,8,8,0.65) 55%, var(--c-bg) 100%),
    linear-gradient(180deg,
      rgba(8,8,8,0.6) 0%,
      rgba(8,8,8,0.05) 35%,
      rgba(8,8,8,0.8) 88%,
      var(--c-bg) 100%
    );
}
.hero__bg-grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  animation: grainMove 8s steps(10) infinite;
  pointer-events: none;
  opacity: 0.35;
}

/* Hero body */
.hero__body {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(var(--sp-4), 5vw, var(--sp-6));
  max-width: 1300px;
  margin-inline: auto;
  width: 100%;
  padding-inline: clamp(var(--sp-3), 5vw, var(--sp-6));
  padding-block: clamp(120px, 13vw, 160px) var(--sp-5);
}

/* Hero left */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  margin-bottom: var(--sp-4);
  padding: 8px 16px 8px 10px;
  border: 1px solid var(--c-border-gold);
  background: rgba(212,175,55,0.04);
}
.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  animation: badgePulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

.hero__h1 {
  font-family: var(--f-serif);
  font-size: clamp(3rem, 7vw + 0.5rem, 7rem);
  font-weight: 600;
  line-height: 1.0;
  color: var(--c-white);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.02em;
}
.hero__h1-line { display: block; overflow: hidden; }
.hero__h1-line--italic {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-2) 40%, var(--c-gold-3) 70%, var(--c-gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

.hero__sub {
  font-size: clamp(0.98rem, 1.2vw + 0.4rem, 1.15rem);
  line-height: 1.8;
  color: var(--c-muted-3);
  max-width: 500px;
  margin-bottom: var(--sp-5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.hero__social {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.hero__social-link {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--t-xs), transform var(--t-sm) var(--ease-spring);
  cursor: none;
}
.hero__social-link:hover { color: var(--c-gold); transform: translateY(-2px); }
.hero__social-sep {
  width: 1px;
  height: 16px;
  background: var(--c-border-2);
}

/* Hero right — framed image */
.hero__right { display: flex; justify-content: flex-end; align-items: center; }
.hero__frame {
  position: relative;
  width: min(440px, 44vw);
  aspect-ratio: 5 / 6;
}
.hero__frame-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.08) 0%, transparent 70%);
  animation: floatBob 6s ease-in-out infinite;
  pointer-events: none;
}
.hero__frame-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform var(--t-lg) var(--ease-out);
}
.hero__frame:hover .hero__frame-img { transform: scale(1.025); }
.hero__frame-border { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hfb {
  position: absolute;
  border-color: var(--c-gold);
  border-style: solid;
  width: 28px;
  height: 28px;
  transition: width 0.6s var(--ease-out), height 0.6s var(--ease-out);
}
.hero__frame:hover .hfb { width: 40px; height: 40px; }
.hfb--tl { top: -8px; left: -8px; border-width: 1.5px 0 0 1.5px; }
.hfb--tr { top: -8px; right: -8px; border-width: 1.5px 1.5px 0 0; }
.hfb--bl { bottom: -8px; left: -8px; border-width: 0 0 1.5px 1.5px; }
.hfb--br { bottom: -8px; right: -8px; border-width: 0 1.5px 1.5px 0; }

.hero__frame-tag {
  position: absolute;
  bottom: var(--sp-4);
  left: calc(-1 * var(--sp-4));
  z-index: 3;
  background: rgba(8,8,8,0.95);
  border: 1px solid var(--c-border-gold);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
  backdrop-filter: blur(12px);
}
.hero__frame-tag-line { font-family: var(--f-serif); font-size: 0.72rem; letter-spacing: 0.15em; color: var(--c-muted); text-transform: uppercase; }
.hero__frame-tag-sub  { font-family: var(--f-serif); font-size: 1.05rem; color: var(--c-gold); font-weight: 300; }

/* Scroll hint */
.hero__scroll {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--sp-4);
  animation: fadeIn 1.5s 2s both;
}
.hero__scroll-line {
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.hero__scroll-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent, var(--c-gold));
  animation: scrollPulse 2.4s ease-in-out infinite;
}
.hero__scroll-text {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Hero numbers bar */
.hero__numbers {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--c-border);
  background: rgba(8,8,8,0.85);
  backdrop-filter: blur(12px);
  animation: fadeIn 1.5s 1.8s both;
}
.hero__num-item {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-wrap: wrap;
}
.hero__num-item strong {
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 300;
  color: var(--c-gold);
  line-height: 1;
}
.hero__num-sfx { font-family: var(--f-serif); font-size: 1.2rem; color: var(--c-gold); }
.hero__num-item small {
  width: 100%;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 3px;
}
.hero__num-div {
  width: 1px;
  align-self: stretch;
  background: var(--c-border);
}

/* Reveal items in hero */
.reveal-item   { opacity: 0; transform: translateY(28px); }
.reveal-line   { opacity: 0; transform: translateY(100%); display: block; }
.reveal-from-left  { opacity: 0; transform: translateX(-40px); }
.reveal-from-right { opacity: 0; transform: translateX(40px); }

.reveal-item.is-visible,
.reveal-line.is-visible,
.reveal-from-left.is-visible,
.reveal-from-right.is-visible {
  animation-fill-mode: both;
  animation-timing-function: var(--ease-out);
  animation-duration: 0.9s;
}
.reveal-item.is-visible      { animation-name: fadeUp; }
.reveal-line.is-visible      { animation-name: fadeUp; }
.reveal-from-left.is-visible  { animation-name: fadeLeft; }
.reveal-from-right.is-visible { animation-name: fadeRight; }

/* Stagger grid children */
.stagger-grid .stagger-child { opacity: 0; transform: translateY(28px); }
.stagger-grid.is-visible .stagger-child {
  animation: staggerUp 0.8s var(--ease-out) both;
}
.stagger-grid.is-visible .stagger-child[data-index="0"] { animation-delay: 0ms; }
.stagger-grid.is-visible .stagger-child[data-index="1"] { animation-delay: 110ms; }
.stagger-grid.is-visible .stagger-child[data-index="2"] { animation-delay: 220ms; }
.stagger-grid.is-visible .stagger-child[data-index="3"] { animation-delay: 330ms; }

/* ═══════════════════════════════════════════════════════════════
   13. MARQUEE STRIP
═══════════════════════════════════════════════════════════════ */
.marquee-strip {
  overflow: hidden;
  border-block: 1px solid rgba(212,175,55,0.1);
  background: rgba(8,8,8,0.98);
  padding-block: 14px;
  position: relative;
}
.marquee-strip::before,
.marquee-strip::after {
  content: '';
  position: absolute;
  inset-block: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee-strip::before { left: 0; background: linear-gradient(90deg, var(--c-bg), transparent); }
.marquee-strip::after  { right: 0; background: linear-gradient(270deg, var(--c-bg), transparent); }
.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  white-space: nowrap;
  width: max-content;
  animation: marqueeRoll 32s linear infinite;
  will-change: transform;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--t-xs);
}
.marquee-track span:hover { color: var(--c-gold-2); }
.marquee-track em {
  color: var(--c-gold);
  font-style: normal;
  font-size: 0.45rem;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   14. ABOUT SECTION
═══════════════════════════════════════════════════════════════ */
.s-about { background: var(--c-bg-1); }
.s-about__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(var(--sp-5), 7vw, var(--sp-7));
  align-items: center;
}
.s-about__media {
  position: relative;
  display: flex;
  gap: var(--sp-3);
}
.s-about__side-label {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.rotated-text {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Image frame */
.img-frame {
  position: relative;
  overflow: hidden;
  flex: 1;
  box-shadow:
    0 24px 56px rgba(0,0,0,0.55),
    0 8px 16px rgba(0,0,0,0.3);
}
.img-frame--portrait { aspect-ratio: 4 / 5; }
.img-frame--landscape { aspect-ratio: 16 / 10; }
.img-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-lg) var(--ease-out);
  will-change: transform;
}
.img-frame:hover .img-frame__img { transform: scale(1.04); }
.img-frame__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,175,55,0.06) 0%, transparent 55%);
  pointer-events: none;
}
.img-frame__inner-border {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(212,175,55,0.2);
  pointer-events: none;
  transition: border-color var(--t-md);
}
.img-frame:hover .img-frame__inner-border { border-color: rgba(212,175,55,0.45); }

/* Stats */
.s-about__stats {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
}
.s-about__stat { display: flex; flex-direction: column; gap: 5px; }
.s-about__stat strong {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  color: var(--c-gold);
  font-weight: 400;
  line-height: 1;
}
.s-about__stat span {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.s-about__stat-sep { width: 1px; height: 36px; background: var(--c-border-2); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   15. VALUE CARDS
═══════════════════════════════════════════════════════════════ */
.s-value { background: var(--c-bg); }
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.vcard {
  position: relative;
  background: var(--c-bg-1);
  padding: clamp(var(--sp-4), 3.5vw, var(--sp-5)) clamp(var(--sp-3), 2.5vw, var(--sp-4));
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition:
    background var(--t-md),
    border-color var(--t-md),
    transform var(--t-md) var(--ease-out);
}
.vcard:hover {
  background: var(--c-bg-2);
  border-color: rgba(212,175,55,0.12);
  transform: translateY(-6px);
}
.vcard__num {
  font-family: var(--f-serif);
  font-size: 5rem;
  font-weight: 300;
  color: rgba(212,175,55,0.055);
  line-height: 1;
  margin-bottom: -16px;
  user-select: none;
}
.vcard__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-3);
  transition: transform var(--t-md) var(--ease-spring);
}
.vcard__icon svg { width: 100%; height: 100%; }
.vcard:hover .vcard__icon { transform: scale(1.1) translateY(-3px); }
.vcard__body h3 {
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 400;
  color: var(--c-white);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
}
.vcard__body p { font-size: 0.88rem; line-height: 1.7; color: var(--c-muted-2); }

/* Animated top border on hover */
.vcard__border-anim {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s var(--ease-out);
}
.vcard:hover .vcard__border-anim { transform: scaleX(1); }

/* Glow blob */
.vcard__glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%);
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.5);
  transition: transform var(--t-md) var(--ease-out), opacity var(--t-md) var(--ease-out);
}
.vcard:hover .vcard__glow { opacity: 1; transform: scale(1.2); }

/* Scan line effect */
.vcard::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(212,175,55,0.04), transparent);
  top: -100%;
  transition: none;
}
.vcard:hover::after {
  animation: scanLine 0.8s var(--ease-inout) forwards;
}

/* List panels */
.lists-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.list-panel {
  background: var(--c-bg-1);
  padding: clamp(var(--sp-4), 4vw, var(--sp-5));
  border: 1px solid var(--c-border);
}
.list-panel__title {
  font-family: var(--f-serif);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 400;
  color: var(--c-white);
  margin-bottom: 0;
}

.icon-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.icon-list li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.il-icon { color: var(--c-gold); font-size: 0.85rem; flex-shrink: 0; line-height: 1.5; margin-top: 1px; }
.il-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold); flex-shrink: 0; margin-top: 9px; }
.icon-list li > div { display: flex; flex-direction: column; gap: 3px; }
.icon-list strong { font-size: 0.95rem; font-weight: 500; color: var(--c-white); line-height: 1.4; }
.icon-list small  { font-size: 0.84rem; color: var(--c-muted-2); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   16. ORIGIN / PATH
═══════════════════════════════════════════════════════════════ */
.s-origin { background: var(--c-bg-1); }

/* Path timeline */
.path-timeline {
  display: flex;
  align-items: flex-start;
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  padding: clamp(var(--sp-4), 3.5vw, var(--sp-5)) clamp(var(--sp-3), 2.5vw, var(--sp-4));
  margin-bottom: clamp(var(--sp-5), 7vw, var(--sp-6));
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
}
.path-timeline::-webkit-scrollbar { display: none; }

.pt-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 120px;
  gap: var(--sp-2);
  padding: 0 var(--sp-1);
  text-align: center;
  position: relative;
}
.pt-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.28);
  background: var(--c-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2; /* above the line */
  transition:
    border-color var(--t-md),
    background var(--t-md),
    box-shadow var(--t-md),
    transform var(--t-md) var(--ease-spring);
}
.pt-step:hover .pt-circle {
  border-color: var(--c-gold);
  background: rgba(212,175,55,0.07);
  box-shadow: 0 0 20px rgba(212,175,55,0.25);
  transform: scale(1.08);
}
.pt-step--gold .pt-circle {
  border-color: var(--c-gold) !important;
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 22px rgba(212,175,55,0.3);
  animation: pulseGlow 3s ease-in-out infinite;
}
.pt-circle--last { border-style: dashed; }
.pt-text { display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 2; }
.pt-text strong { font-size: 0.82rem; font-weight: 500; color: var(--c-white); line-height: 1.25; }
.pt-text small  { font-size: 0.68rem; color: var(--c-muted); }
.pt-step--gold .pt-text strong { color: var(--c-gold-2); }

.pt-line {
  position: absolute;
  top: 26px; /* center of 52px circle */
  left: calc(50% + 26px); /* starts at right edge of circle */
  width: calc(100% - 52px); /* extends to next circle */
  height: 1px;
  background: rgba(212,175,55,0.15);
  margin: 0;
  z-index: 1;
  overflow: hidden;
}
.pt-line span {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0%;
  background: var(--c-gold);
  transition: width 1.5s var(--ease-out);
}
.path-timeline.is-visible .pt-line span { width: 100%; }
.pt-step:last-child .pt-line { display: none; }
.pt-line--none { display: none; }

/* Expertise duo */
.expertise-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-4), 5vw, var(--sp-6));
}
.exp-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.exp-card__img-wrap {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
}
.exp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-lg) var(--ease-out);
  will-change: transform;
}
.exp-card__img-wrap:hover .exp-card__img { transform: scale(1.05); }
.exp-card__img-border {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(212,175,55,0.18);
  pointer-events: none;
  transition: border-color var(--t-md);
}
.exp-card__img-wrap:hover .exp-card__img-border { border-color: rgba(212,175,55,0.48); }
.exp-card__body h3 {
  font-family: var(--f-serif);
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  font-weight: 400;
  color: var(--c-white);
}
.exp-card__body p { font-size: 0.92rem; line-height: 1.72; color: var(--c-muted-3); }

.check-list { display: flex; flex-direction: column; gap: 9px; }
.check-list li {
  font-size: 0.9rem;
  color: var(--c-muted-3);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}
.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--c-gold);
  font-size: 0.8rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   17. UNIQUE SECTION
═══════════════════════════════════════════════════════════════ */
.s-unique { background: var(--c-bg); }
.s-unique__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(var(--sp-5), 6.5vw, var(--sp-7));
  align-items: center;
}

/* Gallery mosaic */
.ugallery {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: var(--sp-2);
  height: clamp(380px, 55vw, 580px);
}
.ugallery__main {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.ugallery__main-label {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(0deg, rgba(8,8,8,0.9), transparent);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240,240,240,0.75);
}
.ugallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-lg) var(--ease-out);
  will-change: transform;
}
.ugallery__main:hover .ugallery__img { transform: scale(1.05); }
.ugallery__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ugallery__sm { overflow: hidden; flex: 1; }
.ugallery__sm:hover .ugallery__img { transform: scale(1.07); }

/* ═══════════════════════════════════════════════════════════════
   18. GALLERY SECTION
═══════════════════════════════════════════════════════════════ */
.s-gallery { background: var(--c-bg-1); padding-bottom: 0; }
.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 2px;
  margin-top: clamp(var(--sp-5), 8vw, var(--sp-6));
}
.gm-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: zoom-in;
}
.gm-item--tall {
  grid-row: 1 / 3;
  aspect-ratio: unset;
}
.gm-item--wide {
  grid-column: 2 / 4;
  aspect-ratio: 16/7;
}
.gm-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-lg) var(--ease-out), filter var(--t-md);
  will-change: transform;
}
.gm-item:hover img { transform: scale(1.06); filter: brightness(1.05); }

.gm-item__caption {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: var(--sp-3) var(--sp-3);
  background: linear-gradient(0deg, rgba(8,8,8,0.9) 0%, transparent 100%);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240,240,240,0.75);
  transform: translateY(8px);
  opacity: 0;
  transition: transform var(--t-md) var(--ease-out), opacity var(--t-md);
}
.gm-item:hover .gm-item__caption { transform: none; opacity: 1; }

.gm-item__hover {
  position: absolute;
  inset: 0;
  background: rgba(8,8,8,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-md);
}
.gm-item:hover .gm-item__hover { opacity: 1; }
.gm-item__hover span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  border: 1px solid var(--c-gold);
  padding: 10px 22px;
  transition: background var(--t-xs), color var(--t-xs);
}
.gm-item:hover .gm-item__hover span:hover { background: var(--c-gold); color: #000; }

/* ═══════════════════════════════════════════════════════════════
   19. COLLECTIONS
═══════════════════════════════════════════════════════════════ */
.s-collections { background: var(--c-bg); }
.col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: var(--sp-5);
}
.col-card {
  position: relative;
  background: var(--c-bg-1);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    border-color var(--t-md),
    transform var(--t-md) var(--ease-out);
  cursor: pointer;
}
.col-card:hover {
  border-color: rgba(212,175,55,0.2);
  transform: translateY(-6px);
}
.col-card__media {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.col-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-lg) var(--ease-out);
  will-change: transform;
}
.col-card:hover .col-card__img { transform: scale(1.07); }
.col-card__media-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,8,8,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-md);
}
.col-card:hover .col-card__media-overlay { opacity: 1; }
.col-card__peek-btn {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
  border: 1px solid var(--c-gold);
  padding: 11px 24px;
  background: transparent;
  transition: background var(--t-xs), color var(--t-xs);
  cursor: pointer;
}
.col-card__peek-btn:hover { background: var(--c-gold); color: #000; }
.col-card__media-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,175,55,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.col-card__body {
  padding: clamp(var(--sp-3), 2.5vw, var(--sp-4));
  flex: 1;
  display: flex;
  flex-direction: column;
}
.col-card__tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-1);
}
.col-card__tag--sig { color: var(--c-gold-2); }
.col-card__tag--vip { color: var(--c-gold-3); }
.col-card__title {
  font-family: var(--f-serif);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 400;
  color: var(--c-white);
  margin-bottom: var(--sp-2);
  line-height: 1.25;
}
.col-card__desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--c-muted-2);
  flex: 1;
  margin-bottom: var(--sp-3);
}
.col-card__more {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold);
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--t-sm) var(--ease-spring), letter-spacing var(--t-sm);
}
.col-card__more:hover { gap: 12px; letter-spacing: 0.18em; }
.col-card__more span { transition: transform var(--t-sm); }
.col-card__more:hover span { transform: translateX(3px); }
.col-card__glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.06), transparent 70%);
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.5);
  transition: transform var(--t-md) var(--ease-out), opacity var(--t-md) var(--ease-out);
}
.col-card:hover .col-card__glow { opacity: 1; transform: scale(1.2); }
.s-collections__cta { text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   20. FAQ
═══════════════════════════════════════════════════════════════ */
.s-faq { background: var(--c-bg-1); }
.s-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.618fr; /* golden ratio */
  gap: clamp(var(--sp-5), 6vw, var(--sp-7));
  align-items: start;
}
.s-faq__left { position: sticky; top: 110px; }

.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  font-family: var(--f-serif);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 400;
  color: var(--c-muted-3);
  text-align: left;
  transition: color var(--t-xs);
  cursor: pointer;
}
.faq-q > span:first-child { flex: 1; }
.faq-q:hover { color: var(--c-white); }
.faq-item.is-open .faq-q { color: var(--c-gold-2); }

/* Plus/minus icon */
.faq-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.faq-icon b {
  position: absolute;
  background: var(--c-gold);
  border-radius: 2px;
  transition: transform 0.4s var(--ease-out), opacity 0.4s;
}
.faq-icon b:nth-child(1) {
  width: 18px; height: 1.5px;
  top: 50%; left: 0;
  transform: translateY(-50%);
}
.faq-icon b:nth-child(2) {
  width: 1.5px; height: 18px;
  left: 8px; top: 0;
}
.faq-item.is-open .faq-icon b:nth-child(2) {
  opacity: 0;
  transform: rotate(90deg) translateX(-8px);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease-out);
}
.faq-a p {
  padding: 4px 0 var(--sp-3);
  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--c-muted-2);
}

/* ═══════════════════════════════════════════════════════════════
   21. FINAL CTA
═══════════════════════════════════════════════════════════════ */
.s-cta {
  position: relative;
  overflow: hidden;
  background: var(--c-bg);
  text-align: center;
}
.s-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.s-cta__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  filter: blur(4px);
  transform: scale(1.06);
}
.s-cta__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%,
    rgba(8,8,8,0.3) 0%,
    rgba(8,8,8,0.88) 65%,
    var(--c-bg) 100%
  );
}
.s-cta__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.s-cta__particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--c-gold);
  animation: ctaParticle var(--dur, 4s) var(--ease-out) var(--delay, 0s) infinite;
  opacity: 0;
}

.s-cta__body {
  position: relative;
  z-index: 10;
  padding-block: clamp(var(--sp-6), 14vw, 200px) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.s-cta__logo { height: 64px; width: auto; object-fit: contain; margin-bottom: var(--sp-4); }
.s-cta__ornament {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.s-cta__orn-line { flex: 1; max-width: 60px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4)); }
.s-cta__orn-line:last-child { background: linear-gradient(270deg, transparent, rgba(212,175,55,0.4)); }
.s-cta__orn-diamond { font-size: 0.7rem; color: var(--c-gold); }

.s-cta__h2 {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 4vw + 0.8rem, 4.2rem);
  font-weight: 300;
  color: var(--c-white);
  line-height: 1.12;
  margin-bottom: var(--sp-3);
  max-width: 800px;
}
.s-cta__h2 em { font-style: italic; color: var(--c-gold-2); }
.s-cta__sub {
  font-size: clamp(0.95rem, 1vw + 0.4rem, 1.1rem);
  color: var(--c-muted-3);
  line-height: 1.8;
  max-width: 600px;
  margin-bottom: var(--sp-5);
}
.s-cta__social {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,240,240,0.35);
}
.s-cta__slink {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(240,240,240,0.45);
  transition: color var(--t-xs), transform var(--t-sm) var(--ease-spring);
  cursor: none;
}
.s-cta__slink:hover { color: var(--c-gold); transform: translateY(-2px); }

.s-cta__footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--c-border);
  padding-block: var(--sp-3);
  text-align: center;
}
.s-cta__footer p { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--c-muted); }

/* ═══════════════════════════════════════════════════════════════
   22. MODAL
═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4,4,4,0.92);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0s 0.5s;
  will-change: opacity;
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease-out), visibility 0s 0s;
}

.modal-panel {
  position: relative;
  background: var(--c-bg-1);
  border: 1px solid var(--c-border-gold);
  width: 100%;
  max-width: 1080px;
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,0.2) transparent;
  transform: translateY(30px) scale(0.96);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.5s var(--ease-out);
  will-change: transform, opacity;
}
.modal-overlay.is-open .modal-panel {
  transform: none;
  opacity: 1;
}
.modal-panel::-webkit-scrollbar { width: 4px; }
.modal-panel::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.2); border-radius: 4px; }

/* Modal close */
.modal-close {
  position: sticky;
  top: 14px;
  left: 100%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
  margin: 14px 14px -38px 0;
  color: var(--c-muted-2);
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  z-index: 20;
  transition: color var(--t-xs), transform var(--t-md) var(--ease-spring), background var(--t-xs);
  cursor: pointer;
}
.modal-close:hover { color: var(--c-gold); transform: rotate(90deg); background: var(--c-bg-3); }

/* Modal content panels — only one visible */
.modal-content { display: none; }
.modal-content.is-active { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 480px; }

/* Gallery side */
.modal-gallery {
  background: #050505;
  border-right: 1px solid var(--c-border);
  padding: clamp(var(--sp-4), 3vw, var(--sp-5));
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  justify-content: center;
}
.modal-main-img-box {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.modal-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s ease;
}
.modal-thumbs { display: flex; gap: var(--sp-2); }
.modal-thumb {
  width: 62px;
  height: 62px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid transparent;
  opacity: 0.4;
  transition: opacity var(--t-xs), border-color var(--t-xs);
}
.modal-thumb:hover { opacity: 0.75; }
.modal-thumb.active { opacity: 1; border-color: var(--c-gold); }

/* Info side */
.modal-info {
  padding: clamp(var(--sp-4), 3.5vw, var(--sp-5));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.modal-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-2);
}
.modal-tag--sig { color: var(--c-gold-2); }
.modal-tag--vip { color: var(--c-gold-3); }
.modal-title {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 400;
  color: var(--c-white);
  line-height: 1.2;
}
.modal-desc { font-size: 0.95rem; color: var(--c-muted-3); line-height: 1.75; margin: var(--sp-3) 0; }
.modal-specs { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); }
.modal-specs tr { border-bottom: 1px solid var(--c-border); }
.modal-specs td { padding: 10px 0; font-size: 0.88rem; vertical-align: top; }
.modal-specs td:first-child { color: var(--c-muted); width: 42%; padding-right: var(--sp-3); }
.modal-specs td:last-child { color: var(--c-white); }

.avail { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; }
.avail--ltd  { background: rgba(212,175,55,0.1); color: var(--c-gold); border: 1px solid rgba(212,175,55,0.22); }
.avail--rare { background: rgba(232,200,74,0.08); color: var(--c-gold-2); border: 1px solid rgba(232,200,74,0.22); }
.avail--vip  { background: rgba(240,240,240,0.06); color: var(--c-white); border: 1px solid rgba(240,240,240,0.14); }

/* ═══════════════════════════════════════════════════════════════
   23. COUNT-UP NUMBERS
═══════════════════════════════════════════════════════════════ */
.count-num {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  color: var(--c-gold);
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  transition: transform 0.1s;
}
.count-num.pop { animation: numPop 0.3s var(--ease-spring); }

/* ═══════════════════════════════════════════════════════════════
   24. RESPONSIVE — 1100px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__body  {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding-block: 140px var(--sp-5);
  }
  .hero__h1   { font-size: clamp(2.8rem, 8vw, 5.2rem); }
  .hero__sub  { max-width: 620px; text-align: center; font-size: 1.05rem; }
  .hero__actions { justify-content: center; }
  .hero__social  { justify-content: center; }
  .hero__right   { display: none; }
  .hdr__nav  { display: none; }
  .hdr__cta  { display: none; }
  .hdr__burger { display: flex; }
  .hero__badge { align-self: center; }
  .gold-line { margin-inline: auto; }
  .s-about__grid { grid-template-columns: 1fr; }
  .s-about__media { max-width: 520px; margin-inline: auto; }
  .s-faq__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .s-faq__left { position: static; }
}

/* ═══════════════════════════════════════════════════════════════
   25. RESPONSIVE — 900px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .s-unique__grid { grid-template-columns: 1fr; }
  .ugallery { order: -1; height: clamp(280px, 55vw, 400px); }
  .s-unique__text .gold-line { margin-inline: 0; }
  .expertise-duo { grid-template-columns: 1fr; }
  .lists-duo { grid-template-columns: 1fr; }
  .path-timeline { gap: 0; }

  .gallery-masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .gm-item--tall { grid-row: auto; }
  .gm-item--wide { grid-column: auto; aspect-ratio: 4/3; }

  .modal-content.is-active { grid-template-columns: 1fr; }
  .modal-gallery { border-right: none; border-bottom: 1px solid var(--c-border); }
  .modal-close {
    position: fixed;
    top: 16px;
    right: 16px;
    float: none;
    margin: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   26. RESPONSIVE — 680px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .col-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .value-grid { grid-template-columns: 1fr; }
  .hero__h1 { font-size: 2.4rem; }
  .s-cta__h2 { font-size: 1.95rem; }
  .hero__num-item { padding: var(--sp-2) var(--sp-3); }
  .hero__num-item strong { font-size: 1.4rem; }

  /* Path — vertical on small screens */
  .path-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--sp-4) var(--sp-4);
  }
  .pt-step {
    flex-direction: row;
    text-align: left;
    min-width: unset;
    width: 100%;
    gap: var(--sp-3);
    padding-bottom: 30px;
    position: relative;
  }
  .pt-step:last-child {
    padding-bottom: 0;
  }
  .pt-line {
    position: absolute;
    top: 52px; /* starts from bottom of circle */
    left: 26px; /* centered horizontally on circle */
    width: 1px;
    height: 30px; /* spans the gap to the next step's circle */
    margin: 0;
    background: rgba(212,175,55,0.15);
  }
  .pt-line span {
    width: 100% !important;
    height: 0%;
    left: 0;
    top: 0;
    transition: height 1.5s var(--ease-out);
  }
  .path-timeline.is-visible .pt-line span { height: 100%; }

  .ugallery { grid-template-columns: 1fr; height: auto; }
  .ugallery__main { aspect-ratio: 4/3; }
  .ugallery__side { flex-direction: row; height: 100px; }
}

/* ═══════════════════════════════════════════════════════════════
   27. RESPONSIVE — 440px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 440px) {
  :root { font-size: 15px; }
  .hero__h1 { font-size: 2.3rem; letter-spacing: -0.01em; }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn-gold,
  .hero__actions .btn-outline { width: 100%; justify-content: center; }
  .btn-gold--lg { padding: 17px 28px; }
  .hero__numbers { flex-wrap: wrap; }
  .hero__num-div { display: none; }
  .hero__num-item { flex: 1; min-width: 100px; }
  .s-cta__social { flex-wrap: wrap; justify-content: center; }
  .lists-duo { gap: var(--sp-3); }
  .gallery-masonry { grid-template-columns: 1fr; }
  .gm-item--wide { grid-column: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   28. ACCESSIBILITY
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__bg-img { animation: none; }
  .marquee-track { animation: none; }
  .hero__bg-grain { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   29. PRINT
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   29. PRINT
═══════════════════════════════════════════════════════════════ */
@media print {
  .hdr, .preloader, .cursor-dot, .cursor-ring,
  .mnav, .hero__canvas-wrap, .modal-overlay { display: none !important; }
  body { background: white; color: black; }
  .hero { min-height: unset; padding-top: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   30. LANGUAGE SWITCHER & MULTILINGUAL SUPPORT
═══════════════════════════════════════════════════════════════ */
html[lang="ru"] .lang-kz { display: none !important; }
html[lang="kz"] .lang-ru { display: none !important; }

/* Language selector button in header */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  border: 1px solid var(--c-border);
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  margin-left: var(--sp-3);
  transition: border-color var(--t-sm) var(--ease-out), background-color var(--t-sm) var(--ease-out);
}

.lang-switch:hover {
  border-color: var(--c-border-gold);
  background: rgba(212, 175, 55, 0.03);
}

.lang-switch__btn {
  color: var(--c-muted);
  cursor: pointer;
  transition: color var(--t-sm) var(--ease-out), text-shadow var(--t-sm) var(--ease-out);
  padding: 2px 4px;
  position: relative;
}

.lang-switch__btn.is-active {
  color: var(--c-gold);
  font-weight: 600;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.lang-switch__btn.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 4px;
  right: 4px;
  height: 1px;
  background: var(--c-gold);
  box-shadow: 0 0 6px var(--c-gold-glow);
}

.lang-switch__sep {
  color: var(--c-border);
  font-weight: 300;
  user-select: none;
}

/* Lang Switch in Mobile Menu */
.mnav__lang {
  margin-top: var(--sp-4);
  display: flex;
  justify-content: center;
}

.mnav__lang .lang-switch {
  margin-left: 0;
  padding: 8px 18px;
  font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════
   31. FLOATING ACTION BUTTON (FAB) — ORDER
═══════════════════════════════════════════════════════════════ */
.fab-order {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 40px;
  background: rgba(15, 15, 15, 0.75);
  border: 1px solid var(--c-border-gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--c-white);
  font-family: var(--f-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  transition: 
    opacity var(--t-md) var(--ease-out), 
    transform var(--t-md) var(--ease-out),
    border-color var(--t-sm) var(--ease-out),
    box-shadow var(--t-sm) var(--ease-out),
    background var(--t-sm) var(--ease-out);
}

.fab-order.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.fab-order:hover {
  background: rgba(20, 20, 20, 0.9);
  border-color: var(--c-gold);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(212, 175, 55, 0.25);
  color: var(--c-gold-2);
}

.fab-order__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
  font-size: 0.9rem;
  transition: transform var(--t-md) var(--ease-spring);
}

.fab-order:hover .fab-order__icon {
  transform: rotate(45deg) scale(1.15);
  color: var(--c-gold-2);
}

.fab-order__text {
  transition: transform var(--t-sm) var(--ease-out);
}

@media (max-width: 900px) {
  .hdr__inner .lang-switch {
    display: none; /* Hide in header on tablet/mobile, only show in hamburger */
  }
}

@media (max-width: 680px) {
  .fab-order {
    bottom: 24px;
    right: 20px;
    padding: 12px 18px;
    font-size: 0.75rem;
    gap: 8px;
  }
  .fab-order__icon {
    font-size: 0.8rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   32. MOBILE PREMIUM ENHANCEMENTS
═══════════════════════════════════════════════════════════════ */

/* ── Hero mobile: larger text, centered, better spacing ── */
@media (max-width: 768px) {
  .hero__h1 {
    font-size: clamp(2.6rem, 11vw, 4.2rem);
    letter-spacing: -0.015em;
    line-height: 1.0;
    text-align: center;
  }
  .hero__sub {
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
    padding: 0 8px;
  }
  .hero__badge {
    margin-inline: auto;
  }
  .hero__body {
    padding-block: 100px var(--sp-4);
    gap: var(--sp-4);
  }
  .hero__numbers {
    border-radius: 0;
  }
  .hero__num-item {
    padding: var(--sp-2) var(--sp-3);
  }
  .hero__num-item strong {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }
}

/* ── Bigger tap targets on mobile ── */
@media (max-width: 768px) {
  .btn-gold,
  .btn-outline {
    padding: 16px 28px;
    font-size: 0.82rem;
    min-height: 52px;
  }
  .hdr__link {
    padding: 12px 8px;
  }
  .faq-q {
    padding: var(--sp-3) var(--sp-3);
    min-height: 56px;
  }
  .mnav__link {
    padding: 14px 20px;
    min-height: 60px;
  }
  .mnav__label {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
  }
  .vcard {
    padding: var(--sp-4);
  }
  .vcard h3 {
    font-size: 1.05rem;
  }
  .vcard p {
    font-size: 0.9rem;
  }
}

/* ── About section mobile ── */
@media (max-width: 768px) {
  .s-about__text {
    text-align: center;
  }
  .s-about__stats {
    justify-content: center;
  }
  .s-about__stat {
    text-align: center;
  }
  .s-about__grid {
    gap: var(--sp-4);
  }
}

/* ── Section headings on mobile ── */
@media (max-width: 768px) {
  .heading-xl {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }
  .section {
    padding-block: clamp(var(--sp-5), 9vw, var(--sp-6));
  }
  .section-head {
    margin-bottom: var(--sp-5);
  }
  .label {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
  }
  .body-md {
    font-size: 0.95rem;
    line-height: 1.75;
  }
}

/* ── Gallery mobile improvements ── */
@media (max-width: 600px) {
  .gallery-masonry {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
  .gm-item--wide,
  .gm-item--tall {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4/3;
  }
  .gm-item--tall { aspect-ratio: 3/4; }
}

/* ── Collection cards on mobile ── */
@media (max-width: 600px) {
  .col-card {
    border-radius: 0;
  }
  .value-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .lists-duo {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}

/* ── Timeline mobile ── */
@media (max-width: 600px) {
  .path-timeline {
    padding-inline: var(--sp-3);
  }
  .pt-text strong {
    font-size: 0.88rem;
  }
  .pt-text small {
    font-size: 0.72rem;
  }
}

/* ── Hero cinematic entrance: slide-up with blur ── */
@keyframes heroEnter {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.98);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* Gold text pulse for hero numbers */
.hero__num-item strong {
  transition: color var(--t-sm);
}
.hero__num-item:hover strong {
  color: var(--c-gold-2);
  text-shadow: 0 0 20px rgba(212,175,55,0.5);
}

/* ── Preloader improved ── */
.preloader__img {
  filter: drop-shadow(0 0 20px rgba(212,175,55,0.3));
}

/* ── Header logo refined ── */
.hdr__en {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* ── Marquee: larger, bolder on mobile ── */
@media (max-width: 600px) {
  .marquee-track span {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
  }
  .marquee-track {
    gap: var(--sp-3);
    animation-duration: 22s;
  }
}

/* ── CTA section mobile ── */
@media (max-width: 680px) {
  .s-cta__heading {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }
  .s-cta__sub {
    font-size: 0.95rem;
    padding: 0 8px;
  }
  .s-cta__actions {
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: var(--sp-2);
  }
  .s-cta__actions .btn-gold,
  .s-cta__actions .btn-outline {
    width: 100%;
    justify-content: center;
  }
}

/* ── Image frames on mobile ── */
@media (max-width: 768px) {
  .img-frame--portrait { aspect-ratio: 3/4; }
  .s-about__media { max-width: 380px; }
}

/* ── Hero glowing frame effect (removed on mobile to save perf) ── */
@media (max-width: 768px) {
  .hero__frame-glow { display: none; }
  .hero__canvas { opacity: 0.3; }
}

/* ── Extra smooth font rendering ── */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════════════════
   33. CURTAIN REVEAL
═══════════════════════════════════════════════════════════════ */
.curtain {
  position: fixed;
  inset-block: 0;
  z-index: 10000;
  width: 50%;
  background: var(--c-bg);
  pointer-events: none;
  will-change: transform;
}
/* Gold texture stripe on curtain edge */
.curtain--left {
  left: 0;
  transform-origin: left center;
  border-right: 1px solid rgba(212,175,55,0.15);
}
.curtain--right {
  right: 0;
  transform-origin: right center;
  border-left: 1px solid rgba(212,175,55,0.15);
}
/* Vertical gold thread lines on curtains */
.curtain--left::after,
.curtain--right::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(212,175,55,0.3) 30%, rgba(212,175,55,0.5) 50%, rgba(212,175,55,0.3) 70%, transparent 100%);
}
.curtain--left::after  { right: 20px; }
.curtain--right::before { left: 20px; }

/* Gold emblem on left curtain center */
.curtain--left::before {
  content: 'وقار';
  position: absolute;
  top: 50%;
  right: var(--sp-5);
  transform: translateY(-50%);
  font-family: var(--f-serif);
  font-size: 1rem;
  letter-spacing: 0.3em;
  color: rgba(212,175,55,0.3);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   34. FAN CARD CAROUSEL
═══════════════════════════════════════════════════════════════ */
.s-fan {
  background: var(--c-bg-1);
  overflow: hidden;
  padding-block: clamp(var(--sp-6), 10vw, var(--sp-7));
}

.fan-scene {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(var(--sp-5), 8vw, var(--sp-6));
}

/* Stage: the area containing all fan cards */
.fan-stage {
  position: relative;
  width: 100%;
  height: clamp(280px, 45vw, 520px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Individual fan card */
.fan-card {
  position: absolute;
  width: clamp(120px, 14vw, 200px);
  aspect-ratio: 9 / 14;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transform-origin: bottom center;
  will-change: transform, opacity;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.35),
    0 0 0 1px rgba(212,175,55,0.08);
  transition: box-shadow 0.4s var(--ease-out);
}
.fan-card:hover {
  box-shadow:
    0 20px 60px rgba(0,0,0,0.7),
    0 4px 16px rgba(0,0,0,0.45),
    0 0 0 1px rgba(212,175,55,0.25),
    0 0 30px rgba(212,175,55,0.12);
}

/* Card inner image */
.fan-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
  user-select: none;
}
.fan-card:hover .fan-card__img { transform: scale(1.06); }

/* Gold shine overlay */
.fan-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, transparent 55%);
  pointer-events: none;
  z-index: 2;
}

/* Card label at bottom */
.fan-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 10px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212,175,55,0.9);
  text-align: center;
  z-index: 3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.fan-card:hover .fan-card__label {
  opacity: 1;
  transform: translateY(0);
}

/* Arrows + dots row */
.fan-arrows {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: clamp(var(--sp-4), 4vw, var(--sp-5));
  z-index: 20;
}
.fan-arrows.is-hidden { display: none; }

.fan-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.2);
  color: rgba(212,175,55,0.6);
  cursor: pointer;
  transition:
    background var(--t-sm),
    border-color var(--t-sm),
    color var(--t-sm),
    transform var(--t-sm) var(--ease-spring),
    box-shadow var(--t-sm);
  outline: none;
  backdrop-filter: blur(8px);
}
.fan-arrow:hover {
  background: rgba(212,175,55,0.08);
  border-color: var(--c-gold);
  color: var(--c-gold);
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(212,175,55,0.2);
}
.fan-arrow:active { transform: scale(0.96); }
.fan-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

/* Pagination dots */
.fan-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}
.fan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(212,175,55,0.2);
  transition: background 0.3s, transform 0.3s, width 0.3s;
  cursor: pointer;
}
.fan-dot.is-active {
  background: var(--c-gold);
  transform: scale(1.4);
  width: 14px;
  border-radius: 3px;
}

/* Responsive fan card sizing */
@media (max-width: 768px) {
  .fan-stage {
    height: clamp(220px, 60vw, 360px);
  }
  .fan-card {
    width: clamp(90px, 18vw, 140px);
  }
}
@media (max-width: 480px) {
  .fan-stage {
    height: clamp(180px, 70vw, 280px);
  }
  .fan-card {
    width: clamp(70px, 22vw, 110px);
  }
  .fan-arrow {
    width: 40px;
    height: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   35. HERO KAABA DOOR — New visual design
═══════════════════════════════════════════════════════════════ */

/* Hero divider — gold line with Arabic text */
.hero__divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
}
.hero__divider-line {
  flex: 1;
  height: 1px;
  max-width: 64px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5));
}
.hero__divider-line:last-child {
  background: linear-gradient(270deg, transparent, rgba(212,175,55,0.5));
}
.hero__divider-ar {
  font-family: 'Scheherazade New', 'Traditional Arabic', serif;
  font-size: 1rem;
  color: var(--c-gold);
  letter-spacing: 0.08em;
  opacity: 0.75;
  direction: rtl;
}

/* Door container */
.hero__door {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Decorative arch above door */
.hero__door-arch {
  width: 100%;
  max-width: min(420px, 44vw);
  height: 44px;
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
}
.hero__door-arch-svg {
  width: 100%;
  height: 100%;
}

/* The main door frame */
.hero__door-frame {
  position: relative;
  width: min(420px, 44vw);
  aspect-ratio: 3 / 4.2;
  overflow: hidden;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.7),
    0 8px 24px rgba(0,0,0,0.5),
    0 0 0 1px rgba(212,175,55,0.12),
    inset 0 0 0 1px rgba(212,175,55,0.06);
  /* Pointed arch top (Islamic arch) */
  clip-path: polygon(
    50% 0%,
    90% 8%,
    100% 25%,
    100% 100%,
    0 100%,
    0 25%,
    10% 8%
  );
}
.hero__door-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.hero__door-frame:hover .hero__door-img { transform: scale(1.04); }

/* Inner glow on door */
.hero__door-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 25%, rgba(212,175,55,0.15) 0%, transparent 70%),
    linear-gradient(180deg, rgba(212,175,55,0.05) 0%, transparent 40%);
  pointer-events: none;
  z-index: 2;
}

/* Corner ornaments (hfb) repositioned for door */
.hero__door-frame .hfb {
  position: absolute;
  border-color: var(--c-gold);
  border-style: solid;
  width: 24px;
  height: 24px;
  z-index: 3;
  transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out);
}
.hero__door-frame:hover .hfb { width: 36px; height: 36px; }
.hero__door-frame .hfb--tl { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.hero__door-frame .hfb--tr { top: -1px; right: -1px; border-width: 1.5px 1.5px 0 0; }
.hero__door-frame .hfb--bl { bottom: -1px; left: -1px; border-width: 0 0 1.5px 1.5px; }
.hero__door-frame .hfb--br { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }

/* Floating badge bottom-left of door */
.hero__door-badge {
  position: absolute;
  bottom: 80px;
  left: calc(min(420px, 44vw) * -0.18);
  background: rgba(8,8,8,0.92);
  border: 1px solid rgba(212,175,55,0.2);
  border-left: 2px solid var(--c-gold);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  backdrop-filter: blur(16px);
  min-width: 160px;
  z-index: 5;
  animation: floatBob 7s ease-in-out infinite;
}
.hero__door-badge-ar {
  font-family: 'Scheherazade New', serif;
  font-size: 1.05rem;
  color: var(--c-gold-2);
  direction: rtl;
  line-height: 1.3;
}
.hero__door-badge-ru {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}

/* Location tag bottom-right */
.hero__door-tag {
  position: absolute;
  bottom: 24px;
  right: calc(min(420px, 44vw) * -0.12);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: rgba(8,8,8,0.88);
  border: 1px solid rgba(212,175,55,0.14);
  padding: 8px 12px;
  backdrop-filter: blur(12px);
  z-index: 5;
}
.hero__door-tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
  flex-shrink: 0;
  animation: badgePulse 2s ease-in-out infinite;
}

/* ── Typography sharpening — Montserrat overrides ── */
.label,
.hero__num-item small,
.hero__scroll-text,
.hero__social-link,
.hero__badge,
.hdr__link,
.btn-gold,
.btn-outline,
.body-sm,
.col-card__tag,
.vcard__num,
.modal-tag {
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
}

/* Montserrat needs slightly tighter letter-spacing */
.hdr__link { letter-spacing: 0.08em; }
.label { letter-spacing: 0.22em; }
.btn-gold, .btn-outline { letter-spacing: 0.1em; }
.hero__badge { letter-spacing: 0.18em; }

/* Hero body text refined */
.hero__sub {
  font-size: clamp(0.9rem, 1.1vw + 0.4rem, 1.05rem);
  line-height: 1.75;
  font-weight: 400;
  color: var(--c-muted-3);
  max-width: 480px;
}

/* ── Responsive for door on mobile ── */
@media (max-width: 1100px) {
  .hero__door-frame {
    width: min(360px, 52vw);
  }
  .hero__door-arch {
    max-width: min(360px, 52vw);
  }
  .hero__door-badge {
    left: 0;
    bottom: 60px;
    min-width: 140px;
  }
  .hero__door-tag {
    right: 0;
    bottom: 12px;
  }
}
@media (max-width: 768px) {
  .hero__door {
    display: none; /* Hidden on mobile — hero is single column */
  }
}

/* ═══════════════════════════════════════════════════════════════
   36. HERO SPLIT — Kiswa flies in both directions
═══════════════════════════════════════════════════════════════ */

/* Override old hero body to support new 3-col split */
.hero__body--split {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding-block: 0 !important;
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* ── Smaller, crisper heading for new split layout ── */
.hero__body--split .hero__h1 {
  font-size: clamp(1.9rem, 3vw + 0.5rem, 3.2rem) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: var(--sp-3);
  text-align: center;
}
.hero__body--split .hero__h1-line--italic {
  font-size: clamp(1.4rem, 2.2vw + 0.3rem, 2.4rem) !important;
  font-weight: 400;
}

/* ── Center column ── */
.hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-6) clamp(var(--sp-3), 3vw, var(--sp-5));
  position: relative;
  z-index: 10;
  gap: var(--sp-3);
  min-width: clamp(260px, 36vw, 480px);
}

/* Brand row */
.hero__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: var(--sp-1);
}
.hero__brand-logo {
  width: clamp(28px, 3vw, 40px);
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.25));
}
.hero__brand-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 2px;
}
.hero__brand-en {
  font-family: var(--f-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--c-gold);
  text-transform: uppercase;
}
.hero__brand-ar {
  font-family: 'Scheherazade New', serif;
  font-size: 0.9rem;
  color: rgba(212,175,55,0.6);
  direction: rtl;
}

/* Ornament line */
.hero__ornament {
  display: flex;
  justify-content: center;
  opacity: 0.8;
}

/* Subtitle */
.hero__body--split .hero__sub {
  font-size: clamp(0.72rem, 0.8vw + 0.3rem, 0.84rem) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-muted-2);
  text-align: center;
  max-width: 340px;
}

/* Actions row */
.hero__body--split .hero__actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
}
.hero__body--split .btn-gold,
.hero__body--split .btn-outline {
  font-size: 0.72rem;
  padding: 12px 22px;
  letter-spacing: 0.12em;
}

/* Social links */
.hero__body--split .hero__social {
  margin-top: 0;
  justify-content: center;
}

/* ── Wing panels — Kiswa flowing left/right ── */
.hero__wing {
  height: 100vh;
  overflow: hidden;
  position: relative;
  flex: 1;
}
.hero__wing-inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.hero__wing-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 8s var(--ease-out);
  filter: brightness(0.75) saturate(0.9);
}
.hero__wing:hover .hero__wing-img {
  transform: scale(1.04);
}

/* Left wing — perspective tilt going left */
.hero__wing--left .hero__wing-inner {
  transform: perspective(1200px) rotateY(12deg);
  transform-origin: right center;
}
/* Right wing — perspective tilt going right */
.hero__wing--right .hero__wing-inner {
  transform: perspective(1200px) rotateY(-12deg);
  transform-origin: left center;
}

/* Fog fade — blends wing into center */
.hero__wing-fog {
  position: absolute;
  inset-block: 0;
  width: 55%;
  pointer-events: none;
  z-index: 2;
}
.hero__wing-fog--r {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--c-bg) 100%);
}
.hero__wing-fog--l {
  left: 0;
  background: linear-gradient(270deg, transparent 0%, var(--c-bg) 100%);
}

/* Gold edge glow where fabric meets center */
.hero__wing--left::after,
.hero__wing--right::before {
  content: '';
  position: absolute;
  inset-block: 10%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(212,175,55,0.4) 30%, rgba(212,175,55,0.6) 50%, rgba(212,175,55,0.4) 70%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}
.hero__wing--left::after  { right: 0; }
.hero__wing--right::before { left: 0; }

/* Wing label badge */
.hero__wing-tag {
  position: absolute;
  bottom: clamp(100px, 16vh, 160px);
  right: clamp(var(--sp-4), 5%, 60px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212,175,55,0.7);
  z-index: 6;
  text-align: right;
  animation: floatBob 6s ease-in-out infinite;
}
.hero__wing-tag--r {
  right: auto;
  left: clamp(var(--sp-4), 5%, 60px);
  text-align: left;
  animation-delay: 1s;
}
.hero__wing-num {
  font-family: var(--f-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: rgba(212,175,55,0.25);
  line-height: 1;
  letter-spacing: 0;
}

/* ── MOBILE HERO: keep 3-col layout, narrow wings ── */
@media (max-width: 900px) {
  .hero__body--split {
    /* Keep 3 columns but narrow the wings */
    grid-template-columns: 20vw 1fr 20vw !important;
    min-height: 100svh;
  }
  .hero__wing {
    height: 100svh;
    width: 100%;
  }
  /* Retain 3D perspective tilt on tablets/medium screens */
  .hero__wing--left .hero__wing-inner {
    transform: perspective(800px) rotateY(8deg) !important;
    transform-origin: right center;
  }
  .hero__wing--right .hero__wing-inner {
    transform: perspective(800px) rotateY(-8deg) !important;
    transform-origin: left center;
  }
  /* Wider fog on mobile since wings are narrower */
  .hero__wing-fog {
    width: 75%;
  }
  .hero__wing--left::after,
  .hero__wing--right::before {
    opacity: 0.5;
  }
  .hero__wing-tag {
    bottom: clamp(70px, 12vh, 110px);
    right: clamp(10px, 4%, 30px);
    font-size: 0.52rem;
  }
  .hero__wing-tag--r {
    right: auto;
    left: clamp(10px, 4%, 30px);
  }
  .hero__wing-num {
    font-size: 1.2rem;
  }
  .hero__center {
    min-width: unset;
    padding: var(--sp-5) var(--sp-2);
    gap: var(--sp-2);
  }
  .hero__body--split .hero__h1 {
    font-size: clamp(1.3rem, 5.5vw, 2rem) !important;
  }
  .hero__body--split .hero__h1-line--italic {
    font-size: clamp(1rem, 4.5vw, 1.6rem) !important;
  }
  .hero__body--split .hero__sub {
    font-size: 0.65rem !important;
    letter-spacing: 0.08em;
  }
  .hero__body--split .btn-gold,
  .hero__body--split .btn-outline {
    font-size: 0.68rem;
    padding: 10px 16px;
  }
  .hero__body--split .hero__actions {
    flex-direction: column;
    gap: var(--sp-1);
    align-items: center;
  }
  .hero__brand-logo { width: 24px; }
  .hero__brand-en { font-size: 0.58rem; letter-spacing: 0.28em; }
  .hero__body--split .hero__social { gap: var(--sp-2); }
  .hero__body--split .hero__social-link { font-size: 0.62rem; }
}
@media (max-width: 550px) {
  .hero__body--split {
    grid-template-columns: 16vw 1fr 16vw !important;
  }
  .hero__wing--left .hero__wing-inner {
    transform: perspective(600px) rotateY(6deg) !important;
  }
  .hero__wing--right .hero__wing-inner {
    transform: perspective(600px) rotateY(-6deg) !important;
  }
  .hero__wing-tag { display: none; }
  .hero__wing-fog { width: 90%; }
  .hero__body--split .hero__h1 {
    font-size: clamp(1.1rem, 5.5vw, 1.5rem) !important;
  }
  .hero__body--split .hero__sub {
    font-size: 0.6rem !important;
    max-width: 240px;
  }
  .hero__body--split .btn-gold,
  .hero__body--split .btn-outline {
    padding: 9px 14px;
    font-size: 0.62rem;
    width: 100%;
    max-width: 200px;
    justify-content: center;
  }
  .hero__body--split .hero__actions {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   37. DRAPE REVEAL — fabric parts on scroll
═══════════════════════════════════════════════════════════════ */
.s-drape {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
}

/* Two fabric panels that cover the content */
.s-drape__panel {
  position: absolute;
  inset-block: 0;
  width: 50%;
  z-index: 10;
  overflow: hidden;
  will-change: transform;
}
.s-drape__panel--left  { left: 0;  transform: translateX(0); }
.s-drape__panel--right { right: 0; transform: translateX(0); }

/* Fabric image inside each panel */
.s-drape__panel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.65);
}
/* Left panel — image mirrored so seam is center */
.s-drape__panel--left  .s-drape__panel-img { object-position: right center; }
.s-drape__panel--right .s-drape__panel-img { object-position: left center; }

/* Gold seam line in the center */
.s-drape__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  z-index: 12;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(212,175,55,0.6) 15%,
    rgba(212,175,55,1.0) 50%,
    rgba(212,175,55,0.6) 85%,
    transparent 100%);
  pointer-events: none;
}
.s-drape__seam::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 5px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(212,175,55,0.3) 20%,
    rgba(212,175,55,0.5) 50%,
    rgba(212,175,55,0.3) 80%,
    transparent 100%);
  filter: blur(2px);
  pointer-events: none;
}

/* Inner hint text on the drape before opening */
.s-drape__hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 13;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
}
.s-drape__hint-icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(212,175,55,0.7);
  animation: scrollBounce 1.8s ease-in-out infinite;
}
.s-drape__hint-text {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212,175,55,0.5);
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* Background gold aura behind cards */
.s-drape__bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: min(850px, 90vw);
  height: min(650px, 75vh);
  background: radial-gradient(circle, rgba(212,175,55,0.22) 0%, rgba(212,175,55,0.06) 45%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  will-change: transform, opacity;
  filter: blur(30px);
}

/* The actual content behind the drape */
.s-drape__content {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: clamp(var(--sp-6), 8vw, var(--sp-7)) var(--sp-5);
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  will-change: transform, opacity;
}

/* Drape section heading */
.s-drape__head {
  text-align: center;
  margin-bottom: clamp(var(--sp-5), 6vw, var(--sp-6));
}
.s-drape__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-2);
}
.s-drape__title {
  font-family: var(--f-serif);
  font-size: clamp(1.8rem, 3.5vw + 0.5rem, 3rem);
  font-weight: 500;
  color: var(--c-white);
  line-height: 1.15;
  margin-bottom: var(--sp-2);
}
.s-drape__title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-2) 50%, var(--c-gold-3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 3-card grid */
.s-drape__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  max-width: 1100px;
  margin: 0 auto;
}

/* Each service card */
.drape-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(212,175,55,0.1);
  border-top: 2px solid var(--c-gold);
  padding: var(--sp-5) var(--sp-4);
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, background 0.4s, transform 0.4s var(--ease-spring);
}
.drape-card:hover {
  background: rgba(212,175,55,0.04);
  border-color: rgba(212,175,55,0.35);
  transform: translateY(-6px);
}
.drape-card__num {
  font-family: var(--f-serif);
  font-size: 3rem;
  font-weight: 400;
  color: rgba(212,175,55,0.1);
  line-height: 1;
  margin-bottom: var(--sp-3);
  letter-spacing: -0.04em;
}
.drape-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-3);
  color: var(--c-gold);
  opacity: 0.8;
}
.drape-card__title {
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  color: var(--c-white);
  margin-bottom: var(--sp-2);
  line-height: 1.25;
}
.drape-card__desc {
  font-size: clamp(0.82rem, 0.9vw + 0.3rem, 0.9rem);
  line-height: 1.72;
  color: var(--c-muted-3);
  font-weight: 300;
}
.drape-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  transition: gap 0.3s;
}
.drape-card__link:hover { gap: 10px; }
.drape-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,175,55,0.07) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.drape-card:hover .drape-card__glow { opacity: 1; }

/* CTA row */
.s-drape__cta {
  text-align: center;
  margin-top: clamp(var(--sp-5), 5vw, var(--sp-6));
}

/* Mobile */
@media (max-width: 900px) {
  .s-drape__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .s-drape { min-height: unset; }
}
@media (max-width: 600px) {
  .s-drape__content { padding: var(--sp-5) var(--sp-3); }
  .drape-card { padding: var(--sp-4) var(--sp-3); }
}