@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:optional;src:url(/fonts/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd58jD-iNM8A_6pUKz9.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:optional;src:url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:optional;src:url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:optional;src:url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:optional;src:url(/fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:optional;src:url(/fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:optional;src:url(/fonts/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:200;font-display:optional;src:url(/fonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:optional;src:url(/fonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:optional;src:url(/fonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:optional;src:url(/fonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:optional;src:url(/fonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:optional;src:url(/fonts/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:root {
--bg-primary: #0a0b0d;
--bg-secondary: #111217;
--bg-card: #16171c;
--bg-elevated: #1c1d24;
--text-primary: #f0ece4;
--text-secondary: #b0b0ba;
--text-muted: #80808c;
--accent: #c9a96e;
--accent-light: #dfc48e;
--accent-dark: #a88a4e;
--border: rgba(201, 169, 110, 0.12);
--border-light: rgba(240, 236, 228, 0.06);
--gradient-gold: linear-gradient(135deg, #c9a96e 0%, #e8d5a8 50%, #c9a96e 100%);
--shadow-glow: 0 0 60px rgba(201, 169, 110, 0.08);
--font-display: 'Cormorant Garamond', serif;
--font-body: 'Outfit', sans-serif;
--font-detail: 'DM Sans', sans-serif;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--t-fast: 0.25s;
--t-base: 0.4s;
--t-slow: 0.8s;
--z-base: 1;
--z-above: 2;
--z-nav: 1000;
--z-mobile-nav: 999;
--z-float: 500;
--z-lightbox: 10000;
--z-skip: 10001;
}
/* ===== DAY (ivory luxury) THEME ===== *//*LBK-THEME-V1*/
html[data-theme="day"]{
--bg-primary:#f5f1ea;--bg-secondary:#ece6d9;--bg-card:#ffffff;--bg-elevated:#fbf8f2;
--text-primary:#16140f;--text-secondary:#3a352c;--text-muted:#6a6357;
--accent:#b1873f;--accent-light:#c9a96e;--accent-dark:#8f6c2f;
--border:rgba(26,26,26,0.12);--border-light:rgba(26,26,26,0.07);
--shadow-glow:0 0 60px rgba(177,135,63,0.10);
--gradient-gold:linear-gradient(135deg,#b1873f 0%,#d9bd84 50%,#b1873f 100%);
}
html[data-theme="day"] body{background:var(--bg-primary);color:var(--text-primary);}
body{transition:background-color .4s ease,color .4s ease;}
/* day-mode: darken nav + footer logo; hero logo stays white (it sits on a dark photo) */
html[data-theme="day"] #navbar .logo-svg .lk-main,html[data-theme="day"] .footer-logo .logo-svg .lk-main{fill:#111111;}
html[data-theme="day"] #navbar .logo-svg .lk-lio,html[data-theme="day"] .footer-logo .logo-svg .lk-lio{fill:#9a9a9a;}
html[data-theme="day"] .hero-name .logo-svg .lk-main{fill:#ffffff;}
html[data-theme="day"] .hero-name .logo-svg .lk-lio{fill:#e8e2d6;}
/* theme toggle button */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);background:transparent;color:var(--text-primary);border-radius:50%;cursor:pointer;margin-right:12px;transition:border-color .3s,color .3s;padding:0;-webkit-tap-highlight-color:transparent;}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .ti-sun{display:none;}
html[data-theme="day"] .theme-toggle .ti-sun{display:block;}
html[data-theme="day"] .theme-toggle .ti-moon{display:none;}

html { scroll-behavior: smooth; font-size: 16px; -webkit-overflow-scrolling: touch;  overflow-x: hidden; }
html, body { overscroll-behavior-y: auto; }
/* ── HORIZONTAL OVERFLOW FIX ── */
html, body { overflow-x: hidden; max-width: 100vw; }
main, section, footer, nav { max-width: 100vw; }
.hero-bg-img, .hero-bg-img video, .hero-bg-img img { max-width: 100vw; }

.skip-to-content {
position: absolute; top: -100px; left: 16px; z-index: var(--z-skip);
background: var(--accent); color: var(--bg-primary);
padding: 10px 16px; font-family: var(--font-detail); font-size: 0.75rem;
font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
text-decoration: none; transition: top 0.2s;
}
.skip-to-content:focus { top: 16px; }
body {
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-body);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
::selection { background: rgba(201,169,110,0.38); color: inherit; }
::-moz-selection { background: rgba(201,169,110,0.38); color: inherit; }
.scroll-progress {
position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-nav) + 2);
height: 2px; width: 0%;
background: linear-gradient(to right, #C5A46E, #E8D5A3);
transform-origin: left;
transition: width 0.15s linear, opacity 0.3s ease;
pointer-events: none;
opacity: 0;
box-shadow: 0 0 8px rgba(201,169,110,0.3);
}
.scroll-progress.visible { opacity: 1; }}

:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 1px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero-bg-img img, .hero-bg-img video { animation: none; transform: scale(1); }
.scroll-dot { animation: none; top: 7px; opacity: 1; }
.reveal { opacity: 1; transform: none; transition: none; }
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--accent-dark); border-radius: 3px; }
.logo-svg { display: block; } .logo-svg .lk-main, .logo-svg .lk-lio { fill: #ffffff; transition: fill .3s ease; } html[data-theme="day"] .logo-svg .lk-main { fill: #111111; } html[data-theme="day"] .logo-svg .lk-lio { fill: #9a9a9a; }
.nav-logo .logo-svg { height: 18px; width: auto; }
.hero-name .logo-svg { height: clamp(32px, 4vw, 52px); width: auto; }
.footer-logo .logo-svg { height: 20px; width: auto; margin-bottom: 20px; }
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
padding: 24px clamp(16px, 4vw, 80px);
display: flex; align-items: center; justify-content: space-between;
transition: all 0.5s var(--ease-out);
background: linear-gradient(to bottom, rgba(10,11,13,0.55) 0%, transparent 100%);
}
nav.scrolled {
background: rgba(10, 11, 13, 0.92);
backdrop-filter: blur(30px) saturate(1.2); -webkit-backdrop-filter: blur(30px) saturate(1.2);
padding: 18px clamp(16px, 4vw, 80px);
border-bottom: 1px solid rgba(201, 169, 110, 0.15);
box-shadow: 0 1px 24px rgba(0,0,0,0.25);
}
.nav-logo {
font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
letter-spacing: 0.28em; color: var(--accent);
text-decoration: none;
opacity: 0; pointer-events: none;
transition: opacity 0.6s var(--ease-out);
}
nav.scrolled .nav-logo { opacity: 1; pointer-events: auto; }
nav.scrolled .nav-logo:hover { opacity: 0.75; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
font-family: var(--font-detail); font-size: 0.72rem; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(240,236,228,0.72); text-decoration: none;
position: relative; padding: 14px 6px 6px;
transition: color 0.35s var(--ease-out); min-height: 48px; display: inline-flex; align-items: center;
}
.nav-links a::after {
content: ''; position: absolute; bottom: 0; left: 0;
width: 0; height: 1.5px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
transition: width 0.5s var(--ease-out);
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--text-primary); }
.nav-links a.active::after { width: 100%; background: var(--accent); }
.nav-cta {
font-size: 0.72rem !important; letter-spacing: 0.2em !important; font-weight: 600 !important;
padding: 10px 28px !important;
border: 1px solid var(--accent) !important;
color: var(--accent) !important;
transition: all 0.4s var(--ease-out) !important;
}
.nav-cta:hover {
background: var(--accent) !important; color: var(--bg-primary) !important;
box-shadow: 0 4px 16px rgba(201,169,110,0.25) !important;
}
.nav-cta::after { display: none !important; }
.nav-brochure {
font-size: 0.72rem !important; letter-spacing: 0.15em !important; font-weight: 500 !important;
padding: 9px 22px !important;
border: 1px solid rgba(201,169,110,0.3) !important;
color: var(--accent) !important;
transition: all 0.4s var(--ease-out) !important;
display: inline-flex !important; align-items: center !important; gap: 7px !important;
cursor: pointer; background: transparent !important; text-transform: uppercase;
white-space: nowrap;
}
.nav-brochure:hover {
background: rgba(201,169,110,0.08) !important; border-color: var(--accent) !important;
}
.nav-brochure::after { display: none !important; }
.nav-brochure svg { width: 13px; height: 13px; flex-shrink: 0; }
.menu-toggle {
display: none; cursor: pointer; flex-direction: column;
gap: 6px; padding: 10px; background: rgba(255,255,255,0.06);
min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: border-color 0.3s, background 0.3s;
}
.menu-toggle:hover { border-color: var(--accent); background: rgba(201,169,110,0.1); }
.menu-toggle span {
display: block; width: 20px; height: 1.5px; background: rgba(240,236,228,0.85);
transition: all 0.35s var(--ease-out); transform-origin: center;
}
.menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.mobile-nav {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(10, 11, 13, 0.98);
z-index: var(--z-mobile-nav); flex-direction: column;
align-items: center; justify-content: center; gap: 0;
padding: 80px 40px;
display: flex;
overflow-y: auto; -webkit-overflow-scrolling: touch;
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(-16px);
transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.35s;
}
.mobile-nav::before {
content: ''; position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 300px; height: 300px; border-radius: 50%;
background: radial-gradient(circle, rgba(201,169,110,0.06) 0%, transparent 70%);
pointer-events: none;
}
.mobile-nav.open {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateY(0);
}
.mobile-nav a {
font-family: var(--font-display); font-size: 1.65rem; font-weight: 300;
letter-spacing: 0.14em; color: rgba(240,236,228,0.8); text-decoration: none;
transition: color 0.3s var(--ease-out);
padding: 20px 0;
border-bottom: 1px solid rgba(201,169,110,0.1);
width: 100%;
text-align: center;
}
.mobile-nav a:first-child { border-top: 1px solid rgba(201,169,110,0.1); }
.mobile-nav a:hover { color: var(--accent); }
.mobile-nav .mobile-brochure {
color: var(--accent) !important; font-size: 0.85rem !important;
letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500;
opacity: 0.8; transition: opacity 0.3s;
}
.mobile-nav .mobile-brochure:hover { opacity: 1; }
.mobile-nav .mobile-cta {
margin-top: 32px; font-family: var(--font-detail);
font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
padding: 16px 40px; border: 1px solid var(--accent); color: var(--accent);
border-bottom: 1px solid var(--accent);
transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.mobile-nav .mobile-cta:hover { background: var(--accent); color: var(--bg-primary); }


/* tablet-mobile-nav */
@media (min-width: 769px) and (max-width: 1024px) {
.mobile-nav { padding: 100px 60px 40px; gap: 10px; }
.mobile-nav a { font-size: 1.4rem; padding: 12px 0; }
.mobile-nav .mobile-cta { font-size: 0.78rem; padding: 14px 36px; margin-top: 16px; }
.mobile-nav .mobile-brochure { font-size: 0.78rem !important; }
}
@media (max-height: 700px) {
.mobile-nav { padding: 60px 20px 30px; gap: 8px; justify-content: flex-start; }
.mobile-nav a { font-size: 1rem; padding: 10px 0; }
.mobile-nav .mobile-cta { margin-top: 12px; padding: 10px 28px; }
.mobile-nav .mobile-brochure { font-size: 0.75rem !important; padding: 8px 0; }
}
@media (max-height: 580px) {
.mobile-nav { padding: 50px 16px 20px; gap: 4px; }
.mobile-nav a { font-size: 0.9rem; padding: 7px 0; }
.mobile-nav .mobile-cta { margin-top: 8px; padding: 8px 24px; font-size: 0.65rem; }
}
.hero {
position: relative;
height: 100vh; height: calc(var(--vh, 1vh) * 100);
min-height: 700px;
display: flex; align-items: flex-end;
padding: 0 clamp(14px, 4vw, 120px) clamp(60px, 7vw, 160px); overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0;
}
.hero-bg-img {
position: absolute; inset: 0; overflow: hidden; -webkit-overflow-scrolling: touch;
background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAADwAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgADwAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAAgICAgICAwICAwUDAwMFBgUFBQUGCAYGBgYGCAoICAgICAgKCgoKCgoKCgwMDAwMDA4ODg4ODw8PDw8PDw8PD//bAEMBAgICBAQEBwQEBxALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/dAAQAAv/aAAwDAQACEQMRAD8A8806w1vW42uNG0i6vYl6vDDJIuT7gcn2GSa5/UL7VIdbt9AtdFuBc3Kr+8ngmhUEsMjYYzKQFzyqkZ7V49Z/tSeP/AHiXR9N065lv9PgkXzLO6ubhIdg6IogkXaOScDI9q/Qaw/av/Z11Ex6r4+8GammsTrvZre9mlhMiDIC5lQoDj5cDjvX7Hn2f46FR0sOtE91q/xPwjh3g7L5U1WxW7Wz0XroR2H7LPjfVLcXNvrdgRwGWG11C5EZIDbGeKApuAIyATirv/DI/j//AKDNt/4LdU/+R67nwj+2r8GrjR1OleBL3T7dHZREhimweCSWaVDk554P1rqP+GzfhZ/0KOof9+4P/kivL/tvPP5H9yPX/wBV+Hv51/4Ez//Z) center/cover no-repeat;
}
.hero-bg-img img, .hero-bg-img video {
width: 100%; height: 100%;
object-fit: cover; object-position: center center;
}
.hero-bg-img img {
transform: scale(1.04);
animation: heroZoom 22s var(--ease-out) forwards;
}
.hero-bg-img video {
transform: none;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 40%;
}
video.hero-video::-webkit-media-controls-panel,
video.hero-video::-webkit-media-controls-play-button,
video.hero-video::-webkit-media-controls-start-playback-button,
video.hero-video::-webkit-media-controls-overlay-play-button,
video.hero-video::-webkit-media-controls-container,
video.hero-video::-webkit-media-controls-enclosure,
video.hero-video::-webkit-media-controls {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important; height: 0 !important;
}
video::-webkit-media-controls-start-playback-button { display: none !important; opacity: 0 !important; pointer-events: none !important; }
video::-webkit-media-controls-overlay-play-button { display: none !important; opacity: 0 !important; }
*::-webkit-media-controls { display: none !important; }
.hero-poster-bg {
position: absolute; inset: 0; z-index: 2;
background: url('/yacht-images/hero-poster.webp?v=5') center 40%/cover no-repeat;
transition: opacity 0.3s ease;
}
.hero-poster-bg.fade { opacity: 0; pointer-events: none; }
.hero-touch-layer {
position: absolute; inset: 0; z-index: 2;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.hero-touch-layer.hidden { display: none; }
@media (max-width: 768px) {
.hero-bg-img img, .hero-bg-img video {
object-position: center 40%;
}
.hero-poster-bg {
background-image: url('/yacht-images/hero-poster-mobile.webp?v=5');
}
.hero-bg-img img {
transform: none;
animation: none;
}
}
@keyframes heroZoom {
from { transform: scale(1.05); }
to { transform: scale(1); }
}
.hero-bg-overlay {
position: absolute; inset: 0;
background:
linear-gradient(to right, rgba(10,11,13,0.65) 0%, rgba(10,11,13,0.35) 28%, transparent 52%),
linear-gradient(to top, rgba(10,11,13,0.95) 0%, rgba(10,11,13,0.25) 8%, transparent 18%),
linear-gradient(to bottom, rgba(10,11,13,0.5) 0%, transparent 10%);
}
.hero-content { position: relative; z-index: 10; max-width: 780px; overflow: visible; }
.hero-tag {
font-family: var(--font-detail); font-size: 0.68rem; font-weight: 500;
letter-spacing: 0.5em; text-transform: uppercase;
color: rgba(201,169,110,0.9); margin-bottom: 18px;
display: flex; align-items: center; gap: 18px;
opacity: 1;
text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 2px 24px rgba(0,0,0,0.5);
}
.hero-tag::before {
content: ''; width: 48px; height: 1px; flex-shrink: 0;
background: linear-gradient(90deg, rgba(201,169,110,0.6), transparent);
}
.hero-tag::after { display: none; }
.hero-name-wrap {
display: flex; flex-direction: column; gap: 6px; margin-bottom: 0;
opacity: 1;
}
.hero-name-prefix {
font-family: var(--font-detail); font-size: clamp(0.75rem, 1vw, 0.85rem);
letter-spacing: clamp(0.2em, 0.4vw, 0.45em); text-transform: uppercase;
color: rgba(201,169,110,0.85);
text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 2px 24px rgba(0,0,0,0.5);
}
.hero-name {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(3rem, 5.5vw, 5.5rem); line-height: 0.95;
letter-spacing: 0.08em; margin: 0; white-space: nowrap;
color: rgba(240,236,228,0.97);
text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 4px 40px rgba(0,0,0,0.6), 0 0 80px rgba(0,0,0,0.4);
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.hero-detail {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-family: var(--font-detail); font-size: 0.76rem; font-weight: 400;
letter-spacing: 0.26em; text-transform: uppercase;
color: rgba(240,236,228,0.65); margin-top: 16px; margin-bottom: 0;
opacity: 1;
text-shadow: 0 1px 8px rgba(0,0,0,0.8), 0 2px 20px rgba(0,0,0,0.5);
}
.hero-detail-sep {
width: 3px; height: 3px; border-radius: 50%;
background: rgba(201,169,110,0.4); flex-shrink: 0;
}
.hero-rule {
width: 48px; height: 1px;
background: rgba(201,169,110,0.5); margin: 28px 0;
box-shadow: 0 0 12px rgba(0,0,0,0.4);
opacity: 1;
}
.hero-subtitle {
font-family: var(--font-body); font-weight: 300;
font-size: 1.05rem; line-height: 1.9;
color: rgba(240,236,228,0.7); max-width: 480px; margin-bottom: 32px;
text-shadow: 0 1px 6px rgba(0,0,0,0.8), 0 2px 20px rgba(0,0,0,0.6), 0 4px 40px rgba(0,0,0,0.4);
letter-spacing: 0.015em;
opacity: 1;
}
.hero-actions {
display: flex; gap: 20px; align-items: center;
opacity: 1;
}
.btn-primary {
box-shadow: 0 2px 16px rgba(0,0,0,0.4);
display: inline-flex; align-items: center; gap: 12px;
padding: 18px 42px; background: var(--accent); color: var(--bg-primary);
font-family: var(--font-detail); font-size: 0.74rem;
font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
text-decoration: none; border: none; cursor: pointer;
transition: all 0.4s var(--ease-out); position: relative; overflow: hidden;
box-shadow: 0 4px 20px rgba(201,169,110,0.2);
}
.btn-primary::before {
content: ''; position: absolute; inset: 0;
background: var(--accent-light); transform: translateX(-100%);
transition: transform 0.5s var(--ease-out);
}
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary svg { width: 16px; height: 16px; }
.btn-outline {
display: inline-flex; align-items: center; gap: 12px;
padding: 18px 40px; background: transparent; color: var(--text-primary);
font-family: var(--font-detail); font-size: 0.76rem;
font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase;
text-decoration: none; border: 1px solid var(--border); cursor: pointer;
position: relative; overflow: hidden;
transition: border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.btn-outline::before {
content: ''; position: absolute; inset: 0;
background: var(--accent); transform: translateX(-100%);
transition: transform 0.5s var(--ease-out);
}
.btn-outline:hover { border-color: var(--accent); color: var(--bg-primary); }
.btn-outline:hover::before { transform: translateX(0); }
.btn-outline > * { position: relative; z-index: 1; }
.btn-primary, .btn-outline { min-height: 48px; touch-action: manipulation; }
.nav-links a, .gallery-tab, .cabin-thumb, .faq-item summary { touch-action: manipulation; }
.hero .btn-outline,
.cta-section .btn-outline {
color: rgba(240,236,228,0.92);
border-color: rgba(240,236,228,0.45);
}
.hero .btn-outline:hover,
.cta-section .btn-outline:hover {
color: var(--bg-primary);
border-color: var(--accent);
}
.hero-stats {
position: absolute; right: clamp(32px, 4vw, 120px); bottom: 96px;
display: flex; flex-direction: column; gap: 36px; z-index: 10;
opacity: 1;
}
.hero-stat { text-align: right; }
.hero-stat-value {
font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 2.8rem); font-weight: 300;
color: rgba(240,236,228,0.97); line-height: 1;
letter-spacing: 0.02em;
text-shadow: 0 1px 8px rgba(0,0,0,0.8), 0 3px 24px rgba(0,0,0,0.5);
}
.hero-stat-divider {
width: 100%; height: 1px; background: rgba(201,169,110,0.45); margin-bottom: 6px;
box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
.hero-stat-label {
font-family: var(--font-detail); font-size: 0.68rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--accent); margin-top: 8px;
text-shadow: 0 1px 6px rgba(0,0,0,0.8), 0 2px 16px rgba(0,0,0,0.6);
}
.hero-scroll {
position: absolute; bottom: 36px; left: 50%;
transform: translateX(-50%); z-index: 10;
cursor: pointer; display: flex; flex-direction: column; align-items: center;
opacity: 1;
}
.scroll-mouse {
width: 26px; height: 42px;
border: 1.5px solid rgba(240,236,228,0.5);
filter: drop-shadow(0 1px 6px rgba(0,0,0,0.6));
border-radius: 13px; position: relative;
transition: border-color var(--t-base) var(--ease-out);
}
.hero-scroll:hover .scroll-mouse { border-color: var(--accent); }
.scroll-dot {
width: 4px; height: 8px;
background: var(--accent); border-radius: 2px;
position: absolute; left: 50%; top: 7px;
transform: translateX(-50%);
animation: scrollDot 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollDot {
0%   { top: 7px; opacity: 1; }
55%  { top: 22px; opacity: 0.2; }
56%  { top: 7px; opacity: 0; }
80%  { top: 7px; opacity: 0; }
100% { top: 7px; opacity: 1; }
}
section { padding: clamp(48px, 8vw, 140px) clamp(14px, 4vw, 80px); position: relative; }
.section-tag {
font-family: var(--font-detail); font-size: 0.7rem; font-weight: 500;
letter-spacing: 0.38em; text-transform: uppercase;
color: var(--accent); margin-bottom: 20px;
display: flex; align-items: center; gap: 18px;
}
.section-tag::before { content: ''; width: 40px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.section-title {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.12;
letter-spacing: -0.015em; margin-bottom: 22px;
color: var(--text-primary);
}
.section-desc {
font-weight: 300; font-size: 1.02rem; line-height: 1.9;
color: var(--text-secondary); max-width: 560px;
letter-spacing: 0.01em;
}
.reveal {
opacity: 0; transform: translateY(40px);
transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }
.about-section { background: var(--bg-primary); padding-top: 140px; padding-bottom: 140px; }
.about {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: stretch;
max-width: 1400px; margin: 0 auto;
}
.about-images {
position: relative;
}
.about-img {
overflow: hidden; border-radius: 2px;
}
@media (min-width: 1025px) {
  .about-img {
    position: sticky; top: 100px;
    height: 70vh; min-height: 400px; max-height: 700px;
  }
}
@media (max-width: 1024px) {
  .about-img {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
  }
  .about-img img {
    width: 100%; height: 100%; object-fit: cover;
  }
}
.about-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.8s var(--ease-out);
}
.about-img:hover img { transform: scale(1.05); }
.about-img::after {
content: ''; position: absolute; inset: 0;
border: 1px solid var(--border); pointer-events: none;
}
.about-text { padding-right: 20px; }
.featured-in {
display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
margin-top: 40px; padding-top: 32px;
border-top: 1px solid rgba(240,236,228,0.08);
}
.featured-in-label {
font-family: var(--font-detail);
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(240,236,228,0.35);
}
.featured-in-logos {
display: flex; align-items: center; gap: 20px;
}
.featured-in-link {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-detail);
font-size: 0.78rem;
letter-spacing: 0.08em;
color: rgba(240,236,228,0.5);
text-decoration: none;
transition: color 0.3s;
}
.featured-in-link:hover { color: var(--accent); }
.featured-in-link svg { width: 20px; height: 20px; opacity: 0.6; }
.featured-in-link:hover svg { opacity: 1; }
.about-features {
display: grid; grid-template-columns: 1fr 1fr;
gap: 20px; margin-top: 48px;
}
.about-feature {
padding: 24px; border: 1px solid var(--border);
transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.about-feature:hover {
border-color: var(--accent); background: rgba(201,169,110,0.03);
}
.about-feature-icon { width: 32px; height: 32px; margin-bottom: 16px; color: var(--accent); }
.about-feature h3 {
font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; margin-bottom: 8px;
}
.about-feature p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; }
.specs-section {
background: var(--bg-secondary);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.specs-inner { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
.specs-header {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 80px; gap: 40px;
}
.specs-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1px; background: var(--border);
border: 1px solid var(--border);
}
.spec-card {
background: var(--bg-secondary); padding: 48px 32px; text-align: center;
transition: all 0.5s var(--ease-out); position: relative;
}
.spec-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(201,169,110,0.05), transparent);
opacity: 0; transition: opacity 0.5s;
}
.spec-card:hover::before { opacity: 1; }
.spec-card:hover { transform: translateY(-4px); }
.spec-value {
font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 300;
color: var(--accent); line-height: 1; margin-bottom: 4px;
}
.spec-unit { font-family: var(--font-detail); font-size: 0.82rem; color: var(--accent); opacity: 0.7; letter-spacing: 0.1em; }
.spec-label {
font-family: var(--font-detail); font-size: 0.72rem;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--text-secondary); margin-top: 12px;
}
.gallery-section { overflow: hidden; background: var(--bg-primary); }
.gallery-inner { max-width: 1400px; margin: 0 auto; }
.gallery-header {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 60px; gap: 32px;
}
.gallery-tabs { display: flex; gap: 32px; flex-wrap: wrap; }
.gallery-tab {
font-family: var(--font-detail); font-size: 0.76rem;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-muted); cursor: pointer;
padding: 12px 4px 8px; border-bottom: 1px solid transparent;
background: none; border-top: none; border-left: none; border-right: none;
transition: all 0.3s; min-height: 48px; display: flex; align-items: center;
}
.gallery-tab.active, .gallery-tab:hover {
color: var(--accent); border-bottom-color: var(--accent);
}
.gallery-grid {
display: grid; gap: 6px;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: clamp(140px, 20vw, 280px);
grid-auto-flow: dense;
}
.gallery-item {
overflow: hidden; position: relative; cursor: pointer;
border-radius: 4px;
}
.gallery-item img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s;
display: block;
}
.gallery-item:hover img { transform: scale(1.08); filter: brightness(0.92); }
.gallery-item::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,11,13,0.7) 0%, rgba(10,11,13,0.08) 50%, transparent 100%);
opacity: 0; transition: opacity 0.5s;
border-radius: 4px;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item::before {
content: '+'; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.7);
font-family: var(--font-display); font-size: 2rem; font-weight: 300;
color: rgba(255,255,255,0.9); z-index: 3;
width: 48px; height: 48px; line-height: 44px; text-align: center;
border: 1.5px solid rgba(255,255,255,0.5); border-radius: 50%;
opacity: 0; transition: opacity 0.4s, transform 0.5s var(--ease-out);
pointer-events: none;
}
.gallery-item:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gallery-item-label {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.gallery-item.hidden { display: none; }
.experiences-section { background: var(--bg-secondary); }
.experiences-inner { max-width: 1400px; margin: 0 auto; }
.experiences-header { margin-bottom: 80px; }
.exp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.exp-card {
position: relative; overflow: hidden;
aspect-ratio: 3/4; cursor: pointer; border: 1px solid var(--border);
}
.exp-card-bg {
position: absolute; inset: 0; background-size: cover; background-position: center;
transition: transform 0.8s var(--ease-out);
}
.exp-card:hover .exp-card-bg { transform: scale(1.1); }
.exp-card::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top,
rgba(10,11,13,0.95) 0%, rgba(10,11,13,0.4) 40%, rgba(10,11,13,0.1) 100%);
}
.exp-card-content {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 40px; z-index: 2;
}
.exp-card-num {
font-family: var(--font-display); font-size: 3rem; font-weight: 300;
color: var(--accent); opacity: 0.45; line-height: 1; margin-bottom: 12px;
}
.exp-card h3 {
font-family: var(--font-display); font-size: 1.6rem;
font-weight: 400; margin-bottom: 12px;
}
.exp-card p { font-size: 0.92rem; color: rgba(240,236,228,0.82); line-height: 1.75; }
.exp-card-link {
display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
font-family: var(--font-detail); font-size: 0.72rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent); text-decoration: none;
opacity: 0; transform: translateY(8px);
transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.exp-card:hover .exp-card-link { opacity: 1; transform: translateY(0); }
.toys-section {
background: var(--bg-secondary);
position: relative; overflow: hidden;
}
.toys-section::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(135deg, rgba(201,169,110,0.03), transparent);
z-index: 0;
}
.toys-inner { position: relative; z-index: 1; }
.toys-inner { max-width: 1400px; margin: 0 auto; }
.toys-header {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 80px; gap: 40px;
}
.toys-list {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.toy-item {
background: var(--bg-primary); padding: 40px 24px; text-align: center;
transition: all 0.4s var(--ease-out);
}
.toy-item:hover { background: rgba(201,169,110,0.04); }
.toy-icon {
width: 48px; height: 48px; margin: 0 auto 20px;
display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.toy-item h3 {
font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; margin-bottom: 6px;
}
.toy-item p { font-size: 0.84rem; color: var(--text-secondary); }
.cabins-section { background: var(--bg-secondary); }
.cabins-inner { max-width: 1400px; margin: 0 auto; }
.cabins-header { margin-bottom: 60px; }
.cabins-showcase {
display: grid; grid-template-columns: 1fr 1fr;
gap: 64px; align-items: start;
}
.cabin-main-img {
aspect-ratio: 16/10; overflow: hidden;
border: 1px solid var(--border); position: relative;
}
.cabin-main-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.8s var(--ease-out), opacity 0.4s;
display: block;
}
.cabin-main-img:hover img { transform: scale(1.04); }
.cabin-info { padding-top: 12px; }
.cabin-info h3 {
font-family: var(--font-display); font-size: 2rem; font-weight: 300; margin-bottom: 16px;
}
.cabin-info p {
font-size: 1rem; color: var(--text-secondary); line-height: 1.85; margin-bottom: 32px;
}
.cabin-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cabin-thumb {
aspect-ratio: 4/3; overflow: hidden; cursor: pointer;
border: 1px solid var(--border); transition: border-color 0.3s; position: relative;
}
.cabin-thumb.active { border-color: var(--accent); }
.cabin-thumb:hover { border-color: var(--accent-dark); }
.cabin-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s var(--ease-out); display: block;
}
.cabin-thumb:hover img { transform: scale(1.08); }
.cabin-detail-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 16px; margin-top: 28px;
}
.cabin-detail { padding: 16px; border: 1px solid var(--border); }
.cabin-detail-label {
font-family: var(--font-detail); font-size: 0.75rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-secondary); margin-bottom: 6px;
}
.cabin-detail-value { font-family: var(--font-display); font-size: 1.2rem; color: var(--text-primary); }
.cta-section {
padding: clamp(64px, 10vw, 240px) clamp(16px, 4vw, 200px); text-align: center;
position: relative; overflow: hidden;
background: var(--bg-primary);
background-image: url('/yacht-images/lbk-cruising-balearic-islands.jpg?v=5');
background-size: cover; background-position: center;
}
.cta-section::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(to bottom, rgba(10,11,13,0) 0%, rgba(10,11,13,0.72) 18%, rgba(10,11,13,0.88) 55%, rgba(10,11,13,0.88) 100%),
radial-gradient(ellipse at center, rgba(201,169,110,0.08), transparent 70%);
}
.cta-content { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.cta-content .section-tag { justify-content: center; }
.cta-content .section-tag::before { display: none; }
.cta-title {
font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 300; line-height: 1.15; margin-bottom: 20px;
color: rgba(240,236,228,0.95);
text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.cta-title em { font-style: italic; color: var(--accent); }
.cta-desc {
font-size: 1.05rem; color: rgba(240,236,228,0.85); line-height: 1.85; margin-bottom: 48px;
text-shadow: 0 1px 16px rgba(0,0,0,0.4);
}
.cta-actions { display: flex; gap: 20px; justify-content: center; }
footer {
border-top: 1px solid var(--border);
padding: clamp(48px, 6vw, 140px) clamp(14px, 4vw, 200px) clamp(28px, 3vw, 64px); background: var(--bg-secondary);
}
.footer-inner { max-width: 1400px; margin: 0 auto; } .footer-creds{margin-top:16px;font-family:var(--font-detail);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.85;line-height:1.7;}
.footer-top {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: clamp(24px, 4vw, 60px); margin-bottom: 60px;
}
.footer-logo {
font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
letter-spacing: 0.28em; color: var(--accent);
text-decoration: none; display: block; margin-bottom: 20px;
transition: opacity 0.3s;
}
.footer-logo:hover { opacity: 0.75; }
.footer-brand p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.75; max-width: 100%; }
.footer-col h3 {
font-family: var(--font-detail); font-size: 0.68rem; font-weight: 600;
letter-spacing: 0.26em; text-transform: uppercase;
color: var(--accent); margin-bottom: 24px;
opacity: 0.7;
}
.footer-col a {
display: flex; align-items: center; font-size: 0.9rem; color: var(--text-secondary);
text-decoration: none; padding: 7px 0; min-height: 48px; transition: color 0.3s;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
border-top: 1px solid var(--border); padding-top: 32px;
display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom p { font-size: 0.8rem; color: var(--text-secondary); }
.footer-socials { display: flex; gap: 16px; }
.footer-socials a {
width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border); border-radius: 50%;
color: var(--text-muted); text-decoration: none;
font-size: 0.75rem; font-family: var(--font-detail); font-weight: 500;
transition: all 0.3s;
}
.footer-socials a:hover { border-color: var(--accent); color: var(--accent); }
.lightbox {
position: fixed; inset: 0; z-index: var(--z-lightbox);
background: rgba(10,11,13,0.97);
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden;
transition: all 0.4s var(--ease-out);
}
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-img-wrap {
position: relative; max-width: 90vw; max-height: 85vh; overflow: hidden;
}
.lightbox-img-wrap img {
max-width: 90vw; max-height: 85vh; object-fit: contain;
border: 1px solid var(--border); display: block;
transform-origin: 0 0; will-change: transform;
user-select: none; -webkit-user-drag: none;
}
.lightbox-img-wrap img.lb-zoomed { cursor: grab; }
.lightbox-img-wrap img.lb-dragging { cursor: grabbing; }
.lightbox-close {
position: fixed; top: 24px; right: 30px; z-index: 10001;
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border); background: rgba(10,11,13,0.6);
color: var(--text-primary); font-size: 1.1rem; cursor: pointer;
transition: all 0.3s; font-family: var(--font-detail);
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-nav {
position: fixed; top: 50%; transform: translateY(-50%); z-index: 10001;
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border); background: rgba(10,11,13,0.6);
color: var(--text-primary); cursor: pointer;
transition: all 0.3s; font-size: 1.2rem; font-family: var(--font-detail);
}
.lightbox-nav:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-caption {
position: fixed; bottom: 24px; left: 0; right: 0; text-align: center; z-index: 10001;
font-family: var(--font-detail); font-size: 0.75rem;
letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted);
}

