/* ============================================================
   KAMAL JEWELLERS — Immersive Liquid Gallery
   Single-file SPA · Lenis smooth scroll · WebGL molten-gold hero
   SVG water-displacement warping · GSAP ripple transitions
   ============================================================ */

:root{
  --black:#0a0807;
  --ink:#15110d;
  --gold:#e0af3d;
  --gold-bright:#ffd966;
  --gold-deep:#b8862a;
  --cream:#f3ead7;
  --ruby:#a11b3f;
  --emerald:#0e6b4a;
  --glass:rgba(255,255,255,0.06);
  --glass-brd:rgba(224,175,61,0.32);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--black);color:var(--cream);}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:'Jost',sans-serif;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
::selection{background:var(--gold);color:var(--black)}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- Custom cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;mix-blend-mode:difference}
.cursor{width:34px;height:34px;border:1px solid var(--gold-bright);transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),opacity .3s}
.cursor-dot{width:5px;height:5px;background:var(--gold-bright);transform:translate(-50%,-50%)}
.cursor.grow{width:78px;height:78px;background:rgba(244,215,132,.15)}
@media (hover:none){.cursor,.cursor-dot{display:none}body{cursor:auto}}

/* ---------- Loader — velvet jewellery box opening ----------
   Two velvet-lined lids sit closed over the page while it loads, breathing
   a warm glow at the seam. When loading finishes (.done) the seam flashes
   gold, the lids draw apart, and the crest is revealed inside like the
   piece in the box before everything lifts away. */
/* Fade is delayed until the lids have almost finished parting, so the box
   opens cleanly instead of dissolving halfway through the movement. */
