@font-face{font-family:Finnmark;src:local('Finnmark'),local('Finnmark Regular');font-display:swap}
:root{--navy:#0a1633;--mar:#5b1224;--gold:#e9b44c;--gold2:#f6d58e;--bg:#fbf1de;--card:#fff;--tx:#2b2230;--mut:#6b6270;--line:#e8d5b0;--h:#5b1224;--wa:#25d366;--fh:'Finnmark','Cinzel',Georgia,serif;--fb:'Finnmark','Outfit',system-ui,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0c1328;--card:#141d3a;--tx:#f3ebdc;--mut:#a9b0c9;--line:#27345e;--h:#f6d58e}}
:root[data-theme="dark"]{--bg:#0c1328;--card:#141d3a;--tx:#f3ebdc;--mut:#a9b0c9;--line:#27345e;--h:#f6d58e}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
*,*::before,*::after{box-sizing:border-box;align-content: center;}
body{margin:0;background:var(--navy);color:var(--tx);font:400 20px/1.65 var(--fb);overflow-x:hidden}
h1,h2,h3{font-family:var(--fh);margin:0;line-height:1.1;font-weight:700}
a{color:inherit}img{display:block;max-width:100%}
.wrap{width:min(1120px,92%);margin:auto}
section{padding:88px 0;position:relative}
.eb{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600}
h2{font-size:clamp(28px,4.6vw,52px);color:var(--h);margin:12px 0 14px}
.navy h2,.mar h2{color:var(--gold2)}
.lead{color:var(--mut);max-width:620px}.navy .lead,.mar .lead{color:#c3cbe6}
.navy{background:var(--navy);color:#f3ebdc}
.mar{background:linear-gradient(160deg,#3a0a17,var(--mar) 55%,#7a1a2c);color:#f6ead6}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin{to{--a:360deg}}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border-radius:5px;border:0;cursor:pointer;background:linear-gradient(180deg,#ffffff3d,#ffffff00 55%),var(--bg);-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);color:var(--tx);font:600 13.5px var(--fb);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:color .4s .08s,box-shadow .4s;box-shadow:inset 0 1px 0 #ffffff59,inset 0 -1px 0 #00000033,0 12px 30px #0006}
.btn::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.6px;pointer-events:none;background:conic-gradient(from var(--a),#f6d58e,#e9b44c33 25%,#fff3c4 50%,#e9b44c33 75%,#f6d58e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:spin 4s linear infinite}
.btn::after{content:"";position:absolute;z-index:-1;inset:0;background:var(--fl);transform:translateY(102%);border-radius:50% 50% 0 0/60% 60% 0 0;transition:transform .55s cubic-bezier(.7,0,.2,1),border-radius .55s}
.btn:hover{color:var(--txh);box-shadow:inset 0 1px 0 #ffffff80,0 14px 38px #e9b44c55}.btn:hover::after{transform:none;border-radius:0}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.b1{--bg:linear-gradient(180deg,#f2c96bd9,#b57a14c2);--fl:#0a1633;--tx:#2a1606;--txh:#f6d58e}
.b2{--bg:linear-gradient(180deg,#12803fd1,#064a25c2);--fl:#25d366;--tx:#fff;--txh:#042a17}
.b3{--bg:#0a1633ad;--fl:#f6d58e;--tx:#fff;--txh:#2a1606}
.kol{height:12px;background:repeating-linear-gradient(135deg,var(--gold) 0 7px,var(--mar) 7px 14px,var(--navy) 14px 21px)}
nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:calc(env(safe-area-inset-top,0px) + 8px) 4% 8px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#0a1633ee,#0a163300)}
nav img{height:98px}nav div{display:flex;gap:14px;align-items:center}
nav .ph{color:#fff;text-decoration:none;font-weight:500}nav .btn{padding:10px 20px;font-size:14px}
.hero{background:linear-gradient(180deg,#0a1633 0%,#0f2466 26%,#295ba2 52%,#295ba2 100%);color:#fff;padding:120px 0 0;text-align:center;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.badge{display:inline-block;border:1px solid var(--gold);color:var(--gold2);padding:7px 18px;border-radius:99px;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.hero h1{font-size:clamp(40px,9vw,112px);margin:22px 0 10px;color:var(--gold2);letter-spacing:.04em;text-shadow:0 6px 40px #000a}
.hero .sub{font-size:clamp(16px,2.2vw,22px);font-weight:300;max-width:640px;margin:0 auto 26px;color:#f1e6d0}
.price{display:inline-flex;align-items:baseline;gap:12px;border:1px solid var(--gold);border-radius:18px;padding:12px 26px;background:#0a163388;backdrop-filter:blur(6px);margin-bottom:28px}
.price small{font-size:13px;max-width:70px;line-height:1.2;text-align:left;color:var(--gold2)}.price b{font:700 clamp(40px,7vw,68px) var(--fh);color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hp{margin-top:-70px;height:clamp(320px,60vw,760px);position:relative;z-index:1;overflow:hidden;-webkit-mask-image:linear-gradient(transparent 0,#000 30%);mask-image:linear-gradient(transparent 0,#000 30%)}
.hpi{position:relative;width:100%;height:100%}
.hpt{position:absolute;inset:0;width:100%;height:100%}.hpl{font:600 44px var(--fh)}
.hp img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.gate{position:relative;margin-top:36px}
.gate img{width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:22px;border:1px solid var(--gold)}
.dist{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:-56px 4% 0;position:relative}
.dc{background:#0a1633dd;backdrop-filter:blur(10px);border:1px solid #e9b44c88;border-radius:18px;padding:22px 14px;text-align:center}
.dc svg{width:42px;height:42px;stroke:var(--gold);fill:none;stroke-width:1.6;margin-bottom:6px}
.dc b{display:block;font:700 40px var(--fh);color:#fff;line-height:1}.dc b i{font:500 18px Outfit;font-style:normal;color:var(--gold2)}
.dc span{font-size:19px;color:#c3cbe6}
.two{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.king{position:relative;border-radius:999px 999px 20px 20px;overflow:hidden;border:3px solid var(--gold);box-shadow:0 30px 70px #0008;max-width:400px;margin:auto}
.king img{width:100%;aspect-ratio:11/20;object-fit:cover;object-position:76% 50%}
.king::after{content:"";position:absolute;inset:10px;border-radius:990px 990px 12px 12px;border:1px solid #f6d58e88;pointer-events:none}
.q{font:italic 500 clamp(22px,3vw,32px)/1.3 var(--fh);border-left:4px solid var(--gold);padding-left:18px;margin:18px 0;color:var(--gold2)}
.mono{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.mono div{border:1px solid #e9b44c66;border-radius:14px;padding:16px;background:#ffffff0d}
.mono b{display:block;font:700 17px var(--fh);color:var(--gold2);margin-bottom:4px}.mono span{font-size:18px;color:#d8cdb8}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.f{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 24px;transition:transform .3s,box-shadow .3s}
.f:hover{transform:translateY(-8px);box-shadow:0 20px 40px #5b122422}
.f em{font:700 38px var(--fh);font-style:normal;color:var(--gold);display:block}
.f h3{font-size:19px;color:var(--h);margin:4px 0 8px}.f p{margin:0;color:var(--mut);font-size:15px}
.gal{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:40px}
.gal figure{margin:0;position:relative;border-radius:18px;overflow:hidden;border:1px solid #e9b44c66}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 12px;background:linear-gradient(transparent,#000c);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2)}
.gal .tall{grid-row:span 2}.gal .tall img{min-height:380px}
.cap{text-align:center;color:#aab3d1;font-size:13px;margin:16px 0 0;letter-spacing:.06em}
.vid{grid-template-columns:1.1fr .9fr}.phone{max-width:340px;margin:auto;width:100%;aspect-ratio:9/16;border-radius:30px;overflow:hidden;border:3px solid var(--gold);box-shadow:0 30px 70px #000a,0 0 0 8px #e9b44c22;background:#000}.phone video{width:100%;height:100%;object-fit:cover;display:block}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.pills span{border:1px solid var(--gold);color:var(--gold2);padding:9px 18px;border-radius:99px;font-size:14px}
.sil{position:relative;height:clamp(220px,36vw,420px);background:#000;overflow:hidden}
.sil img{position:absolute;top:0;height:100%;width:62%;object-fit:cover}
.sa{left:0;object-position:30% 15%;-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}
.sb{right:0;object-position:60% 20%;-webkit-mask-image:linear-gradient(270deg,#000 62%,transparent);mask-image:linear-gradient(270deg,#000 62%,transparent)}
.sil::after{content:"";position:absolute;left:0;right:0;bottom:0;height:35%;background:linear-gradient(transparent,#000)}
.sil p{position:absolute;z-index:2;left:0;right:0;bottom:16px;margin:0;text-align:center;font:600 clamp(12px,1.8vw,17px) var(--fh);letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);padding:0 16px}
.calc{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:34px;margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;box-shadow:0 30px 70px #5b122422}
.calc output{font:700 clamp(40px,6vw,64px) var(--fh);color:var(--h);display:block}
input[type=range]{width:100%;accent-color:var(--mar);height:34px}
.rt{display:flex;justify-content:space-between;font-size:13px;color:var(--mut)}
.calc small{color:var(--mut);display:block;margin-top:10px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
table{width:100%;border-collapse:collapse;margin-top:18px}
td{padding:13px 4px;border-bottom:1px solid #e9b44c44;font-size:15px}td:first-child{color:#aab3d1;width:40%}td:last-child{font-weight:600;color:#fff}
.fb{background:linear-gradient(160deg,#fbf1de,#f3dfb6);color:#2b2230;border-radius:26px;padding:34px;border:2px solid var(--gold);box-shadow:0 30px 80px #0008}
.fb h3{font-size:28px;color:var(--mar)}.fb p{color:#6b6270;margin:6px 0 10px;font-size:15px}
label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6b6270;margin:14px 0 6px;font-weight:600}
input[type=text],input[type=tel],input[type=email],select{width:100%;padding:14px 16px;border-radius:12px;border:1px solid #d9c196;background:#fff;color:#2b2230;font:400 16px var(--fb)}
input:focus,select:focus{outline:2px solid var(--mar);outline-offset:1px}
.fb .btn{width:100%;margin-top:20px}.or{text-align:center;color:#6b6270;font-size:13px;margin:12px 0}
.err{color:#b3261e;font-size:13px;min-height:18px;margin-top:8px}.note{font-size:12px;color:#6b6270;margin-top:12px;text-align:center}
.seal{margin:34px auto 0;max-width:620px;border:1px solid var(--gold);border-radius:16px;padding:18px 22px;text-align:center;font-size:18px;color:#d8cdb8}
.seal b{color:var(--gold2)}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-top:12px}summary{cursor:pointer;font-weight:600}details p{color:var(--mut);margin:10px 0 0}
footer{background:#060d20;color:#8d97b8;padding:36px 0 120px;font-size:19px;text-align:center}footer img{height:115px;margin:0 auto 10px}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);background:#0a1633f2;backdrop-filter:blur(10px);border-top:1px solid var(--gold)}
.bar .btn{flex:1;padding:13px 6px;font-size:13px;min-width:0}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}.rv.in{opacity:1;transform:none}
@media (max-width:860px){section{padding:64px 0}.two,.split,.calc,.gal{grid-template-columns:1fr}.feat,.mono{grid-template-columns:1fr}.dist{grid-template-columns:1fr 1fr;margin:-30px 3% 0}.gate img{aspect-ratio:2/1}.gal .tall{grid-row:auto}nav .ph,nav .btn{display:none}.bar{display:flex}.hero{padding-top:100px}nav img{height:50px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
section:not(.navy):not(.mar){background:var(--bg)}
.hp{overflow:hidden}
.gi{overflow:hidden;border-radius:22px}.gi img{border-radius:0}
.f,.dc,.dv{--mx:50%;--my:50%;position:relative}
.f::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--mx) var(--my),#e9b44c33,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}.f:hover::before{opacity:1}
.dc{transition:border-color .3s,box-shadow .3s}.dc:hover{border-color:var(--gold2);box-shadow:0 0 34px #e9b44c55}.dc svg{transition:transform .4s}.dc:hover svg{transform:scale(1.18) rotate(-5deg)}
.mono div{transition:background .3s,border-color .3s}.mono div:hover{background:#ffffff1f;border-color:var(--gold)}
.pills span{transition:background .3s,color .3s,transform .3s;cursor:default}.pills span:hover{background:var(--gold);color:#2a1606;transform:translateY(-3px)}
.gal figcaption{transform:translateY(8px);opacity:.85;transition:transform .4s,opacity .4s}.gal figure:hover figcaption{transform:none;opacity:1}
.gal figure:hover img{filter:saturate(1.2) brightness(1.08)}
.band{position:relative;height:clamp(380px,62vw,640px);overflow:hidden;background:#000;display:grid;place-items:center;text-align:center}
.band img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#0a163344,#0a1633d0 92%)}
.band div{position:relative;z-index:2;padding:0 6%}
.band p{margin:0 0 14px;letter-spacing:.3em;text-transform:uppercase;font-size:12px;color:#fff}
.band h2{color:var(--gold2);font-size:clamp(28px,5.4vw,66px);margin:0;text-shadow:0 6px 40px #000a}
.prog{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;background:linear-gradient(90deg,#e9b44c,#f6d58e,#c4562d);transform:scaleX(0);transform-origin:0 50%;z-index:80}
.cur{position:fixed;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border:1.5px solid var(--gold);border-radius:0;pointer-events:none;z-index:300;opacity:0}
.cur::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--gold2)}
@media (hover:none),(pointer:coarse){.cur{display:none}}
.intro{display:none}
.gs .intro{display:block;position:fixed;inset:0;z-index:200;pointer-events:none}
.intro i{position:absolute;left:0;right:0;height:50.5%;background:#060d20}.intro .ia{top:0}.intro .ib{bottom:0}
.intro img{position:absolute;left:50%;top:50%;height:130px;transform:translate(-50%,-50%);opacity:0;z-index:2}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .12em;margin-bottom:-.12em}.ch{display:inline-block}
.gs .rv,.gs .rv.in{opacity:0;transform:none;transition:none!important}
.gs .hero .badge,.gs .hero .sub,.gs .hero .price,.gs .hero .cta,.gs .hp{opacity:0}
.gs .f,.gs .dc{transition:box-shadow .3s,border-color .3s}
.gs .gal img{transition:filter .5s}
.hero{position:relative}
.strip{background:linear-gradient(180deg,#0a1633,#0d1b40);border-top:1px solid #e9b44c88;border-bottom:1px solid #e9b44c33;padding:34px 0}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.si{text-align:center;padding:6px 18px;position:relative}
.si+.si::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:linear-gradient(transparent,#e9b44c99,transparent)}
.si b{display:block;font:700 clamp(17px,2.2vw,25px) var(--fh);color:var(--gold2);letter-spacing:.06em;text-transform:uppercase}
.si span{display:block;margin-top:6px;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:#aab3d1}
.scue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:11px;letter-spacing:.35em;text-transform:uppercase;text-shadow:0 2px 12px #000a}
.scue i{display:block;width:1.5px;height:46px;background:#ffffff55;position:relative;overflow:hidden}
.scue i::after{content:"";position:absolute;inset:0;background:var(--gold2);animation:cue 2.2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.gs .scue{opacity:0}
.w2{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}.w2>span{display:inline-block}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
@media (max-width:860px){.strip .wrap{grid-template-columns:1fr 1fr;row-gap:22px}.si:nth-child(3)::before{display:none}.scue{display:none}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
section{padding:clamp(56px,9vw,88px) 0}
.badge{white-space:normal;max-width:100%;padding:7px 16px;font-size:clamp(10px,2.9vw,12px);letter-spacing:.12em;line-height:1.4}
.hero h1{font-size:clamp(38px,9.4vw,112px)}
.price{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 40px 14px;text-align:center}
.price small{max-width:none;text-align:center;font-size:12px;letter-spacing:.28em;text-transform:uppercase;line-height:1.2}
.price b{font:700 clamp(46px,9vw,76px) var(--fh);line-height:1}
.b4{--bg:linear-gradient(180deg,#8a1f33d6,#5b1224c8);--fl:#f6d58e;--tx:#fff;--txh:#2a1606}
.dev{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2.4vw,22px);max-width:860px;margin:36px auto 0;text-align:center}
.dv{border:1px solid #e9b44c55;border-radius:14px;padding:clamp(18px,3vw,30px) 8px;background:linear-gradient(180deg,#ffffff10,#ffffff03);transition:border-color .35s,box-shadow .35s,background .35s}
.dv::before,.dv::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--gold);transition:width .4s,height .4s;pointer-events:none}
.dv::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:14px}
.dv::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:14px}
.dv:hover{border-color:var(--gold2);box-shadow:0 0 36px #e9b44c44,inset 0 0 30px #e9b44c14;background:linear-gradient(180deg,#e9b44c26,#ffffff05)}
.dv:hover::before,.dv:hover::after{width:44px;height:44px}
.dv b{display:block;font:700 clamp(26px,7vw,46px) var(--fh);color:var(--gold);line-height:1.1;transition:transform .35s}.dv:hover b{transform:scale(1.08)}
.dv>span{display:block;margin-top:6px;font-size:clamp(10px,2.6vw,12px);letter-spacing:.14em;text-transform:uppercase;color:#aab3d1}
.seal{padding:24px 22px}.seal img{display:block;height:84px;width:auto;margin:0 auto 12px}
.mdl{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#060d20cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
.mdl.open{visibility:visible;opacity:1}
.mp{position:relative;width:min(440px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;background:linear-gradient(160deg,#0a1633,#173b63);color:#f3ebdc;border:1.5px solid var(--gold);border-radius:20px;padding:clamp(22px,5vw,34px);box-shadow:0 30px 90px #000b;transform:translateY(24px) scale(.97);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.mdl.open .mp{transform:none}
.mp h3{font-size:clamp(21px,5vw,28px);color:var(--gold2);margin:8px 0 6px}.mp p{margin:0 0 6px;color:#c3cbe6;font-size:15px}
.mp label{color:#c3cbe6}.mp input{background:#ffffff14;color:#fff;border:1px solid #ffffff44}.mp input::placeholder{color:#ffffff80}
.mp .btn{width:100%;margin-top:20px}.mp .err{color:#ffb4a0}
.mx{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;background:transparent;color:var(--gold2);font-size:28px;line-height:1;cursor:pointer;border-radius:5px}.mx:hover{background:#ffffff1a}
.mv[hidden]{display:none}
.tk{width:64px;height:64px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;font-size:32px;color:var(--gold2);margin:4px 0 12px}
.mp a.ln{color:var(--gold2)}.mlock{overflow:hidden}
nav{padding-left:max(4%,env(safe-area-inset-left));padding-right:max(4%,env(safe-area-inset-right))}
.bar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
@media (max-width:520px){
 .cta{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}.cta .btn{width:100%}
 .dist{gap:10px;margin:-26px 3% 0}.dc{padding:16px 8px}.dc b{font-size:32px}.dc svg{width:34px;height:34px}
 .calc,.fb{padding:22px 18px}.btn{padding:15px 22px}td{font-size:14px;padding:11px 2px}
}
@media (max-width:360px){.si b{font-size:15px}.si span{letter-spacing:.1em}.btn{letter-spacing:.06em;font-size:12.5px}.price{padding:14px 26px 12px}}

/* =========================================
   CRYSTAL'S LEGACY
   PREMIUM MOBILE UI ENHANCEMENT
   DESKTOP UNCHANGED
========================================= */

@media screen and (max-width: 600px) {

  /* GENERAL MOBILE TYPOGRAPHY */
  body {
    font-size: 15px;
    line-height: 1.65;
  }

  .wrap {
    width: 90%;
  }

  section {
    padding: 52px 0;
  }

  /* SECTION HEADINGS */
  h2 {
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 10px 0 16px;
  }

  .eb {
    font-size: 10px;
    letter-spacing: 0.19em;
    line-height: 1.6;
  }

  /* =====================================
     PROJECT INFORMATION STRIP
     DTCP / LOCATION / PRICE / PLOT RANGE
  ===================================== */

  .strip {
    padding: 24px 0;
  }

  .strip .wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 92%;
  }

  .si {
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 110px;
  }

  .si b {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: 0.015em;
    overflow-wrap: anywhere;
  }

  .si span {
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0.09em;
    margin-top: 7px;
    overflow-wrap: anywhere;
  }

  /* REMOVE OLD COLUMN DIVIDERS */
  .si + .si::before {
    display: none;
  }

  /* SUBTLE GOLD GRID SEPARATORS */
  .si:nth-child(odd) {
    border-right: 1px solid rgba(233,180,76,0.22);
  }

  .si:nth-child(-n+2) {
    border-bottom: 1px solid rgba(233,180,76,0.22);
  }

  /* =====================================
     LOCATION SECTION
  ===================================== */

  #loc {
    padding-top: 50px;
    padding-bottom: 55px;
  }

  #loc h2 {
    font-size: 27px;
    max-width: 320px;
    margin: 12px auto 22px;
    line-height: 1.22;
  }

  .gate {
    margin-top: 25px;
  }

  .gate img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .dist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin: -20px 3% 0;
  }

  .dc {
    padding: 17px 10px;
    border-radius: 13px;
    min-height: 135px;
  }

  .dc svg {
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
  }

  .dc b {
    font-size: 18px;
    line-height: 1.35;
  }

  .dc b i {
    font-size: 13px;
    line-height: 1.4;
  }

  .dc span {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 7px;
  }

  /* =====================================
     ABOUT PROJECT SECTION
  ===================================== */

  .mar .two {
    gap: 28px;
  }

  .king {
    max-width: 290px;
    width: 85%;
    margin: 0 auto 10px;
  }

  .mar .rv > .lead {
    font-size: 15px;
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: #e1d9e4;
    max-width: 100%;
    margin-top: 16px;
    margin-bottom: 18px;
    overflow-wrap: break-word;
  }

  .mar .rv > h2 {
    font-size: 27px;
    line-height: 1.25;
    margin: 12px 0 18px;
  }

  /* HERITAGE QUOTE */
  .q {
    font-size: 19px;
    line-height: 1.5;
    padding-left: 14px;
    border-left-width: 3px;
    margin: 17px 0 22px;
  }

  /* =====================================
     AMENITIES AND PROJECT INFO BOXES
  ===================================== */

  .mono {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 24px;
  }

  .mono div {
    padding: 16px 12px;
    border-radius: 12px;
    min-width: 0;
  }

  .mono b {
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
  }

  .mono span {
    font-size: 12px;
    line-height: 1.55;
    display: block;
  }

  .mono b i {
    display: inline-block;
    margin-right: 5px;
    color: var(--gold);
  }

  /* =====================================
     SITE TOUR
  ===================================== */

  #tour {
    padding-top: 52px;
    padding-bottom: 60px;
  }

  #tour .lead {
    font-size: 15px;
    line-height: 1.75;
  }

  .phone {
    max-width: 265px;
    margin: 12px auto 0;
    border-radius: 23px;
  }

  /* =====================================
     GALLERY
  ===================================== */

  .gal {
    gap: 13px;
    margin-top: 25px;
  }

  .gal .tall img {
    min-height: 240px;
  }

  .gal figcaption {
    font-size: 11px;
    line-height: 1.5;
  }

  /* =====================================
     PRICE CALCULATOR
  ===================================== */

  .calc {
    padding: 24px 20px;
    gap: 22px;
    margin-top: 26px;
    border-radius: 18px;
  }

  .calc output {
    font-size: 35px;
  }

  .calc small {
    font-size: 12px;
    line-height: 1.6;
  }

  /* =====================================
     FORMS
  ===================================== */

  .fb {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .fb h3 {
    font-size: 23px;
  }

  .fb p {
    font-size: 13px;
    line-height: 1.6;
  }

  /* =====================================
     FAQ
  ===================================== */

  details {
    padding: 15px;
    border-radius: 12px;
  }

  summary {
    font-size: 14px;
    line-height: 1.5;
  }

  details p {
    font-size: 13px;
    line-height: 1.65;
  }

  /* =====================================
     FOOTER
  ===================================== */

  footer {
    font-size: 12px;
    line-height: 1.7;
    padding-bottom: 115px;
  }

  footer img {
    height: 85px;
  }

  /* KEEP STICKY BUTTONS COMPACT */
  .bar {
    gap: 8px;
  }

  .bar .btn {
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 13px 7px;
  }
}

/* EXTRA SMALL PHONES */
@media screen and (max-width: 360px) {
  .si b {
    font-size: 13px;
  }

  .si span {
    font-size: 9px;
  }

  .mono b {
    font-size: 12px;
  }

  .mono span {
    font-size: 11px;
  }

  .bar .btn {
    font-size: 10px;
  }
}




/* =========================================
   CRYSTAL LEGACY - FLOATING HERO CARDS
   DESKTOP + MOBILE
========================================= */

/* HERO IMAGE AND FLOATING STRIP */
.hero {
  position: relative;
}

.strip {
  position: relative;
  z-index: 5;
  margin-top: -85px;
  padding: 0 0 30px;
  background: transparent;
  border: none;
  overflow: visible;
}

.strip .wrap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: min(1120px, 92%);
  max-width: 1120px;
}

/* FLOATING PREMIUM CARDS */
.strip .si {
  position: relative;
  min-width: 0;
  min-height: 142px;
  padding: 24px 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  background: linear-gradient(
    145deg,
    rgba(18, 38, 75, 0.97),
    rgba(8, 20, 44, 0.98)
  );

  border: 1px solid rgba(233, 180, 76, 0.5);
  border-radius: 16px;

  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* REMOVE OLD DIVIDER LINES */
.strip .si + .si::before {
  display: none;
}

/* CARD HEADINGS */
.strip .si b {
  font-family: var(--fh);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.015em;
  color: #f6d58e;
}

/* CARD SUBTEXT */
.strip .si span {
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.07em;
  color: #c3cbe6;
}

/* PREMIUM HOVER */
.strip .si:hover {
  border-color: #f6d58e;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(233, 180, 76, 0.14);
}

/* =========================================
   TABLET
========================================= */
@media (max-width: 860px) {
  .strip {
    margin-top: -55px;
    padding-bottom: 24px;
  }

  .strip .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 92%;
  }

  .strip .si {
    min-height: 115px;
    padding: 18px 10px;
  }

  .strip .si:nth-child(odd),
  .strip .si:nth-child(-n+2) {
    border: 1px solid rgba(233, 180, 76, 0.5);
  }
}

/* =========================================
   MOBILE
========================================= */
@media (max-width: 480px) {
  .strip {
    margin-top: -35px;
    padding-bottom: 20px;
  }

  .strip .wrap {
    gap: 9px;
    width: 92%;
  }

  .strip .si {
    min-height: 100px;
    padding: 14px 8px;
    border-radius: 12px;
  }

  .strip .si b {
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .strip .si span {
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.03em;
    margin-top: 6px;
  }
}



/* ====================================
   CRYSTAL LEGACY - LANDSCAPE VIDEO
==================================== */

#tour .legacy-tour-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: center;
}

#tour .legacy-wide-video {
  width: 100%;
  min-width: 0;
  max-width: none;
}

#tour .legacy-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  border: 2px solid var(--gold);
  background: #081329;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

#tour .legacy-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#tour .legacy-video-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 9px 12px;
  border: 1px solid #e9b44c88;
  border-radius: 8px;
  background: #061329c9;
  color: var(--gold2);
  font: 600 10px var(--fb);
  letter-spacing: .1em;
  pointer-events: none;
}

#tour .legacy-video-tag i {
  margin-right: 6px;
}

#tour .legacy-video-caption {
  text-align: center;
  font-size: 12px;
  color: #e0cfbf;
  margin: 10px 0 0;
}

/* ====================================
   GALLERY CAROUSEL
==================================== */

.legacy-gallery-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 30px 0 12px;
}

.legacy-gallery-hint {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--gold2);
}

.legacy-gallery-arrows {
  display: flex;
  gap: 9px;
}

.legacy-gallery-arrows button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #e9b44c99;
  background: #162649;
  color: var(--gold2);
  cursor: pointer;
  transition: background .3s;
}

.legacy-gallery-arrows button:hover {
  background: #34456a;
}

.legacy-gallery-arrows button:disabled {
  opacity: .35;
  cursor: default;
}

/* HORIZONTAL CAROUSEL */

.gal.legacy-gallery {
  display: flex;
  grid-template-columns: none;
  gap: 16px;
  margin-top: 0;
  padding: 0 0 6px;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.gal.legacy-gallery::-webkit-scrollbar {
  display: none;
}

.gal.legacy-gallery figure,
.gal.legacy-gallery figure.tall {
  position: relative;
  display: block;
  flex: 0 0 calc((100% - 16px) / 2);
  min-width: 0;
  grid-row: auto;

  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;

  scroll-snap-align: start;
}

.gal.legacy-gallery img,
.gal.legacy-gallery .tall img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.legacy-gallery-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 14px 0;
}

.legacy-gallery-dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #6c7590;
  cursor: pointer;
}

.legacy-gallery-dots button[aria-current="true"] {
  width: 22px;
  border-radius: 20px;
  background: var(--gold);
}

/* ====================================
   TABLET
==================================== */

@media (max-width: 860px) {

  #tour .legacy-tour-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  #tour .legacy-wide-video {
    max-width: 680px;
    margin: auto;
  }

  .gal.legacy-gallery figure,
  .gal.legacy-gallery figure.tall {
    flex-basis: 85%;
  }
}

/* ====================================
   MOBILE
==================================== */

@media (max-width: 520px) {

  #tour .legacy-video-frame {
    border-radius: 12px;
  }

  #tour .legacy-video-tag {
    left: 8px;
    bottom: 8px;
    font-size: 8px;
    padding: 7px 8px;
  }

  .legacy-gallery-controls {
    margin-top: 24px;
  }

  .gal.legacy-gallery {
    gap: 12px;
  }

  .gal.legacy-gallery figure,
  .gal.legacy-gallery figure.tall {
    flex-basis: 90%;
    aspect-ratio: 16 / 10;
  }
}



/* =========================================
   CRYSTAL LEGACY - WIDE VIDEO TOUR
========================================= */

#tour .legacy-tour-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
}

/* HEADING */
#tour .legacy-tour-intro {
  width: 100%;
  text-align: center;
}

#tour .legacy-tour-intro .lead {
  max-width: 760px;
  margin: 18px auto 0;
  text-align: center;
}

/* FULL WIDTH LANDSCAPE VIDEO */
#tour .legacy-wide-video {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

#tour .legacy-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  border: 2px solid var(--gold);
  background: #081329;
  box-shadow: 0 25px 65px rgba(0,0,0,.35);
}

#tour .legacy-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BRAND LABEL */
#tour .legacy-video-tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  padding: 10px 14px;
  background: rgba(6,19,41,.85);
  border: 1px solid rgba(233,180,76,.6);
  border-radius: 8px;
  color: var(--gold2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  pointer-events: none;
}

/* SOUND BUTTON */
#tour .legacy-sound-toggle {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-width: 124px;
  padding: 11px 14px;

  background: rgba(6,19,41,.88);
  border: 1px solid var(--gold);
  border-radius: 8px;

  color: #fff;
  font: 600 12px var(--fb);
  letter-spacing: .04em;

  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .3s, border-color .3s;
}

#tour .legacy-sound-toggle:hover {
  background: #173b63;
  border-color: var(--gold2);
}

#tour .legacy-sound-toggle i {
  font-size: 15px;
  color: var(--gold2);
}

#tour .legacy-sound-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* VIDEO CAPTION */
#tour .legacy-video-caption {
  text-align: center;
  margin: 12px 0 0;
  font-size: 12px;
  color: #d8cdb8;
}

/* AMENITIES SECTION */
#tour .legacy-amenities {
  width: 100%;
  max-width: 1080px;
  margin-top: 10px;
}

#tour .legacy-amenities h3 {
  text-align: center;
  color: var(--gold2);
  font-size: 26px;
  margin-bottom: 25px;
}

/* DESKTOP - 3 COLUMNS */
#tour .legacy-amenities .mono {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0;
}

#tour .legacy-amenities .mono > div {
  min-width: 0;
  padding: 22px;
}

/* TABLET */
@media (max-width: 860px) {
  #tour .legacy-amenities .mono {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* MOBILE */
@media (max-width: 520px) {

  #tour .legacy-tour-stack {
    gap: 24px;
  }

  #tour .legacy-tour-intro {
    text-align: left;
  }

  #tour .legacy-tour-intro .lead {
    text-align: left;
    margin-top: 14px;
  }

  #tour .legacy-video-frame {
    border-radius: 12px;
  }

  #tour .legacy-video-tag {
    left: 8px;
    bottom: 8px;
    padding: 7px 8px;
    font-size: 8px;
  }

  #tour .legacy-sound-toggle {
    right: 8px;
    bottom: 8px;
    min-width: auto;
    padding: 8px 10px;
    font-size: 10px;
    gap: 5px;
  }

  #tour .legacy-sound-toggle i {
    font-size: 12px;
  }

  #tour .legacy-amenities h3 {
    font-size: 21px;
    margin-bottom: 18px;
  }

  #tour .legacy-amenities .mono {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #tour .legacy-amenities .mono > div {
    padding: 15px 12px;
  }
}