.hero-vessel-name {
position: absolute;
bottom: 32px;
left: 48px;
font-family: var(--font-detail);
font-size: 0.76rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(240,236,228,0.55);
text-shadow: 0 1px 8px rgba(0,0,0,0.6);
z-index: 10;
pointer-events: none;
}
.hero-social {
display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
margin-top: 32px;
opacity: 1;
}
.hero-social-link {
text-shadow: 0 1px 8px rgba(0,0,0,0.7), 0 2px 20px rgba(0,0,0,0.4);
display: flex; align-items: center; gap: 8px;
font-family: var(--font-detail); font-size: 0.74rem;
letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(240,236,228,0.6); text-decoration: none;
transition: color 0.3s;
min-height: 48px; padding: 8px 0;
}
.hero-social-link:hover { color: var(--accent); }
.hero-social-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.hero-social-divider { width: 1px; height: 18px; background: rgba(240,236,228,0.2); }

.lang-switch {
display: flex; align-items: center; gap: 6px; margin-left: 8px;
}
.lang-switch a {
display: flex; align-items: center; gap: 4px;
font-family: var(--font-detail); font-size: 0.68rem;
letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(240,236,228,0.5); text-decoration: none;
padding: 4px 6px; border-radius: 4px;
transition: color 0.3s, background 0.3s;
}
.lang-switch a:hover { color: var(--accent); background: rgba(201,169,110,0.08); }
.lang-switch a.active { color: rgba(240,236,228,0.85); }
.lang-switch .lang-sep { width: 1px; height: 12px; background: rgba(240,236,228,0.15); }
@media (max-width: 768px) {
.lang-switch { display: none; }
}
.mobile-lang-switch {
display: flex; gap: 16px; justify-content: center;
margin-top: 24px; padding-top: 20px;
border-top: 1px solid rgba(240,236,228,0.08);
}
.mobile-lang-switch a {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-detail); font-size: 0.82rem;
letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(240,236,228,0.5); text-decoration: none;
padding: 8px 14px; border-radius: 6px;
transition: color 0.3s, background 0.3s;
}
.mobile-lang-switch a:hover { color: var(--accent); }
.mobile-lang-switch a.active { color: rgba(240,236,228,0.85); background: rgba(240,236,228,0.06); }
.destinations-section { background: var(--bg-secondary); }
.destinations-inner { max-width: 1400px; margin: 0 auto; }
.destinations-header { margin-bottom: 60px; }
.dest-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.dest-card {
position: relative; overflow: hidden; cursor: pointer;
border: 1px solid var(--border); border-radius: 6px;
aspect-ratio: 16/10;
transition: border-color 0.4s;
}
.dest-card:hover { border-color: var(--accent); }
.dest-bg {
position: absolute; inset: 0; background-size: cover; background-position: center;
transition: transform 0.9s var(--ease-out);
}
.dest-card:hover .dest-bg { transform: scale(1.08); }
.dest-card::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top, rgba(10,11,13,0.94) 0%, rgba(10,11,13,0.45) 50%, rgba(10,11,13,0.12) 100%);
opacity: 1; transition: opacity 0.5s var(--ease-out);
}
.dest-card:hover::before { opacity: 0.88; }
.dest-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 24px; z-index: 2; }
.dest-region {
display: block; font-family: var(--font-detail);
font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase;
color: var(--accent); margin-bottom: 6px;
}
.dest-content h3 {
font-family: var(--font-display); font-size: 1.6rem; font-weight: 400;
color: rgba(240,236,228,0.95); margin-bottom: 8px; line-height: 1.15;
}
.dest-content p {
font-size: 0.88rem; color: rgba(240,236,228,0.72); line-height: 1.65;
transform: translateY(8px); opacity: 0;
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
transition-delay: 0.05s;
}
.dest-card:hover .dest-content p { transform: translateY(0); opacity: 1; }
.reviews-section { background: var(--bg-primary); }
.reviews-inner { max-width: 1400px; margin: 0 auto; }
.reviews-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px; margin-top: 64px;
}
.review-card {
padding: 40px 36px; border: 1px solid var(--border);
background: var(--bg-card); position: relative;
transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), opacity 0.5s ease, scale 0.5s ease;
opacity: 0.35; scale: 0.97;
}
.review-card.active-card {
opacity: 1; scale: 1;
}
.review-card::before {
content: '\201C'; position: absolute; top: 16px; right: clamp(12px, 2vw, 28px);
font-family: var(--font-display); font-size: clamp(3rem, 4vw, 4.5rem); font-weight: 300;
color: var(--accent); opacity: 0.15; line-height: 1;
pointer-events: none;
}
.review-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 20px 56px rgba(0,0,0,0.1); }
.review-stars { color: var(--accent); font-size: 0.9rem; letter-spacing: 3px; margin-bottom: 20px; }
.review-quote {
font-family: var(--font-display); font-size: 1.12rem; font-weight: 300;
font-style: italic; line-height: 1.85;
color: var(--text-primary); margin-bottom: 28px;
letter-spacing: 0.01em;
}
.review-author {
font-family: var(--font-detail); font-size: 0.76rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text-primary); font-weight: 500;
}
.review-origin { font-family: var(--font-detail); font-size: 0.74rem; color: var(--text-muted); margin-top: 4px; }
.reviews-meta {
display: flex; align-items: center; gap: 40px;
margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.reviews-score { display: flex; align-items: baseline; gap: 12px; }
.reviews-score-num {
font-family: var(--font-display); font-size: 3.5rem; font-weight: 300; color: var(--accent); line-height: 1;
}
.reviews-score-stars { color: var(--accent); font-size: 1rem; letter-spacing: 2px; }
.reviews-score-label { font-family: var(--font-detail); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.faq-section { background: var(--bg-secondary); position: relative; }
.faq-section::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0;
height: 160px; pointer-events: none; z-index: 0;
background: linear-gradient(to bottom, transparent, rgba(10,11,13,0.22));
}
background: linear-gradient(to bottom, transparent 0%, rgba(10,11,13,0.45) 100%);
}
.faq-inner { max-width: 860px; margin: 0 auto; }
.faq-list { margin-top: 60px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item summary {
list-style: none; padding: 26px 0; cursor: pointer;
display: flex; justify-content: space-between; align-items: center; gap: 24px;
font-family: var(--font-display); font-size: 1.18rem; font-weight: 400;
color: var(--text-primary); transition: color 0.35s var(--ease-out); user-select: none;
letter-spacing: 0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::after {
content: '+'; font-family: var(--font-detail); font-size: 1.5rem; font-weight: 300;
color: var(--accent); flex-shrink: 0; line-height: 1;
opacity: 0.65; transition: transform 0.35s var(--ease-out), opacity 0.3s;
}
.faq-item summary:hover::after,
.faq-item[open] summary::after { opacity: 1; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer {
padding: 4px 0 28px 0; font-size: 1rem;
color: var(--text-primary); line-height: 1.9; max-width: 720px;
opacity: 0.88;
}
.faq-item[open] summary {
color: var(--accent);
background: rgba(201,169,110,0.04);
margin: 0 -24px; padding-left: 24px; padding-right: 24px;
}
background: rgba(160,108,0,0.06);
}
.float-cta {
position: fixed; bottom: 28px; right: 28px; z-index: var(--z-float);
transform: translateY(80px); opacity: 0;
transition: all 0.5s var(--ease-out); pointer-events: none;
}
.float-cta.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.float-cta-btn {
display: flex; align-items: center; gap: 10px;
padding: 14px 22px;
background: var(--accent); color: var(--bg-primary);
font-family: var(--font-detail); font-size: 0.74rem;
font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
text-decoration: none;
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
transition: all 0.35s var(--ease-out);
}
.float-cta-btn:hover { background: var(--accent-light); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.float-cta-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.review-card .review-author {
display: flex; align-items: center; gap: 14px; margin-top: 24px;
}
.review-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: var(--accent); color: var(--bg-primary);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-detail); font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.06em; flex-shrink: 0;
}
.review-name {
font-family: var(--font-detail); font-size: 0.78rem;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-primary); font-weight: 500;
}
.review-detail {
font-family: var(--font-detail); font-size: 0.74rem;
color: var(--text-muted); margin-top: 3px; letter-spacing: 0.05em;
}
.reviews-stars { display: flex; gap: 4px; color: var(--accent); }
.reviews-stars svg { width: 18px; height: 18px; }
.reviews-score {
font-family: var(--font-display); font-size: 1.1rem; font-weight: 400;
color: var(--text-primary);
}
.reviews-count {
font-family: var(--font-detail); font-size: 0.76rem;
color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase;
}
.spec-value { transition: color 0.3s; }
.footer-socials a svg { width: 18px; height: 18px; }
.footer-socials a { width: 48px; height: 48px; }
background: linear-gradient(to top, rgba(16,14,10,0.92) 0%, rgba(16,14,10,0.35) 55%, rgba(16,14,10,0.1) 100%);
}
.nav-end {
display: flex; align-items: center; gap: 10px;
}

