@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{--bg:#faf9f6;--ink:#252525;--muted:#77746e;--line:#dfddd7;--accent:#a89c8a}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #887459;outline-offset:4px}[hidden]{display:none!important}.skip-link{position:absolute;top:-100px;left:10px;z-index:20;padding:12px;background:var(--ink);color:white}.skip-link:focus{top:10px}.wrap{max-width:1240px;padding:0 42px;margin:auto}.nav{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-size:28px;font-weight:700;letter-spacing:-2px}.logo span,.period{color:var(--accent)}nav{display:flex;gap:38px;font-size:13px}nav a:hover,.text-link:hover,.footer a:hover{color:var(--accent)}.nav-cta{font-size:12px;border:1px solid var(--ink);padding:12px 17px;transition:background .2s,color .2s}.nav-cta:hover{background:var(--ink);color:white}.hero{padding-top:113px;padding-bottom:125px}.eyebrow,.overline,.count{font-size:11px;letter-spacing:2px;font-weight:700}.eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.eyebrow>span:last-child{color:var(--muted)}.dot{width:7px;height:7px;background:var(--accent);border-radius:50%}h1{font-size:clamp(76px,13vw,184px);line-height:.98;letter-spacing:-.09em;margin:43px 0 48px;font-weight:500}em{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.065em;color:var(--accent)}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:24px}.hero-bottom p{max-width:370px;font-size:18px;line-height:1.6;color:var(--muted)}.circle-link{width:62px;height:62px;flex:0 0 62px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:28px;transition:background .2s,color .2s}.circle-link:hover{background:var(--ink);color:white}.work{padding-top:75px;padding-bottom:140px;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px}.section-head h2,.about h2{font-size:clamp(46px,6vw,80px);letter-spacing:-.065em;line-height:1.1;font-weight:500;margin:18px 0 40px}.count{color:var(--muted);padding-bottom:49px;white-space:nowrap}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:35px}.filters button{border:1px solid var(--line);background:transparent;padding:10px 17px;font-size:12px;border-radius:25px;transition:background .2s,color .2s}.filters button.active,.filters button:hover{background:var(--ink);color:white;border-color:var(--ink)}.project-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:55px 25px}.project-card{border:0;background:transparent;padding:0;text-align:left;color:inherit;width:100%;min-width:0}.project-image,.detail-image{aspect-ratio:1.24;background:var(--tile,#eae7e0);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.project-image img,.detail-image img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .5s}.project-art{position:relative;z-index:1;font-size:clamp(26px,4vw,60px);letter-spacing:-.07em;color:white;max-width:80%;text-align:center;font-weight:500;transition:transform .3s}.project-image:after{content:'↗';position:absolute;right:24px;top:20px;font-size:26px;color:white;z-index:2;text-shadow:0 1px 5px #0006}.project-card:hover .project-art,.project-card:hover img{transform:scale(1.045)}.project-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0}.project-title{font-size:21px;font-weight:500}.project-type{font-size:11px;color:var(--muted);text-align:right}.empty-state{color:var(--muted)}.about{background:#eeece6;padding:115px 0}.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px}.about-copy{font-size:clamp(19px,2vw,25px);line-height:1.65;margin:37px 0}.small-muted{color:var(--muted);font-size:13px;line-height:1.7}.skill-list{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 10px}.skill-list span{font-size:11px;padding:9px 12px;border:1px solid #c9c6bf;border-radius:30px}.text-link{display:inline-block;margin-top:30px;padding-bottom:8px;border-bottom:1px solid var(--ink);font-size:14px}.contact{padding-top:135px;padding-bottom:140px}.contact h2{font-size:clamp(55px,8vw,112px);letter-spacing:-.07em;line-height:1.1;font-weight:500;margin:30px 0 50px}.contact-email{font-size:clamp(18px,3vw,30px);border-bottom:1px solid var(--ink);padding-bottom:8px;overflow-wrap:anywhere}.socials{display:flex;gap:24px;flex-wrap:wrap;margin-top:55px;font-size:13px}.socials a:hover{color:var(--accent)}.footer{border-top:1px solid var(--line);padding-top:28px;padding-bottom:35px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}dialog{border:0;padding:0;max-width:740px;max-height:min(88vh,1000px);width:calc(100% - 36px);background:var(--bg);box-shadow:0 30px 100px #0004}dialog::backdrop{background:#171717b0}#dialog-content{padding:52px;max-width:100%}#dialog-content h2{font-size:clamp(32px,5vw,52px);letter-spacing:-.06em;line-height:1.1}#dialog-content p{line-height:1.8;color:var(--muted)}.close{position:sticky;float:right;right:15px;top:8px;border:0;background:var(--bg);font-size:32px;z-index:4;line-height:1;padding:6px 12px}.detail-row{display:flex;gap:20px;justify-content:space-between;border-top:1px solid var(--line);padding:14px 0;font-size:13px}.detail-row span{color:var(--muted);text-align:right}.detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.detail-image{aspect-ratio:4/5}.detail-image:only-child{grid-column:1/-1;aspect-ratio:16/10}.detail-image .project-art{font-size:25px}.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:760px){.wrap{padding-left:22px;padding-right:22px}.nav{height:72px}.nav-cta{display:none}nav{gap:18px}nav a{font-size:12px}.hero{padding-top:85px;padding-bottom:90px}h1{font-size:clamp(67px,15vw,120px)}.hero-bottom p{font-size:15px;max-width:250px}.project-grid,.about-grid{grid-template-columns:1fr}.project-grid{gap:22px}.project-meta{align-items:flex-start}.project-title{font-size:18px}.about{padding:80px 0}.about-grid{gap:10px}.contact{padding-top:90px;padding-bottom:90px}.contact h2{font-size:clamp(48px,10vw,75px)}.section-head h2{font-size:clamp(39px,9vw,52px)}.count{font-size:9px}.work{padding-bottom:85px}.footer{flex-wrap:wrap}#dialog-content{padding:30px 22px}.detail-gallery{grid-template-columns:1fr}.detail-image:only-child{grid-column:auto}}@media(max-width:390px){.wrap{padding-left:16px;padding-right:16px}.logo{font-size:24px}nav{gap:12px}h1{font-size:clamp(59px,15vw,76px)}.eyebrow{font-size:9px}.section-head{align-items:start;flex-direction:column}.count{padding-bottom:20px}.project-meta{flex-direction:column;gap:4px}.project-type{text-align:left}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* VIOX Brand Identity V1.2 — Midnight Black / Champagne Gold / Ivory */
:root { --bg:#0b0b0e; --surface:#141419; --ink:#f5f0e7; --muted:#aaa49d; --line:#35302b; --accent:#d7b77e; --gold:#d7b77e; }
html { background:#0b0b0e; color-scheme:dark; }
body { background:#0b0b0e!important; color:#f5f0e7!important; font-family:Inter,Arial,sans-serif; }
a { color:inherit; }
.nav { position:relative; z-index:3; }
.logo { font-family:Montserrat,Inter,Arial,sans-serif; font-weight:800; letter-spacing:.09em; color:#f5f0e7!important; }
.brand-x,.logo-dot,.period,.hero-ten { color:#d7b77e!important; }
.brand-x { display:inline-block; transform:skew(-9deg); text-shadow:0 0 25px #d7b77e33; }
.nav a:not(.logo):hover, .footer a:hover, .text-link:hover { color:#d7b77e!important; }
.hero { position:relative; }
.hero h1 { font-family:Montserrat,Inter,Arial,sans-serif; letter-spacing:-.075em; line-height:1.06; }
.hero h1 em, .about h2 em, .contact h2 em { color:#d7b77e!important; }
.ambient-glow { position:absolute; right:0; top:110px; width:min(55vw,800px); height:550px; pointer-events:none; background:radial-gradient(ellipse at 70% 30%,#c69a4e16,transparent 65%); }
.brand-divider { display:flex; justify-content:space-between; gap:1rem; padding-top:18px; padding-bottom:18px; border-top:1px solid #6a55384d; border-bottom:1px solid #6a55384d; color:#aaa49d; font-size:10px; letter-spacing:.2em; }
.brand-divider b { color:#d7b77e; }
.overline,.eyebrow,.count { color:#d7b77e!important; letter-spacing:.17em; }
.work,.contact { background:transparent!important; }
.about { background:#141419!important; }
.project-image, .detail-image { border:1px solid #d7b77e24; }
.project-image:not(.has-image),.detail-image:not(.has-image) { background:linear-gradient(145deg,#39332c,#17171c)!important; }
.project-art { color:#e6cf9f!important; letter-spacing:.14em; }
.project-title { color:#f5f0e7!important; }
.project-type,.small-muted,.project-meta .project-type { color:#aaa49d!important; }
.filters button { color:#aaa49d; border-color:#4a4035!important; }
.filters button.active,.filters button:hover { color:#0b0b0e!important; background:#d7b77e!important; border-color:#d7b77e!important; }
.skill-list span { border-color:#67553c!important; color:#e5d7c0!important; }
.circle-link { background:#d7b77e!important; color:#0b0b0e!important; }
.circle-link:hover { background:#f1d7a7!important; }
.contact-email,.socials a,.text-link { color:#d7b77e!important; }
.footer { border-top-color:#544632!important; }
dialog { background:#17171c!important; color:#f5f0e7!important; border:1px solid #6b5737!important; }
dialog::backdrop { background:#000b; }
.close { color:#d7b77e!important; }
:focus-visible { outline:2px solid #d7b77e!important; outline-offset:4px; }
@media (max-width:640px) { .brand-divider {font-size:9px;letter-spacing:.08em} .hero h1 {font-size:clamp(3.6rem,13vw,6rem)} .nav {gap:10px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important} }