/* Concept: "Studio silver". A modern jewellery house: warm-neutral paper and graphite, product cutouts lit like studio photography on soft radial backdrops, one deep indigo accent, crisp serif display type, snappy easing. */
:root{
  --paper:#f4f3f0; --paper-2:#eae9e5; --white:#fbfaf8; --ink:#0e0f12; --ink-2:#17191e; --ink-3:#22252c;
  --muted:#686c74; --muted-d:#9aa0ab; --line:rgba(14,15,18,.12); --line-d:rgba(244,243,240,.14);
  --accent:#3140d8; --accent-l:#9fadff; --silver:#e6e8ed;
  --serif:'Instrument Serif','Times New Roman',serif; --sans:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  --out:cubic-bezier(.16,1,.3,1); --snap:cubic-bezier(.2,.9,.25,1.12);
  color-scheme:light;
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
section,header,footer{overflow-x:clip}
.wrap{padding-left:var(--gl);padding-right:var(--gr)}.in-w{max-width:1360px;margin:0 auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1;margin:0;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(42px,5.8vw,88px)}
h2 em,h1 em{font-style:italic;color:var(--accent)}
p{margin:0;max-width:58ch}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.dark{background:var(--ink);color:var(--silver)}
.dark .eyebrow{color:var(--accent-l)}.dark h2 em,.dark h1 em{color:var(--accent-l)}
.pad{padding-block:clamp(80px,11vw,160px)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(34px,4.5vw,64px)}
.head p{max-width:40ch;color:var(--muted)}.dark .head p{color:var(--muted-d)}
.tag{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 28px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:.01em;border:1px solid var(--ink);background:var(--ink);color:var(--paper);position:relative;overflow:hidden;isolation:isolate;transition:transform .45s var(--snap),color .4s,border-color .4s,box-shadow .45s var(--out);will-change:transform}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .55s var(--out);z-index:-1;border-radius:50% 50% 0 0}
.btn:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 12px 30px -10px rgba(49,64,216,.55)}.btn:hover::before{transform:none;border-radius:0}
.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{color:#fff}
.dark .btn.ghost{color:var(--silver);border-color:var(--line-d)}.dark .btn.ghost:hover{border-color:var(--accent-l)}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}.btn.light:hover{color:#fff}
.btn.sm{padding:10px 20px;font-size:14px}
.btn svg{width:16px;height:16px;transition:transform .4s var(--out)}.btn:hover svg{transform:translateX(4px)}

/* loader */
#pre{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:clip-path 1.1s var(--out) .1s;clip-path:inset(0 0 0 0)}
#pre.done{clip-path:inset(0 0 100% 0)}
#pre .m{text-align:center;transition:opacity .5s}#pre.done .m{opacity:0}
#pre b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(46px,9vw,104px);letter-spacing:.24em;padding-left:.24em;background:linear-gradient(100deg,#6c717b 20%,#fff 50%,#6c717b 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 1.8s linear infinite}
#pre i{display:block;width:140px;height:1px;background:var(--line-d);margin:26px auto 0;position:relative;overflow:hidden}
#pre i::after{content:"";position:absolute;inset:0;background:var(--accent-l);transform:translateX(-100%);animation:ld 1.4s var(--out) forwards}
@keyframes shine{to{background-position:-250% 0}}@keyframes ld{to{transform:none}}
#prog{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:90}

/* nav */
nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:80;transition:transform .6s var(--out),background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
nav.stuck{background:rgba(244,243,240,.8);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-color:var(--line)}
nav.hide{transform:translateY(-100%)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px;max-width:1360px;margin:0 auto}
.logo{display:flex;flex-direction:column;line-height:1}
.logo b{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:.22em}
.logo small{font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.lk{display:flex;gap:clamp(18px,3vw,40px);font-size:14px;font-weight:500}
.lk a{position:relative;padding:6px 0}.lk a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:100% 0;transition:transform .5s var(--out)}.lk a:hover::after{transform:scaleX(1);transform-origin:0 0}
.mb{display:none;width:44px;height:44px;position:relative}
.mb i{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform .4s var(--out),top .4s var(--out)}.mb i:nth-child(1){top:17px}.mb i:nth-child(2){top:26px}
.menu-open .mb i:nth-child(1){top:22px;transform:rotate(45deg)}.menu-open .mb i:nth-child(2){top:22px;transform:rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:70;background:var(--paper);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--gr) 0 var(--gl);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--out)}
.menu-open .sheet{clip-path:inset(0)}.sheet a{font-family:var(--serif);font-size:clamp(40px,11vw,64px);line-height:1.2}
@media (max-width:900px){.lk,.nav-cta{display:none}.mb{display:block}}

/* hero */
.hero{padding-top:108px;padding-bottom:clamp(44px,5vw,80px);position:relative}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(28px,5vw,90px);align-items:center;min-height:calc(100svh - 190px)}
.hero h1{font-size:clamp(54px,7.6vw,122px);margin:22px 0 26px;letter-spacing:-.025em}
.ln{display:block;overflow:hidden;padding:.04em 0 .12em;margin-bottom:-.12em}
.ln>span{display:block;transform:translateY(110%);transition:transform 1.3s var(--out)}
.ready .ln>span{transform:none}.ready .ln:nth-child(2)>span{transition-delay:.1s}.ready .ln:nth-child(3)>span{transition-delay:.2s}
.fade{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity 1.1s var(--out),transform 1.1s var(--out),filter 1.1s var(--out)}.ready .fade{opacity:1;transform:none;filter:none}
.lead{font-size:clamp(17px,1.35vw,20px);color:var(--muted);margin-bottom:34px;max-width:44ch}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.facts{display:flex;gap:clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,64px);padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.facts b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.4vw,50px);line-height:1}
.facts span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}

