/* Complete Sandringham Court Hotel site stylesheet.
   Includes original site rules and homepage hero/slider fixes.
   Replace public_html/css2025/style-new.css with this file. */

/* Sandringham Court Hotel — complete shared stylesheet, rebuilt 18 October 2026.
   Includes base design, all-inclusive layouts, homepage, and room slider styles.
   Upload as /css2025/style-new.css. */

/* =========================================
   Design Tokens & Base
   ========================================= */

:root {
  --font-body: "Open Sans", Arial, sans-serif;
  --font-heading: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --color-bg: #ffffff;
  --color-bg-soft: #f5f5f5;
  --color-text: #222222;
  --color-muted: #666666;

  --color-brand: #ff6600;
  --color-brand-dark: #e05400;
  --color-accent: #ff7b00;

  --color-border: #dddddd;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 18px;

  --shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.1);
  --shadow-strong: 0 18px 36px rgba(0, 0, 0, 0.18);

  --container-width: 1100px;
  --gutter: 1.5rem;
}

/* Reset-ish */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: #fff url("../images/bg1.jpg");
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-brand);
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
}

/* =========================================
   Typography
   ========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #333333;
  text-transform: uppercase;
  margin: 0 0 0.75em;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 0.95rem; }

p,
ul,
ol {
  margin: 0 0 1.4em;
}

/* Utility text classes */

.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-muted  { color: var(--color-muted); }
.text-white  { color: #ffffff; }
.text-brand  { color: var(--color-brand); }

.fs-small  { font-size: 0.875rem; }
.fs-normal { font-size: 1rem; }
.fs-large  { font-size: 1.125rem; }
.fs-xl     { font-size: 1.25rem; }
.fs-xxl    { font-size: 1.5rem; }

.fw-regular { font-weight: 400; }
.fw-bold    { font-weight: 700; }

/* For reusing old small text naming */
.bodysmaller {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-muted);
}

/* =========================================
   Layout
   ========================================= */

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: 3rem 0;
}

.section--soft {
  background: var(--color-bg-soft);
}

/* Simple grid utilities */

.grid {
  display: grid;
  gap: 1.75rem;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Header & Navigation
   ========================================= */

.site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem var(--gutter);
}

