/* ==========================================================================
   UNAMI MTHETHWA — MISS SA 2026 CANDIDATE SITE
   Design tokens
   ========================================================================== */
:root{
  --bg:            #080808;
  --bg-elevated:   #0F0F0E;
  --bg-elevated-2: #141312;
  --gold:          #D4AF37;
  --gold-soft:     #E8C766;
  --gold-dim:      rgba(212,175,55,0.35);
  --ivory:         #F5F5F5;
  --white:         #FFFFFF;
  --ink-mute:      #B9B6AC;
  --glass:         rgba(255,255,255,0.06);
  --glass-border:  rgba(255,255,255,0.10);
  --glass-strong:  rgba(255,255,255,0.10);

  --font-display: 'Playfair Display', serif;
  --font-body:    'Poppins', sans-serif;
  --font-accent:  'Cormorant Garamond', serif;

  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.16, 1, 0.3, 1);

  --section-pad: clamp(80px, 12vw, 160px);
  --container:   1280px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:900px){ body{ cursor:auto; } }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; }
p{ margin:0; }
input,textarea{ font-family:inherit; }

::selection{ background:var(--gold); color:var(--bg); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.section-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(24px, 5vw, 64px);
}

.eyebrow{
  display:block;
  font-family:var(--font-accent);
  font-style:italic;
  font-size:clamp(15px,1.6vw,19px);
  color:var(--gold);
  letter-spacing:0.04em;
  margin-bottom:18px;
}
.eyebrow--center{ text-align:center; }

.section-title{
  font-size:clamp(32px, 4.4vw, 58px);
  line-height:1.12;
  color:var(--white);
  font-weight:600;
  margin-bottom:28px;
}
.section-title em{ font-style:italic; color:var(--gold-soft); font-weight:500; }
.section-title--center{ text-align:center; max-width:820px; margin-left:auto; margin-right:auto; }

/* Grain overlay */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--gold); }
.cursor-ring{ width:34px; height:34px; border:1px solid var(--gold-dim); transition:width .25s var(--ease-soft), height .25s var(--ease-soft), border-color .25s; }
.cursor-ring.is-active{ width:60px; height:60px; border-color:var(--gold); background:rgba(212,175,55,0.06); }
@media (max-width:900px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */
.scroll-progress{ position:fixed; top:0; left:0; width:100%; height:2px; z-index:1001; background:rgba(255,255,255,0.06); }
.scroll-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); }

/* ==========================================================================
   LOADER
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.9s var(--ease-luxury), visibility 0.9s;
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner{ text-align:center; }
.loader-logo-img{
  width:180px; height:auto; margin:0 auto 26px; display:block;
  opacity:0; transform:scale(0.92); animation:logoReveal 1s var(--ease-luxury) forwards 0.15s;
}
@keyframes logoReveal{ to{ opacity:1; transform:scale(1); } }
.loader-bar{ width:180px; height:1px; background:rgba(255,255,255,0.15); margin:0 auto; }
.loader-bar span{ display:block; height:100%; width:0%; background:var(--gold); transition:width 0.3s linear; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:900;
  transition:transform 0.5s var(--ease-luxury), border-color 0.4s, background 0.4s;
  border-bottom:1px solid transparent;
}
.nav.nav--hidden{ transform:translateY(-100%); }
.nav.nav--scrolled{ background:rgba(8,8,8,0.72); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-color:rgba(212,175,55,0.18); }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(24px,5vw,56px);
}
.nav-logo{ display:flex; align-items:center; }
.nav-logo-img{ height:36px; width:auto; display:block; }

.nav-right{ display:flex; align-items:center; gap:clamp(18px,3vw,36px); }
.nav-cta{
  padding:10px 22px; border:1px solid var(--gold-dim); border-radius:100px;
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-soft);
  transition:background 0.35s, color 0.35s, border-color 0.35s;
}
.nav-cta:hover{ background:var(--gold); color:var(--bg); border-color:var(--gold); }

.nav-menu-toggle{
  display:flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ivory);
}
.nav-menu-toggle-text{ position:relative; display:inline-block; }
.nav-menu-toggle-text .is-closed-label{ display:none; }
.nav-menu-toggle[aria-expanded="true"] .is-open-label{ display:none; }
.nav-menu-toggle[aria-expanded="true"] .is-closed-label{ display:inline; }

.nav-menu-toggle-mark{ position:relative; display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:18px; height:14px; }
.nav-menu-toggle-mark i{
  display:block; width:100%; height:1.5px; background:var(--gold); border-radius:2px; transform-origin:center;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s, width 0.3s var(--ease-luxury);
}
.nav-menu-toggle:hover .nav-menu-toggle-mark i:first-child{ width:70%; }
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-mark i:first-child{ transform:translateY(3.25px) rotate(45deg); width:100%; }
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-mark i:last-child{ transform:translateY(-3.25px) rotate(-45deg); width:100%; }

/* ---------- Invisible click-away catcher ---------- */
.nav-backdrop{
  position:fixed; inset:0; z-index:940; background:transparent; border:none; padding:0; cursor:default;
  opacity:0; visibility:hidden; pointer-events:none;
}
.nav-backdrop.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

