/* Shared reading scale. Layout styles live in the lower-priority layout layer. */
:root {
  --text-body: 1rem;
  --text-card: .9375rem;
  --text-secondary: .875rem;
  --text-caption: .8125rem;
  --text-label: .75rem;
  --text-nav: .8125rem;
  --leading-body: 1.65;
  --leading-ui: 1.5;
}
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { font-size: var(--text-body); line-height: var(--leading-body); }
p { font-size: var(--text-body); line-height: var(--leading-body); }
.eyebrow { font-size: var(--text-label); line-height: 1.5; letter-spacing: .12em; }
.hero .eyebrow { font-size: var(--text-label); }
.hero-intro { font-size: 1.125rem; line-height: 1.6; }
.room-hero-intro { font-size: var(--text-body); line-height: 1.6; }
.room-tagline { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.45; }
.button { font-size: var(--text-secondary); line-height: 1.45; min-height: 48px; gap: 14px; }
.text-link { font-size: var(--text-secondary); line-height: var(--leading-ui); min-height: 40px; }
.header { height: 86px; gap: 20px; }
.header nav { gap: 17px; }
.header nav a { font-size: var(--text-nav); line-height: 1.4; }
.header .button { font-size: var(--text-caption); min-height: 44px; padding: 11px 16px; gap: 10px; }
.header .novotel-logo { font-size: 24px; }
.header .novotel-logo>span, .novotel-logo>span { font-size: 8px; }
#mobile-menu>.eyebrow { font-size: var(--text-label); }
#mobile-menu .menu-bottom>a:not(.button) { font-size: var(--text-body); }
.room-breadcrumb { font-size: var(--text-caption); line-height: 1.6; }
.room-breadcrumb a { padding: 4px 0; }
/* Cards and features share one scale, regardless of route or screen size. */
.card-body p, .stay-description, .landmark-card p, .experience-card p,
.event-space-card p, .event-service-card p, .greem-card p, .pool-card p {
  font-size: var(--text-card); line-height: 1.6; max-width: none;
}
.stay-subtitle, .related-subtitle { font-size: var(--text-secondary); line-height: 1.55; }
.room-meta>span, .bedding, .stay-meta>span, .related-body li {
  font-size: var(--text-secondary); line-height: 1.55;
}
.stay-body h3, .event-service-card h3 { font-size: 1.25rem; line-height: 1.3; }
.greem-card h3, .pool-card h3, .event-space-card h3, .landmark-card h3,
.experience-card h3 { font-size: 1.625rem; line-height: 1.12; }
.stay-actions { flex-direction: column; }
.stay-actions .button { white-space: normal; }
.benefits p { font-size: var(--text-secondary); line-height: 1.5; }
.benefits strong { font-size: var(--text-secondary); line-height: 1.5; font-weight: 600; }
.benefits span { line-height: 1.5; }
.benefits>div { min-width: 0; gap: 14px; }
.room-booking-card strong { font-size: var(--text-body); line-height: 1.5; }
.room-booking-card span, .room-booking-card>p, .room-equipment-grid p,
.comfort-grid p, .configuration-grid p, .configuration-layout aside p,
.location-copy address, .contact-access-copy address { font-size: var(--text-secondary); line-height: 1.6; }
.room-equipment-grid>div { min-height: 145px; padding: 20px 10px; }
.comfort-grid>div { min-height: 145px; }
.room-booking-card li { gap: 20px; }
.room-booking-card ul { gap: 27px; }
.room-booking-card>p { font-size: var(--text-caption); }
.configuration-grid h3, .contact-transport h3, .city-plan-list h3 { font-size: var(--text-body); line-height: 1.4; }
.configuration-layout aside { padding: 22px; }
.event-heading h2 { font-size: var(--text-secondary); line-height: 1.5; }
.cuisine-seal h3 { font-size: 1.375rem; line-height: 1.2; }
.cuisine-seal p { font-size: var(--text-secondary); line-height: 1.5; }
.coordinate h2 { font-size: 1.125rem; line-height: 1.4; }
.coordinate p, .contact-transport p { font-size: var(--text-secondary); line-height: 1.55; }
.coordinate span { font-size: var(--text-caption); line-height: 1.55; }
.contact-map-link, .map-open { font-size: var(--text-caption); line-height: 1.5; }
.project-phone { font-size: var(--text-body); }
.contact-fields label, .project-form-grid label { font-size: var(--text-secondary); line-height: 1.5; }
.contact-fields input, .contact-fields select, .contact-fields textarea,
.project-form-grid input, .project-form-grid select, .project-form-grid textarea {
  font-size: var(--text-body); line-height: 1.5; min-height: 48px; padding: 11px 13px;
}
.contact-fields textarea, .project-form-grid textarea { min-height: 140px; }
.form-note, .contact-form-note { font-size: var(--text-caption); line-height: 1.65; }
.contact-fields, .project-form-grid { gap: 18px; }
/* Lightboxes, forms and confirmation panels use the same reading sizes. */
.dialog-copy p, .event-modal-copy p, .quote-preview>p, .contact-review>p,
.city-plan-content>p, .city-plan-list p, .wellness-gallery-copy p {
  font-size: var(--text-body); line-height: 1.65;
}
.quote-details, .contact-review pre { font-size: var(--text-secondary); line-height: 1.7; }
.quote-preview .quote-status, .contact-review .contact-draft-status,
.greem-modal-note, .wellness-gallery-note, .room-photo-caption {
  font-size: var(--text-secondary); line-height: 1.6;
}
.room-photo-count, .room-lightbox-count, .slide-count { font-size: var(--text-caption); line-height: 1.5; }
.gallery-tag { font-size: var(--text-secondary); line-height: 1.45; white-space: normal; }
.gallery-tag small { font-size: var(--text-caption); line-height: 1.5; }
.suite-label { font-size: var(--text-label); line-height: 1.4; }
footer { padding-top: 42px; }
.footer-main { grid-template-columns: 1.05fr 1.25fr 1.7fr 1fr; gap: 28px; padding-bottom: 34px; }
.footer-main>nav, .footer-main address, .footer-note, .footer-contact { font-size: var(--text-secondary); line-height: 1.65; }
.footer-main>nav { gap: 9px 24px; }
.footer-main address { gap: 14px; }
.footer-contact { gap: 14px; }
.footer-bottom, .footer-bottom button { font-size: var(--text-caption); line-height: 1.6; }
.footer-bottom { flex-wrap: wrap; gap: 14px 20px; }
.footer-bottom a, .footer-bottom button { padding: 6px 0; }
.footer-note { margin-top: 20px; }
@media (max-width: 1399px) and (min-width: 1340px) {
  .header { gap: 16px; padding-left: 30px; padding-right: 30px; }
  .header nav { gap: 13px; }
  .header nav a { font-size: .78125rem; }
  .header .novotel-logo { font-size: 22px; }
}
/* Use the menu before desktop links would need unreadably small type. */
@media (max-width: 1339px) {
  .header { height: 76px; padding: 0 24px; }
  .header nav, .header>.button, .header>.all { display: none; }
  .header .novotel-logo { font-size: 24px; }
  .menu-toggle { display:flex; flex-direction:column; gap:7px; justify-content:center; align-items:center; width:44px; height:44px; margin-left:auto; border:1px solid var(--line); border-radius:50%; }
  .menu-toggle span { display:block; background:var(--ink); height:1px; width:21px; }
  #mobile-menu[open] { display:flex; flex-direction:column; position:fixed; inset:0; margin:0 0 0 auto; width:min(480px,100%); height:100dvh; max-height:100dvh; max-width:100%; border-radius:0; padding:27px; }
  .menu-top { margin-bottom:32px; }
  #mobile-menu nav { display:flex; flex-direction:column; gap:0; }
  #mobile-menu nav a { font-family:var(--serif); font-size:30px; line-height:1.3; padding:12px 0; border-bottom:1px solid var(--line); }
  #mobile-menu .menu-bottom { margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:15px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main>nav { border-left:0; padding-left:0; }
  .benefits { row-gap:28px; }
  .room-booking-card { padding:25px; }
  .event-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .event-service-card>img { height:185px; }
  .contact-coordinates { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .coordinate { border:0; padding:0; }
}
@media (min-width: 641px) and (max-width: 1339px) {
  .benefits { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .benefits>div { padding:0 14px; border:0; }
  .room-benefits, .destination-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .event-project, .contact-write { grid-template-columns:1fr 1fr; gap:32px; }
  .event-project { grid-template-columns:1fr; }
  .event-space-grid { grid-template-columns:1fr 1fr; }
  .event-space-card:last-child { grid-column:1/-1; }
}
@media (max-width: 960px) {
  .project-form-grid .message-label { grid-column:auto; grid-row:auto; }
  .project-form-grid .button { grid-column:1/-1; }
}
@media (max-width: 640px) {
  .hero-intro { font-size:var(--text-body); line-height:1.6; }
  .hero-actions { flex-wrap:wrap; gap:12px; }
  .hero-actions .button { flex:1 1 auto; }
  .hero-content { padding-bottom:100px; }
  .hero, .rooms-hero, .events-hero, .wellness-hero, .greem-hero { height:auto; min-height:620px; }
  .destination-hero, .contact-hero { height:auto; min-height:560px; }
  .hero-content .button { min-height:48px; }
  .room-tagline { font-size:1.125rem; }
  .room-hero-intro { font-size:var(--text-body); }
  .room-breadcrumb { font-size:var(--text-caption); }
  .room-title-area { padding-top:25px; padding-bottom:30px; }
  .room-photo-previews { padding-top:15px; padding-bottom:15px; }
  .room-showcase>.room-photo-controls { bottom:228px; }
  .room-photo-count { bottom:98px; }
  .benefits { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; padding:28px 22px; }
  .benefits>div { gap:12px; align-items:flex-start; }
  .benefits svg { width:30px; height:30px; margin-top:3px; }
  .benefits p, .benefits strong { font-size:var(--text-secondary); }
  .destination-benefits span { max-width:none; }
  .room-benefits span br { display:none; }
  .landmark-grid, .event-service-grid { grid-template-columns:1fr; gap:22px; }
  .landmark-card>img { height:210px; }
  .event-service-card>img { height:190px; }
  .event-service-card .card-body, .landmark-card .card-body { padding:21px; }
  .stay-actions, .stays-second .stay-actions, .stays-second .suite-card .stay-actions { flex-direction:column; gap:10px; }
  .room-meta, .stay-meta { flex-wrap:wrap; row-gap:10px; }
  .related-body h3 { font-size:1.75rem; line-height:1.15; }
  .room-booking-card { padding:25px; }
  .room-equipment-grid>div { min-height:132px; }
  .comfort-grid>div { min-height:130px; }
  .configuration-grid p br { display:none; }
  .contact-coordinates { gap:27px 20px; }
  .coordinate { gap:12px; }
  .coordinate>svg { width:27px; height:27px; }
  .coordinate h2 { font-size:var(--text-body); }
  .coordinate p { font-size:var(--text-secondary); overflow-wrap:normal; }
  .coordinate span { font-size:var(--text-caption); }
  .contact-write, .contact-access { display:flex; flex-direction:column; gap:28px; }
  .contact-write { padding-top:18px; }
  .contact-welcome { min-height:0; }
  .project-form-grid { grid-template-columns:1fr; }
  .contact-fields, .project-form-grid { gap:20px; }
  .form-note, .contact-form-note { font-size:var(--text-caption); }
  .quote-actions, .contact-review-actions, .city-plan-actions { gap:12px; }
  .room-detail-banner p br { display:none; }
  .footer-main { grid-template-columns:1fr; gap:30px; }
  .footer-main>nav { font-size:var(--text-secondary); border:0; border-top:1px solid var(--line); padding-top:23px; }
  .footer-bottom>span { font-size:var(--text-caption); }
  footer { padding-bottom:calc(115px + env(safe-area-inset-bottom)); }
  .mobile-dock>a:not(.button) { font-size:var(--text-caption); line-height:1.4; min-width:55px; }
  .mobile-dock .button { font-size:1rem; min-width:135px; min-height:48px; }
  .mobile-dock { padding-left:16px; padding-right:16px; gap:14px; }
  .mobile-dock svg { width:24px; height:24px; }
  .room-lightbox-heading .eyebrow { font-size:var(--text-label); }
  .room-photo-caption, .room-lightbox-count { font-size:var(--text-secondary); }
}
@media (max-width: 360px) {
  .hero .hero-content { padding-left:22px; padding-right:22px; }
  .benefits { gap:26px 15px; }
  .benefits>div { gap:10px; }
  .benefits svg { width:25px; height:25px; }
  .coordinate { gap:10px; }
  .coordinate>svg { width:23px; height:23px; }
  .contact-coordinates { grid-template-columns:1fr; gap:24px; }
  .coordinate-route { flex-wrap:wrap; }
  .mobile-dock { padding-left:12px; padding-right:12px; gap:9px; }
  .mobile-dock>a:not(.button) { min-width:53px; font-size:var(--text-label); }
  .mobile-dock .button { min-width:124px; padding-left:13px; padding-right:13px; }
  .room-showcase>.room-photo-controls { bottom:208px; }
  #mobile-menu[open] { padding:23px; }
  #mobile-menu nav a { font-size:28px; padding:11px 0; }
}
/* Let larger copy determine the section height instead of clipping the last line. */
@media (min-width:641px) {
  .welcome { height:auto; min-height:440px; }
  .rooms-hero, .events-hero, .wellness-hero, .greem-hero { height:auto; min-height:560px; }
  .contact-hero, .destination-hero { height:auto; min-height:490px; }
}
#mobile-menu[open] { overflow-y:auto; }
#mobile-menu .menu-top, #mobile-menu>.eyebrow, #mobile-menu nav, #mobile-menu .menu-bottom { flex-shrink:0; }
@media (min-width:641px) and (max-width:1339px) {
  .mobile-dock { display:flex; position:fixed; bottom:0; left:0; right:0; background:#fff; align-items:center; padding:12px 22px calc(12px + env(safe-area-inset-bottom)); z-index:29; gap:22px; border-top:1px solid var(--line); box-shadow:0 -4px 20px rgb(var(--brand-shadow-rgb) / 0.0314); }
  .mobile-dock>a:not(.button) { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:var(--text-caption); line-height:1.4; min-width:60px; }
  .mobile-dock .button { margin-left:auto; min-width:170px; font-size:var(--text-body); min-height:48px; }
  footer { padding-bottom:calc(115px + env(safe-area-inset-bottom)); }
}
.room-card h3 { font-size:1.25rem; line-height:1.3; }
@media (min-width:641px) and (max-width:960px) {
  .contact-write, .contact-access { display:flex; flex-direction:column; gap:30px; }
  .contact-welcome { height:320px; min-height:0; }
  .contact-map { height:350px; min-height:0; }
}
.cuisine-seal { width:240px; height:240px; padding:26px; }
@media (max-width:640px) {
  .cuisine-picture { height:auto; }
  .cuisine-picture>img { height:280px; }
  .cuisine-seal { position:static; width:100%; height:auto; min-height:0; margin-top:16px; padding:24px; border-radius:12px; }
  .cuisine-seal h3 { font-size:1.5rem; }
}