@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
:root{--black:#0a0b0d;--cream:#f2efe7;--paper:#fbfaf6;--ink:#111317;--muted:#777a80;--gold:#c9a45c;--line:rgba(17,19,23,.14);--darkline:rgba(255,255,255,.13);--ease:cubic-bezier(.22,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.5;overflow-x:hidden}body.dark{background:var(--black);color:#fff}a{text-decoration:none;color:inherit}img{display:block;width:100%}button{font:inherit}
.loader{position:fixed;inset:0;background:var(--black);z-index:9999;display:grid;place-items:center;transition:.8s}.loader.hide{opacity:0;visibility:hidden}.loader-mark{font:700 44px "Manrope";letter-spacing:-4px;color:#fff}.loader-mark span{color:var(--gold)}
.cursor,.cursor-dot{position:fixed;pointer-events:none;z-index:10000;transform:translate(-50%,-50%)}.cursor{width:30px;height:30px;border:1px solid rgba(201,164,92,.8);border-radius:50%;transition:width .2s,height .2s}.cursor-dot{width:4px;height:4px;background:var(--gold);border-radius:50%}
.nav{position:fixed;z-index:500;top:0;left:0;right:0;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 4.2vw;transition:.35s;background:transparent;color:#fff}.nav.scrolled{background:rgba(10,11,13,.86);backdrop-filter:blur(18px);height:68px;border-bottom:1px solid var(--darkline)}.brand{display:flex;align-items:center;gap:12px}.brand .vj{font:700 35px/.8 "Manrope";letter-spacing:-4px;color:var(--gold)}.brand .name{font:600 13px "Manrope";letter-spacing:4px}.brand small{display:block;font:500 8px "DM Sans";letter-spacing:3px;color:var(--gold);margin-top:5px}.links{display:flex;align-items:center;gap:26px;font-size:12px}.links a{position:relative;padding:7px 0;color:rgba(255,255,255,.84)}.links a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:.3s}.links a:hover:after,.links a.active:after{right:0}.links a:hover{color:#fff}.nav-cta{padding:10px 17px!important;background:#fff;color:#111!important;border-radius:999px;font-weight:600}.nav-cta:after{display:none}.menu{display:none;border:1px solid rgba(215,181,107,.55);background:rgba(8,9,12,.72);color:#fff;width:44px;height:44px;border-radius:50%;font-size:0;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 20px rgba(215,181,107,.08);position:relative;z-index:602}
.menu:before,.menu:after,.menu span{content:"";position:absolute;width:18px;height:1.5px;background:#d7b56b;left:50%;transform:translateX(-50%);transition:.25s}
.menu:before{top:14px}.menu span{top:21px}.menu:after{top:28px}
.nav.menu-open .menu:before{top:21px;transform:translateX(-50%) rotate(45deg)}
.nav.menu-open .menu span{opacity:0}
.nav.menu-open .menu:after{top:21px;transform:translateX(-50%) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:590;background:rgba(3,4,6,.97);backdrop-filter:blur(22px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:.3s}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto}
.mobile-menu-inner{width:min(520px,88vw);padding:100px 0 40px}
.mobile-menu a{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.09);color:#fff;text-decoration:none;font:500 20px "Manrope";letter-spacing:-.3px}
.mobile-menu a span{color:#d7b56b;font-size:13px}
.mobile-menu .mobile-cta{margin-top:24px;border:1px solid #d7b56b;border-radius:999px;padding:14px 20px;justify-content:center;color:#fff}

.hero{min-height:100svh;position:relative;background:#080a0d;color:#fff;overflow:hidden;display:grid;grid-template-columns:52% 48%;align-items:end}.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 65% 42%,rgba(36,65,91,.7),transparent 31%),linear-gradient(90deg,#07090c 0%,#0a121b 62%,#06080b 100%)}.hero-grid{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to right,black,transparent 88%)}.hero-copy{position:relative;z-index:5;padding:155px 0 90px 6.2vw;max-width:790px}.eyebrow{font-size:10px;letter-spacing:3.2px;text-transform:uppercase;font-weight:600;color:var(--gold)}.hero h1{font:600 clamp(72px,9vw,142px)/.78 "Manrope";letter-spacing:-8px;margin:22px 0 28px}.hero h1 span{color:var(--gold)}.hero-sub{font-size:14px;letter-spacing:1.8px;text-transform:uppercase;color:#e6e7e9}.hero-lead{font-size:18px;line-height:1.55;color:#bfc6ce;max-width:620px;margin:26px 0 30px}.buttons{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:12px;padding:13px 21px;border-radius:999px;background:#fff;color:#111;font-weight:600;transition:.3s}.btn:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(255,255,255,.1)}.btn.dark{background:#12161b;color:#fff;border:1px solid rgba(255,255,255,.3)}.btn.gold{background:var(--gold);color:#111}.hero-person{position:relative;z-index:4;height:100%;min-height:100svh;display:flex;align-items:flex-end;justify-content:center}.hero-person img{height:92%;width:min(680px,48vw);object-fit:cover;object-position:center top;filter:contrast(1.06) saturate(.9);mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);transform:translateY(2%)}.ring{position:absolute;width:560px;height:560px;border:1px solid rgba(201,164,92,.28);border-radius:50%;right:2%;top:17%;animation:floatRing 12s ease-in-out infinite}.ring:before{content:"";position:absolute;inset:35px;border:1px solid rgba(255,255,255,.08);border-radius:50%}@keyframes floatRing{50%{transform:rotate(8deg) scale(1.03)}}.hero-words{position:absolute;right:4%;top:29%;z-index:6;font-size:11px;line-height:2.05;letter-spacing:4px;color:#8793a0}.hero-words span{color:var(--gold)}.hero-quote{position:absolute;right:4%;bottom:14%;width:250px;z-index:6;font:italic 20px/1.35 "Playfair Display"}.hero-quote small{display:block;margin-top:13px;font:9px "DM Sans";letter-spacing:2px;color:var(--gold)}.scroll-cue{position:absolute;right:3%;bottom:4%;z-index:7;font-size:8px;letter-spacing:2px;color:#9aa2ac}.scroll-cue i{display:block;height:35px;width:1px;background:var(--gold);margin:7px auto;animation:pulse 1.6s infinite}@keyframes pulse{50%{height:52px;opacity:.4}}

.ticker{height:74px;background:#0a0b0d;color:#fff;display:flex;align-items:center;overflow:hidden;border-block:1px solid var(--darkline);white-space:nowrap}.ticker-track{display:flex;gap:55px;align-items:center;animation:marquee 24s linear infinite}.ticker span{font:500 12px "Manrope";letter-spacing:2px}.ticker b{color:var(--gold);font-size:17px}@keyframes marquee{to{transform:translateX(-50%)}}

.section{padding:125px 6.5vw;max-width:1500px;margin:auto}.section.dark{max-width:none;background:var(--black);color:#fff}.section-hed{display:grid;grid-template-columns:.55fr 1.45fr;gap:60px}.label{font-size:10px;letter-spacing:3px;color:#8a8d91;text-transform:uppercase}.title{font:500 clamp(48px,6vw,86px)/.94 "Manrope";letter-spacing:-5px;margin:0}.title em{font:italic 1em "Playfair Display";letter-spacing:-2px}.bodycopy{max-width:720px;color:var(--muted);font-size:17px}.dark .bodycopy{color:#aab0b8}.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);margin-top:75px}.dark .stats{border-color:var(--darkline)}.stat{padding:30px 22px;border-right:1px solid var(--line)}.dark .stat{border-color:var(--darkline)}.stat strong{display:block;font:600 48px "Manrope";letter-spacing:-3px}.dark .stat strong{color:#fff}.stat small{font-size:9px;letter-spacing:1.5px;color:#7b7e84;text-transform:uppercase}

.photo-feature{display:grid;grid-template-columns:1fr 1fr;min-height:650px}.photo-feature .photo{overflow:hidden;position:relative;background:#10151a}.photo-feature .photo img{height:100%;object-fit:cover;object-position:center top;transition:transform 1.2s var(--ease)}.photo-feature:hover .photo img{transform:scale(1.045)}.photo-feature .copy{padding:85px;background:#f2efe7;display:flex;flex-direction:column;justify-content:center}.photo-feature .copy .title{max-width:650px}.copy-line{width:55px;height:2px;background:var(--gold);margin:25px 0}.feature-link{margin-top:25px;color:#111;font-weight:600;border-bottom:1px solid #111;width:max-content;padding-bottom:4px}

.services{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--darkline);margin-top:70px}.service{background:#0b0d10;padding:38px;min-height:300px;position:relative;transition:.5s var(--ease);transform-style:preserve-3d}.service:hover{background:#12161b;transform:translateY(-7px)}.service .num{font:500 11px "Manrope";color:var(--gold);letter-spacing:2px}.service h3{font:500 28px "Manrope";margin:75px 0 10px;letter-spacing:-1px}.service p{color:#9299a2;font-size:14px;max-width:330px}.service .arrow{position:absolute;right:30px;top:30px;font-size:22px;color:var(--gold)}

.project-rail{display:flex;gap:18px;overflow:hidden;margin-top:65px}.project{flex:0 0 43vw;min-height:500px;position:relative;overflow:hidden;background:#15181c}.project img{height:100%;object-fit:cover;transition:transform 1s var(--ease);filter:brightness(.78)}.project:hover img{transform:scale(1.06)}.project:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.82))}.project-info{position:absolute;z-index:3;left:32px;bottom:30px}.project-info small{color:var(--gold);font-size:9px;letter-spacing:2px}.project-info h3{font:500 34px "Manrope";margin:7px 0}.project-info p{margin:0;color:#d1d5da;font-size:13px}.rail-control{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.rail-control button{width:44px;height:44px;border-radius:50%;background:transparent;border:1px solid var(--darkline);color:#fff;cursor:pointer}.rail-control button:hover{border-color:var(--gold);color:var(--gold)}

.books{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:65px}.book{background:#efede6;padding:55px;min-height:390px}.book.darkbook{background:#0b0d10;color:#fff}.book h3{font:500 42px "Manrope";letter-spacing:-2px;margin:25px 0 15px}.book p{color:var(--muted);max-width:460px}.book.darkbook p{color:#999fa7}

.contact{background:#111317;color:#fff;display:grid;grid-template-columns:1fr 1fr}.contact .left{padding:110px 6.5vw}.contact .right{padding:110px 6.5vw;background:var(--gold);color:#111}.contact .right .title{color:#111}.email{display:inline-block;font:500 30px "Manrope";margin-top:35px;border-bottom:1px solid currentColor;padding-bottom:6px}.links-list{margin-top:40px;border-top:1px solid rgba(0,0,0,.25)}.links-list a{display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid rgba(0,0,0,.25)}

.page-hero{min-height:70vh;background:#0a0c0f;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:160px 6.5vw 95px;position:relative;overflow:hidden}.page-hero:after{content:"";position:absolute;width:65vw;height:65vw;border:1px solid rgba(201,164,92,.12);border-radius:50%;right:-20vw;top:-25vw}.page-hero h1{font:500 clamp(64px,9vw,130px)/.84 "Manrope";letter-spacing:-7px;margin:20px 0;position:relative;z-index:2}.page-hero h1 em{font:italic 1em "Playfair Display";color:var(--gold)}.page-hero p:last-child{font-size:17px;color:#aeb5bd;position:relative;z-index:2;max-width:700px}

footer{padding:45px 6.5vw;background:#070809;color:#737980;border-top:1px solid var(--darkline);display:flex;justify-content:space-between;gap:30px;font-size:11px}.social{display:flex;gap:18px}.social a:hover{color:var(--gold)}

.reveal{opacity:1;transform:none}.reveal.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
@media(max-width:980px){.cursor,.cursor-dot{display:none}.links{display:none}.menu{display:block}.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:145px 7vw 45px}.hero h1{font-size:18vw}.hero-person{min-height:620px}.hero-person img{width:100%;height:100%;max-width:620px}.hero-words,.hero-quote{display:none}.ring{right:10%;top:15%;width:420px;height:420px}.ticker{height:62px}.section{padding:85px 7vw}.section-hed{grid-template-columns:1fr;gap:25px}.stats{grid-template-columns:1fr 1fr;margin-top:50px}.stat{padding:22px}.stat strong{font-size:38px}.photo-feature{grid-template-columns:1fr}.photo-feature .photo{height:500px}.photo-feature .copy{padding:65px 7vw}.services{grid-template-columns:1fr}.project{flex-basis:80vw;min-height:420px}.books{grid-template-columns:1fr}.contact{grid-template-columns:1fr}.contact .left,.contact .right{padding:80px 7vw}.page-hero{padding:150px 7vw 80px}.page-hero h1{font-size:16vw}footer{display:block}.social{margin:20px 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}}


/* =========================================================
   VJ COMMERCE / STOREFRONT SYSTEM
   Premium editorial commerce UI for Services / Books / Projects
   ========================================================= */
.storefront{background:var(--paper)}
.store-head{padding:155px 6.5vw 55px;background:#0a0b0d;color:#fff;position:relative;overflow:hidden}
.store-head:before{content:"";position:absolute;width:55vw;height:55vw;border:1px solid rgba(201,164,92,.14);border-radius:50%;right:-17vw;top:-30vw}
.store-head .inner{position:relative;z-index:2;max-width:1450px;margin:auto}
.store-head .eyebrow{margin-bottom:18px}
.store-head h1{font:500 clamp(62px,8.5vw,128px)/.86 "Manrope";letter-spacing:-7px;margin:0;max-width:1050px}
.store-head h1 em{font:italic 1em "Playfair Display";color:var(--gold)}
.store-head .lead{max-width:760px;color:#aeb5bd;font-size:17px;margin:28px 0 0}
.store-tools{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 6.5vw;border-bottom:1px solid var(--line);position:sticky;top:74px;z-index:20;background:rgba(251,250,246,.94);backdrop-filter:blur(16px)}
.store-filters{display:flex;gap:8px;flex-wrap:wrap}
.store-filter{border:1px solid var(--line);background:transparent;padding:9px 14px;border-radius:999px;font-size:11px;letter-spacing:.5px;cursor:pointer;transition:.25s}
.store-filter:hover,.store-filter.active{background:#111317;color:#fff;border-color:#111317}
.store-count{font-size:10px;letter-spacing:2px;color:#777;text-transform:uppercase;white-space:nowrap}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:55px}
.product-card{background:#fff;min-height:510px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s}
.product-card:hover{transform:translateY(-7px);box-shadow:0 25px 65px rgba(0,0,0,.10);z-index:2}
.product-media{height:310px;position:relative;overflow:hidden;background:#e9e5dc}
.product-media img{height:100%;object-fit:cover;transition:transform .9s var(--ease);filter:saturate(.88)}
.product-card:hover .product-media img{transform:scale(1.055)}
.product-tag{position:absolute;left:18px;top:18px;background:#111317;color:#fff;border-radius:999px;padding:7px 10px;font-size:8px;letter-spacing:1.8px}
.product-number{position:absolute;right:18px;top:18px;color:#111;background:rgba(255,255,255,.86);border-radius:999px;padding:7px 9px;font-size:9px}
.product-body{padding:28px 28px 25px;display:flex;flex-direction:column;flex:1}
.product-body .mini{font-size:9px;letter-spacing:2px;color:var(--gold);text-transform:uppercase}
.product-body h3{font:500 27px/1.02 "Manrope";letter-spacing:-1.4px;margin:12px 0 10px}
.product-body p{color:#777;font-size:13px;margin:0;max-width:430px}
.product-foot{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-top:auto;padding-top:22px}
.product-price{font:600 22px "Manrope";letter-spacing:-1px}
.product-price small{display:block;font:9px "DM Sans";color:#92959a;letter-spacing:1px;margin-top:2px}
.product-action{display:inline-flex;align-items:center;gap:9px;padding:11px 14px;border-radius:999px;background:#111317;color:#fff;font-size:11px;font-weight:600;transition:.25s}
.product-action:hover{background:var(--gold);color:#111}
.product-action.light{background:#eeeae1;color:#111}
.store-section{padding:95px 6.5vw;max-width:1500px;margin:auto}
.store-section.dark{max-width:none;background:#0a0b0d;color:#fff}
.store-section-head{display:flex;justify-content:space-between;align-items:end;gap:35px}
.store-section-head .title{max-width:900px}
.store-section-head .bodycopy{margin:0;max-width:480px}
.submenu-strip{display:flex;gap:0;border-block:1px solid var(--darkline);overflow:auto;white-space:nowrap}
.submenu-strip a{padding:17px 21px;color:#aab0b8;font-size:10px;letter-spacing:1.7px;text-transform:uppercase;border-right:1px solid var(--darkline)}
.submenu-strip a:first-child{border-left:1px solid var(--darkline)}
.submenu-strip a:hover,.submenu-strip a.active{color:#fff;background:#12161b}
.service-product .product-media{height:255px;background:linear-gradient(135deg,#111317,#25282d)}
.service-icon{position:absolute;inset:0;display:grid;place-items:center;font:500 82px "Playfair Display";font-style:italic;color:var(--gold);opacity:.9}
.service-product .product-body h3{font-size:31px}
.service-product .service-points{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.service-product .service-points span{font-size:8px;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--line);padding:6px 8px;border-radius:999px}
.service-cta{margin-top:55px;display:flex;justify-content:space-between;align-items:center;gap:30px;padding:26px 0;border-top:1px solid var(--darkline)}
.service-cta p{margin:0;color:#aab0b8;font-size:13px}
.service-cta a{white-space:nowrap}
.book-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:55px}
.book-product{position:relative}
.book-cover{aspect-ratio:.69;position:relative;overflow:hidden;background:#15181c;box-shadow:0 24px 55px rgba(0,0,0,.16);transition:transform .65s var(--ease),box-shadow .65s}
.book-product:hover .book-cover{transform:translateY(-9px) rotate(-1deg);box-shadow:0 35px 75px rgba(0,0,0,.22)}
.cover-art{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.cover-art:after{content:"";position:absolute;inset:15px;border:1px solid rgba(255,255,255,.18);pointer-events:none}
.cover-kicker{font-size:8px;letter-spacing:3px;color:var(--gold);position:relative;z-index:2}
.cover-title{font:500 38px/.9 "Manrope";letter-spacing:-2px;position:relative;z-index:2;max-width:85%}
.cover-title em{font:italic 1em "Playfair Display"}
.cover-author{font-size:9px;letter-spacing:2px;position:relative;z-index:2}
.cover-1{background:radial-gradient(circle at 75% 25%,#52647a 0,#202831 32%,#0d1014 75%)}
.cover-2{background:linear-gradient(145deg,#d2b272,#6b4d20 46%,#111317 47%)}
.cover-3{background:radial-gradient(circle at 20% 70%,#78644a,#24201a 40%,#0d0e10 80%)}
.cover-4{background:linear-gradient(155deg,#172b34,#111317 52%,#8c6c35)}
.book-info{padding:19px 2px 0}
.book-info .mini{font-size:8px;letter-spacing:2px;color:#9a9da2;text-transform:uppercase}
.book-info h3{font:500 22px/1.05 "Manrope";letter-spacing:-1px;margin:8px 0}
.book-info p{font-size:12px;color:#777;margin:0 0 15px}
.book-buy{display:flex;justify-content:space-between;align-items:center;gap:10px}
.book-price{font:600 18px "Manrope"}
.buy-now{display:inline-flex;padding:10px 14px;background:#111317;color:#fff;border-radius:999px;font-size:10px;font-weight:600}
.buy-now:hover{background:var(--gold);color:#111}
.book-note{margin-top:22px;color:#85898f;font-size:11px}
.project-shop{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:55px}
.case-card{background:#fff;display:grid;grid-template-columns:1.05fr .95fr;min-height:420px;overflow:hidden}
.case-card:nth-child(3n){grid-column:1/-1;grid-template-columns:1.2fr .8fr}
.case-visual{position:relative;overflow:hidden;background:#12161b;min-height:100%}
.case-visual img{height:100%;object-fit:cover;filter:brightness(.72) saturate(.85);transition:transform .9s var(--ease)}
.case-card:hover .case-visual img{transform:scale(1.06)}
.case-index{position:absolute;top:22px;left:22px;z-index:3;color:#fff;font-size:9px;letter-spacing:2px}
.case-copy{padding:40px;display:flex;flex-direction:column;justify-content:space-between}
.case-copy .mini{font-size:8px;letter-spacing:2px;color:var(--gold);text-transform:uppercase}
.case-copy h3{font:500 34px/1 "Manrope";letter-spacing:-1.6px;margin:15px 0}
.case-copy p{color:#777;font-size:13px;max-width:430px}
.case-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.case-meta span{font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:6px 8px;border:1px solid var(--line);border-radius:999px}
.case-link{font-size:11px;font-weight:600;border-bottom:1px solid #111;width:max-content;padding-bottom:5px;margin-top:30px}
.detail-wrap{background:var(--paper)}
.detail-hero{padding:150px 6.5vw 70px;background:#0a0b0d;color:#fff}
.detail-hero .inner{max-width:1450px;margin:auto;display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end}
.detail-hero h1{font:500 clamp(58px,7.8vw,118px)/.86 "Manrope";letter-spacing:-6px;margin:15px 0}
.detail-hero h1 em{font:italic 1em "Playfair Display";color:var(--gold)}
.detail-hero p{color:#adb4bc;max-width:650px}
.detail-side{border-left:1px solid var(--darkline);padding-left:35px}
.detail-side strong{display:block;font:500 28px "Manrope";margin-bottom:6px}
.detail-side small{color:#858b93;font-size:9px;letter-spacing:1.8px;text-transform:uppercase}
.detail-content{max-width:1500px;margin:auto;padding:85px 6.5vw}
.detail-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:80px}
.detail-copy h2{font:500 48px/1 "Manrope";letter-spacing:-3px;margin:0 0 20px}
.detail-copy p{font-size:16px;color:#676b71;max-width:760px}
.detail-list{border-top:1px solid var(--line);margin-top:35px}
.detail-list div{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font-size:12px}
.detail-list span:last-child{color:#777}
.detail-buy{background:#111317;color:#fff;padding:35px;position:sticky;top:105px}
.detail-buy .price{font:600 38px "Manrope";letter-spacing:-2px;margin:10px 0}
.detail-buy p{font-size:12px;color:#9aa0a7}
.detail-buy .btn{margin-top:18px;width:100%;justify-content:center}
.detail-image{min-height:470px;background:#e7e3da;overflow:hidden}
.detail-image img{height:100%;object-fit:cover}
@media(max-width:1100px){
 .product-grid{grid-template-columns:repeat(2,1fr)}
 .book-grid{grid-template-columns:repeat(2,1fr)}
 .case-card,.case-card:nth-child(3n){grid-template-columns:1fr;grid-column:auto}
 .case-visual{height:330px}
 .detail-hero .inner,.detail-grid{grid-template-columns:1fr}
 .detail-side{border-left:0;border-top:1px solid var(--darkline);padding:22px 0 0}
 .detail-buy{position:static}
}
@media(max-width:720px){
 .store-head{padding:135px 7vw 45px}
 .store-head h1{font-size:16vw;letter-spacing:-4px}
 .store-tools{top:68px;padding:13px 7vw;align-items:flex-start}
 .store-count{display:none}
 .store-section{padding:70px 7vw}
 .product-grid{grid-template-columns:1fr}
 .product-media{height:280px}
 .book-grid{grid-template-columns:1fr 1fr;gap:18px}
 .cover-title{font-size:26px}
 .cover-art{padding:20px}
 .case-copy{padding:28px}
 .case-copy h3{font-size:29px}
 .detail-hero{padding:125px 7vw 55px}
 .detail-hero h1{font-size:15vw;letter-spacing:-4px}
 .detail-content{padding:60px 7vw}
 .detail-copy h2{font-size:38px}
}

/* ==========================================================
   VJ PREMIUM COMPREHENSIVE UI — BLACK PANELS / ICON SYSTEM
   ========================================================== */
:root{
 --black:#070809; --black2:#0d0f12; --gold2:#d7b56b; --white:#f8f7f2;
 --muted:#858b93; --panel:#111419; --panel2:#171a1f;
}
.icon{width:22px;height:22px;display:inline-block;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-lg{width:32px;height:32px}.icon-xl{width:46px;height:46px}
.icon-fill{fill:currentColor;stroke:none}
.black-page{background:var(--black);color:#fff}
.black-page .eyebrow{color:var(--gold2)}
.black-page .bodycopy{color:#9ba1a9}
.black-hero{padding:155px 6.5vw 70px;background:radial-gradient(circle at 78% 15%,#252a31 0,transparent 30%),linear-gradient(145deg,#070809,#111419);position:relative;overflow:hidden}
.black-hero:after{content:"";position:absolute;right:-12vw;bottom:-22vw;width:48vw;height:48vw;border:1px solid rgba(215,181,107,.16);border-radius:50%;box-shadow:0 0 0 60px rgba(215,181,107,.025),0 0 0 120px rgba(215,181,107,.015)}
.black-hero .inner{max-width:1450px;margin:auto;position:relative;z-index:2}
.black-hero h1{font:500 clamp(60px,9vw,138px)/.84 "Manrope";letter-spacing:-7px;margin:15px 0;max-width:1100px}
.black-hero h1 em{font:italic 1em "Playfair Display";color:var(--gold2)}
.icon-menu{display:flex;gap:0;border-block:1px solid #252930;background:#090b0e;overflow:auto}
.icon-menu a{min-width:max-content;display:flex;align-items:center;gap:10px;padding:17px 20px;color:#969ca4;border-right:1px solid #252930;font-size:9px;letter-spacing:1.5px;text-transform:uppercase}
.icon-menu a:hover,.icon-menu a.active{background:#15181d;color:#fff}
.icon-menu a.active svg{color:var(--gold2)}
.black-section{padding:90px 6.5vw;background:var(--black)}
.black-section.alt{background:#0c0e11}
.black-section .inner{max-width:1500px;margin:auto}
.section-kicker{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:45px}
.section-kicker h2{font:500 clamp(42px,5.2vw,78px)/.92 "Manrope";letter-spacing:-4px;margin:10px 0 0}
.section-kicker h2 em{font:italic 1em "Playfair Display";color:var(--gold2)}
.section-kicker p{max-width:450px;color:#8d939b;font-size:13px}
.icon-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#272a2f}
.icon-card{background:#111419;padding:34px;min-height:250px;position:relative;overflow:hidden;transition:.5s var(--ease);border:1px solid transparent}
.icon-card:before{content:"";position:absolute;width:130px;height:130px;border:1px solid rgba(215,181,107,.10);border-radius:50%;right:-50px;top:-50px;transition:.6s}
.icon-card:hover{background:#171a1f;border-color:rgba(215,181,107,.22);transform:translateY(-5px)}
.icon-card:hover:before{transform:scale(1.35);border-color:rgba(215,181,107,.22)}
.icon-card .iconbox{width:54px;height:54px;border:1px solid #30343a;border-radius:16px;display:grid;place-items:center;color:var(--gold2);margin-bottom:30px;transition:.35s}
.icon-card:hover .iconbox{background:var(--gold2);color:#101114;border-color:var(--gold2);transform:rotate(-5deg) scale(1.05)}
.icon-card h3{font:500 25px/1.05 "Manrope";letter-spacing:-1px;margin:0 0 12px}
.icon-card p{font-size:12px;line-height:1.65;color:#858b93;margin:0}
.icon-card .arrow{position:absolute;right:25px;bottom:25px;color:#777}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:45px}
.package{background:#fff;color:#111;padding:0;position:relative;overflow:hidden;min-height:520px;transition:.55s var(--ease)}
.package:hover{transform:translateY(-8px);box-shadow:0 30px 80px rgba(0,0,0,.24)}
.package-top{padding:28px 28px 22px;border-bottom:1px solid #dedbd4}
.package-top .iconbox{width:52px;height:52px;border-radius:14px;background:#111317;color:var(--gold2);display:grid;place-items:center;margin-bottom:24px}
.package-top h3{font:500 31px/1 "Manrope";letter-spacing:-1.5px;margin:0 0 12px}
.package-top p{font-size:12px;color:#777;margin:0}
.package-price{font:600 34px "Manrope";letter-spacing:-2px;margin-top:20px}
.package-price small{font:10px "DM Sans";letter-spacing:1px;color:#888}
.package-body{padding:25px 28px}
.package-body ul{padding:0;margin:0;list-style:none}
.package-body li{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #ece9e2;font-size:11px;color:#555}
.package-body li svg{width:15px;height:15px;color:#a17c35;flex:none}
.package-cta{margin:20px 28px 28px;display:flex;justify-content:space-between;align-items:center}
.package-cta a{background:#111317;color:#fff;border-radius:999px;padding:11px 15px;font-size:10px;font-weight:600}
.package-cta a:hover{background:var(--gold2);color:#111}
.package.featured{background:#111419;color:#fff;border:1px solid #2e3238}
.package.featured .package-top{border-color:#2e3238}
.package.featured .package-top p,.package.featured .package-body li{color:#a2a7ae}
.package.featured .package-body li{border-color:#292d32}
.package.featured .package-top .iconbox{background:var(--gold2);color:#111}
.package-badge{position:absolute;right:18px;top:18px;background:var(--gold2);color:#111;border-radius:999px;padding:7px 10px;font-size:8px;letter-spacing:1.3px}
.media-panel-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1px;background:#25282d}
.media-panel{min-height:480px;position:relative;overflow:hidden;background:#15181d}
.media-panel img{width:100%;height:100%;object-fit:cover;transition:1s var(--ease);filter:saturate(.8)}
.media-panel:hover img{transform:scale(1.045)}
.media-panel .overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.86));padding:34px;display:flex;flex-direction:column;justify-content:end}
.media-panel .overlay h3{font:500 40px/.95 "Manrope";letter-spacing:-2px;margin:8px 0}
.media-panel .overlay p{max-width:500px;color:#c0c4c9;font-size:12px;margin:0}
.media-panel.small{min-height:235px}
.media-panel-stack{display:grid;grid-template-rows:1fr 1fr;gap:1px;background:#25282d}
.media-panel-stack .media-panel .overlay h3{font-size:29px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid #272a2f;margin-top:55px}
.timeline-item{padding:25px 22px;border-right:1px solid #272a2f;min-height:140px}
.timeline-item:last-child{border-right:0}
.timeline-item strong{font:500 27px "Manrope";color:#fff}
.timeline-item span{display:block;font-size:8px;letter-spacing:1.5px;color:var(--gold2);margin:8px 0;text-transform:uppercase}
.timeline-item p{font-size:11px;color:#858b93;margin:0}
.contact-shell{background:#070809;color:#fff}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1px;background:#272a2f}
.contact-panel{background:#0f1216;padding:45px}
.contact-panel h2{font:500 52px/.95 "Manrope";letter-spacing:-3px;margin:0 0 20px}
.contact-panel h2 em{font:italic 1em "Playfair Display";color:var(--gold2)}
.contact-list{margin-top:35px;border-top:1px solid #292d32}
.contact-row{display:flex;align-items:center;gap:17px;padding:20px 0;border-bottom:1px solid #292d32}
.contact-row .contact-icon{width:46px;height:46px;border:1px solid #30343a;border-radius:14px;display:grid;place-items:center;color:var(--gold2);flex:none}
.contact-row strong{display:block;font-size:12px;margin-bottom:4px}
.contact-row span,.contact-row a{font-size:12px;color:#8e949c}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#292d32;margin-top:28px}
.social-tile{background:#111419;padding:22px;display:flex;align-items:center;gap:13px;color:#b8bdc4;min-height:90px;transition:.35s}
.social-tile:hover{background:#1a1e23;color:#fff;transform:translateY(-3px)}
.social-tile svg{color:var(--gold2)}
.social-tile strong{font-size:10px;letter-spacing:1px}
.social-tile small{display:block;color:#70767f;font-size:8px;margin-top:4px}
.contact-form{display:grid;gap:15px}
.contact-form label{font-size:9px;letter-spacing:1.5px;color:#8c929a;text-transform:uppercase}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;box-sizing:border-box;background:#080a0d;border:1px solid #2a2e34;color:#fff;padding:15px 16px;font:12px "DM Sans";outline:none}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--gold2)}
.contact-form textarea{min-height:150px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.contact-map{min-height:230px;margin-top:25px;background:radial-gradient(circle,#232932 1px,transparent 1px);background-size:18px 18px;border:1px solid #282c31;display:grid;place-items:center;color:#6f767e;text-align:center;padding:20px}
.contact-map .pin{width:60px;height:60px;border-radius:50%;border:1px solid var(--gold2);display:grid;place-items:center;color:var(--gold2);margin:auto auto 12px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#292d32;margin-top:45px}
.faq{background:#111419;padding:24px;min-height:120px}
.faq strong{display:flex;justify-content:space-between;gap:15px;font-size:13px}
.faq p{color:#81878f;font-size:11px;line-height:1.6}
.motion-line{height:1px;background:linear-gradient(90deg,transparent,var(--gold2),transparent);margin:20px 0;transform-origin:left;animation:linePulse 3s infinite}
@keyframes linePulse{0%,100%{opacity:.25;transform:scaleX(.3)}50%{opacity:1;transform:scaleX(1)}}
.float-orb{position:absolute;border:1px solid rgba(215,181,107,.16);border-radius:50%;animation:orbFloat 8s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,-20px,0)}}
@media(max-width:1000px){
 .icon-card-grid,.package-grid{grid-template-columns:1fr 1fr}
 .media-panel-grid,.contact-grid{grid-template-columns:1fr}
 .timeline{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
 .black-hero{padding:125px 7vw 55px}
 .black-hero h1{font-size:15vw;letter-spacing:-4px}
 .black-section{padding:65px 7vw}
 .section-kicker{display:block}
 .icon-card-grid,.package-grid,.social-grid,.faq-grid,.timeline{grid-template-columns:1fr}
 .timeline-item{border-right:0;border-bottom:1px solid #272a2f}
 .media-panel-grid{display:block}
 .media-panel,.media-panel.small{min-height:340px}
 .contact-panel{padding:28px}
 .contact-panel h2{font-size:40px}
 .form-row{grid-template-columns:1fr}
}

/* VJ creative identity + editorial blog */
.brand .vj-logo{width:48px;height:48px;display:grid;place-items:center;position:relative;margin-right:11px;color:#d7b56b;flex:none}
.brand .vj-logo svg{width:48px;height:48px;overflow:visible}
.brand .vj-logo .monogram{font:600 15px/1 Manrope;letter-spacing:-2px;fill:#fff}
.brand .vj-logo .ring{fill:none;stroke:#d7b56b;stroke-width:1.2}
.brand .vj-logo .ring2{fill:none;stroke:#d7b56b;stroke-width:.65;stroke-dasharray:2 4;opacity:.7}
.brand .vj-logo .spark{fill:#d7b56b}
.hero-photo-cutout{position:absolute!important;right:7%;bottom:-4%;height:92%;width:auto!important;object-fit:contain!important;filter:drop-shadow(0 25px 50px rgba(0,0,0,.38)) drop-shadow(0 0 45px rgba(215,181,107,.08));z-index:3;pointer-events:none}
.hero-photo-wrap{position:relative;background:radial-gradient(circle at 50% 30%,#1d2228,#0b0d10 68%);overflow:hidden}
.hero-photo-wrap:before{content:'';position:absolute;inset:8%;border:1px solid rgba(215,181,107,.10);border-radius:50%;transform:rotate(-17deg)}
.blog-shell{background:#f5f3ed;color:#101215}
.blog-hero{padding:155px 6.5vw 55px;background:#080a0d;color:#fff;position:relative;overflow:hidden}
.blog-hero .inner{max-width:1500px;margin:auto;position:relative;z-index:2}
.blog-hero h1{font:500 clamp(65px,10vw,145px)/.82 Manrope;letter-spacing:-8px;margin:12px 0}
.blog-hero h1 em{font:italic 1em 'Playfair Display';color:#d7b56b}
.blog-hero .lead{max-width:680px;color:#a6adb5;font-size:16px}
.blog-nav{display:flex;gap:0;overflow:auto;white-space:nowrap;border-bottom:1px solid #d8d5ce;background:#f5f3ed;position:sticky;top:74px;z-index:20}
.blog-nav a{padding:17px 21px;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:#73777d;border-right:1px solid #ddd9d0}
.blog-nav a:hover,.blog-nav a.active{color:#111;background:#fff}
.blog-main{max-width:1500px;margin:auto;padding:65px 6.5vw 100px}
.blog-feature{display:grid;grid-template-columns:1.18fr .82fr;min-height:520px;background:#111419;color:#fff;overflow:hidden}
.blog-feature-media{position:relative;min-height:420px;overflow:hidden;background:#0b0d10}
.blog-feature-media img{width:100%;height:100%;object-fit:contain;object-position:center bottom;transition:1s var(--ease);filter:drop-shadow(0 20px 35px rgba(0,0,0,.35))}
.blog-feature:hover img{transform:scale(1.025)}
.blog-feature-copy{padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.blog-feature-copy h2{font:500 clamp(38px,4.5vw,66px)/.93 Manrope;letter-spacing:-3px;margin:15px 0}
.blog-feature-copy h2 em{font-style:italic;font-family:'Playfair Display';color:#d7b56b}
.blog-meta{display:flex;gap:12px;align-items:center;font-size:9px;letter-spacing:1.5px;color:#8e959d;text-transform:uppercase}
.blog-meta .dot{width:4px;height:4px;background:#d7b56b;border-radius:50%}
.blog-read{width:max-content;border-bottom:1px solid #fff;padding-bottom:6px;color:#fff;font-size:11px;font-weight:600}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d8d5ce;margin-top:45px}
.blog-card{background:#fff;overflow:hidden;transition:.45s var(--ease);display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.10);z-index:2}
.blog-card-media{height:245px;position:relative;overflow:hidden;background:#111419}
.blog-card-media img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:saturate(.78);transition:.8s var(--ease)}
.blog-card:hover .blog-card-media img{transform:scale(1.04)}
.blog-card .tag{position:absolute;left:18px;top:18px;background:#111;color:#fff;border-radius:99px;padding:7px 10px;font-size:8px;letter-spacing:1.6px;z-index:2}
.blog-card-body{padding:25px;flex:1;display:flex;flex-direction:column}
.blog-card-body h3{font:500 26px/1.02 Manrope;letter-spacing:-1.3px;margin:11px 0}
.blog-card-body p{font-size:12px;line-height:1.65;color:#74787e;margin:0}
.blog-card-foot{margin-top:auto;padding-top:25px;display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#888;letter-spacing:1px}
.blog-card-foot a{color:#111;font-weight:600}
.blog-newsletter{margin-top:65px;background:#111419;color:#fff;padding:45px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.blog-newsletter h2{font:500 42px/.95 Manrope;letter-spacing:-2px;margin:0}
.blog-newsletter h2 em{font:italic 1em 'Playfair Display';color:#d7b56b}
.blog-subscribe{display:flex;border-bottom:1px solid #555;gap:15px}
.blog-subscribe input{flex:1;background:transparent;border:0;outline:0;color:#fff;padding:14px 0;font:12px Manrope}
.blog-subscribe button{background:transparent;border:0;color:#d7b56b;font-size:10px;font-weight:600;cursor:pointer}
.blog-side-note{display:flex;gap:12px;align-items:center;color:#8a9198;font-size:10px;letter-spacing:1px;margin-top:18px}
@media(max-width:950px){.hero-photo-cutout{right:2%;height:62%;bottom:0;opacity:.78}.blog-feature{grid-template-columns:1fr}.blog-grid{grid-template-columns:1fr 1fr}.blog-newsletter{grid-template-columns:1fr}}
@media(max-width:650px){.brand .vj-logo,.brand .vj-logo svg{width:42px;height:42px}.blog-hero{padding:125px 7vw 45px}.blog-hero h1{font-size:17vw;letter-spacing:-5px}.blog-nav{top:68px}.blog-main{padding:45px 7vw 70px}.blog-grid{grid-template-columns:1fr}.blog-feature-copy{padding:30px}.blog-newsletter{padding:30px}}

/* Final hero image integration */
.hero-person img{background:transparent!important;object-fit:contain!important;filter:drop-shadow(0 28px 48px rgba(0,0,0,.42)) drop-shadow(0 0 42px rgba(215,181,107,.08));mix-blend-mode:normal}
.hero-person{background:radial-gradient(ellipse at 55% 60%,rgba(215,181,107,.045),transparent 45%)}

/* Header refinement — cinematic black/gold navigation */
.nav{height:86px;padding:0 3.8vw;background:linear-gradient(180deg,rgba(3,4,6,.94),rgba(3,4,6,.62) 70%,transparent);border-bottom:1px solid rgba(215,181,107,.12);backdrop-filter:blur(10px)}
.nav.scrolled{background:rgba(4,5,7,.94);height:72px;box-shadow:0 12px 40px rgba(0,0,0,.28)}
.brand{gap:10px;min-width:300px}.brand .vj-logo{width:92px;height:62px;margin-right:0;display:block;position:relative}.brand .vj-logo svg{width:100%;height:100%;overflow:visible}.brand .calli-vj{font-family:"Brush Script MT","Segoe Script","URW Chancery L",cursive;font-size:57px;font-style:italic;font-weight:500;letter-spacing:-9px}.brand .logo-swoosh{fill:none;stroke:#d7b56b;stroke-width:1.2;stroke-linecap:round;opacity:.9}.brand .logo-star{fill:#f5d37e;filter:drop-shadow(0 0 6px rgba(245,211,126,.65))}.brand-copy{display:block}.brand .name{font:600 12px "Manrope";letter-spacing:3.5px}.brand small{font:500 7px "DM Sans";letter-spacing:2.8px;color:#d7b56b}
.links{gap:20px;font-size:12px}.links a{padding:8px 2px;color:rgba(255,255,255,.9)}.links a:after{height:2px}.nav-search{width:25px;height:25px;display:grid!important;place-items:center;margin-left:4px}.nav-search svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.7}.nav-cta{margin-left:3px!important;padding:11px 19px!important;border:1px solid #d7b56b;background:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(215,181,107,.08)}.nav-cta span{color:#d7b56b;font-size:17px}.nav-cta:hover{background:#d7b56b!important;color:#0a0b0d!important}.nav-cta:hover span{color:#0a0b0d}
.hero{min-height:100svh;background:#030507}.hero-bg{background:radial-gradient(circle at 63% 43%,rgba(20,38,54,.72),transparent 25%),radial-gradient(circle at 71% 62%,rgba(201,164,92,.12),transparent 17%),linear-gradient(90deg,#020305 0%,#05090e 56%,#020305 100%)}.hero-bg:after{content:"";position:absolute;width:44vw;height:44vw;right:5%;top:17%;border-radius:50%;border:1px solid rgba(215,181,107,.2);box-shadow:0 0 0 28px rgba(215,181,107,.025),0 0 80px rgba(215,181,107,.07),inset 0 0 80px rgba(215,181,107,.04);animation:globePulse 8s ease-in-out infinite}.hero-grid{opacity:.09;background-size:84px 84px}.hero-copy{padding-top:175px;max-width:760px}.hero h1{font-weight:700;letter-spacing:-7px}.hero h1 span{background:linear-gradient(90deg,#fff1b6,#d7b56b,#a97828);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-person{z-index:4}.hero-person img{height:94%;width:min(520px,42vw);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 28px 55px rgba(0,0,0,.7)) drop-shadow(0 0 36px rgba(215,181,107,.16));mask-image:linear-gradient(to bottom,#000 0%,#000 98%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 98%,transparent 100%)}
.hero-words{right:8%;top:25%;font-size:10px;letter-spacing:3.5px}.hero-quote{right:7%;bottom:18%;font-size:19px}.hero-social{position:absolute;right:1.8%;top:22%;z-index:9;display:flex;flex-direction:column;gap:10px;padding-left:13px;border-left:1px solid rgba(215,181,107,.35)}.hero-social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.16);border-radius:9px;display:grid;place-items:center;background:rgba(7,9,12,.7);transition:.3s}.hero-social a:hover{border-color:#d7b56b;transform:translateX(-3px);box-shadow:0 0 20px rgba(215,181,107,.18)}.hero-social svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.hero-social a:nth-child(4) svg{fill:#fff;stroke:#fff}.hero-social a:nth-child(5) svg{stroke-width:0;fill:#fff}.hero-social a:nth-child(6) svg{fill:none;stroke:#fff}
@keyframes globePulse{50%{transform:scale(1.025);opacity:.75}}
@media(max-width:1200px){.brand{min-width:250px}.links{gap:13px}.hero-social{right:1%}.hero-words,.hero-quote{right:7%}}
@media(max-width:980px){.nav{height:74px;padding:0 6vw}.menu{display:flex;flex-shrink:0}.brand{min-width:0}.brand .vj-logo{width:72px;height:52px}.brand .calli-vj{font-size:49px}.brand .name{font-size:10px;letter-spacing:2.5px}.brand small{font-size:6px}.hero-social{right:5%;top:auto;bottom:22%;flex-direction:row;border-left:0;border-top:1px solid rgba(215,181,107,.35);padding:9px 0 0}.hero-bg:after{width:65vw;height:65vw;right:8%;top:24%}}
@media(max-width:650px){.brand .vj-logo{width:62px;height:48px}.brand-copy{max-width:190px}.menu{width:42px;height:42px}.brand .name{font-size:9px}.brand small{display:none}.hero-social{gap:6px}.hero-social a{width:29px;height:29px}.hero-social svg{width:16px;height:16px}}

body.mobile-nav-lock{overflow:hidden}

/* v2.4 DEVICE-COMPATIBILITY OVERRIDES — intentionally last so they win over legacy rules */
*,*::before,*::after{min-width:0}
img{max-width:100%;height:auto}
html{width:100%;overflow-x:hidden}
body{width:100%;overflow-x:hidden}

@media (max-width: 980px){
  .nav{height:72px!important;padding:0 22px!important;gap:14px;z-index:1000}
  .brand{flex:1;min-width:0!important;gap:9px}
  .brand .vj-logo,.brand .vj-logo svg{width:58px!important;height:48px!important;flex:0 0 auto}
  .brand .calli-vj{font-size:42px!important}
  .brand .name{font-size:10px!important;letter-spacing:2px!important;white-space:nowrap}
  .brand small{font-size:6px!important;letter-spacing:2px!important;white-space:nowrap}
  .links,.nav-search,.nav-cta{display:none!important}
  .menu{display:flex!important;visibility:visible!important;opacity:1!important;flex:0 0 44px!important}
  .mobile-menu{z-index:900!important}
  .hero{display:flex!important;flex-direction:column!important;min-height:auto!important;padding-top:0!important;overflow:hidden}
  .hero-copy{width:100%;max-width:none!important;padding:128px 7vw 28px!important;z-index:8}
  .hero h1{font-size:clamp(54px,15vw,105px)!important;line-height:.86!important;letter-spacing:-4px!important;margin:18px 0 22px!important}
  .hero-sub{font-size:10px!important;line-height:1.7!important;letter-spacing:1.4px!important}
  .hero-lead{font-size:16px!important;line-height:1.55!important;margin:20px 0 24px!important;max-width:620px!important}
  .buttons{gap:10px!important}
  .btn{min-height:46px;padding:12px 18px!important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;margin-top:34px!important}
  .stat{padding:18px 12px!important;border-bottom:1px solid rgba(255,255,255,.1)}
  .stat strong{font-size:32px!important}
  .stat span{font-size:9px!important;line-height:1.35}
  .hero-person{width:100%!important;height:auto!important;min-height:560px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;margin-top:-10px!important}
  .hero-person img{display:block!important;width:min(72vw,430px)!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center bottom!important;transform:none!important;margin:0 auto!important;mask-image:none!important;-webkit-mask-image:none!important}
  .ring{width:min(88vw,460px)!important;height:min(88vw,460px)!important;right:50%!important;top:14%!important;transform:translateX(50%)!important}
  .hero-words,.hero-quote,.scroll-cue{display:none!important}
  .hero-social{right:50%!important;top:auto!important;bottom:18px!important;transform:translateX(50%)!important;flex-direction:row!important;border:0!important;padding:0!important;gap:7px!important;z-index:12}
  .hero-social a{width:32px!important;height:32px!important}
  .ticker{overflow:hidden!important}
  .section{padding:72px 7vw!important}
  .section-hed{grid-template-columns:1fr!important}
  .services,.books,.contact,.photo-feature{grid-template-columns:1fr!important}
  .project{flex-basis:min(82vw,420px)!important}
  .photo-feature .photo{height:460px!important}
  .page-hero{padding:125px 7vw 70px!important}
  .page-hero h1{font-size:clamp(58px,15vw,100px)!important;letter-spacing:-4px!important}
  footer{padding:35px 7vw!important}
}

@media (max-width: 600px){
  .nav{padding:0 16px!important;height:68px!important}
  .brand .vj-logo,.brand .vj-logo svg{width:52px!important;height:44px!important}
  .brand .calli-vj{font-size:36px!important}
  .brand .name{font-size:8px!important;letter-spacing:1.7px!important}
  .brand small{display:none!important}
  .menu{width:42px!important;height:42px!important;flex-basis:42px!important}
  .hero-copy{padding:112px 20px 24px!important}
  .hero h1{font-size:clamp(48px,16.5vw,78px)!important;letter-spacing:-3px!important}
  .hero-sub{font-size:8.5px!important;letter-spacing:1px!important}
  .hero-lead{font-size:14px!important}
  .buttons .btn{flex:1 1 auto;justify-content:center}
  .stats{grid-template-columns:1fr 1fr!important}
  .stat strong{font-size:28px!important}
  .hero-person{min-height:500px!important;margin-top:0!important}
  .hero-person img{width:min(82vw,360px)!important}
  .ring{width:88vw!important;height:88vw!important;top:16%!important}
  .section{padding:60px 20px!important}
  .photo-feature .photo{height:380px!important}
  .contact .left,.contact .right{padding:60px 20px!important}
  .mobile-menu-inner{width:calc(100vw - 40px)!important;padding:84px 0 30px!important}
  .mobile-menu a{font-size:18px!important;padding:13px 4px!important}
}

@media (max-width: 380px){
  .brand .name{font-size:7px!important;letter-spacing:1.2px!important}
  .hero h1{font-size:15vw!important}
  .hero-person{min-height:440px!important}
  .hero-person img{width:84vw!important}
  .stats{grid-template-columns:1fr!important}
}

/* v2.5 robust responsive hero */
.hero-copy{align-self:center}
.hero-person img{height:min(82vh,820px)!important;width:auto!important;max-width:48vw!important;object-fit:contain!important;object-position:center bottom!important;mask-image:none!important;-webkit-mask-image:none!important;transform:none!important}
@media(max-width:980px){.hero{display:flex!important;flex-direction:column!important}.hero-copy{padding:112px 7vw 30px!important}.hero-person{min-height:540px!important;height:auto!important;width:100%!important}.hero-person img{width:min(82vw,430px)!important;max-width:none!important;height:auto!important}.hero-social{bottom:18px!important;top:auto!important}.hero-words,.hero-quote,.scroll-cue{display:none!important}}
@media(max-width:600px){.hero-copy{padding:105px 20px 22px!important}.hero-person{min-height:480px!important}.hero-person img{width:min(86vw,360px)!important}.section{padding-left:20px!important;padding-right:20px!important}}
@media(max-width:380px){.hero-person{min-height:430px!important}.hero-person img{width:88vw!important}}


/* v2.6 — final hero photography/layout correction */
.hero{position:relative;isolation:isolate;grid-template-columns:minmax(0,54%) minmax(420px,46%);min-height:clamp(720px,100svh,980px);background:#05070a}
.hero-bg{z-index:-3;background:radial-gradient(circle at 72% 45%,rgba(25,48,68,.55),transparent 24%),radial-gradient(circle at 69% 65%,rgba(201,164,92,.10),transparent 18%),linear-gradient(110deg,#030405 0%,#070b10 56%,#030405 100%)}
.hero-grid{z-index:-2;opacity:.06;background-size:84px 84px;mask-image:linear-gradient(to right,black 0%,transparent 92%)}
.hero-copy{align-self:end;padding:0 0 clamp(72px,9vh,105px) clamp(28px,6.2vw,96px);max-width:820px}
.hero-copy .reveal{opacity:1;transform:none}
.hero h1{font-size:clamp(66px,8.4vw,132px);line-height:.80;letter-spacing:-6px;margin:20px 0 26px}
.hero-sub{font-size:13px;letter-spacing:2px}
.hero-lead{font-size:17px;max-width:600px}
.hero-person{position:absolute;right:9%;bottom:0;width:min(560px,39vw);height:min(760px,86vh);min-height:0;align-items:flex-end;justify-content:center;z-index:4}
.hero-person img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;object-position:center bottom!important;background:transparent!important;filter:drop-shadow(0 28px 48px rgba(0,0,0,.62)) drop-shadow(0 0 34px rgba(201,164,92,.10));mask-image:none!important;-webkit-mask-image:none!important;mix-blend-mode:normal!important;transform:none!important}
.hero-person .ring{width:min(500px,34vw);height:min(500px,34vw);right:0;top:18%;z-index:-1;border-color:rgba(201,164,92,.22)}
.hero-words{right:6.5%;top:28%;z-index:6}
.hero-quote{right:5.5%;bottom:14%;z-index:7;width:230px;font-size:18px}
.hero-social{right:1.8%;top:28%;z-index:10}
@media(max-width:1200px){
 .hero{grid-template-columns:minmax(0,57%) minmax(380px,43%)}
 .hero-person{right:8%;width:min(500px,39vw);height:min(700px,82vh)}
 .hero-words{right:6%}.hero-quote{right:5%;width:210px}
}
@media(max-width:980px){
 .hero{display:flex!important;flex-direction:column!important;min-height:0!important;padding-top:72px!important;overflow:hidden!important}
 .hero-copy{align-self:stretch!important;padding:62px 7vw 20px!important;max-width:none!important;z-index:8!important}
 .hero h1{font-size:clamp(58px,13vw,96px)!important;line-height:.84!important;letter-spacing:-4px!important}
 .hero-person{position:relative!important;right:auto!important;bottom:auto!important;width:min(520px,88vw)!important;height:auto!important;min-height:560px!important;margin:0 auto!important;align-items:flex-end!important}
 .hero-person img{width:100%!important;height:auto!important;max-height:none!important}
 .hero-person .ring{width:min(470px,86vw)!important;height:min(470px,86vw)!important;right:50%!important;top:8%!important;transform:translateX(50%)!important}
 .hero-words,.hero-quote,.scroll-cue{display:none!important}
 .hero-social{position:relative!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;align-self:center!important;flex-direction:row!important;border:0!important;padding:0!important;margin:0 0 28px!important;gap:7px!important}
}
@media(max-width:600px){
 .hero{padding-top:68px!important}
 .hero-copy{padding:48px 20px 14px!important}
 .hero h1{font-size:clamp(48px,15.5vw,76px)!important;letter-spacing:-3px!important;margin:16px 0 20px!important}
 .hero-sub{font-size:8.5px!important;letter-spacing:1px!important;line-height:1.7!important}
 .hero-lead{font-size:14px!important;line-height:1.55!important;margin:18px 0 22px!important}
 .buttons{gap:8px!important}.btn{padding:11px 16px!important;font-size:12px!important}
 .hero-person{width:min(430px,94vw)!important;min-height:455px!important}
 .hero-person .ring{width:88vw!important;height:88vw!important}
 .hero-social a{width:30px!important;height:30px!important}
}
@media(max-width:380px){
 .hero-copy{padding-left:17px!important;padding-right:17px!important}
 .hero-person{min-height:410px!important}
 .hero h1{font-size:15vw!important}
}