.site-logo {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #333;
  text-decoration: none;
  font-size: 1.05rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-nav a {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-nav a.book-now-link {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
  color: #ffffff;
  box-shadow: var(--shadow-soft);

}

.site-nav a.book-now-link:hover {
  text-decoration: none;
  filter: brightness(1.05);
}

/* Mobile nav */

.nav-toggle {
  display: none;
  border: none;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .site-header-inner {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }

  .site-nav {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0.75rem;
    display: none;
  }

  .site-nav.is-open {
    display: flex;
  }
}

/* =========================================
   Hero
   ========================================= */

.hero {
  position: relative;
  color: #ffffff;
  padding: 3.5rem 0 3rem;
  background: #ff6600; /* or any colour you like */
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-heading {
  font-size: 2.3rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.hero-subheading {
  font-size: 1.1rem;
  max-width: 620px;
  margin-bottom: 1.5rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.hero-phone {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.hero-contact-note {
  font-size: 0.95rem;
  max-width: 520px;
}

.hero-contact-link {
  color: #ffffff;
  text-decoration: underline;
}

/* Small screens hero */
@media (max-width: 600px) {
  .hero {
    padding: 2.5rem 0 2.25rem;
  }

  .hero-heading {
    font-size: 1.9rem;
  }

  .hero-subheading {
    font-size: 1rem;
  }
}
.hero-content {
  max-width: none;
  width: 100%;
}

.hero-media {
  margin: 1.5rem 0 0;
  max-width: 1220px;
  width: 100%;
}

.hero-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: none;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

/* Optional: slightly reduce image width on very large screens so it doesn't feel oversized */
@media (min-width: 1100px) {
  .hero-media {
    max-width: 920px;
  }
}

/* Slightly smaller hero heading */
.hero-heading {
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

/* =========================================
   Buttons
   ========================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn-primary {
  background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
  color: #ffffff;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn-outline {
  background: #000000;
  border: 1px solid #ffffff;
  color: #ffffff;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* For legacy naming inside form actions */
.enquiry-form .btn-primary {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(90deg, #ff7b00, #ff3b00);
  box-shadow: 0 14px 28px rgba(255, 80, 0, 0.28);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
}

.enquiry-form .btn-primary:hover {
  box-shadow: 0 18px 36px rgba(255, 80, 0, 0.36);
  transform: translateY(-1px);
}

/* =========================================
   Feature Cards
   ========================================= */

/* FORCE 3 images per row */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-top: 1.5rem;
}

/* Make it responsive on mobile */
@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.feature-card img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}

.feature-card-body {
  padding: 1rem 1.1rem 1.3rem;
  text-align: center;
}

.feature-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--color-brand);
}

/* =========================================
   Promo heading tweak
   ========================================= */

.promo-heading {
  margin-top: 1.5rem;
}

/* =========================================
   Enquiry Form (modernised)
   ========================================= */

.section-enquiry {
  padding: 3rem 0 4rem;
  background: var(--color-bg-soft);
}

.enquiry-form {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 28px 40px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Header */
.enquiry-form .form-header {
  text-align: center;
}

.enquiry-form .form-header h3 {
  display: block;
  background: transparent;
  color: #222222;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  text-align: center;
}

.enquiry-form .form-header .bodysmaller {
  max-width: 560px;
  margin: 0 auto;
  color: #666666;
  font-size: 1rem;
}

/* Each field group */
.enquiry-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Labels */
.enquiry-form label {
  font-weight: 700;
  color: #111;
  font-size: 1rem;
}

/* Inputs and textarea */
.enquiry-form .form-control {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 1.05rem;
  font-family: var(--font-body);
  background: #fff;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.enquiry-form .form-control:focus {
  border-color: #ff7b00;
  box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.18);
  outline: none;
}

/* Two-column row (email + phone etc.) */
.enquiry-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Validation message (if you hook up JS later) */
.enquiry-form #validation {
  font-weight: 600;
  color: #c00;
  text-align: center;
  margin-bottom: 4px;
}

/* Button area */
.enquiry-form .actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .enquiry-form {
    padding: 24px 18px 32px;
  }

  .enquiry-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Footer
   ========================================= */

.site-footer {
  background: #222222;
  color: #f0f0f0;
  padding: 3rem 0 1.5rem;
  margin-top: 3rem;
}

.site-footer a {
  color: #ffffff;
}

.footer-grid {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: var(--color-brand);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 0.35rem;
}

.footer-bottom {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: #bbbbbb;
  border-top: 1px solid #444;
  padding-top: 1rem;
}

/* Social icons row */
.footer-social {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

/* =========================================
   Misc legacy-compat bits (if needed)
   ========================================= */

/* If you have generic .image wrappers on other pages */
.image {
  display: inline-block;
}

/* Clearfix helper for any old floats (just in case) */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* FORCE Get In Touch buttons side-by-side */
.get-in-touch-buttons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 30px auto !important;
  flex-wrap: wrap !important;
}

.get-in-touch-buttons .btn,
.get-in-touch-buttons .btn-call,
.get-in-touch-buttons a {
  display: inline-flex !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  text-align: center !important;
}

/* Floating contact icons – base layout */
.floating-contact {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

/* Each round button */
.floating-contact .fc-item {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Icon image inside the circle */
.floating-contact .fc-item img {
  width: 60%;        /* icon never touches the edge */
  height: 60%;
  display: block;
}

/* Hover effect (desktop only really) */
.floating-contact .fc-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .floating-contact {
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }

  .floating-contact .fc-item {
    width: 48px;
    height: 48px;
  }
}
/* PLAN YOUR STAY – bigger cards */
.section--soft .container {
  max-width: 1320px;
}

.feature-card img {
  height: 260px;
  object-fit: cover;
}

.feature-card-body {
  padding: 1.4rem 1.4rem 1.8rem;
}
/* Hero phone number - white text */
.hero .btn-call,
.hero .hero-phone,
.hero a[href^="tel:"] {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Optional hover state */
.hero .btn-call:hover,
.hero a[href^="tel:"]:hover {
  background: rgba(255, 255, 255, 0.28);
}
/* =========================================
   ALL INCLUSIVE PROMO BANNER
   ========================================= */

.all-inclusive-banner {
  background: linear-gradient(90deg, #ff6600, #ff3b00);
  padding: 28px 20px;
  margin: 0 auto 36px;
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.18);
  max-width: 1100px;
}

.ai-banner-inner {
  text-decoration: none;
  color: #fff;
  display: block;
  text-align: center;
}

.ai-banner-text h2 {
  margin: 0 0 8px;
  font-size: 1.8rem;
  color: #fff;
}

.ai-banner-text p {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: #fff;
}

.ai-cta {
  display: inline-block;
  background: #fff;
  color: #ff6600;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
}

.ai-banner-inner:hover .ai-cta {
  background: #ffe6d5;
}
/* =========================================
   LEGENDS BAR FEATURE GALLERY (2x2) – NO CROP (clean)
   ========================================= */

.bar-feature-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
}

.bar-feature-item{
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}

/* Key change: no fixed height, no contain-box.
   Let the image render at its natural ratio. */
.bar-feature-item img{
  width: 100%;
  height: auto;          /* IMPORTANT: removes the big empty space */
  display: block;
}

/* Pool image: give it a touch more presence without shrinking it */
.bar-feature-item.pool-image img{
  width: 100%;
  height: auto;
}

/* Subtle, tasteful hover */
.bar-feature-item{
  transition: transform .18s ease, box-shadow .18s ease;
}
.bar-feature-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.14);
}

/* Mobile */
@media (max-width: 700px){
  .bar-feature-grid{
    grid-template-columns: 1fr;
  }
}
/* Jukebox visual balance */
.bar-feature-item.jukebox-image img{
  transform: scale(1.12);
  transform-origin: center;
}

/* =========================================
   JUKEBOX CAPTION (FORCED DISPLAY FIX)
   ========================================= */

.bar-feature-item.jukebox-image {
  background: #000;
  display: flex;
  flex-direction: column;
}

/* Make sure image behaves normally */
.bar-feature-item.jukebox-image img{
  width: 100%;
  height: auto;
  display: block;
}

/* FORCE caption visibility */
.bar-feature-item.jukebox-image figcaption{
  display: block !important;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 14px 12px;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  font-family: var(--font-heading);
}

.hero-media {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.hero-media a {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}
/* =========================================
   HOME HERO - wider layout + curved image without border
   ========================================= */

/* Make the hero area wider across the page */
.hero .container {
  max-width: 1380px;
}

/* Stop the text/image column being restricted to 820px */
.hero-content {
  max-width: none;
  width: 100%;
}

.hero-heading {
  max-width: 980px !important;
  font-size: clamp(2rem, 3vw, 2.6rem) !important;
  line-height: 1.15 !important;
}

.hero-subheading,
.hero-actions {
  max-width: 760px !important;
}

/* Make the main hero image wider */
.hero-media {
  width: 100%;
  max-width: 1180px;
  margin: 1.5rem 0 0;
  padding: 0;
  line-height: 0;
}

/* Remove spacing/line-height issues from the linked image */
.hero-media a {
  display: block;
  line-height: 0;
}

/* Keep curved corners, remove the straight border */
.hero-media img {
  width: 100%;
  height: auto;
  display: block;

  border-radius: 18px !important;
  border: none !important;

  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

/* On very wide screens, give the image more presence */
@media (min-width: 1200px) {
  .hero-media {
    max-width: 1220px;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero .container {
    max-width: 100%;
  }

  .hero-media {
    max-width: none;
    margin-top: 1rem;
  }

  .hero-media img {
    border-radius: 14px !important;
  }
}
/* =========================================
   HEADER + HERO ALIGNMENT - less centred
   ========================================= */

/* Make the top navigation spread wider */
.site-header .container {
  max-width: 1380px;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Make the hero content start further left on desktop */
.hero .container {
  max-width: 1380px;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Keep the hero text aligned with the image, not visually centred */
.hero-heading,
.hero-subheading,
.hero-actions {
  margin-left: 0;
  margin-right: auto;
}

/* Make the image align with the text rather than sitting centred */
.hero-media {
  margin-left: 0;
  margin-right: 0;
}

/* On very large screens, spread the whole hero further across the page */
@media (min-width: 1500px) {
  .site-header .container,
  .hero .container {
    max-width: 1480px;
  }
}

/* On smaller screens, keep sensible padding */
@media (max-width: 768px) {
  .site-header .container,
  .hero .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.site-header .container,
.hero .container {
  max-width: 1380px;
  padding-left: 2rem;
  padding-right: 2rem;
}
/* Keep hero H1 on one line on desktop */
.hero-heading {
  max-width: 1100px !important;
  font-size: clamp(2rem, 2.7vw, 2.5rem) !important;
  line-height: 1.15 !important;
}

.hero-subheading,
.hero-actions {
  max-width: 760px !important;
}

@media (max-width: 768px) {
  .hero-heading {
    max-width: 100% !important;
    font-size: 1.9rem !important;
  }
}
/* Hero image: curved corners, no orange outline, keep shadow */
.hero-media {
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22) !important;
  background: transparent !important;
}

.hero-media a {
  display: block !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.hero-media img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Hero enquiry button */
.hero .btn-enquire {
  background: #ffffff;
  color: var(--color-brand) !important;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-soft);
}

.hero .btn-enquire:hover {
  background: #fff4ec;
  text-decoration: none;
  transform: translateY(-1px);
}
#enquiry-form {
  scroll-margin-top: 90px;
}
/* Larger edge-to-edge hero image on mobile */
@media (max-width: 768px) {
  .hero-media {
    width: calc(100% + 3rem) !important;
    max-width: none !important;
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    margin-top: 1.25rem !important;
    border-radius: 0 !important;
  }

  .hero-media a,
  .hero-media img {
    border-radius: 0 !important;
  }
}
/* Mobile: make hero image full screen width */
@media (max-width: 768px) {
  .hero-media {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 1.25rem !important;

    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .hero-media a {
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }

  .hero-media img {
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;

    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}
/* =========================================
   GUEST GALLERY PAGE
   ========================================= */

/* Hero / intro area */
.guest-gallery-hero {
  position: relative;
  padding: 3.75rem 0 3.25rem;
  background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
  color: #ffffff;
  overflow: hidden;
}

.guest-gallery-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.guest-gallery-hero .container {
  position: relative;
  z-index: 1;
}

.guest-gallery-hero h1 {
  color: #ffffff;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.guest-gallery-hero p {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.guest-gallery-permission-note {
  max-width: 760px;
  margin: 1rem auto 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
}

/* Hero buttons */
.guest-gallery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.guest-gallery-call {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: var(--shadow-soft);
}

.guest-gallery-call:hover {
  background: rgba(255, 255, 255, 0.28);
  text-decoration: none;
  transform: translateY(-1px);
}

.guest-gallery-enquire {
  background: #ffffff;
  color: var(--color-brand) !important;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-soft);
}

.guest-gallery-enquire:hover {
  background: #fff4ec;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Main gallery container */
.guest-gallery-container {
  max-width: 1320px;
}

.guest-gallery-intro {
  max-width: 820px;
  margin: 0 auto 2rem;
}

.guest-gallery-intro h2 {
  margin-bottom: 0.5rem;
}

.guest-gallery-intro p {
  color: var(--color-muted);
}

/* Masonry-style mixed-size image gallery */
.guest-gallery-grid {
  columns: 3 280px;
  column-gap: 1.5rem;
  margin-top: 1.5rem;
}

.guest-gallery-item {
  break-inside: avoid;
  margin: 0 0 1.5rem;
  padding: 0;
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.guest-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

.guest-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Optional captions, if you later decide to use them */
.guest-gallery-item figcaption {
  padding: 0.85rem 1rem 1rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-brand);
  background: #ffffff;
}

/* Bottom call-to-action */
.guest-gallery-bottom-cta {
  max-width: 860px;
  margin: 3rem auto 0;
  padding: 2rem;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.guest-gallery-bottom-cta h2 {
  margin-bottom: 0.5rem;
}

.guest-gallery-bottom-cta p {
  color: var(--color-muted);
}

.guest-gallery-actions-bottom {
  margin-top: 1.25rem;
}

/* Tablet */
@media (max-width: 900px) {
  .guest-gallery-grid {
    columns: 2 260px;
  }

  .guest-gallery-hero {
    padding: 3rem 0 2.75rem;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .guest-gallery-hero {
    padding: 2.5rem 0 2.25rem;
  }

  .guest-gallery-hero h1 {
    font-size: 1.9rem;
  }

  .guest-gallery-grid {
    columns: 1;
    column-gap: 0;
  }

  .guest-gallery-item {
    margin-bottom: 1.25rem;
  }

  .guest-gallery-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .guest-gallery-actions .btn {
    width: 100%;
  }

  .guest-gallery-bottom-cta {
    padding: 1.5rem 1.25rem;
  }
}
/* =========================================
   HOTEL PHOTO SLIDESHOW
   ========================================= */

.sch-gallery-header {
  max-width: 760px;
  margin: 0 auto 1.25rem;
}

.sch-gallery-header h2 {
  margin-bottom: 0.35rem;
}

.sch-gallery-header p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.sch-gallery {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.sch-gallery-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #e9ecef;
  border-radius: 18px;
  box-shadow: var(--shadow-strong);
  touch-action: pan-y;
}

.sch-gallery-track {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  transition: transform 0.35s ease;
  will-change: transform;
}

.sch-gallery-slide {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sch-gallery-slide img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #e9ecef;
}

.sch-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  width: 46px;
  height: 46px;
  min-width: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(34, 34, 34, 0.72);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.sch-gallery-prev {
  left: 14px;
}

.sch-gallery-next {
  right: 14px;
}

.sch-gallery-arrow:hover,
.sch-gallery-arrow:focus-visible {
  color: #ffffff;
  background: var(--color-brand);
}

.sch-gallery-counter {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 5;
  padding: 6px 10px;
  color: #ffffff;
  background: rgba(34, 34, 34, 0.76);
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1;
  font-weight: 700;
}

.sch-gallery-dots {
  display: flex;
  min-height: 24px;
  margin-top: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}

.sch-gallery-dot {
  width: 9px;
  height: 9px;
  min-width: 0;
  padding: 0;
  background: #c3c7cc;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

.sch-gallery-dot.is-active {
  width: 26px;
  background: var(--color-brand);
  border-radius: 999px;
}

@media (max-width: 768px) {
  .sch-gallery-header {
    margin-bottom: 0.9rem;
  }

  .sch-gallery-header h2 {
    font-size: 1.5rem;
  }

  .sch-gallery-header p {
    font-size: 0.85rem;
  }

  .sch-gallery-viewport {
    border-radius: 12px;
  }

  .sch-gallery-arrow {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }

  .sch-gallery-prev {
    left: 8px;
  }

  .sch-gallery-next {
    right: 8px;
  }

  .sch-gallery-counter {
    right: 8px;
    bottom: 8px;
    padding: 4px 8px;
    font-size: 0.72rem;
  }

  .sch-gallery-dots {
    margin-top: 10px;
    gap: 6px;
  }

  .sch-gallery-dot {
    width: 8px;
    height: 8px;
  }

  .sch-gallery-dot.is-active {
    width: 22px;
  }
}

/* =========================================
   ALL INCLUSIVE PAGE — 2026 LAYOUT
   ========================================= */

.ai-page {
  background: #ffffff;
}

.ai-hero {
  padding: 3.1rem 0 2.8rem;
  color: #ffffff;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(115deg, #ff6600 0%, #ff3b00 100%);
}

.ai-hero-inner {
  max-width: 920px;
  text-align: center;
}

.ai-hero .ai-kicker {
  color: rgba(255, 255, 255, 0.9);
}

.ai-hero h1 {
  margin: 0 0 0.75rem;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
}

.ai-hero p {
  max-width: 780px;
  margin: 0 auto;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.96);
}

.ai-main {
  padding: 2.75rem 0 4rem;
  background:
    linear-gradient(180deg, #fffaf6 0, #ffffff 240px);
}

.ai-container {
  max-width: 1020px;
}

.ai-kicker {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--color-brand);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ai-section-heading {
  max-width: 760px;
  margin: 0 auto 1.35rem;
  text-align: center;
}

.ai-section-heading h2 {
  margin-bottom: 0.45rem;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  line-height: 1.2;
}

.ai-section-heading p {
  margin: 0;
  color: var(--color-muted);
}

.ai-gallery-section {
  margin-bottom: 2.5rem;
}

.ai-gallery-section .sch-gallery {
  max-width: 920px;
}

.ai-gallery-section .sch-gallery-viewport {
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 18px 42px rgba(25, 25, 25, 0.16);
}

.ai-card {
  max-width: 820px;
  margin: 0 auto 1.5rem;
  padding: 2rem;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

.ai-section-heading-compact {
  margin-bottom: 1.45rem;
}

.ai-timeline {
  display: grid;
  gap: 0.85rem;
}

.ai-day {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  padding: 1rem;
  background: #fff8f3;
  border: 1px solid #ffe0ca;
  border-radius: 14px;
}

.ai-day-badge {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  color: #ffffff;
  background: linear-gradient(135deg, #ff6600, #ff3b00);
  border-radius: 11px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-day-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ai-day-content p {
  margin: 0.22rem 0;
  line-height: 1.45;
}

.ai-card-note {
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  color: #555555;
  border-top: 1px solid #ececec;
  text-align: center;
  font-size: 0.94rem;
}

.ai-drinks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.ai-drinks-group {
  padding: 1rem 1.05rem;
  background: #f8fafb;
  border: 1px solid #e6ebee;
  border-radius: 13px;
}

.ai-drinks-group h3 {
  margin: 0 0 0.35rem;
  color: var(--color-brand);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.ai-drinks-group p {
  margin: 0;
  color: #444444;
  font-size: 0.93rem;
  line-height: 1.5;
}

.ai-drinks-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-drinks-group li {
  position: relative;
  margin: 0.38rem 0 0;
  padding-left: 1.15rem;
  color: #344258;
  font-size: 0.93rem;
  line-height: 1.45;
}

.ai-drinks-group li:first-child {
  margin-top: 0;
}

.ai-drinks-group li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-brand);
  font-weight: 900;
}

.ai-drinks-premium {
  margin-top: 1rem;
  padding: 1rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 13px;
}

.ai-drinks-premium-title {
  display: flex;
  margin-bottom: 0.75rem;
  align-items: center;
  gap: 0.5rem;
  color: #9a3412;
  font-size: 1rem;
  line-height: 1.25;
}

.ai-drinks-premium-title > span {
  color: var(--color-brand);
}

.ai-drinks-premium-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.ai-drinks-premium-grid > div {
  padding: 0.75rem 0.8rem;
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: 10px;
}

.ai-drinks-premium-grid strong,
.ai-drinks-premium-grid span {
  display: block;
}

.ai-drinks-premium-grid strong {
  color: #07152f;
  font-size: 0.86rem;
  line-height: 1.3;
}

.ai-drinks-premium-grid span {
  margin-top: 0.2rem;
  color: #9a3412;
  font-size: 0.8rem;
  line-height: 1.3;
  font-weight: 800;
}

.ai-drinks-highlight {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: #101827;
  border: 1px solid #101827;
  border-radius: 13px;
}

.ai-drinks-highlight > span {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
  color: #ffffff;
  background: var(--color-brand);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
}

.ai-drinks-highlight p,
.ai-drinks-highlight p strong {
  color: #ffffff;
}

.ai-drinks-highlight p {
  margin: 0;
  opacity: 1;
  font-size: 0.92rem;
  line-height: 1.5;
}

.ai-small-print {
  margin: 0.8rem 0 0;
  color: #737373;
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}

.ai-price-card {
  max-width: 760px;
  margin: 2.2rem auto 0;
  padding: 2.2rem 1.5rem;
  color: #ffffff;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 36%),
    linear-gradient(115deg, #242424, #111111);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.ai-price-label {
  margin: 0 0 0.45rem;
  color: #ffb47f;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ai-price {
  display: flex;
  margin: 0;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.ai-price-old {
  color: #bcbcbc;
  font-size: 1.1rem;
  text-decoration: line-through;
}

.ai-price strong {
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: clamp(2.7rem, 7vw, 4rem);
  line-height: 1;
}

.ai-price > span:last-child {
  color: #e7e7e7;
  font-size: 1rem;
  font-weight: 700;
}

.ai-price-detail {
  max-width: 580px;
  margin: 1rem auto 1.35rem;
  color: #e2e2e2;
  font-size: 0.96rem;
}

.ai-enquire-button {
  min-width: 240px;
  padding: 0.95rem 1.8rem;
  font-size: 1rem;
}

.ai-enquire-button:hover {
  color: #ffffff;
  text-decoration: none;
}

.ai-contact-note {
  margin: 1rem 0 0;
  color: #d3d3d3;
  font-size: 0.88rem;
}

.ai-contact-note a {
  color: #ffffff;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .ai-hero {
    padding: 2.4rem 0 2.2rem;
  }

  .ai-main {
    padding-top: 2rem;
  }

  .ai-card {
    padding: 1.4rem 1rem;
    border-radius: 16px;
  }

  .ai-day {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .ai-day-badge {
    min-height: auto;
  }

  .ai-drinks-grid {
    grid-template-columns: 1fr;
  }

  .ai-drinks-premium-grid {
    grid-template-columns: 1fr;
  }

  .ai-drinks-premium {
    padding: 0.85rem;
  }

  .ai-drinks-highlight {
    padding: 0.8rem 0.85rem;
  }

  .ai-price-card {
    padding: 1.8rem 1rem;
    border-radius: 18px;
  }

  .ai-enquire-button {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================
   SANDRINGHAM APARTMENT LANDING PAGE
   ========================================= */

.apartment-page {
  background: #ffffff;
}

.apartment-page main {
  overflow: hidden;
}

.apartment-container {
  max-width: 1120px;
}

.apartment-kicker {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--color-brand);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.apartment-hero {
  padding: 4rem 0 3.4rem;
  color: #ffffff;
  background:
    radial-gradient(circle at 92% 0, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(120deg, #ff6600 0%, #ff3b00 100%);
}

.apartment-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: 3rem;
  align-items: center;
  max-width: 1320px;
}

.apartment-hero-copy {
  max-width: 720px;
}

.apartment-hero .apartment-kicker {
  color: rgba(255, 255, 255, 0.88);
}

.apartment-hero h1 {
  max-width: 720px;
  margin: 0 0 1rem;
  color: #ffffff;
  font-size: clamp(2.25rem, 4vw, 3.65rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  text-transform: none;
}

.apartment-hero-lead {
  max-width: 690px;
  margin: 0 0 1.35rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1rem, 1.5vw, 1.17rem);
  line-height: 1.62;
}

.apartment-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.apartment-hero-points li {
  padding: 0.52rem 0.82rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
  font-weight: 800;
}

.apartment-price-card {
  max-width: 520px;
  margin: 0 0 1.35rem;
  padding: 1rem 1.15rem;
  color: #222222;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.apartment-price-card > span {
  display: block;
  margin-bottom: 0.15rem;
  color: #666666;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.apartment-price-card strong {
  display: block;
  color: #222222;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05;
}

.apartment-price-card strong small {
  color: #555555;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
}

.apartment-price-card p {
  margin: 0.45rem 0 0;
  color: #555555;
  font-size: 0.88rem;
  line-height: 1.45;
}

.apartment-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.apartment-primary-cta {
  background: #222222;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.apartment-primary-cta:hover {
  color: #ffffff;
  text-decoration: none;
}

.apartment-secondary-cta {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.apartment-secondary-cta:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  text-decoration: none;
}

.apartment-hero-note {
  margin: 0.85rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
}

.apartment-hero-image {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.28);
}

.apartment-hero-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.apartment-stats-section {
  padding: 1.5rem 0;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

.apartment-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.8rem;
  max-width: 1220px;
}

.apartment-stat {
  padding: 1rem 0.65rem;
  text-align: center;
  background: #fff8f3;
  border: 1px solid #ffe2cf;
  border-radius: 14px;
}

.apartment-stat strong,
.apartment-stat span {
  display: block;
}

.apartment-stat strong {
  margin-bottom: 0.25rem;
  color: #222222;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  line-height: 1.2;
}

.apartment-stat span {
  color: #666666;
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 700;
}

.apartment-gallery-section {
  padding: 4rem 0;
  background:
    linear-gradient(180deg, #fff8f3 0%, #ffffff 100%);
}

.apartment-section-heading {
  max-width: 780px;
  margin: 0 auto 1.7rem;
  text-align: center;
}

.apartment-section-heading h2 {
  margin: 0 0 0.55rem;
  color: #222222;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  line-height: 1.15;
  text-transform: none;
}

.apartment-section-heading p {
  margin: 0;
  color: #666666;
}

.apartment-gallery {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}

.apartment-gallery-viewport {
  overflow: hidden;
  background: #eceff1;
  border-radius: 22px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18);
  touch-action: pan-y;
}

.apartment-gallery-track {
  display: flex;
  width: 100%;
  transition: transform 0.35s ease;
  will-change: transform;
}

.apartment-gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  margin: 0;
}

.apartment-gallery-slide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.apartment-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  width: 48px;
  height: 48px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(34, 34, 34, 0.76);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  font-size: 25px;
  cursor: pointer;
  transform: translateY(-50%);
}

.apartment-gallery-arrow:hover,
.apartment-gallery-arrow:focus-visible {
  color: #ffffff;
  background: var(--color-brand);
}

.apartment-gallery-prev {
  left: 14px;
}

.apartment-gallery-next {
  right: 14px;
}

.apartment-gallery-counter {
  position: absolute;
  right: 14px;
  bottom: 13px;
  z-index: 5;
  padding: 0.4rem 0.65rem;
  color: #ffffff;
  background: rgba(34, 34, 34, 0.78);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 800;
}

.apartment-gallery-dots {
  display: flex;
  min-height: 24px;
  margin-top: 1rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.apartment-gallery-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  background: #c7cbd0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.apartment-gallery-dot.is-active {
  width: 26px;
  background: var(--color-brand);
  border-radius: 999px;
}

.apartment-gallery-help {
  margin: 0.45rem 0 0;
  color: #777777;
  font-size: 0.82rem;
  text-align: center;
}

.apartment-benefits-section {
  padding: 4rem 0;
  background: #ffffff;
}

.apartment-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.apartment-benefit-card {
  padding: 1.7rem;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.07);
}

.apartment-benefit-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #ff6600, #ff3b00);
  border-radius: 14px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 900;
}

.apartment-benefit-card h3 {
  margin-bottom: 0.55rem;
  color: #222222;
  font-size: 1.06rem;
  line-height: 1.25;
  text-transform: none;
}

.apartment-benefit-card p {
  margin: 0;
  color: #5f5f5f;
  font-size: 0.94rem;
  line-height: 1.62;
}

.apartment-overview-section {
  padding: 4rem 0;
  background: #f6f7f8;
}

.apartment-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 2rem;
  align-items: center;
}

.apartment-overview-image {
  overflow: hidden;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.13);
}

.apartment-overview-image img {
  width: 100%;
  height: auto;
}

.apartment-sleeping-card {
  padding: 2rem;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.08);
}

.apartment-sleeping-card h2 {
  margin: 0 0 1.2rem;
  color: #222222;
  font-size: clamp(1.6rem, 3vw, 2.05rem);
  line-height: 1.18;
  text-transform: none;
}

.apartment-room-list {
  margin: 0;
}

.apartment-room-list > div {
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 0.8rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #eeeeee;
}

.apartment-room-list dt {
  color: #222222;
  font-weight: 800;
}

.apartment-room-list dd {
  margin: 0;
  color: #555555;
}

.apartment-included-note {
  margin-top: 1.1rem;
  padding: 1rem;
  background: #fff6ed;
  border: 1px solid #ffd8ba;
  border-radius: 14px;
}

.apartment-included-note strong,
.apartment-included-note span {
  display: block;
}

.apartment-included-note strong {
  margin-bottom: 0.25rem;
  color: #222222;
}

.apartment-included-note span {
  color: #5b5b5b;
  font-size: 0.9rem;
  line-height: 1.5;
}

.apartment-final-cta {
  padding: 4rem 0;
  color: #ffffff;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 35%),
    linear-gradient(120deg, #242424, #111111);
}

.apartment-final-cta-inner {
  max-width: 850px;
  text-align: center;
}

.apartment-final-cta .apartment-kicker {
  color: #ffaf76;
}

.apartment-final-cta h2 {
  margin: 0 0 0.7rem;
  color: #ffffff;
  font-size: clamp(1.9rem, 3.5vw, 2.65rem);
  line-height: 1.15;
  text-transform: none;
}

.apartment-final-cta p {
  max-width: 680px;
  margin: 0 auto 1.5rem;
  color: #dddddd;
}

.apartment-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}

.apartment-final-actions .btn-primary:hover {
  color: #ffffff;
  text-decoration: none;
}

.apartment-final-secondary {
  color: #222222;
  background: #ffffff;
}

.apartment-final-secondary:hover {
  color: var(--color-brand);
  text-decoration: none;
}

.apartment-phone-link {
  padding: 0.75rem 0.3rem;
  color: #ffffff;
  font-weight: 800;
}

.apartment-phone-link:hover {
  color: #ffffff;
}

@media (max-width: 1050px) {
  .apartment-hero-grid {
    grid-template-columns: 1fr 0.9fr;
    gap: 2rem;
  }

  .apartment-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .apartment-hero {
    padding: 2.8rem 0 0;
  }

  .apartment-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .apartment-hero-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
  }

  .apartment-hero-image img {
    aspect-ratio: 4 / 3;
  }

  .apartment-overview-grid {
    grid-template-columns: 1fr;
  }

  .apartment-benefits-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .apartment-hero {
    padding-top: 2.15rem;
  }

  .apartment-hero h1 {
    font-size: 2.05rem;
    line-height: 1.08;
  }

  .apartment-hero-lead {
    font-size: 0.98rem;
    line-height: 1.52;
  }

  .apartment-hero-points {
    gap: 0.45rem;
  }

  .apartment-hero-points li {
    font-size: 0.76rem;
  }

  .apartment-price-card {
    padding: 0.9rem 1rem;
  }

  .apartment-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .apartment-hero-actions .btn {
    width: 100%;
  }

  .apartment-stats-section {
    padding: 1rem 0;
  }

  .apartment-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .apartment-stat {
    padding: 0.8rem 0.45rem;
  }

  .apartment-gallery-section,
  .apartment-benefits-section,
  .apartment-overview-section,
  .apartment-final-cta {
    padding: 2.8rem 0;
  }

  .apartment-gallery-viewport {
    border-radius: 14px;
  }

  .apartment-gallery-arrow {
    width: 39px;
    height: 39px;
    font-size: 20px;
  }

  .apartment-gallery-prev {
    left: 8px;
  }

  .apartment-gallery-next {
    right: 8px;
  }

  .apartment-gallery-counter {
    right: 8px;
    bottom: 8px;
  }

  .apartment-benefit-card,
  .apartment-sleeping-card {
    padding: 1.35rem;
    border-radius: 16px;
  }

  .apartment-room-list > div {
    grid-template-columns: 95px 1fr;
    gap: 0.55rem;
    font-size: 0.9rem;
  }

  .apartment-final-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .apartment-final-actions .btn {
    width: 100%;
  }
}

/* =========================================
   SANDRINGHAM APARTMENT LANDING PAGE
   ========================================= */

.apartment-page {
  background: #ffffff;
}

.apartment-page main {
  overflow: hidden;
}

.apartment-container {
  max-width: 1120px;
}

.apartment-kicker {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--color-brand);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.apartment-hero {
  padding: 4rem 0 3.4rem;
  color: #ffffff;
  background:
    radial-gradient(circle at 92% 0, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(120deg, #ff6600 0%, #ff3b00 100%);
}

.apartment-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: 3rem;
  align-items: center;
  max-width: 1320px;
}

.apartment-hero-copy {
  max-width: 720px;
}

.apartment-hero .apartment-kicker {
  color: rgba(255, 255, 255, 0.88);
}

.apartment-hero h1 {
  max-width: 720px;
  margin: 0 0 1rem;
  color: #ffffff;
  font-size: clamp(2.25rem, 4vw, 3.65rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  text-transform: none;
}

.apartment-hero-lead {
  max-width: 690px;
  margin: 0 0 1.35rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1rem, 1.5vw, 1.17rem);
  line-height: 1.62;
}

.apartment-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.apartment-hero-points li {
  padding: 0.52rem 0.82rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
  font-weight: 800;
}

.apartment-price-card {
  max-width: 520px;
  margin: 0 0 1.35rem;
  padding: 1rem 1.15rem;
  color: #222222;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.apartment-price-card > span {
  display: block;
  margin-bottom: 0.15rem;
  color: #666666;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.apartment-price-card strong {
  display: block;
  color: #222222;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05;
}

.apartment-price-card strong small {
  color: #555555;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
}

.apartment-price-card p {
  margin: 0.45rem 0 0;
  color: #555555;
  font-size: 0.88rem;
  line-height: 1.45;
}

.apartment-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.apartment-primary-cta {
  background: #222222;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.apartment-primary-cta:hover {
  color: #ffffff;
  text-decoration: none;
}

.apartment-secondary-cta {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.apartment-secondary-cta:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  text-decoration: none;
}

.apartment-hero-note {
  margin: 0.85rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
}

.apartment-hero-image {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.28);
}

.apartment-hero-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.apartment-stats-section {
  padding: 1.5rem 0;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

.apartment-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.8rem;
  max-width: 1220px;
}

.apartment-stat {
  padding: 1rem 0.65rem;
  text-align: center;
  background: #fff8f3;
  border: 1px solid #ffe2cf;
  border-radius: 14px;
}

.apartment-stat strong,
.apartment-stat span {
  display: block;
}

.apartment-stat strong {
  margin-bottom: 0.25rem;
  color: #222222;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  line-height: 1.2;
}

.apartment-stat span {
  color: #666666;
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 700;
}

.apartment-gallery-section {
  padding: 4rem 0;
  background:
    linear-gradient(180deg, #fff8f3 0%, #ffffff 100%);
}

.apartment-section-heading {
  max-width: 780px;
  margin: 0 auto 1.7rem;
  text-align: center;
}

.apartment-section-heading h2 {
  margin: 0 0 0.55rem;
  color: #222222;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  line-height: 1.15;
  text-transform: none;
}

.apartment-section-heading p {
  margin: 0;
  color: #666666;
}

.apartment-gallery {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}

.apartment-gallery-viewport {
  overflow: hidden;
  background: #eceff1;
  border-radius: 22px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18);
  touch-action: pan-y;
}

.apartment-gallery-track {
  display: flex;
  width: 100%;
  transition: transform 0.35s ease;
  will-change: transform;
}

.apartment-gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  margin: 0;
}

.apartment-gallery-slide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.apartment-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  width: 48px;
  height: 48px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(34, 34, 34, 0.76);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  font-size: 25px;
  cursor: pointer;
  transform: translateY(-50%);
}

.apartment-gallery-arrow:hover,
.apartment-gallery-arrow:focus-visible {
  color: #ffffff;
  background: var(--color-brand);
}

.apartment-gallery-prev {
  left: 14px;
}

.apartment-gallery-next {
  right: 14px;
}

.apartment-gallery-counter {
  position: absolute;
  right: 14px;
  bottom: 13px;
  z-index: 5;
  padding: 0.4rem 0.65rem;
  color: #ffffff;
  background: rgba(34, 34, 34, 0.78);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 800;
}

.apartment-gallery-dots {
  display: flex;
  min-height: 24px;
  margin-top: 1rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.apartment-gallery-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  background: #c7cbd0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.apartment-gallery-dot.is-active {
  width: 26px;
  background: var(--color-brand);
  border-radius: 999px;
}

.apartment-gallery-help {
  margin: 0.45rem 0 0;
  color: #777777;
  font-size: 0.82rem;
  text-align: center;
}

.apartment-benefits-section {
  padding: 4rem 0;
  background: #ffffff;
}

.apartment-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.apartment-benefit-card {
  padding: 1.7rem;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.07);
}

.apartment-benefit-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #ff6600, #ff3b00);
  border-radius: 14px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 900;
}

.apartment-benefit-card h3 {
  margin-bottom: 0.55rem;
  color: #222222;
  font-size: 1.06rem;
  line-height: 1.25;
  text-transform: none;
}

.apartment-benefit-card p {
  margin: 0;
  color: #5f5f5f;
  font-size: 0.94rem;
  line-height: 1.62;
}

.apartment-overview-section {
  padding: 4rem 0;
  background: #f6f7f8;
}

.apartment-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 2rem;
  align-items: center;
}

.apartment-overview-image {
  overflow: hidden;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.13);
}

.apartment-overview-image img {
  width: 100%;
  height: auto;
}

.apartment-sleeping-card {
  padding: 2rem;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.08);
}

.apartment-sleeping-card h2 {
  margin: 0 0 1.2rem;
  color: #222222;
  font-size: clamp(1.6rem, 3vw, 2.05rem);
  line-height: 1.18;
  text-transform: none;
}

.apartment-room-list {
  margin: 0;
}

.apartment-room-list > div {
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 0.8rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #eeeeee;
}

.apartment-room-list dt {
  color: #222222;
  font-weight: 800;
}

.apartment-room-list dd {
  margin: 0;
  color: #555555;
}

.apartment-included-note {
  margin-top: 1.1rem;
  padding: 1rem;
  background: #fff6ed;
  border: 1px solid #ffd8ba;
  border-radius: 14px;
}

.apartment-included-note strong,
.apartment-included-note span {
  display: block;
}

.apartment-included-note strong {
  margin-bottom: 0.25rem;
  color: #222222;
}

.apartment-included-note span {
  color: #5b5b5b;
  font-size: 0.9rem;
  line-height: 1.5;
}

.apartment-final-cta {
  padding: 4rem 0;
  color: #ffffff;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 35%),
    linear-gradient(120deg, #242424, #111111);
}

.apartment-final-cta-inner {
  max-width: 850px;
  text-align: center;
}

.apartment-final-cta .apartment-kicker {
  color: #ffaf76;
}

.apartment-final-cta h2 {
  margin: 0 0 0.7rem;
  color: #ffffff;
  font-size: clamp(1.9rem, 3.5vw, 2.65rem);
  line-height: 1.15;
  text-transform: none;
}

.apartment-final-cta p {
  max-width: 680px;
  margin: 0 auto 1.5rem;
  color: #dddddd;
}

.apartment-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}

.apartment-final-actions .btn-primary:hover {
  color: #ffffff;
  text-decoration: none;
}

.apartment-final-secondary {
  color: #222222;
  background: #ffffff;
}

.apartment-final-secondary:hover {
  color: var(--color-brand);
  text-decoration: none;
}

.apartment-phone-link {
  padding: 0.75rem 0.3rem;
  color: #ffffff;
  font-weight: 800;
}

.apartment-phone-link:hover {
  color: #ffffff;
}

@media (max-width: 1050px) {
  .apartment-hero-grid {
    grid-template-columns: 1fr 0.9fr;
    gap: 2rem;
  }

  .apartment-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .apartment-hero {
    padding: 2.8rem 0 0;
  }

  .apartment-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .apartment-hero-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
  }

  .apartment-hero-image img {
    aspect-ratio: 4 / 3;
  }

  .apartment-overview-grid {
    grid-template-columns: 1fr;
  }

  .apartment-benefits-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .apartment-hero {
    padding-top: 2.15rem;
  }

  .apartment-hero h1 {
    font-size: 2.05rem;
    line-height: 1.08;
  }

  .apartment-hero-lead {
    font-size: 0.98rem;
    line-height: 1.52;
  }

  .apartment-hero-points {
    gap: 0.45rem;
  }

  .apartment-hero-points li {
    font-size: 0.76rem;
  }

  .apartment-price-card {
    padding: 0.9rem 1rem;
  }

  .apartment-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .apartment-hero-actions .btn {
    width: 100%;
  }

  .apartment-stats-section {
    padding: 1rem 0;
  }

  .apartment-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .apartment-stat {
    padding: 0.8rem 0.45rem;
  }

  .apartment-gallery-section,
  .apartment-benefits-section,
  .apartment-overview-section,
  .apartment-final-cta {
    padding: 2.8rem 0;
  }

  .apartment-gallery-viewport {
    border-radius: 14px;
  }

  .apartment-gallery-arrow {
    width: 39px;
    height: 39px;
    font-size: 20px;
  }

  .apartment-gallery-prev {
    left: 8px;
  }

  .apartment-gallery-next {
    right: 8px;
  }

  .apartment-gallery-counter {
    right: 8px;
    bottom: 8px;
  }

  .apartment-benefit-card,
  .apartment-sleeping-card {
    padding: 1.35rem;
    border-radius: 16px;
  }

  .apartment-room-list > div {
    grid-template-columns: 95px 1fr;
    gap: 0.55rem;
    font-size: 0.9rem;
  }

  .apartment-final-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .apartment-final-actions .btn {
    width: 100%;
  }
}

/* =========================================
   SANDRINGHAM APARTMENT PHONE BUTTONS
   ========================================= */

.apartment-phone-cta {
  color: #222222;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.apartment-phone-cta:hover,
.apartment-phone-cta:focus-visible {
  color: var(--color-brand);
  background: #fff5ee;
  text-decoration: none;
}

.apartment-final-phone-cta {
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.apartment-final-phone-cta:hover,
.apartment-final-phone-cta:focus-visible {
  color: #222222;
  background: #ffffff;
  text-decoration: none;
}
/* =====================================================
   SAFE HERO-ONLY PATCH — Sandringham homepage
   Paste at very bottom of css2025/style-new.css
   ===================================================== */

/* Header: slightly cleaner and less heavy */
.site-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}

.site-header-inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.site-logo {
  color: #15233a !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.site-nav a {
  color: #f05a00 !important;
  font-weight: 800 !important;
}

.site-nav a.book-now-link {
  background: #ff6600 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.55rem 1.2rem !important;
  box-shadow: 0 8px 18px rgba(255,102,0,0.22) !important;
}

/* Hero: reduce the heavy orange slab and make it more premium */
.hero {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 30%),
    linear-gradient(135deg, #ff7a00 0%, #f05a00 48%, #b74200 100%) !important;
  padding: clamp(2.2rem, 4vw, 4.6rem) 0 clamp(2.4rem, 5vw, 5rem) !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.hero::after {
  background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.18)) !important;
}

/* Keep content aligned and contained */
.hero .container,
.hero-inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
}

