:root {
  --ink: #071d28;
  --ink-2: #0b2c38;
  --paper: #f5f2ea;
  --warm: #ddd4c4;
  --aqua: #9ddbd7;
  --mint: #cce8d9;
  --line: rgba(7, 29, 40, .18);
  --serif: "Playfair Display", Georgia, serif;
  --sans: Manrope, Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --space: clamp(1.25rem, 3vw, 3.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 20; background: #fff; color: var(--ink); padding: .7rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--space);
  color: var(--paper);
}
.wordmark { display: flex; align-items: center; gap: .5rem; letter-spacing: .08em; }
.wordmark span { font: 600 1.3rem var(--serif); }
.wordmark i { display: block; width: 1px; height: 1.9rem; background: currentColor; opacity: .6; }
.wordmark small { font: 500 .45rem/1.25 var(--mono); letter-spacing: .12em; }
.site-header nav { display: flex; gap: 1.7rem; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.site-header nav a { opacity: .78; transition: opacity .2s; }
.site-header nav a:hover { opacity: 1; }
.nav-cta { border-bottom: 1px solid currentColor; font: 500 .66rem var(--mono); letter-spacing: .03em; padding: .3rem 0; }
.nav-cta span, .button span, .text-link span { margin-left: .45rem; font-size: 1.1em; }

.hero {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(circle at 72% 47%, #23787a 0, #0b3c49 34%, #061922 76%);
  color: var(--paper);
  padding: 8rem var(--space) 3rem;
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(2,17,27,.78) 0%, rgba(2,17,27,.42) 35%, rgba(1,17,25,.04) 65%, rgba(1,14,21,.26) 100%);
  pointer-events: none;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 1.1s var(--ease), transform 1.8s var(--ease);
}
body.webgl-ready #hero-canvas { opacity: 1; transform: scale(1); }
.hero-noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .12;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.hero-aura {
  position: absolute;
  z-index: -1;
  right: 7%;
  top: 50%;
  width: min(42vw, 42rem);
  aspect-ratio: 1;
  transform: translateY(-48%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(187,255,235,.3) 0, rgba(66,190,181,.13) 24%, transparent 62%);
  filter: drop-shadow(0 0 40px rgba(70,210,199,.2));
}
.hero-aura:before, .hero-aura:after, .hero-aura i {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(194,255,238,.22);
  border-radius: 50%;
  transform: rotate(-18deg) scaleY(.54);
  animation: aura-float 13s ease-in-out infinite;
}
.hero-aura:after { inset: 17%; transform: rotate(48deg) scaleY(.72); animation-delay: -4s; }
.hero-aura i:nth-child(1) { inset: 27%; transform: rotate(78deg) scaleY(.52); animation-delay: -7s; }
.hero-aura i:nth-child(2) { inset: 2%; border-color: rgba(194,255,238,.11); transform: rotate(22deg) scaleY(.82); animation-delay: -10s; }
.hero-aura i:nth-child(3) { inset: 38%; border-color: rgba(255,255,255,.28); box-shadow: 0 0 28px rgba(173,255,238,.16); animation-duration: 9s; }
.hero-topline { display: flex; justify-content: space-between; gap: 1rem; font: 500 .56rem var(--mono); letter-spacing: .15em; }
.hero-copy { position: relative; z-index: 1; max-width: 49rem; margin: clamp(6rem,15vh,12rem) 0 0; text-shadow: 0 4px 40px rgba(0,12,18,.25); }
.eyebrow, .section-label { font: 500 .62rem var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .7rem; }
.eyebrow span { width: 1.5rem; height: 1px; background: currentColor; }
.hero h1 { max-width: 800px; margin: .8rem 0 1rem; font: 500 clamp(3.55rem,9.2vw,9rem)/.89 var(--serif); letter-spacing: -.065em; }
.hero h1 em, .feature h2 em, .gallery h2 em, .contact h2 em, .display-copy em { font-weight: 500; }
.hero-summary { max-width: 27rem; font-size: clamp(.9rem,1.25vw,1.1rem); line-height: 1.65; opacity: .86; }
.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: 2rem; }
.hero-orbit {
  position: absolute;
  right: 15%;
  bottom: 15%;
  width: clamp(9rem,16vw,15rem);
  aspect-ratio: 1;
  border: 1px solid rgba(202,255,241,.28);
  border-radius: 50%;
  box-shadow: inset 0 0 24px rgba(114,233,217,.06), 0 0 35px rgba(114,233,217,.06);
  animation: spin 20s linear infinite;
}
.hero-orbit:before { content: ""; position: absolute; inset: -42%; border: 1px solid rgba(202,255,241,.08); border-radius: 50%; transform: scaleY(.54) rotate(28deg); }
.hero-orbit:after { content: ""; position: absolute; width: .55rem; height: .55rem; left: 20%; top: -.3rem; background: var(--aqua); border-radius: 50%; }
.hero-orbit span { position: absolute; inset: 1rem; display: flex; align-items: center; text-align: center; font: 500 .55rem/1.4 var(--mono); letter-spacing: .12em; transform: rotate(35deg); }
.hero-object-caption { position: absolute; right: var(--space); bottom: 2.7rem; display: flex; align-items: center; gap: 1rem; font: 500 .5rem var(--mono); letter-spacing: .15em; color: rgba(245,242,234,.72); }
.hero-object-caption:before { content: ""; width: 2.2rem; height: 1px; background: currentColor; }
.hero-object-caption strong { font: 400 2.2rem/1 var(--serif); color: var(--aqua); }
.hero-index { position: absolute; right: var(--space); top: 32%; display: flex; gap: 1.1rem; writing-mode: vertical-rl; font: 500 .48rem var(--mono); letter-spacing: .2em; color: rgba(245,242,234,.42); }
.hero-index span:before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--aqua); margin-bottom: .55rem; }
.hero-scroll { position: absolute; bottom: 2.8rem; left: var(--space); display: flex; align-items: center; gap: .65rem; font: 500 .57rem var(--mono); letter-spacing: .1em; }
.hero-scroll span { width: 2.4rem; height: 1px; background: currentColor; }