/* ---------- Compact springy dropdown menu ---------- */
.nav-dropdown{
  position:fixed; top:70px; right:clamp(20px,5vw,52px); z-index:945;
  width:min(280px, calc(100vw - 40px));
  background:rgba(10,10,10,0.92); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--gold-dim); border-radius:16px; padding:10px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.05);
  transform-origin:top right;
  opacity:0; visibility:hidden; transform:scale(0.82) translateY(-14px);
  transition:opacity 0.35s var(--ease-luxury), transform 0.45s cubic-bezier(0.34,1.56,0.64,1), visibility 0.45s;
}
.nav-dropdown.is-open{ opacity:1; visibility:visible; transform:scale(1) translateY(0); }

.nav-dropdown-links{ list-style:none; margin:0; padding:0; max-height:52vh; overflow-y:auto; }
.nav-dropdown-links li{
  opacity:0; transform:translateX(10px);
  transition:opacity 0.35s var(--ease-luxury), transform 0.35s var(--ease-luxury);
  transition-delay:calc(var(--i) * 0.035s);
}
.nav-dropdown.is-open .nav-dropdown-links li{ opacity:1; transform:translateX(0); }
.nav-dropdown-links a{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px; font-size:14px; color:var(--ivory);
  transition:background 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.nav-dropdown-links a:hover, .nav-dropdown-links a:focus-visible{
  background:rgba(212,175,55,0.1); color:var(--white); transform:translateX(4px) scale(1.02);
}
.nav-dropdown-links a.is-active{ background:rgba(212,175,55,0.14); color:var(--gold-soft); }
.nav-dropdown-num{ font-family:var(--font-accent); font-style:italic; font-size:12px; color:var(--gold); width:20px; flex:none; }

.nav-dropdown-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:6px; padding:12px 12px 8px; border-top:1px solid var(--glass-border);
  font-size:11px; color:var(--ink-mute); letter-spacing:0.03em;
}
.nav-dropdown-footer a{ color:var(--gold-soft); transition:color 0.3s; }
.nav-dropdown-footer a:hover{ color:var(--gold); }

@media (max-width:640px){
  .nav-cta{ display:none; }
  .nav-dropdown{ right:16px; left:16px; width:auto; top:66px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:radial-gradient(ellipse at 50% 30%, #121110 0%, #080808 70%);
}
.hero-video{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(0.5) saturate(1.05);
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.hero-vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 25%, rgba(8,8,8,0.88) 100%);
}
.hero-rays{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.4;
  background:conic-gradient(from 200deg at 50% 0%, transparent 0deg, rgba(212,175,55,0.08) 40deg, transparent 90deg);
  animation:raysDrift 18s linear infinite;
}
@keyframes raysDrift{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }

.hero-content{ position:relative; z-index:3; text-align:center; padding:0 24px; max-width:900px; }
.hero-eyebrow{ margin-bottom:22px; }
.hero-title{ font-size:clamp(42px, 8vw, 96px); line-height:1.02; color:var(--white); margin-bottom:22px; }
.hero-line{ display:block; overflow:hidden; }
.hero-line--gold{ color:var(--gold); font-style:italic; font-weight:500; }
.hero-name{ font-family:var(--font-accent); font-size:clamp(24px,3vw,34px); font-style:italic; color:var(--gold-soft); margin-bottom:16px; }
.hero-subtitle{ font-size:clamp(14px,1.6vw,17px); color:var(--ink-mute); max-width:560px; margin:0 auto 40px; font-weight:300; }

.hero-actions{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }
.hero-watch-btn{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ivory); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  border-bottom:1px solid transparent; padding-bottom:4px; transition:color 0.3s, border-color 0.3s;
}
.hero-watch-icon{ width:26px; height:26px; color:var(--gold); flex:none; }
.hero-watch-icon svg{ width:100%; height:100%; }
.hero-watch-btn:hover{ color:var(--gold-soft); border-color:var(--gold-dim); }