/* Hero text */
.hero-heading {
  color: #ffffff !important;
  font-size: clamp(2rem, 3.4vw, 3.4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  max-width: 960px !important;
  margin-bottom: 0.7rem !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
}

.hero-subheading {
  color: rgba(255,255,255,0.96) !important;
  font-size: clamp(1.02rem, 1.4vw, 1.22rem) !important;
  line-height: 1.55 !important;
  max-width: 860px !important;
  margin-bottom: 1.4rem !important;
}

/* Hero buttons */
.hero-actions {
  gap: 0.8rem !important;
  margin-bottom: 1.35rem !important;
}

.hero .btn,
.hero a.btn {
  min-height: 50px !important;
  padding: 0.85rem 1.45rem !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 0.035em !important;
  text-decoration: none !important;
}

.hero .btn-primary {
  background: #ffffff !important;
  color: #f05a00 !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18) !important;
}

.hero .btn-call {
  background: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow: none !important;
}

.hero .btn-enquire {
  background: #ffffff !important;
  color: #15233a !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
}

/* Hero image: make the real image the star */
.hero-media {
  max-width: 980px !important;
  margin-top: 1.6rem !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 22px 50px rgba(0,0,0,0.28) !important;
  background: #111 !important;
}

.hero-media img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: brightness(1.06) contrast(1.04) saturate(1.04) !important;
}