.loader{position:fixed;inset:0;z-index:10000;background:#060403;display:flex;align-items:center;justify-content:center;transition:opacity .4s var(--ease) .82s,visibility .4s .82s}
.loader.done{opacity:0;visibility:hidden}
.vbox{position:absolute;inset:0;overflow:hidden}
.vbox-lid{position:absolute;left:0;width:100%;height:50.4%;overflow:hidden;
  background:
    radial-gradient(ellipse 120% 90% at 50% 100%,rgba(255,196,120,.10),transparent 60%),
    linear-gradient(180deg,#1c060d 0%,#12040a 46%,#080204 100%);
  transition:transform .78s cubic-bezier(.7,0,.25,1) .28s}
.vbox-top{top:0}
.vbox-bot{bottom:0;background:
    radial-gradient(ellipse 120% 90% at 50% 0%,rgba(255,196,120,.10),transparent 60%),
    linear-gradient(0deg,#1c060d 0%,#12040a 46%,#080204 100%)}
/* Velvet nap — fine crossed threading plus a soft sheen, so it reads as
   crushed fabric rather than flat colour */
.vbox-nap{position:absolute;inset:0;opacity:.9;
  background:
    repeating-linear-gradient(114deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(66deg,rgba(0,0,0,.4) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,190,140,.03) 0 2px,transparent 2px 7px),
    radial-gradient(ellipse 70% 120% at 30% 40%,rgba(255,220,190,.07),transparent 70%)}
/* Gold piping along the opening edge */
.vbox-pipe{position:absolute;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(224,175,61,.5) 12%,#ffd966 50%,rgba(224,175,61,.5) 88%,transparent);
  box-shadow:0 0 14px rgba(255,217,102,.5)}
.vbox-top .vbox-pipe{bottom:0}
.vbox-bot .vbox-pipe{top:0}
/* Warm light pooling out of the seam while we wait */
.vbox-glow{position:absolute;left:50%;top:50%;width:min(760px,92vw);height:260px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,214,140,.5),rgba(255,190,110,.14) 42%,transparent 72%);
  filter:blur(14px);animation:vboxBreathe 2.1s ease-in-out infinite}
@keyframes vboxBreathe{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
/* The clasp catching the light as it springs */
.vbox-seam{position:absolute;left:4%;right:4%;top:50%;height:2px;transform:translateY(-1px) scaleX(.2);
  background:linear-gradient(90deg,transparent,#ffe9a8 20%,#fff 50%,#ffe9a8 80%,transparent);
  box-shadow:0 0 34px 6px rgba(255,217,102,.8);opacity:0}
.loader.done .vbox-seam{animation:vboxFlash .42s ease-out both}
.loader.done .vbox-top{transform:translateY(-100%)}
.loader.done .vbox-bot{transform:translateY(100%)}
@keyframes vboxFlash{0%{opacity:0;transform:translateY(-1px) scaleX(.2)}45%{opacity:1;transform:translateY(-1px) scaleX(1)}100%{opacity:0;transform:translateY(-1px) scaleX(1)}}
/* The crest, sitting in the box */
.loader .logoMark{position:relative;z-index:2;width:clamp(88px,16vw,116px);height:auto;border-radius:50%;
  animation:logoIn 1.5s var(--ease) both;
  box-shadow:0 0 0 1px rgba(215,175,80,.22),0 0 26px rgba(255,205,110,.75),0 0 64px rgba(255,195,95,.45),0 0 140px rgba(255,190,90,.22)}
@keyframes logoIn{0%{opacity:0;transform:scale(.8)}55%{opacity:1;transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .vbox-glow,.loader .logoMark{animation:none}
  .vbox-lid{transition:none}
}

/* ---------- WebGL hero canvas ---------- */
#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100svh;z-index:0;display:block}

/* ---------- Navigation ---------- */
nav{position:fixed;top:0;left:0;width:100%;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:1.5rem clamp(1.2rem,4vw,3.5rem);transition:background .5s var(--ease),padding .5s var(--ease),backdrop-filter .5s}
nav.scrolled{background:rgba(10,8,7,.55);backdrop-filter:blur(18px) saturate(140%);padding-top:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(224,175,61,.24)}
.brand{display:flex;align-items:center;gap:.65rem;font-family:'Cormorant Garamond';font-size:1.55rem;letter-spacing:.12em;color:var(--gold-bright);white-space:nowrap}
.brand .brand-logo{width:40px;height:40px;flex:0 0 auto;border-radius:50%;box-shadow:0 0 10px rgba(215,175,80,.6),0 0 28px rgba(215,175,80,.3),0 0 60px rgba(215,175,80,.12)}
.brand .brand-text{display:flex;flex-direction:column;line-height:1}
.brand small{display:block;font-family:'Jost';font-weight:300;font-size:.52rem;letter-spacing:.55em;color:var(--cream);opacity:.55;margin-top:.25rem;text-transform:uppercase}
@media(max-width:480px){.brand{font-size:1.3rem}.brand .brand-logo{width:34px;height:34px}}
.nav-toggle{display:flex;align-items:center;gap:.7rem;font-size:.66rem;letter-spacing:.35em;text-transform:uppercase;color:var(--cream)}
.nav-toggle .lines{width:30px;height:10px;position:relative}
.nav-toggle .lines i{position:absolute;left:0;width:100%;height:1px;background:var(--gold-bright);transition:.4s var(--ease)}
.nav-toggle .lines i:first-child{top:0}
.nav-toggle .lines i:last-child{bottom:0}
body.menu-open .nav-toggle .lines i:first-child{transform:translateY(4.5px) rotate(45deg)}
body.menu-open .nav-toggle .lines i:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- Announcement bar ---------- */
.anno{position:fixed;top:0;left:0;width:100%;z-index:210;display:none;align-items:center;justify-content:center;gap:.8rem;padding:.5rem 2.6rem;text-align:center;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-deep));color:#1a1206;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;line-height:1.4}
.anno.show{display:flex}
.anno a{color:#1a1206;text-decoration:underline;text-underline-offset:2px}
.anno .x{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);font-size:1rem;line-height:1;color:#1a1206;opacity:.65;cursor:pointer;padding:.2rem}
.anno .x:hover{opacity:1}
body.has-anno nav{top:var(--anno-h,34px)}
@media(max-width:560px){.anno{font-size:.56rem;letter-spacing:.14em;padding:.45rem 2.2rem}}

/* ---------- Full menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:190;background:linear-gradient(160deg,#0a0807,#161009 60%,#0a0807);display:flex;flex-direction:column;justify-content:center;padding:clamp(6rem,14vh,9rem) clamp(1.2rem,6vw,7rem) 4rem;clip-path:circle(0% at 92% 4%);transition:clip-path .9s var(--ease);overflow-y:auto}
body.menu-open .menu{clip-path:circle(150% at 92% 4%)}
.menu .eyebrow{font-size:.62rem;letter-spacing:.5em;color:var(--gold);text-transform:uppercase;margin-bottom:1.6rem;opacity:.8}
.menu ol{list-style:none;counter-reset:c;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.2rem 3rem}
.menu li{counter-increment:c;border-bottom:1px solid rgba(216,178,94,.1)}
.menu li a{display:flex;align-items:baseline;gap:1.1rem;padding:.85rem 0;font-family:'Cormorant Garamond';font-size:clamp(1.5rem,3vw,2.3rem);color:var(--cream);transition:color .4s,padding-left .4s var(--ease)}
.menu li a::before{content:counter(c,decimal-leading-zero);font-family:'Jost';font-size:.6rem;letter-spacing:.2em;color:var(--gold);opacity:.6;transform:translateY(-.4em)}
.menu li a:hover{color:var(--gold-bright);padding-left:1rem}

/* ---------- Generic layout ---------- */
.wrap{position:relative;z-index:2}
section{position:relative}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.eyebrow{font-size:.62rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold)}

/* ---------- Hero ---------- */
.hero{height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;z-index:2}
.hero .eyebrow{margin-bottom:1.6rem;opacity:.85}
.hero h1{font-family:'Cormorant Garamond';font-weight:400;line-height:.98;font-size:clamp(2.8rem,9vw,8.5rem);letter-spacing:.01em}
.hero h1 em{font-style:italic;color:var(--gold-bright);display:block}
.hero .sub{margin-top:1.8rem;max-width:34ch;font-size:clamp(.85rem,1.4vw,1rem);line-height:1.8;color:rgba(243,234,215,.72);letter-spacing:.04em}
.scroll-cue{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.7rem;font-size:.58rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);opacity:.7}
.scroll-cue .line{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--gold-bright);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{top:-50%}60%,100%{top:120%}}

/* ---------- Search bar (hero) ---------- */
.srch-wrap{margin-top:2rem;position:relative;z-index:10}
.srch-bar{position:relative;width:min(540px,88vw);margin:0 auto}
.srch-ico{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--gold);pointer-events:none;z-index:1}
#srchInput{display:block;width:100%;background:rgba(255,255,255,.09);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(224,175,61,.45);border-radius:40px;padding:.85rem 1.4rem .85rem 3rem;color:var(--cream);font-family:'Jost';font-size:.9rem;letter-spacing:.02em;outline:none;transition:border-color .3s,background .3s;-webkit-appearance:none;appearance:none}
#srchInput::placeholder{color:rgba(243,234,215,.4)}
#srchInput:focus{border-color:rgba(224,175,61,.8);background:rgba(255,255,255,.13)}
#srchInput::-webkit-search-cancel-button{display:none}
.srch-drop{position:absolute;top:calc(100% + .55rem);left:0;right:0;
  background:linear-gradient(155deg,rgba(18,13,8,.97),rgba(9,7,5,.98));
  border:1px solid rgba(216,178,94,.28);border-radius:18px;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  z-index:60;max-height:360px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(216,178,94,.2) transparent}
.srch-drop.open{opacity:1;visibility:visible;transform:none}
.srch-item{display:flex;align-items:center;gap:.85rem;padding:.65rem 1rem;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.05)}
.srch-item:last-child{border-bottom:none}
.srch-item:hover,.srch-item.sr-active{background:rgba(216,178,94,.1)}
.srch-thumb{width:38px;height:48px;border-radius:7px;overflow:hidden;flex-shrink:0;background:#0d0f12}
.srch-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.srch-info{flex:1;min-width:0}
.srch-name{font-family:'Cormorant Garamond';font-size:1.08rem;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-tag{font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:.12rem}
.srch-arr{color:rgba(216,178,94,.5);font-size:.75rem;flex-shrink:0}
.srch-empty{padding:1.1rem;text-align:center;font-size:.78rem;color:rgba(243,234,215,.4);letter-spacing:.04em}

/* ---------- Section shell over solid bg ---------- */
.solid{background:linear-gradient(180deg,transparent,var(--black) 12%);position:relative;z-index:2;transition:background .85s var(--ease)}

/* ---------- Tile theme atmosphere ---------- */
html,body{transition:background .85s var(--ease)}
body.theme-gold{background:radial-gradient(ellipse 100% 60% at 50% 0%,#2e1e07 0%,var(--black) 55%)}
body.theme-ruby{background:radial-gradient(ellipse 100% 60% at 50% 0%,#2e0810 0%,var(--black) 55%)}
body.theme-emerald{background:radial-gradient(ellipse 100% 60% at 50% 0%,#072e18 0%,var(--black) 55%)}
body.theme-gold    .solid{background:radial-gradient(ellipse 90% 50% at 50% 18%,rgba(107,84,24,.26) 0%,transparent 68%),linear-gradient(180deg,transparent,var(--black) 12%)}
body.theme-ruby    .solid{background:radial-gradient(ellipse 90% 50% at 50% 18%,rgba(90,22,38,.32) 0%,transparent 68%),linear-gradient(180deg,transparent,var(--black) 12%)}
body.theme-emerald .solid{background:radial-gradient(ellipse 90% 50% at 50% 18%,rgba(31,74,60,.26) 0%,transparent 68%),linear-gradient(180deg,transparent,var(--black) 12%)}

/* ---------- Selected tile ring ---------- */
.tile.selected .enter{opacity:1;transform:none}
.tile.selected .swatch{transform:scale(1.1)}
.tile.selected[data-theme="gold"]   {box-shadow:inset 0 0 0 2px rgba(224,175,61,.8),0 0 56px rgba(224,175,61,.34)}
.tile.selected[data-theme="ruby"]   {box-shadow:inset 0 0 0 2px rgba(210,40,75,.8),0 0 56px rgba(210,40,75,.34)}
.tile.selected[data-theme="emerald"]{box-shadow:inset 0 0 0 2px rgba(30,180,115,.8),0 0 56px rgba(30,180,115,.34)}

/* ---------- Collection intro / loading screen ---------- */
.tile-preview{position:fixed;inset:0;z-index:240;display:flex;align-items:center;justify-content:center;padding:1.5rem;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);background:rgba(8,5,2,.5);backdrop-filter:blur(9px) saturate(120%);-webkit-backdrop-filter:blur(9px) saturate(120%)}
.tile-preview.show{opacity:1;pointer-events:auto}
.tp-inner{width:min(540px,96vw);padding:2.4rem clamp(1.4rem,3vw,2.4rem);border-radius:28px;background:linear-gradient(155deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.04) 100%);border:1px solid rgba(216,178,94,.3);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.18),0 32px 80px -20px rgba(0,0,0,.85);transform:translateY(24px) scale(.97);transition:transform .6s var(--ease);text-align:center;position:relative}
.tile-preview.show .tp-inner{transform:translateY(0) scale(1)}
/* 3-second progress fill — the "loading" cue */
.tp-load{width:100%;height:2px;margin-top:1.6rem;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.tp-load span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright))}
.tile-preview.show .tp-load span{animation:tpfill 1.5s linear forwards}
@keyframes tpfill{from{width:0}to{width:100%}}
body.theme-ruby    .tp-inner{border-color:rgba(180,50,70,.45)}
body.theme-emerald .tp-inner{border-color:rgba(50,160,100,.45)}
#tpName{font-family:'Cormorant Garamond';font-weight:300;font-size:clamp(2rem,5vw,3.2rem);line-height:1.04;margin:.6rem 0 .9rem;color:var(--cream)}
#tpName em{font-style:italic;color:var(--gold-bright)}
#tpLede{font-size:clamp(.82rem,1.1vw,.95rem);line-height:1.82;color:rgba(243,234,215,.75);max-width:44ch;margin:0 auto 1.5rem}
.tp-cta{display:inline-flex;margin-top:.4rem;font-size:.64rem;padding:.7rem 1.8rem;letter-spacing:.32em;cursor:none}
.tp-close{position:absolute;top:.9rem;right:1rem;background:none;border:none;color:rgba(243,234,215,.45);font-size:1rem;cursor:none;line-height:1;transition:color .3s;padding:.3rem .5rem}
.tp-close:hover{color:var(--gold-bright)}

/* ---------- Video strip (YouTube feature + vertical reel) ---------- */
.vid-sec{padding:clamp(3.5rem,8vw,6rem) clamp(1.2rem,5vw,5rem) clamp(1rem,3vw,2rem);position:relative;z-index:2}
.vid-sec.empty{display:none}
.vid-head{text-align:center;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.vid-head h2{font-family:'Cormorant Garamond';font-weight:300;font-size:clamp(2rem,5vw,3.4rem);margin:.3rem 0 0;line-height:1}
.vid-head h2 em{font-style:italic;color:var(--gold-bright)}
/* 70 / 30 split — the wide film leads, the vertical reel sits beside it */
/* Generous gap on purpose: at full width these are two big pieces of media
   sitting side by side, and a tight gutter made them read as one crowded
   block — especially once the YouTube player's own chrome appears. */
/* align-items:start, NOT stretch. With stretch, both cards take the row's
   height (set by the tall 9:16 reel) and then aspect-ratio computes each
   card's WIDTH back from that height — which blew the 16:9 card out to
   1219px inside an 819px column, so it ran underneath the reel. Sizing from
   the column width instead keeps each card inside its own track. */
.vid-grid{display:grid;grid-template-columns:68fr 32fr;gap:clamp(1.4rem,3.4vw,2.8rem);max-width:1250px;margin:0 auto;align-items:start}
.vid-card{width:100%}
@media(max-width:820px){.vid-grid{gap:clamp(1.2rem,4vw,1.8rem)}}
@media(max-width:820px){.vid-grid{grid-template-columns:1fr}}
.vid-card{position:relative;display:block;overflow:hidden;border-radius:20px;text-decoration:none;color:inherit;
  border:1px solid rgba(255,217,102,.4);background:#0d0b08;
  box-shadow:0 14px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08),0 0 20px rgba(255,217,102,.08);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.vid-card:hover{transform:translateY(-3px);border-color:rgba(255,217,102,.7);box-shadow:0 22px 60px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.12),0 0 34px rgba(255,217,102,.24)}
.vid-main{aspect-ratio:16/9}
.vid-reel{aspect-ratio:9/16}
@media(max-width:820px){.vid-reel{aspect-ratio:16/10}}
/* Only one of the two set up? Don't let it inherit the 70% column — a lone
   9:16 reel in an 860px column becomes a 1500px-tall monster. Give it its
   own sensible width instead and centre it. */
.vid-grid > .vid-card:only-child{grid-column:1/-1;justify-self:center;width:100%}
.vid-grid > .vid-main:only-child{max-width:980px}
.vid-grid > .vid-reel:only-child{max-width:min(340px,86vw)}
/* Belt and braces: even paired, a reel should never tower over the page */
.vid-reel{max-height:78vh}
.vid-card .vid-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vid-card .vid-ph{position:absolute;inset:0;background:linear-gradient(150deg,#2a2217,#0d0907);display:flex;align-items:center;justify-content:center;
  font-size:.8rem;letter-spacing:.04em;line-height:1.6;color:rgba(255,231,170,.82);text-align:center;padding:1.5rem;z-index:2}
/* An unconfigured card shouldn't pretend there's something to play */
.vid-card.is-empty .vid-play,.vid-card.is-empty .vid-shade{display:none}
/* A clip fills the frame exactly like the still it replaces */
video.vid-clip{object-fit:cover;background:#0d0b08}
.vid-card .vid-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,4,3,.9) 0%,rgba(6,4,3,.45) 26%,transparent 55%)}
/* Gold ring play button — the single strongest "this is a video" cue */
.vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(52px,7vw,72px);height:clamp(52px,7vw,72px);
  border-radius:50%;border:1px solid rgba(255,217,102,.85);background:rgba(8,6,4,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 26px rgba(255,217,102,.35),inset 0 1px 0 rgba(255,255,255,.18);
  transition:background .35s,transform .35s var(--ease)}
.vid-play::after{content:'';margin-left:.22em;border-style:solid;border-width:.52em 0 .52em .86em;border-color:transparent transparent transparent var(--gold-bright)}
.vid-card:hover .vid-play{background:rgba(255,217,102,.22);transform:translate(-50%,-50%) scale(1.07)}
.vid-cap{position:absolute;left:0;right:0;bottom:0;padding:1.1rem clamp(1rem,2.5vw,1.5rem);z-index:2;text-align:left}
.vid-cap .k{display:block;font-size:.54rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.vid-cap .t{font-family:'Cormorant Garamond';font-weight:400;font-size:clamp(1rem,2vw,1.45rem);color:var(--cream);line-height:1.2}
.vid-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

/* ---------- Catalogue showcase box (replaces the old tile grid) ---------- */
.cat-sec{padding:clamp(2rem,5vw,3.5rem) clamp(1.2rem,5vw,5rem) clamp(4rem,9vw,7rem);position:relative;z-index:2}
.cat-box{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center;
  max-width:1250px;margin:0 auto;padding:clamp(1.6rem,4vw,3.2rem);border-radius:26px;text-decoration:none;color:inherit;
  border:1px solid rgba(255,217,102,.45);
  background:linear-gradient(150deg,rgba(255,217,102,.09),rgba(255,255,255,.02));
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1),0 0 28px rgba(255,217,102,.1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.cat-box::before{content:'';position:absolute;inset:9px;border:1px solid rgba(255,217,102,.2);border-radius:19px;pointer-events:none}
.cat-box{position:relative}
.cat-box:hover{transform:translateY(-4px);border-color:rgba(255,217,102,.75);box-shadow:0 30px 76px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),0 0 44px rgba(255,217,102,.26)}
@media(max-width:860px){.cat-box{grid-template-columns:1fr;text-align:center}}
/* Fanned photo preview of the catalogue page */
.cat-fan{position:relative;height:clamp(190px,26vw,280px);display:flex;align-items:center;justify-content:center}
.cat-fan .pv{position:absolute;width:clamp(96px,13vw,150px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,217,102,.45);background:linear-gradient(150deg,#2a2217,#0d0907);
  box-shadow:0 16px 40px rgba(0,0,0,.6);transition:transform .6s var(--ease)}
.cat-fan .pv img{width:100%;height:100%;object-fit:cover;display:block}
.cat-fan .pv:nth-child(1){transform:rotate(-13deg) translateX(-58%)}
.cat-fan .pv:nth-child(2){transform:rotate(0deg);z-index:2}
.cat-fan .pv:nth-child(3){transform:rotate(13deg) translateX(58%)}
.cat-box:hover .cat-fan .pv:nth-child(1){transform:rotate(-17deg) translateX(-70%)}
.cat-box:hover .cat-fan .pv:nth-child(3){transform:rotate(17deg) translateX(70%)}
.cat-copy h2{font-family:'Cormorant Garamond';font-weight:300;font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.02;margin:.4rem 0 .8rem}
.cat-copy h2 em{font-style:italic;color:var(--gold-bright)}
.cat-copy p{font-size:clamp(.85rem,1.4vw,1rem);line-height:1.75;color:rgba(243,234,215,.72);max-width:42ch;margin-bottom:1.5rem}
@media(max-width:860px){.cat-copy p{margin-left:auto;margin-right:auto}}
.cat-cta{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.9rem;border-radius:40px;
  border:1px solid rgba(255,217,102,.7);background:linear-gradient(135deg,rgba(255,217,102,.18),rgba(255,255,255,.04));
  color:var(--gold-bright);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 16px rgba(255,217,102,.14);transition:background .4s,box-shadow .4s}
.cat-cta i{font-style:normal;transition:transform .4s var(--ease)}
.cat-box:hover .cat-cta{background:linear-gradient(135deg,rgba(255,217,102,.3),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 30px rgba(255,217,102,.34)}
.cat-box:hover .cat-cta i{transform:translate(3px,-3px)}

/* ---------- Collections directory grid ---------- */
.dir-cta{padding:12vh 0 3vh;text-align:center}
.dir-pill{font-size:.66rem;padding:.7rem 1.8rem;letter-spacing:.34em}
.directory{padding:0 clamp(1.2rem,5vw,5rem) 12vh;position:relative;z-index:2}
.directory .head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;margin-bottom:3rem;border-bottom:1px solid rgba(216,178,94,.15);padding-bottom:1.4rem}
.directory .head h3{font-family:'Cormorant Garamond';font-weight:300;font-size:clamp(1.6rem,3.6vw,2.8rem)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px;padding:10px}
@media(max-width:540px){.grid{gap:8px;padding:4px 0}}
.tile{position:relative;background:rgba(255,255,255,.05);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:2.8rem 2rem;min-height:clamp(260px,28vw,380px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.tile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 22%,rgba(0,0,0,.1) 48%,transparent 70%);pointer-events:none;z-index:1}
.tile .num{position:absolute;top:1.4rem;right:1.6rem;font-size:.62rem;letter-spacing:.25em;color:rgba(255,255,255,.5);z-index:2}
.tile .swatch{position:absolute;inset:0;opacity:.95;transition:transform 1.1s var(--ease),opacity .6s;transform:scale(1.04)}
.tile:hover .swatch{transform:scale(1.12)}
.tile h4{
  font-family:'Cormorant Garamond';font-size:clamp(1.55rem,2vw,2.2rem);font-weight:500;letter-spacing:.05em;
  position:relative;z-index:2;transition:transform .6s var(--ease);
  /* Crispy metallic gold — multiple stops simulate real light on polished gold.
     Stretched to 220% and slowly panned (see @keyframes goldShimmer below) so
     the highlight visibly travels across the letters, like light moving over
     a polished surface rather than a static printed gradient. */
  background:linear-gradient(162deg,
    #fff8b0 0%,
    #f4d784 14%,
    #ffe87a 26%,
    #c8922a 40%,
    #f0d070 54%,
    #fffbe0 66%,
    #e8c55a 78%,
    #c08a20 100%
  );
  background-size:220% 220%;
  animation:goldShimmer 7s ease-in-out infinite;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  /* Dark stacked shadows (not gold-tinted) so the text reads against any
     photo — a warm glow only helps on dark backgrounds, this holds up
     against bright ones too. */
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.95))
    drop-shadow(0 2px 6px rgba(0,0,0,.75))
    drop-shadow(0 0 18px rgba(0,0,0,.55));
}
.tile .enter{
  position:relative;z-index:2;margin-top:1rem;font-size:.58rem;letter-spacing:.38em;text-transform:uppercase;
  color:var(--gold-bright);
  display:inline-flex;align-items:center;gap:.6rem;
  opacity:0;transform:translateX(-10px);transition:.6s var(--ease);
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.7);
}
.tile:hover .enter{opacity:1;transform:none}
@media(hover:none){.tile{min-height:280px}}
@keyframes goldShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.tile h4{animation:none}}

