/* =====================================================================
   THAKUR PAN v3 — one design system, four themes.
   Every component reads semantic tokens (--bg, --fg, --acc …).
   Themes live at the top (tokens) and bottom (character overrides).
   ===================================================================== */

/* ---------- THEME TOKENS ---------- */
/* 1 · NIGHT MARKET — green, gold, cream (refined original) */
:root,html[data-theme="night"]{
  color-scheme:dark;
  --bg:#07130c;--bg2:#0d2216;--fg:#f3ecd9;--mut:rgba(243,236,217,.74);
  --acc:#e6b450;--acc2:#7fcf86;--acc-ink:#0a1a11;--card:#0d2216;--line:rgba(230,180,80,.26);--em:#e6b450;--hl:transparent;
  --glass:rgba(7,19,12,.9);--foot-bg:#040c07;--foot-fg:#f3ecd9;
  --alt-bg:#f3ecd9;--alt-fg:#0a1a11;--alt-mut:rgba(10,26,17,.74);--alt-acc:#2f8f4e;--alt-acc-ink:#f3ecd9;--alt-card:rgba(255,255,255,.55);--alt-line:rgba(10,26,17,.18);--alt-em:#2f8f4e;--alt-hl:transparent;
  --font-d:"Archivo",Impact,"Arial Narrow",sans-serif;--font-s:"Instrument Serif",Georgia,serif;--font-b:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--font-logo:"Chakra Petch","Archivo",sans-serif;
  --hd-case:uppercase;--hd-w:900;--hd-ls:-.01em;--hd-lh:.92;--hd-st:125%;--h2:clamp(2.5rem,6.4vw,5.6rem);--h1:clamp(3.6rem,11.5vw,10.5rem);--h3-case:uppercase;
  --em-style:italic;--em-w:400;
  --r:14px;--r-btn:60px;--r-nav:60px;--bw:1px;--iw:0px;--sec-r:0px;
  --shd:0 0 0 0;--soft:0 30px 60px -34px rgba(0,0,0,.75);
  --hero-img-op:.5;--hero-blur:9px;--phero-img-op:.3;
  --glow:radial-gradient(ellipse at 15% 30%,rgba(47,143,78,.32),transparent 55%),radial-gradient(ellipse at 88% 72%,rgba(230,180,80,.2),transparent 50%);
  --map:invert(.92) hue-rotate(160deg) saturate(.55) contrast(.92) brightness(.95);
  --fa:#e6b450;--fba:#e6b450;--fbi:#0a1a11;--grain:.06;--l2-fill:transparent;--l2-stroke:var(--fg);--l2-sw:2px;--eb-ls:.38em;
}
/* 2 · PAAN POP — sticker-bright, chunky, playful */
html[data-theme="pop"]{
  color-scheme:light;
  --bg:#fff4dc;--bg2:#ffe9b8;--fg:#1d1a2b;--mut:rgba(29,26,43,.78);
  --acc:#ff4f81;--acc2:#1fb56b;--acc-ink:#1d1a2b;--card:#fff;--line:#1d1a2b;--em:#1d1a2b;--hl:#ff4f81;
  --glass:rgba(255,244,220,.9);--foot-bg:#1d1a2b;--foot-fg:#fff4dc;
  --alt-bg:#ffd23f;--alt-fg:#1d1a2b;--alt-mut:rgba(29,26,43,.8);--alt-acc:#1d1a2b;--alt-acc-ink:#ffd23f;--alt-card:#fff;--alt-line:#1d1a2b;--alt-em:#1d1a2b;--alt-hl:#fff;
  --font-d:"Bricolage Grotesque","Inter Display",Inter,system-ui,sans-serif;--font-s:"Bricolage Grotesque","Inter",system-ui,sans-serif;--font-b:"DM Sans",system-ui,sans-serif;--font-logo:"Bricolage Grotesque","Inter",sans-serif;
  --hd-case:none;--hd-w:800;--hd-ls:-.035em;--hd-lh:.95;--hd-st:100%;--h2:clamp(2.4rem,5.6vw,5rem);--h1:clamp(3.8rem,12vw,10.5rem);--h3-case:none;
  --em-style:normal;--em-w:800;
  --r:22px;--r-btn:999px;--r-nav:999px;--bw:2.5px;--iw:2.5px;--sec-r:0px;
  --shd:6px 6px 0;--soft:0 0 0 0 transparent;
  --hero-img-op:0;--hero-blur:0px;--phero-img-op:.18;
  --glow:radial-gradient(circle at 90% 14%,#ff4f81 0 9%,transparent 9.2%),radial-gradient(circle at 4% 76%,#1fb56b 0 6.5%,transparent 6.7%),radial-gradient(circle at 56% 96%,#3b6cff 0 4.5%,transparent 4.7%);
  --map:saturate(1.15) contrast(1.02);
  --fa:#ffd23f;--fba:#ff4f81;--fbi:#1d1a2b;--grain:0;--l2-fill:var(--acc);--l2-stroke:var(--fg);--l2-sw:3px;--eb-ls:.14em;
}
/* 3 · ROYAL MUGHAL — maroon, gold, ivory, serif */
html[data-theme="royal"]{
  color-scheme:dark;
  --bg:#240913;--bg2:#33101e;--fg:#f6e9d0;--mut:rgba(246,233,208,.76);
  --acc:#d4a64a;--acc2:#e7c878;--acc-ink:#2a0a14;--card:#2f0f1b;--line:rgba(212,166,74,.4);--em:#e7c878;--hl:transparent;
  --glass:rgba(36,9,19,.9);--foot-bg:#170509;--foot-fg:#f6e9d0;
  --alt-bg:#f6e9d0;--alt-fg:#3a0f1c;--alt-mut:rgba(58,15,28,.76);--alt-acc:#8c1d3a;--alt-acc-ink:#f6e9d0;--alt-card:rgba(255,255,255,.5);--alt-line:rgba(140,29,58,.28);--alt-em:#8c1d3a;--alt-hl:transparent;
  --font-d:"Playfair Display","GFS Baskerville",Georgia,serif;--font-s:"Cormorant Garamond","Playfair Display",Georgia,serif;--font-b:"DM Sans",system-ui,sans-serif;--font-logo:"Playfair Display",Georgia,serif;
  --hd-case:none;--hd-w:600;--hd-ls:-.005em;--hd-lh:1.02;--hd-st:100%;--h2:clamp(2.3rem,5.2vw,4.6rem);--h1:clamp(3.8rem,11vw,9.6rem);--h3-case:none;
  --em-style:italic;--em-w:500;
  --r:3px;--r-btn:2px;--r-nav:3px;--bw:1px;--iw:1px;--sec-r:0px;
  --shd:0 0 0 0;--soft:0 30px 60px -36px rgba(0,0,0,.8);
  --hero-img-op:.38;--hero-blur:6px;--phero-img-op:.26;
  --glow:radial-gradient(ellipse at 18% 22%,rgba(150,30,62,.6),transparent 55%),radial-gradient(ellipse at 88% 78%,rgba(212,166,74,.18),transparent 50%);
  --map:invert(.9) sepia(.6) hue-rotate(-12deg) saturate(.8) brightness(.9);
  --fa:#d4a64a;--fba:#d4a64a;--fbi:#2a0a14;--grain:.07;--l2-fill:transparent;--l2-stroke:var(--acc);--l2-sw:1.5px;--eb-ls:.34em;
}
/* 4 · FRESH MINT — airy, soft, modern editorial */
html[data-theme="mint"]{
  color-scheme:light;
  --bg:#f4faf6;--bg2:#e6f4ec;--fg:#10231a;--mut:rgba(16,35,26,.74);
  --acc:#15804b;--acc2:#7fd8a6;--acc-ink:#ffffff;--card:#ffffff;--line:rgba(16,35,26,.12);--em:#15804b;--hl:transparent;
  --glass:rgba(244,250,246,.8);--foot-bg:#0f2a1e;--foot-fg:#e8f5ed;
  --alt-bg:#dff1e6;--alt-fg:#10231a;--alt-mut:rgba(16,35,26,.74);--alt-acc:#10231a;--alt-acc-ink:#f4faf6;--alt-card:#ffffff;--alt-line:rgba(16,35,26,.12);--alt-em:#15804b;--alt-hl:transparent;
  --font-d:"Fraunces","GFS Baskerville",Georgia,serif;--font-s:"Fraunces",Georgia,serif;--font-b:"DM Sans",system-ui,sans-serif;--font-logo:"Fraunces",Georgia,serif;
  --hd-case:none;--hd-w:600;--hd-ls:-.025em;--hd-lh:1;--hd-st:100%;--h2:clamp(2.3rem,5.2vw,4.5rem);--h1:clamp(3.8rem,11vw,9.6rem);--h3-case:none;
  --em-style:italic;--em-w:400;
  --r:24px;--r-btn:999px;--r-nav:999px;--bw:1px;--iw:0px;--sec-r:56px;
  --shd:0 0 0 0;--soft:0 28px 50px -30px rgba(16,35,26,.28);
  --hero-img-op:0;--hero-blur:0px;--phero-img-op:.16;
  --glow:radial-gradient(ellipse at 8% 8%,#c6efd6,transparent 50%),radial-gradient(ellipse at 92% 55%,#fde9b8,transparent 45%),radial-gradient(ellipse at 40% 105%,#cdeee0,transparent 50%);
  --map:saturate(.8) hue-rotate(-8deg) brightness(1.02);
  --fa:#7fd8a6;--fba:#7fd8a6;--fbi:#0f2a1e;--grain:0;--l2-fill:var(--acc);--l2-stroke:transparent;--l2-sw:0px;--eb-ls:.28em;
}
/* alt sections re-map the same semantic tokens */
.alt{--bg:var(--alt-bg);--fg:var(--alt-fg);--mut:var(--alt-mut);--acc:var(--alt-acc);--acc-ink:var(--alt-acc-ink);--card:var(--alt-card);--line:var(--alt-line);--em:var(--alt-em);--hl:var(--alt-hl);
  background:var(--bg);color:var(--fg)}

/* ---------- BASE ---------- */
:root{--ease:cubic-bezier(.22,.8,.2,1);--ease-io:cubic-bezier(.76,0,.24,1);--nav-h:84px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.menu-open{overflow:hidden}
body{font-family:var(--font-b);background:var(--bg);color:var(--fg);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@supports (overflow:clip){body{overflow-x:clip}}
body::after{content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
::selection{background:var(--acc);color:var(--acc-ink)}
.wrap{width:min(1240px,92%);margin-inline:auto}
section{position:relative;padding:clamp(5rem,10vw,9rem) 0}
.alt{border-radius:var(--sec-r);position:relative;z-index:1}
.dark2{background:var(--bg2)}
p+p{margin-top:1.1rem}
main{overflow-x:hidden}
@supports (overflow:clip){main{overflow-x:clip}}
html[data-theme="royal"],html[data-theme="mint"]{font-variant-numeric:lining-nums}

/* ---------- TYPE ---------- */
h1,h2,.display{font-family:var(--font-d);font-weight:var(--hd-w);font-stretch:var(--hd-st);font-variation-settings:"wdth" 125;text-transform:var(--hd-case);line-height:var(--hd-lh);letter-spacing:var(--hd-ls)}
html:not([data-theme="night"]) h1,html:not([data-theme="night"]) h2,html:not([data-theme="night"]) .display{font-variation-settings:normal}
h2{font-size:var(--h2);text-wrap:balance}
h3{font-family:var(--font-d);font-weight:calc(var(--hd-w) - 100);font-stretch:calc(var(--hd-st) - 10%);text-transform:var(--h3-case);letter-spacing:.01em;line-height:1.05}
html:not([data-theme="night"]) h3{font-stretch:100%}
em.s,h1 em,h2 em{font-family:var(--font-s);font-style:var(--em-style);font-weight:var(--em-w);text-transform:none;letter-spacing:0;color:var(--em);font-stretch:100%;font-variation-settings:normal;
  background:linear-gradient(transparent 60%,var(--hl) 60% 92%,transparent 92%);padding:0 .08em}
.eyebrow{display:inline-flex;align-items:center;gap:.9rem;font-size:.72rem;letter-spacing:var(--eb-ls);text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:1.4rem}
.eyebrow::before{content:"";width:38px;height:1px;background:currentColor;transition:width .8s var(--ease)}
.lead{font-size:1.1rem;max-width:56ch;color:var(--mut)}
.sh{margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.sh .lead,h2+.lead{margin-top:1.5rem}
.sh.center{text-align:center}.sh.center .lead{margin-inline:auto}.sh.center .eyebrow{justify-content:center}

/* ---------- MOTION PRIMITIVES ---------- */
.js .reveal{opacity:0;translate:0 44px}
.js .reveal.in{opacity:1;translate:none;animation:rv 1.1s var(--ease) var(--d,0s) backwards}
@keyframes rv{from{opacity:0;translate:0 44px}to{opacity:1;translate:none}}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .08em .18em;margin:-.12em -.08em -.18em}
.js .split .w>span{display:inline-block;translate:0 118%;rotate:4deg;transform-origin:0 100%;transition:translate 1.1s var(--ease),rotate 1.1s var(--ease)}
.js .split.in .w>span{translate:none;rotate:0deg}
.split .l2{display:block}
.js .wipe{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease) var(--d,0s)}
.js .wipe.in{clip-path:inset(-60px)}
.js .wipe img{scale:1.35;transition:scale 1.9s var(--ease) var(--d,0s)}
.js .wipe.in img{scale:1}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1100;pointer-events:none}
.progress i{display:block;height:100%;background:var(--acc);transform:scaleX(var(--p,0));transform-origin:left}

/* ---------- LOADER + PAGE CURTAIN ---------- */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-items:center;transition:transform 1s var(--ease-io) .05s;text-align:center}
.preloader.done{transform:translateY(-100%)}
html.no-loader .preloader{display:none}
.pl-inner{display:grid;gap:1.4rem;justify-items:center}
.pl-leaf{width:84px;height:84px;fill:none;stroke:var(--acc2);stroke-width:2.5;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.5s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0;fill:color-mix(in srgb,var(--acc2) 22%,transparent)}}
.pl-word{font-family:var(--font-logo);font-weight:700;font-size:clamp(1.8rem,5vw,3rem);letter-spacing:.12em;overflow:hidden;padding:.1em .2em}
.pl-word span{display:inline-block;translate:0 115%;animation:rise .9s var(--ease) .3s forwards}
@keyframes rise{to{translate:none}}
.pl-bar{width:160px;height:3px;background:color-mix(in srgb,var(--fg) 14%,transparent);overflow:hidden;border-radius:9px}
.pl-bar i{display:block;height:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;animation:bar 1.4s var(--ease) forwards}
@keyframes bar{to{transform:scaleX(1)}}
.curtain{position:fixed;inset:0;z-index:9990;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;transform:translateY(101%);transition:transform .6s var(--ease-io),visibility 0s .6s;pointer-events:none;visibility:hidden}
.curtain span{font-family:var(--font-logo);font-weight:700;font-size:clamp(2rem,7vw,4.4rem);letter-spacing:.1em;opacity:0;translate:0 20px;transition:opacity .4s .25s,translate .5s var(--ease) .2s}
.curtain.in{transform:none;pointer-events:all;visibility:visible;transition:transform .6s var(--ease-io),visibility 0s}.curtain.in span{opacity:1;translate:none}
html.arrive .curtain{transform:none;transition:none;visibility:visible}
html.arrive .curtain span{opacity:1;translate:none;transition:none}
html.arrive.arrive-out .curtain{transform:translateY(-101%);transition:transform .75s var(--ease-io)}

/* ---------- CURSOR ---------- */
.cur,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:10000;border-radius:50%;translate:-50% -50%;opacity:0;transition:opacity .3s}
.cur{width:7px;height:7px;background:var(--acc)}
.cur-ring{width:40px;height:40px;border:1.5px solid var(--acc);transition:width .4s var(--ease),height .4s var(--ease),background .3s,opacity .3s}
.cur-ring.hover{width:74px;height:74px;background:color-mix(in srgb,var(--acc) 18%,transparent)}
.cur-ring.view::after{content:"VIEW";position:absolute;inset:0;display:grid;place-items:center;font-size:.6rem;letter-spacing:.2em;font-weight:600;color:var(--fg)}
.has-cur.cur-on .cur,.has-cur.cur-on .cur-ring{opacity:1}
@media (hover:hover) and (pointer:fine){body.has-cur,body.has-cur a,body.has-cur button{cursor:none}}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 0;pointer-events:none;transition:padding .5s var(--ease)}
.nav.scrolled{padding:10px 0}
.nav-in{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.5rem .55rem .5rem 1.5rem;border-radius:var(--r-nav);border:var(--bw) solid transparent;transition:background .5s,border-color .5s,box-shadow .5s,backdrop-filter .5s}
.nav.scrolled .nav-in{background:var(--glass);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-color:var(--line);box-shadow:var(--soft)}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-logo);font-weight:700;font-size:1.5rem;letter-spacing:.06em;line-height:1}
.brand svg{width:28px;height:28px;fill:var(--acc2);stroke:none;transition:transform .9s var(--ease)}
.brand svg .vein{fill:none;stroke:var(--bg);stroke-width:8;stroke-linecap:round}
.brand:hover svg{transform:rotate(360deg)}
.brand small{display:block;font-family:var(--font-b);font-weight:500;font-size:.5rem;letter-spacing:.4em;color:var(--acc);margin-top:.35rem}
.menu{display:flex;gap:2.2rem;list-style:none}
.menu a{font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;position:relative;padding:.4rem 0;font-weight:600;transition:color .3s}
.menu a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.menu a:hover::after,.menu a.on::after{transform:scaleX(1);transform-origin:left}
.menu a.on{color:var(--acc)}
.burger{display:none;background:none;border:0;width:46px;height:46px;position:relative;z-index:1000;border-radius:50%}
.burger i{position:absolute;left:12px;width:22px;height:2px;background:var(--fg);transition:.5s var(--ease)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:27px}
.burger.open i:nth-child(1){top:22px;rotate:45deg}.burger.open i:nth-child(2){opacity:0;scale:0}.burger.open i:nth-child(3){top:22px;rotate:-45deg}
.mob{position:fixed;inset:0;background:var(--bg);color:var(--fg);z-index:950;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.1rem;clip-path:circle(0 at calc(100% - 44px) 44px);transition:clip-path .9s var(--ease-io),visibility 0s .9s;visibility:hidden}
.mob.open{clip-path:circle(150% at calc(100% - 44px) 44px);visibility:visible;transition:clip-path .9s var(--ease-io),visibility 0s}
.mob a{font-family:var(--font-d);font-weight:var(--hd-w);text-transform:var(--hd-case);font-size:clamp(2.4rem,11vw,3.6rem);line-height:1.05;opacity:0;translate:0 30px;transition:opacity .5s,translate .7s var(--ease)}
.mob.open a{opacity:1;translate:none;transition-delay:calc(.3s + var(--i)*.08s)}
.mob small{color:var(--acc);letter-spacing:.2em;font-size:.76rem;margin-top:1rem;opacity:0;transition:opacity .6s .8s}
.mob.open small{opacity:1}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:1rem 2.1rem;border:max(var(--bw),1.5px) solid var(--acc);color:var(--fg);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-btn);transition:color .5s var(--ease),transform .5s var(--ease),box-shadow .3s;background:none;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:-1px;background:var(--acc);translate:0 102%;transition:translate .55s var(--ease);z-index:-1;border-radius:inherit}
.btn:hover{color:var(--acc-ink)}.btn:hover::before{translate:none}
.btn.solid{background:var(--acc);color:var(--acc-ink)}
.btn.solid::before{background:var(--fg)}.btn.solid:hover{color:var(--bg)}
.btn.sm{padding:.8rem 1.4rem;font-size:.68rem}
.btn .st{display:inline-block;transition:rotate .6s var(--ease)}.btn:hover .st{rotate:144deg}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:9rem 0 0;overflow:hidden;background:var(--bg)}
.hero-bg{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;opacity:var(--hero-img-op);filter:blur(var(--hero-blur)) saturate(1.2);animation:kb 28s ease-in-out infinite alternate}
@keyframes kb{to{scale:1.1;translate:-1.5% -1%}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,transparent) 0%,color-mix(in srgb,var(--bg) 18%,transparent) 42%,var(--bg) 98%)}
.hero-glow{position:absolute;inset:-10%;z-index:1;background:var(--glow);animation:drift 20s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.08)}}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:2rem;align-items:center;padding-bottom:3.5rem}
.hero h1{font-size:var(--h1);line-height:.86;margin:.5rem 0 1.6rem}
.hero h1 .l2{color:var(--l2-fill);-webkit-text-stroke:var(--l2-sw) var(--l2-stroke);paint-order:stroke fill}
.hero .tagline{font-family:var(--font-s);font-style:var(--em-style);font-size:clamp(1.5rem,3vw,2.5rem);color:var(--em);max-width:22ch;line-height:1.12;margin-bottom:2rem}
html[data-theme="pop"] .hero .tagline{font-weight:700;letter-spacing:-.02em;color:var(--fg)}
.hero .cta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.chips{display:flex;gap:.7rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:var(--bw) solid var(--line);border-radius:99px;font-size:.78rem;background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(8px)}
.chip b{font-weight:600}
.chip.open i{width:9px;height:9px;border-radius:50%;background:#37d67a;box-shadow:0 0 0 0 rgba(55,214,122,.6);animation:pulse 2s infinite}
.chip.open.closed i{background:#ff6b5a;box-shadow:none;animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}
.hero-art{position:relative;aspect-ratio:1/1.06;width:100%;max-width:540px;margin-left:auto}
.ha{position:absolute}
.ha-in{translate:calc(var(--mx,0) * var(--k) * 1px) calc(var(--my,0) * var(--k) * 1px);transition:translate .6s var(--ease-out,var(--ease));height:100%}
.ha-in>div{height:100%;overflow:hidden;animation:bob 9s ease-in-out infinite;border:2px solid color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:var(--shd) var(--line),var(--soft);background:var(--bg2)}
.ha-in img,.ha-in picture{width:100%;height:100%;object-fit:cover}
.ha1{left:0;top:0;width:58%;aspect-ratio:3/4.1}.ha2{right:0;top:13%;width:40%;aspect-ratio:1}.ha3{right:5%;bottom:0;width:46%;aspect-ratio:1}
.ha2 .ha-in>div{animation-delay:-3s;animation-direction:reverse}.ha3 .ha-in>div{animation-delay:-5s}
@keyframes bob{50%{transform:translateY(-16px) rotate(1.5deg)}}
.arch{border-radius:999px 999px var(--r) var(--r);overflow:hidden}.circ{border-radius:50%}.sq{border-radius:calc(var(--r) * 1.5)}
.stamp{width:118px;height:118px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;text-align:center;font-family:var(--font-d);font-weight:800;font-size:.78rem;text-transform:uppercase;line-height:1.1;z-index:3;position:absolute;border:var(--bw) solid color-mix(in srgb,var(--fg) 0%,transparent)}
.stamp b{display:block;font-size:1.9rem}
.hero-stamp{left:41%;bottom:12%;width:116px;height:116px}
.hero-stamp svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);animation:spin 22s linear infinite;overflow:visible}
.hero-stamp text{font-family:var(--font-b);font-weight:700;font-size:10.5px;letter-spacing:.1em;fill:var(--acc-ink)}
.hero-stamp b{font-size:1.6rem;position:relative;animation:spin 14s linear infinite reverse}
@keyframes spin{to{rotate:360deg}}
@keyframes sway{from{rotate:-9deg}to{rotate:7deg}}
.hero-info{position:relative;z-index:2;display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;border-top:var(--bw) solid var(--line);padding:1.1rem 0;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--em);font-weight:500}
.hero-info b{color:var(--fg);font-weight:600}
.cue{display:inline-flex;align-items:center;gap:.8rem}
.cue i{display:block;width:1px;height:26px;background:currentColor;transform-origin:top;animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- TICKER ---------- */
.ticker{background:var(--acc);color:var(--acc-ink);padding:1rem 0;overflow:hidden;white-space:nowrap;position:relative;z-index:2}
.ticker-track{display:flex;width:max-content;animation:marq 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tset{display:flex;flex:none}
.ticker span{font-family:var(--font-d);font-weight:var(--hd-w);font-stretch:var(--hd-st);text-transform:var(--hd-case);font-size:1.5rem;padding:0 1.6rem;display:inline-flex;align-items:center;gap:3.2rem;letter-spacing:var(--hd-ls)}
.ticker span::after{content:"✦";font-size:.8rem}
@keyframes marq{to{translate:-50% 0}}

/* ---------- STORY ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6.5rem);align-items:center}
.stack{position:relative;aspect-ratio:1/1.1}
.stack .a1{position:absolute;left:0;top:0;width:70%;aspect-ratio:3/4}
.stack .a2{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:1;border-radius:50%;border:8px solid var(--bg)}
.stack img,.card-img img,.pk-img img{width:100%;height:100%;object-fit:cover}
.stack .arch img,.card-img img{transition:transform 1.4s var(--ease)}
.stack .arch:hover img{transform:scale(1.07)}
.story-stamp{left:52%;top:6%;animation:sway 5s ease-in-out infinite alternate}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 2rem;margin-top:2.4rem;padding-top:2rem;border-top:var(--bw) solid var(--line)}
.stat b{font-family:var(--font-d);font-weight:var(--hd-w);font-stretch:var(--hd-st);font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1;display:block;color:var(--acc);font-variant-numeric:tabular-nums;letter-spacing:var(--hd-ls)}
.stat span{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);font-weight:500}

/* ---------- FEATURES ---------- */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.fcard{background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--r);padding:2.2rem 1.7rem 2rem;position:relative;overflow:hidden;box-shadow:var(--shd) var(--line),var(--soft);isolation:isolate;transition:transform .6s var(--ease),box-shadow .5s var(--ease),color .5s}
.fcard::before{content:"";position:absolute;inset:0;background:var(--acc);translate:0 102%;transition:translate .7s var(--ease);z-index:-1}
.fcard:hover::before{translate:none}.fcard:hover{color:var(--acc-ink)}.fcard:hover p{color:inherit}
.fcard .ico{width:46px;height:46px;color:var(--acc);margin-bottom:2.4rem;transition:color .5s,transform .7s var(--ease)}
.fcard:hover .ico{color:var(--acc-ink);transform:rotate(-8deg) scale(1.1)}
.fcard .n{position:absolute;right:1.4rem;top:1.2rem;font-family:var(--font-d);font-weight:var(--hd-w);font-size:1.1rem;color:var(--mut);letter-spacing:.1em}
.fcard h3{font-size:1.45rem;margin-bottom:.7rem}
.fcard p{font-size:.94rem;color:var(--mut);transition:color .5s}

/* ---------- MENU HIGHLIGHTS (bento) ---------- */
.hb{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:repeat(2,clamp(230px,23vw,340px));gap:1rem}
.hb a{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg2);display:block;border:var(--iw) solid var(--line);box-shadow:var(--shd) var(--line),var(--soft);transition:transform .6s var(--ease),box-shadow .5s}
.hb a:hover{transform:translateY(-6px)}
.hb .b1{grid-row:span 2}
.hb a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.hb a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,12,10,.88))}
.hb a:hover img{transform:scale(1.08)}
.hb .cap{position:absolute;left:1.4rem;right:1.4rem;bottom:1.3rem;z-index:2;color:#fff}
.hb .cap small{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc2);font-weight:600}
html[data-theme="night"] .hb .cap small,html[data-theme="royal"] .hb .cap small{color:#e6b450}
html[data-theme="pop"] .hb .cap small{color:#ffd23f}
.hb .cap h3{font-size:clamp(1.3rem,2.2vw,2rem);margin-top:.3rem}
.hb .b1 .cap h3{font-size:clamp(1.8rem,3vw,2.8rem)}
.go{position:absolute;right:1rem;top:1rem;z-index:2;width:46px;height:46px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;scale:0;rotate:-90deg;transition:scale .6s var(--ease),rotate .6s var(--ease);font-weight:700}
a:hover>.go{scale:1;rotate:0deg}

/* ---------- PHOTO MARQUEE ---------- */
.pm{padding:clamp(4rem,8vw,7rem) 0;overflow:hidden}
.pm .sh{margin-bottom:2.4rem}
.pm-row{display:flex;width:max-content;animation:marq 60s linear infinite;margin-bottom:1.2rem}
.pm-row.rev{animation-direction:reverse;animation-duration:70s}
.pm-wrap:hover .pm-row{animation-play-state:paused}
.pm-set{display:flex;gap:1.2rem;padding-right:1.2rem;flex:none}
.pm-card{position:relative;width:clamp(200px,22vw,300px);aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;flex:none;background:var(--bg2);border:var(--iw) solid var(--line);box-shadow:var(--shd) var(--line)}
.pm-card img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pm-card:hover img{transform:scale(1.1)}
.pm-card span{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1rem .9rem;background:linear-gradient(transparent,rgba(8,12,10,.88));color:#fff;font-family:var(--font-d);font-weight:calc(var(--hd-w) - 100);text-transform:var(--h3-case);font-size:.95rem}

/* ---------- GALLERY ---------- */
.masonry{columns:4 220px;column-gap:1rem}
.masonry figure{break-inside:avoid;margin-bottom:1rem;border-radius:var(--r);overflow:hidden;position:relative;border:var(--iw) solid var(--line);box-shadow:var(--shd) var(--line)}
.masonry img{width:100%;transition:transform 1.1s var(--ease)}
.masonry figure:hover img{transform:scale(1.07)}

/* ---------- REVIEWS ---------- */
.rv-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.tiles{display:grid;gap:1rem}
.tile{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 1.8rem;border:var(--bw) solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shd) var(--line),var(--soft);transition:transform .5s var(--ease),box-shadow .4s}
.tile:hover{transform:translateX(8px)}
.tile b{font-family:var(--font-d);font-weight:var(--hd-w);font-stretch:var(--hd-st);font-size:2.4rem;line-height:1}
.tile small{display:block;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.stars-static{color:var(--acc);letter-spacing:.1em;font-size:1.1rem}
.quote{padding:2rem;border-radius:var(--r);background:var(--fg);color:var(--bg);box-shadow:var(--shd) var(--line)}
.quote p{font-family:var(--font-s);font-style:var(--em-style);font-size:1.9rem;line-height:1.2;font-weight:var(--em-w)}
html[data-theme="pop"] .quote p{font-weight:700;font-size:1.7rem;letter-spacing:-.02em}
.quote cite{display:block;margin-top:1rem;font-style:normal;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--acc-q,var(--acc2))}
.fb{background:var(--fg);color:var(--bg);border-radius:calc(var(--r) * 1.2);padding:clamp(1.8rem,4vw,3rem);position:relative;overflow:hidden;box-shadow:var(--shd) var(--line),var(--soft);--facc:var(--fba)}
.fb::before{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(var(--fba),transparent 70%);opacity:.4}
.fb>*{position:relative}
.fb h3{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:.6rem;font-weight:var(--hd-w)}
.fb p.sub{opacity:.78;font-size:.95rem;margin-bottom:1.4rem;text-transform:none;letter-spacing:0;color:inherit}
.rate{display:flex;gap:.3rem;margin-bottom:.6rem}
.rate button{background:none;border:0;font-size:2.6rem;line-height:1;color:color-mix(in srgb,var(--bg) 30%,transparent);transition:transform .35s var(--ease),color .25s}
.rate button.on{color:var(--facc)}
.rate button:hover{transform:scale(1.25) rotate(-8deg)}
.rate.shake{animation:shk .45s}
@keyframes shk{25%{translate:-8px 0}75%{translate:8px 0}}
.rate-label{font-family:var(--font-s);font-style:var(--em-style);font-size:1.3rem;color:var(--facc);min-height:1.8rem;margin-bottom:1rem}
.fb textarea{width:100%;background:color-mix(in srgb,var(--bg) 9%,transparent);border:1px solid color-mix(in srgb,var(--bg) 28%,transparent);border-radius:12px;padding:.95rem 1.1rem;color:var(--bg);font:inherit;outline:none;transition:border-color .3s,background .3s;margin-bottom:.9rem;min-height:110px;resize:vertical}
.fb textarea::placeholder{color:color-mix(in srgb,var(--bg) 55%,transparent)}
.fb textarea:focus{border-color:var(--facc);background:color-mix(in srgb,var(--bg) 14%,transparent)}
.fb .btn.solid{background:var(--fba);color:var(--fbi);border-color:var(--fba)}
.fb .btn.solid::before{background:var(--bg)}.fb .btn.solid:hover{color:var(--fg)}
.fb .note{font-size:.78rem;opacity:.65;margin-top:1rem}
.toast{position:fixed;left:50%;bottom:30px;translate:-50% 40px;background:var(--acc);color:var(--acc-ink);padding:.9rem 1.6rem;border-radius:40px;font-size:.85rem;font-weight:600;z-index:9000;opacity:0;pointer-events:none;transition:opacity .5s,translate .5s var(--ease);max-width:90vw;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.toast.show{opacity:1;translate:-50% 0}

/* ---------- VISIT ---------- */
.visit{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:stretch}
.vi{padding:1.2rem 0;border-bottom:var(--bw) solid var(--line)}
.vi small{display:block;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin-bottom:.3rem;font-weight:600}
.vi p,.vi a{font-family:var(--font-d);font-weight:calc(var(--hd-w) - 200);font-stretch:calc(var(--hd-st) - 13%);font-size:1.25rem;line-height:1.3;text-transform:none}
html:not([data-theme="night"]) .vi p,html:not([data-theme="night"]) .vi a{font-stretch:100%;font-weight:500}
.vi a{transition:color .3s}.vi a:hover{color:var(--acc)}
.hours{display:grid;grid-template-columns:1fr auto;gap:.15rem 1.2rem;font-size:.98rem;color:var(--mut)}
.map{position:relative;min-height:440px;border-radius:calc(var(--r) * 1.2);overflow:hidden;border:max(var(--bw),1px) solid var(--line);box-shadow:var(--shd) var(--line),var(--soft)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:var(--map)}
.btns{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.8rem}

/* ---------- CTA BAND ---------- */
.cta-band{text-align:center;background:linear-gradient(color-mix(in srgb,var(--bg) 84%,transparent),color-mix(in srgb,var(--bg) 94%,transparent)),url(img/storefront.jpg) center/cover fixed;overflow:hidden}
.cta-band h2{font-size:clamp(3rem,10vw,8.5rem);margin-bottom:1.6rem}
.cta-band .eyebrow{justify-content:center}

/* ---------- INNER PAGE HERO ---------- */
.phero{padding:11.5rem 0 5.5rem;position:relative;overflow:hidden;text-align:center;background:var(--bg)}
.phero img.bg{position:absolute;inset:-6% 0;width:100%;height:112%;max-width:none;object-fit:cover;opacity:var(--phero-img-op)}
.phero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 30%,var(--bg))}
.phero .hero-glow{z-index:0}
.phero .wrap{position:relative;z-index:2}
.phero h1{font-size:clamp(3.6rem,12.5vw,10.5rem);margin:.4rem 0 1.2rem;line-height:.9}
.phero .eyebrow{justify-content:center}
.phero p{max-width:54ch;margin:0 auto;color:var(--mut);font-size:1.1rem}

/* ---------- MENU PAGE ---------- */
.tabs{position:sticky;top:84px;z-index:800;padding:.6rem 0;pointer-events:none}
.tabs .wrap{display:flex;justify-content:center}
.tabs-in{pointer-events:auto;position:relative;display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;padding:.4rem;border-radius:var(--r-btn);background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:max(var(--bw),1px) solid var(--line);max-width:100%;box-shadow:var(--shd) var(--line),var(--soft)}
.tabs-in::-webkit-scrollbar{display:none}
.tab-ind{position:absolute;top:.4rem;bottom:.4rem;left:0;width:0;background:var(--acc);border-radius:var(--r-btn);transition:translate .55s var(--ease),width .55s var(--ease);z-index:0}
.tab{position:relative;z-index:1;flex:none;background:none;border:0;padding:.75rem 1.3rem;border-radius:var(--r-btn);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;transition:color .4s}
.tab:hover{color:var(--acc)}
.tab.on{color:var(--acc-ink)}
.menu-sec{padding-top:3.5rem}
.panel{display:none}
.panel.on{display:block}
.panel.enter .ph>*{animation:rowIn .8s var(--ease) both}
.panel.enter .ph>*:nth-child(2){animation-delay:.12s}
.panel.enter .ri{animation:rowIn .75s var(--ease) both;animation-delay:calc(.12s + var(--i,0) * 45ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem}
.ph .label{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--acc);font-weight:600}
.ph h2{font-size:clamp(2.2rem,5.2vw,4.4rem);margin:.6rem 0 1rem}
.bigbadge{flex:none;width:130px;height:130px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-content:center;text-align:center;line-height:1;animation:bob 6s ease-in-out infinite;border:var(--bw) solid var(--line);box-shadow:var(--shd) var(--line)}
.bigbadge b{font-family:var(--font-d);font-weight:var(--hd-w);font-stretch:var(--hd-st);font-size:2rem}
.bigbadge small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;margin-top:.3rem;font-weight:700}
.pgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,4vw,4rem);align-items:start}
.pgrid.full{grid-template-columns:1fr}
.mb{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;position:sticky;top:160px}
.mb figure{aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--bg2);border:var(--iw) solid var(--line);box-shadow:var(--shd) var(--line)}
.mb img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.mb figure:hover img{transform:scale(1.08)}
.mb.n1 figure{grid-column:span 2;aspect-ratio:4/5}
.mb.n3 figure:first-child{grid-column:span 2;aspect-ratio:4/3}
.plist{list-style:none}
.plist.two{columns:2;column-gap:4rem}
.plist li{display:flex;align-items:baseline;gap:.8rem;padding:.9rem 0;border-bottom:var(--bw) solid var(--line);break-inside:avoid;transition:padding .45s var(--ease),background .45s}
.plist li:hover{padding-left:.9rem;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 14%,transparent),transparent)}
.plist b{font-family:var(--font-d);font-weight:calc(var(--hd-w) - 100);text-transform:var(--h3-case);font-size:1.02rem;letter-spacing:.01em}
html:not([data-theme="night"]) .plist b{font-weight:600}
.plist i{flex:1;border-bottom:2px dotted color-mix(in srgb,var(--acc) 55%,transparent);translate:0 -4px;min-width:20px}
.plist .pr{font-family:var(--font-d);font-weight:var(--hd-w);color:var(--acc);font-size:1.1rem;font-variant-numeric:tabular-nums}
html[data-theme="pop"] .plist .pr{color:var(--fg);background:var(--acc);padding:.05rem .6rem;border-radius:99px;font-size:.95rem}
.plist li.np{align-items:center;justify-content:space-between;padding:1.2rem 0}
.plist li.np b{font-size:1.2rem}
.plist li.np p{font-size:.9rem;color:var(--mut);margin:.2rem 0 0}
.plist li.np em{font-style:normal;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--acc-ink);background:var(--acc);padding:.3rem .8rem;border-radius:30px;white-space:nowrap;font-weight:700;font-family:var(--font-b);background-image:none}
.sub{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin:2.4rem 0 .4rem;font-weight:600}
.menu-note{text-align:center;color:var(--mut);font-size:.88rem;margin-top:3.5rem}

