:root{
  --limestone:#F3EFE7; --travertine:#E7E0D3; --night:#12171A; --sea:#1E3A44;
  --sand:#B8976A; --sand-hover:#A88759; --stone:#6E6A63; --line:#D8D1C4; --shell:#EDE8DF;
  --display:'Mona Sans',system-ui,sans-serif; --sans:'Mona Sans',system-ui,sans-serif;
  --max:1600px;
  --pad:20px;
  /* content never wider than --max; backgrounds still bleed full width */
  --px:max(var(--pad),calc(50vw - var(--max)/2));
  --ease:cubic-bezier(.16,1,.3,1);
  --sec:96px;
}
@media(min-width:600px){:root{--pad:32px;--sec:128px}}
@media(min-width:900px){:root{--pad:48px;--sec:176px}}
@media(min-width:1200px){:root{--pad:72px;--sec:220px}}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--limestone);color:var(--night);font:350 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:60px}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.label{font:500 .75rem/1 var(--sans);font-stretch:118%;letter-spacing:.18em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display);font-weight:600;font-stretch:106%;letter-spacing:-.04em;line-height:1.02}
h1{font-size:clamp(2.4rem,8.2vw,5.5rem)}
h2{font-size:clamp(2.1rem,7vw,4.25rem)}
em{font-style:normal;color:var(--sea)}
.hero em,.final em,.res em{color:var(--sand)}
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line>span{display:block}
.wrap{padding:var(--sec) var(--px)}

/* buttons: 56px+ touch targets */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;background:var(--sand);color:var(--night);font:500 .8125rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;transition:background .4s}
.btn:hover{background:var(--sand-hover)}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.link{position:relative;display:inline-block;font:500 .8125rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:12px 0 8px}
.link:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor}
.link:hover:after{animation:redraw .7s var(--ease)}
@keyframes redraw{0%{transform:scaleX(1);transform-origin:right}49%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* nav */
nav{position:fixed;inset:0 0 auto 0;z-index:70;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--px);color:var(--shell);transition:background .5s,color .5s,border-color .5s;border-bottom:1px solid transparent}
nav.solid,nav.open{background:var(--limestone);color:var(--night);border-color:var(--line)}
.mark{font:500 1.15rem/1 var(--display);font-stretch:125%;letter-spacing:.42em}
nav ul{display:none;gap:40px;list-style:none}
.burger{width:48px;height:48px;margin-right:-12px;background:none;border:0;color:inherit;position:relative;cursor:pointer}
.burger i{position:absolute;left:12px;right:12px;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.burger i:nth-child(1){top:19px}.burger i:nth-child(2){top:28px}
nav.open .burger i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
nav.open .burger i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:60;background:var(--night);color:var(--shell);display:flex;flex-direction:column;justify-content:center;padding:var(--px);gap:8px;visibility:hidden;opacity:0;transition:opacity .5s,visibility .5s}
.menu.open{visibility:visible;opacity:1}
.menu a{font:600 2.1rem/1.3 var(--display);font-stretch:106%;letter-spacing:-.03em}
.menu .label{margin-top:32px;color:#A8A59D}
@media(min-width:900px){nav{height:84px}nav ul{display:flex}.burger,.menu{display:none}}

/* hero */
.hero{position:relative;height:100svh;min-height:600px;color:var(--shell);overflow:hidden;background:var(--night)}
.hero .bg{position:absolute;inset:0}
.hero .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,23,26,.9) 0%,rgba(18,23,26,.55) 45%,rgba(18,23,26,.2) 100%)}
.hero .bg img{object-position:28% 40%}
.hero .in{position:absolute;left:var(--px);right:var(--px);bottom:40px}
.hero h1{margin-bottom:20px}
.hero .lede{max-width:520px;font-size:1rem;margin-bottom:28px;opacity:.92}
.hero .cta{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.hero .cta .link{align-self:flex-start}
.hero .note{margin-top:12px;font:300 .95rem var(--display);opacity:.8}
.scroll{display:none}
.curtain{position:fixed;inset:0;background:var(--limestone);z-index:100}
@media(min-width:700px){
  .hero .bg:after{background:linear-gradient(90deg,rgba(18,23,26,.78) 0%,rgba(18,23,26,.25) 60%,rgba(18,23,26,.1)),linear-gradient(0deg,rgba(18,23,26,.55),transparent 40%)}
  .hero .in{bottom:clamp(48px,10vh,110px);max-width:1120px;right:auto}
  .hero .lede{font-size:1.1rem;margin-bottom:40px}
  .hero .cta{flex-direction:row;align-items:center;gap:36px}
  .scroll{display:block;position:absolute;right:var(--px);bottom:clamp(48px,10vh,110px);writing-mode:vertical-rl;opacity:.7}
}

section{position:relative}
.grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.grid{grid-template-columns:repeat(12,1fr)}}

