:root { --bg:#090b0b; --text:#f5f3ee; --gold:#c6a66a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.nav { height:86px; padding:0 4.2vw; display:flex; align-items:center; gap:30px; position:absolute; inset:0 0 auto; z-index:20; background:linear-gradient(#080a0ae6,transparent); }
.brand { display:flex; align-items:center; gap:12px; margin-right:auto; font-size:15px; letter-spacing:.17em; }
.brand img { width:39px; height:39px; object-fit:contain; }
.brand small { display:block; font-size:6px; letter-spacing:.29em; color:#d5d3cc; margin-top:5px; }
nav { display:flex; gap:36px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
nav a { color:#f0eee8; transition:.25s; } nav a:hover { color:var(--gold); }
.outline,.gold-button { border:1px solid rgba(198,166,106,.9); padding:15px 22px; display:inline-flex; align-items:center; gap:28px; text-transform:uppercase; letter-spacing:.1em; font-size:10px; transition:.25s; }
.outline:hover,.gold-button:hover { background:var(--gold); color:#0d0e0e; }
.menu-toggle,.mobile-menu { display:none; }
.hero { height:100vh; min-height:660px; position:relative; overflow:hidden; }
.hero-image { width:100%; height:100%; object-fit:cover; object-position:center center; }
.shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,7,7,.67) 0%,rgba(5,7,7,.2) 39%,transparent 65%),linear-gradient(0deg,rgba(5,7,7,.5),transparent 45%); }
.hero-content { position:absolute; left:5vw; top:53%; transform:translateY(-50%); }
.hero-mark { width:60px; height:60px; object-fit:contain; margin-bottom:18px; }
.hero-content>p { color:#e6e3dc; font-size:11px; letter-spacing:.28em; margin:0 0 15px; }
h1 { margin:0 0 32px; text-transform:uppercase; font-weight:300; font-size:clamp(42px,5vw,72px); line-height:1.08; letter-spacing:.02em; }
h1 em { color:var(--gold); font-style:normal; }
.scroll { position:absolute; right:4vw; bottom:30px; width:46px; height:46px; border:1px solid #a98c58; color:var(--gold); border-radius:50%; display:grid; place-items:center; }
.portfolio { padding:100px 5vw 120px; border-top:1px solid #272929; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:35px; }
.section-heading p,.project-intro>p { color:var(--gold); font-size:10px; letter-spacing:.18em; margin:0 0 16px; }
.section-heading h2 { text-transform:uppercase; font-size:34px; font-weight:300; margin:0; }
.portfolio-filter { display:flex; gap:8px; margin:0 0 28px; flex-wrap:wrap; }
.portfolio-filter button { appearance:none; border:1px solid #343735; background:transparent; color:#9fa09b; padding:11px 17px; font:inherit; font-size:10px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:.25s; }
.portfolio-filter button:hover,.portfolio-filter button.active { border-color:var(--gold); background:var(--gold); color:#0b0d0c; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.project-card[hidden] { display:none; }
.project-card { position:relative; display:block; overflow:hidden; min-height:0; aspect-ratio:4/3; }
.project-card>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.project-card:hover>img { transform:scale(1.025); }
.project-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,7,7,.72),transparent 42%); }
.project-title { position:absolute; left:22px; right:72px; bottom:20px; }
.project-title span { color:var(--gold); font-size:9px; letter-spacing:.18em; }
.project-title h3 { margin:6px 0 0; font-size:clamp(18px,1.7vw,28px); font-weight:300; text-transform:uppercase; letter-spacing:.02em; }
.project-arrow { position:absolute; right:18px; bottom:18px; width:42px; height:42px; border:1px solid rgba(198,166,106,.85); border-radius:50%; display:grid; place-items:center; color:var(--gold); font-size:17px; }
.project-badge { position:absolute; right:18px; top:18px; width:78px; height:46px; border:1px solid rgba(198,166,106,.98); background:rgba(8,10,10,.82); backdrop-filter:blur(10px); display:grid; place-items:center; color:var(--gold); font-size:14px; font-weight:500; letter-spacing:.12em; box-shadow:0 12px 30px rgba(0,0,0,.24); transition:.3s; }
.project-card:hover .project-badge { background:var(--gold); color:#0b0d0c; transform:translateY(-2px); }
.services { padding:120px 8vw 135px; border-top:1px solid #272929; }
.services-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:70px; }
.services-heading>p { color:var(--gold); font-size:10px; letter-spacing:.2em; margin:0; }
.services-heading h2 { margin:0; text-transform:uppercase; font-size:clamp(38px,4.6vw,68px); line-height:1.04; font-weight:300; text-align:right; }
.services-heading h2 em { color:var(--gold); font-style:normal; }
.services-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid rgba(198,166,106,.5); border-bottom:1px solid #2a2c2b; }
.service-card { min-height:330px; padding:32px 38px 42px 0; }
.service-card+.service-card { border-left:1px solid #2a2c2b; padding-left:38px; }
.service-card>span { color:var(--gold); font-size:11px; letter-spacing:.16em; }
.service-card h3 { margin:72px 0 22px; max-width:280px; text-transform:uppercase; font-size:clamp(22px,2.2vw,32px); line-height:1.08; font-weight:300; }
.service-card p { margin:0; max-width:370px; color:#aaa9a4; font-size:16px; line-height:1.65; }
.about { padding:120px 8vw 140px; border-top:1px solid #272929; display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:8vw; }
.about-heading>p { color:var(--gold); font-size:10px; letter-spacing:.2em; margin:0 0 22px; }
.about-heading h2 { margin:0; text-transform:uppercase; font-size:clamp(38px,4.6vw,68px); line-height:1.04; font-weight:300; }
.about-heading h2 em { color:var(--gold); font-style:normal; }
.about-content { display:grid; gap:55px; }
.about-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid rgba(198,166,106,.48); border-bottom:1px solid #2a2c2b; }
.about-stats div { padding:30px 0 28px; display:flex; flex-direction:column; gap:8px; }
.about-stats div+div { border-left:1px solid #2a2c2b; padding-left:38px; }
.about-stats strong { color:var(--gold); font-size:clamp(44px,5vw,72px); line-height:1; font-weight:300; }
.about-stats span { color:#b8b8b2; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.about-copy { max-width:760px; }
.about-copy p { margin:0 0 22px; color:#c9c9c3; font-size:17px; line-height:1.75; }
.about-copy p:first-child { color:#f0eee8; font-size:21px; line-height:1.6; }
.contact { padding:120px 8vw 38px; border-top:1px solid #272929; background:linear-gradient(135deg,#111514,#080a0a 68%); }
.contact>p { color:var(--gold); font-size:10px; letter-spacing:.2em; margin:0 0 24px; }
.contact h2 { margin:0 0 85px; text-transform:uppercase; font-size:clamp(48px,7vw,104px); line-height:.98; font-weight:300; }
.contact h2 em { color:var(--gold); font-style:normal; }
.contact-links { border-top:1px solid rgba(198,166,106,.5); }
.contact-links a { min-height:118px; display:grid; grid-template-columns:170px minmax(0,1fr) 44px; align-items:center; gap:28px; border-bottom:1px solid #2a2c2b; transition:.3s; }
.contact-links a:hover { padding-left:16px; color:var(--gold); }
.contact-links span { color:#969792; font-size:10px; letter-spacing:.18em; }
.contact-links strong { font-size:clamp(20px,2.4vw,36px); font-weight:300; overflow-wrap:anywhere; }
.contact-links i { width:44px; height:44px; border:1px solid rgba(198,166,106,.8); border-radius:50%; display:grid; place-items:center; color:var(--gold); font-style:normal; }
.contact-footer { margin-top:85px; padding-top:30px; border-top:1px solid #222524; display:flex; justify-content:space-between; color:#777975; font-size:9px; letter-spacing:.15em; }
.language-toggle { position:fixed; z-index:80; right:22px; bottom:22px; display:flex; align-items:center; gap:7px; padding:10px 13px; border:1px solid rgba(198,166,106,.6); background:rgba(8,10,10,.86); backdrop-filter:blur(12px); box-shadow:0 12px 35px rgba(0,0,0,.3); }
.language-toggle button { border:0; padding:2px; background:none; color:#777a76; font:inherit; font-size:10px; letter-spacing:.12em; cursor:pointer; }
.language-toggle button.active { color:var(--gold); }
.language-toggle span { color:#4d504e; font-size:10px; }
.back-to-top { display:none; position:fixed; z-index:80; left:14px; bottom:14px; width:48px; height:48px; border:1px solid rgba(198,166,106,.72); background:rgba(8,10,10,.86); color:var(--gold); backdrop-filter:blur(12px); box-shadow:0 12px 35px rgba(0,0,0,.3); font:inherit; font-size:21px; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s,visibility .25s,transform .25s,background .25s,color .25s; }
.back-to-top.visible { opacity:1; visibility:visible; transform:none; }
.back-to-top:hover { background:var(--gold); color:#090b0b; }
.lightbox { position:fixed; z-index:200; inset:0; display:grid; place-items:center; padding:30px 85px 55px; background:rgba(3,4,4,.96); backdrop-filter:blur(10px); }
.lightbox img { display:block; max-width:100%; max-height:calc(100vh - 85px); width:auto; height:auto; object-fit:contain; box-shadow:0 22px 80px rgba(0,0,0,.5); }
.lightbox button { position:absolute; border:1px solid rgba(198,166,106,.65); background:rgba(9,11,11,.72); color:var(--gold); width:52px; height:52px; border-radius:50%; font-size:21px; cursor:pointer; transition:.2s; }
.lightbox button:hover { background:var(--gold); color:#090b0b; }
.lightbox-close { top:22px; right:22px; }
.lightbox-prev { left:22px; top:50%; transform:translateY(-50%); }
.lightbox-next { right:22px; top:50%; transform:translateY(-50%); }
.lightbox-count { position:absolute; bottom:20px; color:#9c9e99; font-size:10px; letter-spacing:.18em; }
.project-page { background:#090b0b; min-height:100vh; }
.project-nav { height:90px; padding:0 5vw; display:flex; align-items:center; border-bottom:1px solid #262828; }
.back-link { margin-left:auto; color:#c9c8c2; font-size:10px; letter-spacing:.12em; text-transform:uppercase; transition:.25s; }
.back-link:hover,.project-footer a:hover { color:var(--gold); }
.project-intro { padding:110px 8vw 85px; }
.project-intro h1 { margin:0; font-size:clamp(58px,9vw,132px); line-height:.86; }
.project-intro-360 { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); align-items:end; gap:5vw; }
.project-intro-360 h1 { font-size:clamp(58px,6vw,96px); letter-spacing:-.02em; }
.tour-card { min-height:250px; padding:38px; border:1px solid rgba(198,166,106,.55); background:radial-gradient(circle at 22% 50%,rgba(198,166,106,.17),transparent 34%),linear-gradient(135deg,#151817,#090b0b); display:flex; align-items:center; gap:35px; transition:.35s; }
.tour-card:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,0,0,.28); }
.tour-orbit { width:132px; height:132px; flex:0 0 132px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold); font-size:28px; font-weight:300; position:relative; }
.tour-orbit::after { content:""; position:absolute; inset:-9px 15px; border-top:1px solid rgba(198,166,106,.62); border-bottom:1px solid rgba(198,166,106,.62); border-radius:50%; transform:rotate(-24deg); }
.tour-copy { display:flex; flex-direction:column; }
.tour-copy small { color:var(--gold); font-size:8px; letter-spacing:.2em; margin-bottom:12px; }
.tour-copy strong { font-size:clamp(22px,2.2vw,34px); line-height:1.05; font-weight:300; text-transform:uppercase; }
.tour-copy em { color:#b9bab5; font-size:9px; font-style:normal; letter-spacing:.12em; text-transform:uppercase; margin-top:28px; }
.project-gallery { width:min(1500px,90vw); margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.project-gallery figure { margin:0; overflow:hidden; background:#111; }
.project-gallery figure.wide { grid-column:1/-1; }
.project-gallery img { width:100%; height:100%; min-height:420px; display:block; object-fit:cover; cursor:zoom-in; transition:filter .25s; }
.project-gallery img:hover { filter:brightness(.9); }
.project-gallery .wide img { aspect-ratio:16/9; }
.portrait-gallery figure { min-height:760px; }
.portrait-gallery figure.wide { min-height:900px; }
.portrait-gallery img { object-position:center; }
.tour-footer-cta { margin:120px auto 0; width:min(1500px,90vw); min-height:440px; padding:80px; background:linear-gradient(90deg,rgba(8,10,10,.94),rgba(8,10,10,.42)),url('../images/vos-residence/04.jpg') center 48%/cover; border:1px solid #292b2a; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.tour-footer-cta p { color:var(--gold); font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.tour-footer-cta h2 { margin:10px 0 32px; font-size:clamp(40px,5vw,72px); line-height:.98; font-weight:300; text-transform:uppercase; }
.tour-footer-cta h2 em { color:var(--gold); font-style:normal; }
.project-footer { margin-top:100px; padding:45px 5vw; border-top:1px solid #262828; display:flex; justify-content:space-between; color:#9a9b96; font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
@media (max-width:900px) { .nav { height:72px; padding:0 20px; }.nav nav { display:none; }.outline { padding:11px; font-size:8px; }.hero-content { left:24px; }.hero-image { object-position:55% center; }.project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.services { padding:95px 6vw 110px; }.services-heading { align-items:flex-start; flex-direction:column; }.services-heading h2 { text-align:left; }.services-grid { grid-template-columns:1fr; }.service-card { min-height:0; padding:30px 0 42px; }.service-card+.service-card { border-left:0; border-top:1px solid #2a2c2b; padding-left:0; }.service-card h3 { margin-top:38px; }.about { grid-template-columns:1fr; gap:60px; padding:95px 6vw 110px; }.about-heading { max-width:650px; }.contact { padding:95px 6vw 34px; }.project-intro-360 { grid-template-columns:1fr; align-items:stretch; }.tour-card { max-width:620px; } }
@media (max-width:600px) { .brand span { font-size:11px; }.brand img { width:30px; height:30px; }.brand small { display:none; }.outline { display:none; }.hero { min-height:700px; }.hero-image { object-position:52% center; }.shade { background:linear-gradient(90deg,rgba(5,7,7,.69),rgba(5,7,7,.08) 90%),linear-gradient(0deg,rgba(5,7,7,.56),transparent 55%); }.hero-content { right:20px; }.hero-mark { width:50px; height:50px; } h1 { font-size:39px; }.portfolio { padding:75px 20px 80px; }.project-grid { grid-template-columns:1fr; gap:14px; }.project-card { aspect-ratio:4/3; }.project-card>img { object-position:48% center; }.project-title { left:20px; right:72px; bottom:20px; }.project-title span { line-height:1.5; }.project-title h3 { font-size:25px; }.project-arrow { right:18px; bottom:18px; width:44px; height:44px; }.project-badge { right:18px; top:18px; width:82px; height:50px; font-size:15px; }.about { padding:75px 20px 90px; gap:45px; }.about-stats { grid-template-columns:1fr; }.about-stats div+div { border-left:0; border-top:1px solid #2a2c2b; padding-left:0; }.about-copy p { font-size:16px; line-height:1.7; }.about-copy p:first-child { font-size:19px; }.project-nav { height:72px; padding:0 20px; }.back-link { font-size:8px; }.project-intro { padding:75px 20px 55px; }.project-intro h1 { font-size:52px; }.tour-card { min-height:0; padding:26px 20px; gap:18px; }.tour-orbit { width:92px; height:92px; flex-basis:92px; font-size:20px; }.tour-copy strong { font-size:20px; }.tour-copy em { margin-top:18px; font-size:7px; }.project-gallery { width:calc(100% - 40px); grid-template-columns:1fr; gap:10px; }.project-gallery figure.wide { grid-column:auto; }.project-gallery img { min-height:0; aspect-ratio:4/3; }.project-gallery .wide img { aspect-ratio:4/3; }.portrait-gallery figure,.portrait-gallery figure.wide { min-height:0; }.portrait-gallery img,.portrait-gallery .wide img { aspect-ratio:3/4; }.tour-footer-cta { margin-top:70px; width:calc(100% - 40px); min-height:480px; padding:35px 24px; background-position:58% center; }.project-footer { margin-top:70px; padding:35px 20px; } }
@media (max-width:600px) { .contact { padding:75px 20px 28px; }.contact h2 { margin-bottom:55px; }.contact-links a { min-height:110px; grid-template-columns:1fr 42px; gap:12px; }.contact-links span { grid-column:1/-1; align-self:end; }.contact-links strong { align-self:start; font-size:20px; }.contact-links i { grid-column:2; grid-row:2; align-self:start; }.contact-footer { margin-top:60px; gap:25px; line-height:1.6; } }
@media (max-width:600px) { .portfolio-filter { gap:6px; }.portfolio-filter button { flex:1 1 auto; padding:10px 8px; font-size:8px; }.language-toggle { right:14px; bottom:14px; }.lightbox { padding:65px 12px 75px; }.lightbox img { max-height:calc(100vh - 140px); }.lightbox button { width:44px; height:44px; }.lightbox-close { top:14px; right:14px; }.lightbox-prev { left:12px; top:auto; bottom:14px; transform:none; }.lightbox-next { right:12px; top:auto; bottom:14px; transform:none; }.lightbox-count { bottom:30px; } }
@media (max-width:900px) {
  .back-to-top { display:grid; place-items:center; }
  .menu-toggle { display:flex; position:relative; z-index:102; width:48px; height:48px; border:1px solid rgba(198,166,106,.72); background:rgba(8,10,10,.45); flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; }
  .menu-toggle span { width:20px; height:1px; background:var(--gold); transition:transform .3s,opacity .3s; }
  .menu-toggle.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity:0; }
  .menu-toggle.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
  .mobile-menu { display:flex; position:fixed; z-index:101; inset:0; padding:115px 28px 36px; background:linear-gradient(145deg,#111514,#070909 75%); flex-direction:column; justify-content:space-between; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-12px); transition:opacity .3s,visibility .3s,transform .3s; }
  .mobile-menu.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .mobile-menu nav { display:flex; flex-direction:column; gap:0; }
  .mobile-menu nav a { min-height:72px; display:flex; align-items:center; gap:22px; border-bottom:1px solid #2a2d2b; color:#f0eee8; font-size:clamp(25px,7vw,38px); font-weight:300; letter-spacing:.01em; text-transform:uppercase; }
  .mobile-menu nav a:first-child { border-top:1px solid rgba(198,166,106,.5); }
  .mobile-menu nav a span { color:var(--gold); font-size:9px; letter-spacing:.15em; }
  .mobile-menu-contact { display:flex; flex-direction:column; gap:10px; color:#aaa9a4; font-size:13px; letter-spacing:.04em; }
}

[hidden]{display:none!important}.static-lightbox{position:fixed;z-index:300;inset:0;background:rgba(3,4,4,.96);display:grid;place-items:center;padding:30px 85px 55px}.static-lightbox img{max-width:100%;max-height:calc(100vh - 85px);object-fit:contain}.static-lightbox button{position:absolute;border:1px solid rgba(198,166,106,.65);background:rgba(9,11,11,.72);color:#c6a66a;width:52px;height:52px;border-radius:50%;font-size:21px;cursor:pointer}.static-lightbox .close{top:22px;right:22px}.static-lightbox .prev{left:22px;top:50%}.static-lightbox .next{right:22px;top:50%}.static-lightbox .count{position:absolute;bottom:20px;color:#aaa;font-size:11px}@media(max-width:600px){.static-lightbox{padding:65px 12px 75px}.static-lightbox .prev{left:12px;top:auto;bottom:14px}.static-lightbox .next{right:12px;top:auto;bottom:14px}}