/*
  Nuthurst Grange — Accommodation Page
  Design System: Occasions-aligned · Lusion-inspired gallery experience
  Palette: Occasions dark tokens · #0A0A0A base
  Typography: Playfair Display + Inter (exact Occasions system)
  Version: 2.0 — Refined 30 July 2026
*/

/* ============================================================
   IMPORTS — Exact Occasions font stack
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

/* ============================================================
   DESIGN TOKENS — Exact Occasions values
============================================================ */

:root {
    /* Occasions colour system */
    --color-bg:             #0A0A0A;
    --color-card-bg:        #121212;
    --color-card-hover:     #181818;
    --color-text:           #C2C0B8;
    --color-text-muted:     #9E9C95;
    --color-ivory:          #FAF9F6;
    --color-ivory-muted:    #D1CFCA;
    --color-gold:           #C5A059;
    --color-gold-hover:     #E2BD75;
    --color-border:         rgba(250, 249, 246, 0.08);
    --color-border-active:  rgba(250, 249, 246, 0.2);
    --color-overlay:        rgba(10, 10, 10, 0.65);

    /* Typography */
    --font-serif:   'Playfair Display', Georgia, serif;
    --font-sans:    'Inter', -apple-system, sans-serif;

    /* Spacing */
    --spacing-xs:   1rem;
    --spacing-sm:   2.2rem;
    --spacing-md:   4.5rem;
    --spacing-lg:   8rem;
    --spacing-xl:   12rem;

    /* Transitions */
    --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   RESET & BASE
============================================================ */

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

html {
    scroll-behavior: smooth;
    background-color: var(--color-bg);
    font-size: 16px;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

ul { list-style: none; }

h1, h2, h3, h4, .serif {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--color-ivory);
}

p { font-weight: 300; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .fade-in { opacity: 1 !important; transform: none !important; }
    .custom-cursor { display: none !important; }
}

/* ============================================================
   LAYOUT UTILITIES
============================================================ */

.container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4%;
}

.section-padding {
    padding: var(--spacing-lg) 0;
}

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

.label-uppercase {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-gold);
    font-weight: 600;
    display: block;
    margin-bottom: 1.5rem;
}

.section-index {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-gold);
    opacity: 0.7;
    margin-bottom: 1.5rem;
}

.br-desktop { display: inline; }

/* ============================================================
   SCROLL ANIMATIONS — matching Occasions fade-in
============================================================ */

.fade-in {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s var(--ease-out-expo),
                transform 0.8s var(--ease-out-expo);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in.delay-1 { transition-delay: 0.15s; }
.fade-in.delay-2 { transition-delay: 0.3s; }
.fade-in.delay-3 { transition-delay: 0.45s; }

/* ============================================================
   CUSTOM CURSOR — fountain pen nib (desktop only)
============================================================ */

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 44px;
    height: 56px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.cursor-nib {
    width: 20px;
    height: 28px;
    display: block;
}

.cursor-label {
    font-family: var(--font-sans);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold);
    display: block;
    line-height: 1;
}

.custom-cursor.visible { opacity: 1; }

body.custom-cursor-active { cursor: none; }

/* ============================================================
   BUTTONS — Exact Occasions style
============================================================ */

.btn {
    display: inline-block;
    padding: 1.25rem 2.8rem;
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.8rem;
    cursor: pointer;
    border: none;
    transition: var(--transition-smooth);
    position: relative;
    z-index: 1;
    text-align: center;
}

.btn-primary {
    background-color: var(--color-gold);
    color: #0A0A0A;
}

.btn-primary:hover {
    background-color: var(--color-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.18);
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-ivory);
}

.btn-secondary:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
    transform: translateY(-2px);
}

.btn-sm {
    padding: 0.75rem 1.8rem;
    font-size: 0.72rem;
}

.btn-group {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-book-nav {
    padding: 0.6rem 1.2rem !important;
    font-size: 0.75rem !important;
    border: 1px solid var(--color-gold) !important;
    color: var(--color-gold) !important;
    background: transparent !important;
}

.btn-book-nav:hover {
    background: var(--color-gold) !important;
    color: #0A0A0A !important;
}

/* ============================================================
   NAVIGATION — Exact Occasions structure, cinematic dark variant
============================================================ */

nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2.2rem 0;
    z-index: 200;
    transition: var(--transition-smooth);
    border-bottom: 1px solid rgba(250, 249, 246, 0.03);
}

nav.sticky {
    position: fixed;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo — white pill on dark background (Occasions treatment) */
nav .logo {
    display: inline-flex;
    background-color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

nav .logo img {
    height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Nav links */
nav .nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    list-style: none;
}

nav .nav-links > li > a {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ivory-muted);
    white-space: nowrap;
}

nav .nav-links > li > a:hover,
nav .nav-links > li > a.active {
    color: var(--color-gold);
}

/* Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown .dropdown-trigger {
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 1.2rem);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12, 12, 12, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--color-border);
    min-width: 200px;
    padding: 0.8rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.35s var(--ease-out-expo),
                transform 0.35s var(--ease-out-expo),
                visibility 0.35s;
    list-style: none;
    z-index: 300;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu li a {
    display: block;
    padding: 0.7rem 1.5rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-ivory-muted);
    letter-spacing: 0.04em;
    transition: color 0.25s ease, padding-left 0.25s ease;
}

.dropdown-menu li a:hover {
    color: var(--color-gold);
    padding-left: 1.9rem;
}

/* Mobile toggle */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 18px;
    position: relative;
    z-index: 210;
}

.mobile-nav-toggle span {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-ivory);
    position: absolute;
    left: 0;
    transition: var(--transition-smooth);
}

.mobile-nav-toggle span:nth-child(1) { top: 0; }
.mobile-nav-toggle span:nth-child(2) { top: 8px; }
.mobile-nav-toggle span:nth-child(3) { top: 16px; }

.mobile-nav-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.mobile-nav-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile menu — Occasions style */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100dvh;
    background-color: #0A0A0A;
    z-index: 205;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: right 0.6s var(--ease-out-expo);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 7rem 2rem 5rem 2rem;
}

.mobile-menu.active { right: 0; }