.btn-liquid{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:18px 46px; border:1px solid var(--gold); border-radius:100px;
  color:var(--gold-soft); font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  overflow:hidden; isolation:isolate;
}
.btn-liquid span{ position:relative; z-index:2; transition:color 0.45s var(--ease-luxury); }
.btn-liquid::before{
  content:''; position:absolute; inset:0; z-index:1; background:var(--gold);
  transform:translateY(101%); border-radius:100px 100px 0 0;
  transition:transform 0.5s var(--ease-luxury), border-radius 0.5s var(--ease-luxury);
}
.btn-liquid:hover::before{ transform:translateY(0%); border-radius:0; }
.btn-liquid:hover span{ color:var(--bg); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ padding:var(--section-pad) 0; background:var(--bg); }
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(40px,6vw,90px); align-items:center; }
.about-media{ position:relative; }
.media-frame{
  position:relative; overflow:hidden; border-radius:4px; background:linear-gradient(155deg,#17140F,#0B0A09);
  border:1px solid var(--glass-border);
}
.media-frame--portrait{ aspect-ratio:4/5; }
.media-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-frame img[src$=".jpg"],.media-frame img[src$=".png"]{ }
.no-image .media-frame, .no-image{ }
img.img-fallback{ display:none; }
.media-frame.no-image::after,
.gallery-item.no-image::after,
.fashion-frame.no-image::after{
  content:'UM';
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-style:italic; font-size:15%; color:var(--gold-dim);
  background:
    radial-gradient(circle at 30% 20%, rgba(212,175,55,0.10), transparent 55%),
    linear-gradient(155deg,#17140F,#0B0A09);
  letter-spacing:0.1em;
}
.media-frame.no-image img,
.gallery-item.no-image img,
.fashion-frame.no-image img{ opacity:0; }

.about-media-tag{
  position:absolute; bottom:-22px; right:-22px; background:var(--bg-elevated);
  border:1px solid var(--gold-dim); border-radius:4px; padding:16px 22px; text-align:center;
}
.about-media-tag-eyebrow{ display:block; font-size:10px; letter-spacing:0.18em; color:var(--ink-mute); white-space:nowrap; }
.about-media-tag-year{ display:block; font-family:var(--font-display); font-size:21px; color:var(--gold); white-space:nowrap; }

.about-copy .section-title{ margin-bottom:24px; }
.about-text{ color:var(--ink-mute); font-size:15.5px; max-width:520px; margin-bottom:18px; }
.about-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; padding-top:32px; border-top:1px solid var(--glass-border); }
.stat-number{ display:block; font-family:var(--font-display); font-size:clamp(28px,3vw,40px); color:var(--gold); }
.stat-label{ display:block; font-size:11px; color:var(--ink-mute); line-height:1.4; margin-top:6px; letter-spacing:0.02em; }

@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:repeat(2,1fr); }
  .about-media-tag{ right:12px; bottom:-18px; }
}

/* ==========================================================================
   PURPOSE
   ========================================================================== */
.purpose{ padding:var(--section-pad) 0; background:var(--bg-elevated); }
.purpose-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; margin-top:56px; }
.purpose-card{
  position:relative; padding:36px 28px; border-radius:6px;
  background:var(--glass); border:1px solid var(--glass-border);
  transform-style:preserve-3d; transition:border-color 0.4s, box-shadow 0.4s;
}
.purpose-card:hover{ border-color:var(--gold-dim); box-shadow:0 20px 60px -20px rgba(212,175,55,0.25); }
.purpose-card-num{ font-family:var(--font-display); font-size:13px; color:var(--gold); letter-spacing:0.1em; }
.purpose-card h3{ font-size:19px; color:var(--white); margin:18px 0 12px; }
.purpose-card p{ font-size:13.5px; color:var(--ink-mute); line-height:1.6; }

