@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/manrope-300.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-600.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-700.woff2') format('woff2')}
:root{
  --ink:#161d22;--sea:#1e6480;--pebble:#5f645f;--stone:#f5f3ee;--sand:#e7e2d6;--bamboo:#b98f52;--white:#fff;
  --font:'Manrope',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--stone);font-weight:400;line-height:1.65;font-size:16px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:600;line-height:1.06;letter-spacing:-.02em}
.label{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--pebble);font-weight:600}
.lede{font-size:clamp(22px,2.6vw,32px);line-height:1.35;font-weight:300;letter-spacing:-.01em}

nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:20px clamp(20px,4vw,56px);mix-blend-mode:difference;color:#fff}
nav .brand{font-size:19px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
nav ul{display:flex;gap:clamp(14px,2.6vw,36px);list-style:none;align-items:center}
nav ul a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;opacity:.85}
nav ul a:hover,nav ul a.on{opacity:1}
nav .res{border:1px solid #fff;padding:9px 18px}

.hero{position:relative;height:92svh;overflow:hidden}
.hero.short{height:70svh}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,20,25,.58) 0%,rgba(14,20,25,0) 46%)}
.hero .down{position:absolute;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);bottom:44px;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hero h1{font-size:clamp(38px,6.4vw,86px);color:#fff}
.hero .down .sub{margin-top:12px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;opacity:.9}

.btn{display:inline-block;padding:15px 34px;border:1px solid currentColor;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;transition:background .3s,color .3s;background:transparent}
.btn.solid{background:var(--sea);border-color:var(--sea);color:#fff}
.btn.solid:hover{background:#174e64}
.light .btn:hover{background:var(--ink);color:var(--stone)}
.dark .btn:hover{background:var(--stone);color:var(--ink)}
.hero .btn:hover{background:#fff;color:var(--ink)}

section{padding:clamp(72px,10vw,140px) clamp(20px,4vw,56px)}
.narrow{max-width:1220px;margin:0 auto}
h2{font-size:clamp(30px,3.8vw,50px);margin:16px 0 22px}
.body-copy{max-width:62ch;color:#39434a}
.body-copy p+p{margin-top:15px}

.fact-row{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,76px);margin-top:56px;border-top:1px solid #dcd7ca;padding-top:32px}
.fact-row div p:first-child{font-size:26px;font-weight:600;color:var(--sea);letter-spacing:-.01em}
.fact-row div p:last-child{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pebble);margin-top:5px;font-weight:600}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);align-items:center}
.split.rev .txt{order:2}
.split .txt p{max-width:46ch;color:#39434a}
.split .txt p+p{margin-top:15px}
.split figure{overflow:hidden}
.split figure img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform 1.4s ease}
.split figure:hover img{transform:scale(1.04)}
.split figure.wide img{aspect-ratio:4/3}
.split .btn{margin-top:28px}

.band{position:relative;height:72vh;overflow:hidden;padding:0}
.band img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,20,25,.6) 0%,rgba(14,20,25,0) 42%)}
.band .cap{position:absolute;left:clamp(20px,4vw,56px);bottom:34px;color:#fff;z-index:2}
.band .cap p.big{font-size:clamp(22px,3vw,38px);max-width:24ch;line-height:1.25;font-weight:300}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:52px}
.grid3 figure img{aspect-ratio:3/4;object-fit:cover;width:100%}
.grid3 figcaption{margin-top:11px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pebble);font-weight:600}