/* Mobile: cleaner, bigger text, less cramped */
@media (max-width: 768px) {
  .site-header-inner {
    padding: 0.65rem 1rem !important;
  }

  .site-logo {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    max-width: 290px !important;
  }

  .nav-toggle {
    border: 1px solid #ff6600 !important;
    color: #ff6600 !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .hero {
    padding: 2rem 0 2.4rem !important;
  }

  .hero-heading {
    font-size: 2rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-subheading {
    font-size: 1.02rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.2rem !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
  }

  .hero .btn,
  .hero a.btn {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 0.92rem !important;
  }

  .hero-media {
    width: 100% !important;
    margin-top: 1.25rem !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 30px rgba(0,0,0,0.24) !important;
  }

  .hero-media img {
    filter: brightness(1.08) contrast(1.05) saturate(1.05) !important;
  }
}
/* Controlled hero rewrite support */
.hero-kicker {
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
}

.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.2rem 0 1.55rem;
}

.hero-benefits span {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  color: #ffffff;
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 800;
}

@media (max-width: 768px) {
  .hero-kicker {
    font-size: 0.9rem;
    margin-bottom: 0.65rem;
  }

  .hero-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 1rem 0 1.25rem;
  }

  .hero-benefits span {
    justify-content: center;
    text-align: center;
    font-size: 0.82rem;
    padding: 0.48rem 0.55rem;
  }
}
.hero-benefits {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  margin: 1.15rem 0 1.6rem !important;
}