/* statement */
.statement .eyebrow{color:var(--stone);margin-bottom:32px}
.statement .body{margin-top:32px}
.statement .body p+p{margin-top:1.2em}
@media(min-width:900px){.statement .eyebrow{grid-column:1/-1;margin-bottom:48px}.statement h2{grid-column:1/10}.statement .body{grid-column:7/12;margin-top:64px}}

/* what we do */
.what{background:var(--travertine)}
.what .img{aspect-ratio:4/5;overflow:hidden;position:relative}
.what .img img{height:115%}
.what .txt{margin-top:24px}
.what h2{font-size:clamp(2rem,6.5vw,3.6rem);margin-bottom:32px}
.what ol{list-style:none}
.what li{display:grid;grid-template-columns:48px 1fr;padding:22px 0;border-top:1px solid var(--line)}
.what li:last-child{border-bottom:1px solid var(--line)}
.what li b{font:300 .95rem/1.6 var(--display);font-stretch:118%;letter-spacing:.08em;color:var(--sea)}
.what li strong{display:block;font-weight:500;margin-bottom:4px}
.what li span{color:var(--stone);font-size:.95rem}
@media(min-width:900px){.what .img{grid-column:1/8}.what .txt{grid-column:9/13;align-self:center;margin-top:0}.what h2{margin-bottom:48px}.what li{grid-template-columns:56px 1fr;padding:26px 0}}

/* residences: native swipe on mobile, pinned horizontal on desktop */
.res{background:var(--night);color:var(--shell);overflow:hidden}
.res .head{padding:var(--sec) var(--px) 40px;display:flex;flex-direction:column;gap:16px}
.res .head p{max-width:380px;color:#A8A59D;font-size:.95rem}
.track{display:flex;gap:16px;padding:0 var(--px) var(--sec);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--px);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.card{flex:none;width:84vw;max-width:520px;scroll-snap-align:start}
.card .ph{aspect-ratio:4/3;overflow:hidden}
.card .ph img{transition:transform 1.6s var(--ease)}
.card .meta{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:20px 0 16px;border-bottom:1px solid #2B3236;align-items:baseline}
.card h3{font-size:1.7rem}
.card .where{color:#A8A59D}
.data{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:16px 0}
.data div span{display:block;color:#8D8A83;font:500 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.data div b{font-weight:400;font-variant-numeric:tabular-nums}
.note-a{border-left:1px solid var(--sand);padding-left:16px}
.note-a .label{color:#8D8A83;display:block;margin-bottom:8px;font-size:.7rem}
.note-a p{font:300 1rem/1.55 var(--display);color:var(--shell)}
.tag{font:500 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--sand);padding-top:14px}
@media(min-width:900px){
  .res .head{flex-direction:row;justify-content:space-between;align-items:end;gap:32px;padding-bottom:56px}
  .track{overflow:visible;scroll-snap-type:none;width:max-content;gap:32px}
  .card{width:min(56vw,820px);max-width:none}
  .card .ph{aspect-ratio:16/10}
  .card:hover .ph img{transform:scale(1.04)}
  .card h3{font-size:2rem}
  .data{grid-template-columns:repeat(4,1fr)}
}

/* markets */
.markets h2{margin-bottom:40px;max-width:900px}
.mk{position:relative;aspect-ratio:4/5;overflow:hidden;color:var(--shell)}
.mk:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,23,26,.78),transparent 60%)}
.mk .c{position:absolute;left:20px;right:20px;bottom:24px;z-index:2}
.mk h3{font-size:2.2rem;margin:8px 0 10px}
.mk p{max-width:440px;font-size:.95rem;opacity:.92}
.mk.soon img{filter:grayscale(1) brightness(.7)}
@media(min-width:900px){.markets h2{margin-bottom:72px}.mk:nth-child(1){grid-column:1/8}.mk:nth-child(2){grid-column:8/13;margin-top:120px;aspect-ratio:3/4}.mk .c{left:32px;right:32px;bottom:32px}.mk h3{font-size:2.6rem}}

/* process */
.proc{background:var(--travertine)}
.proc h2{margin-bottom:48px;max-width:800px}
.steps{position:relative;display:grid;grid-template-columns:1fr}
.draw{display:none}
.step{padding:24px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:56px 1fr;column-gap:8px}
.step b{grid-row:1/3;font:200 1.8rem/1 var(--display);font-stretch:112%;color:var(--sea)}
.step h3{font:500 1rem/1.3 var(--sans);letter-spacing:0;margin-bottom:6px}
.step p{font-size:.95rem;color:var(--stone)}
@media(min-width:900px){
  .proc h2{margin-bottom:96px}
  .steps{grid-template-columns:repeat(5,1fr);gap:24px}
  .steps:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
  .draw{display:block;position:absolute;left:0;top:0;height:1px;width:100%;background:var(--sand);transform:scaleX(0);transform-origin:left;z-index:1}
  .step{display:block;padding-top:36px;border-top:0;opacity:.35}
  .step b{display:block;font-size:2.6rem;margin-bottom:20px}
}

/* why */
.why .portrait{aspect-ratio:3/4;background:var(--travertine);display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;color:var(--stone);border:1px solid var(--line)}
.why h2{font-size:clamp(2rem,6.5vw,3.6rem);margin:16px 0 32px}
.why .p{padding:20px 0;border-top:1px solid var(--line)}
.why .p strong{display:block;font-weight:500;margin-bottom:4px}
.why .p span{color:var(--stone);font-size:.95rem}
@media(min-width:900px){.why .portrait{grid-column:1/6}.why .list{grid-column:7/13}.why h2{margin:0 0 48px}}

/* faq */
.faq{background:var(--travertine)}
.faq h2{margin-bottom:24px}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;font:400 1.15rem/1.35 var(--display);letter-spacing:-.01em;gap:24px;padding:22px 0;min-height:56px}
summary::-webkit-details-marker{display:none}
summary i{position:relative;flex:none;width:16px;height:16px;margin-top:6px}
summary i:before,summary i:after{content:"";position:absolute;background:var(--night);left:0;right:0;top:50%;height:1px;transition:transform .5s var(--ease)}
summary i:after{transform:rotate(90deg)}
details[open] summary i:after{transform:rotate(0)}
details .ans{overflow:hidden}
details p{padding:0 0 24px;max-width:620px;color:var(--stone)}
summary{transition:padding-left .6s var(--ease),color .4s}
@media(hover:hover){summary:hover{padding-left:10px}}
details[open] summary{color:var(--sea)}
@media(min-width:900px){.faq h2{grid-column:1/5;margin-bottom:0}.faq .qs{grid-column:6/13}summary{font-size:1.35rem}}