._unused-transition-x,
._unused-transition-x * {
transition:
background-color 0.38s ease,
color 0.38s ease,
border-color 0.38s ease,
box-shadow 0.38s ease !important;
}
--bg-primary: #f4f1ea;
--bg-secondary: #eae7de;
--bg-card: #e2ddd2;
--bg-elevated: #d8d2c5;
--text-primary: #16161c;
--text-secondary: #48484e;
--text-muted: #5c5c66;
--accent: #7a5200;
--accent-light: #d49a18;
--accent-dark: #5a3c00;
--border: rgba(130, 95, 0, 0.22);
--border-light: rgba(16, 16, 24, 0.09);
--gradient-gold: linear-gradient(135deg, #b07c00 0%, #d49a18 50%, #b07c00 100%);
--shadow-glow: 0 0 60px rgba(160, 108, 0, 0.12);
}
background: rgba(244, 241, 234, 0.96);
border-bottom-color: var(--border);
}
background:
linear-gradient(to right, rgba(10,11,13,0.65) 0%, rgba(10,11,13,0.35) 28%, transparent 52%),
linear-gradient(to top, rgba(10,11,13,0.95) 0%, rgba(10,11,13,0.25) 8%, transparent 18%),
linear-gradient(to bottom, rgba(10,11,13,0.5) 0%, transparent 10%);
}
background: linear-gradient(135deg, rgba(160,108,0,0.04), transparent);
}
background: linear-gradient(to top, rgba(16,14,10,0.6) 0%, rgba(16,14,10,0.1) 55%, transparent 100%);
}
background: var(--bg-secondary);
border-top-color: var(--border);
}
border-color: rgba(255,255,255,0.18);
background: rgba(10,11,13,0.7);
color: rgba(255,255,255,0.8);
}
img { max-width: 100%; height: auto; }
video { max-width: 100%; }
p, h1, h2, h3, h4, li, td, th, blockquote, .faq-answer, .section-desc, .review-quote {
overflow-wrap: break-word; word-break: break-word;
}
@media (min-width: 1440px) {
nav { padding: 24px 64px; }
nav.scrolled { padding: 16px 64px; }
section { padding: 120px 64px; }
}
@media (min-width: 1920px) {
nav { padding: 28px 80px; }
nav.scrolled { padding: 18px 80px; }
section { padding: 140px 80px; }
.hero { padding: 0 80px 110px; }
.hero-stats { right: 80px; bottom: 110px; }
.hero-subtitle { max-width: 520px; }
.contact-section { padding: 140px 80px; }
.cta-section { padding: 180px 80px; }
footer { padding: 100px 80px 48px; }
}
@media (min-width: 2560px) {
nav { padding: 32px 120px; }
nav.scrolled { padding: 20px 120px; }
section { padding: 160px 120px; }
.hero { padding: 0 120px 130px; }
.hero-stats { right: 120px; bottom: 130px; gap: 44px; }
.hero-stat-value { font-size: 3.4rem; }
.hero-stat-label { font-size: 0.76rem; }
.hero-content { max-width: 900px; }
.hero-subtitle { max-width: 580px; font-size: 1.15rem; }
.hero-tag { font-size: 0.82rem; }
.hero-name .logo-svg { height: 60px; }
.hero-name-prefix { font-size: 0.85rem; }
.about, .specs-inner, .gallery-inner, .experiences-inner,
.toys-inner, .cabins-inner, .destinations-inner, .reviews-inner,
.faq-inner, .contact-inner, .footer-inner { max-width: 1800px; }
.cta-content { max-width: 860px; }
.section-title { font-size: clamp(3rem, 3vw, 4.5rem); }
.section-desc { font-size: 1.15rem; max-width: 640px; }
.section-tag { font-size: 0.82rem; }
.gallery-grid { grid-auto-rows: 340px; }
.spec-value { font-size: 3.4rem; }
.spec-label { font-size: 0.78rem; }
.exp-card h3 { font-size: 1.8rem; }
.exp-card p { font-size: 1rem; }
.exp-card-num { font-size: 3.5rem; }
.cabin-info h3 { font-size: 2.4rem; }
.cabin-info p { font-size: 1.1rem; }
.dest-content h3 { font-size: 1.9rem; }
.dest-content p { font-size: 0.95rem; }
.review-quote { font-size: 1.25rem; }
.faq-item summary { font-size: 1.35rem; }
.faq-answer { font-size: 1.1rem; }
.cta-title { font-size: clamp(3rem, 4vw, 5rem); }
.cta-desc { font-size: 1.15rem; }
.contact-info-text h3 { font-size: 3.6rem; }
.contact-info-text p { font-size: 1.08rem; }
.contact-card-value { font-size: 1.25rem; }
.toy-item h3 { font-size: 1.3rem; }
.toy-item p { font-size: 0.92rem; }
.footer-brand p { font-size: 0.98rem; max-width: 380px; }
.footer-col a { font-size: 0.98rem; }
.footer-bottom p { font-size: 0.88rem; }
footer { padding: 120px 120px 56px; }
.contact-section { padding: 160px 120px; }
.cta-section { padding: 200px 120px; }
}
@media (min-width: 3840px) {
nav { padding: 40px 200px; }
nav.scrolled { padding: 24px 200px; }
section { padding: 200px 200px; }
.hero { padding: 0 200px 160px; }
.hero-stats { right: 200px; bottom: 160px; gap: 52px; }
.hero-stat-value { font-size: 4rem; }
.hero-stat-label { font-size: 0.85rem; letter-spacing: 0.28em; }
.hero-content { max-width: 1100px; }
.hero-subtitle { max-width: 680px; font-size: 1.3rem; line-height: 2; }
.hero-tag { font-size: 0.92rem; letter-spacing: 0.5em; }
.hero-name .logo-svg { height: 76px; }
.hero-name-prefix { font-size: 0.95rem; }
.hero-rule { width: 64px; margin: 36px 0; }
.hero-detail { font-size: 0.86rem; gap: 16px; margin-top: 28px; }
.about, .specs-inner, .gallery-inner, .experiences-inner,
.toys-inner, .cabins-inner, .destinations-inner, .reviews-inner,
.faq-inner, .contact-inner, .footer-inner { max-width: 2400px; }
.cta-content { max-width: 1000px; }
.section-title { font-size: clamp(3.5rem, 2.5vw, 5.5rem); }
.section-desc { font-size: 1.3rem; max-width: 780px; }
.section-tag { font-size: 0.92rem; }
.gallery-grid { grid-auto-rows: 440px; }
.about { gap: 120px; }
.about-images { min-height: 700px; }
.spec-value { font-size: 4rem; }
.exp-card h3 { font-size: 2.2rem; }
.exp-card-content { padding: 56px; }
.review-quote { font-size: 1.4rem; }
.review-card { padding: 52px 44px; }
.faq-item summary { font-size: 1.5rem; padding: 32px 0; }
.faq-answer { font-size: 1.2rem; max-width: 900px; }
.cta-title { font-size: clamp(4rem, 3vw, 6rem); }
.cta-desc { font-size: 1.3rem; }
.contact-grid { gap: 120px; }
.contact-card { padding: 40px 32px; }
.contact-card-icon { width: 48px; height: 48px; }
.contact-card-value { font-size: 1.4rem; }
.btn-primary, .btn-outline { padding: 22px 52px; font-size: 0.85rem; }
footer { padding: 140px 200px 64px; }
.footer-top { gap: 80px; }
.contact-section { padding: 200px 200px; }
.cta-section { padding: 240px 200px; }
}
@media (max-width: 1200px) {
.gallery-grid { grid-auto-rows: 220px; }
.dest-grid { grid-template-columns: repeat(2, 1fr); }
.footer-top { grid-template-columns: 1.7fr 1fr 1fr 1.3fr 1.3fr; gap: 40px; }
.hero-stats { right: 40px; }
}
@media (max-width: 1024px) {
section { padding: 80px 32px; }
nav { padding: 20px 32px; }
nav.scrolled { padding: 14px 32px; }
.hero { padding: 0 32px 80px; }
.hero-content { max-width: 600px; }
.hero-stats { right: 32px; bottom: 72px; gap: 24px; }
.hero-stat-value { font-size: 2rem; }
.hero-subtitle { font-size: 1rem; max-width: 420px; }
.hero-name .logo-svg { height: clamp(28px, 3.5vw, 44px); }
.about { grid-template-columns: 1fr; gap: 48px; }
.about-text { padding-right: 0; background: var(--bg-primary); position: relative; z-index: 1; }
.about-images { min-height: 400px; max-height: 500px; }
.specs-grid { grid-template-columns: repeat(2, 1fr); }
.specs-header { flex-direction: column; align-items: flex-start; gap: 16px; }
.gallery-grid { grid-auto-rows: 200px; }
.exp-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.exp-card { aspect-ratio: 4/3; }
.exp-card-content { padding: 28px; }
.exp-card-num { font-size: 2.4rem; margin-bottom: 8px; }
.exp-card h3 { font-size: 1.35rem; }
.toys-header { flex-direction: column; align-items: flex-start; gap: 16px; }
.toys-list { grid-template-columns: repeat(3, 1fr); }
.cabins-showcase { grid-template-columns: 1fr; gap: 40px; }
.cabin-info { padding-top: 0; }
.dest-grid { grid-template-columns: repeat(2, 1fr); }
.reviews-grid { grid-template-columns: repeat(2, 1fr); }
.footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
.footer-brand p { max-width: 100%; }
.contact-section { padding: 80px 32px; }
.contact-grid { gap: 48px; }
.cta-section { padding: 120px 32px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.nav-links { gap: 16px; }
.nav-links a { font-size: 0.7rem; letter-spacing: 0.1em; }
.nav-cta { padding: 8px 18px !important; font-size: 0.7rem !important; }
.nav-brochure { padding: 7px 14px !important; font-size: 0.65rem !important; letter-spacing: 0.1em !important; }
.nav-brochure span { display: none; }
.hero-content { max-width: 520px; }
.hero-subtitle { font-size: 0.95rem; max-width: 380px; }
.about { gap: 48px; }
.gallery-grid { grid-auto-rows: 200px; }
.exp-card-content { padding: 24px; }
.exp-card h3 { font-size: 1.25rem; }
.review-card { padding: 32px 28px; }
.contact-grid { gap: 40px; }
}
@media (min-width: 769px) and (max-width: 1199px) {
.hero-bg-overlay {
background:
  linear-gradient(to bottom, rgba(10,11,13,0.6) 0%, rgba(10,11,13,0.3) 20%, transparent 40%),
  linear-gradient(to top, rgba(10,11,13,0.9) 0%, rgba(10,11,13,0.2) 8%, transparent 18%);
}
background:
  linear-gradient(to bottom, rgba(10,11,13,0.6) 0%, rgba(10,11,13,0.3) 20%, transparent 40%),
  linear-gradient(to top, rgba(10,11,13,0.9) 0%, rgba(10,11,13,0.2) 8%, transparent 18%);
}
.hero-bg-img video { object-position: center 40%; }
.hero {
padding: 0 48px 80px;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
.hero-content { max-width: 480px; }
.hero-name-prefix { font-size: 0.85rem; letter-spacing: 0.45em; color: var(--accent); margin-bottom: 4px; }
.hero-name { font-size: clamp(3.5rem, 6vw, 5rem); }
.hero-name .logo-svg { height: clamp(38px, 5vw, 56px); }
.hero-tag { display: none; }
.hero-subtitle { display: none; }
.hero-rule { display: none; }
.hero-social { display: none; }
.hero-vessel-name { left: 48px; bottom: 20px; font-size: 0.65rem; }
.hero-stats { display: none; }
.hero-detail {
  margin-top: 14px; font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.22em; color: rgba(240,236,228,0.6);
}
.hero-detail-sep { background: rgba(201,169,110,0.4); }
.hero-actions { width: auto; gap: 16px; margin-top: 24px; flex-direction: row; }
.hero-actions .btn-outline { display: none; }
.btn-primary {
  width: auto; justify-content: center;
  padding: 16px 40px; font-size: 0.72rem; letter-spacing: 0.2em;
  box-shadow: 0 4px 24px rgba(201,169,110,0.3);
}
.hero-scroll { display: none; }
}
@media (max-width: 1024px) {
section { padding: 64px 20px; }
nav { padding: 16px 20px; background: transparent; }
nav.scrolled { padding: 12px 20px; background: rgba(10, 11, 13, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.nav-links { display: none !important; }
.menu-toggle { display: flex; }
.hero-bg-overlay {
background:
  linear-gradient(to bottom, rgba(10,11,13,0.55) 0%, rgba(10,11,13,0.25) 22%, transparent 45%),
  linear-gradient(to top, rgba(10,11,13,0.9) 0%, rgba(10,11,13,0.2) 8%, transparent 20%);
}
background:
  linear-gradient(to bottom, rgba(10,11,13,0.55) 0%, rgba(10,11,13,0.25) 22%, transparent 45%),
  linear-gradient(to top, rgba(10,11,13,0.9) 0%, rgba(10,11,13,0.2) 8%, transparent 20%);
}
.hero-bg-img video { object-position: center 40%; }
.hero {
padding: 0 24px 72px;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100);
}
.hero-content { width: 100%; max-width: 100%; }
.hero-name-prefix { font-size: 0.78rem; letter-spacing: 0.4em; color: var(--accent); margin-bottom: 2px; }
.hero-name { font-size: clamp(3.2rem, 11vw, 4.5rem); }
.hero-name .logo-svg { height: clamp(34px, 8vw, 48px); }
.hero-tag { display: none; }
.hero-subtitle { display: none; }
.hero-rule { display: none; }
.hero-social { display: none; }
.hero-vessel-name { display: none; }
.hero-stats { display: none; }
.hero-detail {
  margin-top: 10px; font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.22em; color: rgba(240,236,228,0.6);
}
.hero-detail-sep { background: rgba(201,169,110,0.4); }
.hero-actions { width: auto; gap: 12px; margin-top: 20px; flex-direction: row; }
.hero-actions .btn-outline { display: none; }
.btn-primary {
  width: auto; justify-content: center;
  padding: 14px 32px; font-size: 0.7rem; letter-spacing: 0.2em;
  box-shadow: 0 4px 20px rgba(201,169,110,0.3);
}
.hero-stat-divider { display: none; }
.hero-scroll { display: none; }
.about-section { padding-top: 100px; padding-bottom: 100px; }
.about-features { grid-template-columns: 1fr 1fr; }
.about-images { min-height: 300px; max-height: 400px; }
.specs-grid { grid-template-columns: 1fr 1fr; }
.spec-card { padding: 28px 16px; }
.spec-value { font-size: 2.4rem; }
.gallery-header { flex-direction: column; align-items: flex-start; gap: 16px; }
.gallery-tabs { overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; flex-wrap: nowrap; gap: 20px; }
.gallery-tabs::-webkit-scrollbar { display: none; }
.gallery-grid { grid-auto-rows: 180px; }
.exp-cards { grid-template-columns: 1fr; }
.exp-card { aspect-ratio: 16/9; }
.exp-card-content { padding: 24px; }
.toys-list { grid-template-columns: repeat(2, 1fr); }
.toy-item { padding: 32px 20px; }
.toy-icon { width: 40px; height: 40px; margin-bottom: 14px; }
.cabin-thumbs { grid-template-columns: repeat(3, 1fr); }
.cabin-detail-grid { grid-template-columns: 1fr 1fr; }
.cabin-info h3 { font-size: 1.6rem; }
.dest-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dest-content { padding: 20px; }
.dest-content h3 { font-size: 1.3rem; }
.reviews-grid { grid-template-columns: 1fr; }
.review-card { padding: 28px 24px; }
.review-quote { font-size: 1rem; }
.reviews-meta { gap: 24px; }
.faq-item summary { font-size: 1rem; padding: 18px 0; }
.faq-item[open] summary { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
footer { padding: 60px 20px 32px; }
.cta-section { padding: 80px 20px; }
.cta-title { font-size: clamp(2rem, 6vw, 3rem); }
.cta-actions { flex-direction: column; align-items: center; gap: 12px; }
.cta-actions .btn-primary, .cta-actions .btn-outline { width: 100%; max-width: 320px; justify-content: center; }
.lightbox-img-wrap { max-width: 100vw; }
.lightbox-img-wrap img { max-width: 100vw; max-height: 80vh; }
.lightbox-close { top: 12px; right: 12px; background: rgba(10,11,13,0.85); }
.lightbox-caption { font-size: 0.75rem; bottom: 16px; }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
.float-cta { bottom: 16px; right: 16px; }
.contact-section { padding: 64px 20px; }
.contact-grid { gap: 40px; }
.contact-social-row { gap: 8px; }
.contact-social-btn { padding: 8px 14px; font-size: 0.68rem; }
.mobile-nav { padding: 80px 24px; gap: 24px; }
.mobile-nav a { font-size: 1.6rem; }
}
@media (max-width: 600px) {
.hero-name-prefix { font-size: 0.65rem; letter-spacing: 0.3em; }
.gallery-grid { grid-auto-rows: 160px; }
.exp-card { aspect-ratio: 3/2; }
.dest-grid { grid-template-columns: 1fr; gap: 12px; }
.dest-card { aspect-ratio: 16/9; }
.reviews-meta { flex-direction: column; align-items: flex-start; gap: 16px; }
.about-features { grid-template-columns: 1fr; }
.cabin-detail-grid { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr; gap: 28px; }
}

@media (min-width: 1024px) and (max-width: 1366px) and (min-height: 700px) {
.about { grid-template-columns: 1fr 1fr; gap: 60px; }
.about-images { min-height: auto; max-height: none; }
.gallery-grid { grid-auto-rows: 240px; }
.cabins-showcase { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (hover: none) and (pointer: coarse) {
.gallery-item::before { opacity: 0.6; transform: translate(-50%, -50%) scale(0.85); }
.gallery-item::after { opacity: 0.4; }
.exp-card-link { opacity: 0.85; transform: translateY(0); }
.dest-content p { opacity: 0.85; transform: translateY(0); }
.gallery-tab { padding: 10px 4px; min-height: 48px; display: flex; align-items: center; }
.faq-item summary { min-height: 56px; }
.cabin-thumb { min-height: 44px; }
.nav-links a { padding: 12px 4px; min-height: 48px; }
.footer-col a { padding: 10px 0; min-height: 48px; display: flex; align-items: center; }
.reviews-dot, .reviews-carousel-dots button { min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.contact-social-btn { min-height: 44px; }
.float-cta, .float-wa { right: 20px; }
body, a, button, [role="button"] { cursor: auto !important; }
.cursor { display: none !important; }
.lightbox-prev, .lightbox-next {
display: flex; width: 52px; height: 52px; font-size: 1.4rem;
background: rgba(10,11,13,0.75);
}
}
@media (max-width: 480px) {
section { padding: 56px 16px; }
.section-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
.section-desc { font-size: 0.92rem; }
.hero { padding-top: calc(env(safe-area-inset-top, 0px) + 72px); min-height: 100svh; }
.hero-name-prefix { font-size: 0.7rem; letter-spacing: 0.32em; }
.hero-name { font-size: clamp(2.8rem, 10vw, 3.6rem); }
.hero-name .logo-svg { height: clamp(28px, 8vw, 38px); }
.hero-detail { font-size: 0.6rem; letter-spacing: 0.16em; margin-top: 8px; }
.hero-actions { margin-top: 18px; }
.btn-primary { padding: 13px 28px; font-size: 0.68rem; }
.about-section { padding-top: 80px; padding-bottom: 80px; }
.about-features { grid-template-columns: 1fr; }
.about-feature { padding: 20px; }
.about-images { min-height: 240px; max-height: 320px; }
.specs-grid { grid-template-columns: 1fr 1fr; }
.spec-card { padding: 24px 12px; }
.spec-value { font-size: 2.2rem; }
.gallery-grid { grid-auto-rows: 140px; }
.gallery-tab { font-size: 0.7rem; }
.exp-card { aspect-ratio: 3/2; }
.exp-card-content { padding: 20px; }
.exp-card-num { font-size: 2rem; }
.exp-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.exp-card p { font-size: 0.85rem; }
.toys-list { grid-template-columns: 1fr 1fr; }
.toy-item { padding: 28px 16px; }
.toy-item h3 { font-size: 1rem; }
.cabin-thumbs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cabin-detail-grid { grid-template-columns: 1fr; }
.cabin-info h3 { font-size: 1.4rem; }
.cabin-info p { font-size: 0.92rem; }
.dest-grid { grid-template-columns: 1fr; gap: 12px; }
.dest-card { aspect-ratio: 16/9; }
.dest-content h3 { font-size: 1.4rem; }
.review-card { padding: 24px 20px; }
.review-quote { font-size: 0.98rem; line-height: 1.7; }
.reviews-meta { flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-top { grid-template-columns: 1fr; gap: 28px; }
.footer-logo { font-size: 1.3rem; }
footer { padding: 48px 16px 28px; }
.float-cta { bottom: 12px; right: 12px; }
.float-cta-btn { padding: 12px 16px; font-size: 0.62rem; }
.lightbox-prev, .lightbox-next { display: none; }
.lightbox-close { top: 8px; right: 8px; width: 40px; height: 40px; }
.contact-section { padding: 56px 16px; }
.contact-cards { grid-template-columns: 1fr; }
.contact-info-text h3 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
.contact-social-btn { width: 100%; justify-content: center; }
.cta-section { padding: 64px 16px; }
.cta-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.cta-desc { font-size: 0.95rem; margin-bottom: 36px; }
.mobile-nav { padding: 72px 20px; gap: 20px; }
.mobile-nav a { font-size: 1.4rem; }
.mobile-nav .mobile-cta { font-size: 0.75rem; padding: 12px 28px; }
}
@media (max-width: 360px) {
section { padding: 48px 14px; }
nav { padding: 14px 16px; }
nav.scrolled { padding: 10px 16px; }
.hero { padding: 0 14px 0; padding-top: calc(env(safe-area-inset-top, 0px) + 64px); }
.hero-name-prefix { font-size: 0.6rem; letter-spacing: 0.25em; }
.hero-name { font-size: clamp(2.4rem, 10vw, 3rem); }
.hero-name .logo-svg { height: clamp(24px, 8vw, 30px); }
.hero-detail { font-size: 0.55rem; letter-spacing: 0.12em; margin-top: 6px; }
.btn-primary { padding: 12px 24px; font-size: 0.65rem; }
.section-title { font-size: clamp(1.7rem, 9vw, 2.1rem); }
.section-desc { font-size: 0.88rem; }
.specs-grid { grid-template-columns: 1fr; }
.spec-card { padding: 20px 16px; }
.spec-value { font-size: 2rem; }
.gallery-grid { grid-auto-rows: 200px; }
.toys-list { grid-template-columns: 1fr; }
.cabin-thumbs { grid-template-columns: 1fr 1fr; gap: 6px; }
.cabin-detail-grid { gap: 10px; }
.footer-top { grid-template-columns: 1fr; }
.review-card { padding: 20px 16px; }
.review-quote { font-size: 0.92rem; }
.btn-primary, .btn-outline { padding: 16px 24px; font-size: 0.75rem; }
.about-feature { padding: 16px; }
.about-feature h3 { font-size: 1.05rem; }
.about-feature p { font-size: 0.82rem; }
.faq-item summary { font-size: 0.92rem; }
.faq-answer { font-size: 0.9rem; }
.contact-info-text h3 { font-size: clamp(1.6rem, 8vw, 2rem); }
.contact-card { padding: 22px 18px; }
.contact-card-value { font-size: 0.95rem; }
.cta-title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
.cta-desc { font-size: 0.88rem; }
.mobile-nav a { font-size: 1.2rem; }
.mobile-nav { gap: 16px; }
}
@media (max-height: 500px) and (orientation: landscape) {
nav { padding: 10px 20px; }
nav.scrolled { padding: 8px 20px; }
.nav-links { display: none !important; }
.menu-toggle { display: flex; }
.nav-logo { opacity: 1; pointer-events: auto; }
.mobile-nav { padding: 40px 32px; gap: 16px; }
.mobile-nav a { font-size: 1.2rem; }
.hero {
min-height: unset; padding: 60px 32px 40px;
flex-direction: row; align-items: center;
}
.hero-content { max-width: 55%; }
.hero-name { font-size: clamp(2rem, 4vw, 3rem); }
.hero-name .logo-svg { height: clamp(20px, 3vw, 30px); }
.hero-subtitle { font-size: 0.88rem; margin-bottom: 24px; }
.hero-stats {
position: static; flex-direction: column;
margin-top: 0; margin-left: auto;
gap: 12px; align-self: center;
}
.hero-stat-value { font-size: 1.4rem; }
.hero-scroll { display: none; }
.hero-social { margin-top: 12px; }
.hero-social-link { font-size: 0.65rem; }
section { padding: 48px 24px; }
.about-section { padding-top: 60px; padding-bottom: 60px; }
.about-images { min-height: 200px; max-height: 280px; }
.gallery-grid { grid-auto-rows: 140px; }
.exp-card { aspect-ratio: 16/9; }
}
@media (max-width: 480px) and (min-height: 800px) {
.hero { min-height: 100svh; }
.hero-subtitle { max-width: 100%; }
.hero-rule { margin: 32px 0; }
}
@media (max-width: 480px) and (max-height: 700px) {
.hero { min-height: 100svh; }
.hero-name { font-size: clamp(2.2rem, 9vw, 2.8rem); }
.hero-detail { margin-top: 6px; }
.hero-actions { margin-top: 14px; }
}
@supports (padding: max(0px)) {
nav { padding-left: max(48px, env(safe-area-inset-left, 0px) + 20px); padding-right: max(48px, env(safe-area-inset-right, 0px) + 20px); }
.float-cta { bottom: max(28px, env(safe-area-inset-bottom, 0px) + 12px); right: max(28px, env(safe-area-inset-right, 0px) + 12px); }
.float-wa { bottom: max(88px, env(safe-area-inset-bottom, 0px) + 60px); right: max(20px, env(safe-area-inset-right, 0px) + 12px); }
footer { padding-bottom: max(40px, env(safe-area-inset-bottom, 0px) + 16px); }
.lightbox-close { top: max(24px, env(safe-area-inset-top, 0px) + 8px); right: max(30px, env(safe-area-inset-right, 0px) + 12px); }
.lightbox-prev { left: max(24px, env(safe-area-inset-left, 0px) + 8px); }
.lightbox-next { right: max(24px, env(safe-area-inset-right, 0px) + 8px); }
.lightbox-caption { bottom: max(24px, env(safe-area-inset-bottom, 0px) + 8px); }
}
@media (max-width: 768px) {
@supports (padding: max(0px)) {
.hero { padding-bottom: 0; }
nav { padding-left: max(20px, env(safe-area-inset-left, 0px) + 12px); padding-right: max(20px, env(safe-area-inset-right, 0px) + 12px); }
.float-cta { bottom: max(16px, env(safe-area-inset-bottom, 0px) + 8px); }
.float-wa { bottom: max(72px, env(safe-area-inset-bottom, 0px) + 48px); }
.lightbox-close { top: max(12px, env(safe-area-inset-top, 0px) + 4px); }
}
}
.lightbox-swipe-hint {
position: absolute; bottom: 20px; left: 50%;
transform: translateX(-50%);
font-family: var(--font-detail); font-size: 0.75rem;
letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(255,255,255,0.35);
pointer-events: none;
animation: fadeInOut 3s ease forwards;
}
@keyframes fadeInOut { 0%{opacity:0} 20%{opacity:1} 70%{opacity:1} 100%{opacity:0} }
@media (pointer: fine) {
body, a, button, [role="button"], .gallery-tab, .gallery-item, .faq-item summary, .side-dot, .contact-card { cursor: none !important; }
.cursor { position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none; will-change: transform; }
.cursor-dot {
position: absolute; width: 6px; height: 6px;
background: var(--accent); border-radius: 50%;
transform: translate(-50%,-50%);
transition: width 0.2s, height 0.2s, opacity 0.2s;
}
.cursor-ring {
position: absolute; width: 36px; height: 36px;
border: 1.5px solid rgba(201,169,110,0.5); border-radius: 50%;
transform: translate(-50%,-50%);
transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), border-color 0.3s, opacity 0.3s;
}
.cursor-ring.is-hovering { width: 54px; height: 54px; border-color: var(--accent); }
.cursor-ring.is-clicking { width: 28px; height: 28px; opacity: 0.7; }
}
.side-dots { display: none !important; }
section { overflow-x: clip; }
.reveal-left {
opacity: 0; transform: translateX(-44px);
transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
opacity: 0; transform: translateX(44px);
transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale {
opacity: 0; transform: scale(0.93);
transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.reveal-blur {
opacity: 0; filter: blur(8px); transform: translateY(16px);
transition: opacity 0.9s var(--ease-out), filter 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-blur.visible { opacity: 1; filter: blur(0); transform: translateY(0); }
.float-cta-btn { position: relative; }
.float-cta-btn::before {
content: ''; position: absolute; inset: -4px;
border: 1.5px solid rgba(201,169,110,0.55); border-radius: 4px;
opacity: 0; pointer-events: none;
animation: ctaPulseRing 2.8s ease-in-out infinite 1.2s;
}
.float-cta-btn::after {
content: ''; position: absolute; inset: -10px;
border: 1px solid rgba(201,169,110,0.22); border-radius: 6px;
opacity: 0; pointer-events: none;
animation: ctaPulseRing 2.8s ease-in-out infinite 1.7s;
}
@keyframes ctaPulseRing {
0% { transform: scale(1); opacity: 0.75; }
100% { transform: scale(1.18); opacity: 0; }
}
.float-wa {
position: fixed; bottom: 88px; right: 20px;
z-index: var(--z-float);
display: flex; align-items: center; gap: 9px;
padding: 0 18px 0 14px; height: 50px;
background: #25D366; color: #fff; border-radius: 50px;
text-decoration: none;
font-family: var(--font-detail); font-size: 0.72rem;
font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
box-shadow: 0 4px 20px rgba(37,211,102,0.3), 0 2px 8px rgba(0,0,0,0.15);
opacity: 0; visibility: hidden; transform: translateY(12px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), visibility 0.5s, box-shadow 0.3s;
white-space: nowrap;
}
.float-wa.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.float-wa:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(37,211,102,0.45), 0 4px 12px rgba(0,0,0,0.2); }
.float-wa svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 480px) {
.float-wa .wa-label { display: none; }
.float-wa { width: 50px; padding: 0; justify-content: center; border-radius: 50%; }
}
@keyframes btnShimmer { 0%{left:-100%} 100%{left:200%} }
.btn-primary:hover::after {
content: ''; position: absolute; top: 0; left: -100%;
width: 55%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
animation: btnShimmer 0.65s ease;
pointer-events: none; z-index: 2;
}
.contact-section {
background: var(--bg-secondary);
border-top: 1px solid var(--border);
padding: clamp(56px, 8vw, 200px) clamp(16px, 4vw, 200px);
overflow: hidden;
}
.contact-inner { max-width: 1200px; margin: 0 auto; }
.contact-grid {
display: grid; grid-template-columns: 1fr 1.1fr;
gap: 80px; align-items: start; margin-top: 56px;
}
.contact-info-text h3 {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 300; color: var(--text-primary); line-height: 1.2; margin-bottom: 24px;
}
.contact-info-text h3 em { font-style: italic; color: var(--accent); }
.contact-info-text p {
font-size: 0.98rem; color: var(--text-secondary); line-height: 1.85; margin-bottom: 32px;
}
.contact-location {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-detail); font-size: 0.76rem;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
margin-bottom: 32px;
}
.contact-location svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.contact-social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-social-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border: 1px solid var(--border);
color: var(--text-secondary); background: transparent;
font-family: var(--font-detail); font-size: 0.72rem;
letter-spacing: 0.12em; text-transform: uppercase;
text-decoration: none;
transition: border-color 0.35s, color 0.35s, background 0.35s, transform 0.35s var(--ease-out);
}
.contact-social-btn svg { width: 15px; height: 15px; }
.contact-social-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); background: rgba(201,169,110,0.04); }
.contact-cards {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.contact-card {
padding: 28px 22px; border: 1px solid var(--border);
background: var(--bg-card); display: block; text-decoration: none;
transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out), background 0.4s var(--ease-out), box-shadow 0.4s;
position: relative; overflow: hidden;
}
.contact-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(201,169,110,0.04), transparent);
opacity: 0; transition: opacity 0.4s;
}
.contact-card:hover { border-color: var(--accent); transform: translateY(-5px); background: var(--bg-elevated); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.contact-card:hover::before { opacity: 1; }
.contact-card-icon { width: 36px; height: 36px; color: var(--accent); margin-bottom: 16px; display: block; }
.contact-card-label {
font-family: var(--font-detail); font-size: 0.68rem;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 6px;
}
.contact-card-value {
font-family: var(--font-display); font-size: 1.1rem;
color: var(--text-primary); font-weight: 400; line-height: 1.3;
}
.contact-card.wa-card { background: rgba(37,211,102,0.05); border-color: rgba(37,211,102,0.2); }
.contact-card.wa-card:hover { background: rgba(37,211,102,0.1); border-color: rgba(37,211,102,0.5); box-shadow: 0 12px 40px rgba(37,211,102,0.1); }
.contact-card.wa-card .contact-card-icon { color: #25D366; }
.contact-card.wa-card::before { background: linear-gradient(135deg, rgba(37,211,102,0.06), transparent); }
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; gap: 48px; }
}
.reviews-carousel-dots {
display: flex; justify-content: center; gap: 9px; margin-top: 36px;
}
.reviews-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--border); border: 1px solid rgba(201,169,110,0.3);
cursor: pointer; transition: background 0.3s, transform 0.35s var(--ease-out);
padding: 0;
}
.reviews-dot.active { background: var(--accent); transform: scale(1.6); border-color: var(--accent); }
.reviews-dot:hover:not(.active) { background: rgba(201,169,110,0.4); }
.review-progress {
height: 2px; background: var(--border-light); margin-top: 14px;
overflow: hidden; max-width: 200px; margin-left: auto; margin-right: auto;
}
.review-progress-bar {
height: 100%; width: 0%;
background: linear-gradient(to right, var(--accent-dark), var(--accent));
transition: width 0.1s linear;
}
/* AVAILABILITY */
.availability-section { padding: 120px 80px; background: var(--bg); position: relative; }
.availability-inner { max-width: 1200px; margin: 0 auto; }
.availability-header { text-align: center; margin-bottom: 64px; }
.availability-header .section-desc { max-width: 640px; margin: 16px auto 0; }
.availability-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.avail-card { background: rgba(201,169,110,0.04); border: 1px solid rgba(201,169,110,0.12); border-radius: 16px; padding: 48px 40px; transition: border-color 0.3s, transform 0.3s; }
.avail-card:hover { border-color: rgba(201,169,110,0.3); transform: translateY(-4px); }
.avail-card-icon { width: 48px; height: 48px; color: var(--accent); margin-bottom: 24px; }
.avail-card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; letter-spacing: 0.04em; color: var(--text); margin-bottom: 16px; }
.avail-card p { font-size: 0.92rem; line-height: 1.7; color: var(--text-muted); margin: 0; }
.avail-card ul { list-style: none; padding: 0; margin: 20px 0 0; }
.avail-card ul li { font-size: 0.88rem; color: var(--text-muted); padding: 8px 0; border-bottom: 1px solid rgba(201,169,110,0.06); display: flex; align-items: center; gap: 10px; }
.avail-card ul li:last-child { border-bottom: none; }
.avail-card ul li::before { content: ''; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.availability-actions { text-align: center; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.btn-brochure { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); background: transparent; border: 1px solid rgba(201,169,110,0.35); border-radius: 4px; cursor: pointer; transition: all 0.3s; text-decoration: none; }
.btn-brochure:hover { background: rgba(201,169,110,0.08); border-color: var(--accent); }
.btn-brochure svg { width: 16px; height: 16px; }
/* BROCHURE MODAL */
.brochure-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(10,11,13,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.brochure-overlay.active { opacity: 1; pointer-events: auto; }
.brochure-modal { background: var(--surface); border: 1px solid rgba(201,169,110,0.15); border-radius: 20px; padding: 48px; max-width: 440px; width: 90%; position: relative; transform: translateY(20px); transition: transform 0.35s; }
.brochure-overlay.active .brochure-modal { transform: translateY(0); }
.brochure-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 8px; transition: color 0.3s; }
.brochure-close:hover { color: var(--accent); }
.brochure-modal h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 300; letter-spacing: 0.04em; color: var(--text); margin-bottom: 8px; }
.brochure-modal > p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 28px; }
.brochure-form { display: flex; flex-direction: column; gap: 16px; }
.brochure-form input { width: 100%; padding: 14px 18px; font-family: var(--font-body); font-size: 0.88rem; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid rgba(201,169,110,0.15); border-radius: 8px; outline: none; transition: border-color 0.3s; box-sizing: border-box; }
.brochure-form input::placeholder { color: var(--text-muted); opacity: 0.5; }
.brochure-form input:focus { border-color: var(--accent); }
.brochure-form .btn-primary { width: 100%; justify-content: center; margin-top: 4px; }
.brochure-form .form-note { font-size: 0.72rem; color: var(--text-muted); opacity: 0.6; text-align: center; margin: 0; }
@media (max-width: 768px) {
.availability-section { padding: 80px 20px; }
.availability-cards { grid-template-columns: 1fr; gap: 20px; }
.avail-card { padding: 32px 24px; }
.avail-card h3 { font-size: 1.3rem; }
.availability-actions { flex-direction: column; align-items: center; }
.availability-actions .btn-primary, .availability-actions .btn-brochure { width: 100%; justify-content: center; text-align: center; }
.brochure-modal { padding: 32px 24px; }
}
@media (min-width: 769px) and (max-width: 1199px) {
.availability-section { padding: 100px 48px; }
.avail-card { padding: 40px 32px; }
}
.specs-section,.gallery-section,.experiences-section,.toys-section,.cabins-section,.destinations-section,.reviews-section,.faq-section,.availability-section,.contact-section,.cta-section,footer{content-visibility:auto;contain-intrinsic-size:auto 800px}.amenities-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 30px;list-style:none;padding:0;margin:30px 0 0;}.amenities-list li{position:relative;padding-left:28px;color:var(--text-secondary);font-family:var(--font-detail);font-size:.96rem;line-height:1.5;}.amenities-list li::before{content:"";position:absolute;left:2px;top:6px;width:13px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);}.spec-subnote{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-top:7px;font-family:var(--font-detail)}.cabin-note{font-size:.78rem;color:var(--text-muted);font-weight:400}

