.interior-page { min-height: 100vh; display: flex; flex-direction: column; line-height: 1.7; }
.interior-page header { position: relative; inset: auto; background: var(--ink); border-bottom: 1px solid #ffffff24; }
.interior-page nav a[aria-current="page"] { color: #e6d3aa; border-bottom: 1px solid #e6d3aa; }
.interior-page nav .nav-book[aria-current="page"] { border: 1px solid #e6d3aa; }
.interior-page nav .nav-book:hover { color: var(--ink); }
.interior-page .site-footer { margin-top: auto; }
.page-content { width: min(1240px, 100%); margin: 0 auto; padding: 48px 28px 88px; }
.interior-page h1, .interior-page h2, .interior-page h3 { font-family: Georgia, "Times New Roman", serif; font-weight: normal; overflow-wrap: anywhere; }
.interior-page h1 { font-size: clamp(38px, 4.8vw, 66px); line-height: 1.1; letter-spacing: -1.7px; }
.interior-page h2 { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.2; letter-spacing: -.6px; }
.interior-page h3 { font-size: 25px; line-height: 1.3; }
.interior-page p { color: var(--muted); }
.interior-page .eyebrow { color: var(--sea); margin-bottom: 16px; }
.interior-page .site-footer p { color: #c1cec3; }
.back-link, .btn-return-home { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 24px; color: var(--sea); font-size: 12px; }
.back-link:hover, .btn-return-home:hover { text-decoration: underline; text-underline-offset: 5px; }
.section-header { margin-bottom: 52px; }
.section-header > p:not(.eyebrow) { max-width: 680px; margin-top: 22px; line-height: 1.85; font-size: 15px; }
.photo-header { min-height: 310px; display: flex; flex-direction: column; justify-content: center; padding: 48px; color: #fffdf7; background: linear-gradient(90deg, #102d34db, #15373845), image-set(url('/.netlify/images?url=%2Fresort_view.jpg&w=1280&q=78') 1x, url('/.netlify/images?url=%2Fresort_view.jpg&w=1920&q=78') 2x) center 58% / cover; }
.photo-header h1 { max-width: 540px; }
.photo-header .eyebrow { color: #e3d7b6; }
.tier-section { margin: 0 0 68px; }
.tier-section:last-child { margin-bottom: 0; }
.tier-header { padding-bottom: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.tier-title { font-family: Georgia, serif; font-size: 32px; line-height: 1.3; }
.sub-rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.sub-room-card { display: flex; flex-direction: column; background: #fffdf7; border: 1px solid var(--line); min-width: 0; transition: transform 200ms ease, box-shadow 200ms ease; }
.sub-room-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px #193c3b0c; }
.card-photo { width: 100%; height: 240px; object-fit: cover; display: block; }
.card-text-area { display: flex; flex-direction: column; flex-grow: 1; padding: 28px; }
.sub-room-name { margin-bottom: 8px; }
.sub-room-type { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--sea); margin-bottom: 20px; }
.specs-list { list-style: none; margin: 0 0 24px; padding: 0; color: var(--muted); font-size: 13px; }
.specs-list li { padding: 5px 0; border-bottom: 1px solid #d9ddd160; }
.specs-list li:last-child { border: 0; }
.btn-select { display: flex; justify-content: space-between; margin-top: auto; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--sea); }
.btn-select::after { content: '↗'; }
.sub-room-card:hover .btn-select { color: var(--ink); }
.contact-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 78px; align-items: start; padding-top: 72px; }
.contact-info > p:not(.eyebrow) { font-size: 15px; margin: 24px 0 36px; }
.info-details { display: grid; gap: 26px; }
.info-item { display: flex; gap: 18px; align-items: start; }
.info-item .icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--sea); }
.icon svg { width: 17px; height: 17px; }
.info-text { min-width: 0; }
.info-text h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 7px; color: var(--sea); }
.info-text p { font-size: 13px; overflow-wrap: anywhere; }
.info-text a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.contact-info::after { content: ''; display: block; height: 180px; margin-top: 36px; background: image-set(url('/.netlify/images?url=%2Fmy-beach.jpg&w=640&q=78') 1x, url('/.netlify/images?url=%2Fmy-beach.jpg&w=1280&q=78') 2x) center / cover; }
.contact-form-box, .reservation-page .card { background: #fffdf7; border: 1px solid var(--line); padding: 40px; box-shadow: 0 12px 40px #193c3b06; }
.contact-form { display: grid; gap: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.input-group { min-width: 0; }
.interior-page .form-group { margin: 0; }
.interior-page .input-group label, .interior-page .form-group label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted); margin-bottom: 8px; line-height: 1.6; }
.interior-page .input-group input, .interior-page .input-group textarea, .interior-page .form-group input, .interior-page .form-group select { width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--line); border-radius: 0; padding: 12px; background: var(--sand); color: var(--ink); font-size: 16px; color-scheme: light; }
.interior-page input::placeholder, .interior-page textarea::placeholder { color: #6b7770; opacity: 1; }
.interior-page textarea { resize: vertical; font-family: inherit; }
.contact-submit-btn, .btn-submit, .btn-home, .payment-content > a { display: inline-flex; justify-content: center; align-items: center; padding: 16px 24px; background: var(--sea); color: #fffdf7; border: 1px solid transparent; border-radius: 0; font-size: 13px; line-height: 1.5; cursor: pointer; transition: background 180ms, transform 180ms; }
.contact-submit-btn:hover, .btn-submit:hover, .btn-home:hover, .payment-content > a:hover { background: var(--ink); transform: translateY(-2px); }
.interior-page .privacy-note { font-size: 11px; line-height: 1.8; }
.hidden-field { display: none; }
.reservation-page .container { display: grid; grid-template-columns: .85fr 1.15fr; gap: 0 64px; padding-top: 36px; }
.back-btn-container { grid-column: 1 / -1; }
.reservation-intro { padding-top: 24px; }
.step-indicator { margin-top: 24px; font-size: 15px; line-height: 1.85; }
.reservation-intro::after { content: ''; display: block; aspect-ratio: 4 / 3; margin-top: 42px; background: image-set(url('/.netlify/images?url=%2Fmy-beach.jpg&w=640&q=78') 1x, url('/.netlify/images?url=%2Fmy-beach.jpg&w=1280&q=78') 2x) center / cover; }
.reservation-page .card h2 { font-size: 30px; margin-bottom: 32px; }
.reservation-page form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.reservation-page .btn-submit, .reservation-page .privacy-note { grid-column: 1 / -1; }
.rules-page .page-content { max-width: 1020px; }
.rules-page .section-header { max-width: 790px; }
.rules-card { counter-reset: rule-section; }
.rule-group { position: relative; padding: 36px 0 36px 82px; border-top: 1px solid var(--line); counter-increment: rule-section; }
.rule-group::before { content: counter(rule-section, decimal-leading-zero); position: absolute; top: 34px; left: 0; color: #719083; font-family: Georgia, serif; font-size: 30px; }
.rule-group h2 { font-size: 29px; margin-bottom: 24px; }
.rule-list { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.rule-list li { padding-left: 6px; margin-bottom: 12px; }
.rule-list li::marker { color: var(--sea); }
.notice-container { display: grid; gap: 20px; margin-top: 12px; }
.important-notice { padding: 28px 32px; border: 1px solid #d5c39d; border-left: 3px solid #b98737; background: #eee7d6; }
.important-notice:last-child { background: #e9ecdf; border-color: #c2cbb7; border-left-color: var(--sea); }
.important-notice h3 { font-size: 25px; margin-bottom: 16px; }
.important-notice p, .important-notice li { font-size: 13px; line-height: 1.85; color: var(--muted); }
.important-notice ul { margin: 0; padding-left: 18px; }
.diving-page .platform { display: grid; grid-template-columns: 160px minmax(0, 1fr) 160px; gap: 38px; }
.diving-page .platform-copy { min-width: 0; }
.diving-page .platform-copy > h1 { font-size: clamp(36px, 4.4vw, 60px); }
.diving-page .intro { margin-top: 26px; font-size: 15px; line-height: 1.9; }
.service { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line); }
.service h2 { font-size: 27px; margin-bottom: 18px; }
.service ul { padding-left: 18px; margin: 0; color: var(--muted); }
.service li { font-size: 13px; margin-bottom: 12px; padding-left: 4px; }
.service li::marker { color: var(--sea); }
.service strong { color: var(--ink); }
.photo-rail { display: flex; flex-direction: column; gap: 26px; padding-top: 90px; }
.photo-rail figure { margin: 0; }
.photo-rail img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.photo-rail figcaption { font-size: 10px; color: var(--muted); padding-top: 8px; }
.photo-rail .sea-illustration { border: 0; opacity: .65; margin-top: 12px; }
.platform-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 32px; }
.scroll-link { color: var(--sea); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.ocean-divider { margin-top: 50px; height: 64px; overflow: hidden; }
.ocean-divider svg { width: 100%; height: 100%; display: block; }
.ocean-divider path:first-child { fill: #e9ecdf; }
.ocean-divider path:not(:first-child) { stroke: var(--sea); }
.dive-map { padding: 48px 0 0; scroll-margin-top: 24px; }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 28px; }
.section-heading > a { color: var(--sea); font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
.dive-map figure { margin: 0; }
.map-image-link { display: block; padding: 10px; border: 1px solid var(--line); background: #fffdf7; }
.map-image-link img { width: 100%; height: auto; display: block; }
.map-caption { font-size: 12px; color: var(--muted); margin-top: 16px; }
.success-card, .payment-content { width: min(760px, calc(100% - 56px)); margin: 64px auto 80px; padding: 56px; background: #fffdf7; border: 1px solid var(--line); border-top: 3px solid var(--sea); }
.success-card { text-align: center; }
.icon-circle { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 28px; border-radius: 50%; color: var(--sea); background: #e9ecdf; }
.icon-circle svg { width: 28px; height: 28px; stroke: currentColor; }
.success-card h1 { font-size: clamp(36px, 4vw, 54px); }
.success-card .subtitle { margin-top: 22px; font-size: 14px; line-height: 1.9; }
.receipt-box { background: var(--sand); border: 1px solid var(--line); padding: 8px 24px; margin: 32px 0; text-align: left; }
.receipt-row { display: flex; justify-content: space-between; align-items: start; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.receipt-row:last-child { border: 0; }
.receipt-row > span { color: var(--muted); }
.receipt-row strong { font-weight: normal; text-align: right; max-width: 60%; }
.status-badge { padding: 3px 10px; color: var(--sea); background: #e9ecdf; border: 1px solid #c2cbb7; font-size: 10px; }
.success-card .notice-text { margin-top: 26px; font-size: 11px; line-height: 1.8; }
.payment-content h1 { font-size: clamp(36px, 4.2vw, 56px); margin-bottom: 24px; }
.payment-content > p { font-size: 14px; line-height: 1.9; }
.payment-content .notice { border-left: 3px solid #b98737; background: #eee7d6; padding: 20px 24px; margin: 30px 0; }
@media (max-width: 1050px) {
    .contact-section { gap: 40px; }
    .contact-form-box, .reservation-page .card { padding: 28px; }
    .reservation-page .container { gap: 0 40px; }
    .diving-page .platform { grid-template-columns: 130px minmax(0, 1fr) 130px; gap: 24px; }
    .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .page-content { padding: 28px 20px 56px; }
    .interior-page h1 { letter-spacing: -1px; }
    .section-header { margin-bottom: 36px; }
    .photo-header { min-height: 250px; padding: 28px; background-image: linear-gradient(90deg, #102d34db, #15373845), image-set(url('/.netlify/images?url=%2Fresort_view.jpg&w=640&q=78') 1x, url('/.netlify/images?url=%2Fresort_view.jpg&w=1280&q=78') 2x); }
    .tier-header { margin-bottom: 20px; }
    .tier-title { font-size: 28px; }
    .tier-section { margin-bottom: 48px; }
    .sub-rooms-grid { grid-template-columns: 1fr; gap: 22px; }
    .card-photo { height: 250px; }
    .card-text-area { padding: 24px; }
    .contact-section { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
    .contact-form-box { padding: 26px 22px; }
    .reservation-page .container { grid-template-columns: 1fr; padding-top: 20px; }
    .reservation-intro { padding-top: 0; margin-bottom: 36px; }
    .reservation-intro::after { aspect-ratio: auto; height: 180px; margin-top: 28px; }
    .reservation-page .card { padding: 28px 22px; }
    .reservation-page form { grid-template-columns: 1fr; gap: 22px; }
    .rule-group { padding: 28px 0 28px 44px; }
    .rule-group::before { font-size: 22px; top: 29px; }
    .rule-group h2 { font-size: 25px; }
    .rule-list { font-size: 13px; padding-left: 16px; }
    .important-notice { padding: 24px; }
    .diving-page .platform { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
    .platform-copy { grid-column: 1 / -1; grid-row: 1; }
    .photo-rail { padding-top: 0; gap: 20px; }
    .photo-rail .sea-illustration { display: none; }
    .service { margin-top: 28px; }
    .service h2 { font-size: 25px; }
    .platform-actions { flex-direction: column; align-items: stretch; }
    .platform-actions .button { justify-content: center; text-align: center; }
    .ocean-divider { margin-top: 30px; }
    .dive-map { padding-top: 28px; }
    .success-card, .payment-content { width: calc(100% - 40px); margin: 40px auto 56px; padding: 32px 24px; }
    .receipt-box { padding: 8px 16px; }
    .receipt-row { flex-direction: column; gap: 8px; }
    .receipt-row strong { max-width: 100%; text-align: left; }
    .payment-content .notice { padding: 18px; }
    .payment-content > a { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .sub-room-card, .contact-submit-btn, .btn-submit, .btn-home, .payment-content > a { transition: none; }
    .sub-room-card:hover, .contact-submit-btn:hover, .btn-submit:hover, .btn-home:hover, .payment-content > a:hover { transform: none; }
}