.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; font: 600 .67rem var(--mono); letter-spacing: .05em; text-transform: uppercase; transition: transform .3s var(--ease), background .3s; }
.button:hover { transform: translateY(-3px); }
.button-light { background: var(--paper); color: var(--ink); }
.button-dark { background: var(--ink); color: var(--paper); }
.text-link { font: 500 .7rem var(--mono); letter-spacing: .03em; border-bottom: 1px solid currentColor; padding-bottom: .3rem; }

.section-wrap { padding: clamp(5.5rem,11vw,10rem) var(--space); }
.section-label { display: flex; gap: 1.2rem; align-items: center; }
.section-label span { opacity: .55; }
.intro { display: grid; grid-template-columns: 19% 1fr; gap: 2rem; }
.intro-main { display: grid; grid-template-columns: 1.4fr .55fr; gap: clamp(2rem,8vw,10rem); }
.display-copy { margin: 0; font: 500 clamp(2.2rem,4.6vw,5rem)/1.05 var(--serif); letter-spacing: -.055em; }
.body-copy { max-width: 24rem; margin: .6rem 0 0; font-size: .9rem; line-height: 1.8; }
.principles { grid-column: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 6rem; border-top: 1px solid var(--line); }
.principles article { padding-top: 1.2rem; }
.principles span { font: .55rem var(--mono); color: #5d737b; }
.principles h2 { margin: .8rem 0 .45rem; font: 500 1.45rem var(--serif); }
.principles p { max-width: 13rem; margin: 0; font-size: .78rem; line-height: 1.7; }

.feature { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(19rem,.8fr); background: var(--warm); }
.feature-image-wrap { position: relative; min-height: 43rem; overflow: hidden; }
.feature-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06); }
.image-tag { position: absolute; left: 1.4rem; bottom: 1.4rem; color: white; font: 500 .53rem/1.6 var(--mono); letter-spacing: .15em; }
.feature-copy { align-self: center; padding: var(--space); max-width: 33rem; }
.feature h2, .gallery h2, .contact h2 { margin: 1.4rem 0; font: 500 clamp(3.2rem,6.5vw,6.7rem)/.89 var(--serif); letter-spacing: -.065em; }
.feature-copy > p:not(.microcopy) { max-width: 25rem; font-size: .95rem; line-height: 1.8; }
.feature-copy .button { margin: 1.6rem 0; }
.microcopy { font: .62rem var(--mono); color: #587079; }
.quote-band { padding: clamp(7rem,14vw,13rem) max(12vw,var(--space)); background: var(--ink); color: var(--mint); }
.quote-band p { margin: 0; font: 500 clamp(2.1rem,4.7vw,5.2rem)/1.08 var(--serif); letter-spacing: -.055em; }

.gallery-heading { display: flex; justify-content: space-between; align-items: start; gap: 2rem; }
.gallery-heading h2 { margin: 0; text-align: right; }
.gallery-grid { display: grid; grid-template-columns: 1.55fr .72fr; align-items: end; gap: clamp(1rem,5vw,6rem); margin-top: 4rem; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; object-fit: cover; }
.gallery-large img { aspect-ratio: 1.36; }
.gallery-small img { aspect-ratio: .83; }
.gallery figcaption { padding-top: .8rem; font: 500 .55rem var(--mono); letter-spacing: .13em; }

.review { display: grid; grid-template-columns: 19% 1fr; gap: 2rem; background: #e7e1d6; }
.review-card { max-width: 52rem; }
.rating { font-size: 1.1rem; letter-spacing: .18em; }
.rating small { margin-left: .7rem; font: 500 .55rem var(--mono); letter-spacing: .1em; }
.review blockquote { margin: 1.7rem 0; font: 500 clamp(1.75rem,3.4vw,3.45rem)/1.12 var(--serif); letter-spacing: -.04em; }
.review-card p { font: 500 .6rem var(--mono); letter-spacing: .1em; }
.review-card p span { opacity: .55; }
.review .text-link { grid-column: 2; justify-self: start; margin-top: 1rem; }

.amenities { display: grid; grid-template-columns: 19% 1fr; gap: 2rem; }
.amenities ul { display: grid; grid-template-columns: repeat(2,1fr); list-style: none; margin: 0; padding: 0; }
.amenities li { padding: 1.1rem 0; border-top: 1px solid var(--line); font: 500 clamp(1rem,1.7vw,1.35rem) var(--serif); }
.amenities li:last-child, .amenities li:nth-last-child(2) { border-bottom: 1px solid var(--line); }

.contact { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: clamp(5.5rem,11vw,10rem) var(--space) 4rem; }
.contact-glow { position: absolute; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#3b908f 0,rgba(22,102,108,.3) 25%,transparent 68%); right: -18vw; top: -35vw; filter: blur(12px); opacity: .7; }
.light { color: var(--aqua); }
.contact-intro { position: relative; }
.contact h2 { max-width: 52rem; }
.contact-grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); margin-top: 4rem; border-top: 1px solid rgba(245,242,234,.35); border-left: 1px solid rgba(245,242,234,.35); }
.contact-card { position: relative; min-height: 13rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(245,242,234,.35); border-bottom: 1px solid rgba(245,242,234,.35); padding: 1.25rem; transition: background .35s var(--ease), color .35s; }
.contact-card:hover { background: var(--aqua); color: var(--ink); }
.contact-card span { font: 500 .55rem var(--mono); letter-spacing: .12em; }
.contact-card strong { font: 500 clamp(1.2rem,2.1vw,2.1rem)/1.15 var(--serif); letter-spacing: -.03em; }
.contact-card i { position: absolute; right: 1.25rem; top: 1.25rem; font-style: normal; }
.contact-note { position: relative; margin: 1.5rem 0 0; font: 500 .55rem var(--mono); letter-spacing: .1em; color: var(--aqua); }

footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2rem var(--space); background: var(--ink-2); color: var(--paper); font: 500 .55rem var(--mono); letter-spacing: .06em; }
footer p { margin: 0; opacity: .7; }
footer > a:not(.wordmark) { border-bottom: 1px solid rgba(255,255,255,.6); }
.mobile-bar { display: none; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes aura-float {
  0%, 100% { translate: 0 0; opacity: .55; }
  50% { translate: 2% -1%; opacity: 1; }
}

@media (max-width: 760px) {
  .site-header { padding-top: 1.1rem; }
  .site-header nav { display: none; }
  .nav-cta { font-size: .58rem; }
  .hero { padding-top: 6rem; }
  .hero-topline span:last-child { display: none; }
  .hero-copy { margin-top: 18vh; }
  .hero h1 { font-size: clamp(3.35rem,16vw,5.4rem); }
  .hero-summary { max-width: 20rem; }
  .hero-orbit { right: -2rem; bottom: 16%; width: 9rem; }
  .hero-aura { width: 26rem; right: -12rem; top: 43%; opacity: .7; }
  .hero-object-caption, .hero-index { display: none; }
  .intro, .review, .amenities { grid-template-columns: 1fr; }
  .intro-main { grid-template-columns: 1fr; }
  .principles { grid-column: 1; grid-template-columns: 1fr; margin-top: 3rem; gap: 0; }
  .principles article { padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .feature { grid-template-columns: 1fr; }
  .feature-image-wrap { min-height: 24rem; }
  .feature-copy { padding: 4rem var(--space); }
  .gallery-heading { display: block; }
  .gallery-heading h2 { text-align: left; margin-top: 2rem; }
  .gallery-grid { grid-template-columns: 1fr; gap: 2rem; }
  .gallery-small { max-width: 70%; justify-self: end; }
  .review { gap: 3rem; }
  .review .text-link { grid-column: 1; }
  .amenities ul { grid-template-columns: 1fr; }
  .amenities li:nth-last-child(2) { border-bottom: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { min-height: 9rem; }
  .contact-note { line-height: 1.8; }
  .mobile-bar { position: fixed; display: grid; grid-template-columns: 1fr 1.35fr; z-index: 10; bottom: 0; left: 0; width: 100%; background: var(--paper); box-shadow: 0 -5px 20px rgba(0,0,0,.1); }
  .mobile-bar a { padding: 1rem; text-align: center; font: 600 .61rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
  .mobile-bar a:first-child { border-right: 1px solid var(--line); }
  body { padding-bottom: 3rem; }
  footer { padding-bottom: 5rem; flex-wrap: wrap; }
  .hero-actions { gap: 1rem; }
  .hero-actions .text-link { font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  #hero-canvas { display: none; }
}