.mobile-menu-close {
    position: absolute;
    top: 2.2rem;
    right: 5%;
    background: none;
    border: none;
    color: var(--color-ivory);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    z-index: 206;
    transition: color 0.3s ease;
}

.mobile-menu-close:hover { color: var(--color-gold); }

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    text-align: center;
    width: 100%;
    list-style: none;
}

.mobile-menu-links a {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    color: var(--color-ivory);
    font-weight: 300;
    display: inline-block;
    padding: 0.2rem 0;
    transition: color 0.3s ease;
}

.mobile-menu-links a:hover,
.mobile-menu-links a.active { color: var(--color-gold); }

.mobile-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    list-style: none;
}

.mobile-submenu li a {
    font-size: 0.95rem !important;
    color: var(--color-text-muted) !important;
    font-family: var(--font-sans) !important;
}

.mobile-submenu li a:hover { color: var(--color-gold) !important; }

/* ============================================================
   SECTION 1: HERO
============================================================ */

.hero {
    height: 100svh;
    min-height: 700px;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #0A0A0A;
}

.hero-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.05);
    animation: heroDrift 28s ease-out forwards;
    will-change: transform;
}

@keyframes heroDrift {
    from { transform: scale(1.05); }
    to   { transform: scale(1.0); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(ellipse at center top, transparent 20%, rgba(10,10,10,0.3) 60%),
                linear-gradient(180deg,
                    rgba(10,10,10,0.35) 0%,
                    rgba(10,10,10,0.15) 40%,
                    rgba(10,10,10,0.55) 75%,
                    rgba(10,10,10,0.88) 100%);
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4% clamp(4rem, 8vh, 7rem);
    width: 100%;
}

.hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.hero-meta .label-uppercase { margin-bottom: 0; }

.hero-index {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--color-gold);
    opacity: 0.6;
}

.hero-headline {
    font-size: clamp(3.2rem, 7.5vw, 6rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-ivory);
    margin-bottom: 2rem;
    max-width: 780px;
    font-style: italic;
}

.hero-sub {
    font-size: clamp(0.88rem, 1.4vw, 1rem);
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: 3.5rem;
    max-width: 520px;
    font-weight: 300;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Scroll cue */
.scroll-cue {
    position: absolute;
    bottom: 2.5rem;
    right: 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    z-index: 3;
    color: var(--color-text-muted);
    transition: opacity 0.4s ease;
}

.scroll-cue:hover { opacity: 0.6; }

.scroll-cue-line {
    display: block;
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, var(--color-gold), transparent);
    animation: scrollLine 2.2s ease-in-out infinite;
}

@keyframes scrollLine {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

.scroll-cue-label {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    color: var(--color-text-muted);
}

/* ============================================================
   SECTION 2: LIGHT ENTERING DARKNESS
============================================================ */

.s-light {
    padding: var(--spacing-lg) 0;
    background: linear-gradient(160deg, #0A0A0A 0%, #0f0e0b 100%);
    overflow: hidden;
}

.light-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4%;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 6%;
    align-items: center;
}

.light-image-primary {
    position: relative;
}

.light-img-wrap {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
}

.light-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 12s ease-out;
}

.light-img-wrap:hover .light-img { transform: scale(1.03); }

/* Veil overlay that reduces on scroll — controlled by JS */
.light-img-veil {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    transition: opacity 1.2s ease;
    pointer-events: none;
}

.light-img-veil.revealed { opacity: 0; }

/* Small detail image — offset, appears at different speed */
.light-detail-img {
    position: absolute;
    bottom: -2.5rem;
    right: -2.5rem;
    width: 42%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border: 3px solid #0A0A0A;
}

.light-detail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.light-text {
    padding: 2rem 0;
}

.light-headline {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--color-ivory);
    margin-bottom: 2.5rem;
    font-style: italic;
}

.light-body {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    color: var(--color-text);
    line-height: 1.85;
    margin-bottom: 1.2rem;
    max-width: 400px;
}

/* ============================================================
   SECTION 3: CROSSING THRESHOLDS
============================================================ */

.s-threshold {
    padding: var(--spacing-lg) 0;
    background: #090909;
    overflow: hidden;
    border-top: 1px solid var(--color-border);
}

.threshold-header {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4%;
    margin-bottom: var(--spacing-md);
}

.threshold-headline {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-ivory);
    font-style: italic;
}

/* Three-layer parallax composition */
.threshold-layers {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4%;
    position: relative;
    height: 620px;
    display: grid;
    grid-template-columns: 1fr;
}

.t-layer {
    position: absolute;
    overflow: hidden;
    will-change: transform;
    transition: transform 0.05s linear;
}

/* Back layer: large, left-anchored bedroom view */
.t-layer-back {
    left: 0;
    top: 0;
    width: 54%;
    height: 100%;
    z-index: 1;
}

/* Mid layer: portrait, centre-right */
.t-layer-mid {
    right: 28%;
    top: 6%;
    width: 28%;
    height: 80%;
    z-index: 2;
    border: 2px solid #0A0A0A;
}

/* Front layer: small, far right, offset low */
.t-layer-front {
    right: 0;
    top: 14%;
    width: 26%;
    height: 70%;
    z-index: 3;
    border: 2px solid #0A0A0A;
}

.t-layer-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s ease-out;
}

.threshold-caption {
    max-width: 1360px;
    margin: 3.5rem auto 0;
    padding: 0 4%;
}

.threshold-caption p {
    font-size: clamp(0.88rem, 1.3vw, 1rem);
    color: var(--color-text-muted);
    line-height: 1.85;
    max-width: 520px;
}

/* ============================================================
   SECTION 4: OPENING THE COLLECTION
============================================================ */

.s-collection {
    padding: var(--spacing-lg) 0;
    background: #0A0A0A;
    border-top: 1px solid var(--color-border);
    overflow: hidden;
}

.collection-header {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4%;
    margin-bottom: 4rem;
    display: flex;
    align-items: flex-start;
    gap: 4rem;
}

.collection-headline {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-ivory);
    font-style: italic;
}

.collection-sub {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    padding-top: 1.2rem;
    max-width: 200px;
    line-height: 1.6;
}

/* Gallery stack — CSS grid contact sheet */
.collection-stack {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: 1rem;
}

