/* ── RESET & BASE ── */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 font-size: 16px;
 scroll-behavior: smooth;
}

body {
 background-color: #ffffff;
 color: #1a1a1a;
 font-family: 'Inter', Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 position: relative;
}

/* ════════════════════════════════════
 FULL PAGE LIGHTHOUSE BACKGROUND
 Single fixed layer behind everything
════════════════════════════════════ */

.mv-page-texture {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: url('https://i.ibb.co/bjpzk7RK/FaviconApp.png');
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 55%;
 opacity: 0.04;
 pointer-events: none;
 z-index: 0;
}

/* All sections sit above the page texture */
section,
header,
.mv-closing {
 position: relative;
 z-index: 1;
}

/* ════════════════════════════════════
 ARRIVAL HALL
════════════════════════════════════ */

.mv-arrival {
 position: relative;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 overflow: hidden;
 background-color: transparent;
 padding: 0 24px 80px;
 z-index: 1;
}

/* Soft white vignette over page texture in hero */
.mv-arrival-overlay {
 position: absolute;
 inset: 0;
 background: radial-gradient(
 ellipse at center,
 rgba(255,255,255,0.82) 0%,
 rgba(255,255,255,0.5) 50%,
 rgba(255,255,255,0.1) 100%
 );
 pointer-events: none;
 z-index: 1;
}

/* Logo sits at top of arrival */
.mv-arrival-header {
 position: absolute;
 top: 36px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 3;
}

.mv-logo {
 width: 325px;
 max-width: 85vw;
 height: auto;
}

/* Arrival content centered */
.mv-arrival-content {
 position: relative;
 z-index: 3;
 max-width: 640px;
 padding-top: 60px;
}

.mv-arrival-eyebrow {
 font-family: 'Inter', Arial, sans-serif;
 font-size: 9px;
 font-weight: 600;
 letter-spacing: 0.22em;
 color: #C9A227;
 text-transform: uppercase;
 margin-bottom: 28px;
}

.mv-arrival-greeting {
 font-family: 'Cinzel', Georgia, serif;
 font-size: clamp(36px, 6vw, 60px);
 font-weight: 500;
 color: #06145F;
 line-height: 1.15;
 letter-spacing: 0.02em;
 margin-bottom: 16px;
}

.mv-arrival-welcome {
 font-family: 'Cormorant Garamond', Georgia, serif;
 font-size: clamp(18px, 2.5vw, 24px);
 font-weight: 400;
 font-style: italic;
 color: #333333;
 margin-bottom: 16px;
 letter-spacing: 0.03em;
}

.mv-arrival-status {
 font-family: 'Inter', Arial, sans-serif;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.12em;
 color: #666666;
 text-transform: uppercase;
 margin-bottom: 40px;
}

.mv-arrival-rule {
 width: 48px;
 height: 1px;
 background-color: #C9A227;
 margin: 0 auto 40px;
}

.mv-arrival-btn {
 display: inline-block;
 padding: 15px 40px;
 background-color: #24483E;
 color: #ffffff;
 font-family: 'Inter', Arial, sans-serif;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 text-decoration: none;
 border-radius: 1px;
 transition: background-color 0.25s ease, transform 0.2s ease;
}

.mv-arrival-btn:hover {
 background-color: #1a3830;
 transform: translateY(-2px);
}

.mv-hidden {
 display: none;
}

/* Scroll indicator */
.mv-arrival-scroll {
 position: absolute;
 bottom: 36px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 z-index: 3;
 cursor: pointer;
}

.mv-scroll-label {
 font-family: 'Inter', Arial, sans-serif;
 font-size: 8px;
 font-weight: 600;
 letter-spacing: 0.2em;
 color: #C9A227;
 text-transform: uppercase;
}