/* ---------- Collection detail panels ---------- */
.collection{min-height:100vh;padding:16vh clamp(1.2rem,5vw,5rem) 12vh;position:relative;z-index:2;display:none;background:var(--black)}
.collection.active{display:block}
/* when immersed in a collection, hide the main flow so the panel sits at the top */
body.viewing .hero,body.viewing #collections,
body.viewing .sale-sec,body.viewing .sale-sec-edit,
body.viewing .reviews,body.viewing .visit,body.viewing footer{display:none}
.collection .topline{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2.4rem;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:.8rem;font-size:.62rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);transition:gap .4s var(--ease)}
.back:hover{gap:1.3rem;color:var(--gold-bright)}
.collection h2{font-family:'Cormorant Garamond';font-weight:300;font-size:clamp(2.6rem,8vw,7rem);line-height:.98;margin:.4rem 0 1.4rem}
.collection h2 em{font-style:italic;color:var(--gold-bright)}
.collection .lede{max-width:60ch;font-size:clamp(.9rem,1.5vw,1.08rem);line-height:1.9;color:rgba(243,234,215,.74);margin-bottom:4rem}

/* ---------- Catalogue pill (top of each collection) ---------- */
.catalogue-pill{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1.3rem;border-radius:40px;border:1px solid rgba(255,217,102,.7);background:linear-gradient(135deg,rgba(255,217,102,.14),rgba(255,255,255,.04));backdrop-filter:blur(10px) saturate(140%);color:var(--gold-bright);font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 14px rgba(255,217,102,.12);transition:background .4s,box-shadow .4s,transform .3s var(--ease)}
.catalogue-pill:hover{background:linear-gradient(135deg,rgba(255,217,102,.24),rgba(255,255,255,.08));box-shadow:0 0 28px rgba(255,217,102,.36),inset 0 1px 0 rgba(255,255,255,.14);transform:translateY(-1px)}