.hero-benefits span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.5rem 0.85rem !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

@media (max-width: 768px) {
  .hero-benefits {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .hero-benefits span {
    font-size: 0.82rem !important;
    padding: 0.5rem 0.45rem !important;
    text-align: center !important;
  }
}
/* HERO BENEFIT BADGES - MOBILE + DESKTOP FIX */
.hero-benefits {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 18px 0 22px !important;
  padding: 0 !important;
}

.hero-benefits span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.17) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* HERO IMAGE - CLEANER MOBILE FLOW */
.hero-media {
  margin-top: 0 !important;
}

.hero-media img {
  width: 100% !important;
  display: block !important;
}

@media (max-width: 768px) {
  .hero {
    padding-bottom: 0 !important;
  }

  .hero-benefits {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 18px 0 24px !important;
  }

  .hero-benefits span {
    white-space: normal !important;
    text-align: center !important;
    font-size: 0.82rem !important;
    padding: 9px 8px !important;
  }

  .hero-media {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .hero-media img {
    border-radius: 0 !important;
  }
}
/* =====================================================
   CONTROLLED 9/10 HERO UPGRADE
   Desktop split layout, mobile remains stacked
   ===================================================== */

.hero-split {
  padding: clamp(2.4rem, 4.5vw, 4.8rem) 0 !important;
}

.hero-split-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr) !important;
  gap: clamp(1.8rem, 4vw, 3.5rem) !important;
  align-items: center !important;
}

.hero-split .hero-copy {
  max-width: 560px !important;
}

.hero-split .hero-kicker {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  margin-bottom: 0.7rem !important;
  letter-spacing: 0.04em !important;
}

.hero-split .hero-heading {
  max-width: 560px !important;
  font-size: clamp(2.35rem, 3.6vw, 4.1rem) !important;
  line-height: 1.02 !important;
  margin-bottom: 0.85rem !important;
}

.hero-split .hero-subheading {
  max-width: 540px !important;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem) !important;
  line-height: 1.55 !important;
  margin-bottom: 1.35rem !important;
}

.hero-split .hero-actions {
  margin-bottom: 0 !important;
}

.hero-split .hero-media {
  margin-top: 0 !important;
  max-width: none !important;
  width: 100% !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 54px rgba(0,0,0,0.30) !important;
  overflow: hidden !important;
}

.hero-split .hero-media img {
  width: 100% !important;
  height: auto !important;
  filter: brightness(1.07) contrast(1.04) saturate(1.04) !important;
}

/* Make hero less tall on desktop */
@media (min-width: 900px) {
  .hero-split .hero-media img {
    max-height: 520px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* Tablet/mobile: keep safe stacked layout */
@media (max-width: 899px) {
  .hero-split-inner {
    display: block !important;
  }

  .hero-split .hero-copy {
    max-width: none !important;
  }

  .hero-split .hero-media {
    margin-top: 1.45rem !important;
  }
}

@media (max-width: 768px) {
  .hero-split {
    padding: 2rem 0 0 !important;
  }

  .hero-split .hero-heading {
    font-size: 2rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-split .hero-subheading {
    font-size: 1.02rem !important;
    line-height: 1.5 !important;
  }

  .hero-split .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
  }

  .hero-split .hero-actions .btn {
    width: 100% !important;
  }

  .hero-split .hero-media {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .hero-split .hero-media img {
    border-radius: 0 !important;
  }
}
/* =====================================================
   MODERN HERO USING REAL SANDRINGHAM BAR PHOTO
   Safe hero-only patch
   ===================================================== */

.hero-modern {
  position: relative !important;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(135deg, #ff7600 0%, #f25a00 45%, #a93a00 100%) !important;
  padding: clamp(2.2rem, 4vw, 4.8rem) 0 !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.hero-modern::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(0,0,0,0.10), rgba(0,0,0,0.02)) !important;
  pointer-events: none !important;
}

.hero-modern-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr) !important;
  gap: clamp(1.7rem, 4vw, 3.5rem) !important;
  align-items: center !important;
}

.hero-modern-copy {
  max-width: 570px !important;
}

.hero-kicker {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: 0.04em !important;
}

.hero-modern .hero-heading {
  color: #ffffff !important;
  font-size: clamp(2.4rem, 3.8vw, 4.4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  font-weight: 900 !important;
  max-width: 620px !important;
  margin: 0 0 0.95rem !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.16) !important;
}

.hero-modern .hero-subheading {
  color: rgba(255,255,255,0.96) !important;
  font-size: clamp(1.03rem, 1.25vw, 1.18rem) !important;
  line-height: 1.58 !important;
  max-width: 560px !important;
  margin: 0 0 1.35rem !important;
}

.hero-modern .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  margin: 0 0 1.25rem !important;
}

.hero-modern .btn,
.hero-modern a.btn {
  min-height: 52px !important;
  padding: 0.85rem 1.45rem !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-modern .btn-primary {
  background: #ffffff !important;
  color: #f05a00 !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18) !important;
}

.hero-modern .btn-call {
  background: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
}

.hero-modern .btn-enquire {
  background: #ffffff !important;
  color: #15233a !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
}

.hero-benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-width: 520px !important;
}

.hero-benefit-grid span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: #fff7ed !important;
  color: #15233a !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  border-radius: 999px !important;
  padding: 9px 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  box-shadow: 0 5px 14px rgba(0,0,0,0.08) !important;
}

.hero-modern-image {
  position: relative !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 58px rgba(0,0,0,0.32) !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}

.hero-modern-image::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.04), rgba(0,0,0,0.12)),
    linear-gradient(to right, rgba(0,0,0,0.08), transparent 35%) !important;
  pointer-events: none !important;
}

.hero-modern-image img {
  width: 100% !important;
  height: 520px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  filter: brightness(1.06) contrast(1.05) saturate(1.05) !important;
}

/* Tablet */
@media (max-width: 980px) {
  .hero-modern-inner {
    grid-template-columns: 1fr !important;
  }

  .hero-modern-copy {
    max-width: none !important;
  }

  .hero-modern-image img {
    height: auto !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero-modern {
    padding: 2rem 0 0 !important;
  }

  .hero-modern-inner {
    display: block !important;
  }

  .hero-kicker {
    font-size: 0.95rem !important;
    margin-bottom: 0.6rem !important;
  }

  .hero-modern .hero-heading {
    font-size: 2rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-modern .hero-subheading {
    font-size: 1.02rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.25rem !important;
  }

  .hero-modern .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
    margin-bottom: 1.1rem !important;
  }

  .hero-modern .btn,
  .hero-modern a.btn {
    width: 100% !important;
    min-height: 52px !important;
  }

  .hero-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-bottom: 1.45rem !important;
  }

  .hero-benefit-grid span {
    font-size: 13px !important;
    padding: 9px 7px !important;
  }

  .hero-modern-image {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .hero-modern-image img {
    height: auto !important;
    border-radius: 0 !important;
  }
}
/* FINAL MODERN HERO FIX */

.hero-modern {
  background: linear-gradient(135deg, #ff7600 0%, #f15a00 45%, #a93a00 100%) !important;
  padding: 56px 0 !important;
  color: #ffffff !important;
}

.hero-modern-inner {
  display: grid !important;
  grid-template-columns: 0.9fr 1.1fr !important;
  gap: 42px !important;
  align-items: center !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.hero-modern-copy {
  max-width: 560px !important;
}

.hero-modern .hero-heading {
  color: #ffffff !important;
  font-size: clamp(2.4rem, 3.6vw, 4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.04em !important;
  margin: 0 0 16px !important;
}

.hero-modern .hero-subheading {
  color: #ffffff !important;
  font-size: 1.08rem !important;
  line-height: 1.55 !important;
  margin: 0 0 22px !important;
}

.hero-modern .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 0 20px !important;
}

.hero-benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-width: 520px !important;
}

.hero-benefit-grid span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: #fff7ed !important;
  color: #15233a !important;
  border-radius: 999px !important;
  padding: 9px 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  box-shadow: 0 5px 14px rgba(0,0,0,0.08) !important;
}

.hero-modern-image {
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 58px rgba(0,0,0,0.32) !important;
  background: #111 !important;
}

.hero-modern-image img {
  width: 100% !important;
  height: 520px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  filter: brightness(1.08) contrast(1.05) saturate(1.05) !important;
}

@media (max-width: 900px) {
  .hero-modern-inner {
    display: block !important;
  }

  .hero-modern-image {
    margin-top: 24px !important;
  }

  .hero-modern-image img {
    height: auto !important;
  }
}

@media (max-width: 768px) {
  .hero-modern {
    padding: 32px 0 0 !important;
  }

  .hero-modern .hero-heading {
    font-size: 2rem !important;
  }

  .hero-modern .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero-modern .btn {
    width: 100% !important;
  }

  .hero-benefit-grid {
    margin-bottom: 24px !important;
  }

  .hero-modern-image {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}
/* ===== HERO BRIGHTNESS / POLISH PATCH ===== */

/* Slightly brighter hero background area */
.hero,
.home-hero,
.hero-section {
  background: linear-gradient(135deg, #ff6a00 0%, #d85a00 100%);
}

/* Make sure the media block is not being dimmed */
.hero-media,
.hero-image,
.hero-photo {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: transparent;
}

/* If you have a dark overlay on the image, soften it heavily */
.hero-media::before,
.hero-media::after,
.hero-image::before,
.hero-image::after,
.hero-photo::before,
.hero-photo::after {
  opacity: 0.08 !important;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.10) 100%
  ) !important;
}

/* Brighten the actual hero image */
.hero-media img,
.hero-image img,
.hero-photo img,
.hero img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(1.14) contrast(1.04) saturate(1.04);
}

/* If the whole image wrapper has opacity on it, cancel it */
.hero-media,
.hero-image,
.hero-photo {
  opacity: 1 !important;
}