.dark{background:var(--ink);color:var(--stone)}
.dark .label{color:#8fa5ae}
.dark .body-copy,.dark p{color:#c2cacf}
.dark h2,.dark h3{color:var(--stone)}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px;margin-top:52px;border-top:1px solid #33404a;padding-top:38px}
.info h3{font-size:17px;margin-bottom:8px}
.info p{font-size:14px}
.light .info{border-top-color:#dcd7ca}
.light .info p{color:#4a544c}

/* units comparison */
.units{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px);margin-top:52px}
.unit{background:var(--white);border:1px solid #e3ded2}
.unit .ph{background:var(--sand);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--pebble);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:20px}
.unit .in{padding:28px}
.unit h3{font-size:22px}
.unit .meta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sea);font-weight:700;margin:6px 0 14px}
.unit ul{list-style:none;font-size:14px;color:#39434a}
.unit ul li{padding:9px 0;border-bottom:1px solid #eee9dd}
.unit ul li:last-child{border:none}

table.cmp{width:100%;border-collapse:collapse;margin-top:44px;font-size:14px}
table.cmp th,table.cmp td{text-align:left;padding:13px 14px;border-bottom:1px solid #e3ded2}
table.cmp th{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pebble)}
table.cmp td:first-child{font-weight:600}

.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;margin-top:52px}
.reviews .score{font-size:44px;font-weight:700;color:#6db6d2}
.reviews .cat p:first-child{font-size:26px;font-weight:600}
.reviews .cat p:last-child{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#93a7b0;margin-top:4px;font-weight:600}

.close{text-align:center}
.close h2{margin-bottom:14px}
.close p{max-width:52ch;margin:0 auto}
.close .btn{margin-top:32px}

.elsewhere{border-top:1px solid #dcd7ca;padding-top:44px;display:flex;gap:clamp(20px,4vw,60px);flex-wrap:wrap}
.elsewhere a{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--sea)}

footer{background:var(--ink);color:#8fa0a8;padding:56px clamp(20px,4vw,56px) 36px}
footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
footer .brand{font-size:22px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);font-weight:700}
footer p{font-size:12px}
footer .lic{margin-top:8px;font-size:11px;color:#8a9ca6}
footer nav2{display:block}
footer ul{list-style:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
footer ul li{margin-bottom:8px}
footer ul a:hover{color:var(--stone)}

.mobile-res{display:none}
@media(max-width:820px){
  .split,.units{grid-template-columns:1fr}
  .split.rev .txt{order:0}
  .grid3{grid-template-columns:1fr}
  .band{height:56vh}
  nav{padding:16px 18px}
  nav ul{gap:10px} nav ul a{font-size:10px;letter-spacing:.06em} nav .brand{font-size:15px;letter-spacing:.14em} nav .res{padding:7px 11px}
  .hero .down{bottom:72px}
  .band .cap{bottom:28px}
  .fact-row{gap:20px 34px;margin-top:40px;padding-top:26px}
  .fact-row div p:first-child{font-size:20px}
  .fact-row div p:last-child{letter-spacing:.1em}
  .reviews{grid-template-columns:repeat(2,1fr);gap:22px}
  .reviews .cat:first-child{grid-column:1/-1}
  .info{gap:26px;margin-top:40px}
  table.cmp{font-size:13px}
  table.cmp th,table.cmp td{padding:10px 8px}
  .mobile-res{display:block;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--sea);color:#fff;text-align:center;padding:15px 15px calc(15px + env(safe-area-inset-bottom));font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700}
  body{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
}

/* ridge-style additions */
.hero .down.statement{display:block}
.hero h1.big{font-size:clamp(42px,5.6vw,84px);font-weight:400;letter-spacing:-.02em;line-height:1.05;max-width:14ch}
.center-intro{text-align:center;max-width:640px;margin:0 auto}
.center-intro .label{margin-bottom:22px;display:block}
.center-intro p.t{font-size:clamp(19px,2vw,24px);line-height:1.55;font-weight:300;color:#2e373d}

.phil{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,90px);align-items:end}
.phil figure img{aspect-ratio:4/3.4;object-fit:cover;width:100%}
.phil .txt p{max-width:38ch;color:#39434a;font-size:15px}
.phil .txt a{display:inline-block;margin-top:22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px}

.props{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px)}
.props .lead h2{font-size:clamp(30px,3.6vw,48px);font-weight:400;letter-spacing:-.02em}
.props .lead p{max-width:34ch;color:#39434a;font-size:15px;margin-top:clamp(40px,8vw,130px)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);align-content:start}
.card img{aspect-ratio:3/4;object-fit:cover;width:100%}
.card h3{font-size:19px;font-weight:600;margin-top:16px}
.card .meta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pebble);font-weight:600;margin-top:5px}

.panel{position:relative;height:100svh;overflow:hidden;padding:0}
.panel img{width:100%;height:100%;object-fit:cover}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,20,25,.62) 0%,rgba(14,20,25,.08) 55%)}
.panel .cap{position:absolute;left:clamp(20px,4vw,56px);bottom:48px;color:#fff;z-index:2;max-width:520px}
.panel .cap h2{font-size:clamp(28px,3.4vw,44px);font-weight:400;color:#fff;margin:0 0 14px}
.panel .cap p{font-size:14px;line-height:1.7;color:#e3e7e9}
.panel .cap a{display:inline-block;margin-top:20px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:#fff;border-bottom:1px solid #fff;padding-bottom:3px}

.reserve-blk figure img{aspect-ratio:16/7.5;object-fit:cover;width:100%}
.reserve-blk .txt{max-width:520px;margin-top:34px}
.reserve-blk .txt p{font-size:14px;color:#39434a}
.reserve-blk .txt .btn{margin-top:26px}

footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer .cols .h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-bottom:14px;font-weight:600}
footer .tag{margin-top:44px;font-size:12px;color:#8a9ca6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media(max-width:820px){
  .phil,.props,footer .cols{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr;gap:14px}
  .card h3{font-size:16px;margin-top:12px}
  .card .meta{font-size:10px;letter-spacing:.12em}
  .props .lead p{margin-top:20px}
  .panel{height:82svh}
  .panel .cap{bottom:34px;right:20px}
  .reserve-blk figure img{aspect-ratio:4/3}
  footer .cols{gap:28px}
}

.revnote{margin-top:34px;font-size:13px;color:#93a7b0}
.revnote a{color:var(--stone);border-bottom:1px solid #55656e;padding-bottom:2px}
.datecheck{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;margin-top:36px}
.datecheck label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pebble);font-weight:600;margin-bottom:8px}
.datecheck input,.datecheck select{font:inherit;font-size:15px;color:var(--ink);background:var(--white);border:1px solid #cfc9bb;padding:12px 14px;min-width:150px}
.datecheck .btn{padding:15px 30px}
.alt-link{margin-top:18px;font-size:13px}
.alt-link a{color:var(--sea);border-bottom:1px solid var(--sea);padding-bottom:2px}
@media(max-width:820px){.datecheck>div{flex:1 1 45%}.datecheck .btn{flex:1 1 100%;text-align:center}}

.wideshot{margin-top:44px;overflow:hidden}
.wideshot img{aspect-ratio:16/8.5;object-fit:cover;width:100%}
table.cmp a.cta-cell{color:var(--sea);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--sea);padding-bottom:2px}

figure.duo{display:grid;gap:14px}
figure.duo img{aspect-ratio:16/10;object-fit:cover;width:100%}

.card .from{font-size:12px;color:var(--sea);font-weight:700;margin-top:4px;letter-spacing:.04em}
.dcmsg{margin-top:16px;font-size:14px;color:#8a3d2f}
.dcmsg:empty{margin:0}
.dcmsg .fixdates{font:inherit;font-size:13px;color:var(--sea);background:none;border:none;border-bottom:1px solid var(--sea);padding:0 0 2px;cursor:pointer}

/* smoobu availability calendar */
.cal{margin-top:40px;background:var(--white);border:1px solid #e3ded2;padding:clamp(18px,2.4vw,30px)}
.cal-head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.cal-title{font-size:19px;font-weight:600;letter-spacing:-.01em}
.cal-nav{font:inherit;font-size:22px;line-height:1;background:none;border:1px solid #ded8ca;width:40px;height:40px;cursor:pointer;color:var(--ink)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-sel{font-size:14px;color:#39434a;margin-bottom:16px;min-height:22px}
.cal-hint{color:var(--pebble)}
.cal-clear{font:inherit;font-size:13px;color:var(--sea);background:none;border:none;border-bottom:1px solid var(--sea);padding:0 0 2px;cursor:pointer;margin-left:10px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pebble);text-align:center;padding-bottom:6px;font-weight:600}
.cal-cell{font:inherit;background:var(--stone);border:1px solid transparent;padding:8px 2px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:52px}
.cal-cell.empty{background:none;cursor:default}
.cal-cell.past{opacity:.32;cursor:default}
.cal-cell.full{background:#f0ece3;opacity:.6}
.cal-cell:not(.past):not(.empty):hover{border-color:var(--sea)}
.cal-cell.s-start,.cal-cell.s-end{background:var(--sea);color:#fff}
.cal-cell.s-mid{background:#d6e6ec}
.cal-n{font-size:14px;font-weight:600}
.cal-dots{display:flex;gap:3px}
.cal-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.cal-dot.free{background:#3f8f57}.cal-dot.booked{background:#c9c3b5}
.cal-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid #ece7dc;font-size:12px;color:var(--pebble)}
.cal-legend span{display:inline-flex;align-items:center;gap:7px}
.cal-note{font-size:14px;color:#4a544c;padding:14px 0}
.cal-note a{color:var(--sea);border-bottom:1px solid var(--sea)}
.cal-res{margin-top:28px}
.cal-head{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--pebble);font-weight:600;margin-bottom:14px}
.cal-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;border:1px solid #e3ded2;background:var(--white);padding:20px 22px;margin-bottom:12px}
.cal-row.off{opacity:.58}
.cal-unit{font-size:19px;font-weight:600}
.cal-meta{font-size:13px;color:var(--pebble);margin-top:3px}
.cal-warn{font-size:12px;color:#8a3d2f;margin-top:6px}
.cal-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cal-price{font-size:22px;font-weight:700;color:var(--sea)}
.cal-price span{font-size:12px;font-weight:600;color:var(--pebble)}
.cal-na{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--pebble);font-weight:600}
.cal-foot{font-size:12px;color:var(--pebble);margin-top:12px}
.book-wrap{margin-top:38px;border-top:1px solid #dcd7ca;padding-top:30px}
.book-title{font-size:22px;font-weight:600;margin-bottom:6px}
.book-secure{font-size:12px;color:var(--pebble);margin-bottom:16px}
#book-mount{background:var(--white);border:1px solid #e3ded2}
@media(max-width:820px){
  .cal{padding:14px}
  .cal-cell{min-height:46px;padding:6px 1px 5px}
  .cal-n{font-size:13px}
  .cal-row{padding:16px}
  .cal-act{width:100%;justify-content:space-between}
}

#cal,.book-wrap{scroll-margin-top:96px}

.cmp-quick{margin-top:0}
.cmp-quick a.cta-cell{font-size:11px}
#apartment,#studio{scroll-margin-top:80px}

.foodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);margin-top:36px}
.foodgrid figure{overflow:hidden}
.foodgrid img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform 1.2s ease}
.foodgrid figure:hover img{transform:scale(1.04)}
.foodgrid figcaption{margin-top:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pebble);font-weight:600}
@media(max-width:820px){.foodgrid{grid-template-columns:1fr;gap:18px}.foodgrid img{aspect-ratio:16/10}}

.cal-guests-w{display:inline-block;margin-right:12px}
.cal-guests{font:inherit;font-size:14px;color:var(--ink);background:var(--white);border:1px solid #cfc9bb;padding:11px 12px}
.cal-legend-top{margin:0 0 18px;padding:0 0 16px;border-top:0;border-bottom:1px solid #ece7dc}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .split figure:hover img,.foodgrid figure:hover img,.card:hover img{transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media(max-width:820px){
  nav ul a{font-size:11px}
  .card .meta,.cal-meta{font-size:11px}
}

/* pages without a hero: nav must be legible on the light background */
body.no-hero nav{mix-blend-mode:normal;color:var(--ink);background:var(--stone);border-bottom:1px solid #e3ded2}
body.no-hero nav .res{border-color:var(--ink)}
body.no-hero nav ul a{opacity:.9}
body.no-hero nav ul a:hover,body.no-hero nav ul a.on{opacity:1}
body.no-hero main{padding-top:64px}

/* solid nav after the hero — content no longer collides with nav text */
nav.stuck{mix-blend-mode:normal;color:var(--ink);background:rgba(245,243,238,.95);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #e3ded2}
nav.stuck .res{border-color:var(--ink)}
nav.stuck ul a{opacity:.92}
nav.stuck ul a:hover,nav.stuck ul a.on{opacity:1}

/* WCAG 2.2 target size: standalone links need >=24px touch height on phones */
@media(max-width:820px){
  nav ul a{padding:6px 3px}
  nav ul{gap:8px}
  footer ul a{display:inline-block;padding:6px 0}
  footer ul li{margin-bottom:2px}
  footer .lic+p a,footer p a{display:inline-block;padding:5px 0}
  .elsewhere a{display:inline-block;padding:6px 0}
  .revnote a,.alt-link a,.cal-note a,.phil .txt a{display:inline-block;padding:5px 0}
  .panel .cap a,.split .txt a{padding-top:4px;padding-bottom:6px}
}

table.cmp a.cta-cell{white-space:nowrap}
@media(max-width:820px){
  table.cmp a.cta-cell{letter-spacing:.06em;padding-top:6px;padding-bottom:6px;display:inline-block}
  table.cmp th,table.cmp td{padding:10px 6px}
}