@font-face{font-family:"Arian AMU Serif";src:url(../fonts/ArianAMUSerif.woff2) format("woff2");font-weight:100 500;font-style:normal;font-display:swap}
@font-face{font-family:"Arian AMU Serif";src:url(../fonts/ArianAMUSerif-Bold.woff2) format("woff2");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:"Arian AMU Serif";src:url(../fonts/ArianAMUSerif-Italic.woff2) format("woff2");font-weight:100 500;font-style:italic;font-display:swap}
:root{
  
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-80: 80px;
  --space-96: 96px; --space-120: 120px; --space-160: 160px;

  
  --container: 1280px;
  --gutter: 24px;
  --side-pad: 16px;
  --section-pad: 96px;
  --section-pad-tight: 64px;
  --header-h: 80px;
  --touch: 44px;
  --logo-h: 40px;
  --control-h: 52px;
  --border-width: 1px;
  --focus-width: 3px;
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;
  --roof-sm: 20px; --roof-md: 32px; --roof-lg: 72px;
  --measure: 64ch;

  
  --map-card-min: 280px;

  
  --hero-text-align: left; --hero-copy-items: flex-start; --hero-copy-mx: 0; --hero-actions-justify: flex-start;
  --img-filter: none;
  --btn-gold-bg: var(--color-accent); --btn-gold-text: var(--color-brand); --btn-gold-border: transparent;
  --btn-gold-hover-bg: var(--color-accent-on-brand); --btn-gold-hover-text: var(--color-brand);
  --fab-bg: var(--color-accent); --fab-text: var(--color-brand);

  
  --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-shift: 24px;
}
@media (max-width: 1439px){
:root{ --side-pad: 16px; } }
@media (max-width: 1024px){
:root{ --side-pad: 32px; --section-pad: 72px; --section-pad-tight: 48px; --gutter: 20px; } }
@media (max-width: 767px){
:root{ --side-pad: 16px; --section-pad: 48px; --section-pad-tight: 32px; --gutter: 16px; --header-h: 64px; --reveal-shift: 16px; --logo-h: 40px; } }
:root{
  color-scheme: light;
  --dir-name: "A";
  --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-alt: #F1F4F8; --color-brand: #002147; --color-panel-border: transparent;
  --color-text-primary: #002147; --color-text-secondary: #3E4C63; --color-text-muted: #56627A; --color-text-inverse: #FFFFFF;
  --color-text-on-brand: #FFFFFF; --color-muted-on-brand: #C3CCDB; --color-border: #D6DDE8; --color-border-on-brand: #1F3E6B;
  --color-primary: #002147; --color-primary-hover: #0C356E; --color-on-primary: #FFFFFF;
  --color-secondary-text: #002147; --color-secondary-border: #BA994A; --color-secondary-hover-bg: #F6F0E2;
  --color-accent: #BA994A; --color-accent-text: #7A6127; --color-accent-on-brand: #D2B46C; --color-roof: #BA994A; --color-roof-on-brand: #BA994A;
  --color-focus: #BA994A;
  --color-tag-bg: #FFFFFF; --color-tag-text: #002147;
  --color-avail-bg: #E4F1E9; --color-avail-text: #1C5E3C; --color-reserved-bg: #FBF0D9; --color-reserved-text: #7A5200; --color-sold-bg: #ECEFF3; --color-sold-text: #4B5563;
  --color-header-bg: #FFFFFF; --color-header-bg-solid: #FFFFFF; --color-header-text: #002147; --color-header-text-solid: #002147; --color-header-border: #D6DDE8;
  --color-footer-bg: #001633; --color-footer-text: #FFFFFF; --color-footer-muted: #AEB9CC; --color-footer-border: #1C355A;
  --color-input-bg: #FFFFFF; --color-input-border: #B9C3D3; --color-hero-text: #FFFFFF; --color-hero-lead: #E4E9F1;
  --color-card-bg: #FFFFFF; --color-card-border: #D6DDE8; --color-search-bg: #FFFFFF;

  --font-display: "Arian AMU Serif", "Noto Serif Armenian", Georgia, serif;
  --font-body: "Noto Sans Armenian", "Noto Sans", Arial, sans-serif;
  --font-ui: "Noto Sans Armenian", "Noto Sans", Arial, sans-serif;
  --weight-display: 700; --weight-heading: 700; --weight-body: 400; --weight-strong: 600; --display-stretch: 100%; --tracking-display: -0.01em;

  --text-display: 60px; --lh-display: 68px; --text-h2: 40px; --lh-h2: 48px; --text-h3: 22px; --lh-h3: 30px;
  --text-body-lg: 18px; --lh-body-lg: 30px; --text-body: 16px; --lh-body: 26px; --text-small: 14px; --lh-small: 22px;
  --text-caption: 13px; --lh-caption: 20px; --text-price: 20px; --text-button: 15px; --text-nav: 15px; --text-region: 26px;

  --radius-sm: 2px; --radius-md: 2px; --radius-lg: 4px; --radius-btn: 2px; --radius-card: 2px; --radius-img: 0px; --radius-chip: 2px;
  --shadow-sm: 0 1px 2px rgba(0, 33, 71, 0.06); --shadow-md: 0 12px 32px rgba(0, 33, 71, 0.12); --shadow-lg: 0 24px 60px rgba(0, 33, 71, 0.22);

  --hero-cols: 1fr; --hero-media-col: 1 / -1; --hero-media-row: 1; --hero-content-col: 1 / -1; --hero-content-row: 1;
  --hero-min-h: 720px; --hero-content-bg: transparent; --hero-content-align: center; --hero-content-pad: 96px;
  --hero-shade: linear-gradient(90deg, rgba(0, 22, 51, 0.88) 0%, rgba(0, 22, 51, 0.66) 42%, rgba(0, 22, 51, 0.08) 78%);
  --hero-title-max: 16ch; --search-overlap: -48px; --search-shadow: 0 24px 60px rgba(0, 33, 71, 0.18);
  --img-clip: none; --card-pad: 24px; --card-lift: -4px;
  --hero-position: relative; --stack-position: relative; --stack-radius: 0px; --stack-shadow: none;
  --hero-inner-max: calc(var(--container) + var(--side-pad) * 2); --hero-inner-start: var(--side-pad); --hero-inner-end: var(--side-pad); --hero-img-filter: none; --display-wdth: normal;
  --motion-level: 3; --parallax: 0;
}
@media (max-width: 1024px){
:root{ --text-display: 48px; --lh-display: 56px; --text-h2: 34px; --lh-h2: 42px; --hero-min-h: 620px; --hero-content-pad: 72px; } }
@media (max-width: 767px){
:root{
  --text-display: 36px; --lh-display: 44px; --text-h2: 28px; --lh-h2: 36px; --text-h3: 20px; --lh-h3: 28px; --text-body-lg: 17px; --lh-body-lg: 28px; --text-region: 22px;
  --hero-min-h: 560px; --hero-content-pad: 48px; --hero-content-align: end; --search-overlap: 0px;
  --hero-shade: linear-gradient(0deg, rgba(0, 22, 51, 0.92) 0%, rgba(0, 22, 51, 0.7) 55%, rgba(0, 22, 51, 0.2) 100%); } }