/* final */
.final{height:90svh;min-height:560px;color:var(--shell);overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.final .bg{position:absolute;inset:0}
.final .bg:after{content:"";position:absolute;inset:0;background:rgba(18,23,26,.5)}
.final .in{position:relative;z-index:2;padding:0 var(--pad);width:100%;max-width:var(--max)}
.final h2{font-size:clamp(2.4rem,8vw,6rem);margin-bottom:20px}
.final p{max-width:520px;margin:0 auto 32px;opacity:.92}
.final .cta{display:flex;flex-direction:column;gap:8px;align-items:center}
.final .btn{width:100%;max-width:420px}
@media(min-width:700px){.final .cta{flex-direction:row;justify-content:center;gap:36px}.final .btn{width:auto}}

footer{background:var(--night);color:var(--shell);padding:72px var(--px) 32px}
footer .big{font:200 clamp(3rem,15vw,12rem)/.9 var(--display);font-stretch:125%;letter-spacing:.12em;margin-bottom:48px}
footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-top:32px;border-top:1px solid #2B3236;color:#A8A59D;font-size:.95rem}
footer .cols b{display:block;color:var(--shell);font-weight:500;margin-bottom:10px}
footer .fine{margin-top:40px;font-size:.78rem;color:#6B6860}
@media(min-width:900px){footer{padding-top:140px}footer .cols{grid-template-columns:repeat(4,1fr)}}

/* sticky WhatsApp (mobile) */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:55;padding-bottom:env(safe-area-inset-bottom);background:var(--sand)}
.sticky .btn{width:100%;height:60px}
@media(min-width:900px){.sticky{display:none}body{padding-bottom:0}}

.proto{position:fixed;left:12px;bottom:72px;z-index:80;background:var(--night);color:var(--shell);padding:8px 12px;font:500 .62rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
@media(min-width:900px){.proto{bottom:16px;left:16px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* form (Kontakt page; defined in the design system, not yet used in index.html) */
.field{display:block;margin-bottom:24px}
.field>span{display:block;font:500 .75rem/1 var(--sans);font-stretch:118%;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-bottom:10px}
.field input,.field textarea{width:100%;min-height:56px;padding:16px 18px;background:var(--travertine);border:0;border-bottom:1px solid var(--night);border-radius:0;font:350 1rem/1.4 var(--sans);color:var(--night);transition:background .4s,border-color .4s}
.field input:focus,.field textarea:focus{outline:2px solid var(--sea);outline-offset:2px;background:var(--limestone)}
.field input::placeholder{color:var(--stone)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg label span{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid var(--line);font:500 .8125rem/1 var(--sans);letter-spacing:.06em;transition:background .4s,color .4s,border-color .4s}
.seg input:checked+span{background:var(--night);color:var(--shell);border-color:var(--night)}
.seg input:focus-visible+span{outline:2px solid var(--sea);outline-offset:2px}
.need{font:500 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);border:1px dashed var(--stone);padding:6px 10px;display:inline-block}