.stack-item {
    position: relative;
    overflow: hidden;
    cursor: none; /* Custom cursor takes over */
}

.stack-item-primary {
    grid-column: 1 / 7;
    grid-row: 1 / 2;
    aspect-ratio: 4/3;
}

.stack-item-portrait {
    grid-column: 7 / 10;
    grid-row: 1 / 2;
    aspect-ratio: 3/4;
}

.stack-item-landscape {
    grid-column: 10 / 13;
    grid-row: 1 / 2;
    aspect-ratio: 2/3;
}

.stack-item-small {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
    aspect-ratio: 4/3;
}

.stack-item-small-2 {
    grid-column: 5 / 8;
    grid-row: 2 / 3;
    aspect-ratio: 4/3;
}

.stack-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ease-out-expo);
    will-change: transform;
}

.stack-item:hover .stack-img { transform: scale(1.04); }

.stack-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.75) 100%);
    transition: opacity 0.5s ease;
}

.stack-item:hover .stack-overlay {
    background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,0.85) 100%);
}

.stack-caption {
    position: absolute;
    bottom: 1.2rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.stack-cat {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.stack-cue {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--color-ivory);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.stack-item:hover .stack-cue {
    opacity: 1;
    transform: translateX(0);
}

/* Photo hover effect — triggers custom cursor */
.photo-hover { position: relative; }

/* ============================================================
   SECTION 5: WINDOWS AND VIEWS
============================================================ */

.s-windows {
    padding: var(--spacing-lg) 0;
    background: linear-gradient(160deg, #0A0A0A 0%, #1a1711 60%, #2a241a 100%);
    border-top: 1px solid var(--color-border);
    overflow: hidden;
}

/* Horizontally expanding frame — from narrow to wide on scroll */
.windows-frame-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4%;
    margin-bottom: 4rem;
}

.windows-frame {
    position: relative;
    overflow: hidden;
    width: 60%; /* starts narrow */
    aspect-ratio: 21/9;
    margin: 0 auto;
    transition: width 1.2s var(--ease-out-expo);
}

.windows-frame.expanded {
    width: 100%;
}

.windows-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transition: transform 12s ease-out;
}

.windows-frame:hover .windows-img { transform: scale(1.02); }

.windows-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.25);
    transition: opacity 1.2s ease;
}

.windows-frame.expanded .windows-overlay { opacity: 0; }

/* Text content */
.windows-content {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4%;
}

.windows-headline {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-ivory);
    font-style: italic;
    margin-bottom: 2rem;
}

.windows-body {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    color: var(--color-text);
    line-height: 1.85;
    max-width: 480px;
}

/* ============================================================
   SECTION 6: COMFORT IN THE DETAILS
============================================================ */

.s-details {
    padding: var(--spacing-lg) 0;
    background: #080808;
    border-top: 1px solid var(--color-border);
}

.details-header {
    margin-bottom: 4rem;
}

.details-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-ivory);
    font-style: italic;
}

/* Mosaic grid */
.details-mosaic {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: 1rem;
    margin-bottom: 4rem;
}

.detail-item {
    position: relative;
    overflow: hidden;
    cursor: none;
}

.detail-lg {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    aspect-ratio: 3/4;
}

.detail-sm:nth-child(2) {
    grid-column: 6 / 9;
    grid-row: 1 / 2;
    aspect-ratio: 4/3;
}

.detail-sm:nth-child(3) {
    grid-column: 9 / 13;
    grid-row: 1 / 2;
    aspect-ratio: 4/3;
}

.detail-md:nth-child(4) {
    grid-column: 6 / 9;
    grid-row: 2 / 3;
    aspect-ratio: 4/3;
}

.detail-md:nth-child(5) {
    grid-column: 9 / 13;
    grid-row: 2 / 3;
    aspect-ratio: 4/3;
}

.detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ease-out-expo);
    will-change: transform;
}

.detail-item:hover .detail-img { transform: scale(1.04); }

/* Pointer/tilt inner — desktop only, subtle magnetic */
.detail-tilt-inner {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Read more accordion */
.details-readmore-wrap {
    border-top: 1px solid var(--color-border);
    padding-top: 3rem;
}

.details-readmore-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
    padding: 0;
    transition: color 0.3s ease;
}

.details-readmore-btn:hover { color: var(--color-gold-hover); }

.readmore-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.4s var(--ease-out-expo);
    flex-shrink: 0;
}

.details-readmore-btn[aria-expanded="true"] .readmore-icon {
    transform: rotate(180deg);
}

.details-readmore-panel {
    padding-top: 2.5rem;
    overflow: hidden;
}

.details-readmore-panel[hidden] {
    display: none;
}

.details-included-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 2.5rem;
}

.details-included-list li {
    font-size: 0.9rem;
    color: var(--color-ivory-muted);
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.5;
}

.details-included-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 4px;
    height: 4px;
    background: var(--color-gold);
    border-radius: 50%;
}

/* ============================================================
   SECTION 7: ONE STAY, MANY REASONS
============================================================ */

.s-reasons {
    padding: var(--spacing-lg) 0;
    background: #090909;
    border-top: 1px solid var(--color-border);
    overflow: hidden;
}

.reasons-header {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4%;
    margin-bottom: 4rem;
}

.reasons-headline {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-ivory);
    font-style: italic;
}

.reasons-grid {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.reason-item {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.reason-img-wrap {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    cursor: none;
}

.reason-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ease-out-expo);
}

.reason-img-wrap:hover .reason-img { transform: scale(1.04); }

.reason-line {
    font-family: var(--font-serif);
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    color: var(--color-ivory-muted);
    font-style: italic;
    line-height: 1.4;
    font-weight: 300;
    padding: 0 0.2rem;
}

/* ============================================================
   SECTION 8: COMPLETE ROOM COLLECTION
============================================================ */

.s-rooms {
    padding: var(--spacing-lg) 0;
    background: #0A0A0A;
    border-top: 1px solid var(--color-border);
}

.rooms-header {
    margin-bottom: 4rem;
}

.rooms-headline {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-ivory);
    font-style: italic;
}

.rooms-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.room-row {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.4s ease;
}

.room-row:hover { background: rgba(250, 249, 246, 0.015); }

.room-row-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    cursor: none;
}

