:root {
    --theme-primary: #E8B86C;
    --theme-secondary: #2C5F5E;
    --theme-accent: #FF6B35;
    --bg-color: #FAF7F2;
    --bg-secondary: #F0ECE3;
    --text-dark: #1A3C40;
    --text-muted: #626B68;
    --line-color: #DCDDD3;

    --heading-font: 'EB Garamond', serif;
    --text-font: 'Manrope', sans-serif;
    --bs-body-font-family: var(--text-font);
    --bs-body-color: var(--text-dark);
    --bs-body-bg: var(--bg-color);
    --bs-border-color: var(--line-color);
    --bs-primary-rgb: 44,95,94; 
}


/* Native cross-document navigation: keep the header steady as content changes. */
.main-header {view-transition-name: site-header;}
::view-transition-group(*) {animation-duration: 360ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1);}
::view-transition-old(root) {animation: page-out 220ms ease-out both;}
::view-transition-new(root) {animation: page-in 360ms cubic-bezier(.22, 1, .36, 1) both;}
::view-transition-old(site-header), ::view-transition-new(site-header) {animation-duration: 240ms;}
@keyframes page-out {to {opacity: 0; transform: translateY(-12px);}}
@keyframes page-in {from {opacity: 0; transform: translateY(18px);} to {opacity: 1; transform: translateY(0);}}
html {scroll-behavior: auto; scroll-padding-top: 100px; scrollbar-gutter: stable;}
* {scrollbar-width: thin; scrollbar-color: var(--theme-secondary) var(--bg-secondary);}
@supports selector(::-webkit-scrollbar) {
    * {scrollbar-width: auto; scrollbar-color: auto;}
    ::-webkit-scrollbar {width: 10px; height: 10px;}
    ::-webkit-scrollbar-track {background: var(--bg-secondary);}
    ::-webkit-scrollbar-thumb {background: var(--theme-secondary); border: 2px solid var(--bg-secondary); border-radius: 20px;}
    ::-webkit-scrollbar-thumb:hover {background: var(--text-dark);}
    ::-webkit-scrollbar-corner {background: var(--bg-secondary);}
}
@media (forced-colors: active) {
    * {scrollbar-color: auto;}
}
html.overlay-open {overflow: hidden;}
.overlay-open body {width: var(--locked-body-width); padding-right: 0 !important;}
.overlay-open .main-header {width: var(--locked-header-width); padding-right: 0 !important;}
select, [data-date-input], .flatpickr-input, input[type="checkbox"], input[type="radio"] {cursor: pointer;}
.icon {width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle;}
.amenity .icon {width: 30px; height: 30px;}
.gallery-thumb {border-radius: 18px; background: var(--bg-secondary);}
.gallery-thumb img {aspect-ratio: 4 / 3; height: auto; object-fit: cover; transition: transform 450ms ease, filter 450ms ease;}
.gallery-thumb:hover img, .gallery-thumb:focus-visible img {transform: scale(1.045); filter: brightness(.88);}
.gallery-zoom {right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-color); color: var(--text-dark); transition: transform 250ms ease;}
.gallery-thumb:hover .gallery-zoom {transform: rotate(8deg);}
.gallery-section, .reasons-section {background: var(--bg-secondary);}
.gallery-modal .modal-content {background: #142B2E;}
.gallery-modal .modal-body {min-height: 0;}
.gallery-swiper img {height: min(70vh, 850px); object-fit: contain;}
.gallery-swiper .swiper-pagination {bottom: 8px; text-shadow: 0 1px 6px #000;}
.feature-list li {border-bottom: 1px solid var(--line-color);}
.feature-list .icon {color: var(--theme-secondary); margin-top: 3px;}
.reason-card {padding: 30px; border: 1px solid var(--line-color); border-radius: 20px;}
.reason-icon {width: 66px; height: 66px; border-radius: 50%; background: var(--bg-color);}
.reason-icon .icon {width: 32px; height: 32px;}
.ruma-page-image {border-radius: 24px; object-fit: cover; height: auto; aspect-ratio: 4 / 3;}
.ruma-page-photo img {display: block;}
.ruma-page h2 {font-size: clamp(2.2rem, 3.6vw, 3.6rem); letter-spacing: -.025em;}
.ruma-intro-section {padding-block: 48px;}
.ruma-intro-description {margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-color); line-height: 1.9;}
.ruma-page .reasons-section {padding-block: 58px;}
.ruma-page #guides {padding-top: 58px;}
@media (min-width: 992px) {
    .ruma-intro-section {padding-bottom: 56px;}
    .ruma-intro-description {margin-top: 48px; padding-top: 32px; columns: 2; column-gap: 48px;}
    .ruma-page .reasons-section {padding-block: 76px;}
    .ruma-page #guides {padding-top: 76px;}
}
.photo-credit {position: absolute; right: 16px; bottom: 14px; padding: 3px 8px; border-radius: 5px; background: rgb(255 255 255 / 38%); color: #171b1b; font-size: .65rem;
    backdrop-filter: blur(2px); font-size: .65rem; line-height: 1.5;}
.terms-part {border-top: 1px solid var(--line-color);}
.swiper-pagination-bullet-active {background: var(--theme-secondary);}
.flatpickr-calendar {font-family: var(--text-font); border-radius: 16px; box-shadow: 0 15px 45px #1A3C4020;}
.flatpickr-day.selected, .flatpickr-day.selected:hover {background: var(--theme-secondary); border-color: var(--theme-secondary);}
body {font-family: var(--text-font); color: var(--text-dark); background: var(--bg-color); font-size: 15px; line-height: 1.8; -webkit-font-smoothing: antialiased;}
h1, h2, h3, h4, h5, h6 {font-family: var(--heading-font); font-weight: 400; line-height: 1.06;}
p {color: var(--text-muted);}
a {color: inherit; text-underline-offset: 5px;}
a:hover {color: var(--theme-secondary);}
button, input, select, textarea {font: inherit;}
:focus-visible {outline: 2px solid var(--theme-primary); outline-offset: 5px;}
::selection {background: var(--theme-primary); color: var(--text-dark);}
.small, small {font-size: .79rem;}
.section-space {padding-block: 72px;}
.section-title {font-size: clamp(2.6rem, 4.4vw, 4.5rem); letter-spacing: -.035em;}
.section-intro {max-width: 410px;}
.title-eyebrow {font-family: var(--text-font); font-size: .63rem; letter-spacing: .18em; line-height: 1.7; font-weight: 600; color: var(--text-muted); margin-bottom: 24px; text-transform: uppercase;}
.title-eyebrow::before {content: ''; width: 30px; height: 1px; background: #AA8958; flex-shrink: 0;}
.theme-button, .theme-button-dark {padding: 15px 24px; border: 1px solid transparent; border-radius: 6px; font-size: .78rem; font-weight: 600; transition: background .2s, color .2s, border-color .2s;}
.theme-button {color: var(--text-dark); background: var(--theme-primary);}
.theme-button:hover, .theme-button:focus-visible {color: var(--text-dark); background: #F0CB91; border-color: #F0CB91;}
.theme-button-dark {color: var(--bg-color); background: var(--text-dark);}
.theme-button-dark:hover {color: white; background: var(--theme-secondary);}
.text-link {text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 5px; font-size: .82rem; font-weight: 600;}
.main-header {position: absolute; inset: 0 0 auto; z-index: 1020; padding-block: 20px; color: var(--bg-color); transition: background .2s, padding .2s;}
.main-header.scrolled {position: fixed; background: var(--bg-color); color: var(--text-dark); padding-block: 13px; box-shadow: 0 1px 0 #1A3C401A;}
header .brand svg, header .brand img {display: block; width: 200px; height: auto; flex-shrink: 0; shape-rendering: geometricPrecision;}
.brand-logo-stack {display: grid; width: 200px; height: 50.8px; flex-shrink: 0;}
header .brand-logo-stack img {grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; object-position: left center; transition: opacity .2s ease;}
.brand-logo-light {opacity: 1;}
.brand-logo-default {opacity: 0;}
.main-header.scrolled .brand-logo-light {opacity: 0;}
.main-header.scrolled .brand-logo-default {opacity: 1;}
.brand-type {font-family: var(--heading-font); font-size: 1.45rem; line-height: 1; white-space: nowrap;}
.brand-mark {width: 34px; height: 34px; object-fit: contain;}
.brand-caption {font-family: var(--text-font); font-size: .53rem; letter-spacing: .2em; margin-top: 8px;}
.brand, .header-link {color: inherit;}
.brand:hover, .header-link:hover {color: inherit; opacity: .8;}
.header-link {text-decoration: none; font-size: .85rem;}
.menu-toggle {width: 44px; height: 44px; color: inherit;}
.menu-toggle span {height: 1px; width: 28px; background: currentColor;}
.dropdown-menu {background: var(--bg-color); border-color: var(--line-color); font-size: .8rem;}
.dropdown-item.active, .dropdown-item:active {background: var(--theme-secondary);}
.language-dropdown .dropdown-toggle::after {transition: transform 160ms ease;}
.language-dropdown .dropdown-toggle[aria-expanded="true"]::after {transform: rotate(180deg);}
.language-dropdown .dropdown-menu {display: block; top: calc(100% + 12px); right: 0; left: auto; min-width: 100px; padding: 6px; margin: 0; border-radius: 12px; box-shadow: 0 8px 24px #1A3C4014; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;}
.language-dropdown .dropdown-menu.show {opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);}
.language-dropdown .dropdown-item {padding: 9px 14px; border-radius: 7px; color: var(--text-dark); font-weight: 500; transition: background-color 140ms ease, color 140ms ease, padding 140ms ease;}
.language-dropdown .dropdown-item:hover, .language-dropdown .dropdown-item:focus-visible {background: var(--bg-secondary); color: var(--theme-secondary); padding-left: 17px; padding-right: 11px;}
.language-dropdown .dropdown-item.active {background: var(--theme-secondary); color: #fff;}
.language-dropdown .dropdown-item.active:hover, .language-dropdown .dropdown-item.active:focus-visible {background: var(--text-dark); color: #fff;}
.language-dropdown .dropdown-item:focus-visible {outline: 2px solid var(--theme-primary); outline-offset: -2px;}
.skip-link {position: absolute; top: 5px; left: 5px; z-index: 1100; background: var(--bg-color); padding: 10px;}
.site-menu {--bs-offcanvas-width: 100%; background: var(--theme-secondary); color: var(--bg-color);}
.site-menu a {color: inherit; text-decoration: none;}
.site-menu .title-eyebrow {color: #E9E4D8;}
.menu-close {font-size: 2.7rem; line-height: 1;}
.menu-links a {font-family: var(--heading-font); font-size: clamp(2.1rem, 4vw, 4rem); line-height: 1.2; transition: color .2s;}
.menu-links a:hover {color: var(--theme-primary);}
.menu-language {font-size: .75rem; padding-bottom: 4px;}
.menu-language.active {border-bottom: 1px solid var(--theme-primary);}
.menu-photo {height: 220px; object-fit: cover; border-radius: 10px;}
.menu-message {font-family: var(--heading-font); font-size: 2.5rem; line-height: 1.1; color: var(--bg-color);}
.hero-section {min-height: 600px; padding: 130px 0 110px; 
    background: linear-gradient(90deg, #102b2dd6 0%, #102b2d8c 52%, #102b2d2b 100%), url(/img/hero-smestaj-ruma.webp) center 90% / cover;
    color: var(--bg-color);}
.hero-copy {animation: hero-appear .6s ease-out both;}
.hero-copy h1 {font-size: clamp(3.7rem, 8.3vw, 8rem); letter-spacing: -.045em; line-height: .97;}
.hero-copy h1 em {font-weight: 400;}
.hero-copy .title-eyebrow {color: #F3E9D6;}
.hero-copy .title-eyebrow::before {background: var(--theme-primary);}
.hero-intro {color: #F3F0E8; max-width: 480px; font-size: .92rem;}
.booking-section {margin-top: -42px; z-index: 5;}
.booking-bar {background: var(--bg-color); border-radius: 10px; box-shadow: 0 12px 35px #173B3410;}
.booking-field {padding: 18px 20px; border-bottom: 1px solid var(--line-color);}
.booking-field:first-child {border-right: 1px solid var(--line-color);}
.booking-field .form-label {font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px;}
.booking-field .form-control, .booking-field .form-select {font-size: .87rem; color: var(--text-dark); min-height: 30px; border-radius: 0;}
.booking-field input[type='date'] {min-width: 0; width: 100%;}
.booking-submit {min-height: 55px;}
.stay-section {padding: 46px 0 55px; background: var(--bg-secondary); margin-top: -170px; padding-top: 216px;}
.stay-title {font-size: 2.6rem; letter-spacing: -.025em;}
.price-number {font-family: var(--heading-font); font-size: 3.6rem; line-height: 1.1;}
.stay-long h3 {font-size: 1.8rem;}
.stay-price {padding-block: 10px;}
.stay-long {padding-top: 22px; border-top: 1px solid var(--line-color);}
.apartment-image {aspect-ratio: 4 / 3; border-radius: 14px; background: var(--bg-secondary);}
.apartment-image img {object-fit: cover; transition: transform .6s ease;}
.apartment-image:hover img {transform: scale(1.025);}
.location-pill {left: 18px; top: 18px; padding: 6px 13px; background: #FAF7F2E8; color: var(--text-dark); border-radius: 30px; font-size: .65rem; letter-spacing: .07em;}
.apartment-name {font-size: clamp(1.9rem, 2.7vw, 2.75rem); letter-spacing: -.025em;}
.apartment-name a {text-decoration: none;}
.card-arrow {width: 43px; height: 43px; border: 1px solid #BFC9C2; text-decoration: none; transition: background .2s, color .2s;}
.card-arrow:hover {background: var(--theme-secondary); color: white;}
.apartment-meta {border-top: 1px solid var(--line-color); color: var(--text-muted);}
.apartment-meta strong {color: var(--text-dark); font-weight: 600;}
.amenities-section {padding-bottom: 64px;}
.amenity {padding: 20px 0; border-top: 1px solid var(--line-color);}
.amenity i {color: var(--theme-secondary); font-size: 1.2rem;}
.amenity h3 {font-size: 1.65rem;}
.direct-section {background: var(--bg-secondary);}
.direct-item {border-top: 1px solid #D8D7CD;}
.direct-item h3 {font-size: 1.85rem;}
.direct-item p {font-size: .89rem;}
.item-number {font-family: var(--heading-font); font-size: 1.1rem; color: #927247; min-width: 26px;}
.reviews-section {background: #F5F2EB;}
.transfer-section {background: var(--text-dark); color: var(--bg-color);}
.transfer-section .title-eyebrow {color: var(--theme-primary);}
.transfer-icon {width: 88px; height: 88px; border: 1px solid #E8B86C55; color: var(--theme-primary);}
.transfer-icon .icon {width: 36px; height: 36px;}
.transfer-intro {color: #FAF7F2BF; max-width: 580px;}
.review {padding: 12px 22px 12px 0; border-top: 1px solid var(--line-color);}
.quote-mark {font-family: var(--heading-font); font-size: 4.7rem; line-height: 1; color: #B3915F; height: 66px;}
.review blockquote p {font-family: var(--heading-font); font-size: 1.55rem; line-height: 1.2; color: var(--text-dark);}
.review figcaption {margin-top: 20px; font-size: .8rem;}
.review figcaption span, .review-source {color: var(--text-muted);}
.ruma-lead {font-family: var(--heading-font); font-size: 1.5rem;}
.ruma-fact {font-family: var(--heading-font); font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.2;}
.ruma-collage {margin: 0 28px 55px 0;}
.ruma-main {height: 430px; object-fit: cover; border-radius: 16px;}
.ruma-detail {right: -38px; bottom: -48px; width: 42%; height: 220px; object-fit: cover; border: 6px solid var(--bg-color); border-radius: 15px; box-shadow: 0 15px 30px #173B3414;}
.map-section {background: var(--bg-secondary);}
.map-copy {padding: 55px 24px;}
.map-name {font-family: var(--heading-font); font-size: 1.6rem; line-height: 1.25;}
.map-choice {padding: 17px 0; border-bottom: 1px solid var(--line-color) !important; color: var(--text-dark); transition: color .2s, background-color .25s ease;}
.map-choice[aria-pressed='true'] {color: #8B6233;}
.map-choice .small {color: var(--text-muted);}
#map {height: 430px; width: 100%; background: #E3E5DC; z-index: 1; font-family: var(--text-font);}
.leaflet-control-attribution.leaflet-control {display: none!important;}
.leaflet-tile-pane {filter: saturate(.35) contrast(.92);}
.map-pin {background: var(--theme-secondary); border: 3px solid var(--bg-color); border-radius: 50%; color: white; text-align: center; line-height: 30px; box-shadow: 0 2px 8px #173B3433; font-size: 12px; font-weight: 600;}
.map-pin.is-active {background: #9A6832; line-height: 42px; font-size: 14px; box-shadow: 0 3px 12px #173B3466; z-index: 1000 !important;}
.detail-map-section #map {height: 430px; min-height: 0;}
.contact-locations {background: var(--bg-secondary); margin-top: 48px;}
.contact-stay-note {padding-block: clamp(56px, 7vw, 96px); font-size: 1.05rem; line-height: 1.85;}
.contact-stay-intro {font-family: var(--heading-font); font-size: clamp(1.65rem, 2.3vw, 2.15rem); line-height: 1.4; margin-bottom: 24px;}
.contact-stay-confirmation {color: var(--text-muted); margin-bottom: 0; font-size: 1rem;}
.contact-stay-note .text-link {font-size: 1rem;}
.contact-map-wrap {position: relative; border-radius: 18px; overflow: hidden;}
.contact-locations #map {height: clamp(450px, 60vw, 620px); min-height: 0;}
.map-directions {position: absolute; top: 12px; left: 56px; right: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none;}
.map-directions a {background: var(--bg-color); color: var(--text-dark); padding: 6px 10px; border-radius: 5px; font-size: .72rem; box-shadow: 0 2px 8px #173B3426; text-decoration: none; pointer-events: auto;}
.map-place-pin {background: transparent; border: 0;}
.map-place-shape {position: absolute; left: -16px; top: 8px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50% 50% 0 50%; transform-origin: bottom right; transform: rotate(45deg); background: #A9BED2; border: 2px solid var(--bg-color); box-shadow: 0 2px 6px #173B344D; transition: transform 250ms ease, background-color 250ms ease, box-shadow 250ms ease;}
.map-place-pin.is-active .map-place-shape {transform: rotate(45deg) scale(1.2); background: #829FB8; box-shadow: 0 3px 10px #253C5055;}
.map-place-shape span {transform: rotate(-45deg); color: #253C50; font-size: 12px; font-weight: 700;}
.location-place {border-top: 1px solid var(--line-color); padding-top: 20px; transition: background-color .25s ease;}
.map-choice:focus-visible, .location-place:focus-within {background-color: #2C5F5E0A !important;}
@media (hover: hover) {
    .map-choice:hover, .location-place:hover {background-color: #2C5F5E0A !important;}
}
.location-place-button {color: var(--text-dark); font-weight: 600;}
.location-place-button[aria-pressed='true'] {color: #365B7A;}
.location-letter {display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: 48px; height: 36px; background: #A9BED2; color: #253C50; border-radius: 8px 8px 8px 0; font-size: .75rem; flex-shrink: 0;}
.location-direction {padding: 24px; background: var(--bg-color); border-radius: 12px;}
.contact-locations .location-direction h3 {font-size: 1.65rem;}
.leaflet-popup-content {font-family: var(--text-font); line-height: 1.7;}
.leaflet-popup-content a {color: var(--theme-secondary);}
.about-section {background: var(--theme-secondary); color: var(--bg-color);}
.about-photo {object-fit: cover; min-height: 330px; max-height: 720px; object-position: right;}
.about-copy {padding: 72px 24px;}
.about-copy .title-eyebrow {color: #E1C28E;}
.about-copy p:not(.title-eyebrow) {color: #E0E8E3;}
.about-copy .text-link {color: var(--bg-color);}
.faq-item {border-top: 1px solid var(--line-color);}
.faq-item:last-child {border-bottom: 1px solid var(--line-color);}
.faq-summary {padding: 24px 0; border: 0; background: transparent; color: inherit; font-family: var(--heading-font); font-size: 1.5rem; line-height: 1.25; cursor: pointer;}
.faq-summary:focus-visible {outline: 2px solid var(--theme-primary); outline-offset: 5px;}
.faq-answer {display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.22,.61,.36,1);}
.faq-answer > div {overflow: hidden; min-height: 0;}
.faq-item.is-open .faq-answer {grid-template-rows: 1fr;}
.faq-item p {font-size: .88rem; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease .04s, transform .28s cubic-bezier(.22,.61,.36,1);}
.faq-item.is-open p {opacity: 1; transform: translateY(0);}
.faq-plus {width: 14px; height: 14px; position: relative;}
.faq-plus::before, .faq-plus::after {content: ''; position: absolute; background: #957446; inset: 6px 0 auto; height: 1px;}
.faq-plus::after {transform: rotate(90deg); transition: transform .2s;}
.faq-item.is-open .faq-plus::after {transform: rotate(0);}
.footer-cta-section {padding: 85px 0; border-radius: 38px 38px 0 0; background: linear-gradient(#173D3BCC, #173D3BF2), url('/img/ruma-about.webp') center 48% / cover; color: var(--bg-color);}
.footer-cta-section .title-eyebrow {color: #E1C28E;}
.footer-cta-section p {color: #E3E8E0;}
.footer-cta-title {font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -.035em;}
.footer {padding: 64px 0 25px; background: var(--text-dark); color: var(--bg-color);}
.footer-logo {display: block; width: 180px; max-width: 100%; height: auto;}
.footer p {color: #D1DBD5;}
.footer a {color: inherit; text-decoration: none;}
.footer a:hover {color: var(--theme-primary);}
.footer-heading {font-size: .64rem; letter-spacing: .16em; margin-bottom: 22px;}
.footer-bottom {border-top: 1px solid #FFFFFF26; font-size: .80rem; color: #BCCBC4;}
.back-to-top {position: fixed; right: 18px; bottom: 18px; width: 42px; height: 42px; background: var(--theme-primary); color: var(--text-dark); z-index: 1010; opacity: 0; visibility: hidden; transition: opacity .2s;}
.back-to-top.visible {opacity: 1; visibility: visible;}
.inner-page main {padding-top: 130px !important; padding-bottom: 80px !important; min-height: 60vh;}
.inner-page h1 {font-size: clamp(2.8rem, 5vw, 5rem);}
.inner-page h3 {font-size: 2rem;}
.inner-page .breadcrumb {font-size: .78rem;}
.detail-gallery {border-radius: 16px; overflow: hidden; background: var(--bg-secondary);}
.detail-gallery img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover;}
.detail-panel {position: sticky; top: 150px; padding: 30px; background: #F5F2EB; border-radius: 12px; border: 1px solid #edeae4;}
.detail-contact-links {display: flex; flex-direction: column; gap: 7px;}
.detail-contact-links a {font-size: .9rem;}
.detail-back-link {border-top: 1px solid var(--line-color); padding-top: 14px; margin-top: 18px; color: var(--text-muted); font-size: .78rem; text-decoration: none !important;}
.detail-back-link:hover {color: var(--text-dark);}
.detail-facts {border-block: 1px solid var(--line-color);}
.detail-facts > span {display: flex; flex-direction: column; gap: 4px;}
.detail-facts strong {font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600;}
.contact-form .form-control, .contact-form .form-select {background: transparent; border-color: #BCC5BE; padding: 12px;}
.contact-form .form-select {cursor: pointer;}
.contact-form .form-select.is-placeholder {color: #87918B; font-style: italic;}
.contact-form .form-select option {color: var(--text-dark); font-style: normal;}
.contact-form .form-select option[value=""] {color: #87918B; font-style: italic;}
.contact-note a {color: inherit; text-underline-offset: 3px;}
.contact-form label {font-size: .78rem;}
.contact-success {overflow: hidden; min-height: 520px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: linear-gradient(145deg, #F5F2EB 0%, #EEF1E9 100%); animation: contact-success-in .45s ease-out both;}
.contact-success-icon {display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 30px; border-radius: 50%; background: var(--theme-secondary); color: #fff; box-shadow: 0 12px 28px #173B3426;}
.contact-success-icon .icon {width: 34px; height: 34px; stroke-width: 1.8;}
.contact-success .title-eyebrow {margin-bottom: 16px;}
.contact-success h2 {max-width: 520px; margin-bottom: 20px; font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.08;}
.contact-success-copy {max-width: 560px; margin-bottom: 26px; color: var(--text-muted); font-size: 1rem; line-height: 1.8;}
.contact-success-note {width: 100%; padding: 18px 20px; border: 1px solid #D9D6CA; border-radius: 10px; background: #FAF7F2B8; color: var(--text-muted); font-size: .83rem; line-height: 1.65;}
.contact-success-note > span {display: inline-flex; flex: 0 0 auto; margin-top: 2px; color: var(--theme-secondary);}
.contact-success-note .icon {width: 20px; height: 20px;}
.contact-success-actions {width: 100%; margin-top: 30px;}
.contact-success-actions .btn {display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding-inline: 22px;}
.contact-success-again {border: 1px solid #AAB7AF; color: var(--text-dark);}
.contact-success-again:hover, .contact-success-again:focus-visible {border-color: var(--theme-secondary); background: var(--theme-secondary); color: #fff;}
@keyframes contact-success-in {from {opacity: 0; transform: translateY(12px);} to {opacity: 1; transform: translateY(0);}}
.article-content img {max-width: 100%; height: auto;}
.article-content > .lead + .article-body {padding-top: clamp(20px, 2.5vw, 32px);}
.article-body > .article-section:first-child > h2:first-child {margin-top: 0;}
.inner-page main.article-page {padding-top: 110px !important;}
.article-page > .section-space {padding-top: clamp(56px, 7vw, 88px);}
.inner-page main.apartments-page {padding-top: 110px !important;}
.apartments-page > .apartments-section {padding-top: clamp(56px, 7vw, 88px);}
.apartments-page .amenities-section {background: var(--bg-secondary); padding-block: clamp(48px, 6vw, 80px);}
.apartments-page .amenity {border-top: 0; padding: 12px 0;}
.apartments-page .amenity .icon {color: var(--theme-secondary);}
.apartments-page .amenity h3 {font-size: 1.65rem;}
.apartments-page .faq-section {padding-bottom: 0;}
.article-hero {position: relative; overflow: hidden; border-radius: 20px;}
.article-hero img {display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;}
.article-content h2 {font-size: 2.5rem; margin-top: 35px;}
.article-card, .excursion-card, .reason-card, .about-ruma-intro, .events-placeholder {padding: 25px; background: var(--bg-secondary); border-radius: 12px;}
.article-card {overflow: hidden;}
.article-card img, .excursion-card img {width: 100%; height: 320px; object-fit: cover; border-radius: 8px; transition: transform .35s ease;}
.article-card:hover img {transform: scale(1.03);}
.article-read-more {display: inline-flex; align-items: center; align-self: flex-start; gap: 12px; padding-top: 12px; color: var(--text-dark); font-size: .82rem; font-weight: 600; text-decoration: none;}
.article-read-more span {display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line-color); border-radius: 50%; transition: background .18s ease, color .18s ease, border-color .18s ease;}
.article-read-more:hover, .article-read-more:focus-visible {color: var(--theme-secondary); text-decoration: none;}
.article-read-more:hover span, .article-read-more:focus-visible span {background: var(--theme-secondary); border-color: var(--theme-secondary); color: #fff;}
.article-read-more:focus-visible {outline: 2px solid var(--theme-secondary); outline-offset: 5px; border-radius: 4px;}
.error-404 {padding: 130px 24px 80px; text-align: center;}
.error-code {font-family: var(--heading-font); font-size: 7rem;}
@keyframes hero-appear {from {opacity: 0; transform: translateY(12px);} to {opacity: 1; transform: translateY(0);}}
@media (min-width: 576px) {
    .brand-type {font-size: 2.2rem;}
    .brand-mark {width: 44px; height: 44px;}
    .stay-long {border-top: 0; border-left: 1px solid var(--line-color); padding: 0 0 0 28px;}
    .map-copy, .about-copy {padding: 65px max(24px, calc((100vw - 540px) / 2 + 12px));}
    .about-copy {padding-block: 80px;}
}
@media (min-width: 768px) {
    .section-space {padding-block: 96px;}
    .hero-section {min-height: 670px;}
    .hero-intro {font-size: 1rem;}
    .ruma-main {height: 580px;}
    .ruma-detail {height: 270px;}
    .map-copy, .about-copy {padding-inline: max(24px, calc((100vw - 720px) / 2 + 12px));}
    .footer-cta-section {border-radius: 70px 70px 0 0; padding-block: 110px;}
}
@media (min-width: 992px) {
    .hero-section {min-height: 630px; height: min(790px, calc(100svh - 75px)); padding-block: 130px 100px;}
    .booking-section {margin-top: -51px;}
    .booking-field {border-bottom: 0; padding: 23px 28px;}
    .booking-field + .booking-field {border-left: 1px solid var(--line-color);}
    .booking-field:first-child {border-right: 0;}
    .stay-section {margin-top: -51px; padding-top: 115px; padding-bottom: 65px;}
    .stay-price {border-left: 1px solid var(--line-color); padding-left: 35px;}
    .stay-title {max-width: 340px; font-size: 3.1rem;}
    .menu-aside {padding-left: 55px; border-left: 1px solid #FFFFFF26;}
    .map-copy {padding: 65px 45px 65px max(24px, calc((100vw - 960px) / 2 + 12px));}
    #map {height: 100%; min-height: 730px;}
    .about-copy {padding: 110px max(30px, calc((100vw - 960px) / 2 + 12px)) 110px 60px; min-height: 85svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
    .about-photo {min-height: 100%; max-height: none;}
    .ruma-collage {margin-left: 30px;}
    .ruma-main {height: 600px;}
}
@media (min-width: 1200px) {
    .section-space {padding-block: 115px;}
    .map-copy {padding-left: max(30px, calc((100vw - 1140px) / 2 + 12px));}
    .about-copy {padding-left: 80px; padding-right: max(30px, calc((100vw - 1140px) / 2 + 12px));}
}
@media (min-width: 1400px) {
    .map-copy {padding-left: max(40px, calc((100vw - 1320px) / 2 + 12px));}
    .about-copy {padding-right: max(40px, calc((100vw - 1320px) / 2 + 12px));}
}
@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior: auto;}
    *, *::before, *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important;}
}

.locations-scroll {max-height: clamp(450px, 60vw, 620px); overflow-y: auto; overscroll-behavior: contain; padding-right: 16px; scrollbar-gutter: stable;}
.locations-scroll .location-place {padding-block: 14px;}
.locations-scroll .location-place-button {font-size: .9rem;}
.location-letter .icon {width: 20px; height: 20px;}
.locations-scroll .map-name {font-size: 1.4rem;}