@media (max-width:1024px){nav#navbar .nav-links{display:none!important}nav#navbar .menu-toggle{display:inline-flex!important}nav#navbar .theme-toggle{margin:0 6px 0 0!important}}

.hero-mslides{display:none}@media (max-width:768px){#heroVid,.hero-video{display:none!important}.hero-poster-bg{display:none!important}.hero-mslides{display:block!important;position:absolute;inset:0;z-index:2}.hero-mslide{position:absolute;inset:0;background-size:cover;background-position:center center;opacity:0;transition:opacity 1.4s ease}.hero-mslide.on{opacity:1}}

html[data-theme="day"] #navbar .logo-svg .lk-main,html[data-theme="day"] #navbar .logo-svg .lk-lio{fill:#f0ece4!important}html[data-theme="day"] #navbar .theme-toggle{color:#f0ece4!important;border-color:rgba(240,236,228,0.28)!important}html[data-theme="day"] #navbar .nav-links a{color:#f0ece4!important}html[data-theme="day"] #navbar .menu-toggle span{background:#f0ece4!important}html[data-theme="day"] #navbar .nav-cta{color:#f0ece4!important}

@media(min-width:769px){.toys-list{grid-template-columns:repeat(3,1fr)!important;}}@media(max-width:768px){.toys-list{grid-template-columns:1fr!important;}}.amenities-divider{display:flex;align-items:center;gap:24px;margin:60px auto 0;max-width:600px;}.amenities-divider span{font-family:var(--font-detail);font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);white-space:nowrap;}.amenities-divider::before,.amenities-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5;}@media(max-width:768px){.amenities-divider{gap:14px;margin:44px auto 0;}.amenities-divider span{font-size:.62rem;letter-spacing:.24em;}}