.mv-scroll-line {
 width: 1px;
 height: 40px;
 background: linear-gradient(to bottom, #C9A227, transparent);
}

/* ════════════════════════════════════
 SHARED ZONE STYLES
════════════════════════════════════ */

.mv-zone-label {
 font-family: 'Inter', Arial, sans-serif;
 font-size: 9px;
 font-weight: 700;
 letter-spacing: 0.24em;
 color: #C9A227;
 text-transform: uppercase;
 margin-bottom: 16px;
}

.mv-zone-centered {
 text-align: center;
}

.mv-zone-rule {
 width: 36px;
 height: 1px;
 background-color: #C9A227;
 margin-bottom: 48px;
}

.mv-rule-centered {
 margin-left: auto;
 margin-right: auto;
}

/* ════════════════════════════════════
 PROJECT LOUNGE
════════════════════════════════════ */

.mv-lounge {
 max-width: 800px;
 margin: 0 auto;
 padding: 120px 40px;
 background-color: transparent;
}

.mv-lounge-block {
 margin-bottom: 100px;
}

.mv-lounge-block:last-child {
 margin-bottom: 0;
}

/* Today's Progress */
.mv-log-date {
 font-family: 'Inter', Arial, sans-serif;
 font-size: 9px;
 font-weight: 600;
 letter-spacing: 0.16em;
 color: #C9A227;
 text-transform: uppercase;
 margin-bottom: 20px;
}

.mv-log-body {
 font-family: 'Cormorant Garamond', Georgia, serif;
 font-size: clamp(19px, 2.2vw, 23px);
 font-weight: 400;
 color: #1a1a1a;
 line-height: 1.9;
 max-width: 680px;
}

/* ════════════════════════════════════
 VOYAGE + MILESTONE - EMERALD SECTION
════════════════════════════════════ */

.mv-lounge-voyage {
 background-color: #1e3d34;
 border-radius: 4px;
 padding: 72px 48px;
 text-align: center;
 position: relative;
 overflow: hidden;
}

.mv-lounge-voyage .mv-zone-label {
 color: #C9A227;
}

.mv-lounge-voyage .mv-zone-rule {
 background-color: #C9A227;
}

.mv-voyage-track {
 margin: 0 auto 48px;
 max-width: 680px;
}

.mv-voyage-line {
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 20px;
}

.mv-voyage-node {
 width: 14px;
 height: 14px;
 border-radius: 50%;
 flex-shrink: 0;
 position: relative;
}

.mv-voyage-segment {
 flex: 1;
 height: 1px;
 max-width: 120px;
}

/* Node states */
.mv-node-complete {
 background-color: #C9A227;
 border: 2px solid #C9A227;
}

.mv-node-active {
 background-color: #ffffff;
 border: 2px solid #ffffff;
 box-shadow: 0 0 0 5px rgba(255,255,255,0.2);
 width: 18px;
 height: 18px;
}

.mv-node-ahead {
 background-color: transparent;
 border: 1px solid rgba(255,255,255,0.3);
}

/* Segment states */
.mv-seg-complete {
 background-color: #C9A227;
 opacity: 0.7;
}

.mv-seg-ahead {
 background-color: rgba(255,255,255,0.2);
}

/* Phase labels on emerald */
.mv-voyage-labels {
 display: flex;
 justify-content: space-between;
 padding: 0 2px;
}

.mv-voyage-labels span {
 font-family: 'Cinzel', Georgia, serif;
 font-size: 9px;
 font-weight: 500;
 letter-spacing: 0.08em;
 color: rgba(255,255,255,0.45);
 text-align: center;
 flex: 1;
}

.mv-voyage-labels span:nth-child(1),
.mv-voyage-labels span:nth-child(2) {
 color: #C9A227;
 font-weight: 600;
}

.mv-voyage-labels span:nth-child(3) {
 color: #ffffff;
 font-weight: 700;
}

/* Milestone on emerald */
.mv-milestone {
 margin-top: 56px;
 padding-top: 40px;
 border-top: 1px solid rgba(201, 162, 39, 0.3);
}

.mv-milestone-label {
 font-family: 'Inter', Arial, sans-serif;
 font-size: 9px;
 font-weight: 700;
 letter-spacing: 0.2em;
 color: #C9A227;
 text-transform: uppercase;
 margin-bottom: 12px;
}

.mv-milestone-value {
 font-family: 'Cinzel', Georgia, serif;
 font-size: clamp(18px, 2.5vw, 26px);
 font-weight: 500;
 color: #ffffff;
 letter-spacing: 0.06em;
}

/* ════════════════════════════════════
 CONCIERGE DESK - NAVY
════════════════════════════════════ */

.mv-concierge {
 padding: 120px 40px;
 text-align: center;
 background-color: #06145F;
 position: relative;
 overflow: hidden;
}

.mv-concierge .mv-zone-label {
 color: #C9A227;
}

.mv-concierge .mv-zone-rule {
 background-color: #C9A227;
}

.mv-concierge-tiles {
 display: flex;
 align-items: stretch;
 justify-content: center;
 max-width: 800px;
 margin: 0 auto;
 flex-wrap: wrap;
 gap: 0;
}

.mv-tile {
 flex: 1;
 min-width: 200px;
 max-width: 260px;
 padding: 48px 32px;
 text-decoration: none;
 text-align: center;
 transition: background-color 0.25s ease, transform 0.2s ease;
 cursor: pointer;
}

.mv-tile:hover {
 background-color: rgba(201, 162, 39, 0.08);
 transform: translateY(-3px);
}

.mv-tile-title {
 font-family: 'Cinzel', Georgia, serif;
 font-size: 15px;
 font-weight: 600;
 letter-spacing: 0.14em;
 color: #ffffff;
 text-transform: uppercase;
 margin-bottom: 14px;
}

.mv-tile-desc {
 font-family: 'Cormorant Garamond', Georgia, serif;
 font-size: 17px;
 font-weight: 400;
 font-style: italic;
 color: rgba(255,255,255,0.72);
 line-height: 1.6;
}

.mv-tile-divider {
 width: 1px;
 background: linear-gradient(
 to bottom,
 transparent,
 rgba(201, 162, 39, 0.4),
 transparent
 );
 align-self: stretch;
 flex-shrink: 0;
}

/* ════════════════════════════════════
 HARBOR LIBRARY
════════════════════════════════════ */

.mv-library {
 border-top: 1px solid rgba(201, 162, 39, 0.15);
 padding: 120px 40px;
 text-align: center;
 background-color: transparent;
}

.mv-library-shelf {
 max-width: 560px;
 margin: 0 auto;
}

.mv-shelf-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 padding: 28px 0;
 text-decoration: none;
 transition: opacity 0.2s ease;
}

