:root{--navy:#07172E;--navy2:#0E2A4D;--gold:#C99A39;--gold2:#E6B650;--bg:#F8F7F3;--card:#fff;--ink:#161B25;--mute:#5B6470;--line:#E3DFD4;--blue:#6C7886;--brown:#B27A1E;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root:not([data-theme="light"]){color-scheme:light dark}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B1220;--card:#121C30;--ink:#EEF0F4;--mute:#A4ADBB;--line:#24314A}}
:root[data-theme="dark"]{--bg:#0B1220;--card:#121C30;--ink:#EEF0F4;--mute:#A4ADBB;--line:#24314A}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:Montserrat,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,select,input{font:inherit}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;line-height:1.15;margin:0}
:focus-visible{outline:3px solid var(--gold2);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:12px}
.lead{max-width:60ch;color:var(--mute);margin:0 0 32px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:4px;border:2px solid var(--gold);font-weight:700;font-size:.9rem;cursor:pointer;background:var(--gold);color:var(--navy);transition:transform .15s,background .15s}
.btn:hover{background:var(--gold2);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}.btn.ghost:hover{background:rgba(255,255,255,.12)}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:#fff;border-bottom:3px solid var(--gold)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:6px;padding-bottom:6px}
.hdr img{height:54px;width:auto}
.nav{display:flex;align-items:center;gap:24px;font-weight:600;font-size:.88rem;color:var(--navy)}
.nav a:not(.btn):hover{color:var(--brown)}
.nav .btn{padding:9px 16px}
@media(max-width:560px){.nav{gap:12px;font-size:.78rem}.hdr img{height:42px}.nav .btn{padding:8px 12px}}
/* hero */
.hero{position:relative;background:var(--navy);color:#fff;padding:96px 0 0;overflow:hidden}
.hero::before{z-index:1;content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,23,46,.96) 30%,rgba(7,23,46,.55) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(2.2rem,6vw,4.2rem);max-width:15ch;animation:rise .9s .1s both}
.hero p{max-width:52ch;font-size:1.08rem;color:#D8DEE8;margin:20px 0 28px;animation:rise .9s .3s both}
.rule{width:96px;height:4px;background:var(--gold);margin-bottom:24px;transform-origin:left;animation:draw .8s both}
.ctas{display:flex;flex-wrap:wrap;gap:12px;animation:rise .9s .5s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
@keyframes draw{from{transform:scaleX(0)}}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.pick button{position:relative;height:150px;border:0;border-radius:8px 8px 0 0;overflow:hidden;cursor:pointer;color:#fff;text-align:left;padding:0}
.pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pick button:hover img{transform:scale(1.08)}
.pick span{position:absolute;inset:auto 0 0 0;padding:44px 20px 16px;background:linear-gradient(transparent,rgba(7,23,46,.92));font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700}
.pick small{display:block;font:500 .8rem Montserrat;color:var(--gold2)}
/* facts */
.facts{background:var(--navy);color:#fff;padding:0}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.facts div{padding:24px 16px;text-align:center;border-left:1px solid rgba(255,255,255,.14);font-size:.88rem;color:#C6CEDA}
.facts div:first-child{border-left:0}.facts b{display:block;font:700 1.15rem 'Playfair Display',serif;color:var(--gold2)}
@media(max-width:700px){.facts .wrap{grid-template-columns:1fr 1fr}.facts div:nth-child(3){border-left:0}.pick{grid-template-columns:1fr}}
/* switch */
.sw{display:inline-flex;background:var(--card);border:2px solid var(--line);border-radius:40px;padding:4px;margin-bottom:28px}
.sw button{border:0;background:none;padding:9px 22px;border-radius:30px;font-weight:700;color:var(--mute);cursor:pointer;transition:.2s}
.sw button[aria-pressed=true]{background:var(--navy);color:#fff}
.sw button[data-s=brown][aria-pressed=true]{background:var(--brown)}
/* explorer */
.xp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:start}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.thumbs button{border:3px solid transparent;background:var(--card);padding:0;border-radius:6px;overflow:hidden;cursor:pointer;text-align:left;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.thumbs img{width:100%;aspect-ratio:3/2;object-fit:cover}
.thumbs span{display:block;padding:6px 8px;font-size:.74rem;font-weight:600;line-height:1.25;color:var(--ink)}
.thumbs button[aria-pressed=true]{border-color:var(--gold)}
.view{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;position:sticky;top:96px}
.view img{width:100%;aspect-ratio:4/3;object-fit:cover}
.view div{padding:22px}.view h3{font-size:1.6rem;margin-bottom:8px}.view p{margin:0 0 18px;color:var(--mute)}
.view img.swap{animation:fade .35s}@keyframes fade{from{opacity:.2}}
@media(max-width:860px){.xp{grid-template-columns:1fr}.view{position:static;order:-1}}
/* apps */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.apps figure{margin:0;position:relative;border-radius:8px;overflow:hidden;aspect-ratio:2/1}
.apps img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.apps figure:hover img{transform:scale(1.07)}
.apps figcaption{position:absolute;inset:auto 0 0;padding:28px 14px 10px;color:#fff;font-weight:600;font-size:.88rem;background:linear-gradient(transparent,rgba(7,23,46,.9))}
@media(max-width:700px){.apps{grid-template-columns:1fr 1fr}}
/* sizes */
.dark{background:var(--navy);color:#fff}.dark h2{color:#fff}.dark .lead{color:#C6CEDA}
.sz{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.sz h3{font-size:1.15rem;margin-bottom:12px;color:var(--gold2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;border-radius:30px;padding:6px 14px;font-weight:600;font-size:.85rem;cursor:pointer;transition:.15s}
.chips button:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.dark small{display:block;margin-top:14px;color:#9FAABB}
@media(max-width:860px){.sz{grid-template-columns:1fr}}
/* process */
.steps{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.steps figure{flex:0 0 200px;margin:0;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.steps img{width:100%;aspect-ratio:2/3;object-fit:cover}
.steps figcaption{padding:12px;font-weight:600;font-size:.85rem;display:flex;gap:10px;align-items:center}
.steps i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;font:700 .85rem Montserrat;font-style:normal}
/* quote */
.q{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.q form{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--card);padding:26px;border-radius:8px;color:var(--ink)}
.q label{display:block;font-size:.78rem;font-weight:700;color:var(--mute);margin-bottom:4px}
.q select,.q input{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink)}
.q .full{grid-column:1/-1}
.q ul{padding:0;margin:20px 0 0;list-style:none;display:grid;gap:10px;color:#D8DEE8}
.q li::before{content:"\2713";color:var(--gold2);font-weight:700;margin-right:10px}
@media(max-width:860px){.q{grid-template-columns:1fr}}
/* contact */
.ct{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ct div{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:6px;padding:22px}
.ct h3{font-size:1.15rem;margin-bottom:8px}.ct p{margin:0 0 10px;color:var(--mute);font-size:.92rem}.ct a{font-weight:700;color:var(--brown)}
@media(max-width:860px){.ct{grid-template-columns:1fr}}
footer{background:var(--navy);color:#C6CEDA;text-align:center;padding:32px 20px;font-size:.88rem}
footer em{display:block;font:italic 600 1.2rem 'Playfair Display',serif;color:var(--gold2);margin-bottom:6px}
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;background:#25D366;color:#fff;font-weight:700;border-radius:40px;padding:13px 20px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.edbar{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--navy);color:#fff;border:2px solid var(--gold);border-radius:12px;padding:8px 10px;font-size:.82rem;box-shadow:0 6px 18px rgba(0,0,0,.35);max-width:calc(100vw - 150px)}
.edbar button{border:0;border-radius:6px;padding:8px 12px;font-weight:700;cursor:pointer;background:var(--gold);color:var(--navy)}
.edbar button.o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.editing [contenteditable]{outline:2px dashed var(--gold2);outline-offset:3px;cursor:text}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.nav a.on:not(.btn){color:var(--brown);border-bottom:2px solid var(--gold)}
.spa .pg{display:none}.spa .pg.on{display:block}
.ph{background:var(--navy);color:#fff;padding:56px 0 48px;border-bottom:4px solid var(--gold)}
.ph h1{font-size:clamp(2rem,5vw,3.2rem)}.ph p{color:#C6CEDA;max-width:60ch;margin:12px 0 0}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why div{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:6px;padding:20px}
.why h3{font-size:1.1rem;margin-bottom:6px}.why p{margin:0;color:var(--mute);font-size:.92rem}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.spec table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line)}
.spec th{background:var(--navy);color:#fff;text-align:left;padding:10px 14px;font:700 .95rem Montserrat}
.spec td{padding:9px 14px;border-top:1px solid var(--line);font-size:.9rem}.spec td+td{text-align:right;font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.two img{border-radius:8px;width:100%}
.band{background:var(--navy);color:#fff;text-align:center;padding:56px 20px}.band h2{color:#fff}.band p{color:#C6CEDA;margin:0 auto 24px;max-width:56ch}
.checks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:.92rem}
.checks li::before{content:"\2713";color:var(--brown);font-weight:700;margin-right:10px}
.quote{font:italic 600 clamp(1.4rem,3vw,2rem) 'Playfair Display',serif;color:var(--gold2);text-align:center;margin:0}
footer a{margin:0 10px;font-weight:600}footer p{margin:8px 0 0}

.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s}.hero .bg.on{opacity:1}
.btn.alt{background:transparent;color:var(--navy);border-color:var(--navy)}.dark .btn.alt{color:#fff;border-color:rgba(255,255,255,.6)}.btn[disabled]{opacity:.4;pointer-events:none}
.prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold2);z-index:90}
.ml{font-weight:700;margin:18px 0 6px}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.opts button{border:2px solid var(--line);background:var(--card);color:var(--ink);padding:9px 16px;border-radius:30px;font-weight:600;cursor:pointer;transition:.15s}
.opts button:hover{border-color:var(--gold)}.opts button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
#mres:not(:empty){display:grid;grid-template-columns:220px 1fr;gap:20px;background:var(--card);border:2px solid var(--gold);border-radius:8px;overflow:hidden;margin-top:22px;animation:fade .4s}
#mres img{width:100%;height:100%;object-fit:cover;min-height:150px}#mres div{padding:20px}#mres h3{font-size:1.4rem;margin-bottom:6px}#mres p{color:var(--mute);margin:0 0 14px}
.cmp{position:relative;max-width:640px;aspect-ratio:2/1;border-radius:8px;overflow:hidden;margin-top:14px}.cmp:focus-within{outline:3px solid var(--gold2)}
#cmpimgs{position:absolute;inset:0}#cmpimgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .dv{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.5);pointer-events:none}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.tg{position:absolute;bottom:10px;background:rgba(7,23,46,.88);color:#fff;padding:3px 10px;border-radius:4px;font-size:.78rem;font-weight:700;pointer-events:none}.tg.l{left:10px}.tg.r{right:10px}
.est{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:22px}
.est label{display:block;font-size:.78rem;font-weight:700;color:var(--mute);margin-bottom:4px}
.est input,.est select{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink)}
.est .eo,.est .btn{grid-column:1/-1;margin:0}.est .eo{color:var(--mute)}.est .eo b{color:var(--ink)}
.sn{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.sn button{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:none;color:#fff;font-weight:700;cursor:pointer}
.sn button[aria-pressed=true]{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.sp{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center}.sp img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px}
.sp h3{font-size:1.6rem;margin-bottom:8px}.sp p{color:#C6CEDA;margin:0 0 18px;max-width:46ch}
.pills span{display:inline-block;border:1px solid var(--line);background:var(--card);padding:6px 14px;border-radius:30px;margin:0 8px 8px 0;font-weight:600;font-size:.88rem}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px 18px;margin-bottom:10px;max-width:760px}
.faq summary{cursor:pointer;font-weight:700}.faq p{margin:10px 0 0;color:var(--mute)}
.pg.on{animation:fade .45s}
.qerr{grid-column:1/-1;color:#B3261E;font-weight:600;font-size:.88rem;margin:0}.qerr:empty{display:none}.q input.bad{border-color:#B3261E;background:#FDECEA}
.cs{position:fixed;inset:0;z-index:100;background:rgba(7,23,46,.65);display:flex;align-items:flex-end;justify-content:center}.cs[hidden]{display:none}
.cb{width:100%;max-width:420px;background:var(--card);color:var(--ink);border-radius:14px 14px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;animation:rise .3s}
.cb h3{font-size:1.3rem;text-align:center}.cb .btn{justify-content:center;font-size:1rem}.cb .btn.alt{color:var(--ink);border-color:var(--line)}
@media(min-width:701px){.cs{align-items:center}.cb{border-radius:14px}}
.mbar{display:none}
@media(max-width:700px){.wa{display:none}body{padding-bottom:64px}
.mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy);border-top:2px solid var(--gold);padding-bottom:env(safe-area-inset-bottom,0px)}
.mbar a{flex:1;text-align:center;padding:16px 4px;color:#fff;font-weight:700;font-size:.9rem;border-left:1px solid rgba(255,255,255,.15)}.mbar a:first-child{border-left:0}.mbar a:last-child{background:var(--gold);color:var(--navy)}
.edbar{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
@media(max-width:560px){#mres:not(:empty),.sp{grid-template-columns:1fr}.sp img{max-width:220px}}
@media(max-width:860px){.why{grid-template-columns:1fr 1fr}.spec,.two{grid-template-columns:1fr}}
@media(max-width:560px){.why{grid-template-columns:1fr}}