@media(min-width:1025px){footer .footer-top{grid-template-columns:1.8fr 1fr 1fr 1.4fr!important;gap:48px!important;align-items:start}}@media(max-width:1024px) and (min-width:641px){footer .footer-top{grid-template-columns:1fr 1fr!important;gap:36px!important}}@media(max-width:640px){footer .footer-top{grid-template-columns:1fr 1fr!important;gap:28px!important}}@media(max-width:440px){footer .footer-top{grid-template-columns:1fr!important}}

.trust-signals-bar{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px 56px;max-width:1080px;margin:0 auto!important;padding:44px 24px!important;}.trust-signals-bar .ts-item{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:3px;flex:0 1 auto;min-width:135px;}.trust-signals-bar .ts-icon{font-size:1.35rem;line-height:1;margin-bottom:6px;color:var(--accent,#c5a46e)!important;}.trust-signals-bar .ts-value{font-family:var(--font-display,"Cormorant Garamond",serif)!important;font-size:1.55rem!important;font-weight:500;color:var(--text-primary,#f0ece4)!important;line-height:1.1;}.trust-signals-bar .ts-label{font-family:var(--font-detail,"Outfit",sans-serif);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted,#8a8478);}@media(max-width:640px){.trust-signals-bar{gap:26px 32px;padding:32px 16px!important;}.trust-signals-bar .ts-item{min-width:40%;}.trust-signals-bar .ts-value{font-size:1.3rem!important;}}