.viewer{position:relative;border-radius:32px;overflow:hidden;background:radial-gradient(62% 52% at 50% 40%,#454a56 0%,#1d2027 58%,#101216 100%);aspect-ratio:4/5;max-height:78vh;width:100%;margin-left:auto;box-shadow:0 40px 80px -40px rgba(14,15,18,.65);clip-path:inset(100% 0 0 0 round 32px);transition:clip-path 1.5s var(--out) .15s}
.ready .viewer{clip-path:inset(0 0 0 0 round 32px)}
.viewer::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 18% at 50% 92%,rgba(0,0,0,.45),transparent);pointer-events:none}
.viewer .ring{position:absolute;left:50%;top:41%;width:88%;aspect-ratio:1;margin:-44% 0 0 -44%;border-radius:50%;border:1px solid rgba(230,232,237,.1)}
.viewer .ring.r2{width:66%;margin:-33% 0 0 -33%;border-style:dashed;border-color:rgba(230,232,237,.14);animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vimg-old{position:absolute;left:50%;top:41%;width:78%;margin:0;transform:translate(-50%,-50%) scale(.82) rotate(-12deg);opacity:0;transition:transform 1.1s var(--out),opacity .7s;filter:drop-shadow(0 34px 24px rgba(0,0,0,.55));pointer-events:none}
.vimg.on{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
.vimg.off{transform:translate(-50%,-50%) scale(1.1) rotate(10deg);opacity:0}
.vwrap{position:absolute;inset:0;will-change:transform}
.vbadge{position:absolute;left:22px;top:22px;display:flex;gap:8px;z-index:3}
.vbadge span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);padding:8px 14px;border:1px solid var(--line-d);border-radius:99px;background:rgba(14,15,18,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vbar{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px 12px 22px;border-radius:22px;background:rgba(244,243,240,.1);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--line-d);color:var(--paper)}
.vbar .nm b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;transition:opacity .3s}
.vbar .nm span{font-size:13px;color:var(--muted-d)}
.thumbs{display:flex;gap:8px}
.thumbs button{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid transparent;display:grid;place-items:center;transition:background .3s,border-color .3s,transform .4s var(--snap);position:relative;overflow:hidden}
.thumbs button img{width:80%;height:80%;object-fit:contain}
.thumbs button:hover{transform:translateY(-3px)}
.thumbs button.on{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.thumbs button.on::after{content:"";position:absolute;left:0;bottom:0;height:2px;background:var(--accent-l);width:100%;transform-origin:0 50%;animation:tm 5s linear forwards}
.viewer #glc{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}.viewer #glc:active{cursor:grabbing}
.vwrap{position:absolute;left:0;right:0;top:0;bottom:84px}
.fb{position:absolute;left:50%;top:50%;width:78%;transform:translate(-50%,-50%);pointer-events:none}.gl-ok .fb{opacity:0}.nogl #glc{display:none}
.vbadge{position:absolute;left:18px;top:18px;display:flex;gap:8px;z-index:2}.vbadge span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:7px 11px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid var(--line-d);color:var(--silver)}
.finish{display:flex;padding:4px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid var(--line-d)}
.finish button{padding:10px 16px;border-radius:99px;font-size:13px;font-weight:600;color:var(--silver);transition:background .4s,color .4s}.finish button.on{background:var(--paper);color:var(--ink)}
.spin{overflow:hidden;padding-bottom:clamp(40px,5vw,72px)!important}.spin .head{margin-bottom:clamp(6px,1vw,16px)}
.c3d{position:relative;height:clamp(380px,40vw,500px);perspective:1700px;perspective-origin:50% 38%;margin-top:clamp(10px,2vw,30px);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.c3d:active{cursor:grabbing}
.rg3{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.cc{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);margin:calc(var(--ch)/-2) 0 0 calc(var(--cw)/-2);border-radius:26px;background:radial-gradient(70% 60% at 50% 42%,#555b69 0%,#232730 62%,#15171c 100%);border:1px solid var(--line-d);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);will-change:transform,opacity}
.cc img{position:absolute;left:8%;top:8%;width:84%;height:68%;object-fit:contain;filter:drop-shadow(0 22px 14px rgba(0,0,0,.55));pointer-events:none}
.cc .cap{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.cc .cap b{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.05}
.cc .cap span{white-space:nowrap;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);font-weight:600;text-align:right}
.cc::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 38%);pointer-events:none}
.floor{position:absolute;left:50%;bottom:3%;width:70%;height:70px;margin-left:-35%;background:radial-gradient(closest-side,rgba(159,173,255,.28),transparent);filter:blur(10px);pointer-events:none}
.c3ctl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
.c3ctl button{width:56px;height:56px;border-radius:50%;border:1px solid var(--line-d);display:grid;place-items:center;color:inherit;transition:background .3s,color .3s,transform .4s var(--snap)}
.c3ctl button:hover{background:var(--paper);color:var(--ink);transform:scale(1.08)}.c3ctl button svg{width:20px;height:20px}
.c3now{text-align:center;min-width:220px}.c3now b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1}.c3now span{font-size:13px;color:var(--muted-d);letter-spacing:.1em;text-transform:uppercase}
@media (max-width:700px){.cc .cap b{font-size:20px}.cc .cap span{display:none}.c3now{min-width:150px}.c3now b{font-size:24px}.vbadge span:last-child{display:none}}

@keyframes tm{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;min-height:0}.viewer{max-height:none;aspect-ratio:1/1.1}.vbar{padding-left:16px}.vbar .nm b{font-size:22px}.thumbs button{width:44px;height:44px}}

/* ticker */
.tick{background:var(--ink);color:var(--silver);overflow:hidden;white-space:nowrap;padding:18px 0}
.tick div{display:inline-flex;will-change:transform}
.tick span{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.6vw,36px);display:inline-flex;align-items:center;gap:clamp(26px,3vw,44px);padding-right:clamp(26px,3vw,44px)}
.tick span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-l)}

.rv{opacity:0;transform:translateY(40px);filter:blur(5px);transition:opacity 1.1s var(--out),transform 1.1s var(--out),filter 1.1s var(--out);transition-delay:var(--d,0s)}.rv.in{opacity:1;transform:none;filter:none}

