:root { --ink:#102b34; --cream:#f3efe5; --paper:#fbfaf6; --coral:#dc755a; --sun:#f5c867; --sea:#97c8c7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
button { font:inherit; }
.site-header { position:absolute; z-index:20; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:22px 5vw; color:white; border-bottom:1px solid rgba(255,255,255,.28); }
.brand,.footer-brand { display:flex; align-items:center; gap:13px; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid currentColor; border-radius:50%; font:italic 20px Georgia,serif; letter-spacing:-2px; }
.brand strong,.footer-brand strong { display:block; font:600 16px Georgia,serif; letter-spacing:.06em; }
.brand small,.footer-brand small { display:block; margin-top:3px; font-size:8px; text-transform:uppercase; letter-spacing:.24em; }
.nav { display:flex; align-items:center; gap:34px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.nav a:not(.nav-cta) { position:relative; }
.nav a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:white; transition:.25s; }
.nav a:hover::after { right:0; }
.nav-cta { border:1px solid rgba(255,255,255,.7); border-radius:30px; padding:13px 20px; transition:.2s; }
.nav-cta:hover { background:white; color:var(--ink); }
.menu-button { display:none; }
.hero { position:relative; min-height:760px; height:100svh; color:white; overflow:hidden; }
.hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,26,35,.7) 0%,rgba(5,26,35,.25) 55%,rgba(5,26,35,.05)),linear-gradient(0deg,rgba(5,26,35,.55),transparent 45%); }
.hero-content { position:absolute; z-index:2; left:8vw; top:50%; transform:translateY(-45%); max-width:800px; }
.eyebrow { margin:0 0 22px; color:var(--coral); font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow::before { content:""; display:inline-block; width:34px; height:1px; margin:0 13px 4px 0; background:currentColor; }
.eyebrow.light { color:var(--sun); }
h1,h2 { margin:0; font:400 64px/1.03 Georgia, "Times New Roman", serif; letter-spacing:-.035em; }
h1 { font-size:clamp(56px,7.2vw,108px); text-shadow:0 2px 20px rgba(0,0,0,.12); }
h1 em,h2 em { color:var(--sun); font-weight:400; }
.hero-copy { max-width:550px; margin:28px 0 34px; font:18px/1.6 Georgia,serif; }
.button { display:inline-flex; align-items:center; gap:26px; border:1px solid; border-radius:30px; padding:15px 23px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; transition:.2s; }
.button span { font-size:16px; }
.button-light:hover { background:white; color:var(--ink); border-color:white; }
.hero-facts { position:absolute; z-index:2; right:5vw; bottom:42px; display:flex; gap:0; border:1px solid rgba(255,255,255,.38); backdrop-filter:blur(10px); background:rgba(9,36,44,.22); }
.hero-facts span { min-width:110px; padding:15px 20px; border-right:1px solid rgba(255,255,255,.28); font-size:9px; text-transform:uppercase; letter-spacing:.14em; }
.hero-facts span:last-child { border:0; }
.hero-facts b { display:block; margin-bottom:4px; font:26px Georgia,serif; }
.scroll-cue { position:absolute; z-index:2; bottom:42px; left:5vw; font-size:9px; text-transform:uppercase; letter-spacing:.18em; }
.scroll-cue span { display:inline-grid; place-items:center; width:34px; height:34px; margin-right:10px; border:1px solid rgba(255,255,255,.5); border-radius:50%; }
.section { padding:120px 8vw; }
.section-tag { display:flex; align-items:center; gap:15px; margin-bottom:64px; color:#557079; font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.section-tag::after { content:""; height:1px; flex:1; background:#d8d8d0; }
.section-tag span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #c4c9c6; border-radius:50%; }
.intro-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; align-items:start; }
.intro h2,.gallery h2 { font-size:clamp(45px,5vw,74px); }
.intro-copy { padding-top:38px; font:17px/1.75 Georgia,serif; color:#3d5258; }
.intro-copy p { margin:0 0 20px; }
.feature-grid { display:grid; grid-template-columns:1.45fr .55fr; gap:24px; margin-top:80px; }
figure { margin:0; }
.feature-main img { height:650px; object-fit:cover; }
.feature-main figcaption { padding-top:12px; font-size:9px; text-transform:uppercase; letter-spacing:.16em; color:#64777b; }
.feature-side { display:flex; flex-direction:column; gap:24px; }
.feature-side figure { flex:1; }
.feature-side img { height:100%; object-fit:cover; }
.feature-side blockquote { margin:0; padding:42px; background:var(--coral); color:white; font:20px/1.55 Georgia,serif; }
.feature-side cite { display:block; margin-top:24px; font:9px Arial,sans-serif; text-transform:uppercase; letter-spacing:.16em; }
.details { display:grid; grid-template-columns:1fr 1fr; min-height:780px; padding:0; background:var(--cream); }
.details-image { position:relative; min-height:780px; overflow:hidden; }
.details-image img { height:100%; object-fit:cover; }
.stamp { position:absolute; top:52px; right:-48px; display:grid; place-items:center; width:116px; height:116px; background:var(--sun); border-radius:50%; text-align:center; font:italic 18px/1.05 Georgia,serif; transform:rotate(8deg); text-transform:uppercase; }
.details-content { padding:110px 8vw; }
.details-content h2 { font-size:clamp(42px,4.6vw,68px); }
.amenity-list { margin-top:55px; border-top:1px solid #cdd0c7; }
.amenity { display:grid; grid-template-columns:52px 1fr; gap:15px; padding:21px 0; border-bottom:1px solid #cdd0c7; }
.amenity>span { padding-top:5px; color:var(--coral); font:italic 13px Georgia,serif; }
.amenity h3 { margin:0 0 7px; font:22px Georgia,serif; }
.amenity p,.fine-print { margin:0; color:#5a6c6d; font-size:12px; line-height:1.6; }
.fine-print { margin-top:24px; }
.gallery { background:var(--ink); color:white; }
.gallery-heading { display:grid; grid-template-columns:1fr 320px; align-items:end; gap:30px; margin-bottom:60px; }
.gallery-heading>p { color:#a8b8b9; font:16px/1.6 Georgia,serif; }
.photo-grid { display:grid; grid-template-columns:1.1fr .9fr .9fr; grid-template-rows:290px 390px; gap:14px; }
.photo { position:relative; padding:0; border:0; overflow:hidden; color:white; cursor:pointer; background:#183d47; }
.photo::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,25,30,.65),transparent 45%); }
.photo img { height:100%; object-fit:cover; transition:transform .55s ease; }
.photo:hover img { transform:scale(1.035); }
.photo span { position:absolute; z-index:2; left:20px; right:18px; bottom:18px; display:flex; align-items:center; justify-content:space-between; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.photo b { font-size:18px; font-weight:300; }
.photo-1 { grid-row:1/3; }
.photo-4 { grid-column:2/4; }
.text-button { margin-top:32px; padding:0 0 8px; border:0; border-bottom:1px solid #85999e; background:transparent; color:white; cursor:pointer; font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.text-button span { margin-left:22px; }
.explore { position:relative; min-height:850px; padding:80px 8vw; display:flex; align-items:center; justify-content:flex-end; overflow:hidden; }
.explore>img { position:absolute; inset:0; height:100%; object-fit:cover; }
.explore::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 30%,rgba(5,27,34,.25)); }
.explore-card { position:relative; z-index:2; width:min(520px,48vw); padding:65px; background:rgba(16,43,52,.94); color:white; }
.explore-card h2 { font-size:clamp(46px,5vw,70px); }
.explore-card>p:not(.eyebrow) { color:#c7d0cf; font:16px/1.7 Georgia,serif; }
.explore-card ul { list-style:none; padding:0; margin:35px 0; border-top:1px solid #49636b; }
.explore-card li { padding:14px 0; border-bottom:1px solid #49636b; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.explore-card li span { display:inline-block; width:72px; color:var(--sun); }
.explore-card>a { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; border-bottom:1px solid; padding-bottom:6px; }
.testimonial { text-align:center; background:var(--paper); }
.quote-mark { color:var(--coral); font:80px/1 Georgia,serif; }
.testimonial blockquote { margin:0 auto 24px; font:clamp(34px,4.5vw,66px)/1.18 Georgia,serif; }
.testimonial blockquote em { color:var(--coral); font-weight:400; }
.testimonial p { font-size:9px; text-transform:uppercase; letter-spacing:.2em; color:#698084; }
.inquiry { position:relative; min-height:660px; display:grid; place-items:center; padding:100px 20px; color:white; overflow:hidden; }
.inquiry>img { position:absolute; inset:0; height:100%; object-fit:cover; }
.inquiry::after { content:""; position:absolute; inset:0; background:rgba(8,34,42,.56); }
.inquiry-content { position:relative; z-index:2; max-width:680px; text-align:center; }
.inquiry-content .eyebrow::before { display:none; }
.inquiry h2 { font-size:clamp(54px,7vw,94px); }
.inquiry p:not(.eyebrow) { max-width:540px; margin:25px auto 30px; font:16px/1.7 Georgia,serif; }
.inquiry small { display:block; margin-top:18px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
footer { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:40px; padding:70px 7vw 25px; background:#0b222a; color:white; }
footer>p { margin:0; color:#9eb0b2; font:14px/1.6 Georgia,serif; }
.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; margin-top:40px; padding-top:20px; border-top:1px solid #29434a; color:#799095; font-size:9px; text-transform:uppercase; letter-spacing:.14em; }
.lightbox { position:fixed; z-index:100; inset:0; display:grid; grid-template-columns:80px 1fr 80px; place-items:center; padding:30px; background:rgba(5,20,25,.96); color:white; }
.lightbox[hidden] { display:none; }
.lightbox figure { width:min(1100px,82vw); }
.lightbox img { max-height:78vh; object-fit:contain; }
.lightbox figcaption { display:flex; justify-content:space-between; padding-top:14px; font-size:11px; text-transform:uppercase; letter-spacing:.14em; }
.lightbox button { border:0; background:transparent; color:white; cursor:pointer; }
.lightbox-close { position:absolute; top:24px; right:28px; font-size:34px; }
.lightbox-arrow { font-size:26px; }

@media (max-width: 900px) {
  .site-header { padding:18px 22px; }
  .menu-button { display:flex; z-index:2; flex-direction:column; gap:7px; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.6); border-radius:50%; background:transparent; }
  .menu-button span { width:16px; height:1px; background:white; }
  .nav { display:none; position:absolute; top:79px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:20px 24px 30px; background:var(--ink); }
  .nav.open { display:flex; }
  .nav a { padding:14px 0; }
  .nav-cta { margin-top:10px; text-align:center; }
  .hero { min-height:700px; }
  .hero-content { left:7vw; right:7vw; }
  .hero-facts { left:7vw; right:7vw; bottom:28px; display:grid; grid-template-columns:1fr 1fr; }
  .hero-facts span { min-width:0; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.28); }
  .hero-facts span:nth-child(2) { border-right:0; }
  .hero-facts span:nth-child(n+3) { border-bottom:0; }
  .hero-facts b { display:inline; margin-right:5px; font-size:19px; }
  .scroll-cue { display:none; }
  .section { padding:82px 7vw; }
  .section-tag { margin-bottom:45px; }
  .intro-grid,.details,.gallery-heading { grid-template-columns:1fr; }
  .intro-copy { padding-top:10px; }
  .feature-grid { grid-template-columns:1fr; margin-top:48px; }
  .feature-main img { height:440px; }
  .feature-side { display:grid; grid-template-columns:1fr 1fr; }
  .details-image { min-height:580px; }
  .details-content { padding:80px 7vw; }
  .stamp { right:25px; }
  .gallery-heading>p { max-width:480px; }
  .photo-grid { grid-template-columns:1fr 1fr; grid-template-rows:360px 260px 260px; }
  .photo-1 { grid-row:1; grid-column:1/3; }
  .photo-4 { grid-column:auto; }
  .explore { justify-content:center; padding:60px 7vw; }
  .explore-card { width:min(620px,100%); }
}

@media (max-width: 600px) {
  .brand strong { font-size:14px; }
  h1 { font-size:48px; }
  .hero-copy { font-size:16px; }
  .hero-content { transform:translateY(-62%); }
  .eyebrow { margin-bottom:16px; }
  .hero-facts { font-size:8px; }
  .section { padding:70px 22px; }
  .intro h2,.gallery h2,.details-content h2 { font-size:41px; }
  .feature-main img { height:360px; }
  .feature-side { grid-template-columns:1fr; }
  .feature-side figure { height:280px; }
  .feature-side blockquote { padding:32px; }
  .details-image { min-height:470px; }
  .details-content { padding:70px 22px; }
  .photo-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; }
  .photo { flex:0 0 82vw; height:410px; scroll-snap-align:start; }
  .explore { min-height:800px; padding:40px 18px; align-items:end; }
  .explore-card { padding:42px 28px; }
  .explore-card h2 { font-size:44px; }
  .testimonial blockquote { font-size:36px; }
  footer { grid-template-columns:1fr; }
  .footer-bottom { grid-column:1; }
  .lightbox { grid-template-columns:42px 1fr 42px; padding:15px 6px; }
  .lightbox figure { width:100%; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .photo img { transition:none; } }