/* ==========================================================================
   JOURNEY TIMELINE
   ========================================================================== */
.journey{ padding:var(--section-pad) 0; background:var(--bg); }
.timeline{ position:relative; max-width:760px; margin:70px auto 0; padding-left:40px; }
.timeline-line{
  position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:rgba(255,255,255,0.12);
}
.timeline-line span{ display:block; width:100%; height:0%; background:linear-gradient(var(--gold),var(--gold-soft)); }
.timeline-item{ position:relative; padding-bottom:56px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left:-40px; top:6px; width:13px; height:13px; border-radius:50%;
  background:var(--bg); border:2px solid var(--gold-dim); transition:border-color 0.4s, background 0.4s;
}
.timeline-item.is-active .timeline-dot{ border-color:var(--gold); background:var(--gold); box-shadow:0 0 16px 2px rgba(212,175,55,0.5); }
.timeline-card{ padding:26px 30px; background:var(--glass); border:1px solid var(--glass-border); border-radius:6px; }
.timeline-date{ display:inline-block; font-family:var(--font-accent); font-style:italic; color:var(--gold-soft); font-size:15px; margin-bottom:10px; }
.timeline-card h3{ font-size:20px; color:var(--white); margin-bottom:10px; }
.timeline-card p{ font-size:14px; color:var(--ink-mute); line-height:1.65; }

@media (max-width:600px){
  .timeline{ padding-left:30px; }
  .timeline-dot{ left:-30px; }
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery{ padding:var(--section-pad) 0 0; background:var(--bg-elevated); }
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:6px;
  margin-top:60px; padding:0 6px;
}
.gallery-item{ position:relative; overflow:hidden; cursor:pointer; grid-column:span 1; grid-row:span 1; }
.gallery-item--tall{ grid-row:span 2; }
.gallery-item--wide{ grid-column:span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease-luxury); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item::before{
  content:''; position:absolute; inset:0; z-index:1; opacity:0;
  background:linear-gradient(180deg, transparent 40%, rgba(8,8,8,0.9) 100%);
  transition:opacity 0.4s;
}
.gallery-item:hover::before{ opacity:1; }
.gallery-item figcaption{
  position:absolute; left:18px; bottom:16px; z-index:2; font-size:13px; color:var(--white);
  font-family:var(--font-accent); font-style:italic;
  opacity:0; transform:translateY(10px); transition:opacity 0.4s, transform 0.4s;
}
.gallery-item:hover figcaption{ opacity:1; transform:translateY(0); }

@media (max-width:900px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .gallery-item--wide{ grid-column:span 2; }
}