/* ---------- ABOUT ---------- */
.origin{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.origin .card-img{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;border:var(--iw) solid var(--line);box-shadow:var(--shd) var(--line),var(--soft)}
.tl{margin-top:2.4rem;border-left:max(var(--bw),1px) solid var(--acc);padding-left:2rem;display:grid;gap:1.8rem}
.tl div{position:relative}
.tl div::before{content:"";position:absolute;left:-2.55rem;top:.55rem;width:12px;height:12px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 5px var(--bg)}
.tl b{font-family:var(--font-d);font-weight:var(--hd-w);font-stretch:var(--hd-st);font-size:1.5rem;text-transform:var(--hd-case);letter-spacing:var(--hd-ls)}
.tl p{color:var(--mut)}
.quote-band{padding:clamp(4rem,9vw,8rem) 0;text-align:center;background:var(--bg2);overflow:hidden}
.quote-band .big{font-family:var(--font-d);font-weight:var(--hd-w);font-stretch:var(--hd-st);text-transform:var(--hd-case);font-size:clamp(2.2rem,6.4vw,5.6rem);line-height:var(--hd-lh);letter-spacing:var(--hd-ls);max-width:18ch;margin-inline:auto;text-wrap:balance}

/* ---------- CONTACT ---------- */
.quick{padding:1rem 0 clamp(3rem,6vw,5rem)}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.qcard{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:2rem 1.8rem;border:var(--bw) solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shd) var(--line),var(--soft);overflow:hidden;isolation:isolate;transition:transform .6s var(--ease),color .5s,box-shadow .4s}
.qcard::before{content:"";position:absolute;inset:0;background:var(--acc);translate:0 102%;transition:translate .7s var(--ease);z-index:-1}
.qcard:hover::before{translate:none}.qcard:hover{color:var(--acc-ink)}
.qcard .ico{width:40px;height:40px;color:var(--acc);margin-bottom:1.4rem;transition:color .5s}.qcard:hover .ico{color:var(--acc-ink)}
.qcard small{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;opacity:.75}
.qcard b{font-family:var(--font-d);font-weight:calc(var(--hd-w) - 200);font-size:1.4rem;line-height:1.2}
html:not([data-theme="night"]) .qcard b{font-weight:600}
.qcard .go{top:1.3rem;right:1.3rem;background:var(--acc-ink);color:var(--acc)}

