.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
body { font-family: 'Manrope', sans-serif; }
h1, h2, h3 { font-family: 'Noto Serif', serif; }
.hero-overlay { background: linear-gradient(135deg, rgba(18,36,28,0.52), rgba(18,36,28,0.24)); }
.home-hero-copy { max-width: 56rem; width: 100%; min-width: 0; }
.page-hero-copy { width: 100%; min-width: 0; }
.home-hero-title { letter-spacing: -0.055em; line-height: 0.95; text-shadow: 0 2px 22px rgba(10,20,16,0.20); }
.home-hero-subtitle { max-width: 38rem; line-height: 1.7; text-shadow: 0 1px 18px rgba(10,20,16,0.22); }
.nav-scrolled { background: rgba(252,249,243,0.95) !important; backdrop-filter: blur(16px) !important; border-bottom-color: rgba(194,200,194,0.3) !important; }
.nav-scrolled .nav-logo, .nav-scrolled .nav-link, .nav-scrolled .nav-link-active { color: #173124 !important; }
.nav-scrolled .nav-link:hover { color: #775a19 !important; }
.nav-scrolled .nav-cta { background: #173124 !important; color: #ffffff !important; }
.nav-scrolled .lang-toggle { color: #173124 !important; }
.lang-dropdown { display:none; position:absolute; top:100%; right:0; margin-top:0.5rem; min-width:10rem; background:rgba(252,249,243,0.98); backdrop-filter:blur(12px); border-radius:0.5rem; box-shadow:0 4px 24px rgba(0,0,0,0.08); padding:0.5rem 0; z-index:100; }
.lang-dropdown.open { display:block; }
.lang-dropdown a { display:block; padding:0.5rem 1rem; font-size:0.8125rem; color:#424844; transition:all 0.15s; }
.lang-dropdown a:hover { background:#f0eee8; color:#173124; }
.lang-dropdown a.font-bold { color:#775a19; }
.gallery-scroll { scrollbar-width:none; -ms-overflow-style:none; }
.gallery-scroll::-webkit-scrollbar { display:none; }
.glimpse-card { transition: transform 300ms ease, box-shadow 300ms ease; }
@media (hover: hover) and (pointer: fine) {
  .glimpse-card:hover { transform: scale(1.03); box-shadow: 0 8px 30px rgba(0,0,0,0.10); }
}
@keyframes gentle-bounce { 0%,100%{transform:translateY(0);opacity:0.4} 50%{transform:translateY(10px);opacity:0.7} }
.animate-gentle-bounce { animation: gentle-bounce 2.5s ease-in-out infinite; }
.fade-up { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.room-card { cursor: pointer; }
.room-card img { transition: transform 0.7s ease; }
.room-card:hover img { transform: scale(1.03); }
.room-card:hover h2 { color: #775a19; }
.room-card:focus-visible { outline:2px solid rgba(119,90,25,0.48); outline-offset:0.45rem; border-radius:0.5rem; }
.room-card h2 { transition: color 0.3s ease; }
.room-location { margin: 0.15rem 0 0.55rem; color: #775a19; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; line-height: 1.5; text-transform: uppercase; }
.mobile-menu-overlay { position:fixed; inset:0; z-index:150; background:linear-gradient(180deg, rgba(10,20,16,0.88) 0%, rgba(14,26,20,0.78) 40%, rgba(18,32,24,0.82) 100%); backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); opacity:0; pointer-events:none; transition:opacity 0.35s ease; display:flex; align-items:center; justify-content:center; padding:env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0) 0; padding-bottom:12vh; overflow:hidden; }
.mobile-menu-overlay.open { opacity:1; pointer-events:auto; }
.mobile-menu-content { opacity:0; transform:translateY(12px); transition:opacity 0.3s ease 0.05s, transform 0.35s cubic-bezier(0.16,1,0.3,1) 0.05s; }
.mobile-menu-overlay.open .mobile-menu-content { opacity:1; transform:translateY(0); }
.form-input { background: white; border: 1px solid #c2c8c2; border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 0.9375rem; font-family: 'Manrope', sans-serif; color: #1c1c18; transition: border-color 0.2s; width: 100%; }
.form-input:focus { outline: none; border-color: #775a19; box-shadow: 0 0 0 2px rgba(119,90,25,0.1); }
.form-input::placeholder { color: #727973; }
select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23727973' d='M1.41.59L6 5.17 10.59.59 12 2l-6 6-6-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.date-input-wrap { position: relative; }
.date-input-wrap .form-input,
.date-display-input { padding-right: 3rem; }
.date-input-icon { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); color: #727973; font-size: 1.125rem; pointer-events: none; transition: color 0.2s ease; }
.date-input-wrap:focus-within .date-input-icon { color: #173124; }
.date-display-input[readonly] { cursor: pointer; background: white; }
.flatpickr-calendar { background: rgba(252,249,243,0.98); border: 1px solid rgba(194,200,194,0.72); border-radius: 1.125rem; box-shadow: 0 18px 48px rgba(20, 27, 23, 0.14); padding: 0.75rem; width: 19rem; }
.flatpickr-months { margin-bottom: 0.35rem; }
.flatpickr-months .flatpickr-month { height: 3rem; color: #173124; }
.flatpickr-current-month { padding-top: 0.35rem; font-family: 'Noto Serif', serif; font-size: 1rem; color: #173124; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { font-family: 'Noto Serif', serif; font-weight: 400; color: #173124; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month input.cur-year:hover { background: transparent; }
.flatpickr-weekdays { margin-bottom: 0.4rem; }
span.flatpickr-weekday { color: #727973; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.flatpickr-rContainer { width: 100%; }
.flatpickr-days { width: 100%; }
.dayContainer { min-width: 100%; max-width: 100%; }
.flatpickr-day { max-width: 2.25rem; height: 2.25rem; line-height: 2.25rem; border-radius: 999px; border-color: transparent; color: #1c1c18; font-size: 0.9rem; }
.flatpickr-day:hover { background: #ebe8e2; border-color: #ebe8e2; }
.flatpickr-day.today { border-color: rgba(119, 90, 25, 0.32); color: #173124; }
.flatpickr-day.today:hover { background: rgba(119, 90, 25, 0.1); border-color: rgba(119, 90, 25, 0.1); }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover { background: #173124; border-color: #173124; color: #ffffff; }
.flatpickr-day.inRange { background: rgba(23, 49, 36, 0.08); border-color: rgba(23, 49, 36, 0.08); box-shadow: none; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: rgba(114, 121, 115, 0.42); background: transparent; }
.flatpickr-prev-month,
.flatpickr-next-month { display: flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; border-radius: 999px; top: 0.4rem; color: #173124; }
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover { background: rgba(23, 49, 36, 0.06); }
.flatpickr-prev-month svg,
.flatpickr-next-month svg { width: 0.8rem; height: 0.8rem; fill: #173124; }
@media (max-width: 640px) {
  .flatpickr-calendar { width: min(19rem, calc(100vw - 2rem)); padding: 0.65rem; }
  .flatpickr-day { max-width: 2.15rem; height: 2.15rem; line-height: 2.15rem; }
}

/* Room modal */
.room-modal-overlay { position:fixed; inset:0; z-index:200; background:rgba(13,26,20,0.9); backdrop-filter:blur(14px); opacity:0; pointer-events:none; transition:opacity 0.35s ease; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.room-modal-overlay.active { opacity:1; pointer-events:auto; }
.room-modal { background:#fcf9f3; border:1px solid rgba(252,249,243,0.18); border-radius:1.125rem; max-width:min(72rem, 100%); width:100%; max-height:calc(100vh - 3rem); overflow-y:auto; transform:translateY(18px); opacity:0; transition:transform 0.38s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; box-shadow:0 28px 90px rgba(0,0,0,0.28); }
.room-modal-overlay.active .room-modal { transform:translateY(0); opacity:1; }
.room-modal button:focus { outline:none; }
.room-modal button:focus-visible { outline:2px solid rgba(119,90,25,0.48); outline-offset:3px; }
.room-modal-building { margin-top:0.45rem; color:#775a19; font-size:0.68rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; }
.room-modal-gallery { display:block; }
.room-modal-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:18rem; background:#101912; border-radius:0.75rem; overflow:hidden; }
.room-modal-main-image { display:block; width:100%; max-height:min(58vh, 38rem); object-fit:contain; }
.room-modal-nav { position:absolute; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border-radius:999px; background:rgba(252,249,243,0.88); color:#173124; box-shadow:0 10px 30px rgba(0,0,0,0.16); transition:background-color 0.2s ease, color 0.2s ease; }
.room-modal-nav:hover { background:#fcf9f3; color:#775a19; }
.room-modal-nav-prev { left:1rem; }
.room-modal-nav-next { right:1rem; }
.room-modal-counter { position:absolute; right:1rem; bottom:1rem; padding:0.35rem 0.65rem; border-radius:999px; background:rgba(252,249,243,0.9); color:#424844; font-size:0.75rem; }
.room-modal-thumbs { display:flex; gap:0.55rem; margin-top:0.75rem; padding-bottom:0.2rem; overflow-x:auto; scrollbar-width:none; }
.room-modal-thumbs::-webkit-scrollbar { display:none; }
.room-modal-thumb { flex:0 0 auto; width:5rem; height:3.75rem; overflow:hidden; border:1px solid rgba(194,200,194,0.58); border-radius:0.45rem; opacity:0.62; transition:border-color 0.2s ease, opacity 0.2s ease; }
.room-modal-thumb.active { border-color:#775a19; opacity:1; }
.room-modal-thumb img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 640px) {
  .room-modal-overlay { padding:0.75rem; align-items:flex-end; }
  .room-modal { max-height:calc(100vh - 1.5rem); border-radius:1rem 1rem 0.75rem 0.75rem; }
  .room-modal-stage { min-height:14rem; }
  .room-modal-main-image { max-height:46vh; }
  .room-modal-nav { width:2.35rem; height:2.35rem; }
  .room-modal-nav-prev { left:0.65rem; }
  .room-modal-nav-next { right:0.65rem; }
  .room-modal-counter { right:0.65rem; bottom:0.65rem; }
  .room-modal-thumb { width:4.25rem; height:3.2rem; }
}

/* Footer */
.lf-footer { background: linear-gradient(180deg, #0c1812 0%, #091310 100%); }

/* Phase 2 real-url page helpers */
.page-kicker { letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.75rem; font-weight: 600; color: #775a19; }
.detail-card { background: rgba(255,255,255,0.56); border: 1px solid rgba(194,200,194,0.52); border-radius: 0.875rem; }
.contact-panel { background: rgba(252,249,243,0.72); border: 1px solid rgba(194,200,194,0.42); border-radius: 1.25rem; box-shadow: 0 18px 56px rgba(20,27,23,0.06); }
.contact-line { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: 1.25rem; align-items: baseline; padding-bottom: 1rem; border-bottom: 1px solid rgba(194,200,194,0.42); }
.contact-line:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #775a19; }
.contact-value { color: #424844; line-height: 1.7; }
.contact-action-link { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.65rem 0.9rem; border-radius: 999px; border: 1px solid rgba(194,200,194,0.62); background: rgba(252,249,243,0.42); color: #424844; font-size: 0.8125rem; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; }
.contact-action-link:hover { border-color: rgba(119,90,25,0.58); color: #173124; background: rgba(119,90,25,0.06); }
.contact-action-link .material-symbols-outlined { font-size: 1rem; color: #775a19; }
.contact-image-frame { border-radius: 1.25rem; overflow: hidden; background: #f0eee8; box-shadow: 0 22px 60px rgba(20,27,23,0.08); }
.contact-image-frame img { filter: saturate(0.92) contrast(0.98); transform: scale(1.01); }
@media (max-width: 640px) {
  .home-hero-title { max-width: 22rem; margin-left: auto; margin-right: auto; }
  .home-hero-subtitle { max-width: 20rem; line-height: 1.65; }
  .contact-line { grid-template-columns: 1fr; gap: 0.35rem; padding-bottom: 1.15rem; }
}