.room-row-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ease-out-expo);
}

.room-row-image:hover .room-row-img { transform: scale(1.04); }

.room-row-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.25);
    transition: opacity 0.5s ease;
}

.room-row-image:hover .room-row-overlay { opacity: 0.15; }

.room-view-label {
    position: absolute;
    bottom: 1.2rem;
    right: 1.2rem;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-gold);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.room-row-image:hover .room-view-label {
    opacity: 1;
    transform: translateY(0);
}

.room-row-info {
    padding: 3rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--color-border);
}

.room-row-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.2rem;
    gap: 1rem;
}

.room-row-title {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 400;
    color: var(--color-ivory);
    line-height: 1.2;
}

.room-row-type {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-gold);
    white-space: nowrap;
    padding-top: 0.4rem;
}

.room-row-desc {
    font-size: 0.92rem;
    color: var(--color-text);
    line-height: 1.75;
    margin-bottom: 2rem;
    max-width: 480px;
}

.room-row-actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Accordion button */
.room-accordion-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0;
    transition: color 0.3s ease;
}

.room-accordion-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.35s var(--ease-out-expo);
    flex-shrink: 0;
}

.room-accordion-btn:hover { color: var(--color-ivory-muted); }

.room-accordion-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.room-accordion-panel {
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
}

.room-accordion-panel[hidden] { display: none; }

.room-facts {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.room-facts li {
    font-size: 0.87rem;
    color: var(--color-ivory-muted);
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.5;
}

.room-facts li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 4px;
    height: 4px;
    background: var(--color-gold);
    border-radius: 50%;
}

/* ============================================================
   SECTION 9: EVERYTHING CONSIDERED
============================================================ */

.s-considered {
    padding: var(--spacing-lg) 0;
    background: #050505;
    border-top: 1px solid var(--color-border);
}

.considered-inner {
    text-align: center;
}

.considered-headline {
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-ivory);
    font-style: italic;
    margin-bottom: 4rem;
}

.considered-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0;
}

.considered-items span {
    font-family: var(--font-sans);
    font-size: clamp(0.8rem, 1.2vw, 0.92rem);
    color: var(--color-text-muted);
    font-weight: 300;
    letter-spacing: 0.04em;
    padding: 0.4rem 1.2rem;
    position: relative;
}

.considered-items span:not(:last-child)::after {
    content: '·';
    position: absolute;
    right: -0.15rem;
    color: var(--color-gold);
    opacity: 0.4;
}

/* ============================================================
   SECTION 10: MORNING BRIDGE (exterior)
============================================================ */

.s-morning {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-top: 1px solid var(--color-border);
}

.morning-img-wrap {
    position: absolute;
    inset: 0;
}

.morning-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
    transition: transform 14s ease-out;
}

.s-morning:hover .morning-bg { transform: scale(1.02); }

.morning-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 10, 10, 0.82) 0%,
        rgba(10, 10, 10, 0.65) 40%,
        rgba(10, 10, 10, 0.2) 100%
    );
}

.morning-content {
    position: relative;
    z-index: 2;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 4%;
    width: 100%;
}

.morning-headline {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-ivory);
    font-style: italic;
    margin-bottom: 2rem;
    max-width: 640px;
}

.morning-sub {
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    color: var(--color-text);
    line-height: 1.8;
    max-width: 480px;
}

/* ============================================================
   SECTION 11: BOOKING
============================================================ */

.s-booking {
    padding: var(--spacing-lg) 0;
    background: #080808;
    border-top: 1px solid var(--color-border);
}