/* ---------- Immersive full-bleed feature showcase ---------- */
/* Full-bleed: breaks out of the collection's side padding to span the viewport */
.showcase-stack{margin:4vh calc(50% - 50vw) 0;width:100vw;overflow:hidden}
.feature{position:relative;display:block;min-height:clamp(560px,90svh,1000px);overflow:hidden;background:#080502;opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.feature.in{opacity:1;transform:none}
.feature .fimg{position:absolute;inset:-9% 0;background-size:cover;background-position:var(--fi-x,50%) var(--fi-y,50%);will-change:transform}
/* Veil: clear centre so the jewellery is visible whole — edges only */
.feature .veil{position:absolute;inset:0;background:
  radial-gradient(ellipse 86% 74% at 50% 48%,transparent 38%,rgba(8,5,2,.62) 100%),
  linear-gradient(0deg,rgba(8,5,2,.82) 0%,rgba(8,5,2,.35) 15%,transparent 30%,transparent 70%,rgba(8,5,2,.30) 85%,rgba(8,5,2,.78) 100%)}
.feature .veil::after{display:none}
/* Linked feature panels */
a.feature{cursor:pointer;text-decoration:none}
.feat-link-cue{display:inline-block;margin-top:1.2rem;font-size:.58rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold-bright);transition:opacity .4s,transform .4s var(--ease)}
a.feature:hover .feat-link-cue{opacity:.85;transform:translateX(4px)}