/* Make primary CTA look active, not greyed */
.hero .btn-primary,
.hero .button-primary,
.hero .cta-primary {
  background: #ff8a00 !important;
  color: #ffffff !important;
  border: 2px solid #ff8a00 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

/* Call button clearer */
.hero .btn-secondary,
.hero .button-secondary,
.hero .cta-secondary {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
}

/* White enquire button stays crisp */
.hero .btn-tertiary,
.hero .button-tertiary,
.hero .cta-tertiary {
  background: #ffffff !important;
  color: #e46800 !important;
  border: 2px solid #ffffff !important;
}

/* Benefits badges brighter */
.hero .benefit,
.hero .benefit-pill,
.hero .hero-benefit,
.hero .hero-pill {
  background: #f4efe8 !important;
  color: #1f2430 !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
}

/* Slightly improve text contrast */
.hero h1,
.home-hero h1,
.hero-section h1 {
  color: #ffffff;
}

.hero p,
.home-hero p,
.hero-section p {
  color: rgba(255,255,255,0.92);
}

/* =====================================================
   FINAL HOMEPAGE HERO FIX — 23 Aug 2026
   Uses Sandringham-Images/Sandringham-Hero.jpg
   Keep this at the very bottom of style-new.css
   ===================================================== */

.hero-modern {
  position: relative !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.18), transparent 32%),
    linear-gradient(135deg, #ff7900 0%, #ed5a00 46%, #8d3000 100%) !important;
  color: #ffffff !important;
  padding: clamp(48px, 5vw, 74px) 0 !important;
  overflow: hidden !important;
}

.hero-modern::after,
.hero-modern::before {
  display: none !important;
  content: none !important;
}

.hero-modern .container,
.hero-modern-inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.hero-modern-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 0.78fr) minmax(500px, 1.22fr) !important;
  gap: clamp(30px, 4vw, 52px) !important;
  align-items: center !important;
}

.hero-modern-copy {
  max-width: 540px !important;
}

.hero-modern .hero-kicker {
  color: rgba(255,255,255,0.96) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  margin: 0 0 12px !important;
  letter-spacing: 0.02em !important;
}

.hero-modern .hero-heading {
  color: #ffffff !important;
  font-size: clamp(40px, 3.25vw, 58px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.04em !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  max-width: 560px !important;
  margin: 0 0 18px !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.14) !important;
}

.hero-modern .hero-subheading {
  color: rgba(255,255,255,0.96) !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  max-width: 540px !important;
  margin: 0 0 24px !important;
}

.hero-modern .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 0 20px !important;
}

.hero-modern .btn,
.hero-modern a.btn {
  min-height: 52px !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-heading), Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
  border: 0 !important;
  cursor: pointer !important;
}

.hero-modern .btn-primary {
  background: #ff8a00 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.20) !important;
}

.hero-modern .btn-call {
  background: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.46) !important;
  box-shadow: none !important;
}

.hero-modern .btn-enquire {
  background: #ffffff !important;
  color: #e05400 !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.14) !important;
}

.hero-modern .btn:hover {
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
}

.hero-benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-width: 520px !important;
  margin: 0 !important;
}

.hero-benefit-grid span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 34px !important;
  background: #fff7ed !important;
  color: #142033 !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  border-radius: 999px !important;
  padding: 9px 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  box-shadow: 0 5px 14px rgba(0,0,0,0.08) !important;
}

.hero-modern-image {
  position: relative !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: 0 26px 60px rgba(0,0,0,0.34) !important;
}

.hero-modern-image::before,
.hero-modern-image::after {
  display: none !important;
  content: none !important;
}

.hero-modern-image img {
  display: block !important;
  width: 100% !important;
  height: 520px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Brightness fix: removes the gloomy/disabled look */
  filter: brightness(1.24) contrast(1.07) saturate(1.08) !important;
}

@media (max-width: 1100px) {
  .hero-modern-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr) !important;
    gap: 30px !important;
  }

  .hero-modern .hero-heading {
    font-size: clamp(36px, 4vw, 50px) !important;
  }
}

@media (max-width: 900px) {
  .hero-modern-inner {
    display: block !important;
  }

  .hero-modern-copy {
    max-width: none !important;
  }

  .hero-modern-image {
    margin-top: 26px !important;
  }

  .hero-modern-image img {
    height: auto !important;
  }
}

@media (max-width: 768px) {
  .hero-modern {
    padding: 32px 0 0 !important;
  }

  .hero-modern .container,
  .hero-modern-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero-modern .hero-heading {
    font-size: 32px !important;
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
  }

  .hero-modern .hero-subheading {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 22px !important;
  }

  .hero-modern .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .hero-modern .btn,
  .hero-modern a.btn {
    width: 100% !important;
    min-height: 52px !important;
  }

  .hero-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
  }

  .hero-benefit-grid span {
    font-size: 13px !important;
    padding: 9px 7px !important;
  }

  .hero-modern-image {
    width: calc(100% + 36px) !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .hero-modern-image img {
    width: 100% !important;
    height: auto !important;
    filter: brightness(1.22) contrast(1.06) saturate(1.08) !important;
  }
}
/* =====================================================
   HEADER FINAL POLISH — slimmer, cleaner, less cramped
   ===================================================== */

.site-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.04) !important;
}

.site-header-inner {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0.55rem 1.5rem !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.4rem !important;
}

/* Logo: stop awkward wrapping */
.site-logo {
  color: #15233a !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  flex: 0 0 auto !important;
}

/* Nav: tighter and cleaner */
.site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.9rem !important;
  flex: 1 1 auto !important;
}

.site-nav a {
  color: #e85d00 !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.site-nav a:hover {
  color: #15233a !important;
  text-decoration: none !important;
}

/* Book Now: smaller, neater */
.site-nav a.book-now-link {
  background: #ff6600 !important;
  color: #ffffff !important;
  padding: 0.55rem 1rem !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 14px rgba(255, 102, 0, 0.20) !important;
  min-width: auto !important;
}

.site-nav a.book-now-link:hover {
  background: #e95b00 !important;
  color: #ffffff !important;
}

/* Desktop only: prevent menu feeling oversized */
@media (min-width: 769px) {
  .nav-toggle {
    display: none !important;
  }
}

/* Tablet: reduce spacing before it wraps */
@media (max-width: 1050px) and (min-width: 769px) {
  .site-header-inner {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 1rem !important;
  }

  .site-logo {
    font-size: 0.9rem !important;
  }

  .site-nav {
    gap: 0.7rem !important;
  }

  .site-nav a {
    font-size: 0.72rem !important;
  }

  .site-nav a.book-now-link {
    padding: 0.5rem 0.85rem !important;
  }
}

/* Mobile header */
@media (max-width: 768px) {
  .site-header-inner {
    padding: 0.75rem 1rem !important;
    min-height: 60px !important;
  }

  .site-logo {
    font-size: 0.95rem !important;
    max-width: 300px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 102, 0, 0.35) !important;
    background: #fff7ed !important;
    color: #ff6600 !important;
    font-size: 1.45rem !important;
  }

  .site-nav {
    display: none !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding-top: 0.75rem !important;
  }

  .site-nav.is-open {
    display: flex !important;
  }

  .site-nav.is-open a {
    width: 100% !important;
    padding: 0.72rem 0 !important;
    border-top: 1px solid rgba(17, 24, 39, 0.06) !important;
    font-size: 0.85rem !important;
  }

  .site-nav.is-open a.book-now-link {
    width: auto !important;
    padding: 0.7rem 1.25rem !important;
    margin-bottom: 0.35rem !important;
  }
}
/* =====================================================
   HOMEPAGE FINAL POLISH — 24 AUG 2026
   Keep this at absolute bottom of style-new.css
   ===================================================== */


/* =========================================
   HERO
   ========================================= */

.home-hero-final {
  position: relative !important;
  padding: 58px 0 !important;
  color: #ffffff !important;

  background:
    radial-gradient(
      circle at 18% 10%,
      rgba(255,255,255,0.18),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      #ff7900 0%,
      #ef5b00 48%,
      #a23a00 100%
    ) !important;

  overflow: hidden !important;
}

.home-hero-final::before,
.home-hero-final::after {
  display: none !important;
  content: none !important;
}

.home-hero-final .hero-modern-inner {
  max-width: 1220px !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 0.78fr)
    minmax(520px, 1.22fr) !important;

  gap: 48px !important;

  align-items: center !important;

  margin: 0 auto !important;

  padding-left: 20px !important;
  padding-right: 20px !important;
}

.home-hero-final .hero-modern-copy {
  max-width: 540px !important;
}


/* Kicker */

.home-hero-final .hero-kicker {
  margin: 0 0 12px !important;

  color: rgba(255,255,255,0.94) !important;

  font-size: 15px !important;
  line-height: 1.3 !important;

  font-weight: 800 !important;

  letter-spacing: 0.02em !important;
}


/* Heading */

.home-hero-final .hero-heading {
  margin: 0 0 18px !important;

  max-width: 560px !important;

  color: #ffffff !important;

  font-size:
    clamp(
      40px,
      3.25vw,
      58px
    ) !important;

  line-height: 1.04 !important;

  letter-spacing: -0.042em !important;

  font-weight: 900 !important;

  text-transform: uppercase !important;

  text-shadow:
    0 2px 10px
    rgba(0,0,0,0.12) !important;
}


/* Supporting text */

.home-hero-final .hero-subheading {
  margin: 0 0 24px !important;

  max-width: 525px !important;

  color: rgba(255,255,255,0.97) !important;

  font-size: 18px !important;

  line-height: 1.58 !important;
}


/* =========================================
   HERO ACTIONS
   ========================================= */

.home-hero-final .hero-actions {
  display: flex !important;

  flex-wrap: wrap !important;

  gap: 12px !important;

  margin: 0 0 13px !important;
}


/* Primary */

.home-availability-btn {
  min-height: 54px !important;

  padding:
    14px 25px !important;

  color: #e65400 !important;

  background: #ffffff !important;

  border:
    2px solid
    #ffffff !important;

  border-radius:
    999px !important;

  font-family:
    var(--font-heading) !important;

  font-size: 14px !important;

  font-weight: 900 !important;

  letter-spacing:
    0.035em !important;

  text-transform:
    uppercase !important;

  box-shadow:
    0 14px 30px
    rgba(0,0,0,0.20) !important;
}

.home-availability-btn:hover {
  color: #d94f00 !important;

  background: #fff5ed !important;

  transform:
    translateY(-1px) !important;

  text-decoration:
    none !important;
}


/* Secondary */

.home-call-btn {
  min-height: 54px !important;

  padding:
    14px 23px !important;

  color: #ffffff !important;

  background:
    rgba(
      255,
      255,
      255,
      0.12
    ) !important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.55
    ) !important;

  border-radius:
    999px !important;

  font-family:
    var(--font-heading) !important;

  font-size: 14px !important;

  font-weight: 900 !important;

  text-transform:
    uppercase !important;

  box-shadow:
    none !important;
}

.home-call-btn:hover {
  color: #ffffff !important;

  background:
    rgba(
      255,
      255,
      255,
      0.21
    ) !important;

  text-decoration:
    none !important;
}


/* Enquiry no longer looks like third primary button */

.home-enquire-link {
  display: inline-block !important;

  margin:
    0 0 20px !important;

  color: #ffffff !important;

  font-size: 14px !important;

  font-weight: 700 !important;

  text-decoration:
    underline !important;

  text-underline-offset:
    3px !important;
}

.home-enquire-link:hover {
  color: #fff1e7 !important;
}


/* =========================================
   HERO BENEFITS
   ========================================= */

.home-hero-benefits {
  display: grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;

  gap:
    7px 18px !important;

  max-width:
    520px !important;

  margin:
    0 !important;
}

.home-hero-benefits span {
  display: flex !important;

  align-items:
    center !important;

  gap:
    7px !important;

  min-height:
    30px !important;

  color:
    rgba(
      255,
      255,
      255,
      0.96
    ) !important;

  background:
    transparent !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  padding:
    2px 0 !important;

  font-size:
    13px !important;

  font-weight:
    700 !important;

  text-align:
    left !important;

  justify-content:
    flex-start !important;
}

.home-hero-benefits b {
  display:
    inline-flex;

  width:
    20px;

  height:
    20px;

  flex:
    0 0 20px;

  align-items:
    center;

  justify-content:
    center;

  color:
    #e95a00;

  background:
    #ffffff;

  border-radius:
    50%;

  font-size:
    12px;
}