.booking-inner {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.booking-headline {
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 300;
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--color-ivory);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.booking-sub {
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.75;
    margin-bottom: 3.5rem;
}

.booking-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.booking-email {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.booking-email a {
    color: var(--color-gold);
    border-bottom: 1px solid rgba(197, 160, 89, 0.3);
    transition: border-color 0.3s ease, color 0.3s ease;
}

.booking-email a:hover {
    color: var(--color-gold-hover);
    border-color: var(--color-gold);
}

/* ============================================================
   FOOTER — Exact Occasions structure
============================================================ */

footer {
    background-color: #050505;
    color: var(--color-text-muted);
    padding: 6rem 0 3rem 0;
    border-top: 1px solid var(--color-border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3.5rem;
    margin-bottom: 4rem;
}

.footer-logo {
    display: inline-flex;
    background-color: #ffffff;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.8rem;
    transition: box-shadow 0.35s ease;
}

.footer-logo:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }

.footer-logo img {
    height: 48px;
    width: auto;
    display: block;
    object-fit: contain;
}

.footer-desc {
    font-size: 0.9rem;
    max-width: 320px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.footer-column h4 {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold);
    margin-bottom: 1.8rem;
    font-weight: 600;
}

.footer-column ul li {
    margin-bottom: 0.8rem;
}

.footer-column ul li a {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.footer-column ul li a:hover { color: var(--color-gold); }

.footer-bottom {
    border-top: 1px solid rgba(250, 249, 246, 0.04);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-bottom p {
    font-size: 0.78rem;
}

.footer-bottom-links {
    display: flex;
    gap: 2rem;
}

.footer-bottom-links a {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover { color: var(--color-gold); }

/* ============================================================
   GALLERY LIGHTBOX
============================================================ */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox[hidden] { display: none; }

.gallery-bg {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.gallery-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.gallery-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gallery-category {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-gold);
    display: block;
}

.gallery-intro {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--color-ivory-muted);
    font-style: italic;
    display: block;
    max-width: 480px;
    line-height: 1.5;
}

.gallery-controls-top {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.gallery-counter {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.gallery-close {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-ivory-muted);
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.gallery-close svg { width: 18px; height: 18px; }
.gallery-close:hover { border-color: var(--color-gold); color: var(--color-gold); }

.gallery-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
}

.gallery-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.4s ease;
}

.gallery-img.loading { opacity: 0; }

.gallery-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5rem;
    flex-shrink: 0;
}

.gallery-prev,
.gallery-next {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-ivory-muted);
    cursor: pointer;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.gallery-prev svg,
.gallery-next svg { width: 20px; height: 20px; }

.gallery-prev:hover,
.gallery-next:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.gallery-prev:hover { transform: translateX(-3px); }
.gallery-next:hover { transform: translateX(3px); }

.gallery-footer-info {
    display: flex;
    justify-content: center;
}

.btn-gallery {
    padding: 0.9rem 2.2rem;
    font-size: 0.75rem;
}

/* ============================================================
   FOCUS STATES — Accessibility
============================================================ */

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

/* ============================================================
   RESPONSIVE — 1200px
============================================================ */

@media (max-width: 1200px) {
    .room-row {
        grid-template-columns: 380px 1fr;
    }
    .threshold-layers { height: 480px; }
    .t-layer-back { width: 56%; }
    .t-layer-mid { right: 30%; width: 26%; }
    .t-layer-front { width: 24%; }
}

/* ============================================================
   RESPONSIVE — 1024px (Tablet)
============================================================ */

@media (max-width: 1024px) {
    :root {
        --spacing-lg: 5.5rem;
        --spacing-md: 3.5rem;
    }

    /* Nav */
    nav .nav-links { display: none; }
    .mobile-nav-toggle { display: block; }
    .mobile-nav-toggle.open { position: fixed; top: 2.2rem; right: 5%; }

    /* Sections */
    .light-inner {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .light-img-wrap { aspect-ratio: 16/10; max-width: 100%; }
    .light-detail-img { width: 35%; }

    .threshold-layers {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding-bottom: 1rem;
    }

    .t-layer, .t-layer-back, .t-layer-mid, .t-layer-front {
        position: static;
        width: 100%;
        aspect-ratio: 16/9;
        border: none;
    }

    .collection-header { flex-direction: column; gap: 1.5rem; }

    .collection-stack {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 1rem;
    }

    .stack-item-primary { grid-column: 1 / 3; aspect-ratio: 16/9; }
    .stack-item-portrait { grid-column: 1 / 2; aspect-ratio: 4/3; }
    .stack-item-landscape { grid-column: 2 / 3; aspect-ratio: 4/3; }
    .stack-item-small { grid-column: 1 / 2; aspect-ratio: 4/3; }
    .stack-item-small-2 { grid-column: 2 / 3; aspect-ratio: 4/3; }

    .windows-frame { width: 80%; aspect-ratio: 16/9; }

    .details-mosaic {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .detail-lg, .detail-sm, .detail-md {
        flex: 1 1 calc(50% - 0.5rem);
        aspect-ratio: 4/3;
    }

    .reasons-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }

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

    .room-row-image {
        aspect-ratio: 16/9;
        height: 280px;
    }

    .room-row-info { border-left: none; border-top: 1px solid var(--color-border); }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem 4%; }
    .footer-grid .footer-column:first-child { grid-column: 1 / 3; }

    .details-included-list { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   RESPONSIVE — 768px (Mobile)
============================================================ */

@media (max-width: 768px) {
    :root {
        --spacing-lg: 4rem;
        --spacing-md: 2.8rem;
    }

    .br-desktop { display: none; }

    /* Hero */
    .hero { min-height: 100svh; }
    .hero-meta { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .hero-index { display: none; }
    .hero-actions { flex-direction: column; gap: 1rem; }
    .hero-actions .btn { text-align: center; width: 100%; max-width: 320px; }
    .scroll-cue { display: none; }

    /* Light entering */
    .light-detail-img { display: none; }
    .light-img-wrap { aspect-ratio: 4/3; }

    /* Collection stack */
    .collection-stack {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .stack-item-primary,
    .stack-item-portrait,
    .stack-item-landscape,
    .stack-item-small,
    .stack-item-small-2 {
        grid-column: 1 / 2;
        aspect-ratio: 4/3;
    }

    /* Windows */
    .windows-frame { width: 100%; aspect-ratio: 4/3; }

    /* Details mosaic */
    .detail-lg, .detail-sm, .detail-md {
        flex: 1 1 100%;
        aspect-ratio: 4/3;
    }
    .detail-lg { aspect-ratio: 4/3; }
    .details-included-list { grid-template-columns: 1fr; }

    /* Reasons */
    .reasons-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .reason-img-wrap { aspect-ratio: 3/4; }

    /* Room rows */
    .room-row-image { height: 240px; aspect-ratio: unset; }
    .room-row-info { padding: 2rem 1.5rem; }
    .room-row-head { flex-direction: column; gap: 0.5rem; }

    /* Considered */
    .considered-items { flex-direction: column; gap: 0.3rem; }
    .considered-items span::after { display: none; }

    /* Booking */
    .booking-actions { flex-direction: column; align-items: center; }
    .booking-actions .btn { width: 100%; max-width: 300px; text-align: center; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; }
    .footer-grid .footer-column:first-child { grid-column: 1; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links { justify-content: center; }

    /* Gallery lightbox */
    .gallery-inner { padding: 1rem; }
    .gallery-intro { display: none; }

    /* Custom cursor disabled on touch */
    .custom-cursor { display: none; }
}

/* ============================================================
   PRINT
============================================================ */

@media print {
    .mobile-menu, #navbar, .scroll-cue,
    .custom-cursor, .gallery-lightbox { display: none; }
    body { background: white; color: black; }
}


/* ============================================================
   ART DIRECTION POP PASS 2026
============================================================ */
:root {
    --color-pure-black: #000000;
    --color-soft-black: #0A0A0A;
    --color-charcoal: #1A1A1A;
    --color-warm-offwhite: #F4F0EB;
    --color-clean-white: #FFFFFF;
}

.bg-off-white { background-color: var(--color-warm-offwhite) !important; }
.bg-black { background-color: var(--color-soft-black) !important; }
.bg-charcoal { background-color: var(--color-charcoal) !important; }

.text-dark,
.text-dark * {
    color: var(--color-pure-black) !important;
}

.text-dark .stack-cat { color: var(--color-pure-black) !important; }
.text-dark .stack-cue { color: var(--color-pure-black) !important; }

.text-light { color: var(--color-text) !important; }
h1.text-light, h2.text-light, h3.text-light { color: var(--color-ivory) !important; }

/* Mixed Typography */
.serif i {
    font-style: italic;
    font-weight: 300;
}

/* Button variants */
.btn-text-link {
    display: inline-block;
    color: var(--color-ivory);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    border-bottom: 1px solid rgba(250, 249, 246, 0.4);
    padding-bottom: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-text-link:hover {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold);
}

.btn-secondary-dark {
    display: inline-block;
    padding: 0.875rem 2rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    color: var(--color-pure-black);
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.btn-secondary-dark:hover {
    border-color: var(--color-pure-black);
    background-color: rgba(0,0,0,0.05);
}

/* Hero Enhancements */
.hero-editorial-line {
    width: 1px;
    height: 60px;
    background-color: var(--color-gold);
    margin: 1.5rem auto;
}
.hero-large-bg-text {
    position: absolute;
    bottom: -5vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Playfair Display', serif;
    font-size: 20vw;
    color: rgba(255,255,255,0.02);
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
}
.hero-content {
    z-index: 2;
    padding-top: 10vh; /* Adjust alignment to prevent overcrowding */
}
.hero-headline {
    font-size: clamp(3.5rem, 6vw, 6rem);
}

/* Crossing Thresholds */
.s-threshold {
    padding-bottom: 10rem;
}
.t-layer-narrow {
    position: absolute;
    top: 55%;
    left: 70%;
    width: 20%;
    max-width: 250px;
    z-index: 4;
}

/* Opening the Collection */
.collection-header-strip {
    background-color: var(--color-soft-black);
    padding: 6rem 0;
    text-align: center;
}
.collection-header-strip .collection-headline { color: var(--color-ivory); }
.collection-header-strip .collection-sub { color: var(--color-text); }
.collection-stack {
    padding: 6rem 4%;
    margin-top: -3rem; /* overlap */
}

/* Windows and views overlap */
.windows-img { width: 100vw; max-width: none; margin-left: calc(-50vw + 50%); }

/* One Stay Many Reasons */
.reasons-editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: 1.5rem;
    padding: 0 4%;
    max-width: 1400px;
    margin: 0 auto;
}
.r-item { position: relative; }
.r-num {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    position: absolute;
    top: -20px;
    left: 0;
    color: var(--color-gold);
}
.r-caption {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    margin-top: 1rem;
    color: var(--color-gold);
}
.r-img-wrap { overflow: hidden; width: 100%; }
.r-img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.r-img-wrap:hover img { transform: scale(1.05); }

.r-arrive { grid-column: 1 / 5; margin-top: 4rem; }
.r-arrive .r-img-wrap { aspect-ratio: 4/5; }

.r-settle { grid-column: 6 / 13; margin-top: 0; }
.r-settle .r-img-wrap { aspect-ratio: 16/9; }

.r-meet { grid-column: 1 / 7; margin-top: -4rem; z-index: 2; }
.r-panel { padding: 3rem 2rem 2rem 2rem; }
.r-meet .r-img-wrap { aspect-ratio: 1/1; }

.r-stay { grid-column: 8 / 13; margin-top: 6rem; }
.r-stay .r-img-wrap { aspect-ratio: 3/4; }

.r-breakfast { grid-column: 3 / 10; margin-top: 4rem; }
.r-breakfast .r-img-wrap { aspect-ratio: 21/9; }


/* Room Collection Alternating */
.s-rooms { padding: 0; }
.room-strip {
    padding: 6rem 0;
}
.room-strip-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.layout-right .room-strip-inner {
    /* Reverse columns visually */
    direction: rtl;
}
.layout-right .room-strip-content, .layout-right .room-strip-img {
    direction: ltr;
}

.room-strip-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.room-strip-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.room-strip-img:hover img { transform: scale(1.03); }

.room-strip-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.room-strip-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.room-strip-actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

/* Everything Considered Strip */
.s-considered-strip {
    position: relative;
    padding: 4rem 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 35vh;
}
.considered-bg-wrap {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}
.considered-bg {
    width: 100%; height: 100%; object-fit: cover;
}
.considered-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(10,10,10,0.85);
}
.considered-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
}
.considered-content h2 { margin-bottom: 1.5rem; }
.considered-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-ivory-muted);
}
.considered-items .dot { color: var(--color-gold); }

/* Morning Split */
.s-morning-split {
    position: relative;
    padding-bottom: 10rem;
    margin-bottom: -6rem; /* pull up booking */
}
.m-split-primary {
    width: 75%;
    aspect-ratio: 16/9;
}
.m-split-primary img { width: 100%; height: 100%; object-fit: cover; }

.m-split-secondary {
    position: absolute;
    top: 30%;
    right: 5%;
    width: 35%;
    aspect-ratio: 4/5;
    border: 1px solid rgba(255,255,255,0.1);
}
.m-split-secondary img { width: 100%; height: 100%; object-fit: cover; }

.m-split-content {
    position: absolute;
    bottom: -4rem;
    left: 10%;
    background-color: var(--color-bg);
    padding: 3rem 4rem 3rem 0;
    max-width: 600px;
    z-index: 3;
}


/* Mobile Overrides */
@media (max-width: 768px) {
    .reasons-editorial-grid { display: flex; flex-direction: column; gap: 3rem; }
    .r-item { margin-top: 0 !important; }
    .r-arrive, .r-settle, .r-meet, .r-stay, .r-breakfast { width: 100%; }
    .r-panel { padding: 2rem 1.5rem; }
    
    .room-strip-inner { grid-template-columns: 1fr; gap: 2rem; }
    .layout-right .room-strip-inner { direction: ltr; }
    
    .m-split-primary { width: 100%; }
    .m-split-secondary { position: relative; width: 90%; margin: -4rem auto 0; top: auto; right: auto; border: none; }
    .m-split-content { position: relative; bottom: auto; left: 0; padding: 2rem; margin: -2rem 1rem 0; }
}




/* ============================================================
   COMPACT LAYOUT CORRECTION PASS 2026
============================================================ */

/* 1. HERO CTA ALIGNMENT */
.hero-actions-row {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    margin-top: 2rem;
}
.btn-compact {
    padding: 0.875rem 2rem; /* reduce width */
}
@media (max-width: 768px) {
    .hero-actions-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
}

/* 2. GLOBAL SPACING REDUCTION (~30% less) */
.s-light-compact, .s-threshold-compact, .s-collection-compact, .s-windows-compact, .s-details-compact, .s-rooms {
    padding: 4rem 0; /* was roughly 6-8rem */
}
@media (min-width: 1024px) {
    .s-light-compact, .s-threshold-compact, .s-collection-compact, .s-windows-compact, .s-details-compact, .s-rooms {
        padding: 5rem 0;
    }
}
.s-threshold-compact { padding-bottom: 2rem; }

/* 3/4. OPENING THE COLLECTION */
.s-collection-compact {
    overflow: hidden;
}
.collection-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 1024px) {
    .collection-grid {
        grid-template-columns: 300px 1fr;
        align-items: center;
        gap: 4rem;
    }
}
.collection-intro {
    max-width: 400px;
}
.collection-images {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 150px;
    gap: 0.5rem;
    position: relative;
}
@media (min-width: 768px) {
    .collection-images { grid-auto-rows: 200px; }
}
.c-img {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-img:hover {
    transform: translateY(-4px);
    z-index: 5;
}
.c-img img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.c-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    transition: opacity 0.3s;
}
.c-img:hover .c-hover-overlay {
    opacity: 1;
}
.c-label { color: #fff; font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 0.25rem; }
.c-cue { color: var(--color-gold); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }

/* Dense placement */
.c-landscape { grid-column: 1 / 8; grid-row: 1 / 3; }
.c-portrait-1 { grid-column: 8 / 13; grid-row: 1 / 3; }
.c-horizontal { grid-column: 2 / 7; grid-row: 3 / 4; margin-top: -10%; z-index: 2; }
.c-portrait-2 { grid-column: 7 / 12; grid-row: 2 / 4; margin-top: 10%; z-index: 1; }

/* 5. WINDOWS AND VIEWS COMPACT */
.s-windows-compact {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
}
.windows-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 60%;
    z-index: 0;
}
.windows-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.7) 40%, transparent 100%);
    z-index: 1;
}
.windows-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
}
@media (max-width: 768px) {
    .windows-gradient-overlay {
        background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.4) 100%);
    }
    .s-windows-compact { align-items: flex-end; padding-bottom: 3rem; }
}