/* Seam blur strip — sits at the join of two panels, blurs both images */
.seam-blur{position:relative;height:48px;margin:-24px 0;z-index:4;pointer-events:none;
  -webkit-backdrop-filter:blur(18px) brightness(.5) saturate(.65);
  backdrop-filter:blur(18px) brightness(.5) saturate(.65);
  background:linear-gradient(180deg,rgba(8,5,2,.1) 0%,rgba(8,5,2,.5) 40%,rgba(8,5,2,.5) 60%,rgba(8,5,2,.1) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,black 28%,black 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,black 28%,black 72%,transparent 100%)}
/* Liquid glass text card — centred, absolute, bottom-anchored */
.feature .ftext{position:absolute;left:var(--fp-x,50%);top:var(--fp-y,80%);transform:translate(-50%,-50%);width:var(--fs-w,min(520px,88vw));min-height:var(--fs-h,0px);margin:0;padding:clamp(.45rem,4.5cqi,1.4rem) clamp(.6rem,5.5cqi,2.2rem);border-radius:clamp(10px,5cqi,24px);background:linear-gradient(155deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 100%);border:1px solid rgba(216,178,94,.28);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.16),0 24px 64px -20px rgba(0,0,0,.7);text-align:center;z-index:2;container-type:inline-size;container-name:fcard}
.feature.text-right .ftext,.feature.text-left .ftext{margin:0}
.feature .ftext .eyebrow{display:block;margin-bottom:clamp(.2rem,2.5cqi,.7rem);text-align:center;font-size:clamp(.34rem,2.8cqi,.62rem);letter-spacing:clamp(.06em,0.4cqi,.28em)}
.feature .ftext h3{font-family:'Cormorant Garamond';font-weight:300;font-size:clamp(.58rem,9cqi,2.8rem);line-height:1.06;margin-bottom:clamp(.2rem,2.5cqi,.7rem);color:var(--cream)}
.feature .ftext h3 em{font-style:italic;color:var(--gold-bright)}
.feature .ftext p{font-size:clamp(.4rem,3cqi,.95rem);line-height:1.7;color:rgba(243,234,215,.82)}
@media(max-width:760px){
  .feature{min-height:88svh}
  .feature .fimg{background-position:var(--fi-xm,var(--fi-x,50%)) var(--fi-ym,var(--fi-y,50%))}
  .feature .ftext{width:var(--fs-wm,var(--fs-w,min(88vw,360px)));min-height:var(--fs-hm,var(--fs-h,0px));left:var(--fp-xm,var(--fp-x,50%));top:var(--fp-ym,var(--fp-y,80%))}
}
@media(prefers-reduced-motion:reduce){.feature{transition:opacity .5s ease}.feature .fimg{transform:none!important}}