.lightbox{
  position:fixed; inset:0; z-index:9500; background:rgba(5,5,5,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 0.4s, visibility 0.4s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-img{ max-width:82vw; max-height:82vh; border:1px solid var(--glass-border); }
.lightbox-close{ position:absolute; top:26px; right:34px; font-size:36px; color:var(--ivory); line-height:1; }
.lightbox-close:hover{ color:var(--gold); }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:44px; color:var(--ivory); padding:10px 18px; }
.lightbox-nav:hover{ color:var(--gold); }
.lightbox-prev{ left:14px; } .lightbox-next{ right:14px; }

/* ---------- Full film modal ---------- */
.video-modal{
  position:fixed; inset:0; z-index:9600; background:rgba(5,5,5,0.96);
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; visibility:hidden; transition:opacity 0.4s, visibility 0.4s;
}
.video-modal.is-open{ opacity:1; visibility:visible; }
.video-modal-frame{ width:min(920px, 100%); aspect-ratio:16/9; background:#000; border:1px solid var(--glass-border); }
.video-modal-player{ width:100%; height:100%; display:block; }
.video-modal-close{ position:absolute; top:26px; right:34px; font-size:36px; color:var(--ivory); line-height:1; }
.video-modal-close:hover{ color:var(--gold); }

/* ==========================================================================
   ACHIEVEMENTS
   ========================================================================== */
.achievements{ padding:var(--section-pad) 0; background:var(--bg); }
.achievements-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; margin-top:56px; }
.achievement-card{
  padding:34px 26px; background:var(--glass); border:1px solid var(--glass-border); border-radius:6px;
  transition:transform 0.5s var(--ease-luxury), border-color 0.4s, box-shadow 0.5s;
}
.achievement-card:hover{ transform:translateY(-8px); border-color:var(--gold-dim); box-shadow:0 26px 60px -24px rgba(212,175,55,0.3); }
.achievement-icon{ width:48px; height:48px; margin-bottom:20px; }
.achievement-card h3{ font-size:18px; color:var(--white); margin-bottom:10px; }
.achievement-card p{ font-size:13.5px; color:var(--ink-mute); line-height:1.6; }

/* ==========================================================================
   SOUTH AFRICA MAP
   ========================================================================== */
.south-africa{ padding:var(--section-pad) 0; background:var(--bg-elevated); }
.sa-intro{ text-align:center; color:var(--ink-mute); max-width:520px; margin:0 auto; font-size:14.5px; }
.sa-map-wrap{ position:relative; max-width:820px; margin:64px auto 0; padding:0 24px; }
.sa-map{ width:100%; height:auto; overflow:visible; }
.sa-province path{
  fill:rgba(255,255,255,0.05); stroke:rgba(255,255,255,0.18); stroke-width:1.5;
  transition:fill 0.35s, stroke 0.35s;
  cursor:pointer;
}
.sa-province:hover path, .sa-province:focus path{ fill:rgba(212,175,55,0.35); stroke:var(--gold); }
.sa-province--home path{ fill:rgba(212,175,55,0.18); stroke:var(--gold-soft); }
.sa-province--home:hover path{ fill:rgba(212,175,55,0.45); }

.sa-tooltip{
  position:absolute; top:-10px; right:0; width:260px; padding:20px 22px;
  background:rgba(8,8,8,0.9); border:1px solid var(--gold-dim); border-radius:6px;
  backdrop-filter:blur(10px); pointer-events:none;
  opacity:0; transform:translateY(8px); transition:opacity 0.3s, transform 0.3s;
}
.sa-tooltip.is-visible{ opacity:1; transform:translateY(0); }
.sa-tooltip-name{ display:block; font-family:var(--font-display); color:var(--gold); font-size:17px; margin-bottom:8px; }
.sa-tooltip-fact{ display:block; font-size:12.5px; color:var(--ink-mute); line-height:1.6; }

@media (max-width:700px){
  .sa-tooltip{ position:static; width:100%; margin-top:24px; opacity:1; transform:none; }
}

/* ==========================================================================
   FASHION SHOWCASE (horizontal scroll)
   ========================================================================== */
.fashion{ padding:var(--section-pad) 0; background:var(--bg); overflow:hidden; }
.fashion-header{ max-width:var(--container); margin:0 auto 50px; padding:0 clamp(24px,5vw,64px); }
.fashion-track-wrap{ width:100%; overflow-x:auto; scrollbar-width:none; padding-bottom:10px; }
.fashion-track-wrap::-webkit-scrollbar{ display:none; }
.fashion-track{ display:flex; gap:24px; padding:0 clamp(24px,5vw,64px); width:max-content; }
.fashion-frame{ position:relative; width:min(60vw,340px); flex:none; }
.fashion-frame img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px; }
.fashion-frame figcaption{
  margin-top:14px; font-family:var(--font-accent); font-style:italic; color:var(--ink-mute); font-size:13px;
}

/* ==========================================================================
   VALUES (connected nodes)
   ========================================================================== */
.values{ padding:var(--section-pad) 0; background:var(--bg-elevated); }
.values-web{ position:relative; max-width:700px; height:560px; margin:60px auto 0; }
.values-lines{ position:absolute; inset:0; width:100%; height:100%; }
.values-lines line{ stroke:rgba(212,175,55,0.25); stroke-width:1; transition:stroke 0.4s; }
.values-lines line.is-active{ stroke:var(--gold); }
.value-node{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--glass); border:1px solid var(--glass-border);
  font-size:13px; color:var(--ivory); letter-spacing:0.02em;
  transition:transform 0.4s var(--ease-soft), border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.value-node:hover{ transform:translate(-50%,-50%) scale(1.12); border-color:var(--gold); background:rgba(212,175,55,0.12); box-shadow:0 0 40px rgba(212,175,55,0.25); }
.value-node--center{ width:150px; height:150px; background:rgba(212,175,55,0.1); border-color:var(--gold-dim); font-family:var(--font-display); font-size:16px; color:var(--gold-soft); }