/* ---------- FOOTER ---------- */
footer{background:var(--foot-bg);color:var(--foot-fg);padding:5rem 0 2rem;position:relative;overflow:hidden;--acc:var(--fa);--line:color-mix(in srgb,var(--foot-fg) 16%,transparent)}
.foot-big{font-family:var(--font-logo);font-weight:700;font-size:clamp(3.2rem,12.6vw,14rem);line-height:.85;letter-spacing:.01em;text-align:center;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--foot-fg) 16%,transparent);margin-bottom:3.5rem;white-space:nowrap;user-select:none}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:3rem}
.fbrand{font-family:var(--font-logo);font-weight:700;font-size:2.4rem;letter-spacing:.05em;line-height:1}
footer h4{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin-bottom:1.2rem;font-weight:600}
footer li{list-style:none;margin-bottom:.55rem;font-size:.94rem;opacity:.85}
footer a{transition:color .3s,opacity .3s}footer a:hover{color:var(--acc)}
.copy{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.74rem;letter-spacing:.14em;opacity:.6}

/* ---------- WHATSAPP ---------- */
.wa{position:fixed;right:22px;bottom:22px;width:62px;height:62px;border-radius:50%;background:#25d366;display:grid;place-items:center;z-index:880;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .5s var(--ease)}
.wa:hover{transform:scale(1.1) rotate(-8deg)}
.wa::before,.wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:rip 2.6s infinite}
.wa::after{animation-delay:1.3s}
@keyframes rip{to{transform:scale(1.9);opacity:0}}
.wa svg{width:32px;height:32px;fill:#fff}
.wa span{position:absolute;right:76px;background:#fff;color:#111;font-size:.7rem;letter-spacing:.14em;padding:.5rem .9rem;border-radius:30px;white-space:nowrap;opacity:0;translate:10px 0;transition:.4s var(--ease);pointer-events:none;font-weight:600}
.wa:hover span{opacity:1;translate:none}

/* ---------- THEME SWITCHER (lives in the nav) ---------- */
.nav-r{display:flex;align-items:center;gap:.6rem}
.themer{position:relative}
.th-btn{display:flex;align-items:center;gap:.55rem;height:46px;padding:0 1rem 0 .7rem;border-radius:99px;background:transparent;border:max(var(--bw),1px) solid var(--line);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;transition:transform .4s var(--ease),background .3s}
.th-btn:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.th-dot{width:24px;height:24px;border-radius:50%;background:conic-gradient(var(--acc) 0 33%,var(--acc2) 0 66%,var(--fg) 0);animation:spin 8s linear infinite;border:2px solid color-mix(in srgb,var(--fg) 30%,transparent)}
.th-tray{position:absolute;right:0;top:calc(100% + 18px);display:grid;gap:.3rem;padding:.9rem;border-radius:calc(var(--r) * 1.1);background:var(--bg);color:var(--fg);border:max(var(--bw),1px) solid var(--line);box-shadow:var(--shd) var(--line),0 30px 60px -20px rgba(0,0,0,.55);width:236px;transform-origin:100% 0;scale:.92;opacity:0;translate:0 -10px;visibility:hidden;transition:opacity .3s,translate .5s var(--ease),scale .5s var(--ease),visibility 0s .5s}
.themer.open .th-tray{opacity:1;translate:none;scale:1;visibility:visible;transition-delay:0s}
.th-h{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.65;padding:.1rem .5rem .5rem;font-weight:700;margin:0 !important}
.th-opt{display:flex;align-items:center;gap:.8rem;padding:.55rem .6rem;border-radius:12px;background:none;border:1px solid transparent;font-size:.86rem;font-weight:600;text-align:left;transition:background .3s,border-color .3s}
.th-opt:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.th-opt[aria-checked="true"]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.th-sw{width:34px;height:34px;border-radius:50%;flex:none;background:conic-gradient(from 200deg,var(--a) 0 34%,var(--b) 0 67%,var(--c) 0);border:2px solid color-mix(in srgb,var(--fg) 25%,transparent)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}

/* =====================================================================
   THEME CHARACTER — structural personality beyond colour
   ===================================================================== */
/* ---- NIGHT: warm glow, outlined wordmark ---- */
html[data-theme="night"] .hero h1{filter:drop-shadow(0 8px 40px rgba(0,0,0,.35))}
html[data-theme="night"] .ha-in>div{border-width:2px}
html[data-theme="night"] .fcard,html[data-theme="night"] .tile,html[data-theme="night"] .qcard{background:linear-gradient(160deg,var(--card),color-mix(in srgb,var(--card) 70%,#000))}
html[data-theme="night"] .alt .fcard,html[data-theme="night"] .alt .tile{background:var(--alt-card)}

/* ---- POP: stickers, hard shadows, tilt, big blobs ---- */
html[data-theme="pop"] .eyebrow{background:var(--acc);color:var(--acc-ink);padding:.4rem 1rem;border:var(--bw) solid var(--fg);border-radius:99px;rotate:-2deg;font-weight:800;box-shadow:3px 3px 0 var(--fg)}
html[data-theme="pop"] .eyebrow::before{display:none}
html[data-theme="pop"] .alt .eyebrow{background:var(--fg);color:var(--alt-bg)}
html[data-theme="pop"] .ticker{rotate:-1.4deg;scale:1.03;border-block:var(--bw) solid var(--fg);margin:1.5rem 0;background:var(--acc2);color:var(--fg)}
html[data-theme="pop"] .alt{border-block:var(--bw) solid var(--fg)}
html[data-theme="pop"] .nav-in{background:var(--bg);border-color:var(--fg);box-shadow:4px 4px 0 var(--fg)}
html[data-theme="pop"] .nav.scrolled .nav-in{background:var(--bg)}
html[data-theme="pop"] .btn{box-shadow:4px 4px 0 var(--fg);border-color:var(--fg);color:var(--fg);background:var(--bg)}
html[data-theme="pop"] .btn.solid{background:var(--acc);color:var(--fg)}
html[data-theme="pop"] .btn::before{background:var(--fg)}
html[data-theme="pop"] .btn:hover{color:var(--bg);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--fg)}
html[data-theme="pop"] .btn.solid::before{background:var(--fg)}html[data-theme="pop"] .btn.solid:hover{color:var(--bg)}
html[data-theme="pop"] .alt .btn{border-color:var(--fg);color:var(--fg);background:var(--alt-bg);box-shadow:4px 4px 0 var(--fg)}
html[data-theme="pop"] .alt .btn.solid{background:var(--fg);color:var(--alt-bg)}
html[data-theme="pop"] .alt .btn::before{background:var(--acc)}html[data-theme="pop"] .alt .btn:hover{color:var(--fg)}
html[data-theme="pop"] .fb .btn{box-shadow:4px 4px 0 var(--bg);border-color:var(--bg)}
html[data-theme="pop"] .fcard:hover,html[data-theme="pop"] .qcard:hover,html[data-theme="pop"] .tile:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--fg)}
html[data-theme="pop"] .fcard:nth-child(odd):hover{rotate:-1deg}html[data-theme="pop"] .fcard:nth-child(even):hover{rotate:1deg}
html[data-theme="pop"] .fcard::before,html[data-theme="pop"] .qcard::before{background:var(--acc)}
html[data-theme="pop"] .alt .fcard::before{background:var(--acc2)}
html[data-theme="pop"] .alt .fcard:hover,html[data-theme="pop"] .qcard:hover{color:var(--fg)}
html[data-theme="pop"] .fcard:hover .ico,html[data-theme="pop"] .qcard:hover .ico{color:var(--fg)}
html[data-theme="pop"] .qcard .go{background:var(--fg);color:var(--bg)}
html[data-theme="pop"] .hero h1{letter-spacing:-.05em}
html[data-theme="pop"] .hero .tagline{max-width:20ch}
html[data-theme="pop"] .stamp{border-color:var(--fg);box-shadow:4px 4px 0 var(--fg);background:var(--acc2);color:var(--fg)}
html[data-theme="pop"] .hero-stamp text{fill:var(--fg)}
html[data-theme="pop"] .story-stamp{background:#ff4f81;color:#1d1a2b}
html[data-theme="pop"] .stat b{color:var(--fg)}
html[data-theme="pop"] .quote{background:var(--fg);color:var(--bg)}
html[data-theme="pop"] .alt .quote{background:var(--fg);color:var(--alt-bg)}
html[data-theme="pop"] .hb a:hover{transform:translate(-4px,-4px) rotate(-.6deg);box-shadow:10px 10px 0 var(--fg)}
html[data-theme="pop"] .chip{background:var(--card);box-shadow:3px 3px 0 var(--fg);border-color:var(--fg);backdrop-filter:none}
html[data-theme="pop"] .tab-ind{background:var(--acc);border:2px solid var(--fg)}
html[data-theme="pop"] .tab.on{color:var(--fg)}
html[data-theme="pop"] .cta-band{background:var(--acc);color:var(--fg)}
html[data-theme="pop"] .cta-band h2 em{color:var(--bg);background:var(--fg)}
html[data-theme="pop"] .cta-band .eyebrow{background:var(--bg);color:var(--fg)}
html[data-theme="pop"] .cta-band h2{line-height:1.12}
html[data-theme="pop"] .phero{background:var(--bg2)}
html[data-theme="pop"] .quote-band{background:var(--acc);color:var(--fg);border-block:var(--bw) solid var(--fg)}
html[data-theme="pop"] .quote-band em{background:linear-gradient(transparent 60%,#fff 60% 92%,transparent 92%)}
html[data-theme="pop"] .dark2{background:var(--bg2)}
html[data-theme="pop"] .mob{background:var(--acc)}
html[data-theme="pop"] .mob a{color:var(--fg)}
html[data-theme="pop"] .th-opt[aria-checked="true"]{border-color:var(--fg)}
html[data-theme="pop"] .th-btn{border-color:var(--fg)}
html[data-theme="pop"] .go{border:2px solid var(--fg)}
html[data-theme="pop"] .brand svg{stroke:var(--fg);stroke-width:5}
html[data-theme="pop"] .brand svg .vein{stroke:var(--fg);stroke-width:7}
html[data-theme="pop"] .foot-big{-webkit-text-stroke-color:color-mix(in srgb,#ffd23f 40%,transparent)}
html[data-theme="pop"] .pl-leaf{stroke:var(--fg)}

/* ---- ROYAL: gold hairlines, ornaments, arched frames ---- */
html[data-theme="royal"] body{background-image:radial-gradient(ellipse at top,rgba(150,30,62,.14),transparent 60%)}
html[data-theme="royal"] .eyebrow{font-family:var(--font-s);font-size:.95rem;letter-spacing:.3em;font-weight:600;font-style:italic;text-transform:uppercase}
html[data-theme="royal"] .eyebrow::before,html[data-theme="royal"] .sh.center .eyebrow::after{content:"❖";width:auto;height:auto;background:none;font-size:.8rem;font-style:normal}
html[data-theme="royal"] .eyebrow::before{transition:rotate 1s var(--ease)}
html[data-theme="royal"] .eyebrow.in::before{rotate:180deg}
html[data-theme="royal"] .btn{font-family:var(--font-s);font-size:.9rem;font-weight:600;letter-spacing:.22em}
html[data-theme="royal"] .alt .btn{border-color:var(--alt-acc)}
html[data-theme="royal"] .hero h1{font-weight:500;letter-spacing:-.02em}
html[data-theme="royal"] .hero h1 .l2{font-style:italic;font-family:var(--font-s);font-weight:500;letter-spacing:.01em;font-size:1.06em;color:var(--acc);-webkit-text-stroke:0}
html[data-theme="royal"] .phero h1 em{color:var(--acc)}
html[data-theme="royal"] .ha-in>div{border:1px solid var(--acc);outline:1px solid color-mix(in srgb,var(--acc) 55%,transparent);outline-offset:7px}
html[data-theme="royal"] .stack .arch,html[data-theme="royal"] .pk-img{outline:1px solid color-mix(in srgb,var(--acc) 70%,transparent);outline-offset:8px}
html[data-theme="royal"] .stack .a2{border-color:var(--bg);outline:1px solid var(--acc)}
html[data-theme="royal"] .fcard,html[data-theme="royal"] .qcard,html[data-theme="royal"] .tile{background:var(--card)}
html[data-theme="royal"] .alt .fcard,html[data-theme="royal"] .alt .tile,html[data-theme="royal"] .alt .qcard{background:var(--alt-card)}
html[data-theme="royal"] .fcard::after,html[data-theme="royal"] .qcard::after{content:"";position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);border-radius:1px;pointer-events:none;transition:border-color .5s}
html[data-theme="royal"] .fcard:hover::after,html[data-theme="royal"] .qcard:hover::after{border-color:color-mix(in srgb,var(--acc-ink) 40%,transparent)}
html[data-theme="royal"] .ticker{background:var(--bg2);color:var(--acc);border-block:1px solid var(--line)}
html[data-theme="royal"] .ticker span{font-family:var(--font-s);font-style:italic;font-size:1.7rem;font-weight:500}
html[data-theme="royal"] .alt{border-block:1px solid var(--acc)}
html[data-theme="royal"] .stat b,html[data-theme="royal"] .tile b{font-weight:500}
html[data-theme="royal"] .quote{background:var(--bg);color:var(--fg);border:1px solid var(--acc)}
html[data-theme="royal"] .alt .quote{background:var(--fg);color:var(--alt-bg);border:0}
html[data-theme="royal"] .fb{background:#1a0510;color:#f6e9d0;border:1px solid var(--fba)}
html[data-theme="royal"] .fb .btn.solid::before{background:#f6e9d0}
html[data-theme="royal"] .fb textarea{color:#f6e9d0}
html[data-theme="royal"] .fb textarea::placeholder{color:rgba(246,233,208,.5)}
html[data-theme="royal"] .rate button{color:rgba(246,233,208,.25)}
html[data-theme="royal"] .stamp{background:var(--bg);border:1px solid var(--acc);color:var(--acc);outline:1px solid var(--acc);outline-offset:4px}
html[data-theme="royal"] .hero-stamp text{fill:var(--acc)}
html[data-theme="royal"] .alt .story-stamp{color:#8c1d3a;border-color:#8c1d3a;outline-color:#8c1d3a;background:var(--alt-bg)}
html[data-theme="royal"] .plist b{font-weight:600}
html[data-theme="royal"] .quote-band{background:linear-gradient(var(--bg2),var(--bg))}
html[data-theme="royal"] .quote-band .big{font-weight:500}
html[data-theme="royal"] .cta-band h2 em{color:var(--acc)}
html[data-theme="royal"] .hb a,html[data-theme="royal"] .pm-card{border:1px solid color-mix(in srgb,var(--acc) 60%,transparent)}
html[data-theme="royal"] .th-opt[aria-checked="true"]{border-color:var(--acc)}
html[data-theme="royal"] .brand{font-weight:600}
html[data-theme="royal"] .pl-word{font-weight:600}
html[data-theme="royal"] .foot-big{-webkit-text-stroke-color:rgba(212,166,74,.3)}

/* ---- MINT: soft, rounded, glassy, pastel ---- */
html[data-theme="mint"] .alt{margin:0}
html[data-theme="mint"] section.alt{margin-block:-1px}
html[data-theme="mint"] .nav.scrolled .nav-in{box-shadow:0 14px 40px -18px rgba(16,35,26,.25)}
html[data-theme="mint"] .eyebrow{background:color-mix(in srgb,var(--acc) 12%,transparent);padding:.45rem 1rem;border-radius:99px;font-weight:700}
html[data-theme="mint"] .eyebrow::before{width:7px;height:7px;border-radius:50%}
html[data-theme="mint"] .hero h1{letter-spacing:-.045em;font-weight:500}
html[data-theme="mint"] .hero h1 .l2{font-style:italic;font-weight:400;letter-spacing:-.03em}
html[data-theme="mint"] .ha-in>div{border:6px solid #fff;box-shadow:0 30px 60px -24px rgba(16,35,26,.35)}
html[data-theme="mint"] .stack .a2{border-color:var(--alt-bg)}
html[data-theme="mint"] .stack .arch,html[data-theme="mint"] .card-img{box-shadow:var(--soft)}
html[data-theme="mint"] .ticker{background:var(--fg);color:var(--bg);margin:0}
html[data-theme="mint"] .ticker span{font-weight:500}
html[data-theme="mint"] .stamp{background:var(--acc);color:#fff}
html[data-theme="mint"] .hero-stamp text{fill:#fff}
html[data-theme="mint"] .fcard:hover,html[data-theme="mint"] .qcard:hover{box-shadow:0 36px 60px -28px rgba(21,128,75,.5)}
html[data-theme="mint"] .alt .fcard::before,html[data-theme="mint"] .alt .qcard::before{background:var(--alt-fg)}
html[data-theme="mint"] .alt .fcard:hover{color:var(--alt-bg)}
html[data-theme="mint"] .fcard .n{font-weight:500}
html[data-theme="mint"] .stat b,html[data-theme="mint"] .tile b{font-weight:500}
html[data-theme="mint"] .quote{background:var(--fg);color:#f4faf6}
html[data-theme="mint"] .hb a,html[data-theme="mint"] .pm-card,html[data-theme="mint"] .masonry figure{box-shadow:var(--soft)}
html[data-theme="mint"] .cta-band{background:linear-gradient(color-mix(in srgb,var(--bg) 82%,transparent),color-mix(in srgb,var(--bg) 92%,transparent)),url(img/storefront.jpg) center/cover fixed}
html[data-theme="mint"] .quote-band{background:var(--bg2);border-radius:var(--sec-r)}
html[data-theme="mint"] .phero{background:radial-gradient(ellipse at 15% 0,#c6efd6,transparent 55%),radial-gradient(ellipse at 90% 30%,#fde9b8,transparent 50%),var(--bg)}
html[data-theme="mint"] .plist li.np em{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc)}
html[data-theme="mint"] .brand svg{fill:var(--acc)}
html[data-theme="mint"] .brand svg .vein{stroke:var(--bg)}
html[data-theme="mint"] .pl-leaf{stroke:var(--acc)}
html[data-theme="mint"] .mob a{font-weight:500}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .menu,.nav .btn{display:none}.burger{display:block}
  .nav-in{padding-left:1.2rem}
  .nav-r{gap:.3rem}
  .grid2,.origin,.rv-grid,.visit{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .hero-art{max-width:420px;margin:0 auto}
  .feat{grid-template-columns:1fr 1fr}.hb{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:clamp(210px,42vw,300px)}
  .hb .b1{grid-column:span 2;grid-row:span 1}
  .fgrid{grid-template-columns:1fr 1fr}
  .stack{width:100%;max-width:520px;margin:0 auto}
  .pgrid{grid-template-columns:1fr}.mb{position:static}
  .ph{flex-direction:column;align-items:flex-start}.bigbadge{width:104px;height:104px}
  .plist.two{columns:1}
  .tabs{top:76px}
  .qgrid{grid-template-columns:1fr}
  html[data-theme="mint"]{--sec-r:36px}
}
@media (max-width:600px){
  .feat,.fgrid{grid-template-columns:1fr}.hb{grid-template-columns:1fr}.hb .b1{grid-column:auto}
  .hero{padding-top:7.5rem}
  .hero-info{font-size:.62rem}.hero-info span:nth-child(3){display:none}
  .hero-stamp{width:96px;height:96px}
  .items li,.plist li.np{flex-wrap:wrap}
  .wa{width:56px;height:56px;right:16px;bottom:16px}
  .th-lbl{display:none}.th-btn{padding:0 .7rem}
  .brand small{display:none}
  .stack .a2{border-width:5px}
  .tab{padding:.7rem 1rem}
  .btn{white-space:normal;text-align:center;letter-spacing:.14em;padding:.95rem 1.5rem;max-width:100%}
  html[data-theme="royal"] .btn{font-size:.8rem}
  html[data-theme="mint"]{--sec-r:28px}
  html[data-theme="pop"] .btn{box-shadow:3px 3px 0 var(--fg)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal,.js .split .w>span{opacity:1;translate:none;rotate:0deg}.js .wipe{clip-path:none}.js .wipe img{scale:1}
  .ticker-track,.pm-row{animation:none}
}