/* 7. CROSSING THRESHOLDS COMPACT */
.threshold-images {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 3rem;
    position: relative;
}
.t-main { width: 55%; aspect-ratio: 16/9; }
.t-bath { width: 30%; aspect-ratio: 3/4; margin-bottom: 5%; }
.t-narrow { width: 15%; aspect-ratio: 1/2; margin-bottom: -5%; z-index: 2; }
.threshold-images img { width: 100%; height: 100%; object-fit: cover; }

/* 9. COMFORT IN DETAILS COMPACT */
.s-details-compact .details-mosaic {
    max-width: 1400px; /* increased width */
    margin-top: 2rem; /* reduced gap */
}
.details-readmore-wrap {
    margin-top: 3rem; /* reduced gap */
}

/* 10. ROOM COLLECTION THINNER ROWS */
.room-strip-thin {
    padding: 3rem 0; /* thinner padding */
}
.room-strip-inner {
    align-items: center;
}
.room-strip-img {
    aspect-ratio: 16/10; /* wider, less tall image */
}
.room-strip-actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
/* Ensure row actions fit nicely */
@media (max-width: 1024px) {
    .room-strip-actions { flex-wrap: wrap; }
}

/* 11. EVERYTHING CONSIDERED THIN STRIP */
.s-considered-thin {
    position: relative;
    min-height: 280px; /* Compact height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.considered-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    z-index: 0;
}
.considered-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.85);
    z-index: 1;
}

/* 12. MORNING & BOOKING */
.s-morning-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 5rem 4%;
    max-width: 1400px;
    margin: 0 auto;
}
@media (min-width: 1024px) {
    .s-morning-stage {
        grid-template-columns: 1fr 400px;
        align-items: center;
        padding-bottom: 6rem;
    }
}
.m-stage-img-wrap {
    position: relative;
}
.m-stage-main {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.m-stage-sub {
    position: absolute;
    bottom: -15%;
    right: -5%;
    width: 40%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border: 4px solid var(--color-bg);
}
.s-booking-strip {
    padding: 4rem 0;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.booking-strip-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}
@media (max-width: 768px) {
    .booking-strip-actions { flex-direction: column; gap: 1.5rem; }
}




/* ============================================================
   SURGICAL SPACING & OVERLAP FIXES 20260730
============================================================ */

/* Crossing Thresholds Spacing */
.s-threshold-compact {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}
.threshold-images {
    margin-top: 1.5rem !important;
}

/* Morning Section Fixes */
.m-stage-text {
    width: 100%;
    padding: 1rem 0;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
}
.morning-headline {
    font-size: clamp(2.5rem, 5vw, 5.5rem) !important;
    line-height: 1.1;
    word-break: keep-all;
    margin-bottom: 1rem;
}
@media (min-width: 1024px) {
    .s-morning-stage {
        grid-template-columns: 1.2fr 1fr !important; /* Safe column for text */
        gap: 4rem !important;
    }
    .m-stage-sub {
        right: -2rem !important; /* Reduce overlap */
        width: 35% !important;
    }
}
@media (max-width: 1023px) and (min-width: 768px) {
    .s-morning-stage {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .m-stage-sub {
        right: 5% !important;
        bottom: -10% !important;
        width: 40% !important;
    }
    .m-stage-text {
        padding-top: 3rem !important;
    }
}
@media (max-width: 767px) {
    .s-morning-stage {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .m-stage-sub {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        width: 80% !important;
        margin: -15% 0 0 20% !important;
    }
}



/* ============================================================
   EDITORIAL ENHANCEMENT PASS 20260730
============================================================ */

/* Global Editorial Tokens */
.bg-black { background-color: #050505; }
.text-light { color: #f8f8f8; }
.text-gold { color: #C5A059; font-style: italic; }
.section-index-gold { color: #C5A059; font-size: 0.875rem; letter-spacing: 0.1em; font-family: 'Inter', sans-serif; }
.label-line-gold { width: 1px; height: 40px; background-color: #C5A059; margin: 1rem 0; }
.label-line-gold-small { width: 30px; height: 1px; background-color: #C5A059; margin-bottom: 1rem; }
.editorial-headline { font-size: clamp(3rem, 6vw, 6rem); line-height: 1.05; margin-bottom: 2rem; letter-spacing: -0.02em; }
.editorial-body { font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.8); }

/* SECTION 2: LIGHT ENTERING DARKNESS */
.s-light-editorial { padding: 5rem 0 1rem; overflow: hidden; }
.light-editorial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 1024px) {
    .light-editorial-grid {
        grid-template-columns: 65% 1fr;
        gap: 5rem;
        align-items: start;
    }
}
.light-editorial-images {
    position: relative;
    display: flex;
    flex-direction: column;
}
.light-ed-main {
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
}
.light-ed-main img { width: 100%; height: 100%; object-fit: cover; }
.light-ed-detail {
    position: absolute;
    bottom: -12%;
    right: -6%;
    width: 33%;
    aspect-ratio: 3/4;
    border: 1px solid rgba(197, 160, 89, 0.3); /* Subtle gold edge */
    z-index: 2;
    overflow: hidden;
}
.light-ed-detail img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
    .light-ed-detail {
        position: relative;
        bottom: auto; right: auto;
        width: 60%;
        margin-top: -15%;
        margin-left: 20%;
    }
}
.light-editorial-text {
    padding-top: 2rem;
}
@media (min-width: 1024px) {
    .light-editorial-text { padding-top: 5rem; }
}

/* VISUAL CONNECTOR */
.editorial-connector {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 5%;
    max-width: 1400px;
    margin: 0 auto;
}
.connector-line { width: 1px; height: 60px; background-color: rgba(197, 160, 89, 0.4); margin-bottom: 1rem; }
.connector-label { color: rgba(197, 160, 89, 0.7); font-size: 0.7rem; letter-spacing: 0.2em; writing-mode: vertical-rl; transform: rotate(180deg); }

/* SECTION 3: CROSSING THRESHOLDS */
.s-threshold-editorial { padding: 1rem 0 5rem; overflow: hidden; }
.threshold-editorial-top {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .threshold-title-row {
        display: flex;
        align-items: flex-end;
        gap: 4rem;
    }
    .threshold-body { margin-bottom: 2.5rem; max-width: 300px; }
}
.threshold-editorial-images {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    width: 100%;
}
.t-ed-main {
    width: 55%;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.t-ed-bath {
    width: 25%;
    aspect-ratio: 3/4;
    margin-bottom: 4%;
    overflow: hidden;
}
.t-ed-narrow {
    width: 20%;
    aspect-ratio: 1/2;
    margin-bottom: 8%;
    overflow: hidden;
}
.threshold-editorial-images img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
    .threshold-editorial-images { flex-wrap: wrap; align-items: flex-start; }
    .t-ed-main { width: 100%; aspect-ratio: 16/9; }
    .t-ed-bath { width: 60%; margin-top: -10%; margin-bottom: 0; }
    .t-ed-narrow { width: 35%; margin-top: 10%; margin-bottom: 0; }
}
@media (max-width: 767px) {
    .threshold-editorial-images { flex-direction: column; gap: 2rem; }
    .t-ed-main, .t-ed-bath, .t-ed-narrow { width: 100%; margin: 0; aspect-ratio: auto; min-height: 300px; }
}

/* ============================================================
   MOBILE EDITORIAL FLOW FIX 20260731
============================================================ */

@media (max-width: 1023px) {
    /* 2. MOBILE GUTTERS AND DEAD SPACE */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    section:not(.hero) {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        min-height: auto !important;
    }
    
    /* 1. SECTION IMMEDIATELY AFTER THE HERO (Light entering darkness) */
    .light-editorial-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .light-editorial-images,
    .light-editorial-text {
        display: contents !important;
    }
    .editorial-label {
        order: 1 !important;
        margin-bottom: 12px !important;
    }
    .editorial-headline {
        order: 2 !important;
        margin-bottom: 12px !important;
    }
    .editorial-label-small {
        order: 3 !important;
        margin-bottom: 24px !important;
        margin-top: 0 !important;
    }
    .light-ed-main {
        order: 4 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    .light-ed-detail {
        order: 5 !important;
        position: relative !important;
        width: 60% !important;
        margin-top: -15% !important; /* Overlap by approx 15% */
        margin-left: auto !important;
        align-self: flex-end !important;
        bottom: auto !important;
        right: auto !important;
    }

    /* 3. THE FINISHING TOUCHES / COMFORT, CONSIDERED */
    .details-header {
        margin-bottom: 24px !important;
    }
    .details-mosaic {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        position: relative !important;
    }
    
    /* Restrained connecting detail: thin gold vertical line */
    .details-mosaic::before {
        content: '';
        position: absolute;
        top: -15px;
        left: 20px;
        width: 1px;
        height: 40px;
        background-color: var(--color-gold);
        z-index: 10;
    }

    /* Hide the toilet image (2nd image) and 5th image to have 3 images total */
    .details-mosaic .detail-item:nth-child(2),
    .details-mosaic .detail-item:nth-child(5) {
        display: none !important;
    }

    /* Primary image: 1st image */
    .details-mosaic .detail-item:nth-child(1) {
        order: 1 !important;
        width: 95% !important;
        align-self: flex-start !important;
        margin-bottom: 0 !important;
        z-index: 1 !important;
    }

    /* Secondary detail image: 3rd image */
    .details-mosaic .detail-item:nth-child(3) {
        order: 2 !important;
        width: 60% !important;
        align-self: flex-end !important;
        margin-top: -15% !important; /* overlap lower-right */
        border: 1px solid rgba(197, 160, 89, 0.3) !important;
        z-index: 2 !important;
    }

    /* Third supporting image: 4th image */
    .details-mosaic .detail-item:nth-child(4) {
        order: 3 !important;
        width: 75% !important;
        align-self: flex-start !important;
        margin-top: -12px !important; /* small negative top margin */
        z-index: 1 !important;
    }
    
    /* Accordion placement */
    .details-readmore-wrap {
        margin-top: 28px !important; /* 24-32px gap */
    }
}

@media (max-width: 480px) {
    .light-ed-detail {
        width: 65% !important;
        margin-top: -20% !important;
    }
    .details-mosaic .detail-item:nth-child(3) {
        width: 65% !important;
        margin-top: -20% !important;
    }
}