/* =========================================
   HERO IMAGE
   ========================================= */

.home-hero-final .hero-modern-image {
  position:
    relative !important;

  overflow:
    hidden !important;

  border-radius:
    25px !important;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.20
    ) !important;

  background:
    #111111 !important;

  box-shadow:
    0 26px 60px
    rgba(
      0,
      0,
      0,
      0.30
    ) !important;
}

.home-hero-final .hero-modern-image::before,
.home-hero-final .hero-modern-image::after {
  display:
    none !important;

  content:
    none !important;
}

.home-hero-final .hero-modern-image img {
  display:
    block !important;

  width:
    100% !important;

  height:
    510px !important;

  object-fit:
    cover !important;

  object-position:
    center !important;

  opacity:
    1 !important;

  filter:
    brightness(1.18)
    contrast(1.05)
    saturate(1.06) !important;
}


/* =========================================
   TRUST STRIP
   ========================================= */

.home-trust-strip {
  position:
    relative;

  z-index:
    3;

  background:
    #ffffff;

  border-bottom:
    1px solid
    #eeeeee;
}

.home-trust-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  max-width:
    1120px;

  padding-top:
    20px;

  padding-bottom:
    20px;
}

.home-trust-item {
  padding:
    5px 22px;

  text-align:
    center;

  border-right:
    1px solid
    #e9e9e9;
}

.home-trust-item:last-child {
  border-right:
    0;
}

.home-trust-item strong,
.home-trust-item span {
  display:
    block;
}

.home-trust-item strong {
  margin-bottom:
    3px;

  color:
    #1c2635;

  font-family:
    var(--font-heading);

  font-size:
    14px;

  font-weight:
    900;
}

.home-trust-item span {
  color:
    #727272;

  font-size:
    12px;

  line-height:
    1.35;
}


/* =========================================
   INTRO + REVIEW
   ========================================= */

.home-intro-section {
  padding:
    64px 0;

  background:
    #ffffff;
}

.home-intro-grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(340px, 0.85fr);

  gap:
    55px;

  align-items:
    center;

  max-width:
    1080px;
}

.home-section-kicker {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #ef5d00;

  font-family:
    var(--font-heading);

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.home-intro-copy h2,
.home-direct-inner h2 {
  margin:
    0 0 17px;

  color:
    #1d2633;

  font-size:
    clamp(
      28px,
      3vw,
      40px
    );

  line-height:
    1.12;

  text-transform:
    none;
}

.home-intro-copy p {
  max-width:
    650px;

  color:
    #565656;

  font-size:
    16px;

  line-height:
    1.72;
}

.home-intro-copy a {
  font-weight:
    700;
}

.home-location {
  margin-top:
    25px;

  padding-top:
    20px;

  border-top:
    1px solid
    #eeeeee;
}

.home-location strong,
.home-location span {
  display:
    block;
}

.home-location strong {
  margin-bottom:
    5px;

  color:
    #232323;
}

.home-location span {
  color:
    #727272;

  font-size:
    13px;

  line-height:
    1.55;
}


/* Review card */

.home-review-card {
  position:
    relative;

  padding:
    32px;

  background:
    #fff8f2;

  border:
    1px solid
    #ffe1cd;

  border-radius:
    20px;

  box-shadow:
    0 16px 38px
    rgba(
      0,
      0,
      0,
      0.08
    );
}

.home-review-stars {
  margin-bottom:
    9px;

  color:
    #f28a00;

  font-size:
    17px;

  letter-spacing:
    0.08em;
}

.home-review-label {
  display:
    block;

  margin-bottom:
    17px;

  color:
    #e75b00;

  font-family:
    var(--font-heading);

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}

.home-review-card blockquote {
  margin:
    0 0 24px;

  color:
    #242424;

  font-family:
    var(--font-heading);

  font-size:
    21px;

  font-weight:
    700;

  line-height:
    1.5;
}

.home-review-author {
  margin-bottom:
    20px;
}

.home-review-author strong,
.home-review-author span {
  display:
    block;
}

.home-review-author strong {
  color:
    #222222;

  font-size:
    14px;
}

.home-review-author span {
  margin-top:
    2px;

  color:
    #777777;

  font-size:
    12px;
}

.home-review-link {
  color:
    #e65a00;

  font-size:
    14px;

  font-weight:
    800;
}


/* =========================================
   DIRECT BOOKING SECTION
   ========================================= */

.home-direct-section {
  padding:
    60px 0;

  background:
    #f7f7f7;
}

.home-direct-inner {
  max-width:
    760px;

  text-align:
    center;
}

.home-direct-inner p {
  margin:
    0 auto 24px;

  max-width:
    680px;

  color:
    #5c5c5c;

  line-height:
    1.7;
}


/* =========================================
   MOBILE / TABLET
   ========================================= */

@media (max-width: 950px) {

  .home-hero-final .hero-modern-inner {
    display:
      block !important;
  }

  .home-hero-final .hero-modern-copy {
    max-width:
      none !important;
  }

  .home-hero-final .hero-modern-image {
    margin-top:
      28px !important;
  }

  .home-hero-final .hero-modern-image img {
    height:
      auto !important;
  }

  .home-trust-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .home-trust-item:nth-child(2) {
    border-right:
      0;
  }

  .home-trust-item:nth-child(-n+2) {
    padding-bottom:
      17px;

    margin-bottom:
      12px;

    border-bottom:
      1px solid
      #eeeeee;
  }

  .home-intro-grid {
    grid-template-columns:
      1fr;

    gap:
      35px;
  }

}


@media (max-width: 768px) {

  .home-hero-final {
    padding:
      32px 0 0 !important;
  }

  .home-hero-final .hero-modern-inner {
    padding-left:
      18px !important;

    padding-right:
      18px !important;
  }

  .home-hero-final .hero-heading {
    font-size:
      32px !important;

    line-height:
      1.08 !important;
  }

  .home-hero-final .hero-subheading {
    font-size:
      16px !important;

    line-height:
      1.5 !important;

    margin-bottom:
      20px !important;
  }

  .home-hero-final .hero-actions {
    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      9px !important;
  }

  .home-availability-btn,
  .home-call-btn {
    width:
      100% !important;
  }

  .home-enquire-link {
    display:
      block !important;

    text-align:
      center !important;

    margin:
      7px 0 21px !important;
  }

  .home-hero-benefits {
    grid-template-columns:
      1fr 1fr !important;

    gap:
      9px 12px !important;

    margin-bottom:
      24px !important;
  }

  .home-hero-benefits span {
    font-size:
      12px !important;
  }

  .home-hero-final .hero-modern-image {
    width:
      calc(100% + 36px) !important;

    margin-left:
      -18px !important;

    margin-right:
      -18px !important;

    margin-top:
      0 !important;

    border-radius:
      0 !important;

    border-left:
      0 !important;

    border-right:
      0 !important;

    box-shadow:
      none !important;
  }

  .home-trust-grid {
    padding-top:
      15px;

    padding-bottom:
      15px;
  }

  .home-trust-item {
    padding:
      5px 10px;
  }

  .home-trust-item strong {
    font-size:
      13px;
  }

  .home-trust-item span {
    font-size:
      11px;
  }

  .home-intro-section {
    padding:
      44px 0;
  }

  .home-intro-grid {
    gap:
      28px;
  }

  .home-intro-copy h2,
  .home-direct-inner h2 {
    font-size:
      28px;
  }

  .home-review-card {
    padding:
      25px 22px;

    border-radius:
      16px;
  }

  .home-review-card blockquote {
    font-size:
      18px;
  }

  .home-direct-section {
    padding:
      45px 0;
  }

}


@media (max-width: 480px) {

  .home-hero-benefits {
    grid-template-columns:
      1fr 1fr !important;
  }

  .home-hero-benefits span {
    gap:
      5px !important;
  }

  .home-trust-grid {
    grid-template-columns:
      1fr 1fr;
  }

}
/* =====================================================
   HOMEPAGE PLAN YOUR STAY — FINAL UPGRADE
   24 AUG 2026
   ===================================================== */

.home-plan-heading {
  max-width: 720px;
  margin: 0 auto 2.2rem;
  text-align: center;
}

.home-plan-heading h2 {
  margin: 0 0 0.65rem;
  color: #1c2635;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: none;
}

.home-plan-heading p {
  max-width: 650px;
  margin: 0 auto;
  color: #6a6a6a;
  font-size: 1rem;
  line-height: 1.65;
}


/* Grid */

.home-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  max-width: 1240px;
  margin: 0 auto;
}


/* Card */

.home-plan-card {
  display: flex;
  min-width: 0;
  flex-direction: column;

  overflow: hidden;

  color: #222222;
  background: #ffffff;

  border: 1px solid rgba(22, 32, 46, 0.08);
  border-radius: 18px;

  box-shadow:
    0 10px 28px rgba(20, 28, 40, 0.08);

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.home-plan-card:hover {
  transform: translateY(-4px);

  border-color: rgba(255, 102, 0, 0.22);

  box-shadow:
    0 18px 40px rgba(20, 28, 40, 0.14);

  text-decoration: none;
}


/* Image */

.home-plan-image {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #eeeeee;

  aspect-ratio: 16 / 10;
}

.home-plan-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.01),
      rgba(0, 0, 0, 0.08)
    );

  pointer-events: none;
}

.home-plan-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.35s ease;
}

.home-plan-card:hover .home-plan-image img {
  transform: scale(1.025);
}


/* Guest photo crop */

.home-plan-image--guests img {
  object-position: center 44%;
}


/* Info graphic:
   tame the existing busy graphic until replaced by a photo */

.home-plan-image--info img {
  object-position: center;
  filter:
    saturate(0.72)
    brightness(1.05);
}


/* Card body */

.home-plan-content {
  display: flex;

  min-height: 125px;

  padding: 1.25rem 1.3rem 1.35rem;

  align-items: center;
  justify-content: space-between;

  gap: 1rem;
}

.home-plan-content > div {
  min-width: 0;
}

.home-plan-content h3 {
  margin: 0 0 0.4rem;

  color: #202938;

  font-family: var(--font-heading);

  font-size: 1.03rem;

  line-height: 1.25;

  font-weight: 900;

  text-transform: none;
}

.home-plan-content p {
  margin: 0;

  color: #6a6a6a;

  font-size: 0.88rem;

  line-height: 1.5;
}


/* Arrow */