/* collection */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.5vw,20px)}
.tile{position:relative;border-radius:28px;overflow:hidden;display:block;isolation:isolate;transition:transform .6s var(--out),box-shadow .6s var(--out)}
.tile:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(14,15,18,.5)}
.tile .ti{position:absolute;inset:0;transition:transform .3s ease-out}
.tile .bg{position:absolute;inset:0;z-index:-1;transition:transform 1.2s var(--out)}.tile:hover .bg{transform:scale(1.06)}
.tile .lab{position:absolute;left:28px;top:26px;z-index:3;max-width:70%}
.tile h3{font-size:clamp(34px,3.4vw,54px)}
.tile .tag{display:block;margin-top:8px;opacity:.65}
.tile .go{position:absolute;right:20px;bottom:20px;z-index:3;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .5s var(--snap),background .3s,color .3s}
.tile:hover .go{transform:scale(1.12) rotate(-45deg);background:var(--white);color:var(--ink)}
.tile .go svg{width:20px;height:20px}
.tile .cut{position:absolute;filter:drop-shadow(0 24px 18px rgba(0,0,0,.35));transform:rotate(var(--r,0deg));transition:transform 1s var(--out)}
.tile:hover .cut{transform:rotate(calc(var(--r,0deg) + var(--dr,6deg))) scale(1.06)}
.tile .cut img{width:100%}
.t1{grid-column:span 7;height:clamp(420px,42vw,560px);color:var(--ink)}.t1 .bg{background:radial-gradient(70% 70% at 50% 55%,#fbfaf8,#d9dbe0)}.t1 .go{background:rgba(14,15,18,.06);border-color:rgba(14,15,18,.3);color:var(--ink)}
.t2{grid-column:span 5;height:clamp(420px,42vw,560px);color:var(--silver)}.t2 .bg{background:radial-gradient(60% 55% at 50% 55%,#3a3f4b,#111318)}
.t3{grid-column:span 4;height:clamp(340px,32vw,430px);color:var(--ink)}.t3 .bg{background:radial-gradient(70% 70% at 50% 60%,#f2f3ff,#cfd5f5)}.t3 .go{background:rgba(14,15,18,.06);border-color:rgba(14,15,18,.3);color:var(--ink)}
.t4{grid-column:span 4;height:clamp(340px,32vw,430px);color:var(--ink)}.t4 .bg{background:radial-gradient(70% 70% at 50% 60%,#f7f1e7,#ddd2bf)}.t4 .go{background:rgba(14,15,18,.06);border-color:rgba(14,15,18,.3);color:var(--ink)}
.t5{grid-column:span 4;height:clamp(340px,32vw,430px);color:var(--silver)}.t5 .bg{background:radial-gradient(70% 70% at 50% 60%,#2b3478,#10142e)}
.ask{margin-top:clamp(14px,1.8vw,24px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:clamp(24px,3vw,40px) clamp(24px,3.4vw,48px);border:1px solid var(--line);border-radius:28px;background:var(--white)}
.ask h3{font-size:clamp(30px,3.6vw,54px)}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.t1,.t2{grid-column:span 2;height:clamp(360px,80vw,480px)}.t3,.t4{grid-column:span 1;height:clamp(300px,64vw,400px)}.t5{grid-column:span 2;height:clamp(320px,70vw,420px)}}
@media (max-width:540px){.bento{grid-template-columns:1fr}.t1,.t2,.t3,.t4,.t5{grid-column:span 1}.t3,.t4{height:360px}}

/* signature kadas */
.kd-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,6vw,110px);align-items:center}
.specs{margin:34px 0 0;border-top:1px solid var(--line-d)}
.specs div{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-d)}
.specs dt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);font-weight:600}
.specs dd{margin:0;font-family:var(--serif);font-size:26px;line-height:1.1;text-align:right;transition:opacity .3s}
.kd-p{margin-top:26px;min-height:92px;color:var(--muted-d);transition:opacity .35s,transform .6s var(--out)}.kd-p.swap{opacity:0;transform:translateY(8px)}
.sel{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.sel button{display:flex;align-items:center;gap:12px;padding:8px 20px 8px 8px;border:1px solid var(--line-d);border-radius:99px;font-size:14px;font-weight:600;transition:background .3s,border-color .3s,transform .4s var(--snap)}
.sel button .im{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center}.sel button .im img{width:78%}
.sel button:hover{transform:translateY(-3px)}.sel button.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}.sel button.on .im{background:var(--paper-2)}
.kd-stage{position:relative;aspect-ratio:1;width:100%;max-width:640px;margin-left:auto;display:grid;place-items:center}
.kd-stage .glow{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(159,173,255,.35),transparent 72%)}
.kd-stage .c1{position:absolute;inset:3%;border-radius:50%;border:1px solid var(--line-d)}
.kd-stage .c2{position:absolute;inset:12%;border-radius:50%;border:1px dashed var(--line-d);animation:spin 90s linear infinite reverse}
.kd-img{position:relative;width:70%;margin-top:-12%;z-index:2;filter:drop-shadow(0 34px 24px rgba(0,0,0,.6));transition:transform .9s var(--out),opacity .45s}
.kd-img.out{transform:rotate(40deg) scale(.7);opacity:0}.kd-img.in0{transform:rotate(-40deg) scale(.7);opacity:0;transition:none}
.kd-w{position:absolute;left:0;bottom:-3%;z-index:3;font-family:var(--serif);font-size:clamp(70px,9vw,140px);line-height:.85;color:var(--paper);letter-spacing:-.03em}
.kd-w small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-d);font-weight:600;margin-top:10px}
@media (max-width:900px){.kd-grid{grid-template-columns:1fr}.kd-stage{margin:0 auto;order:-1}}

/* size */
.size{background:var(--paper-2)}
.sz-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,100px);align-items:center}
.seg{display:inline-flex;padding:6px;border-radius:99px;background:var(--white);border:1px solid var(--line);margin:34px 0 36px;position:relative}
.seg button{position:relative;z-index:1;padding:14px clamp(22px,3.4vw,44px);border-radius:99px;font-weight:600;font-size:16px;transition:color .4s}
.seg button.on{color:var(--paper)}
.seg .pillbg{position:absolute;top:6px;bottom:6px;left:6px;border-radius:99px;background:var(--ink);transition:transform .6s var(--out),width .6s var(--out)}
.sz-read{display:flex;align-items:flex-end;gap:14px;font-family:var(--serif);font-size:clamp(110px,15vw,230px);line-height:.8;letter-spacing:-.03em}
.sz-read small{font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.9em}
.sz-bar{height:3px;background:var(--line);border-radius:3px;margin:30px 0 18px;overflow:hidden}.sz-bar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transition:transform 1.1s var(--out)}
.note{font-size:14px;color:var(--muted);max-width:46ch}
.sz-stage{position:relative;aspect-ratio:1;width:100%;max-width:560px;margin:0 auto;display:grid;place-items:center}
.sz-stage .disc{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff,#dcdde2 72%);box-shadow:0 40px 80px -40px rgba(14,15,18,.5)}
.sz-stage .rg{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(14,15,18,.25);animation:spin 80s linear infinite}
.sz-img{position:relative;z-index:2;width:82%;filter:drop-shadow(0 22px 14px rgba(14,15,18,.35));transition:transform 1s var(--out)}
@media (max-width:900px){.sz-grid{grid-template-columns:1fr}.sz-stage{order:-1}}

/* standard */
.std{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(30px,4vw,56px)}
.pil{padding-top:28px;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:16px}
.pil svg{width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pil h3{font-size:clamp(30px,2.8vw,42px)}.pil p{color:var(--muted)}
@media (max-width:900px){.std{grid-template-columns:1fr}}

/* insta */
.insta{position:relative;overflow:hidden}
.insta .in-w{position:relative;text-align:center}
.insta h2{font-size:clamp(44px,7.4vw,120px)}
.insta .cut{position:absolute;filter:drop-shadow(0 20px 16px rgba(0,0,0,.5));opacity:.95}
.insta .cut img{width:100%}
.insta .btn{margin-top:36px}

/* contact */
.ct{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,6vw,100px);align-items:start}
.info{margin:36px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.info div{padding:18px 0;border-bottom:1px solid var(--line)}.info dt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--accent);margin-bottom:4px}
.info dd{margin:0;font-family:var(--serif);font-size:28px;line-height:1.2}.info dd.ph{color:var(--muted);font-style:italic}
form{display:grid;gap:24px;background:var(--white);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,3.4vw,44px);box-shadow:0 40px 80px -50px rgba(14,15,18,.4)}
.fld{display:grid;gap:8px}.fld label,.fld .lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.fld input,.fld textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:15px 18px;font:inherit;font-size:17px;color:var(--ink);transition:border-color .3s,box-shadow .3s,background .3s}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(49,64,216,.14);background:#fff}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opts button{border:1px solid var(--line);border-radius:99px;padding:10px 18px;font-size:14px;font-weight:600;background:var(--paper);transition:transform .4s var(--snap),background .3s,color .3s,border-color .3s}
.opts button:hover{transform:translateY(-2px);border-color:var(--ink)}.opts button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.out{display:none;border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--paper);gap:14px;flex-direction:column}.out.show{display:flex}
.out pre{margin:0;white-space:pre-wrap;font:inherit;font-size:16px}.acts{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:900px){.ct{grid-template-columns:1fr}}