@media (max-width:700px){
  .values-web{ height:440px; }
  .value-node{ width:92px; height:92px; font-size:11px; }
  .value-node--center{ width:110px; height:110px; font-size:13px; }
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials{ padding:var(--section-pad) 0; background:var(--bg); }
.testimonial-carousel{ max-width:760px; margin:60px auto 0; overflow:hidden; position:relative; }
.testimonial-track{ display:flex; transition:transform 0.7s var(--ease-luxury); }
.testimonial-slide{ flex:none; width:100%; text-align:center; padding:0 40px; margin:0; }
.testimonial-mark{ display:block; font-family:var(--font-display); font-size:60px; color:var(--gold-dim); line-height:1; margin-bottom:10px; }
.testimonial-slide p{ font-family:var(--font-accent); font-style:italic; font-size:clamp(18px,2.4vw,26px); color:var(--ivory); line-height:1.55; margin-bottom:22px; }
.testimonial-slide footer{ font-size:12px; letter-spacing:0.08em; color:var(--gold-soft); text-transform:uppercase; }
.testimonial-dots{ display:flex; justify-content:center; gap:10px; margin-top:36px; }
.testimonial-dots button{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.2); transition:background 0.3s, transform 0.3s; }
.testimonial-dots button.is-active{ background:var(--gold); transform:scale(1.3); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ padding:var(--section-pad) 0; background:var(--bg-elevated); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start; }
.contact-socials{ display:flex; gap:14px; margin:32px 0 40px; }
.social-icon{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center; color:var(--ink-mute);
  transition:border-color 0.35s, color 0.35s, transform 0.35s;
}
.social-icon svg{ width:19px; height:19px; }
.social-icon:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }
.contact-location{ padding-top:24px; border-top:1px solid var(--glass-border); }
.contact-location p{ font-family:var(--font-display); font-size:18px; color:var(--white); margin-top:6px; }

.contact-form{ display:flex; flex-direction:column; gap:26px; }
.form-field{ position:relative; }
.form-field input, .form-field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--glass-border);
  color:var(--white); font-size:15px; padding:10px 2px; resize:none;
}
.form-field textarea{ min-height:90px; }
.form-field label{
  position:absolute; left:2px; top:10px; color:var(--ink-mute); font-size:15px;
  transition:transform 0.3s var(--ease-soft), font-size 0.3s, color 0.3s; pointer-events:none; transform-origin:left top;
}
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label{
  transform:translateY(-20px); font-size:11px; color:var(--gold);
}
.form-underline{ position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width 0.4s var(--ease-luxury); }
.form-field input:focus ~ .form-underline, .form-field textarea:focus ~ .form-underline{ width:100%; }
.btn-liquid--form{ align-self:flex-start; border:1px solid var(--gold); background:transparent; margin-top:10px; }

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

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ position:relative; padding:80px 24px 40px; text-align:center; background:var(--bg); overflow:hidden; border-top:1px solid var(--glass-border); }
.footer-particles{ position:absolute; inset:0; pointer-events:none; opacity:0.5; }
.footer-inner{ position:relative; z-index:1; max-width:600px; margin:0 auto; }
.footer-logo{ display:block; margin:0 auto 14px; }
.footer-logo-img{ width:190px; height:auto; margin:0 auto; display:block; }
.footer-tagline{ font-family:var(--font-accent); font-style:italic; color:var(--gold-soft); font-size:16px; margin-bottom:28px; }
.footer-socials{ display:flex; justify-content:center; gap:28px; margin-bottom:30px; }
.footer-socials a{ font-size:12px; letter-spacing:0.06em; color:var(--ink-mute); transition:color 0.3s; }
.footer-socials a:hover{ color:var(--gold); }
.footer-copy{ font-size:11px; color:rgba(255,255,255,0.35); }

/* ==========================================================================
   SCROLL-REVEAL BASE STATES (GSAP toggles .is-visible)
   ========================================================================== */
[data-reveal], [data-reveal-line]{ opacity:0; transform:translateY(26px); }
[data-reveal].is-visible, [data-reveal-line].is-visible{ opacity:1; transform:translateY(0); }
.hero-line span.inner{ display:inline-block; transform:translateY(110%); }