.mv-shelf-item:hover {
 opacity: 0.7;
}

.mv-shelf-title {
 font-family: 'Cinzel', Georgia, serif;
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 0.14em;
 color: #06145F;
 text-transform: uppercase;
}

.mv-shelf-sub {
 font-family: 'Cormorant Garamond', Georgia, serif;
 font-size: 16px;
 font-weight: 400;
 font-style: italic;
 color: #777777;
 letter-spacing: 0.02em;
}

.mv-shelf-divider {
 width: 36px;
 height: 1px;
 background-color: rgba(201, 162, 39, 0.4);
 margin: 0 auto;
}

/* ════════════════════════════════════
 CLOSING MARK
 Lighthouse reappears here as a
 large centered watermark
════════════════════════════════════ */

.mv-closing {
 text-align: center;
 padding: 100px 24px 120px;
 position: relative;
 overflow: hidden;
 background-color: transparent;
}

/* Lighthouse watermark - large and centered in closing */
.mv-closing-lighthouse {
 position: absolute;
 inset: 0;
 background-image: url('https://i.ibb.co/bjpzk7RK/FaviconApp.png');
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 60%;
 opacity: 0.07;
 pointer-events: none;
 z-index: 0;
}

.mv-closing-content {
 position: relative;
 z-index: 1;
}

.mv-closing-rule {
 width: 48px;
 height: 1px;
 background-color: #C9A227;
 margin: 0 auto 32px;
}

.mv-closing-name {
 font-family: 'Cinzel', Georgia, serif;
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 0.22em;
 color: #06145F;
 text-transform: uppercase;
 margin-bottom: 12px;
}

.mv-closing-tagline {
 font-family: 'Cormorant Garamond', Georgia, serif;
 font-size: 16px;
 font-weight: 400;
 font-style: italic;
 color: #aaaaaa;
 letter-spacing: 0.04em;
}

/* ════════════════════════════════════
 RESPONSIVE
════════════════════════════════════ */

@media (max-width: 640px) {

 .mv-page-texture {
 background-size: 140%;
 opacity: 0.03;
 }

 .mv-arrival {
 padding-bottom: 100px;
 }

 .mv-lounge {
 padding: 80px 24px;
 }

 .mv-lounge-block {
 margin-bottom: 72px;
 }

 .mv-lounge-voyage {
 padding: 48px 24px;
 }

 .mv-voyage-segment {
 max-width: 48px;
 }

 .mv-voyage-labels span {
 font-size: 7px;
 }

 .mv-concierge {
 padding: 80px 24px;
 }

 .mv-concierge-tiles {
 flex-direction: column;
 align-items: center;
 }

 .mv-tile-divider {
 width: 36px;
 height: 1px;
 background: linear-gradient(
 to right,
 transparent,
 rgba(201, 162, 39, 0.4),
 transparent
 );
 align-self: auto;
 }

 .mv-tile {
 max-width: 100%;
 width: 100%;
 padding: 36px 24px;
 }

 .mv-library {
 padding: 80px 24px;
 }

 .mv-closing {
 padding: 72px 24px 96px;
 }

 .mv-closing-lighthouse {
 background-size: 100%;
 }

}

/* ── MOBILE LOGO FIX ── */
@media (max-width: 640px) {
 .mv-arrival-header {
 top: 20px;
 }

 .mv-arrival-content {
 padding-top: 100px;
 }

 .mv-logo {
 width: 240px;
 }
}