/* ---------- Reviews (glassmorphism, floating) ---------- */
.reviews{padding:14vh clamp(1.2rem,5vw,5rem) 16vh;position:relative;z-index:2;overflow:hidden}
.reviews .center{text-align:center;margin-bottom:5rem}
.reviews h3{font-family:'Cormorant Garamond';font-weight:300;font-size:clamp(2rem,5vw,4rem);margin-top:.8rem}
.review-field{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem;max-width:1150px;margin:0 auto}
.gcard{position:relative;padding:2.4rem 2rem;border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--glass-brd);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;will-change:transform}
.gcard::before{content:"";position:absolute;top:-40%;left:-30%;width:80%;height:80%;background:radial-gradient(circle,rgba(255,217,102,.34),transparent 70%);filter:blur(10px)}
.gcard .stars{color:var(--gold-bright);letter-spacing:.3em;font-size:.85rem;margin-bottom:1.2rem}
.gcard p{font-family:'Cormorant Garamond';font-style:italic;font-size:1.25rem;line-height:1.55;color:var(--cream)}
.gcard .who{margin-top:1.6rem;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);opacity:.8}

/* ---------- Visit us ---------- */
.visit{padding:14vh clamp(1.2rem,5vw,5rem);position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
@media(max-width:820px){.visit{grid-template-columns:1fr;gap:2.5rem}}
.visit h3{font-family:'Cormorant Garamond';font-weight:300;font-size:clamp(2.2rem,5.5vw,4.4rem);line-height:1.05;margin:.8rem 0 2rem}
.visit h3 em{font-style:italic;color:var(--gold-bright)}
.info-row{display:flex;gap:1.2rem;padding:1.4rem 0;border-top:1px solid rgba(216,178,94,.14)}
.info-row .k{flex:0 0 110px;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);padding-top:.25rem}
.info-row .v{font-size:1.05rem;line-height:1.6;color:var(--cream)}
.info-row .v a:hover{color:var(--gold-bright)}
.visit-right{display:flex;flex-direction:column;gap:1.4rem}
.store-card{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--glass-brd)}
.store-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.store-track::-webkit-scrollbar{display:none}
.store-slide{flex:0 0 100%;scroll-snap-align:center}
.store-slide img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 22%}
.store-card .cap{position:absolute;left:0;bottom:0;width:100%;padding:1.2rem 1.3rem .9rem;background:linear-gradient(0deg,rgba(8,6,4,.9),transparent);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-bright);pointer-events:none}
.store-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(216,178,94,.4);background:rgba(8,6,4,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--gold-bright);font-size:1.5rem;line-height:1;cursor:none;display:flex;align-items:center;justify-content:center;
  transition:background .25s,opacity .25s;opacity:.55}
.store-card:hover .store-nav{opacity:1}
.store-nav:hover{background:rgba(216,178,94,.28)}
.store-nav.prev{left:.7rem}.store-nav.next{right:.7rem}
.store-dots{position:absolute;left:0;right:0;bottom:.55rem;z-index:3;display:flex;justify-content:center;gap:.4rem;pointer-events:auto}
.store-dot{width:7px;height:7px;border-radius:50%;border:none;padding:0;cursor:none;
  background:rgba(243,234,215,.4);transition:background .25s,transform .25s}
.store-dot.on{background:var(--gold-bright);transform:scale(1.3)}
@media(hover:none){.store-nav,.store-dot{cursor:pointer}.store-nav{opacity:.85}}
.map-card{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--glass-brd)}
.map-card iframe{display:block;width:100%;height:380px;border:0;filter:invert(92%) hue-rotate(180deg) saturate(0.9) brightness(0.88)}
.map-open{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem;background:rgba(10,8,7,.7);backdrop-filter:blur(10px);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-bright);text-decoration:none;border-top:1px solid rgba(216,178,94,.14);transition:background .35s}
.map-open:hover{background:rgba(216,178,94,.12)}

/* ---------- Footer ---------- */
footer{position:relative;z-index:2;background:linear-gradient(180deg,var(--black),#070504);padding:9vh clamp(1.2rem,5vw,5rem) 3rem;border-top:1px solid rgba(216,178,94,.14)}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;margin-bottom:5rem}
@media(max-width:820px){.f-top{grid-template-columns:1fr;gap:2.5rem}}
.f-brand{font-family:'Cormorant Garamond';font-size:2.4rem;color:var(--gold-bright);letter-spacing:.06em}
.f-brand .footLogo{width:80px;height:80px;display:block;margin-bottom:1rem;border-radius:50%;box-shadow:0 0 16px rgba(215,175,80,.58),0 0 44px rgba(215,175,80,.28),0 0 90px rgba(215,175,80,.12)}
.f-brand p{font-family:'Jost';font-size:.85rem;color:rgba(243,234,215,.6);max-width:34ch;line-height:1.8;margin-top:1rem}
.f-col h5{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem}
.f-col a,.f-col p{display:block;font-size:.92rem;color:rgba(243,234,215,.78);padding:.32rem 0;transition:color .3s,padding-left .3s var(--ease)}
.f-col a:hover{color:var(--gold-bright);padding-left:.4rem}
.f-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:2rem;border-top:1px solid rgba(216,178,94,.1);font-size:.62rem;letter-spacing:.18em;color:rgba(243,234,215,.4);text-transform:uppercase}
.f-bottom a:hover{color:var(--gold-bright)}

/* magnetic helper */
.mag{display:inline-block;will-change:transform}

.hidden-defs{position:absolute;width:0;height:0;overflow:hidden}


/* ---------- Mobile / accessibility tuning ---------- */
/* Touch devices have no hover — reveal card detail + the "Enter" cue by default */
@media(hover:none){
  .tile .enter{opacity:1;transform:none}
}
/* Respect reduced-motion (also kinder on phone batteries) */
@media(prefers-reduced-motion:reduce){
  .scroll-cue .line::after{animation:none}
  .enq-btn .dotpulse{animation:none}
  .reveal{transition:opacity .4s ease}
}

/* ---------- Floating action buttons (stacked) ---------- */
.fab-stack{position:fixed;bottom:1.6rem;right:1.6rem;z-index:260;display:flex;flex-direction:column;gap:.7rem;align-items:flex-end}
.wa-btn{display:none;align-items:center;gap:.55rem;padding:.85rem 1.3rem;border-radius:40px;border:1px solid rgba(37,211,102,.5);background:linear-gradient(150deg,rgba(37,211,102,.24),rgba(18,110,60,.14));backdrop-filter:blur(14px) saturate(150%);color:#eafff1;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;box-shadow:0 16px 40px -16px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .4s var(--ease),background .4s}
.wa-btn.show{display:flex}
.wa-btn:hover{background:linear-gradient(150deg,rgba(37,211,102,.36),rgba(18,110,60,.2))}
.wa-btn svg{width:17px;height:17px;fill:#46e07f;flex:0 0 auto}
@media(max-width:560px){.wa-btn span.lbl{display:none}.wa-btn{padding:.8rem}}

/* ---------- Enquiry floating widget ---------- */
.enq-btn{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.5rem;border-radius:40px;border:1px solid var(--glass-brd);background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.03));backdrop-filter:blur(14px) saturate(150%);color:var(--gold-bright);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;box-shadow:0 16px 40px -16px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .5s var(--ease),background .5s}
.enq-btn .dotpulse{width:7px;height:7px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 0 0 rgba(244,215,132,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,215,132,.5)}70%{box-shadow:0 0 0 12px rgba(244,215,132,0)}100%{box-shadow:0 0 0 0 rgba(244,215,132,0)}}
.enq-btn:hover{background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.06))}
@media(max-width:560px){.enq-btn{padding:.85rem 1.1rem}.enq-btn span.lbl{display:none}}

