@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&family=Teko:wght@500;700&family=Sora:wght@700;800&display=swap');

:root{--bg:#060708;--fg:#f5f5f5;--muted:#bfbfbf;--line:#232427;--accent:#dba958}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--fg)}
header{position:sticky;top:0;background:#060708;border-bottom:1px solid #121316;z-index:20}
nav{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;gap:18px;padding:10px 16px;align-items:center}
.nav-left,.nav-right{display:flex;gap:14px;align-items:center}
nav a{position:relative;color:#d8d8d8;text-decoration:none;opacity:.9;font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:opacity .2s ease,color .2s ease,transform .2s ease}
nav a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
nav a.active,nav a:hover{opacity:1;color:#fff}
nav a:hover::after,nav a.active::after{transform:scaleX(1)}
nav a.active{color:var(--accent)}

.has-submenu .menu-label{position:relative;color:#d8d8d8;opacity:.9;font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:opacity .2s ease,color .2s ease,transform .2s ease;cursor:default}
.has-submenu .menu-label::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.has-submenu:hover .menu-label,.has-submenu .menu-label.active{opacity:1;color:var(--accent)}
.has-submenu:hover .menu-label::after,.has-submenu .menu-label.active::after{transform:scaleX(1)}

.has-submenu{position:relative;display:flex;align-items:center;padding-bottom:10px;margin-bottom:-10px}
.has-submenu .submenu{position:absolute;top:100%;left:0;min-width:170px;padding:8px;border:1px solid #1f2229;border-radius:8px;background:#0a0b0f;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:30}
.has-submenu:hover .submenu,.has-submenu:focus-within .submenu{opacity:1;transform:translateY(0);pointer-events:auto}
.has-submenu .submenu a{display:block;padding:8px 10px;font-size:12px;letter-spacing:.04em;text-transform:none;white-space:nowrap;border-radius:6px}
.has-submenu .submenu a::after{display:none}
.has-submenu .submenu a:hover,.has-submenu .submenu a.active{background:rgba(219,169,88,.14);color:#f3d6a8}

h1,h2{font-family:'Teko','Space Grotesk',Inter,Arial,sans-serif;text-transform:uppercase}
nav a{font-family:Inter,Arial,sans-serif}
h1{font-weight:700;letter-spacing:.03em;line-height:1.02}
h2{font-weight:700;letter-spacing:.02em;line-height:1.08}

main p{font-family:Inter,Arial,sans-serif;font-weight:400;font-size:1.06rem;line-height:1.78;color:#aeb3be;max-width:980px}
.work-wrap h1{font-size:clamp(3.2rem,7vw,5.4rem);margin-bottom:10px;color:#f8f8fb}
.work-wrap h2{font-size:clamp(1.8rem,3.8vw,2.6rem);margin:32px 0 8px;color:#f8f8fb}
.hero h1{font-family:'Space Grotesk',Inter,Arial,sans-serif;font-size:clamp(4rem,11vw,8.6rem);font-weight:700;color:#f8f8fb;text-shadow:0 2px 18px rgba(0,0,0,.35);text-transform:none;letter-spacing:-.02em;line-height:.92}
.nav-pill{border:1px solid #575b62;padding:3px 6px;line-height:1}
.nav-pill.active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(219,169,88,.25) inset;background:rgba(219,169,88,.14);color:#f3d6a8}
.nav-right span{font-size:11px;color:#d0d0d0}
main{max-width:1200px;margin:0 auto;padding:0 0 80px}
.eyebrow{display:inline-block;font-family:Inter,Arial,sans-serif;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#8f96a3;margin-bottom:12px}
.page-intro{max-width:980px;margin:0 0 26px}
.page-intro .title{margin:0 0 8px}
.page-intro .kicker{margin:0;color:#969daa;font-size:1.04rem;max-width:58ch}
.coming-card{margin-top:18px;padding:28px;border:1px solid #1d2026;border-radius:10px;background:linear-gradient(180deg,#0b0c10 0%,#090a0d 100%)}
.coming-card h2{margin:0 0 10px}
.coming-card p{margin:0}
.full-bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.hero{min-height:260px;padding:56px 20px;background:linear-gradient(rgba(14,16,20,.62),rgba(14,16,20,.62)),url('./assets/106047_032de80ea89e4f5e8401d497e0d28d31~mv2.webp') center/cover no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px}
.hero h1{margin:0;position:relative;display:inline-block;overflow:visible}
.hero-name-wrap{display:inline-grid;grid-template-rows:auto auto;row-gap:.16rem;padding:0 .8rem;justify-items:center}
.hero-intro-top{margin:0;justify-self:center;text-align:center;font-family:Inter,Arial,sans-serif;font-size:clamp(.95rem,1.6vw,1.25rem);letter-spacing:.01em;color:#dfe3eb;text-transform:none;line-height:1}
.hero-main-name{position:relative;display:inline-block;font-family:'Sora','Space Grotesk',Inter,Arial,sans-serif;font-size:clamp(4.8rem,16vw,11rem);font-weight:800;line-height:.88;letter-spacing:-.055em;color:#f8f8fb;text-transform:none;margin:0}
.hero-first-name{display:inline-block}
.hero-last-name{position:absolute;left:100%;bottom:.08em;margin-left:.06em;font-family:Inter,Arial,sans-serif;font-size:.22em;letter-spacing:.01em;color:#dfe3eb;text-transform:none;line-height:1;white-space:nowrap}
.hero p{margin:0;color:#c9ccd2;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.hero-meta{margin-top:.7rem;letter-spacing:.16em;font-size:13px;color:#e5e7ec;white-space:nowrap}
.hero .eyebrow{color:#b5bcc8;margin-bottom:6px}
.hero a{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;min-width:220px;height:56px;padding:0 28px;border:1px solid var(--accent);background:rgba(219,169,88,.12);color:#f3d6a8;text-decoration:none;font-size:clamp(.92rem,1.2vw,1.05rem);font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}

/* Hero title animation (Webflow-like subtle entrance + light sweep) */
.hero.in-view h1{animation:heroTitleIn .75s cubic-bezier(.2,.7,.2,1) both}
.hero.in-view p{animation:heroSubIn .65s .18s ease both}
.hero.in-view a{animation:heroSubIn .65s .28s ease both}
.home-feature{padding-top:18px;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.home-feature.full-bleed{width:100vw;position:relative;left:50%;margin-left:-50vw;padding:0}
.home-feature.full-bleed img{width:100vw;height:auto;display:block;background:#060708;margin:0 0 24px}
.home-gallery{display:block;width:100vw;position:relative;left:50%;right:50%;margin:0 0 0 -50vw;padding:0;background:#060708}
.home-gallery img{width:100vw;height:auto;display:block;background:#060708;margin:0 0 24px}
h1{font-size:52px;margin:0}p{color:var(--muted)}
.work-wrap a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(219,169,88,.4)}
.work-wrap a:hover{color:#f3d6a8;border-bottom-color:rgba(243,214,168,.75)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.card{aspect-ratio:4/3;border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted)}
.work-wrap{max-width:1100px;margin:0 auto;padding:44px 20px 0}
.about-wrap{max-width:1200px}
.about-hero{display:grid;grid-template-columns:140px 1fr;gap:28px;align-items:start;margin-bottom:34px}
.about-avatar{width:140px;height:140px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.about-lede{font-size:clamp(2.2rem,6vw,5.4rem);line-height:.96;letter-spacing:.01em;margin:0;color:#f5f7fb}
.about-lede span{display:block;color:#6f7683}
.about-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 0 26px}
.stat-card{border-top:1px solid #1d2026;padding-top:16px}
.stat-card h2{font-size:clamp(2.4rem,6vw,4.8rem);line-height:.9;margin:0 0 8px}
.stat-card p{margin:0;color:#8f96a3;font-size:1rem;line-height:1.45;max-width:34ch}
.about-copy{max-width:980px}
.about-reach{margin-top:28px;padding-top:14px;border-top:1px solid #1d2026}
.about-logos{margin-top:24px}
.logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.logo-tile{min-height:110px;border:1px solid #1f2229;border-radius:8px;background:#07080b;display:grid;place-items:center;padding:14px}
.logo-tile img{max-width:86%;max-height:54px;object-fit:contain;filter:brightness(1.08)}
.logo-tile img.logo-west{max-height:72px;border-radius:999px}
.work-feature{margin:8px 0 16px}
.feature-slider{position:relative;width:100%;overflow:hidden;background:#0a0b0e}
.feature-slider .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s ease;background:#0a0b0e}
.feature-slider .slide.active{opacity:1}
.feature-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;z-index:3;max-width:min(86vw,760px);overflow-x:auto;padding:6px 10px;background:rgba(5,6,9,.24);border:1px solid rgba(255,255,255,.1);border-radius:999px;backdrop-filter:blur(2px)}
.feature-dots .dot{width:24px;height:3px;flex:0 0 auto;border:0;background:rgba(255,255,255,.38);cursor:pointer;opacity:.95;padding:0;border-radius:999px}
.feature-dots .dot.active{background:var(--accent);box-shadow:0 0 8px rgba(219,169,88,.35)}
.work-grid{margin-top:18px;columns:3 280px;column-gap:0}
.work-item{break-inside:avoid;margin:0;cursor:pointer}
.work-item img{width:auto;max-width:100%;height:auto;display:block;border-radius:8px;background:#1a1a1a}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;padding:26px;z-index:40}
.lightbox.open{display:flex}
.lightbox img{max-width:98vw;max-height:98vh;border-radius:10px;z-index:1}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;font-size:56px;cursor:pointer;padding:20px 24px;z-index:10;transition:background .2s}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.3)}
@media(max-width:900px){.hero h1{font-size:clamp(3rem,14vw,4.2rem)}.hero-main-name{font-size:clamp(3.8rem,20vw,6.2rem)}.hero-intro-top{font-size:.95rem}.hero-last-name{font-size:.22em}.work-wrap{padding:28px 16px 0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));}.work-grid{columns:2 170px}.about-hero{grid-template-columns:1fr;gap:16px}.about-avatar{width:96px;height:96px}.about-stats{grid-template-columns:1fr}.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@keyframes heroTitleIn{from{opacity:0;transform:translateY(14px);letter-spacing:.06em;filter:blur(2px)}to{opacity:1;transform:none;letter-spacing:.03em;filter:blur(0)}}
@keyframes heroSubIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* micro-interactions + scroll reveal */
nav a:hover{transform:translateY(-1px)}
.hero a:hover{transform:translateY(-1px);background:rgba(219,169,88,.22);border-color:var(--accent);color:#ffe4bd}
.hero a:active{transform:translateY(0) scale(.99)}
.work-item img{transition:transform .25s ease,box-shadow .25s ease}
.work-item:hover img{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.work-item:active img{transform:scale(.985)}

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;will-change:opacity,transform}
[data-reveal].in-view{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}

/* Brushes subpage */
.brushes-hero{min-height:calc(100vh - 54px);background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.55)),url('./assets/clare-wong-chunli-render-final.jpg') center/cover no-repeat;display:grid;place-items:center;padding:28px}
.brushes-overlay{width:min(980px,92vw);text-align:center;background:rgba(5,6,8,.28);backdrop-filter:blur(2px);padding:32px 20px;border:1px solid rgba(255,255,255,.12);position:relative}
.brushes-overlay h1{margin:0 0 14px;font-family:'Sora','Space Grotesk',Inter,Arial,sans-serif;font-size:clamp(3rem,10vw,7rem);text-transform:none;letter-spacing:-.04em;line-height:.9}
.brushes-overlay p{margin:0 auto 18px;max-width:48ch;color:#eef0f4;font-size:1.05rem;line-height:1.6}
.brushes-form{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:760px;margin:0 auto}
.brushes-form input{height:52px;padding:0 16px;background:rgba(0,0,0,.72);border:1px solid #2a2f38;color:#f4f6fb;font-size:1rem}
.brushes-form button{height:52px;padding:0 24px;border:1px solid var(--accent);background:rgba(219,169,88,.22);color:#f3d6a8;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.brushes-form button:hover{background:rgba(219,169,88,.32)}
.brushes-back{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#e3e6ec;text-decoration:none;font-family:'Space Grotesk',Inter,Arial,sans-serif;font-weight:600;letter-spacing:.01em;position:relative;padding-bottom:4px}
.brushes-back .arrow{display:inline-block;font-size:1.05em;transform:translateX(0) rotate(0deg);transition:transform .22s ease,color .22s ease;color:var(--accent)}
.brushes-back::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(227,230,236,.45);transform:scaleX(1);transform-origin:left;transition:background .22s ease,transform .22s ease}
.brushes-back:hover{color:#f5f7fb}
.brushes-back:hover .arrow{transform:translateX(2px) rotate(0deg);color:#f3d6a8}
.brushes-back:hover::after{background:rgba(243,214,168,.8);transform:scaleX(1)}
@media(max-width:700px){.brushes-form{grid-template-columns:1fr}.brushes-form button{width:100%}}