:root{--bg:#000;--fg:#f5f5f7;--dim:#86868b;--halo:32,76,33;--accent:18,230,150;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:-apple-system,"SF Pro Display","Helvetica Neue",Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:3px}
nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px max(22px,5vw);background:rgba(0,0,0,.55);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);font-size:13px;letter-spacing:.01em}
nav div a{margin-left:28px;color:var(--dim);transition:color .3s}nav div a:hover{color:var(--fg)}#brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.16em}#brand img{height:34px;width:auto;filter:drop-shadow(0 0 10px rgba(var(--halo),.35));transition:filter .4s}#brand:hover img{filter:drop-shadow(0 0 14px rgba(var(--halo),.8))}
.hero{min-height:100svh;display:grid;place-content:center;text-align:center;position:relative;padding:0 6vw;overflow:hidden}
.glow{position:absolute;left:50%;top:50%;width:80vmax;height:80vmax;translate:-50% -50%;background:radial-gradient(closest-side,rgba(var(--halo),.38),rgba(var(--halo),.08) 45%,transparent 70%);filter:blur(40px);opacity:0;animation:bloom 2.6s .2s var(--ease) forwards;transition:transform .6s var(--ease)}
@keyframes bloom{to{opacity:1}}
h1{position:relative;font-size:clamp(48px,11vw,150px);line-height:.98;font-weight:700;letter-spacing:-.045em}
h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
h1 .w i{display:inline-block;font-style:normal;transform:translateY(110%);animation:up 1.4s var(--ease) forwards}
@keyframes up{to{transform:none}}
.hero p{position:relative;margin-top:22px;font-size:clamp(17px,2.2vw,28px);color:var(--dim);opacity:0;animation:fade 1.6s 1s forwards}
.cue{position:absolute;bottom:34px;left:50%;translate:-50%;font-size:12px;color:var(--dim);opacity:0;animation:fade 1.6s 1.8s forwards}
.cue::after{content:"";display:block;width:1px;height:38px;margin:10px auto 0;background:linear-gradient(var(--dim),transparent);animation:drip 2s infinite}
@keyframes fade{to{opacity:1}}@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.panel{position:relative;height:190vh}
.stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.frame{position:relative;width:calc(62vw + var(--p,0)*38vw);height:calc(56svh + var(--p,0)*44svh);border-radius:calc(28px - var(--p,0)*28px);overflow:hidden;cursor:pointer;box-shadow:0 0 calc(var(--p,0)*0px) 0 rgba(var(--halo),.5),0 40px 120px -30px rgba(var(--halo),calc(.35 - var(--p,0)*.35));background:#111}
.frame img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.25 - var(--p,0)*.2)) translateY(calc((1 - var(--p,0))*40px));filter:brightness(calc(.55 + var(--p,0)*.45))}
.cap{position:absolute;left:max(22px,5vw);bottom:max(26px,6vh);right:22px;pointer-events:none;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.cap h2{font-size:clamp(34px,6.5vw,92px);font-weight:700;letter-spacing:-.04em;line-height:1}
.cap p{margin-top:10px;font-size:clamp(14px,1.6vw,20px);opacity:.8}
.cap b{display:inline-block;margin-top:22px;padding:11px 22px;border-radius:99px;background:rgba(255,255,255,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:15px;font-weight:500;pointer-events:auto;transition:background .3s}
.frame:hover .cap b{background:rgba(255,255,255,.3)}
.about{min-height:80svh;display:grid;place-items:center;padding:20vh 8vw}
.about p{max-width:22em;font-size:clamp(26px,4.4vw,60px);font-weight:600;letter-spacing:-.03em;line-height:1.12;color:var(--dim)}
footer{text-align:center;padding:16vh 6vw 12vh}footer h2{font-size:clamp(34px,7vw,96px);letter-spacing:-.045em;line-height:1}
footer p{margin-top:34px;display:flex;gap:30px;justify-content:center;flex-wrap:wrap;color:var(--dim)}footer p a{transition:color .3s}footer p a:hover{color:rgb(var(--accent))}
.reveal{opacity:0;transform:translateY(40px);filter:blur(8px);transition:all 1.3s var(--ease)}.reveal.in{opacity:1;transform:none;filter:none}
#gallery{position:fixed;inset:0;z-index:40;background:#000;overflow-y:auto;visibility:hidden;clip-path:inset(50% 50% 50% 50% round 28px);transition:clip-path .9s var(--ease),visibility 0s .9s;overscroll-behavior:contain}
#gallery.open{visibility:visible;clip-path:inset(0 round 0);transition:clip-path .9s var(--ease)}
.g-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;padding:calc(22px + env(safe-area-inset-top,0px)) max(22px,4vw) 14px;background:linear-gradient(#000 70%,transparent)}
.g-bar h2{font-size:clamp(30px,5vw,64px);letter-spacing:-.04em;line-height:1}#gCount{color:var(--dim);font-size:14px}
#gClose,#lbClose{padding:9px 18px;border-radius:99px;background:rgba(255,255,255,.14);font-size:14px;transition:background .3s}#gClose:hover{background:rgba(255,255,255,.28)}
.tabs{display:flex;gap:8px;padding:0 max(22px,4vw) 18px;overflow-x:auto;scrollbar-width:none}
.tabs button{flex:none;padding:8px 18px;border-radius:99px;font-size:14px;color:var(--dim);border:1px solid #2a2a2c;transition:all .3s}
.tabs button.on{background:var(--fg);color:#000;border-color:var(--fg)}
.mason{columns:3 280px;column-gap:10px;padding:0 max(22px,4vw) 10vh}
.mason figure{break-inside:avoid;margin-bottom:10px;border-radius:12px;overflow:hidden;cursor:zoom-in;background:#111;opacity:0;transform:translateY(60px) scale(.96);transition:opacity 1s var(--ease),transform 1s var(--ease),box-shadow .5s}
.mason figure.in{opacity:1;transform:none}.mason figure:hover{box-shadow:0 0 60px rgba(var(--halo),.45)}
.mason img,.mason video{display:block;width:100%;height:auto;transition:transform 1.2s var(--ease)}.mason figure:hover img,.mason figure:hover video{transform:scale(1.04)}
/* Natural photo proportions, with larger curated highlights in each cluster. */
#gGrid.mason,#fGrid.mason{--photo-columns:4;--photo-gap:12px;columns:auto;display:grid;gap:clamp(48px,7vw,96px);align-content:start}
#gGrid.mason .photo-group{min-width:0}
#gGrid.mason .photo-grid,#fGrid.mason{display:grid;grid-template-columns:repeat(var(--photo-columns),minmax(0,1fr));grid-auto-rows:1px;gap:var(--photo-gap);align-items:start}
#gGrid.mason figure,#fGrid.mason figure{margin:0;min-width:0;aspect-ratio:auto}
#gGrid.mason figure.highlight,#fGrid.mason figure.highlight{grid-column:span 2}
#gGrid.mason img,#gGrid.mason video,#fGrid.mason img,#fGrid.mason video{display:block;width:100%;height:auto;object-fit:contain;transform:none}
@media(max-width:1000px){#gGrid.mason,#fGrid.mason{--photo-columns:3}}
@media(max-width:700px){#gGrid.mason,#fGrid.mason{--photo-columns:2;--photo-gap:8px;padding-left:16px;padding-right:16px}#gGrid.mason figure,#fGrid.mason figure{border-radius:8px}}
#lb{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.94);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
#lb.open{opacity:1;visibility:visible;transition:opacity .5s}
#lbVid{display:none;max-width:92vw;max-height:86svh;border-radius:6px;box-shadow:0 0 140px rgba(var(--halo),.28)}
#lbImg{max-width:92vw;max-height:86svh;object-fit:contain;border-radius:6px;box-shadow:0 0 140px rgba(var(--halo),.28);transform:scale(.94);transition:transform .8s var(--ease),opacity .3s}#lb.open #lbImg{transform:none}
#lbPrev,#lbNext{position:absolute;top:50%;translate:0 -50%;font-size:54px;padding:20px;color:var(--dim);transition:color .3s}#lbPrev{left:1vw}#lbNext{right:1vw}#lbPrev:hover,#lbNext:hover{color:#fff}
#lbClose{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:20px}#lbCap{position:absolute;bottom:22px;color:var(--dim);font-size:13px}
@media(max-width:700px){nav div a{margin-left:16px}.frame{width:calc(88vw + var(--p,0)*12vw)}#lbPrev,#lbNext{font-size:36px;padding:10px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important}.panel{height:auto}.stick{position:static;height:auto;padding:4vh 0}.frame{--p:1!important}.reveal{opacity:1;transform:none;filter:none}}
#lbYt{display:none;width:min(92vw,calc(86svh*16/9));aspect-ratio:16/9;border:0;border-radius:8px;box-shadow:0 0 140px rgba(var(--halo),.28)}
.mason figure{position:relative}.mason figure.yt img{aspect-ratio:16/9;object-fit:cover}
.mason figure.yt::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;translate:-50% -50%;border-radius:50%;background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/60% no-repeat;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .6s var(--ease),background-color .3s}
.mason figure.yt:hover::after{transform:scale(1.15);background-color:rgba(var(--halo),.8)}

.slides{position:absolute;inset:0}.slides::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.15) 40%,#000)}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity 2.2s ease,transform 8s linear}.slides img.on{opacity:.6;transform:scale(1)}
.head{padding:0 max(22px,4vw) 6vh}.head h2{font-size:clamp(34px,7vw,96px);letter-spacing:-.045em;line-height:1}.head p{color:var(--dim);margin-top:14px;font-size:clamp(16px,1.8vw,22px)}
#featured{padding:16vh 0 4vh}#work{padding-top:12vh}#work .head{padding-bottom:2vh}
.about-link{display:inline-block;margin-top:40px;font-size:18px;color:var(--fg);border-bottom:1px solid #444;padding-bottom:4px;transition:color .3s,border-color .3s}.about-link:hover{color:rgb(var(--accent));border-color:rgb(var(--accent))}
nav div a.on{color:var(--fg)}
.ab{max-width:1100px;margin:0 auto;padding:22vh max(22px,5vw) 6vh}
.ab h1{font-size:clamp(40px,8vw,112px);line-height:1;letter-spacing:-.045em}
.ab-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:6vw;margin-top:9vh;align-items:start}.ab-grid.solo{grid-template-columns:1fr;max-width:40em}
.ab-grid p{font-size:clamp(19px,2.2vw,28px);line-height:1.4;color:var(--dim);margin-bottom:1.2em;letter-spacing:-.01em}.ab-grid p:first-child{color:var(--fg)}
.ab-grid img{width:100%;border-radius:20px;box-shadow:0 30px 100px -30px rgba(var(--halo),.45)}
.stats{display:flex;gap:6vw;flex-wrap:wrap;margin:10vh 0 0;padding-top:5vh;border-top:1px solid #222}.stats b{display:block;font-size:clamp(40px,7vw,88px);letter-spacing:-.04em;line-height:1}.stats span{color:var(--dim);font-size:15px}
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;margin-top:12vh;background:#222;border:1px solid #222;border-radius:18px;overflow:hidden}.svc div{background:#000;padding:34px 28px}.svc h3{font-size:22px;letter-spacing:-.02em}.svc p{margin-top:8px;color:var(--dim);font-size:15px;line-height:1.45}
@media(max-width:800px){.ab-grid{grid-template-columns:1fr}}
.hero p{color:#d2d2d7;text-shadow:0 2px 24px rgba(0,0,0,.7)}
/* ---- About page ---- */
html[lang=en] [data-l=th],html[lang=th] [data-l=en]{display:none!important}
html[lang=th] body{font-family:-apple-system,"Thonburi","Sarabun","Noto Sans Thai",sans-serif}
#lang{margin-left:28px;padding:5px 13px;border:1px solid #444;border-radius:99px;font-size:12px;color:var(--fg);transition:all .3s}#lang:hover{border-color:rgb(var(--accent));color:rgb(var(--accent))}
.sec{padding:14vh max(22px,5vw);border-top:1px solid #161616;max-width:1240px;margin:0 auto}
.sec h2{font-size:clamp(30px,5vw,64px);letter-spacing:-.04em;line-height:1.02;margin-bottom:6vh}.sec h2 small{display:block;font-size:.4em;letter-spacing:.14em;color:var(--dim);font-weight:500;margin-bottom:14px;text-transform:uppercase}
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:6vw;align-items:center}.split.rev{grid-template-columns:1fr 1.25fr}
.cut{position:relative;display:grid;place-items:end center;min-height:300px}
.cut::before{content:"";position:absolute;inset:8% -10% 0;background:radial-gradient(closest-side,rgba(var(--halo),.45),rgba(var(--halo),.1) 55%,transparent 75%);filter:blur(30px)}
.cut img{position:relative;max-width:100%;max-height:70svh;width:auto;filter:drop-shadow(0 20px 50px rgba(0,0,0,.6))}
.a-hero{min-height:100svh;display:grid;align-items:end;padding:14vh max(22px,5vw) 0;max-width:1240px;margin:0 auto}
.a-hero h1{font-size:clamp(46px,12vw,170px);line-height:.95;letter-spacing:-.05em}
.a-hero .split{align-items:end;margin-top:3vh}
.lead{font-size:clamp(20px,2.4vw,32px);line-height:1.32;letter-spacing:-.015em}.lead b{font-weight:600}
.lead+.lead,.muted{color:var(--dim);margin-top:1em}.muted{font-size:clamp(16px,1.6vw,20px);line-height:1.5}
.xp{list-style:none;padding:0;margin:0}.xp li{display:grid;grid-template-columns:90px 1fr;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid #1d1d1d}
.xp b{font-size:clamp(40px,5vw,68px);letter-spacing:-.04em;line-height:1}.xp b i{font-style:normal;font-size:.3em;color:var(--dim);letter-spacing:0;margin-left:4px}.xp span{font-size:clamp(16px,1.7vw,22px)}.xp em{display:block;color:var(--dim);font-style:normal;font-size:.8em;margin-top:3px}
.spec{margin-top:5vh;display:grid;gap:26px}.spec div{border-left:2px solid rgb(var(--accent));padding-left:20px}.spec h3{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500}.spec p{font-size:clamp(20px,2.2vw,30px);margin-top:6px;letter-spacing:-.02em}
.rates{width:100%;border-collapse:collapse}.rates th{text-align:left;font-weight:500;color:var(--dim);font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:0 0 16px}.rates td{padding:20px 0;border-top:1px solid #1d1d1d;font-size:clamp(22px,3vw,42px);letter-spacing:-.03em}.rates td:first-child{font-size:clamp(15px,1.5vw,19px);color:var(--dim);letter-spacing:0}
.note{margin-top:28px;color:var(--dim);font-size:14px;line-height:1.55}
.award{display:grid;grid-template-columns:1.3fr 1fr;gap:5vw;align-items:start}.award p{color:#c7c7cc;font-size:clamp(16px,1.5vw,19px);line-height:1.6;margin-bottom:1.1em}
.award .pics{display:grid;gap:14px}.award .pics img{width:100%;border-radius:16px;box-shadow:0 30px 90px -30px rgba(var(--halo),.5)}
.contact-list{display:grid;gap:30px;margin-top:2vh}.contact-list small{display:block;font-size:13px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-bottom:6px}.contact-list a{font-size:clamp(22px,3.4vw,44px);letter-spacing:-.03em;transition:color .3s}.contact-list a:hover{color:rgb(var(--accent))}
@media(max-width:800px){.split,.split.rev,.award{grid-template-columns:1fr}.cut img{max-height:55svh}.xp li{grid-template-columns:70px 1fr}.a-hero{min-height:auto;padding-top:16vh}}
html,body{overflow-x:clip}.sec,.a-hero{overflow-x:clip}.cut::before{inset:8% 0 0}
.lead+.lead{color:var(--fg);margin-top:0}
#videos{padding:12vh 0 0}#videos .head{padding-bottom:4vh}
.vgrid{columns:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}.vgrid figure{margin:0}
.tabs button small{opacity:.55;margin-left:4px;font-size:12px}
@media(max-width:700px){.vgrid{grid-template-columns:1fr}}
/* ---- shared bits ---- */
.eyebrow{display:block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--accent));margin-bottom:16px;font-weight:500;text-shadow:0 0 18px rgba(var(--halo),.55)}
.cta{display:flex;gap:28px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:44px}.cta .about-link{margin-top:0}
.btn{display:inline-block;padding:15px 30px;border-radius:99px;background:rgb(var(--accent));color:#00140c;font-weight:600;font-size:17px;box-shadow:0 0 0 rgba(var(--halo),0),0 10px 40px -10px rgba(var(--halo),.7);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(var(--halo),.55),0 14px 50px -10px rgba(var(--halo),.9)}
.sec.next .cta{justify-content:flex-start}
/* ---- video collections (homepage) ---- */
#videos{padding:16vh 0 4vh}#videos .head{padding-bottom:6vh}
.vcols{display:grid;gap:28px;padding:0 max(22px,4vw)}
.vcol{position:relative;aspect-ratio:2.2/1;min-height:420px;border-radius:26px;overflow:hidden;cursor:pointer;background:#050807;isolation:isolate;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 120px -50px rgba(var(--halo),.5);transition:box-shadow .8s var(--ease)}
.vcol:hover,.vcol:focus-visible{box-shadow:0 0 0 1px rgba(var(--halo),.55),0 0 90px -10px rgba(var(--halo),.45),0 50px 140px -40px rgba(var(--halo),.7)}
.vc-media{position:absolute;inset:0;z-index:-1}.vc-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);filter:brightness(.62) saturate(1.05);transition:transform 2.4s var(--ease),filter 1s}
.vcol:hover .vc-media img{transform:scale(1);filter:brightness(.78)}
.vc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.35) 55%,rgba(0,0,0,.1)),linear-gradient(transparent 55%,rgba(0,0,0,.7))}
.vc-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 80% at 0% 100%,rgba(var(--halo),.28),transparent 70%);opacity:.7;transition:opacity 1s}.vcol:hover .vc-media::before{opacity:1}
.vc-info{position:absolute;left:clamp(24px,4vw,60px);bottom:clamp(24px,5vh,56px);right:40%;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.vc-no{font-size:13px;letter-spacing:.2em;color:rgb(var(--accent));font-weight:600}
.vc-info h3{font-size:clamp(44px,7.5vw,112px);font-weight:700;letter-spacing:-.045em;line-height:.95;margin-top:10px}
.vc-info p{margin-top:12px;color:#d2d2d7;font-size:clamp(15px,1.5vw,19px)}
.vc-info ul{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.vc-info li{padding:7px 14px;border-radius:99px;font-size:13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.vc-info li small{color:rgb(var(--accent));margin-left:4px}
.vc-play{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:10px 22px 10px 10px;border-radius:99px;background:rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:15px;font-weight:500;transition:background .4s}
.vc-play::before{content:"";width:34px;height:34px;border-radius:50%;background:rgb(var(--accent)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300140c' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/62% no-repeat;box-shadow:0 0 24px rgba(var(--halo),.8)}
.vcol:hover .vc-play{background:rgba(255,255,255,.24)}
.vc-strip{position:absolute;right:clamp(24px,4vw,60px);top:50%;translate:0 -50%;display:grid;gap:12px;width:min(26%,320px)}
.vc-strip span{display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 20px 50px -15px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.12);transform:translateX(30px) rotate(0deg);opacity:.85;transition:transform 1s var(--ease),opacity .8s,box-shadow .8s}
.vc-strip span:nth-child(2){transition-delay:.06s}.vc-strip span:nth-child(3){transition-delay:.12s}
.vc-strip img{width:100%;height:100%;object-fit:cover}
.vcol:hover .vc-strip span{transform:none;opacity:1;box-shadow:0 20px 50px -15px rgba(0,0,0,.9),0 0 0 1px rgba(var(--halo),.45)}
/* ---- video gallery overlay ---- */
.films{padding:0 max(22px,4vw) 10vh}
.vgroup+.vgroup{margin-top:9vh}
.vg-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid #1c1c1e}
.vg-head h3{font-size:clamp(22px,3vw,38px);letter-spacing:-.03em}.vg-head span{color:var(--dim);font-size:14px;white-space:nowrap}
.vg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:26px 18px}
.vc{margin:0;cursor:pointer;display:flex;flex-direction:column;opacity:0;transform:translateY(50px) scale(.97);transition:opacity 1s var(--ease),transform 1s var(--ease)}.vc.in{opacity:1;transform:none}
.vc .th{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .6s}
.vc .th img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:brightness(.88)}
.vc .th::after{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;translate:-50% -50%;border-radius:50%;background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/58% no-repeat;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .6s var(--ease),background-color .3s}
.vc:hover .th{box-shadow:0 0 0 1px rgba(var(--halo),.6),0 0 60px rgba(var(--halo),.4)}.vc:hover .th img{transform:scale(1.05);filter:none}.vc:hover .th::after{transform:scale(1.15);background-color:rgba(var(--halo),.85)}
.vc figcaption{display:flex;gap:14px;align-items:baseline;padding:14px 4px 0}.vc figcaption span{font-size:12px;letter-spacing:.14em;color:rgb(var(--accent));font-variant-numeric:tabular-nums}.vc figcaption b{font-weight:500;font-size:16px;line-height:1.35;letter-spacing:-.01em}
@media(min-width:900px){.vg-grid.has-lead{grid-template-columns:repeat(3,1fr)}.vc.lead{grid-column:span 2;grid-row:span 2}.vc.lead .th{flex:1;aspect-ratio:auto;min-height:0}.vc.lead .th::after{width:84px;height:84px}.vc.lead figcaption b{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em}}
#gallery.vmode .tabs{padding-bottom:30px}
/* ---- rates & contact page ---- */
.c-hero{position:relative;min-height:72svh;display:grid;align-content:end;padding:22vh max(22px,5vw) 8vh;max-width:1240px;margin:0 auto}
.c-hero .glow{left:15%;top:70%;width:70vmax;height:70vmax}
.c-hero h1{font-size:clamp(46px,10vw,150px);line-height:.95;letter-spacing:-.05em}
.c-hero .lead{position:relative;max-width:30em;margin-top:4vh;color:#d2d2d7}
#contact.sec .about-link{margin-top:6vh}
/* nav on small screens */
@media(max-width:700px){
  nav{padding:12px 16px;font-size:12px}nav div a{margin-left:13px}#lang{margin-left:12px;padding:4px 10px}
  #brand span,nav .lg{display:none}#brand img{height:30px}
  .vcol{aspect-ratio:auto;min-height:0;height:min(120vw,560px)}
  .vc-media::after{background:linear-gradient(transparent 20%,rgba(0,0,0,.92))}
  .vc-info{right:24px}.vc-strip{display:none}
}
@media(prefers-reduced-motion:reduce){.vc{opacity:1;transform:none}}
/* ---- gold lining ---- */
:root{--gold:212,175,95;--gold-line:linear-gradient(90deg,transparent,rgb(var(--gold)),transparent)}
nav{border-bottom:1px solid rgba(var(--gold),.22)}
#lang{border-color:rgba(var(--gold),.45)}
.cue::after{background:linear-gradient(rgb(var(--gold)),transparent)}
.head h2::after,footer h2::before{content:"";display:block;width:72px;height:1px;background:var(--gold-line)}
.head h2::after{margin-top:22px;background:linear-gradient(90deg,rgb(var(--gold)),transparent)}
footer h2::before{margin:0 auto 6vh}
.sec{border-top-color:rgba(var(--gold),.2)}
.stats{border-top-color:rgba(var(--gold),.3)}
.xp li,.rates td{border-color:rgba(var(--gold),.16)}
.vg-head{border-bottom-color:rgba(var(--gold),.25)}
.svc{background:rgba(var(--gold),.22);border-color:rgba(var(--gold),.3)}
.spec div{border-left-color:rgb(var(--gold))}
.tabs button{border-color:rgba(var(--gold),.25)}.tabs button:hover{border-color:rgba(var(--gold),.6);color:var(--fg)}.tabs button.on{border-color:rgb(var(--gold))}
.about-link{border-bottom-color:rgba(var(--gold),.55)}
.vc-info li{border-color:rgba(var(--gold),.3)}
.frame{box-shadow:0 0 0 1px rgba(var(--gold),calc(.5 - var(--p,0)*.5)),0 40px 120px -30px rgba(var(--halo),calc(.35 - var(--p,0)*.35))}
.mason figure{box-shadow:0 0 0 1px rgba(var(--gold),.14)}.mason figure:hover{box-shadow:0 0 0 1px rgba(var(--gold),.6),0 0 60px rgba(var(--halo),.45)}
.vcol{box-shadow:0 0 0 1px rgba(var(--gold),.25),0 40px 120px -50px rgba(var(--halo),.5)}
.vcol:hover,.vcol:focus-visible{box-shadow:0 0 0 1px rgba(var(--gold),.7),0 0 90px -10px rgba(var(--halo),.45),0 50px 140px -40px rgba(var(--halo),.7)}
.vcol:hover .vc-strip span{box-shadow:0 20px 50px -15px rgba(0,0,0,.9),0 0 0 1px rgba(var(--gold),.55)}
.vc .th{box-shadow:0 0 0 1px rgba(var(--gold),.14)}.vc:hover .th{box-shadow:0 0 0 1px rgba(var(--gold),.65),0 0 60px rgba(var(--halo),.4)}
#lbImg,#lbVid,#lbYt{box-shadow:0 0 0 1px rgba(var(--gold),.35),0 0 140px rgba(var(--halo),.28)}
.ab-grid img{box-shadow:0 0 0 1px rgba(var(--gold),.3),0 30px 100px -30px rgba(var(--halo),.45)}
.award .pics img{box-shadow:0 0 0 1px rgba(var(--gold),.3),0 30px 90px -30px rgba(var(--halo),.5)}
.btn{box-shadow:inset 0 0 0 1px rgba(var(--gold),.9),0 0 0 3px rgba(var(--gold),.18),0 10px 40px -10px rgba(var(--halo),.7)}
.btn:hover{box-shadow:inset 0 0 0 1px rgb(var(--gold)),0 0 0 4px rgba(var(--gold),.3),0 0 50px rgba(var(--halo),.55),0 14px 50px -10px rgba(var(--halo),.9)}
/* ---- gold paint smear (fixed backdrop behind all content) ---- */
body{background:transparent}
body::before{content:"";position:fixed;inset:-6vh -6vw;z-index:-1;pointer-events:none;background:url("img/gold-smear.svg") center/cover no-repeat;opacity:.5;filter:saturate(.9)}
.slides{-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.slides::after{background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.15) 40%,rgba(0,0,0,.85))}
@media(max-aspect-ratio:3/4){body::before{background-size:auto 70%;background-position:38% 55%}}
/* home page: keep the gold smear, but not behind the hero — the hero stays solid black */
body.home .hero{background:var(--bg)}
body.home .slides{-webkit-mask-image:none;mask-image:none}
body.home .slides::after{background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.15) 40%,#000)}
body.home #featured{position:relative;isolation:isolate}
body.home #featured::before{content:"";position:absolute;inset:0 0 auto;height:40vh;z-index:-1;pointer-events:none;background:linear-gradient(var(--bg),transparent)}