.enq-overlay{position:fixed;inset:0;z-index:280;display:flex;align-items:center;justify-content:center;padding:1.4rem;background:rgba(6,4,3,.6);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.enq-overlay.open{opacity:1;visibility:visible}
.enq-modal{position:relative;width:min(560px,100%);max-height:90vh;overflow-y:auto;padding:2.6rem clamp(1.4rem,4vw,2.6rem);border-radius:24px;border:1px solid var(--glass-brd);background:linear-gradient(155deg,rgba(28,21,13,.96),rgba(12,9,6,.97));box-shadow:0 50px 90px -40px #000,inset 0 1px 0 rgba(255,255,255,.07);transform:translateY(24px) scale(.98);transition:transform .6s var(--ease)}
.enq-overlay.open .enq-modal{transform:none}
.enq-modal .x{position:absolute;top:1.1rem;right:1.3rem;font-size:1.4rem;color:var(--gold);line-height:1;cursor:none}
.enq-modal h4{font-family:'Cormorant Garamond';font-weight:300;font-size:clamp(1.7rem,4vw,2.4rem);margin:.4rem 0 .3rem}
.enq-modal h4 em{font-style:italic;color:var(--gold-bright)}
.enq-modal .intro2{font-size:.86rem;line-height:1.7;color:rgba(243,234,215,.66);margin-bottom:1.8rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.field input,.field select,.field textarea{width:100%;background:rgba(243,234,215,.04);border:1px solid rgba(216,178,94,.2);border-radius:12px;padding:.85rem 1rem;color:var(--cream);font-family:'Jost';font-size:.95rem;outline:none;transition:border .35s}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-bright)}
.field select option{background:#15110d}
.enq-submit{width:100%;margin-top:.6rem;padding:1rem;border:1px solid var(--glass-brd);border-radius:40px;background:linear-gradient(150deg,rgba(244,215,132,.2),rgba(243,234,215,.05));color:var(--gold-bright);font-family:'Jost';font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;cursor:none;transition:background .4s}
.enq-submit:hover{background:linear-gradient(150deg,rgba(244,215,132,.34),rgba(243,234,215,.08))}
.enq-submit:disabled{opacity:.5}
.enq-note{margin-top:1rem;text-align:center;font-size:.72rem;letter-spacing:.04em;color:var(--gold);min-height:1.1em}
.enq-done{text-align:center;padding:1.4rem 0}
.enq-done .tick{font-size:2.6rem;color:var(--gold-bright)}
.enq-done p{font-family:'Cormorant Garamond';font-style:italic;font-size:1.4rem;margin-top:.6rem;color:var(--cream)}
.enq-done small{display:block;margin-top:.8rem;font-size:.72rem;color:rgba(243,234,215,.6)}

/* ── Welcome lead-capture popup ──────────────────────────────────────── */
.lead-ov{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:1.4rem;
  background:rgba(6,4,3,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.lead-ov.open{opacity:1;visibility:visible}
.lead-modal{position:relative;width:min(480px,100%);max-height:92vh;overflow-y:auto;
  padding:2.6rem clamp(1.5rem,4vw,2.6rem);border-radius:24px;border:1px solid rgba(216,178,94,.4);
  background:linear-gradient(155deg,rgba(30,22,13,.98),rgba(13,10,6,.99));
  box-shadow:0 50px 100px -40px #000,0 0 60px -30px rgba(216,178,94,.4),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(26px) scale(.97);transition:transform .55s var(--ease)}
.lead-ov.open .lead-modal{transform:none}
.lead-skip{position:absolute;top:1rem;right:1.1rem;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(216,178,94,.3);background:rgba(255,255,255,.05);
  color:var(--gold);font-size:1.1rem;line-height:1;cursor:none;transition:background .25s}
.lead-skip:hover{background:rgba(216,178,94,.18)}
.lead-modal .eyebrow{font-size:.64rem;letter-spacing:.42em;color:var(--gold-bright);opacity:1}
.lead-modal h4{font-family:'Cormorant Garamond';font-weight:300;font-size:clamp(1.9rem,5vw,2.6rem);margin:.5rem 0 .4rem;color:var(--cream)}
.lead-modal h4 em{font-style:italic;color:var(--gold-bright)}
.lead-intro{font-size:.95rem;line-height:1.65;color:rgba(243,234,215,.82);margin-bottom:1.6rem}
.lead-dismiss{text-align:center;margin-top:1rem;font-size:.78rem;letter-spacing:.04em;color:rgba(243,234,215,.55);
  text-decoration:underline;text-underline-offset:3px;cursor:none;transition:color .25s}
.lead-dismiss:hover{color:var(--gold-bright)}
@media(hover:none){.lead-skip,.lead-dismiss{cursor:pointer}}
@media(max-width:480px){
  .lead-ov{padding:1rem}
  .lead-modal{padding:1.7rem 1.2rem;border-radius:20px}
  .lead-modal .eyebrow{font-size:.54rem;letter-spacing:.28em}
  .lead-modal h4{font-size:clamp(1.35rem,7vw,1.65rem);margin:.4rem 0 .3rem}
  .lead-intro{font-size:.78rem;line-height:1.48;margin-bottom:1rem}
  .lead-modal .field{margin-bottom:.7rem}
  .lead-modal .field label{font-size:.5rem;margin-bottom:.3rem}
  .lead-modal .field input,.lead-modal .field select{padding:.62rem .8rem;font-size:16px}
  .lead-modal .enq-submit{padding:.8rem;margin-top:.3rem;font-size:.58rem}
  .lead-dismiss{margin-top:.7rem;font-size:.72rem}
  .lead-skip{width:30px;height:30px;top:.7rem;right:.8rem;font-size:1rem}
}

/* ── FLASH SALE SECTION ─────────────────────────────────────────────── */
.sale-sec{padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(2rem,5vw,3rem);overflow:hidden;display:none}
.sale-sec.live{display:block}
.sale-head{text-align:center;padding:0 1.2rem clamp(1.4rem,4vw,2.2rem)}
.sale-head .eyebrow{color:var(--gold);letter-spacing:.28em}
.sale-head h2{font-family:'Cormorant Garamond';font-size:clamp(2.2rem,5vw,3.4rem);font-weight:300;margin:.3rem 0 0;line-height:1}
.sale-head h2 em{color:var(--gold-bright);font-style:italic}
.sale-track{display:flex;gap:1.2rem;padding:0 clamp(1.2rem,4vw,3rem) 1rem;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.sale-track::-webkit-scrollbar{display:none}
.sale-card{width:clamp(200px,48vw,255px);max-width:255px;min-width:0;flex:0 0 auto;scroll-snap-align:start;
  position:relative;border-radius:18px;overflow:hidden;cursor:none;
  display:block;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sale-card:hover{transform:translateY(-5px);box-shadow:0 24px 56px rgba(0,0,0,.55),0 0 0 1px rgba(216,178,94,.22)}
.sc-img{width:100%;aspect-ratio:3/4;overflow:hidden;background:#0d0b08}
.sc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);display:block}
.sale-card:hover .sc-img img{transform:scale(1.07)}
.sc-off{position:absolute;top:.75rem;left:.75rem;background:#d23535;color:#fff;
  font-family:'Jost';font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.32rem .72rem;border-radius:20px;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.sc-body{padding:1rem 1.1rem 1rem}
.sc-name{font-family:'Cormorant Garamond';font-size:1.5rem;font-weight:500;margin:0 0 .25rem;line-height:1.2;color:var(--cream)}
.sc-note{font-size:.82rem;color:rgba(243,234,215,.72);margin:0 0 .7rem;line-height:1.4}
.sc-prices{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.5rem}
.sc-orig{font-size:.92rem;color:rgba(243,234,215,.5);text-decoration:line-through}
.sc-sale{font-family:'Cormorant Garamond';font-size:1.75rem;font-weight:500;color:var(--gold-bright);line-height:1}
.sc-stock{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#ffb27a;font-weight:500;
  display:none;margin-bottom:.55rem}
.sc-stock.show{display:block}
.sc-btn{display:block;text-align:center;width:100%;padding:.7rem;border:1px solid rgba(216,178,94,.5);border-radius:10px;
  background:rgba(216,178,94,.12);color:var(--gold-bright);font-family:'Jost';font-size:.66rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;cursor:none;
  transition:background .2s,border-color .2s}
.sc-btn:hover{background:rgba(216,178,94,.22);border-color:var(--gold-bright)}
/* Sale modal overlay */
.sale-ov{position:fixed;inset:0;z-index:650;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .3s}
.sale-ov.open{opacity:1;pointer-events:all}
.sale-modal{position:relative;background:rgba(14,10,6,.97);border:1px solid rgba(216,178,94,.2);
  border-radius:22px;width:min(520px,94vw);max-height:94vh;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
  transform:translateY(14px) scale(.98);transition:transform .32s var(--ease)}
.sale-ov.open .sale-modal{transform:none}
.sm-img{overflow:hidden}
.sm-img img{width:100%;height:100%;object-fit:cover;display:block}
.sm-body{padding:1.8rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.8rem;overflow-y:auto}
.sm-off{background:#b82e2e;color:#fff;font-family:'Jost';font-size:.56rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;padding:.26rem .62rem;border-radius:20px;
  display:inline-block;width:fit-content}
.sm-name{font-family:'Cormorant Garamond';font-size:1.65rem;font-weight:300;margin:0;line-height:1.1}
.sm-note{font-size:.72rem;color:rgba(243,234,215,.44);margin:0}
.sm-prices{display:flex;align-items:baseline;gap:.6rem}
.sm-orig{font-size:.84rem;color:rgba(243,234,215,.3);text-decoration:line-through}
.sm-price{font-family:'Cormorant Garamond';font-size:2rem;color:var(--gold-bright)}
.sm-stock{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:#ff9966;display:none}
.sm-stock.show{display:block}
.sm-wa{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.7rem;
  background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.3);border-radius:10px;
  color:#25d366;font-family:'Jost';font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;transition:background .2s;cursor:none}
.sm-wa:hover{background:rgba(37,211,102,.2)}
.sm-close{position:absolute;top:.75rem;right:.85rem;background:none;border:none;
  color:rgba(243,234,215,.44);font-size:1.2rem;cursor:none;z-index:2;line-height:1;padding:.2rem}
@media(max-width:560px){
  .sale-modal{grid-template-columns:1fr}
  .sm-img{max-height:220px}
  .sm-img img{height:100%;object-fit:cover}
}

/* ── Mobile performance: reduce GPU-heavy effects on touch devices ── */
@media(hover:none){
  /* Lighter blur on every glass surface — halves compositor work */
  .tile{backdrop-filter:blur(8px) saturate(110%);-webkit-backdrop-filter:blur(8px) saturate(110%)}
  .gcard{backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%)}
  .feature .ftext{backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
  nav.scrolled{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  #srchInput{backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%)}
  .srch-drop{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,10,6,.97)}
  /* Tighter hero gap on small screens */
  .hero .sub{margin-top:1.1rem}
  .srch-wrap{margin-top:1.2rem}
  .srch-drop{max-height:260px}
  /* No custom cursor elements needed on touch */
  .cursor,.cursor-dot{display:none!important}
}