footer{background:var(--ink);color:var(--muted-d);padding-block:34px;font-size:13px}
footer .in-w{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer b{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:.22em;color:var(--paper)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}.rv,.fade{opacity:1;transform:none;filter:none}.ln>span{transform:none}.viewer{clip-path:none}.vimg.on{opacity:1}}

/* multipage */
.leaving main,.leaving footer,.leaving header.hero{opacity:0;transform:translateY(-10px);transition:opacity .28s ease,transform .28s ease}
main,footer,header.hero{transition:opacity .4s ease}
.lk a[aria-current="page"]{color:var(--accent)}
.sheet a[aria-current="page"]{color:var(--accent-l)}
.phead{padding-top:clamp(118px,13vw,184px);padding-bottom:clamp(36px,5vw,72px)}
.phead h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.2vw,112px);line-height:.98;letter-spacing:-.02em;margin-top:22px;text-wrap:balance}
.phead h1 em{color:var(--accent)}
.phead p{max-width:52ch;color:var(--muted);margin-top:26px;font-size:clamp(16px,1.3vw,19px)}
.go3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(340px,34vw,460px);padding:28px;border-radius:28px;overflow:hidden;background:var(--ink);color:var(--silver);isolation:isolate}
.gc::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(70% 55% at 50% 38%,#454b59,#15171c 70%)}
.gc.lt{background:var(--paper-2);color:var(--ink)}.gc.lt::before{background:radial-gradient(70% 55% at 50% 38%,#fff,#dcdde2 75%)}
.gc.ac{color:#fff}.gc.ac::before{background:radial-gradient(70% 55% at 50% 38%,#5262ee,#2230b8 75%)}
.gc img{position:absolute;z-index:-1;top:7%;left:50%;width:58%;transform:translateX(-50%);filter:drop-shadow(0 26px 18px rgba(0,0,0,.5));transition:transform .9s var(--out)}
.gc:hover img{transform:translateX(-50%) scale(1.07) rotate(-4deg)}
.gc h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,38px);line-height:1.05}
.gc p{margin-top:8px;font-size:15px;opacity:.75;max-width:30ch}
.gc .go{position:absolute;right:22px;top:22px;width:46px;height:46px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;opacity:.6;transition:opacity .3s,transform .5s var(--snap),background .3s,color .3s}
.gc:hover .go{opacity:1;transform:rotate(-45deg);background:var(--paper);color:var(--ink);border-color:var(--paper)}
.gc .go svg{width:18px;height:18px}
@media (max-width:900px){.go3{grid-template-columns:1fr}.gc{min-height:340px}}
.cta-band{text-align:center;border-top:1px solid var(--line-d)}
.cta-band h2{font-size:clamp(38px,5.6vw,84px);line-height:1;margin-bottom:34px;text-wrap:balance}
.cta-band .pr{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
footer .in-w{flex-wrap:wrap;gap:14px 28px}
footer .fl{display:flex;gap:18px;flex-wrap:wrap}footer .fl a{opacity:.7}footer .fl a:hover{opacity:1}.phead+section{padding-top:clamp(24px,3vw,48px)}

/* ===== 3D jewellery build ===== */
.viewer .finish{position:absolute;right:16px;top:14px;z-index:3}
.viewer .vwrap canvas,.sc-cv canvas,.st-cv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nogl-msg{position:absolute;inset:0;display:none;place-items:center;color:var(--muted-d);font-size:14px;text-align:center;padding:24px}
.nogl .nogl-msg{display:grid}
.thumbs button img{opacity:.0;transition:opacity .6s}.thumbs button img.ld{opacity:1}
/* scroll showcase */
.show{position:relative;height:540vh;background:var(--ink);color:var(--silver)}
.stick{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.stick::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 70% 50%,#2a2f3b 0%,transparent 70%)}
.sc-grid{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,70px);align-items:center;width:100%;max-width:1360px;margin:0 auto;height:100%}
.sc-txt{padding-block:90px}
.sc-txt .ch{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-l);font-weight:600;display:flex;gap:12px;align-items:center}
.sc-txt .ch i{width:40px;height:1px;background:var(--accent-l);display:block}
.sc-txt h2{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.4vw,96px);line-height:.98;letter-spacing:-.02em;margin-top:22px}
.sc-txt h2 em{color:var(--accent-l)}
.sc-txt p{margin-top:22px;max-width:40ch;color:var(--muted-d);font-size:clamp(16px,1.25vw,19px)}
.sc-txt ul{list-style:none;margin-top:28px;display:grid;gap:10px;max-width:40ch}
.sc-txt li{display:flex;gap:12px;align-items:center;font-size:15px;color:var(--silver);padding-bottom:10px;border-bottom:1px solid var(--line-d)}
.sc-txt li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-l);flex:none}
.sc-txt .sw{transition:opacity .45s var(--out),transform .45s var(--out),filter .45s}
.sc-txt.swap .sw{opacity:0;transform:translateY(16px);filter:blur(6px)}
.sc-cv{position:relative;height:min(86svh,820px);width:100%}
.dots{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:grid;gap:12px;z-index:3}
.dots i{display:block;width:9px;height:9px;border-radius:50%;border:1px solid var(--silver);opacity:.5;transition:all .4s var(--out)}
.dots i.on{background:var(--accent-l);border-color:var(--accent-l);opacity:1;transform:scale(1.35)}
@media (max-width:900px){.sc-grid{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:0;align-content:stretch}.sc-cv{height:auto;min-height:0;order:-1}.sc-txt{padding-block:0 28px}.sc-txt h2{font-size:clamp(40px,12vw,60px)}.sc-txt ul{display:none}.dots{display:none}.show{height:480vh}}
/* collection cards */
.pc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(420px,42vw,600px);border-radius:30px;overflow:hidden;padding:30px;background:radial-gradient(70% 55% at 50% 38%,#454b59,#12141a 72%);color:var(--silver);isolation:isolate}
.pc img.sn{position:absolute;z-index:-1;left:50%;top:50%;width:84%;transform:translate(-50%,-56%);transition:transform 1s var(--out),opacity .6s;opacity:0}
.pc img.sn.ld{opacity:1}.pc:hover img.sn{transform:translate(-50%,-56%) scale(1.07) rotate(-2deg)}
.pc h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3vw,44px);line-height:1.05}
.pc .sub{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);font-weight:600;margin-top:8px}
.pc .go{position:absolute;right:22px;top:22px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-d);display:grid;place-items:center;transition:transform .5s var(--snap),background .3s,color .3s}
.pc:hover .go{transform:rotate(-45deg);background:var(--paper);color:var(--ink)}.pc .go svg{width:18px;height:18px}
.pc .tg{position:absolute;left:24px;top:24px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:7px 12px;border-radius:99px;border:1px solid var(--line-d);background:rgba(14,15,18,.4)}
@media (max-width:760px){.pc-grid{grid-template-columns:1fr}.pc{min-height:420px}}
.cc img{opacity:0;transition:opacity .6s}.cc img.ld{opacity:1}
/* studio */
.st{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(18px,3vw,44px);align-items:stretch}
.st-cv{position:relative;border-radius:34px;overflow:hidden;min-height:clamp(440px,64vh,720px);background:radial-gradient(62% 52% at 50% 42%,#454a56 0%,#1a1d24 55%,#0d0e11 100%);border:1px solid var(--line)}
.st-cv .hint{position:absolute;left:20px;bottom:18px;z-index:3;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);font-weight:600}
.st-cv .finish{position:absolute;right:16px;top:16px;z-index:3}
.st-side{display:flex;flex-direction:column;gap:22px}
.st-side h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.6vw,54px);line-height:1}
.st-side p{color:var(--muted)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tabs button{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 14px 10px 10px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.5);font-weight:600;font-size:14px;transition:background .3s,color .3s,border-color .3s,transform .4s var(--snap)}
.tabs button:hover{transform:translateY(-2px)}
.tabs button .im{width:48px;height:48px;border-radius:14px;background:radial-gradient(circle,#4b5160,#171a20);display:grid;place-items:center;flex:none}.tabs button .im img{width:84%;height:84%;object-fit:contain;opacity:0;transition:opacity .6s}.tabs button .im img.ld{opacity:1}
.tabs button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.facts-l{list-style:none;display:grid;gap:0}
.facts-l li{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
.facts-l li:last-child{border-bottom:1px solid var(--line)}
.facts-l b{font-family:var(--serif);font-weight:400;font-size:20px;text-align:right}
@media (max-width:900px){.st{grid-template-columns:1fr}}
.note3d{font-size:13px;color:var(--muted);max-width:60ch}
.dark .note3d{color:var(--muted-d)}

/* SysCrafta credit */
footer .credit{flex-basis:100%;padding-top:14px;border-top:1px solid var(--line-d);font-size:12px;letter-spacing:.06em;color:var(--muted-d);transition:color .3s}
footer .credit b{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--silver);border-bottom:1px solid var(--accent-l)}
footer .credit:hover,footer .credit:hover b{color:#fff}

/* ===== Mobile polish (phones) ===== */
@media (max-width:900px){
  .show .wrap,.show .in-w{height:100%}
  .sc-grid{grid-template-rows:minmax(0,1fr) auto}
  .sc-cv{height:auto;min-height:44svh}
}
@media (max-width:600px){
  body{font-size:16px;line-height:1.6}
  h2{font-size:clamp(34px,10vw,44px)}
  .pad{padding-block:64px}
  .head{gap:16px;margin-bottom:28px}
  .eyebrow{font-size:11px;letter-spacing:.14em;gap:10px}.eyebrow::before{width:20px}
  .nav-in{height:64px}.logo b{font-size:24px}.logo small{font-size:8px;letter-spacing:.34em}
  .btn{padding:13px 22px;font-size:14px}
  /* hero */
  .hero{padding-top:84px;padding-bottom:40px}
  .hero-grid{gap:30px}
  .hero h1{font-size:clamp(40px,12vw,52px);margin:16px 0 18px}
  .lead{font-size:16px;margin-bottom:24px}
  .cta{gap:10px}.cta .btn{flex:1 1 0;justify-content:center;padding:13px 14px;white-space:nowrap}
  .cta .btn svg{display:none}
  .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px;padding-top:20px}
  .facts b{font-size:30px}.facts span{font-size:10px;letter-spacing:.06em;line-height:1.3;display:block;margin-top:4px}
  .viewer{aspect-ratio:1/1.12;border-radius:24px}
  .vbadge{left:12px;top:12px}.viewer .finish{right:10px;top:10px}
  .finish button{padding:8px 12px;font-size:12px}
  .vbar{left:10px;right:10px;bottom:10px;padding:10px;gap:10px;flex-direction:column;align-items:stretch;border-radius:18px}
  .vbar .nm{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .vbar .nm b{font-size:20px}.vbar .nm span{font-size:12px;text-align:right}
  .thumbs{justify-content:space-between}.thumbs button{flex:1;height:44px;width:auto;border-radius:12px}
  .vwrap{bottom:120px}
  .tick{padding:12px 0}.tick span{font-size:22px}
  /* scroll showcase */
  .show{height:400vh}
  .sc-txt{padding-bottom:24px}
  .sc-txt h2{font-size:clamp(34px,10vw,44px);margin-top:14px}
  .sc-txt p{font-size:15px;margin-top:12px}
  /* cards */
  .pc-grid{gap:14px}.pc{min-height:330px;padding:22px;border-radius:24px}
  .pc h3{font-size:28px}.pc .tg{left:18px;top:18px}.pc .go{right:16px;top:16px;width:40px;height:40px}
  .gc{min-height:300px;padding:22px;border-radius:24px}
  .cta-band h2{font-size:clamp(32px,9.5vw,42px);margin-bottom:24px}
  .cta-band .pr .btn{flex:1 1 100%;justify-content:center}
  /* inner pages */
  .phead{padding-top:96px;padding-bottom:28px}
  .phead h1{font-size:clamp(38px,11vw,50px);margin-top:14px}
  .phead p{font-size:16px;margin-top:16px}
  .st-cv{min-height:360px;border-radius:24px}
  .st-side h2{font-size:34px}
  .tabs button{padding:8px;gap:8px;font-size:13px;border-radius:16px}.tabs button .im{width:40px;height:40px}
  .st-side .btn{justify-content:center}
  .c3d{height:340px}
  form{padding:20px;border-radius:22px;gap:18px}
  .fld input,.fld textarea{font-size:16px;padding:13px 14px}
  .info dd{font-size:22px}
  .ask{border-radius:22px}
  .std{gap:28px}.pil h3{font-size:28px}
  /* footer */
  footer{padding-block:28px}
  footer .in-w{flex-direction:column;align-items:flex-start;gap:14px}
  footer .fl{gap:10px 18px}
  footer .credit{padding-top:12px;width:100%}
  .sheet a{font-size:40px}
}
@media (max-width:360px){.cta .btn{flex-basis:100%}.facts b{font-size:26px}}

/* ===== Gems of Jaipur ===== */
.gems-sec{background:var(--paper-2)}
.pc.gm .tg{display:inline-flex;align-items:center;gap:8px}
.pc.gm .tg i{width:8px;height:8px;border-radius:50%;background:var(--gc,#fff);box-shadow:0 0 10px var(--gc,#fff)}
.g-panna{--gc:#2bd681;background:radial-gradient(70% 55% at 50% 38%,#2f5446,#0f1714 72%)}
.g-manik{--gc:#ff4d6d;background:radial-gradient(70% 55% at 50% 38%,#5a2f3a,#170e11 72%)}
.g-navratna{--gc:#ffd36b;background:radial-gradient(70% 55% at 50% 38%,#4f4a3a,#15140f 72%)}
.g-neelam{--gc:#6f8dff;background:radial-gradient(70% 55% at 50% 38%,#33406a,#0e1120 72%)}
.guide{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.gd{padding-top:24px;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:6px}
.gd i{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,var(--c) 45%,#000 130%);margin-bottom:10px;box-shadow:0 8px 18px -8px var(--c)}
.gd i.nine{background:conic-gradient(#b10f35,#f3eee5,#e0563c,#0d8a4c,#f0bd2a,#f3f7ff,#1a3cb0,#c2602a,#b9a54c,#b10f35)}
.gd h3{font-size:clamp(28px,2.4vw,36px)}
.gd span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.gd p{color:var(--muted);font-size:15px;margin-top:8px}
@media (max-width:900px){.guide{grid-template-columns:1fr 1fr;row-gap:30px}}
@media (max-width:520px){.guide{grid-template-columns:1fr}.gd{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px}.gd i{margin:0;width:28px;height:28px}.gd span{margin-left:auto}.gd p{flex-basis:100%;margin-top:4px}}
.pc.tall img.sn{width:64%;transform:translate(-50%,-66%)}
.pc.tall:hover img.sn{transform:translate(-50%,-66%) scale(1.05)}

/* ===== Categories ===== */
.g-moti{--gc:#f3eee5;background:radial-gradient(70% 55% at 50% 38%,#4a4c55,#14151a 72%)}
.shop{padding-top:8px;padding-bottom:clamp(40px,6vw,90px)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 0;position:sticky;top:0;z-index:20;background:var(--paper);margin-bottom:clamp(20px,3vw,36px)}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;padding:10px 16px;border-radius:99px;border:1px solid var(--line);background:var(--white);font-size:14px;font-weight:600;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.chips button span{opacity:.5;margin-left:3px;font-weight:500}
.chips button:hover{border-color:var(--ink)}
.chips button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips.sm{position:static;padding:0;margin:0;flex-wrap:wrap;background:none}.chips.sm button{padding:8px 13px;font-size:13px}
.cat{margin-bottom:clamp(48px,6vw,90px)}
.cat-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:14px}
.cat-h h2{font-size:clamp(34px,4vw,56px)}.cat-h p{color:var(--muted);font-size:15px}
.pc-grid.four{grid-template-columns:repeat(4,1fr);gap:14px}
.pc-grid.four .pc{min-height:clamp(300px,27vw,400px);padding:22px;border-radius:24px}
.pc-grid.four .pc h3{font-size:clamp(24px,2vw,32px)}
.pc-grid.four .pc .go{width:38px;height:38px;right:16px;top:16px}
.pc-grid.four .pc .tg{left:16px;top:16px}
@media (max-width:1050px){.pc-grid.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
  .pc-grid.four{grid-template-columns:1fr 1fr;gap:10px}
  .pc-grid.four .pc{min-height:236px;padding:12px;border-radius:18px}
  .pc-grid.four .pc h3{font-size:19px}
  .pc-grid.four .pc .sub{font-size:9.5px;letter-spacing:.06em;margin-top:5px;line-height:1.35}
  .pc-grid.four .pc .go{display:none}
  .pc-grid.four .pc .tg{left:10px;top:10px;font-size:9px;padding:5px 8px;letter-spacing:.08em}
  .pc-grid.four img.sn{width:96%}
  .pc-grid.four .pc.tall img.sn{width:66%}
  .chips{margin-left:calc(-1*var(--gl));margin-right:calc(-1*var(--gr));padding-left:var(--gl);padding-right:var(--gr)}
  .cat-h h2{font-size:32px}.cat-h p{font-size:14px}
}
.ct-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1200px){.ct-grid{grid-template-columns:repeat(4,1fr)}}
.ct-t{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(240px,22vw,320px);padding:20px;border-radius:24px;overflow:hidden;background:radial-gradient(70% 60% at 50% 38%,#454b59,#12141a 72%);color:var(--silver);isolation:isolate;transition:transform .6s var(--out),box-shadow .6s var(--out)}
.ct-t:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(14,15,18,.6)}
.ct-t img{position:absolute;z-index:-1;left:50%;top:39%;width:74%;transform:translate(-50%,-50%);transition:transform .9s var(--out)}
.ct-t:hover img{transform:translate(-50%,-50%) scale(1.06)}
.ct-t h3{font-size:clamp(24px,2.2vw,32px)}
.ct-t div span{display:block;margin-top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);font-weight:600}
.ct-t .go{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-d);display:grid;place-items:center;transition:transform .5s var(--snap),background .3s,color .3s}
.ct-t:hover .go{transform:rotate(-45deg);background:var(--paper);color:var(--ink)}.ct-t .go svg{width:16px;height:16px}
.ct-t.all{background:var(--accent);color:#fff}.ct-t.all h3 em{color:#fff}.ct-t.all div span{color:rgba(255,255,255,.75)}
@media (max-width:900px){.ct-grid{grid-template-columns:repeat(2,1fr);gap:10px}.ct-t{min-height:200px;padding:14px;border-radius:18px}.ct-t h3{font-size:21px}.ct-t div span{font-size:9.5px;letter-spacing:.08em}.ct-t .go{width:32px;height:32px;right:10px;top:10px}}
.pc img.sn,.ct-t img{height:auto;aspect-ratio:1}

/* ===== Page structure pass ===== */
.sig-h{padding-top:clamp(64px,9vw,130px);padding-bottom:clamp(24px,3vw,40px)}
.sig-h h2{font-size:clamp(36px,5vw,72px)}
.ct{grid-template-columns:1.15fr .85fr}
.how{display:flex;flex-direction:column;gap:22px;padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:28px;background:var(--paper-2)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:s}
.steps li{display:grid;grid-template-columns:40px 1fr;column-gap:14px;counter-increment:s}
.steps li::before{content:counter(s);grid-row:span 2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-family:var(--serif);font-size:20px}
.steps b{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2}
.steps span{color:var(--muted);font-size:15px}.steps a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.how .info{margin:0}.how .info dd{font-size:22px}
.care{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.cr{padding-top:24px;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:8px}
.cr b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--accent)}
.cr h3{font-size:clamp(26px,2.2vw,34px)}.cr p{color:var(--muted);font-size:15px}
@media (max-width:900px){.care{grid-template-columns:1fr 1fr;row-gap:30px}}
@media (max-width:520px){.care{grid-template-columns:1fr;row-gap:22px}}

/* studio on phones: categories, viewer, pieces, then details */
@media (max-width:900px){
  .st{display:flex;flex-direction:column;gap:14px}
  .st-side{display:contents}
  #scats{order:1}.st-cv{order:2}#tabs{order:3}.st-side>div:first-child{order:4;margin-top:6px}#stF{order:5}#stE{order:6}.st-side .note3d{order:7}
  .chips.sm{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1*var(--gl));margin-right:calc(-1*var(--gr));padding:0 var(--gr) 0 var(--gl)}
  .chips.sm::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
  .tabs{display:flex;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1*var(--gl));margin-right:calc(-1*var(--gr));padding:0 var(--gr) 2px var(--gl)}
  .tabs button{flex:none}
}
@media (max-width:600px){
  .show{height:300vh}
  .sig-h{padding-top:56px;padding-bottom:20px}.sig-h h2{font-size:34px}
  .how{border-radius:22px}.steps b{font-size:21px}
  .st-cv{min-height:340px}
  .phead p{margin-top:12px}
}
@media (max-width:900px){.ct{grid-template-columns:1fr}}

/* ===== Showcase box: turns only while scrolling inside ===== */
.show{height:auto;touch-action:pan-y}
.show .stick{position:relative;height:min(100svh,880px);min-height:560px;cursor:grab}
.show .stick:active{cursor:grabbing}
.dots{gap:10px}.dots button{display:block;width:12px;height:12px;border-radius:50%;border:1px solid var(--silver);opacity:.5;padding:0;transition:all .4s var(--out)}
.dots button.on{background:var(--accent-l);border-color:var(--accent-l);opacity:1;transform:scale(1.3)}
.sc-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.sc-hint span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted-d);padding:7px 12px;border:1px solid var(--line-d);border-radius:99px;background:rgba(14,15,18,.5);white-space:nowrap}
.sc-hint i{display:block;width:120px;height:2px;background:var(--line-d);border-radius:2px;overflow:hidden}
.sc-hint b{display:block;height:100%;background:var(--accent-l);transform-origin:0 50%;transform:scaleX(0)}
/* hero thumbnails: one per category, scrolls sideways */
.vbar .nm{min-width:0}
.thumbs{overflow-x:auto;scrollbar-width:none;max-width:62%;padding:2px}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{flex:none}
.vbar .nm span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.show{height:auto}.show .stick{height:auto;min-height:0;padding-block:28px 70px}.sc-cv{min-height:46svh}.dots{display:flex;position:absolute;top:auto;bottom:22px;right:auto;left:var(--gl);transform:none;flex-direction:row}.sc-hint{bottom:auto;top:14px}.show .stick{padding-bottom:56px}}
@media (max-width:600px){.thumbs{max-width:none}.thumbs button{flex:none;width:44px}.sc-hint span{font-size:10px}}
@media (min-width:901px){.show .stick{height:min(calc(100svh - 78px),880px);min-height:520px}}
.sheet a[aria-current="page"]{color:var(--accent)}

/* "All categories" banner on home */
.ct-all{grid-column:1/-1;background:var(--accent);color:#fff;border-radius:24px;padding:clamp(18px,2.4vw,30px);display:flex;flex-direction:column;gap:18px}
.ct-all-h{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.ct-all-h h3{font-size:clamp(26px,2.6vw,38px)}
.ct-all-h span{display:block;margin-top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.75)}
.ct-all .btn.light{color:var(--ink)}
.ct-mini{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}
.ct-mini a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 12px;border-radius:16px;background:rgba(14,15,18,.28);text-align:center;transition:background .3s,transform .4s var(--snap)}
.ct-mini a:hover{background:rgba(14,15,18,.5);transform:translateY(-3px)}
.ct-mini img{width:100%;max-width:90px;aspect-ratio:1;height:auto;object-fit:contain}
.ct-mini b{font-weight:600;font-size:12px;line-height:1.25}
.ct-mini i{font-style:normal;font-size:10px;opacity:.7}
@media (max-width:1100px){.ct-mini{grid-template-columns:repeat(5,1fr)}}
@media (max-width:600px){.ct-all{border-radius:18px;padding:16px;gap:14px}.ct-all-h .btn{width:100%;justify-content:center}.ct-mini{grid-template-columns:repeat(5,1fr);gap:6px}.ct-mini a{padding:6px 2px 8px;border-radius:12px;gap:4px}.ct-mini b{font-size:9.5px;line-height:1.2}.ct-mini i{font-size:9px}}

/* ===== Hero: free-floating pieces (no box) ===== */
.viewer.free{background:none;box-shadow:none;border-radius:0;overflow:visible;clip-path:none;aspect-ratio:auto;height:min(78vh,720px);max-height:none;display:flex;flex-direction:column;opacity:0;transform:translateY(30px);transition:opacity 1.2s var(--out) .2s,transform 1.2s var(--out) .2s}
.ready .viewer.free{opacity:1;transform:none}
.viewer.free::after{display:none}
.viewer.free .halo{position:absolute;left:50%;top:44%;width:92%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(34,38,50,.11),rgba(34,38,50,.05) 55%,rgba(49,64,216,.04) 70%,transparent 72%);pointer-events:none}
.viewer.free .halo::before,.viewer.free .halo::after{content:"";position:absolute;inset:6%;border-radius:50%;border:1px solid rgba(14,15,18,.07)}
.viewer.free .halo::after{inset:-4%;border-style:dashed;border-color:rgba(14,15,18,.08);animation:spin 120s linear infinite}
.viewer.free .vwrap{position:relative;inset:auto;flex:1;min-height:0}
.viewer.free .finish{top:0;right:0;background:var(--white);border-color:var(--line)}
.viewer.free .finish button{color:var(--muted)}.viewer.free .finish button.on{background:var(--ink);color:var(--paper)}
.vcap{position:relative;z-index:2;text-align:center;padding-top:6px;transition:opacity .35s,transform .45s var(--out)}
.vcap.swap{opacity:0;transform:translateY(8px)}
.vk{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.vcap>b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1.1;margin-top:6px}
.vcap>span{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.vfoot{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px}
.vdots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.vdots button{width:8px;height:8px;border-radius:50%;padding:0;background:rgba(14,15,18,.18);transition:all .35s var(--out)}
.vdots button:hover{background:rgba(14,15,18,.4)}
.vdots button.on{width:26px;border-radius:8px;background:var(--accent)}
.vprog{display:block;width:120px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.vprog b{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
@keyframes vprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:900px){.viewer.free{height:auto;aspect-ratio:auto}.viewer.free .vwrap{height:62vw;min-height:300px;max-height:460px;flex:none}.viewer.free .halo{top:36%;width:100%}}
@media (max-width:600px){.viewer.free .finish{top:-4px}.viewer.free .finish button{padding:7px 11px}.vcap>b{font-size:28px}}
/* keep the caption clear of the jewellery */
.viewer.free .vwrap{margin-bottom:8px}
.vcap{padding-top:18px}
.vcap>b{margin-top:0}
/* hero: keep the floating piece up in view on desktop */
@media (min-width:901px){
  .hero-grid{align-items:start}
  .viewer.free{align-self:start;height:clamp(460px,calc(100svh - 200px),700px);margin-top:clamp(0px,2vh,24px)}
  .viewer.free .halo{top:42%}
}