.home-plan-arrow {
  display: inline-flex;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  align-items: center;
  justify-content: center;

  color: #ffffff;
  background: #ff6600;

  border-radius: 50%;

  font-size: 20px;
  line-height: 1;

  font-weight: 700;

  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.home-plan-card:hover .home-plan-arrow {
  background: #e95800;
  transform: translateX(2px);
}


/* Make this section feel lighter */

.section--soft:has(.home-plan-grid) {
  padding-top: 3.5rem;
  padding-bottom: 4rem;

  background:
    linear-gradient(
      180deg,
      #fafafa 0%,
      #f4f5f6 100%
    );
}


/* Tablet */

@media (max-width: 950px) {

  .home-plan-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* Mobile */

@media (max-width: 620px) {

  .home-plan-heading {
    margin-bottom: 1.5rem;
  }

  .home-plan-heading h2 {
    font-size: 1.8rem;
  }

  .home-plan-heading p {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .home-plan-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .home-plan-card {
    border-radius: 15px;
  }

  .home-plan-image {
    aspect-ratio: 16 / 9;
  }

  .home-plan-content {
    min-height: 0;
    padding: 1rem 1.05rem 1.1rem;
  }

  .home-plan-content h3 {
    font-size: 1rem;
  }

  .home-plan-content p {
    font-size: 0.84rem;
  }

  .home-plan-arrow {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

}

/* =========================================
   CLEAN HOME HERO IMAGE SLIDER PATCH
   Keeps the hero as a neat two-column section.
   ========================================= */

.home-hero-final .hero-modern-inner {
  align-items: center !important;
}

.home-hero-final .hero-modern-image.hero-image-slider {
  width: 100% !important;
  max-width: 660px !important;
  height: clamp(340px, 35vw, 510px) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #111 !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28) !important;
}

.home-hero-final .hero-image-slider .hero-slider-frame {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.home-hero-final .hero-image-slider .hero-slider-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0 !important;
  transform: scale(1.02) !important;
  transition: opacity 0.75s ease, transform 1.6s ease !important;
  filter: brightness(1.08) contrast(1.03) saturate(1.03) !important;
}

.home-hero-final .hero-image-slider .hero-slider-img.is-active {
  opacity: 1 !important;
  transform: scale(1) !important;
  z-index: 2 !important;
}

.home-hero-final .hero-image-slider .hero-slider-dots,
.room-image-slider .room-slider-dots {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 15px !important;
  z-index: 5 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 9px !important;
}

.home-hero-final .hero-image-slider .hero-slider-dots button,
.room-image-slider .room-slider-dots button {
  width: 10px !important;
  height: 10px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.62) !important;
  cursor: pointer !important;
}

.home-hero-final .hero-image-slider .hero-slider-dots button.is-active,
.room-image-slider .room-slider-dots button.is-active {
  width: 25px !important;
  background: var(--color-brand) !important;
}

@media (max-width: 900px) {
  .home-hero-final .hero-modern-image.hero-image-slider {
    max-width: 100% !important;
    height: 390px !important;
  }
}

@media (max-width: 640px) {
  .home-hero-final .hero-modern-image.hero-image-slider {
    height: 300px !important;
    border-radius: 18px !important;
  }
}

/* =========================================
   ROOMS PAGE UPGRADED ROOM SLIDER
   ========================================= */

.room-upgrade-section {
  background: #ffffff !important;
}

.room-upgrade-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr) !important;
  gap: 2.25rem !important;
  align-items: center !important;
}

.room-upgrade-copy p {
  max-width: 580px !important;
}

.room-image-slider {
  position: relative !important;
  height: 500px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #111 !important;
  box-shadow: 0 18px 36px rgba(0,0,0,0.18) !important;
}

.room-slider-frame {
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
}

.room-slider-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0 !important;
  transform: scale(1.02) !important;
  transition: opacity 0.75s ease, transform 1.6s ease !important;
}

.room-slider-img.is-active {
  opacity: 1 !important;
  transform: scale(1) !important;
  z-index: 2 !important;
}

@media (max-width: 900px) {
  .room-upgrade-inner {
    grid-template-columns: 1fr !important;
  }

  .room-image-slider {
    height: 390px !important;
  }
}

@media (max-width: 640px) {
  .room-image-slider {
    height: 320px !important;
    border-radius: 18px !important;
  }
}


/* ===== HARD FIX: HOME HERO SLIDER CONTAINED ===== */

    .home-hero-final {
      min-height: 0 !important;
      padding: 58px 0 !important;
      overflow: hidden !important;
    }

    .home-hero-final .hero-modern-inner {
      width: min(1220px, calc(100% - 40px)) !important;
      max-width: 1220px !important;
      margin: 0 auto !important;
      padding: 0 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
      gap: 46px !important;
      align-items: center !important;
    }

    .home-hero-final .hero-modern-copy {
      align-self: center !important;
      max-width: 540px !important;
      margin: 0 !important;
    }

    .home-hero-final .hero-modern-image.hero-image-slider {
      position: relative !important;
      display: block !important;
      width: 100% !important;
      max-width: 640px !important;
      height: clamp(360px, 32vw, 500px) !important;
      min-height: 0 !important;
      margin: 0 0 0 auto !important;
      padding: 0 !important;
      overflow: hidden !important;
      border-radius: 24px !important;
      background: #111 !important;
      box-shadow: 0 24px 56px rgba(0,0,0,.28) !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-frame {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
      border-radius: inherit !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-img {
      position: absolute !important;
      inset: 0 !important;
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      object-fit: cover !important;
      object-position: center !important;
      opacity: 0 !important;
      visibility: hidden !important;
      z-index: 1 !important;
      transform: scale(1.02) !important;
      transition: opacity .75s ease, visibility .75s ease, transform 1.4s ease !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-img.is-active {
      opacity: 1 !important;
      visibility: visible !important;
      z-index: 2 !important;
      transform: scale(1) !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-dots {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 16px !important;
      z-index: 5 !important;
      display: flex !important;
      justify-content: center !important;
      gap: 9px !important;
      pointer-events: auto !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-dots button {
      width: 10px !important;
      height: 10px !important;
      min-width: 0 !important;
      padding: 0 !important;
      border: 1px solid rgba(255,255,255,.9) !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.65) !important;
      cursor: pointer !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-dots button.is-active {
      width: 26px !important;
      background: #ff6600 !important;
    }

    @media (max-width: 900px) {
      .home-hero-final .hero-modern-inner {
        width: min(100% - 28px, 720px) !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
      }

      .home-hero-final .hero-modern-copy {
        max-width: 100% !important;
      }

      .home-hero-final .hero-modern-image.hero-image-slider {
        max-width: 100% !important;
        height: 360px !important;
        margin: 0 !important;
      }
    }

    @media (max-width: 640px) {
      .home-hero-final {
        padding: 34px 0 !important;
      }

      .home-hero-final .hero-modern-image.hero-image-slider {
        height: 285px !important;
        border-radius: 18px !important;
      }
    }
  

/* =========================================
   FINAL FIX: ROOMS HERO IMAGE MUST STAY CONTAINED
   ========================================= */
.hero--rooms .hero-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px) !important;
  gap: 2rem !important;
  align-items: center !important;
}

.hero--rooms .hero-content {
  min-width: 0 !important;
}

.hero--rooms .hero-image {
  width: 100% !important;
  max-width: 460px !important;
  height: 380px !important;
  margin: 0 0 0 auto !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.22) !important;
  background: #111 !important;
}

.hero--rooms .hero-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.room-image-slider {
  height: 420px !important;
  max-width: 560px !important;
  margin-left: auto !important;
}

@media (max-width: 900px) {
  .hero--rooms .hero-inner {
    grid-template-columns: 1fr !important;
  }

  .hero--rooms .hero-image {
    max-width: 100% !important;
    height: 320px !important;
    margin: 1.25rem 0 0 !important;
  }

  .room-image-slider {
    height: 330px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 640px) {
  .hero--rooms .hero-image {
    height: 260px !important;
    border-radius: 18px !important;
  }

  .room-image-slider {
    height: 280px !important;
  }
}


/* FINAL LIVE ROOM SLIDER FIX */

  
    /* Live fix: keep the recently upgraded rooms slider visible and contained */
    .room-upgrade-section { background:#fff !important; padding:3.5rem 0 !important; }
    .room-upgrade-inner {
      display:grid !important;
      grid-template-columns:minmax(0,0.9fr) minmax(320px,1.1fr) !important;
      gap:2rem !important;
      align-items:center !important;
    }
    .room-upgrade-copy { min-width:0 !important; }
    .room-upgrade-copy p { max-width:580px !important; }
    .room-image-slider {
      display:block !important;
      position:relative !important;
      width:100% !important;
      max-width:620px !important;
      min-height:420px !important;
      height:420px !important;
      margin:0 auto !important;
      border-radius:22px !important;
      overflow:hidden !important;
      background:#f2f2f2 !important;
      box-shadow:0 18px 36px rgba(0,0,0,.18) !important;
    }
    .room-slider-frame { position:relative !important; width:100% !important; height:100% !important; }
    .room-slider-img {
      display:block !important;
      position:absolute !important;
      inset:0 !important;
      width:100% !important;
      height:100% !important;
      max-width:none !important;
      object-fit:cover !important;
      object-position:center !important;
      opacity:0 !important;
      transition:opacity .7s ease !important;
      z-index:1 !important;
    }
    .room-slider-img.is-active { opacity:1 !important; z-index:2 !important; }
    .room-slider-dots {
      position:absolute !important;
      left:50% !important;
      bottom:14px !important;
      transform:translateX(-50%) !important;
      display:flex !important;
      gap:8px !important;
      z-index:5 !important;
    }
    .room-slider-dots button {
      width:10px !important;
      height:10px !important;
      border-radius:999px !important;
      border:0 !important;
      padding:0 !important;
      background:rgba(255,255,255,.65) !important;
      cursor:pointer !important;
    }
    .room-slider-dots button.is-active { background:#ff6600 !important; width:22px !important; }
    @media (max-width:900px) {
      .room-upgrade-inner { grid-template-columns:1fr !important; }
      .room-image-slider { max-width:100% !important; height:430px !important; min-height:430px !important; }
    }
    @media (max-width:600px) {
      .room-image-slider { height:380px !important; min-height:380px !important; border-radius:18px !important; }
    }

/* Homepage inline styling consolidated into main stylesheet */

    .home-new-year-link {
      display: inline-flex;
      align-items: center;
      margin: 0.35rem 0 0.75rem;
      color: #ffffff;
      font-size: 0.98rem;
      line-height: 1.35;
      font-weight: 800;
      text-decoration: none;
    }

    .home-new-year-link:hover {
      color: #ffffff;
      text-decoration: underline;
    }

    @media (max-width: 768px) {
      .home-new-year-link {
        display: block;
        margin: 0.35rem 0 0.7rem;
        font-size: 0.92rem;
        line-height: 1.35;
      }
    }
  

    .home-hero-final {
      min-height: 0 !important;
      padding: 58px 0 !important;
      overflow: hidden !important;
    }

    .home-hero-final .hero-modern-inner {
      width: min(1220px, calc(100% - 40px)) !important;
      max-width: 1220px !important;
      margin: 0 auto !important;
      padding: 0 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
      gap: 46px !important;
      align-items: center !important;
    }

    .home-hero-final .hero-modern-copy {
      align-self: center !important;
      max-width: 540px !important;
      margin: 0 !important;
    }

    .home-hero-final .hero-modern-image.hero-image-slider {
      position: relative !important;
      display: block !important;
      width: 100% !important;
      max-width: 640px !important;
      height: clamp(360px, 32vw, 500px) !important;
      min-height: 0 !important;
      margin: 0 0 0 auto !important;
      padding: 0 !important;
      overflow: hidden !important;
      border-radius: 24px !important;
      background: #111 !important;
      box-shadow: 0 24px 56px rgba(0,0,0,.28) !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-frame {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      overflow: hidden !important;
      border-radius: inherit !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-img {
      position: absolute !important;
      inset: 0 !important;
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      object-fit: cover !important;
      object-position: center !important;
      opacity: 0 !important;
      visibility: hidden !important;
      z-index: 1 !important;
      transform: scale(1.02) !important;
      transition: opacity .75s ease, visibility .75s ease, transform 1.4s ease !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-img.is-active {
      opacity: 1 !important;
      visibility: visible !important;
      z-index: 2 !important;
      transform: scale(1) !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-dots {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 16px !important;
      z-index: 5 !important;
      display: flex !important;
      justify-content: center !important;
      gap: 9px !important;
      pointer-events: auto !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-dots button {
      width: 10px !important;
      height: 10px !important;
      min-width: 0 !important;
      padding: 0 !important;
      border: 1px solid rgba(255,255,255,.9) !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.65) !important;
      cursor: pointer !important;
    }

    .home-hero-final .hero-image-slider .hero-slider-dots button.is-active {
      width: 26px !important;
      background: #ff6600 !important;
    }

    @media (max-width: 900px) {
      .home-hero-final .hero-modern-inner {
        width: min(100% - 28px, 720px) !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
      }

      .home-hero-final .hero-modern-copy {
        max-width: 100% !important;
      }

      .home-hero-final .hero-modern-image.hero-image-slider {
        max-width: 100% !important;
        height: 360px !important;
        margin: 0 !important;
      }
    }

    @media (max-width: 640px) {
      .home-hero-final {
        padding: 34px 0 !important;
      }

      .home-hero-final .hero-modern-image.hero-image-slider {
        height: 285px !important;
        border-radius: 18px !important;
      }
    }