:root{--roof-mask:url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%2058%22%20xmlns%3Ac2pa%3D%22http%3A//c2pa.org/manifest%22%3E%3Cmetadata%3E%3Cc2pa%3Amanifest%3EAAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTo5YmU4YTk2ZC0xYTU1LTRjMzgtOThmMy0xY2M2MTdjYTlhODAAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaKnxbQ0KhcGX286SxtXgF%2BsAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDplMDkwOTNkMS02YjhiLTRlYTgtYWUxNi00OTEwYmMxMjM5ZThscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNojKvoqt489y1i1rcz9DL7QQAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggVkVpktk/dKdtLqc%2BWfAOHc/SmLXE8dcR8k9a234tSGmkZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaK1DZ2RhcJ9bPJiZUD6iLGUAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCAMOTY0uBUt3mZxJCcs3JuFaQ5LKN1OfPXBpy%2BZ%2B5Fr42RuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBh8Zmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOjliZThhOTZkLTFhNTUtNGMzOC05OGYzLTFjYzYxN2NhOWE4MC9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOmU5YWJjN2I0LWMzMjYtNDdjNy05YmM3LTA0MTlhMmY4ZDI3NXJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCBWRWmS2T90p20upz5Z8A4dz9KYtcTx1xHyT1rbfi1IaaJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggoQ5CetYXREsSabjkVZzvdPkvXTJaZaTYh1MqA6AtrlOiY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggcZKf0SvYGrwwjG%2BrJ1gEpqMnv8xfIGeLfu//G4H63vd0Y2xhaW1fZ2VuZXJhdG9yX2luZm%2BjZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj%2BOPEz5o%2BnMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1%2BUCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9%2B1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQBMRAGDTle94SCRBhyDhef2CFOWTa7kHLJy0IKzzy9c6o9Vi6PXlWx8XjytkC/wd2YcKhKiAD4TzC4KIYYXgqhM%3D%3C/c2pa%3Amanifest%3E%3C/metadata%3E%3Cpath%20d%3D%22M50%200%20L100%2049.7%20L91.9%2057.6%20L50%2015.9%20L8.1%2057.6%20L0%2049.7%20Z%22/%3E%3Cpath%20d%3D%22M78.5%2016%20H88%20V36.1%20L78.5%2026.5%20Z%22/%3E%3C/svg%3E");--theme-toggle:inline-flex;}
:root{  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F4F8;
  --color-brand: #002147;
  --color-panel-border: transparent;
  --color-text-primary: #002147;
  --color-text-secondary: #3E4C63;
  --color-text-muted: #56627A;
  --color-text-inverse: #FFFFFF;
  --color-text-on-brand: #FFFFFF;
  --color-muted-on-brand: #C3CCDB;
  --color-border: #D6DDE8;
  --color-border-on-brand: #1F3E6B;
  --color-primary: #002147;
  --color-primary-hover: #0C356E;
  --color-on-primary: #FFFFFF;
  --color-secondary-text: #002147;
  --color-secondary-border: #BA994A;
  --color-secondary-hover-bg: #F6F0E2;
  --color-accent: #BA994A;
  --color-accent-text: #7A6127;
  --color-accent-on-brand: #D2B46C;
  --color-roof: #BA994A;
  --color-roof-on-brand: #BA994A;
  --color-focus: #BA994A;
  --color-tag-bg: #FFFFFF;
  --color-tag-text: #002147;
  --color-avail-bg: #E4F1E9;
  --color-avail-text: #1C5E3C;
  --color-reserved-bg: #FBF0D9;
  --color-reserved-text: #7A5200;
  --color-sold-bg: #ECEFF3;
  --color-sold-text: #4B5563;
  --color-header-bg: #FFFFFF;
  --color-header-bg-solid: #FFFFFF;
  --color-header-text: #002147;
  --color-header-text-solid: #002147;
  --color-header-border: #D6DDE8;
  --color-footer-bg: #001633;
  --color-footer-text: #FFFFFF;
  --color-footer-muted: #AEB9CC;
  --color-footer-border: #1C355A;
  --color-input-bg: #FFFFFF;
  --color-input-border: #B9C3D3;
  --color-hero-text: #FFFFFF;
  --color-hero-lead: #E4E9F1;
  --color-card-bg: #FFFFFF;
  --color-card-border: #D6DDE8;
  --color-search-bg: #FFFFFF;

  --color-text-primary: #3D3430; --color-text-secondary: #5A4F49; --color-text-muted: #665C56;
  --color-surface-alt: #F4F1EE; --color-brand: #5A4C44; --color-border: #DDD5CF; --color-border-on-brand: #74655C;
  --color-muted-on-brand: #E6DED8; --color-accent-on-brand: #EED7A0;
  --color-primary: #5A4C44; --color-primary-hover: #6E5F56; --color-secondary-text: #3D3430; --color-secondary-hover-bg: #F6F0E2;
  --color-tag-text: #3D3430; --color-header-text: #3D3430; --color-header-text-solid: #3D3430; --color-header-border: #DDD5CF;
  --color-footer-bg: #2E2622; --color-footer-muted: #C2B8B1; --color-footer-border: #463B35;
  --color-input-border: #BDB2AA; --color-card-border: #DDD5CF;
  --hero-shade: linear-gradient(90deg, rgba(46, 38, 34, 0.88) 0%, rgba(46, 38, 34, 0.64) 42%, rgba(46, 38, 34, 0.08) 78%);
  --region-shade: linear-gradient(180deg, rgba(46, 38, 34, 0) 35%, rgba(46, 38, 34, 0.86) 100%);
  --dialog-backdrop: rgba(46, 38, 34, 0.6);
  --shadow-sm: 0 1px 2px rgba(46, 38, 34, 0.06); --shadow-md: 0 12px 32px rgba(46, 38, 34, 0.12); --shadow-lg: 0 24px 60px rgba(46, 38, 34, 0.22);
  --search-shadow: 0 24px 60px rgba(46, 38, 34, 0.18);
  --btn-gold-text: #2E2622; --btn-gold-hover-text: #2E2622; --fab-text: #2E2622;
  --chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3%206l5%205%205-5%22%20fill%3D%22none%22%20stroke%3D%22%235A4F49%22%20stroke-width%3D%221.6%22/%3E%3C/svg%3E");
  --color-error: #B42318; --color-error-bg: #FDECEA; --color-error-text: #A3190F;
  --logo-light: block; --logo-dark: none; --icon-sun: none; --icon-moon: inline-flex; color-scheme: light;}
:root:not([data-theme="light"]){  --color-bg: #0A1628; --color-surface: #0F1F36; --color-surface-alt: #0D1B30; --color-brand: #102A52; --color-panel-border: #2C4670;
  --color-text-primary: #EEF1F6; --color-text-secondary: #B8C2D3; --color-text-muted: #98A4B9; --color-text-inverse: #0A1628;
  --color-text-on-brand: #FFFFFF; --color-muted-on-brand: #C3CCDB; --color-border: #23385A; --color-border-on-brand: #2C4670;
  --color-primary: #BA994A; --color-primary-hover: #D2B46C; --color-on-primary: #0A1628;
  --color-secondary-text: #EEF1F6; --color-secondary-border: #BA994A; --color-secondary-hover-bg: #16294A;
  --color-accent-text: #D2B46C; --color-focus: #D2B46C;
  --color-tag-bg: #0A1628; --color-tag-text: #EEF1F6;
  --color-avail-bg: #0F3B2A; --color-avail-text: #9FE0BC; --color-reserved-bg: #3F3212; --color-reserved-text: #F0D493; --color-sold-bg: #1E2A3D; --color-sold-text: #B4BECF;
  --color-header-bg: #0A1628; --color-header-bg-solid: #0A1628; --color-header-text: #EEF1F6; --color-header-text-solid: #EEF1F6; --color-header-border: #23385A;
  --color-footer-bg: #060F1D; --color-footer-border: #1C2E4C;
  --color-input-bg: #0A1628; --color-input-border: #3A5078; --color-card-bg: #0F1F36; --color-card-border: #23385A; --color-search-bg: #0F1F36;
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45); --search-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);


  --color-bg: #1B1714; --color-surface: #25201C; --color-surface-alt: #201B18; --color-brand: #3A302A; --color-panel-border: #5A4C44;
  --color-text-primary: #F2EDE8; --color-text-secondary: #CFC5BD; --color-text-muted: #A99F97; --color-text-inverse: #1B1714;
  --color-border: #3B332E; --color-border-on-brand: #5A4C44; --color-muted-on-brand: #CFC5BD;
  --color-on-primary: #1B1714; --color-secondary-text: #F2EDE8; --color-secondary-hover-bg: #2E2723;
  --color-tag-bg: #1B1714; --color-tag-text: #F2EDE8;
  --color-header-bg: #1B1714; --color-header-bg-solid: #1B1714; --color-header-text: #F2EDE8; --color-header-text-solid: #F2EDE8; --color-header-border: #3B332E;
  --color-footer-bg: #120F0D; --color-footer-border: #2E2723;
  --color-input-bg: #1B1714; --color-input-border: #5A4F48; --color-card-bg: #25201C; --color-card-border: #3B332E; --color-search-bg: #25201C;
  --color-text-on-brand: #F2EDE8;
  --color-sold-bg: #2E2723; --color-sold-text: #CFC5BD;
  --color-error: #F97066; --color-error-bg: #3A1714; --color-error-text: #FDA29B;
  --logo-light: none; --logo-dark: block; --icon-sun: inline-flex; --icon-moon: none; color-scheme: dark;
  --btn-gold-text: #1B1714; --btn-gold-hover-text: #1B1714; --fab-text: #1B1714;
  --chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3%206l5%205%205-5%22%20fill%3D%22none%22%20stroke%3D%22%23B9AFA7%22%20stroke-width%3D%221.6%22/%3E%3C/svg%3E");}
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
.vd-proto{ margin: 0; background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--weight-body); overflow-x: hidden; }
.vd-proto img{ max-width: 100%; display: block; }
[hidden]{ display: none !important; }
.vd-proto button, .vd-proto input, .vd-proto select{ font: inherit; color: inherit; }
:focus-visible{ outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--space-4); }
.vd-proto .vd-skip{ position: absolute; left: var(--space-16); top: -100px; z-index: 100; padding: var(--space-12) var(--space-16); background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-btn); font-family: var(--font-ui); }
.vd-proto .vd-skip:focus{ top: var(--space-16); }
.vd-proto .vd-container{ width: 100%; max-width: calc(var(--container) + var(--side-pad) * 2); margin: 0 auto; padding: 0 var(--side-pad); }
.vd-proto .vd-section{ position: var(--stack-position); top: 0; padding: var(--section-pad) 0; background: var(--color-bg); z-index: 1; }
.vd-proto .vd-section-alt{ background: var(--color-surface-alt); }
.vd-proto .vd-section-brand{ background: var(--color-brand); color: var(--color-text-on-brand); }
.vd-proto .vd-stack{ border-radius: var(--stack-radius) var(--stack-radius) 0 0; box-shadow: var(--stack-shadow); }
.vd-proto .vd-section-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-48); flex-wrap: wrap; }
.vd-proto .vd-section-head-center{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-16); margin: 0 auto var(--space-48); max-width: 720px; }
.vd-proto .vd-section-titles{ display: flex; flex-direction: column; gap: var(--space-16); max-width: 720px; }
.vd-proto .vd-roof-mark{ display: block; width: var(--roof-md); height: calc(var(--roof-md) * 0.58); background: var(--color-roof); -webkit-mask: var(--roof-mask) center / contain no-repeat; mask: var(--roof-mask) center / contain no-repeat; }
.vd-proto .vd-roof-mark-brand{ background: var(--color-roof-on-brand); }
.vd-proto .vd-h2{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-display); }
.vd-proto .vd-lead{ margin: 0; font-size: var(--text-body-lg); line-height: var(--lh-body-lg); color: var(--color-text-secondary); max-width: var(--measure); }
.vd-proto .vd-lead-brand{ color: var(--color-muted-on-brand); }
.vd-proto .vd-link-more{ display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--touch); font-family: var(--font-ui); font-weight: var(--weight-strong); font-size: var(--text-button); color: var(--color-text-primary); text-decoration: none; border-bottom: var(--border-width) solid var(--color-accent); transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.vd-proto .vd-link-more:hover{ color: var(--color-accent-text); border-color: var(--color-text-primary); }
.vd-proto .vd-link-more-brand{ color: var(--color-text-on-brand); border-color: var(--color-accent-on-brand); }
.vd-proto .vd-link-more-brand:hover{ color: var(--color-accent-on-brand); border-color: var(--color-text-on-brand); }
.vd-proto .vd-btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--control-h); padding: 0 var(--space-24); border-radius: var(--radius-btn); border: var(--border-width) solid transparent; font-family: var(--font-ui); font-size: var(--text-button); font-weight: var(--weight-strong); line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.vd-proto .vd-btn:active{ transform: translateY(1px); }
.vd-proto .vd-btn-primary{ background: var(--color-primary); color: var(--color-on-primary); }
.vd-proto .vd-btn-primary:hover{ background: var(--color-primary-hover); }
.vd-proto .vd-btn-gold{ background: var(--btn-gold-bg); color: var(--btn-gold-text); border-color: var(--btn-gold-border); }
.vd-proto .vd-btn-gold:hover{ background: var(--btn-gold-hover-bg); color: var(--btn-gold-hover-text); }
.vd-proto .vd-btn-secondary{ background: transparent; color: var(--color-secondary-text); border-color: var(--color-secondary-border); }
.vd-proto .vd-btn-secondary:hover{ background: var(--color-secondary-hover-bg); }
.vd-proto .vd-btn-ghost-inverse{ background: transparent; color: var(--color-hero-text); border-color: var(--color-hero-text); }
.vd-proto .vd-btn-ghost-inverse:hover{ background: var(--color-hero-text); color: var(--color-brand); }
.vd-proto .vd-btn-block{ width: 100%; }
.vd-proto .vd-btn-icon{ width: var(--icon-md); height: var(--icon-md); flex: none; }
.vd-proto .vd-header{ position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: var(--color-header-bg); color: var(--color-header-text); border-bottom: var(--border-width) solid var(--color-header-border); transition: background-color var(--duration-base) var(--ease-out), backdrop-filter var(--duration-base) var(--ease-out); }
.vd-proto .vd-header-solid{ background: var(--color-header-bg-solid); color: var(--color-header-text-solid); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.vd-proto .vd-header-inner{ height: 100%; display: flex; align-items: center; gap: var(--space-24); }
.vd-proto .vd-logo{ display: flex; align-items: center; flex: none; text-decoration: none; color: inherit; }
.vd-proto .vd-logo-img{ height: var(--logo-h); width: auto; display: var(--logo-light); }
.vd-proto .vd-logo-img-dark{ height: var(--logo-h); width: auto; display: var(--logo-dark); }
.vd-proto .vd-theme-btn{ display: var(--theme-toggle); align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border: var(--border-width) solid var(--color-header-border); border-radius: var(--radius-btn); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.vd-proto .vd-theme-btn:hover{ border-color: var(--color-accent); }
.vd-proto .vd-theme-moon{ display: var(--icon-moon); }
.vd-proto .vd-theme-sun{ display: var(--icon-sun); }
.vd-proto .vd-nav{ display: flex; align-items: center; gap: 0; margin-right: auto; }
.vd-proto .vd-nav-link{ position: relative; display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 10px; font-family: var(--font-ui); font-size: var(--text-nav); color: inherit; text-decoration: none; white-space: nowrap; transition: color var(--duration-fast) var(--ease-out); }
.vd-proto .vd-nav-link:hover{ color: var(--color-accent-text); }
.vd-proto .vd-nav-link-active{ color: var(--color-accent-text); }
.vd-proto .vd-header-actions{ display: flex; align-items: center; gap: var(--space-12); }
.vd-proto .vd-lang{ display: flex; align-items: center; gap: 0; font-family: var(--font-ui); font-size: var(--text-caption); }
.vd-proto .vd-lang-link{ display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-32); min-height: var(--touch); color: inherit; text-decoration: none; opacity: 0.72; }
.vd-proto .vd-lang-link:hover{ opacity: 1; }
.vd-proto .vd-lang-current{ opacity: 1; font-weight: var(--weight-strong); }
.vd-proto .vd-phone{ display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--touch); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-strong); color: inherit; text-decoration: none; white-space: nowrap; }
.vd-proto .vd-burger{ display: none; width: var(--touch); height: var(--touch); align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; }
.vd-proto .vd-mnav{ display: none; }
.vd-proto .vd-hero{ position: var(--hero-position); top: 0; display: grid; grid-template-columns: var(--hero-cols); min-height: var(--hero-min-h); padding-top: var(--header-h); background: var(--color-bg); overflow: hidden; z-index: 0; }
.vd-proto .vd-hero-media{ grid-column: var(--hero-media-col); grid-row: var(--hero-media-row); position: relative; overflow: hidden; min-height: 320px; clip-path: var(--img-clip); }
.vd-proto .vd-hero-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; will-change: transform; filter: var(--hero-img-filter); }
.vd-proto .vd-hero-shade{ position: absolute; inset: 0; background: var(--hero-shade); pointer-events: none; }
.vd-proto .vd-hero-content{ grid-column: var(--hero-content-col); grid-row: var(--hero-content-row); align-self: var(--hero-content-align); position: relative; z-index: 2; background: var(--hero-content-bg); padding: var(--hero-content-pad) 0; color: var(--color-hero-text); }
.vd-proto .vd-hero-inner{ width: 100%; max-width: var(--hero-inner-max); margin: 0 auto; padding-left: var(--hero-inner-start); padding-right: var(--hero-inner-end); }
.vd-proto .vd-hero-copy{ display: flex; flex-direction: column; gap: var(--space-24); align-items: var(--hero-copy-items); text-align: var(--hero-text-align); margin: 0 var(--hero-copy-mx); max-width: 720px; }
.vd-proto .vd-hero-title{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); max-width: var(--hero-title-max); }
.vd-proto .vd-hero-lead{ margin: 0; font-size: var(--text-body-lg); line-height: var(--lh-body-lg); color: var(--color-hero-lead); max-width: 52ch; }
.vd-proto .vd-hero-actions{ display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: var(--hero-actions-justify); }
.vd-proto .vd-hero-line{ display: block; }
.vd-proto .vd-search-wrap{ position: relative; z-index: 5; margin-top: var(--search-overlap); }
.vd-proto .vd-search{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; align-items: end; gap: var(--space-16); padding: var(--space-24); background: var(--color-search-bg); border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-lg); box-shadow: var(--search-shadow); }
.vd-proto .vd-field{ display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.vd-proto .vd-label{ font-family: var(--font-ui); font-size: var(--text-caption); line-height: var(--lh-caption); font-weight: var(--weight-strong); color: var(--color-text-secondary); }
.vd-proto .vd-label-brand{ color: var(--color-muted-on-brand); }
.vd-proto .vd-select, .vd-proto .vd-input{ width: 100%; min-width: 0; text-overflow: ellipsis; min-height: var(--control-h); padding: 0 var(--space-16); background: var(--color-input-bg); color: var(--color-text-primary); border: var(--border-width) solid var(--color-input-border); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-body); transition: border-color var(--duration-fast) var(--ease-out); }
.vd-proto .vd-select{ -webkit-appearance: none; appearance: none; padding-right: var(--space-40); background-image: var(--chevron); background-repeat: no-repeat; background-position: right var(--space-16) center; background-size: var(--icon-sm); }
.vd-proto .vd-select:hover, .vd-proto .vd-input:hover{ border-color: var(--color-text-secondary); }
.vd-proto .vd-select:focus, .vd-proto .vd-input:focus{ border-color: var(--color-accent); outline: var(--focus-width) solid var(--color-focus); outline-offset: 0; }
.vd-proto .vd-search-btn{ min-width: 160px; }
.vd-proto .vd-chips{ display: flex; flex-wrap: wrap; gap: var(--space-8); }
.vd-proto .vd-chip{ display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--touch); padding: 0 var(--space-16); border-radius: var(--radius-chip); border: var(--border-width) solid var(--color-border); background: transparent; color: var(--color-text-primary); font-family: var(--font-ui); font-size: var(--text-small); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.vd-proto .vd-chip:hover{ border-color: var(--color-text-primary); }
.vd-proto .vd-chip-active{ background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.vd-proto .vd-chip-roof{ width: var(--roof-sm); height: calc(var(--roof-sm) * 0.58); background: currentColor; -webkit-mask: var(--roof-mask) center / contain no-repeat; mask: var(--roof-mask) center / contain no-repeat; }
.vd-proto .vd-grid-3{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.vd-proto .vd-grid-4{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.vd-proto .vd-card-project{ display: flex; flex-direction: column; background: var(--color-card-bg); border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.vd-proto .vd-card-project:hover{ transform: translateY(var(--card-lift)); box-shadow: var(--shadow-md); }
.vd-proto .vd-card-media{ position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-alt); clip-path: var(--img-clip); }
.vd-proto .vd-card-img{ width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); transition: transform var(--duration-slow) var(--ease-out); }
.vd-proto .vd-card-project:hover .vd-card-img{ transform: scale(1.04); }
.vd-proto .vd-card-tags{ position: absolute; left: var(--space-16); bottom: var(--space-16); right: var(--space-16); display: flex; flex-wrap: wrap; gap: var(--space-8); }
.vd-proto .vd-tag{ display: inline-flex; align-items: center; gap: var(--space-8); min-height: 28px; padding: 0 var(--space-12); border-radius: var(--radius-chip); background: var(--color-tag-bg); color: var(--color-tag-text); font-family: var(--font-ui); font-size: var(--text-caption); font-weight: var(--weight-strong); line-height: 1; }
.vd-proto .vd-status{ display: inline-flex; align-items: center; gap: var(--space-8); min-height: 28px; padding: 0 var(--space-12); border-radius: var(--radius-chip); font-family: var(--font-ui); font-size: var(--text-caption); font-weight: var(--weight-strong); line-height: 1; }
.vd-proto .vd-status-available{ background: var(--color-avail-bg); color: var(--color-avail-text); }
.vd-proto .vd-status-reserved{ background: var(--color-reserved-bg); color: var(--color-reserved-text); }
.vd-proto .vd-status-sold{ background: var(--color-sold-bg); color: var(--color-sold-text); }
.vd-proto .vd-status-dot{ width: var(--space-8); height: var(--space-8); border-radius: 50%; background: currentColor; }
.vd-proto .vd-card-body{ display: flex; flex-direction: column; gap: var(--space-16); padding: var(--card-pad); flex: 1; }
.vd-proto .vd-card-head{ display: flex; flex-direction: column; gap: var(--space-4); }
.vd-proto .vd-card-title{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-size: var(--text-h3); line-height: var(--lh-h3); }
.vd-proto .vd-card-title-link{ color: inherit; text-decoration: none; }
.vd-proto .vd-card-title-link:hover{ color: var(--color-accent-text); }
.vd-proto .vd-card-place{ margin: 0; font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-text-secondary); }
.vd-proto .vd-card-facts{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-16); margin: 0; padding: var(--space-16) 0; border-top: var(--border-width) solid var(--color-border); border-bottom: var(--border-width) solid var(--color-border); }
.vd-proto .vd-fact{ display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.vd-proto .vd-fact-label{ font-family: var(--font-ui); font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--color-text-muted); }
.vd-proto .vd-fact-value{ margin: 0; font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--lh-small); font-weight: var(--weight-strong); }
.vd-proto .vd-card-price-row{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-top: auto; }
.vd-proto .vd-price{ display: flex; flex-direction: column; }
.vd-proto .vd-price-label{ font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-text-muted); }
.vd-proto .vd-price-value{ font-family: var(--font-ui); font-size: var(--text-price); line-height: 1.3; font-weight: var(--weight-strong); color: var(--color-text-primary); white-space: nowrap; }
.vd-proto .vd-fx-btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); min-width: var(--touch); min-height: var(--touch); padding: 0 var(--space-12); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-btn); background: transparent; color: var(--color-text-primary); font-family: var(--font-ui); font-size: var(--text-caption); font-weight: var(--weight-strong); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.vd-proto .vd-fx-btn:hover{ border-color: var(--color-accent); background: var(--color-secondary-hover-bg); }
.vd-proto .vd-grid-regions{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.vd-proto .vd-card-region{ position: relative; display: flex; align-items: flex-end; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-card); color: var(--color-text-inverse); text-decoration: none; clip-path: var(--img-clip); isolation: isolate; }
.vd-proto .vd-region-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); z-index: -2; transition: transform var(--duration-slow) var(--ease-out); }
.vd-proto .vd-card-region:hover .vd-region-img{ transform: scale(1.05); }
.vd-proto .vd-region-shade{ position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 22, 51, 0) 35%, rgba(0, 22, 51, 0.86) 100%); }
.vd-proto .vd-region-body{ display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-24); width: 100%; }
.vd-proto .vd-region-name{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-size: var(--text-region); line-height: 1.15; color: #FFFFFF; }
.vd-proto .vd-region-count{ font-family: var(--font-ui); font-size: var(--text-small); color: #E2E7EF; }
.vd-proto .vd-map-band{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-32); margin-top: var(--gutter); padding: var(--space-32); border-radius: var(--radius-card); background: var(--color-brand); border: var(--border-width) solid var(--color-panel-border); color: var(--color-text-on-brand); overflow: hidden; position: relative; isolation: isolate; }
.vd-proto .vd-map-art{ position: absolute; inset: 0; z-index: -1; opacity: 0.9; }
.vd-proto .vd-map-copy{ display: flex; flex-direction: column; gap: var(--space-8); max-width: 560px; }
.vd-proto .vd-map-title{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-size: var(--text-h3); line-height: var(--lh-h3); }
.vd-proto .vd-map-text{ margin: 0; color: var(--color-muted-on-brand); font-size: var(--text-small); line-height: var(--lh-small); }
.vd-proto .vd-pillars{ display: grid; grid-template-columns: 1fr; gap: 0; }
.vd-proto .vd-pillar{ display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--space-32); row-gap: var(--space-4); padding: var(--space-32) 0; border-top: var(--border-width) solid var(--color-border-on-brand); }
.vd-proto .vd-pillar-name{ display: flex; flex-direction: column; gap: var(--space-4); }
.vd-proto .vd-pillar-verb{ margin: 0; font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-strong); color: var(--color-accent-on-brand); }
.vd-proto .vd-pillar-title{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-size: var(--text-h3); line-height: var(--lh-h3); color: var(--color-text-on-brand); }
.vd-proto .vd-pillar-text{ margin: 0; color: var(--color-muted-on-brand); max-width: 44ch; align-self: center; }
.vd-proto .vd-why-roof{ display: block; width: 100%; max-width: 360px; aspect-ratio: 100 / 58; margin-bottom: var(--space-48); background: var(--color-roof-on-brand); opacity: 0.9; -webkit-mask: var(--roof-mask) left top / contain no-repeat; mask: var(--roof-mask) left top / contain no-repeat; }
.vd-proto .vd-why-grid{ display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-64); align-items: start; }
.vd-proto .vd-steps{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); counter-reset: step; }
.vd-proto .vd-step{ display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24); background: var(--color-card-bg); border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-card); }
.vd-proto .vd-step-num{ font-family: var(--font-display); font-weight: var(--weight-display); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-size: var(--text-h2); line-height: 1; color: var(--color-accent-text); }
.vd-proto .vd-step-title{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-size: var(--text-h3); line-height: var(--lh-h3); }
.vd-proto .vd-step-text{ margin: 0; color: var(--color-text-secondary); font-size: var(--text-small); line-height: var(--lh-small); flex: 1; }
.vd-proto .vd-step-link{ font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-strong); color: var(--color-text-primary); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: var(--space-4); min-height: var(--touch); display: inline-flex; align-items: center; }
.vd-proto .vd-step-link:hover{ color: var(--color-accent-text); }
.vd-proto .vd-calc{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-32); align-items: stretch; }
.vd-proto .vd-calc-form{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); padding: var(--space-32); background: var(--color-card-bg); border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-card); }
.vd-proto .vd-calc-full{ grid-column: 1 / -1; }
.vd-proto .vd-calc-result{ display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-24); padding: var(--space-32); background: var(--color-brand); border: var(--border-width) solid var(--color-panel-border); color: var(--color-text-on-brand); border-radius: var(--radius-card); }
.vd-proto .vd-calc-label{ font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-muted-on-brand); }
.vd-proto .vd-calc-amount{ font-family: var(--font-display); font-weight: var(--weight-display); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-size: var(--text-h2); line-height: var(--lh-h2); color: var(--color-text-on-brand); overflow-wrap: anywhere; }
.vd-proto .vd-calc-lines{ display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: var(--space-16) 0 0; border-top: var(--border-width) solid var(--color-border-on-brand); }
.vd-proto .vd-calc-line{ display: flex; justify-content: space-between; gap: var(--space-16); font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-muted-on-brand); }
.vd-proto .vd-calc-line-value{ color: var(--color-text-on-brand); font-weight: var(--weight-strong); }
.vd-proto .vd-sample{ display: inline-flex; align-self: flex-start; align-items: center; min-height: 24px; padding: 0 var(--space-8); border: var(--border-width) dashed var(--color-accent-on-brand); border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-accent-on-brand); }
.vd-proto .vd-note{ margin: 0; font-family: var(--font-ui); font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--color-muted-on-brand); }
.vd-proto .vd-logos{ overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vd-proto .vd-logos-track{ display: flex; gap: var(--gutter); width: max-content; }
.vd-proto .vd-logo-tile{ display: flex; align-items: center; justify-content: center; gap: var(--space-8); width: 300px; height: 150px; border: var(--border-width) dashed var(--color-border); border-radius: var(--radius-card); color: var(--color-text-muted); font-family: var(--font-ui); font-size: var(--text-small); }
.vd-proto .vd-card-post{ display: flex; flex-direction: column; gap: var(--space-16); color: inherit; text-decoration: none; }
.vd-proto .vd-post-media{ aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-img); background: var(--color-surface-alt); }
.vd-proto .vd-post-img{ width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); transition: transform var(--duration-slow) var(--ease-out); }
.vd-proto .vd-card-post:hover .vd-post-img{ transform: scale(1.05); }
.vd-proto .vd-post-meta{ display: flex; gap: var(--space-12); font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-text-muted); }
.vd-proto .vd-post-cat{ color: var(--color-accent-text); font-weight: var(--weight-strong); }
.vd-proto .vd-post-title{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-size: var(--text-h3); line-height: var(--lh-h3); transition: color var(--duration-fast) var(--ease-out); }
.vd-proto .vd-card-post:hover .vd-post-title{ color: var(--color-accent-text); }
.vd-proto .vd-cta{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-64); align-items: center; }
.vd-proto .vd-cta-copy{ display: flex; flex-direction: column; gap: var(--space-24); }
.vd-proto .vd-cta-contacts{ display: flex; flex-direction: column; gap: var(--space-8); font-family: var(--font-ui); color: var(--color-muted-on-brand); }
.vd-proto .vd-cta-phone{ font-family: var(--font-display); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-weight: var(--weight-display); font-size: var(--text-h3); color: var(--color-text-on-brand); text-decoration: none; }
.vd-proto .vd-form{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); padding: var(--space-32); background: var(--color-card-bg); color: var(--color-text-primary); border-radius: var(--radius-card); border: var(--border-width) solid var(--color-card-border); }
.vd-proto .vd-form-full{ grid-column: 1 / -1; }
.vd-proto .vd-check{ display: flex; gap: var(--space-12); align-items: flex-start; font-family: var(--font-ui); font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--color-text-secondary); }
.vd-proto .vd-check-box{ width: var(--icon-md); height: var(--icon-md); margin: 0; flex: none; accent-color: var(--color-primary); }
.vd-proto .vd-form-success{ display: none; grid-column: 1 / -1; padding: var(--space-16); border-radius: var(--radius-md); background: var(--color-avail-bg); color: var(--color-avail-text); font-family: var(--font-ui); font-size: var(--text-small); }
.vd-proto .vd-form-success-on{ display: block; }
.vd-proto .vd-footer{ position: relative; z-index: 2; background: var(--color-footer-bg); color: var(--color-footer-text); padding: var(--space-80) 0 var(--space-32); }
.vd-proto .vd-footer-top{ display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-64); padding-bottom: var(--space-48); border-bottom: var(--border-width) solid var(--color-footer-border); }
.vd-proto .vd-footer-brand{ display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; }
.vd-proto .vd-footer-logo{ width: 180px; height: auto; }
.vd-proto .vd-footer-slogan{ margin: 0; font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-footer-muted); }
.vd-proto .vd-footer-cols{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32); }
.vd-proto .vd-footer-col{ display: flex; flex-direction: column; gap: var(--space-4); }
.vd-proto .vd-footer-title{ margin: 0 0 var(--space-12); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-strong); color: var(--color-footer-text); }
.vd-proto .vd-footer-link{ display: inline-flex; align-items: center; min-height: 36px; font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-footer-muted); text-decoration: none; }
.vd-proto .vd-footer-link:hover{ color: var(--color-footer-text); }
.vd-proto .vd-offices{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32); padding: var(--space-48) 0; border-bottom: var(--border-width) solid var(--color-footer-border); }
.vd-proto .vd-office{ display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-footer-muted); }
.vd-proto .vd-office-city{ color: var(--color-accent-on-brand); font-weight: var(--weight-strong); }
.vd-proto .vd-newsletter{ display: flex; gap: var(--space-8); width: 100%; max-width: 420px; }
.vd-proto .vd-input-footer{ background: transparent; color: var(--color-footer-text); border-color: var(--color-footer-border); }
.vd-proto .vd-footer-bottom{ display: flex; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap; padding-top: var(--space-32); font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-footer-muted); }
.vd-proto .vd-fab{ position: fixed; right: var(--space-24); bottom: calc(var(--space-24) + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: var(--space-8); min-height: 56px; padding: 0 var(--space-24); border-radius: var(--radius-chip); border: var(--border-width) solid var(--btn-gold-border); background: var(--fab-bg); color: var(--fab-text); font-family: var(--font-ui); font-size: var(--text-button); font-weight: var(--weight-strong); box-shadow: var(--shadow-md); cursor: pointer; text-decoration: none; transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.vd-proto .vd-fab:hover{ transform: translateY(-2px); background: var(--btn-gold-hover-bg); color: var(--btn-gold-hover-text); }
.vd-proto .vd-fab-hidden{ opacity: 0; pointer-events: none; transform: translateY(var(--space-16)); }
.vd-proto .vd-fab{ transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.vd-proto .vd-dialog{ position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: var(--space-16); background: rgba(0, 12, 28, 0.6); }
.vd-proto .vd-dialog-open{ display: flex; }
.vd-proto .vd-dialog-panel{ width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-32); background: var(--color-card-bg); color: var(--color-text-primary); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); border: var(--border-width) solid var(--color-card-border); }
.vd-proto .vd-dialog-head{ display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); }
.vd-proto .vd-dialog-title{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-size: var(--text-h3); line-height: var(--lh-h3); }
.vd-proto .vd-dialog-close{ width: var(--touch); height: var(--touch); border: 0; background: transparent; cursor: pointer; font-size: var(--text-h3); color: inherit; }
.vd-proto .vd-fx-list{ display: flex; flex-direction: column; margin: 0; padding: 0; }
.vd-proto .vd-fx-row{ display: flex; justify-content: space-between; gap: var(--space-16); padding: var(--space-12) 0; border-bottom: var(--border-width) solid var(--color-border); font-family: var(--font-ui); }
.vd-proto .vd-fx-code{ color: var(--color-text-muted); font-size: var(--text-small); }
.vd-proto .vd-fx-value{ font-weight: var(--weight-strong); }
.vd-proto .vd-sample-light{ display: inline-flex; align-self: flex-start; min-height: 24px; align-items: center; padding: 0 var(--space-8); border: var(--border-width) dashed var(--color-accent-text); border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-accent-text); }
.vd-proto .vd-reveal{ opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.vd-proto .vd-reveal.vd-is-in{ opacity: 1; transform: none; }
.vd-proto .vd-hero-in-img{ transform: scale(1.12); transition: transform 1600ms var(--ease-out); }
.vd-proto .vd-hero-in-img.vd-is-in{ transform: scale(1); }
.vd-proto .vd-line-in{ opacity: 0; transform: translateY(0.6em); transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out); }
.vd-proto .vd-line-in.vd-is-in{ opacity: 1; transform: none; }
.vd-proto .vd-marquee{ animation: vd-marquee 40s linear infinite; }
@keyframes vd-marquee{ to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
.vd-proto .vd-reveal, .vd-proto .vd-line-in, .vd-proto .vd-hero-in-img{ opacity: 1; transform: none; transition: none; }
.vd-proto .vd-marquee{ animation: none; }
.vd-proto .vd-card-project, .vd-proto .vd-card-img, .vd-proto .vd-region-img, .vd-proto .vd-post-img{ transition: none; }
}
.vd-proto .vd-phone-text{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vd-proto .vd-phone{ justify-content: center; min-width: var(--touch); border: var(--border-width) solid var(--color-header-border); border-radius: var(--radius-btn); }
.vd-proto .vd-phone:hover{ border-color: var(--color-accent); }
@media (max-width: 1320px){
.vd-proto .vd-nav{ display: none; }
.vd-proto .vd-burger{ display: inline-flex; }
.vd-proto .vd-header-inner{ justify-content: space-between; }
.vd-proto .vd-search{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vd-proto .vd-search-btn{ grid-column: 1 / -1; }
}
@media (max-width: 1024px){
.vd-proto .vd-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vd-proto .vd-grid-regions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vd-proto .vd-card-region{ aspect-ratio: 4 / 3; }
.vd-proto .vd-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vd-proto .vd-why-grid{ grid-template-columns: 1fr; gap: var(--space-32); }
.vd-proto .vd-why-roof{ max-width: 200px; margin-bottom: 0; }
.vd-proto .vd-calc{ grid-template-columns: minmax(0, 1fr); }
.vd-proto .vd-cta{ grid-template-columns: 1fr; gap: var(--space-40); }
.vd-proto .vd-footer-top{ grid-template-columns: 1fr; gap: var(--space-40); }
}
@media (max-width: 767px){
.vd-proto .vd-phone, .vd-proto .vd-lang{ display: none; }
.vd-proto .vd-header-cta{ display: none; }
.vd-proto .vd-search{ grid-template-columns: 1fr 1fr; padding: var(--space-16); }
.vd-proto .vd-search-type{ grid-column: 1 / -1; }
.vd-proto .vd-grid-3, .vd-proto .vd-grid-regions, .vd-proto .vd-steps{ grid-template-columns: 1fr; }
.vd-proto .vd-pillar{ grid-template-columns: 1fr; row-gap: var(--space-12); padding: var(--space-24) 0; }
.vd-proto .vd-grid-regions{ gap: var(--space-12); }
.vd-proto .vd-card-region{ aspect-ratio: 16 / 9; }
.vd-proto .vd-map-band{ grid-template-columns: 1fr; padding: var(--space-24); }
.vd-proto .vd-calc-form{ grid-template-columns: minmax(0, 1fr); padding: var(--space-24); }
.vd-proto .vd-calc-result{ padding: var(--space-24); }
.vd-proto .vd-form{ grid-template-columns: 1fr; padding: var(--space-24); }
.vd-proto .vd-footer-cols, .vd-proto .vd-offices{ grid-template-columns: 1fr 1fr; }
.vd-proto .vd-newsletter{ flex-direction: column; }
.vd-proto .vd-fab{ right: var(--space-16); bottom: var(--space-16); padding: 0 var(--space-16); }
.vd-proto .vd-fab-label{ display: none; }
.vd-proto .vd-hero-actions{ width: 100%; }
.vd-proto .vd-hero-btn{ flex: 1 1 auto; }
.vd-proto .vd-section-head{ margin-bottom: var(--space-32); }
.vd-proto .vd-logo-tile{ width: 200px; height: 110px; }
}
@media (max-width: 420px){
.vd-proto .vd-footer-cols, .vd-proto .vd-offices{ grid-template-columns: 1fr; } }
.vd-proto .vd-mnav{ position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; flex-direction: column; gap: var(--space-4); padding: var(--space-24) var(--side-pad); background: var(--color-bg); overflow-y: auto; }
.vd-proto .vd-mnav-open{ display: flex; }
.vd-proto .vd-mnav-link{ display: flex; align-items: center; gap: var(--space-12); min-height: 56px; border-bottom: var(--border-width) solid var(--color-border); font-family: var(--font-display); font-stretch: var(--display-stretch); font-variation-settings: var(--display-wdth); font-weight: var(--weight-heading); font-size: var(--text-h3); color: var(--color-text-primary); text-decoration: none; }
.vd-proto .vd-mnav-foot{ display: flex; flex-direction: column; gap: var(--space-16); padding-top: var(--space-24); }
.vd-proto .vd-mnav-langs{ display: flex; gap: var(--space-8); font-family: var(--font-ui); }
.vd-proto .vd-eyebrow{ display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-ui); font-size: var(--text-caption); line-height: var(--lh-caption); font-weight: var(--weight-strong); color: var(--color-accent-text); }
.vd-proto .vd-btn-text{ min-height: var(--touch); padding: 0; background: transparent; color: var(--color-text-primary); border: 0; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: var(--space-4); }
.vd-proto .vd-btn-text:hover{ color: var(--color-accent-text); }
.vd-proto .vd-btn-icon-only{ width: var(--control-h); padding: 0; }
.vd-proto .vd-btn-sm{ min-height: var(--touch); padding: 0 var(--space-16); font-size: var(--text-small); }
.vd-proto .vd-btn:disabled, .vd-proto .vd-btn-disabled{ opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.vd-proto .vd-btn-loading{ position: relative; color: transparent; pointer-events: none; }
.vd-proto .vd-spinner{ width: var(--icon-md); height: var(--icon-md); border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: vd-spin 800ms linear infinite; }
.vd-proto .vd-btn-loading-spin{ position: absolute; inset: 0; margin: auto; color: var(--color-on-primary); }
@keyframes vd-spin{ to { transform: rotate(360deg); } }
.vd-proto .vd-btn-pressed{ transform: translateY(1px); background: var(--color-primary-hover); }
.vd-proto .vd-textarea{ width: 100%; min-height: 120px; padding: var(--space-12) var(--space-16); background: var(--color-input-bg); color: var(--color-text-primary); border: var(--border-width) solid var(--color-input-border); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-body); line-height: var(--lh-body); resize: vertical; }
.vd-proto .vd-textarea:focus{ border-color: var(--color-accent); outline: var(--focus-width) solid var(--color-focus); outline-offset: 0; }
.vd-proto .vd-input-error{ border-color: var(--color-error); }
.vd-proto .vd-input-disabled{ opacity: 0.5; cursor: not-allowed; }
.vd-proto .vd-field-msg{ display: flex; gap: var(--space-8); align-items: center; font-family: var(--font-ui); font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--color-text-muted); }
.vd-proto .vd-field-msg-error{ color: var(--color-error-text); font-weight: var(--weight-strong); }
.vd-proto .vd-req{ color: var(--color-error-text); }
.vd-proto .vd-choice{ display: flex; align-items: center; gap: var(--space-12); min-height: var(--touch); font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-primary); cursor: pointer; }
.vd-proto .vd-choice-box{ width: var(--icon-md); height: var(--icon-md); margin: 0; flex: none; accent-color: var(--color-accent); }
.vd-proto .vd-search-field{ display: flex; align-items: center; gap: var(--space-8); width: 100%; min-height: var(--control-h); padding: 0 var(--space-8) 0 var(--space-16); background: var(--color-input-bg); border: var(--border-width) solid var(--color-input-border); border-radius: var(--radius-md); color: var(--color-text-secondary); }
.vd-proto .vd-search-field-input{ flex: 1; min-width: 0; min-height: var(--touch); border: 0; background: transparent; color: var(--color-text-primary); font-family: var(--font-ui); font-size: var(--text-body); }
.vd-proto .vd-search-field-input:focus{ outline: none; }
.vd-proto .vd-search-field:focus-within{ border-color: var(--color-accent); outline: var(--focus-width) solid var(--color-focus); }
.vd-proto .vd-range{ display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.vd-proto .vd-range-values{ display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-strong); color: var(--color-text-primary); }
.vd-proto .vd-range-track{ position: relative; height: var(--touch); }
.vd-proto .vd-range-rail{ position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--color-border); }
.vd-proto .vd-range-fill{ position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--color-accent); }
.vd-proto .vd-range-thumb{ position: absolute; top: 50%; width: var(--space-24); height: var(--space-24); margin: calc(var(--space-12) * -1) 0 0 calc(var(--space-12) * -1); border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-accent); box-shadow: var(--shadow-sm); }
.vd-proto .vd-breadcrumb{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: 0; padding: 0; list-style: none; font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-text-muted); }
.vd-proto .vd-breadcrumb-link{ color: var(--color-text-secondary); text-decoration: none; display: inline-flex; min-height: var(--touch); align-items: center; }
.vd-proto .vd-breadcrumb-link:hover{ color: var(--color-accent-text); }
.vd-proto .vd-breadcrumb-sep{ width: var(--space-12); height: calc(var(--space-12) * 0.58); background: var(--color-roof); opacity: 0.8; -webkit-mask: var(--roof-mask) center / contain no-repeat; mask: var(--roof-mask) center / contain no-repeat; transform: rotate(90deg); }
.vd-proto .vd-breadcrumb-current{ color: var(--color-text-primary); font-weight: var(--weight-strong); }
.vd-proto .vd-pagination{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.vd-proto .vd-page{ display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch); min-height: var(--touch); padding: 0 var(--space-12); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-btn); background: transparent; color: var(--color-text-primary); font-family: var(--font-ui); font-size: var(--text-small); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.vd-proto .vd-page:hover{ border-color: var(--color-accent); }
.vd-proto .vd-page-current{ background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-strong); }
.vd-proto .vd-page-gap{ min-width: var(--space-24); text-align: center; color: var(--color-text-muted); }
.vd-proto .vd-load-more{ display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.vd-proto .vd-load-count{ font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-muted); }
.vd-proto .vd-tabs{ display: flex; gap: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); overflow-x: auto; }
.vd-proto .vd-tab{ position: relative; display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-16); border: 0; background: transparent; color: var(--color-text-secondary); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-strong); white-space: nowrap; cursor: pointer; }
.vd-proto .vd-tab:hover{ color: var(--color-text-primary); }
.vd-proto .vd-tab-active{ color: var(--color-text-primary); box-shadow: inset 0 -2px 0 var(--color-accent); }
.vd-proto .vd-accordion{ display: flex; flex-direction: column; border-top: var(--border-width) solid var(--color-border); }
.vd-proto .vd-acc-item{ border-bottom: var(--border-width) solid var(--color-border); }
.vd-proto .vd-acc-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); width: 100%; min-height: 64px; padding: var(--space-16) 0; border: 0; background: transparent; color: var(--color-text-primary); font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-body-lg); line-height: var(--lh-body-lg); text-align: left; cursor: pointer; }
.vd-proto .vd-acc-head:hover{ color: var(--color-accent-text); }
.vd-proto .vd-acc-icon{ width: var(--roof-sm); height: calc(var(--roof-sm) * 0.58); flex: none; background: var(--color-roof); -webkit-mask: var(--roof-mask) center / contain no-repeat; mask: var(--roof-mask) center / contain no-repeat; transform: rotate(180deg); transition: transform var(--duration-base) var(--ease-out); }
.vd-proto .vd-acc-icon-open{ transform: none; }
.vd-proto .vd-acc-body{ padding: 0 0 var(--space-24); color: var(--color-text-secondary); max-width: var(--measure); }
.vd-proto .vd-table-wrap{ width: 100%; overflow-x: auto; border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-card); }
.vd-proto .vd-table{ width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: var(--text-small); }
.vd-proto .vd-th{ padding: var(--space-12) var(--space-16); background: var(--color-surface-alt); color: var(--color-text-secondary); font-size: var(--text-caption); font-weight: var(--weight-strong); text-align: left; white-space: nowrap; border-bottom: var(--border-width) solid var(--color-card-border); }
.vd-proto .vd-th-sort{ display: inline-flex; align-items: center; gap: var(--space-4); min-height: var(--touch); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.vd-proto .vd-th-sort-active{ color: var(--color-text-primary); }
.vd-proto .vd-td{ padding: var(--space-12) var(--space-16); border-bottom: var(--border-width) solid var(--color-border); color: var(--color-text-primary); vertical-align: middle; white-space: nowrap; }
.vd-proto .vd-td-num{ font-variant-numeric: tabular-nums; text-align: right; }
.vd-proto .vd-tr:hover{ background: var(--color-secondary-hover-bg); }
.vd-proto .vd-tr-sold{ color: var(--color-text-muted); }
.vd-proto .vd-plan-thumb{ width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-sm); background: var(--color-surface); }
.vd-proto .vd-card-unit{ display: grid; grid-template-columns: 96px 1fr; gap: var(--space-16); padding: var(--space-16); background: var(--color-card-bg); border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-card); }
.vd-proto .vd-unit-plan{ width: 96px; height: 96px; object-fit: contain; background: var(--color-surface); border-radius: var(--radius-sm); }
.vd-proto .vd-unit-body{ display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.vd-proto .vd-unit-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); flex-wrap: wrap; }
.vd-proto .vd-unit-name{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-body-lg); line-height: var(--lh-body-lg); }
.vd-proto .vd-unit-meta{ font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-text-secondary); }
.vd-proto .vd-unit-price{ font-family: var(--font-ui); font-size: var(--text-body-lg); font-weight: var(--weight-strong); }
.vd-proto .vd-unit-sub{ font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-text-muted); }
.vd-proto .vd-legend{ display: flex; flex-wrap: wrap; gap: var(--space-16); font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-text-secondary); }
.vd-proto .vd-legend-item{ display: inline-flex; align-items: center; gap: var(--space-8); }
.vd-proto .vd-legend-swatch{ width: var(--space-16); height: var(--space-16); border-radius: var(--radius-sm); border: 2px solid currentColor; }
.vd-proto .vd-legend-available{ color: var(--color-avail-text); }
.vd-proto .vd-legend-reserved{ color: var(--color-reserved-text); }
.vd-proto .vd-legend-sold{ color: var(--color-sold-text); }
.vd-proto .vd-floor-picker{ display: flex; flex-direction: column; gap: var(--space-4); }
.vd-proto .vd-floor{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: var(--touch); padding: 0 var(--space-12); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-btn); background: transparent; color: var(--color-text-primary); font-family: var(--font-ui); font-size: var(--text-small); cursor: pointer; }
.vd-proto .vd-floor:hover{ border-color: var(--color-accent); }
.vd-proto .vd-floor-active{ background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.vd-proto .vd-floor-count{ font-size: var(--text-caption); opacity: 0.85; }
.vd-proto .vd-facts-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: var(--border-width) solid var(--color-border); }
.vd-proto .vd-fact-cell{ display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-16) var(--space-16) var(--space-16) 0; border-bottom: var(--border-width) solid var(--color-border); }
.vd-proto .vd-fact-icon{ width: var(--space-40); height: var(--space-40); flex: none; display: inline-flex; align-items: center; justify-content: center; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-accent-text); }
.vd-proto .vd-fact-cell-empty{ color: var(--color-text-muted); }
.vd-proto .vd-terms{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.vd-proto .vd-term{ display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24); border: var(--border-width) solid var(--color-card-border); border-top: 3px solid var(--color-accent); background: var(--color-card-bg); border-radius: var(--radius-card); }
.vd-proto .vd-term-share{ font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-h2); line-height: 1; color: var(--color-text-primary); }
.vd-proto .vd-term-when{ font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-secondary); }
.vd-proto .vd-card-team{ display: flex; flex-direction: column; gap: var(--space-12); }
.vd-proto .vd-team-photo{ aspect-ratio: 3 / 4; width: 100%; object-fit: cover; border-radius: var(--radius-img); background: var(--color-surface-alt); }
.vd-proto .vd-team-placeholder{ display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; width: 100%; border-radius: var(--radius-img); background: var(--color-surface-alt); color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--text-h2); }
.vd-proto .vd-team-name{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: var(--lh-h3); }
.vd-proto .vd-team-role{ margin: 0; font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-secondary); }
.vd-proto .vd-figure{ margin: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.vd-proto .vd-figure-img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-img); }
.vd-proto .vd-figure-cap{ font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-text-muted); }
.vd-proto .vd-img-fallback{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--color-surface-alt); }
.vd-proto .vd-img-fallback-roof{ width: 30%; max-width: 96px; aspect-ratio: 100 / 58; background: var(--color-border); -webkit-mask: var(--roof-mask) center / contain no-repeat; mask: var(--roof-mask) center / contain no-repeat; }
.vd-proto .vd-icon-row{ display: flex; gap: var(--space-12); align-items: flex-start; font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-text-secondary); }
.vd-proto .vd-icon-row-icon{ width: var(--icon-md); height: var(--icon-md); flex: none; color: var(--color-accent-text); margin-top: 1px; }
.vd-proto .vd-icon-row-strong{ color: var(--color-text-primary); font-weight: var(--weight-strong); }
.vd-proto .vd-bullet{ display: flex; gap: var(--space-12); align-items: baseline; color: var(--color-text-secondary); }
.vd-proto .vd-bullet-roof{ width: 14px; height: 8px; flex: none; background: var(--color-roof); -webkit-mask: var(--roof-mask) center / contain no-repeat; mask: var(--roof-mask) center / contain no-repeat; transform: translateY(-2px); }
.vd-proto .vd-quote{ margin: 0; padding: var(--space-24) 0 var(--space-24) var(--space-24); border-left: 2px solid var(--color-accent); }
.vd-proto .vd-quote-text{ margin: 0 0 var(--space-12); font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: var(--lh-h3); color: var(--color-text-primary); }
.vd-proto .vd-quote-by{ font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-secondary); }
.vd-proto .vd-alert{ display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-16); border-radius: var(--radius-md); border: var(--border-width) solid transparent; font-family: var(--font-ui); font-size: var(--text-small); line-height: var(--lh-small); }
.vd-proto .vd-alert-icon{ width: var(--icon-md); height: var(--icon-md); flex: none; }
.vd-proto .vd-alert-info{ background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-primary); }
.vd-proto .vd-alert-success{ background: var(--color-avail-bg); color: var(--color-avail-text); }
.vd-proto .vd-alert-warning{ background: var(--color-reserved-bg); color: var(--color-reserved-text); }
.vd-proto .vd-alert-error{ background: var(--color-error-bg); color: var(--color-error-text); }
.vd-proto .vd-skel{ display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-surface-alt) 0%, var(--color-border) 50%, var(--color-surface-alt) 100%); background-size: 200% 100%; animation: vd-shimmer 1.4s ease-in-out infinite; }
@keyframes vd-shimmer{ from { background-position: 200% 0; } to { background-position: -200% 0; } }
.vd-proto .vd-skel-img{ aspect-ratio: 4 / 3; width: 100%; }
.vd-proto .vd-skel-line{ height: var(--space-12); margin-top: var(--space-12); }
.vd-proto .vd-skel-short{ width: 60%; }
.vd-proto .vd-empty{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-16); padding: var(--space-48) var(--space-24); border: var(--border-width) dashed var(--color-border); border-radius: var(--radius-card); }
.vd-proto .vd-empty-roof{ width: var(--roof-lg); height: calc(var(--roof-lg) * 0.58); background: var(--color-roof); -webkit-mask: var(--roof-mask) center / contain no-repeat; mask: var(--roof-mask) center / contain no-repeat; }
.vd-proto .vd-empty-title{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: var(--lh-h3); }
.vd-proto .vd-empty-text{ margin: 0; color: var(--color-text-secondary); max-width: 44ch; }
.vd-proto .vd-404{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-24); padding: var(--space-64) var(--space-24); }
.vd-proto .vd-404-code{ font-family: var(--font-display); font-weight: var(--weight-display); font-size: calc(var(--text-display) * 1.6); line-height: 1; color: var(--color-accent-text); }
.vd-proto .vd-404-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); }
.vd-proto .vd-dropdown{ display: flex; flex-direction: column; min-width: 240px; padding: var(--space-8); background: var(--color-card-bg); border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.vd-proto .vd-dropdown-link{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: var(--touch); padding: 0 var(--space-12); border-radius: var(--radius-sm); color: var(--color-text-primary); font-family: var(--font-ui); font-size: var(--text-small); text-decoration: none; }
.vd-proto .vd-dropdown-link:hover{ background: var(--color-secondary-hover-bg); }
.vd-proto .vd-dropdown-link-active{ color: var(--color-accent-text); font-weight: var(--weight-strong); }
.vd-proto .vd-dropdown-count{ font-size: var(--text-caption); color: var(--color-text-muted); }
.vd-proto .vd-nav-caret{ width: var(--icon-sm); height: var(--icon-sm); margin-left: var(--space-4); }
.vd-proto .vd-filters{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16) var(--space-24); padding: var(--space-24); background: var(--color-card-bg); border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-card); }
.vd-proto .vd-filters-foot{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); padding-top: var(--space-16); border-top: var(--border-width) solid var(--color-border); }
.vd-proto .vd-filters-count{ font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-secondary); }
.vd-proto .vd-filters-count-num{ color: var(--color-text-primary); font-weight: var(--weight-strong); }
.vd-proto .vd-active-filters{ display: flex; flex-wrap: wrap; gap: var(--space-8); }
.vd-proto .vd-chip-remove{ display: inline-flex; align-items: center; gap: var(--space-8); min-height: 36px; padding: 0 var(--space-8) 0 var(--space-12); border-radius: var(--radius-chip); background: var(--color-surface-alt); border: var(--border-width) solid var(--color-border); color: var(--color-text-primary); font-family: var(--font-ui); font-size: var(--text-caption); cursor: pointer; }
.vd-proto .vd-chip-remove:hover{ border-color: var(--color-accent); }
.vd-proto .vd-view-switch{ display: inline-flex; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-btn); overflow: hidden; }
.vd-proto .vd-view-btn{ display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--touch); padding: 0 var(--space-16); border: 0; background: transparent; color: var(--color-text-secondary); font-family: var(--font-ui); font-size: var(--text-small); cursor: pointer; }
.vd-proto .vd-view-btn-active{ background: var(--color-primary); color: var(--color-on-primary); }
.vd-proto .vd-cookie{ display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; padding: var(--space-16) var(--space-24); background: var(--color-card-bg); border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-secondary); }
.vd-proto .vd-cookie-text{ flex: 1; min-width: 240px; margin: 0; }
.vd-proto .vd-cookie-actions{ display: flex; gap: var(--space-8); }
@media (max-width: 1024px){
.vd-proto .vd-filters{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vd-proto .vd-facts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
.vd-proto .vd-filters{ grid-template-columns: 1fr; padding: var(--space-16); }
.vd-proto .vd-facts-grid, .vd-proto .vd-terms{ grid-template-columns: 1fr; }
.vd-proto .vd-card-unit{ grid-template-columns: 72px 1fr; }
.vd-proto .vd-unit-plan{ width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce){
.vd-proto .vd-skel, .vd-proto .vd-spinner{ animation: none; }
.vd-proto .vd-acc-icon{ transition: none; } }
.vd-proto .vd-page-head{ padding: calc(var(--header-h) + var(--space-48)) 0 var(--space-48); background: var(--color-surface-alt); border-bottom: var(--border-width) solid var(--color-border); }
.vd-proto .vd-page-head-inner{ display: flex; flex-direction: column; gap: var(--space-16); }
.vd-proto .vd-page-title{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-h2); line-height: var(--lh-h2); max-width: 22ch; }
.vd-proto .vd-page-head-row{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.vd-proto .vd-split{ display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-48); align-items: start; }
.vd-proto .vd-split-even{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-48); align-items: center; }
.vd-proto .vd-aside{ position: sticky; top: calc(var(--header-h) + var(--space-24)); display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-32); background: var(--color-card-bg); border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-card); }
.vd-proto .vd-aside-title{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: var(--lh-h3); }
.vd-proto .vd-prose{ max-width: 72ch; color: var(--color-text-secondary); font-size: var(--text-body-lg); line-height: var(--lh-body-lg); }
.vd-proto .vd-prose-h2{ margin: var(--space-48) 0 var(--space-16); font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: var(--lh-h3); color: var(--color-text-primary); }
.vd-proto .vd-prose-p{ margin: 0 0 var(--space-16); }
.vd-proto .vd-prose-list{ margin: 0 0 var(--space-16); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-8); }
.vd-proto .vd-article-meta{ display: flex; flex-wrap: wrap; gap: var(--space-16); font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-muted); }
.vd-proto .vd-article-cover{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: var(--space-32) 0; }
.vd-proto .vd-share{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-muted); }
.vd-proto .vd-proj-head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.vd-proto .vd-proj-price{ display: flex; align-items: center; gap: var(--space-12); }
.vd-proto .vd-proj-price-value{ font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-h3); line-height: var(--lh-h3); }
.vd-proto .vd-gallery{ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--space-12); margin-top: var(--space-32); }
.vd-proto .vd-gallery-main{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--color-surface-alt); }
.vd-proto .vd-gallery-thumbs{ display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: var(--space-12); height: 0; min-height: 100%; }
.vd-proto .vd-gallery-thumb{ position: relative; min-height: 0; padding: 0; border: 2px solid transparent; background: var(--color-surface-alt); cursor: pointer; overflow: hidden; }
.vd-proto .vd-gallery-thumb-active{ border-color: var(--color-accent); }
.vd-proto .vd-gallery-thumb-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-proto .vd-subnav{ position: sticky; top: var(--header-h); z-index: 20; background: var(--color-bg); border-bottom: var(--border-width) solid var(--color-border); }
.vd-proto .vd-subnav-inner{ display: flex; gap: var(--space-4); overflow-x: auto; }
.vd-proto .vd-subnav-link{ display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-16); color: var(--color-text-secondary); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-strong); text-decoration: none; white-space: nowrap; }
.vd-proto .vd-subnav-link:hover{ color: var(--color-accent-text); }
.vd-proto .vd-types{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.vd-proto .vd-type{ display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24); border: var(--border-width) solid var(--color-card-border); background: var(--color-card-bg); border-radius: var(--radius-card); }
.vd-proto .vd-type-area{ font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-h2); line-height: 1; }
.vd-proto .vd-nav3{ display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-24); align-items: start; }
.vd-proto .vd-nav3-stage{ position: relative; overflow: hidden; background: var(--color-surface-alt); }
.vd-proto .vd-nav3-img{ width: 100%; display: block; }
.vd-proto .vd-nav3-svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.vd-proto .vd-nav3-zone{ fill: var(--color-accent); fill-opacity: 0.12; stroke: var(--color-accent); stroke-width: 2; cursor: pointer; transition: fill-opacity var(--duration-fast) var(--ease-out); }
.vd-proto .vd-nav3-zone:hover, .vd-proto .vd-nav3-zone:focus{ fill-opacity: 0.32; outline: none; }
.vd-proto .vd-nav3-zone-active{ fill-opacity: 0.4; stroke-width: 3; }
.vd-proto .vd-nav3-label{ fill: #FFFFFF; font-family: var(--font-ui); font-size: 14px; font-weight: 600; pointer-events: none; paint-order: stroke; stroke: rgba(0, 0, 0, 0.55); stroke-width: 3px; }
.vd-proto .vd-nav3-side{ display: flex; flex-direction: column; gap: var(--space-16); }
.vd-proto .vd-nav3-units{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.vd-proto .vd-unit-chip{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 2px solid currentColor; border-radius: var(--radius-sm); background: transparent; font-family: var(--font-ui); font-size: var(--text-caption); font-weight: var(--weight-strong); cursor: pointer; }
.vd-proto .vd-unit-chip-available{ color: var(--color-avail-text); background: var(--color-avail-bg); }
.vd-proto .vd-unit-chip-reserved{ color: var(--color-reserved-text); background: var(--color-reserved-bg); }
.vd-proto .vd-unit-chip-sold{ color: var(--color-sold-text); background: var(--color-sold-bg); cursor: not-allowed; }
.vd-proto .vd-unit-chip-area{ font-weight: var(--weight-body); }
.vd-proto .vd-plan-switch{ display: flex; flex-direction: column; gap: var(--space-12); }
.vd-proto .vd-plan-img{ width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--color-surface); border: var(--border-width) solid var(--color-border); }
.vd-proto .vd-mapview{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0; min-height: calc(100vh - var(--header-h)); border-top: var(--border-width) solid var(--color-border); }
.vd-proto .vd-mapview-list{ display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24); max-height: calc(100vh - var(--header-h)); overflow-y: auto; border-right: var(--border-width) solid var(--color-border); }
.vd-proto .vd-mapview-item{ display: grid; grid-template-columns: 96px 1fr; gap: var(--space-12); padding: var(--space-12); border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-card); background: var(--color-card-bg); color: inherit; text-decoration: none; cursor: pointer; }
.vd-proto .vd-mapview-item-active{ border-color: var(--color-accent); box-shadow: inset 3px 0 0 var(--color-accent); }
.vd-proto .vd-mapview-thumb{ width: 96px; height: 72px; object-fit: cover; }
.vd-proto .vd-mapview-map{ position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); background: var(--color-surface-alt); overflow: hidden; }
.vd-proto .vd-pin{ position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: var(--space-4); min-height: 32px; padding: 0 var(--space-12); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-on-primary); border: 0; font-family: var(--font-ui); font-size: var(--text-caption); font-weight: var(--weight-strong); box-shadow: var(--shadow-md); cursor: pointer; white-space: nowrap; }
.vd-proto .vd-pin-active{ background: var(--color-accent); color: var(--btn-gold-text); }
.vd-proto .vd-map-note{ position: absolute; left: var(--space-16); bottom: var(--space-16); padding: var(--space-8) var(--space-12); background: var(--color-card-bg); border: var(--border-width) solid var(--color-card-border); font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-text-secondary); }
.vd-proto .vd-location-map{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: var(--border-width) solid var(--color-border); }
.vd-proto .vd-offices-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.vd-proto .vd-office-card{ display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24); border: var(--border-width) solid var(--color-card-border); background: var(--color-card-bg); border-radius: var(--radius-card); }
.vd-proto .vd-partner{ display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24); border: var(--border-width) solid var(--color-card-border); background: var(--color-card-bg); border-radius: var(--radius-card); color: inherit; text-decoration: none; }
.vd-proto .vd-partner:hover{ border-color: var(--color-accent); }
.vd-proto .vd-partner-logo{ display: flex; align-items: center; justify-content: center; height: 96px; border: var(--border-width) dashed var(--color-border); color: var(--color-text-muted); font-family: var(--font-ui); font-size: var(--text-small); }
.vd-proto .vd-partner-name{ margin: 0; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-body-lg); }
.vd-proto .vd-partner-type{ font-family: var(--font-ui); font-size: var(--text-caption); color: var(--color-text-muted); }
.vd-proto .vd-stats{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.vd-proto .vd-stat{ display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-16); border-top: 2px solid var(--color-accent); }
.vd-proto .vd-stat-num{ font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-h2); line-height: 1.1; }
.vd-proto .vd-stat-label{ font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-secondary); }
.vd-proto .vd-filters-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vd-proto .vd-team-name, .vd-proto .vd-card-title, .vd-proto .vd-post-title{ overflow-wrap: anywhere; }
.vd-proto .vd-footer-extra{ display: flex; flex-wrap: wrap; gap: var(--space-16); }
@media (max-width: 1024px){
.vd-proto .vd-split, .vd-proto .vd-split-even, .vd-proto .vd-nav3{ grid-template-columns: 1fr; gap: var(--space-32); }
.vd-proto .vd-aside{ position: static; }
.vd-proto .vd-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vd-proto .vd-mapview{ grid-template-columns: 1fr; }
.vd-proto .vd-mapview-map{ position: relative; top: 0; height: 60vh; order: -1; }
.vd-proto .vd-mapview-list{ max-height: none; border-right: 0; }
}
@media (max-width: 1024px){
.vd-proto .vd-grid-4{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px){
.vd-proto .vd-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vd-proto .vd-filters-3{ grid-template-columns: 1fr; }
.vd-proto .vd-page-head{ padding: calc(var(--header-h) + var(--space-24)) 0 var(--space-32); }
.vd-proto .vd-gallery{ grid-template-columns: 1fr; }
.vd-proto .vd-gallery-thumbs{ grid-template-rows: none; grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto; min-height: 0; }
.vd-proto .vd-gallery-thumb{ aspect-ratio: 4 / 3; }
.vd-proto .vd-types, .vd-proto .vd-offices-grid{ grid-template-columns: 1fr; }
.vd-proto .vd-nav3-units{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vd-proto .vd-mapview-item{ grid-template-columns: 72px 1fr; }
.vd-proto .vd-mapview-thumb{ width: 72px; height: 56px; }
}
.vd-proto .vd-callfab{ position: fixed; right: var(--space-24); bottom: calc(var(--space-24) + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-12); }
.vd-proto .vd-callfab-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--color-accent); color: var(--btn-gold-text); box-shadow: var(--shadow-md); cursor: pointer; transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.vd-proto .vd-callfab-btn:hover{ transform: scale(1.05); background: var(--btn-gold-hover-bg); }
.vd-proto .vd-callfab-btn::after{ content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-accent); animation: vd-ring 2.4s var(--ease-out) infinite; pointer-events: none; }
@keyframes vd-ring{ from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.6); opacity: 0; } }
.vd-proto .vd-callfab-panel{ display: flex; flex-direction: column; min-width: 220px; padding: var(--space-8); background: var(--color-card-bg); border: var(--border-width) solid var(--color-card-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.vd-proto .vd-callfab-panel[hidden]{ display: none; }
.vd-proto .vd-callfab-row{ display: flex; align-items: center; gap: var(--space-12); min-height: var(--touch); padding: 0 var(--space-12); border-radius: var(--radius-sm); color: var(--color-text-primary); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-strong); text-decoration: none; }
.vd-proto .vd-callfab-row:hover{ background: var(--color-secondary-hover-bg); color: var(--color-accent-text); }
.vd-proto .vd-hero-motion{ animation: vd-kenburns 24s ease-in-out infinite alternate; }
@keyframes vd-kenburns{ from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -2%); } }
.vd-proto .vd-media-note{ position: absolute; right: var(--space-16); top: calc(var(--header-h) + var(--space-16)); z-index: 3; display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.55); color: #FFFFFF; font-family: var(--font-ui); font-size: var(--text-caption); }
.vd-proto .vd-carousel-head{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); }
.vd-proto .vd-carousel-nav{ display: flex; gap: var(--space-8); }
.vd-proto .vd-carousel-btn{ display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-btn); background: transparent; color: var(--color-text-primary); cursor: pointer; }
.vd-proto .vd-carousel-btn:hover{ border-color: var(--color-accent); color: var(--color-accent-text); }
.vd-proto .vd-carousel{ overflow: hidden; }
.vd-proto .vd-carousel-track{ display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--gutter) * 2) / 3); gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: var(--space-4); }
.vd-proto .vd-carousel-track::-webkit-scrollbar{ display: none; }
.vd-proto .vd-carousel-track > *{ scroll-snap-align: start; }
.vd-proto .vd-video{ position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; margin: var(--space-8) 0; border: var(--border-width) solid var(--color-border-on-brand); background: #000000; overflow: hidden; cursor: pointer; }
.vd-proto .vd-video-img{ width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.vd-proto .vd-video-play{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-accent); color: var(--btn-gold-text); }
.vd-proto .vd-video-play-sm{ width: 44px; height: 44px; }
.vd-proto .vd-video-note{ position: absolute; left: var(--space-12); bottom: var(--space-12); font-family: var(--font-ui); font-size: var(--text-caption); color: #FFFFFF; }
.vd-proto .vd-client-text{ border-left: 2px solid var(--color-accent-on-brand); padding-left: var(--space-16); }
.vd-proto .vd-gallery-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 240px; grid-auto-flow: row dense; gap: var(--space-12); }
.vd-proto .vd-gallery-item{ position: relative; padding: 0; border: 0; overflow: hidden; background: var(--color-surface-alt); cursor: zoom-in; }
.vd-proto .vd-gallery-item:nth-child(5n+1){ grid-row: span 2; }
.vd-proto .vd-gallery-item-img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.vd-proto .vd-gallery-item:hover .vd-gallery-item-img{ transform: scale(1.04); }
.vd-proto .vd-gallery-item[hidden]{ display: none; }
.vd-proto .vd-lightbox{ background: rgba(0, 0, 0, 0.88); }
.vd-proto .vd-lightbox-panel{ position: relative; width: 100%; max-width: 1100px; display: flex; flex-direction: column; gap: var(--space-12); }
.vd-proto .vd-lightbox-img{ width: 100%; max-height: 78vh; object-fit: contain; }
.vd-proto .vd-lightbox-bar{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); color: #FFFFFF; font-family: var(--font-ui); font-size: var(--text-small); }
.vd-proto .vd-lightbox-bar .vd-carousel-btn{ color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); }
.vd-proto .vd-lightbox-close{ position: absolute; top: calc(var(--touch) * -1); right: 0; color: #FFFFFF; }
.vd-proto .vd-row-actions{ display: inline-flex; gap: var(--space-8); }
.vd-proto .vd-dialog-wide{ max-width: 860px; max-height: 92vh; overflow-y: auto; }
@media (max-width: 1024px){
.vd-proto .vd-carousel-track{ grid-auto-columns: calc((100% - var(--gutter)) / 2); }
.vd-proto .vd-gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
}
@media (max-width: 767px){
.vd-proto .vd-carousel-track{ grid-auto-columns: 86%; }
.vd-proto .vd-gallery-grid{ grid-auto-rows: 150px; }
.vd-proto .vd-callfab{ right: var(--space-16); bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce){
.vd-proto .vd-hero-motion, .vd-proto .vd-callfab-btn::after{ animation: none; }
.vd-proto .vd-carousel-track{ scroll-behavior: auto; } }
.vd-proto .vd-why-right{ display: flex; flex-direction: column; gap: var(--space-32); min-width: 0; }
.vd-proto .vd-video-lg{ margin: 0; }
.vd-proto .vd-video-lg .vd-video-play{ width: 80px; height: 80px; }
.vd-proto .vd-logos-2{ margin-top: var(--gutter); }
.vd-proto .vd-marquee-rev{ animation: vd-marquee-rev 46s linear infinite; }
@keyframes vd-marquee-rev{ from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce){
.vd-proto .vd-marquee-rev{ animation: none; } }
.vd-proto .vd-gallery-filters{ display: flex; flex-direction: column; gap: var(--space-16); }
.vd-proto .vd-lightbox-video{ position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; background: #000000; overflow: hidden; }
.vd-proto .vd-lightbox-video .vd-video-img{ width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.vd-proto .vd-lightbox-video .vd-video-play{ width: 88px; height: 88px; }
.vd-proto .vd-file{ display: flex; align-items: center; gap: var(--space-12); min-height: var(--control-h); padding: var(--space-4); border: var(--border-width) dashed var(--color-input-border); border-radius: var(--radius-md); background: var(--color-input-bg); cursor: pointer; flex-wrap: wrap; }
.vd-proto .vd-file:hover{ border-color: var(--color-accent); }
.vd-proto .vd-file:focus-within{ outline: var(--focus-width) solid var(--color-focus); }
.vd-proto .vd-file-input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.vd-proto .vd-file-btn{ display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-16); border-radius: var(--radius-btn); background: var(--color-surface-alt); border: var(--border-width) solid var(--color-border); color: var(--color-text-primary); font-family: var(--font-ui); font-size: var(--text-small); font-weight: var(--weight-strong); }
.vd-proto .vd-file-name{ font-family: var(--font-ui); font-size: var(--text-small); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.vd-proto .vd-file-error{ border-color: var(--color-error); }

.vd-proto .vd-reveal.is-in,.vd-proto .vd-line-in.is-in,.vd-proto .vd-hero-in-img.is-in{opacity:1;transform:none}
@media (max-width:767px){.vd-proto .vd-media-note{top:auto;bottom:var(--space-12);right:var(--space-12);left:var(--space-12);justify-content:center}}

/* Homepage tuning asked for on 13 Nov. */
.vd-proto .vd-why-roof{max-width:270px;margin-bottom:var(--space-32)}
.vd-proto .vd-why-grid{align-items:end}
.vd-proto .vd-why-right{align-self:end}
.vd-proto .vd-about-block{align-items:end}
.vd-proto .vd-about-media{align-self:end}
.vd-proto .vd-about-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-img);display:block}
.vd-proto .vd-about-block .vd-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.vd-proto .vd-about-block .vd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vd-proto .vd-gallery-item{cursor:zoom-in}

/* Full screen viewer for gallery photos and the video. */
.vd-lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.92);padding:48px 16px}
.vd-lb.is-open{display:flex}
.vd-lb-stage{position:relative;width:100%;max-width:1200px;display:flex;align-items:center;justify-content:center}
.vd-lb-img{max-width:100%;max-height:82vh;object-fit:contain;display:block}
.vd-lb-video{width:100%;max-height:82vh;aspect-ratio:16/9;background:#000;display:block;border:0}
.vd-lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vd-lb-btn:hover{background:rgba(0,0,0,.75)}
.vd-lb-prev{left:-8px}
.vd-lb-next{right:-8px}
.vd-lb-close{position:absolute;top:12px;right:16px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.vd-lb-count{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;opacity:.8}
@media (max-width:767px){.vd-lb{padding:56px 8px}.vd-lb-prev{left:0}.vd-lb-next{right:0}.vd-lb-btn{width:40px;height:40px}}
.vd-proto .vd-video-player{display:block;width:100%;aspect-ratio:16/9;background:#000;border:var(--border-width) solid var(--color-border-on-brand);object-fit:cover}