/* ============================================================================
   LUXURY AURA — theme.css
   Foundation = a reusable, project-agnostic utility system (mobile-first, min-width
   breakpoints, md-/lg-/xl- prefixes, token-driven). Brand layer (Cormorant/Lora +
   gold/ink palette) maps onto the generic --color-* / --font-* vars.

   RULE: no CSS value is repeated across component rules. Every reusable value lives
   ONCE as a utility class and is composed on the element, e.g.
       class="flex items-center justify-between text-white fs-28 fw-400 lh-13"
   Component/BEM rules keep ONLY bespoke values + states utilities can't express
   (hover/focus, pseudo-elements, keyframes, arbitrary one-off values).
   ============================================================================ */

/* ---------- ROOT TOKENS ---------- */
:root {
    /* —— Brand palette mapped onto generic color slots (Option 2) —— */
    --color-primary:  #c29d68;   /* gold accent (bk-prime-c) */
    --color-primary-dark: #a9854f;
    --color-dark:     #272727;   /* body ink (bk-body-color) */
    --color-title:    #000000;   /* headings (bk-title-color) */
    --color-light:    #f7f4ef;   /* warm paper — cooler than hoexr #faf7f2 */
    --color-accent:   #c29d68;   /* alias of primary for this brand */
    --color-muted:    #6b6b6b;   /* secondary text */
    --color-line:     #e7e2d8;   /* hairline / border */
    --color-white:    #ffffff;
    --color-black:    #000000;

    /* legacy aliases used by older component rules */
    --ink: var(--color-dark);
    --ink-soft: var(--color-muted);
    --title: var(--color-title);
    --surface: var(--color-white);
    --surface-alt: var(--color-light);
    --line: var(--color-line);
    --accent: var(--color-primary);
    --accent-dark: var(--color-primary-dark);
    --accent-ink: var(--color-white);

    /* —— Fonts —— */
    --font-family-heading: "Cormorant", "Cormorant Garamond", Georgia, serif;
    --font-family-body:    "Lora", Georgia, "Times New Roman", serif;
    --font-head: var(--font-family-heading);
    --font-body: var(--font-family-body);

    /* —— Spacing scale (px) — extended to hit the luxury design rhythm —— */
    --px-0: 0px;   --px-4: 4px;   --px-5: 5px;   --px-8: 8px;   --px-10: 10px;
    --px-12: 12px; --px-16: 16px; --px-20: 20px; --px-24: 24px; --px-30: 30px;
    --px-40: 40px; --px-50: 50px; --px-60: 60px; --px-80: 80px; --px-100: 100px; --px-120: 120px;

    /* —— Geometry / depth —— */
    --radius-sm: 2px; --radius-md: 4px; --radius-lg: 16px; --radius-full: 9999px;
    --radius: var(--radius-sm);
    --shadow-sm: 0 10px 24px -18px rgba(0,0,0,.18);
    --shadow:    0 22px 50px -30px rgba(0,0,0,.22);

    /* —— Layout —— */
    --container: 1240px;
    --container-narrow: 820px;
    --gutter: clamp(20px, 5vw, 64px);
    --section-y: clamp(56px, 8vw, 120px);

    /* —— Z-index —— */
    --z-10: 10; --z-20: 20; --z-30: 30; --z-50: 50;

    --transition: 200ms ease;
}

/* ---------- BASE / RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-family-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-dark);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); font-weight: 400; line-height: 1.2; color: var(--color-title); }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* ============================================================================
   UTILITIES  (single-purpose, composed on the element)
   ============================================================================ */

/* ---- TYPE: size (px) ---- */
.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-15{font-size:15px}.fs-16{font-size:16px}
.fs-17{font-size:17px}.fs-18{font-size:18px}.fs-20{font-size:20px}.fs-22{font-size:22px}.fs-24{font-size:24px}
.fs-28{font-size:28px}.fs-30{font-size:30px}.fs-32{font-size:32px}.fs-36{font-size:36px}.fs-40{font-size:40px}
.fs-42{font-size:42px}.fs-44{font-size:44px}.fs-48{font-size:48px}.fs-50{font-size:50px}.fs-52{font-size:52px}
.fs-60{font-size:60px}.fs-64{font-size:64px}.fs-72{font-size:72px}

/* ---- TYPE: weight / line-height / letter-spacing ---- */
.fw-300{font-weight:300}.fw-400{font-weight:400}.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}
.lh-10{line-height:1}.lh-11{line-height:1.1}.lh-12{line-height:1.2}.lh-13{line-height:1.3}
.lh-14{line-height:1.4}.lh-15{line-height:1.5}.lh-16{line-height:1.6}.lh-17{line-height:1.7}.lh-18{line-height:1.8}
.ls-1{letter-spacing:.08em}.ls-2{letter-spacing:.14em}.ls-3{letter-spacing:.22em}.ls-tight{letter-spacing:-.01em}

/* ---- TYPE: family / transform / align ---- */
.cormorant,.font-heading{font-family:var(--font-family-heading)}
.lora,.font-body{font-family:var(--font-family-body)}
.uppercase{text-transform:uppercase}.italic{font-style:italic}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- TEXT COLOUR (simple names: class="white" / class="accent") ---- */
.white{color:var(--color-white)}.white-72{color:rgba(255,255,255,.72)}.black{color:var(--color-black)}
.accent,.text-accent,.text-primary{color:var(--color-primary)}
.ink,.text-dark{color:var(--color-dark)}
.soft,.text-muted{color:var(--color-muted)}
.title,.text-title{color:var(--color-title)}
.accent-hover{transition:color var(--transition)}.accent-hover:hover{color:var(--color-primary)}

/* ---- BACKGROUND COLOUR ---- */
.bg-white{background:var(--color-white)}.bg-dark,.bg-ink{background:var(--color-dark)}
.bg-light,.bg-alt{background:var(--color-light)}.bg-primary,.bg-accent{background:var(--color-primary)}
.bg-transparent{background:transparent}

/* ---- DISPLAY ---- */
.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.hidden{display:none}
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.inline-grid{display:inline-grid}

/* ---- FLEX / GRID ALIGNMENT ---- */
.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1}.flex-none{flex:none}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}
.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}

/* ---- GRID columns (base = mobile single col by default where used) ---- */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* ---- GRID column span ---- */
.col-span-2{grid-column:span 2}.col-span-full{grid-column:1/-1}

/* ---- GAP (px-named) ---- */
.gap-0{gap:0}.gap-4{gap:4px}.gap-5{gap:5px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-30{gap:30px}.gap-40{gap:40px}.gap-50{gap:50px}

/* ---- POSITION ---- */
.static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}

/* ---- SIZE ---- */
.w-full{width:100%}.w-auto{width:auto}.h-full{height:100%}.h-auto{height:auto}.max-w-full{max-width:100%}.min-h-screen{min-height:100vh}

/* ---- OBJECT-FIT ---- */
.object-cover{object-fit:cover}.object-contain{object-fit:contain}

/* ---- BORDER / RADIUS / OVERFLOW / Z / SHADOW ---- */
.border{border:1px solid var(--color-line)}.border-0{border:0}.border-top{border-top:1px solid var(--color-line)}.border-bottom{border-bottom:1px solid var(--color-line)}
.rounded-0{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-full{border-radius:var(--radius-full)}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}
.z-0{z-index:0}.z-10{z-index:var(--z-10)}.z-20{z-index:var(--z-20)}.z-30{z-index:var(--z-30)}.z-50{z-index:var(--z-50)}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow)}

/* ---- MISC ---- */
.pointer{cursor:pointer}.no-select{user-select:none}.opacity-0{opacity:0}.opacity-100{opacity:1}.mx-auto{margin-inline:auto}

/* ---- MARGIN (px-named) ---- */
.mt-0{margin-top:0}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-30{margin-top:30px}.mt-40{margin-top:40px}.mt-50{margin-top:50px}.mt-60{margin-top:60px}.mt-80{margin-top:80px}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}.mb-30{margin-bottom:30px}.mb-40{margin-bottom:40px}.mb-50{margin-bottom:50px}.mb-60{margin-bottom:60px}.mb-80{margin-bottom:80px}

/* ---- PADDING (px-named) ---- */
.py-0{padding-block:0}.py-20{padding-block:20px}.py-30{padding-block:30px}.py-40{padding-block:40px}.py-60{padding-block:60px}.py-80{padding-block:80px}.py-100{padding-block:100px}.py-120{padding-block:120px}
.px-0{padding-inline:0}.px-16{padding-inline:16px}.px-20{padding-inline:20px}.px-24{padding-inline:24px}.px-30{padding-inline:30px}.px-40{padding-inline:40px}
.pt-20{padding-top:20px}.pt-40{padding-top:40px}.pt-60{padding-top:60px}.pb-20{padding-bottom:20px}.pb-40{padding-bottom:40px}.pb-60{padding-bottom:60px}
.p-0{padding:0}.p-16{padding:16px}.p-20{padding:20px}.p-24{padding:24px}.p-30{padding:30px}.p-40{padding:40px}

/* ============================================================================
   RESPONSIVE — MOBILE-FIRST (min-width). Prefix md-/lg-/xl- adds the property
   AT AND ABOVE that breakpoint. sm 640 · md 768 · lg 1024 · xl 1280.
   ============================================================================ */
@media (min-width:640px){
    .sm-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .sm-flex{display:flex}.sm-block{display:block}.sm-hidden{display:none}
}
@media (min-width:768px){
    .md-flex{display:flex}.md-grid{display:grid}.md-block{display:block}.md-hidden{display:none}
    .md-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .md-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .md-fs-30{font-size:30px}.md-fs-36{font-size:36px}.md-fs-40{font-size:40px}.md-fs-44{font-size:44px}
    .md-flex-row{flex-direction:row}
}
@media (min-width:1024px){
    .lg-flex{display:flex}.lg-grid{display:grid}.lg-block{display:block}.lg-hidden{display:none}
    .lg-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lg-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .lg-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .lg-col-span-2{grid-column:span 2}
    .lg-fs-44{font-size:44px}.lg-fs-50{font-size:50px}.lg-fs-52{font-size:52px}.lg-fs-60{font-size:60px}.lg-fs-72{font-size:72px}
}
@media (min-width:1280px){
    .xl-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .xl-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ============================================================================
   LAYOUT PRIMITIVES
   ============================================================================ */
.container        { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section          { padding-block: var(--section-y); }
.section.alt      { background: var(--color-light); }

/* ============================================================================
   COMPONENTS — bespoke values + states only (layout/colour via utilities on markup)
   ============================================================================ */

/* ---- Buttons ---- (markup: inline-flex items-center justify-center pointer) */
.btn { gap: .5em; padding: .9em 1.8em; border: 1px solid transparent; border-radius: var(--radius-sm);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition); }
.btn-primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.btn-primary:hover { background: transparent; color: var(--color-primary); }
.btn-ghost { background: transparent; color: var(--color-dark); border-color: var(--color-line); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-light { background: var(--color-white); color: var(--color-dark); border-color: var(--color-white); }

/* ---- Top bar / header ---- */
.top-bar { background: var(--color-dark); color: var(--color-white); }
.top-bar-inner { max-width: var(--container); margin-inline: auto; padding: 8px var(--gutter); }
.top-bar a:hover { color: var(--color-primary); }
.site-header { top: 0; background: var(--color-white); border-bottom: 1px solid var(--color-line); }  /* markup: sticky z-50 */
.site-header-inner { max-width: var(--container); margin-inline: auto; padding: 16px var(--gutter); }

/* ---- Desktop nav ---- (markup: nav-link → inline-flex items-center gap-4 relative ink accent-hover) */
.laura-nav-list { gap: 26px; }  /* markup: flex items-center */
.laura-nav-link { padding: 6px 0; }
.laura-nav-item.is-active > .laura-nav-link { color: var(--color-primary); }
.laura-nav-sub { top: 100%; left: 0; min-width: 200px; background: var(--color-white); border: 1px solid var(--color-line);
    box-shadow: var(--shadow-sm); padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .2s, transform .2s, visibility .2s; }  /* markup: absolute */
.laura-nav-item-has-children:hover > .laura-nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.laura-nav-sub .laura-nav-link { padding: 8px 19px; width: 100%; }

/* ---- Mobile drawer ---- (markup: toggle → hidden flex-col items-center justify-center pointer; drawer → fixed inset-0 z-50; backdrop → absolute inset-0; panel → absolute top-0 right-0 h-full overflow-auto; close → absolute pointer white) */
.laura-nav-toggle { gap: 5px; width: 40px; height: 40px; background: transparent; border: 0; }
.laura-nav-toggle span { width: 22px; height: 2px; background: var(--color-dark); transition: transform .25s, opacity .25s; }
.laura-nav-drawer[hidden] { display: none; }
.laura-nav-drawer-backdrop { background: rgba(0,0,0,.45); }
.laura-nav-drawer-panel { width: min(340px, 85vw); background: var(--color-white); box-shadow: var(--shadow); padding: 32px 24px; }
.laura-nav-drawer-close { top: 16px; right: 16px; background: transparent; border: 0; font-size: 28px; line-height: 1; }
.laura-nav-drawer-list .laura-nav-link { padding: 13px 0; border-bottom: 1px solid var(--color-line); }
@media (max-width: 991px) { .laura-nav-desktop { display: none; } .laura-nav-toggle { display: flex; } }
@media (min-width: 992px) { .laura-nav-toggle { display: none; } }

/* ---- Page header / breadcrumb ---- (markup: section → relative; breadcrumb → inline-flex items-center gap-8) */
.laura-page-header { padding-block: clamp(48px, 7vw, 96px); background: var(--color-light); text-align: center; }
.laura-page-header.has-bg { background-size: cover; background-position: center; color: var(--color-white); }
.laura-page-header.has-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.laura-page-header .breadcrumb { color: var(--color-muted); }
.laura-page-header.has-bg .breadcrumb { color: rgba(255,255,255,.85); }
.laura-page-header .breadcrumb a:hover { color: var(--color-primary); }
.laura-page-header .sep { opacity: .5; }

/* ---- Content primitives ---- (laura_cover markup: absolute inset-0 w-full h-full object-cover) */
.laura-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.laura-prose img { border-radius: var(--radius-sm); margin-block: 24px; }
.laura-prose h2, .laura-prose h3 { margin-top: 1.6em; margin-bottom: .5em; }
.laura-stars { color: var(--color-line); gap: 2px; }  /* markup: inline-flex */
.laura-stars i { font-style: normal; }
.laura-stars i.on { color: var(--color-primary); }

/* ---- Blog/journal cards ---- (markup: card → overflow-hidden; thumb → block relative overflow-hidden; single-thumb → overflow-hidden) */
.laura-post-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.laura-post-thumb { aspect-ratio: 4 / 3; }
.laura-post-body h2 a:hover { color: var(--color-primary); }
.laura-single-thumb { margin: 0 0 32px; border-radius: var(--radius-sm); }

/* ---- Footer ---- (markup: foot-grid → grid; brand → inline-block mb-16; foot-col a → block; socials a → inline-flex items-center justify-center; hours li → flex justify-between; foot-bottom → flex justify-between gap-16 flex-wrap) */
.site-footer { background: var(--color-dark); color: rgba(255,255,255,.78); padding-block: clamp(48px, 7vw, 90px) 0; }
.foot-grid { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; }
.site-footer .brand { color: var(--color-white); }
.foot-col h6 { color: var(--color-white); }
.foot-col a { padding: 5px 0; }
.foot-col a:hover { color: var(--color-primary); }
.foot-socials a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.foot-socials a:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.foot-hours-list li { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.foot-hours-list .day { color: var(--color-white); }
.foot-bottom { max-width: var(--container); margin-inline: auto; padding: 22px var(--gutter); margin-top: clamp(32px, 5vw, 64px); border-top: 1px solid rgba(255,255,255,.1); }
@media (max-width: 991px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .foot-grid { grid-template-columns: 1fr; } .top-info { display: none; } }

/* ---- Section headings ---- */
.laura-sec-head { max-width: 720px; margin-inline: auto; }
.laura-sec-lede { max-width: 600px; margin-inline: auto; }
/* Flourish eyebrow ~ glyphs (pseudo-elements — can't be utilities). markup: inline-flex items-center justify-center gap-12 */
.laura-eyebrow.has-flourish::before, .laura-eyebrow.has-flourish::after { content: "\301C"; color: var(--color-primary); opacity: .8; font-size: 1.1em; line-height: 0; }

/* ---- Apartments cards ---- (markup: grid grid-cols-1 md-grid-cols-2 lg-grid-cols-3 gap-24 items-start; card → overflow-hidden; media → relative overflow-hidden; price → flex items-baseline; specs → grid grid-cols-2) */
.laura-apt-card { background: var(--color-white); border-radius: var(--radius-sm); }
.laura-apt-media { aspect-ratio: 4 / 3; background: var(--color-light); }
.laura-apt-media .laura-cover { transition: transform .6s ease; }
.laura-apt-card:hover .laura-apt-media .laura-cover { transform: scale(1.05); }
.laura-apt-body { padding: 26px 26px 30px; }
.laura-apt-title { display: inline-block; }
a.laura-apt-title:hover h3 { color: var(--color-primary); }
.laura-apt-price { gap: 2px; }
.laura-apt-rule { border: 0; border-top: 1px solid var(--color-line); margin: 18px 0 20px; }
.laura-apt-specs { gap: 12px 20px; }  /* markup: grid grid-cols-2 */
.laura-apt-spec { gap: 9px; }         /* markup: flex items-center; icon → accent flex-none utilities */

/* ---- Hero ---- (markup: section → relative bg-light; panel → bg-dark relative z-10; media → relative overflow-hidden)
   Dark text-panel overlaps the photo. Grid: panel ~48%, photo bleeds right + up. */
.laura-hero-grid { display: grid; grid-template-columns: 1fr; max-width: var(--container); margin-inline: auto; }
.laura-hero-panel { padding: clamp(40px, 6vw, 80px); align-self: center; }
.laura-hero-media { aspect-ratio: 16 / 11; }
.laura-hero-media .laura-cover { transition: none; }
.laura-hero-pill { padding: 7px 18px; border-radius: var(--radius-full); }
@media (min-width: 992px) {
    .laura-hero { padding-block: clamp(40px, 6vw, 90px); }
    .laura-hero-grid { grid-template-columns: 46% 54%; align-items: center; }
    .laura-hero-panel { margin-right: -8%; }            /* panel overlaps the photo */
    .laura-hero-media { aspect-ratio: auto; min-height: 620px; }
}

/* ---- About split ---- (markup: container → grid grid-cols-1 lg-grid-cols-2 gap-50 items-center) */
.laura-about-photo { aspect-ratio: 4 / 5; border-radius: var(--radius-sm); }
.laura-about-stat { position: absolute; left: -6%; bottom: 14%; padding: 22px 30px; border-radius: var(--radius-sm); }
.laura-about-feat-ico svg { width: 34px; height: 34px; }
.laura-check-dot { width: 22px; height: 22px; border-radius: var(--radius-full); font-size: 12px; }
.laura-about-rev .laura-about-media { order: 2; }       /* reverse: image right on desktop */
@media (max-width: 575px) { .laura-about-stat { left: 0; padding: 16px 20px; } }

/* ---- Facilities v1 (masonry) ---- (markup: grid grid-cols-1 sm-grid-cols-2 lg-grid-cols-4 gap-24) */
.laura-fac-photo { aspect-ratio: 3 / 4; border-radius: var(--radius-sm); }
.laura-fac-card { padding: 38px 28px; border-radius: var(--radius-sm); align-self: center; }
.laura-fac-ico svg { width: 44px; height: 44px; }
@media (min-width: 1024px) {   /* vertical offset: photo cols sit lower than card cols */
    .laura-fac-grid > *:nth-child(2n) { margin-top: 56px; }
}

/* ---- Facilities v2 (feature) ---- (markup: header → flex md-flex-row justify-between; grid → grid md-grid-cols-3) */
.laura-facfeat-photo { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
@media (min-width: 768px) { .laura-facfeat-offset { margin-top: 64px; } }

/* ---- Rooms slider ---- (markup: band → bg-dark; .laura-swiper; cards overlay caption) */
.laura-rs-nav button { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.25); background: transparent; transition: background-color .2s, border-color .2s; font-size: 20px; }
.laura-rs-nav button:hover { background: var(--color-primary); border-color: var(--color-primary); }
.laura-rs-card { aspect-ratio: 3 / 4; border-radius: var(--radius-sm); }
.laura-rs-media { width: 100%; height: 100%; }
.laura-rs-media .laura-cover { transition: transform .6s ease; }
.laura-rs-card:hover .laura-rs-media .laura-cover { transform: scale(1.05); }
.laura-rs-cap { padding: 24px; background: linear-gradient(to top, rgba(0,0,0,.78), transparent); }

/* ---- Pricing ---- (markup: rows → grid lg-grid-cols-2; row → grid sm-grid-cols-2) */
.laura-pricing { background: linear-gradient(180deg, var(--color-white), var(--color-light)); }
.laura-price-card { padding: 40px 32px; box-shadow: var(--shadow-sm); align-self: center; }
.laura-price-card .btn { width: 100%; }
.laura-price-amt { display: flex; align-items: baseline; gap: 6px; }
.laura-price-media { aspect-ratio: 3 / 4; min-height: 100%; }

/* ---- Contact ---- (markup: section → grid md-grid-cols-2 lg-grid-cols-3; panels) */
.laura-contact-photo { min-height: 360px; }
.laura-contact-cta { padding: clamp(40px, 5vw, 70px); }
.laura-contact-form { padding: clamp(40px, 5vw, 70px); }
.laura-input { width: 100%; padding: 14px 18px; border: 0; border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-dark); }
.laura-input::placeholder { color: var(--color-muted); }
.laura-input-full { grid-column: 1 / -1; }
textarea.laura-input { resize: vertical; min-height: 120px; }

/* ---- Video CTA ---- (markup: section → relative overflow-hidden; bg → absolute inset-0; img is content <img>) */
.laura-video { min-height: clamp(440px, 60vh, 640px); }
.laura-video-overlay { background: rgba(0,0,0,.45); }
.laura-video-inner { min-height: clamp(440px, 60vh, 640px); padding-block: 60px; }
.laura-video-lede { max-width: 460px; }
.laura-video-play { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border: 0; border-radius: var(--radius-full); background: rgba(255,255,255,.92); color: var(--color-primary); font-size: 26px; }
.laura-video-play:hover { background: var(--color-white); }
.laura-video-tri { margin-left: 4px; }
.laura-video-stat { right: var(--gutter); bottom: 40px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.4); }
.laura-video-stat-ico { width: 36px; height: 36px; border-radius: var(--radius-full); background: rgba(255,255,255,.18); }
.laura-video-stat-ico svg { width: 20px; height: 20px; }
.laura-video-modal { display: none; }
.laura-video-modal.is-open { display: block; }
.laura-video-modal-bd { background: rgba(0,0,0,.85); }
.laura-video-modal-box { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(900px, 92vw); }
.laura-video-modal-frame { aspect-ratio: 16 / 9; }
.laura-video-modal-frame iframe, .laura-video-modal-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.laura-video-modal-close { top: -42px; right: 0; background: transparent; border: 0; font-size: 32px; line-height: 1; }

/* ---- Single room ---- (markup: container → grid lg-grid-cols-3; main → lg-col-span-2) */
.laura-sr-lead { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); }
.laura-sr-thumb { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
.laura-sr-chips svg { width: 18px; height: 18px; }
.laura-sr-table { border-radius: var(--radius-sm); }
.laura-sr-facic { width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--color-line); }
.laura-sr-facic svg { width: 20px; height: 20px; }
.laura-sr-reserve { border-radius: var(--radius-sm); background: var(--color-white); }
.laura-sr-cmp-thumb { width: 64px; height: 56px; border-radius: var(--radius-sm); }
.laura-input[type="date"], .laura-input[type="number"] { background: var(--color-white); }
@media (min-width: 1024px) { .laura-sr-side { position: sticky; top: 96px; } }

/* ---- Rooms archive filter ---- (markup: bar → flex flex-wrap justify-center gap-12) */
.laura-filter-btn { padding: 10px 22px; border: 1px solid var(--color-line); background: transparent; color: var(--color-dark); border-radius: var(--radius-full); transition: background-color .2s, color .2s, border-color .2s; }
.laura-filter-btn:hover, .laura-filter-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.laura-filter-item.is-hidden { display: none; }
.laura-pagination { display: flex; justify-content: center; gap: 8px; }
.laura-rt-group:last-child { margin-bottom: 0; }

/* ---- Sticky booking bar ---- (markup: inner → flex flex-wrap items-end gap-16; .is-docked added by JS) */
.laura-bookbar { position: relative; z-index: 40; margin-top: -40px; }
.laura-bookbar-inner { background: var(--color-white); box-shadow: var(--shadow); border-radius: var(--radius-sm); padding: 22px 28px; }
.laura-bookbar-field { flex: 1 1 160px; min-width: 140px; }
.laura-bookbar-input { width: 100%; padding: 11px 14px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-dark); }
.laura-bookbar-btn { flex: 0 0 auto; align-self: stretch; }
/* Docked state: fix to the top, full-width dark band. JS toggles .is-docked. */
.laura-bookbar.is-docked { position: fixed; top: 0; left: 0; right: 0; margin-top: 0; z-index: 60; animation: laura-bb-slide .35s ease; }
.laura-bookbar.is-docked .laura-bookbar-inner { background: var(--color-dark); box-shadow: 0 10px 30px -12px rgba(0,0,0,.4); border-radius: 0; padding: 14px 28px; max-width: var(--container); margin-inline: auto; }
.laura-bookbar.is-docked label { color: rgba(255,255,255,.6); }
.laura-bookbar.is-docked .laura-bookbar-input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
@keyframes laura-bb-slide { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (max-width: 767px) { .laura-bookbar { margin-top: 0; } .laura-bookbar.is-docked { position: relative; } }

/* ---- Hero immersive ---- (markup: section relative overflow-hidden; bg absolute inset-0; inner flex flex-col items-center justify-center) */
.laura-heroimm { min-height: clamp(560px, 88vh, 860px); }
.laura-heroimm-scrim { background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
.laura-heroimm-inner { min-height: clamp(560px, 88vh, 860px); padding-block: 100px; }
.laura-heroimm-lede { max-width: 560px; }
.laura-heroimm-form { background: rgba(255,255,255,.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); padding: 20px 24px; }
.laura-heroimm-cue { left: 50%; bottom: 30px; transform: translateX(-50%); width: 26px; height: 42px; border: 1px solid rgba(255,255,255,.5); border-radius: 14px; display: flex; justify-content: center; }
.laura-heroimm-cue-dot { width: 4px; height: 8px; background: #fff; border-radius: 2px; margin-top: 8px; animation: laura-cue 1.6s ease-in-out infinite; }
@keyframes laura-cue { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(8px); } }

/* ---- Hero editorial ---- (markup: container grid lg-grid-cols-2 gap-50 items-center) */
.laura-heroed { padding-block: clamp(60px, 9vw, 130px); overflow: hidden; }
.laura-heroed-side { left: 0; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left center; white-space: nowrap; }
.laura-heroed-rule { width: 64px; height: 2px; background: var(--color-primary); }
.laura-heroed-lede { max-width: 460px; }
.laura-heroed-collage { min-height: 460px; }
.laura-heroed-img-a { width: 72%; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); margin-left: auto; }
.laura-heroed-img-b { position: absolute; left: 0; bottom: -6%; width: 48%; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); border: 6px solid var(--color-light); }
@media (max-width: 1023px) { .laura-heroed-side { display: none; } .laura-heroed-img-b { bottom: 0; } }

/* ---- Testimonials ---- (markup: .laura-swiper; cards bg-white flex flex-col) */
.laura-testi-card { padding: 38px 34px 34px; border-radius: var(--radius-sm); border: 1px solid var(--color-line); height: auto; }
.laura-testi-mark { font-size: 64px; line-height: .6; display: block; margin-bottom: 8px; }
.laura-testi-quote { flex: 1 1 auto; }
.laura-testi-avatar { width: 52px; height: 52px; border-radius: var(--radius-full); }
.laura-testi-source { padding-left: 12px; border-color: var(--color-line); }
.laura-testi-pag { position: static; margin-top: 30px; }

/* ---- Offers ---- (markup: grid md-grid-cols-2 lg-grid-cols-3) */
.laura-offer-card { border-radius: var(--radius-sm); border: 1px solid var(--color-line); }
.laura-offer-media { aspect-ratio: 3 / 2; }
.laura-offer-badge { top: 16px; right: 16px; padding: 8px 14px; border-radius: var(--radius-full); }
.laura-offer-body { padding: 24px 26px 28px; }
.laura-offer-old { text-decoration: line-through; }

/* ---- Stats ---- (markup: grid grid-cols-2 lg-grid-cols-4; bg-dark) */
.laura-stat-suf { font-size: .6em; margin-left: 2px; }

/* ---- Location ---- (markup: container grid lg-grid-cols-2 gap-50) */
.laura-location-map { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.laura-location-map iframe, .laura-location-map-ph { width: 100%; height: 100%; border: 0; }
.laura-location-rev .laura-location-map { order: 2; }
.laura-location-info .accent svg { width: 20px; height: 20px; }
.laura-location-landmarks li:last-child, .laura-location-landmarks li:nth-last-child(2) { border-bottom: 0; }

/* ---- FAQ accordion ---- (markup: items border-bottom; q → flex justify-between w-full pointer) */
.laura-faq-item { padding: 6px 0; }
.laura-faq-q { padding: 22px 0; background: transparent; border: 0; }
.laura-faq-ico { position: relative; width: 18px; height: 18px; }
.laura-faq-ico::before, .laura-faq-ico::after { content: ""; position: absolute; background: var(--color-primary); transition: transform .25s, opacity .25s; }
.laura-faq-ico::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.laura-faq-ico::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.laura-faq-item.is-open .laura-faq-ico::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.laura-faq-a { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.laura-faq-item.is-open .laura-faq-a { max-height: 480px; }
.laura-faq-a-inner { padding: 0 0 24px; }

/* ---- Testimonials split ---- (markup: slide grid lg-grid-cols-2; panel flex flex-col justify-center) */
.laura-testisplit-media { min-height: 420px; }
.laura-testisplit-panel { padding: clamp(40px, 6vw, 90px); }
.laura-testisplit-quote { max-width: 560px; }
.laura-testisplit-rule { border: 0; border-top: 1px solid var(--color-line); width: 100%; max-width: 420px; margin-left: 0; }
.laura-testisplit-stars .laura-stars i { font-size: 22px; }
.laura-testisplit-pag { position: static; margin-top: 0; padding: 24px 0; }
.laura-testisplit-pag.swiper-pagination { text-align: left; padding-left: clamp(40px, 6vw, 90px); }
@media (min-width: 1024px) { .laura-testisplit-media { min-height: 600px; } }

/* ---- Gallery mosaic ---- (markup: grid + span variants; each tile a glightbox link) */
.laura-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 16px; grid-auto-flow: dense; }
.laura-gallery-item { border-radius: var(--radius-sm); }
.laura-gallery-wide { grid-column: span 2; }
.laura-gallery-tall { grid-row: span 2; }
.laura-gallery-item .laura-cover { transition: transform .6s ease; }
.laura-gallery-item:hover .laura-cover { transform: scale(1.06); }
.laura-gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%); opacity: 0; transition: opacity .3s; }
.laura-gallery-item:hover::after { opacity: 1; }
.laura-gallery-cap { padding: 22px; z-index: 2; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.laura-gallery-item:hover .laura-gallery-cap { opacity: 1; transform: translateY(0); }
.laura-gallery-plus { top: 18px; right: 20px; z-index: 2; font-size: 30px; line-height: 1; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
.laura-gallery-item:hover .laura-gallery-plus { opacity: 1; transform: scale(1); }
@media (max-width: 767px) { .laura-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .laura-gallery-wide, .laura-gallery-tall { grid-column: auto; grid-row: auto; } }

/* ---- Marquee ---- (markup: row flex; two tracks, second aria-hidden) */
.laura-marquee { padding-block: clamp(28px, 4vw, 56px); border-block: 1px solid var(--color-line); }
.laura-marquee.bg-dark { border-color: rgba(255,255,255,.12); }
.laura-marquee-row { width: max-content; animation: laura-marquee 28s linear infinite; }
.laura-marquee-track { flex: 0 0 auto; }
.laura-marquee-word { font-size: clamp(32px, 6vw, 72px); line-height: 1; color: var(--color-title); padding: 0 32px; white-space: nowrap; }
.laura-marquee.bg-dark .laura-marquee-word { color: #fff; }
.laura-marquee-word.is-outline { color: transparent; -webkit-text-stroke: 1px var(--color-primary); }
.laura-marquee-sep { font-size: clamp(16px, 2vw, 26px); }
@keyframes laura-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .laura-marquee-row { animation: none; } }

/* ---- Blog grid ---- (markup: grid sm-grid-cols-2 lg-grid-cols-4) */
.laura-blog-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.laura-blog-thumb { aspect-ratio: 4 / 3; }
.laura-blog-thumb .laura-cover { transition: transform .6s ease; }
.laura-blog-card:hover .laura-blog-thumb .laura-cover { transform: scale(1.05); }
.laura-blog-body { padding: 20px 22px 24px; }
.laura-blog-cat { padding-left: 12px; border-color: var(--color-line); }

/* ---- About collage ---- (markup: container grid lg-grid-cols-2; collage relative) */
.laura-aboutcol-collage { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
.laura-aboutcol-a { aspect-ratio: 3 / 4.4; border-radius: var(--radius-sm); }
.laura-aboutcol-b, .laura-aboutcol-c { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.laura-aboutcol-side { padding-top: 40px; }
.laura-aboutcol-badge { position: absolute; left: calc(50% - 44px); top: 42%; width: 88px; height: 88px; border-radius: var(--radius-full); box-shadow: var(--shadow); }
@media (max-width: 575px) { .laura-aboutcol-side { padding-top: 0; } }

/* ---- Facilities numbered ---- (markup: container grid lg-grid-cols-2; list) */
.laura-facnum-item { padding: 26px 0; }
.laura-facnum-item:last-child { border-bottom: 0; }
.laura-facnum-num { font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--color-line); }
.laura-facnum-ico svg { width: 40px; height: 40px; }
.laura-facnum-text { flex: 1 1 auto; }
.laura-facnum-line { width: 28px; height: 1px; background: var(--color-primary); }

/* ---- Video split ---- (markup: container grid lg-grid-cols-2; media relative) */
.laura-vidsplit-media { aspect-ratio: 4 / 3.4; border-radius: var(--radius-sm); }
.laura-vidsplit-rev .laura-vidsplit-media { order: 2; }
.laura-vidsplit-media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.18); }
.laura-bar-track { height: 4px; background: var(--color-line); border-radius: 2px; overflow: hidden; }
.laura-bar-fill { display: block; height: 100%; width: 0; background: var(--color-primary); border-radius: 2px; transition: width 1.2s cubic-bezier(.25,.8,.3,1); }
.laura-bars.is-shown .laura-bar-fill { width: var(--pct); }

/* ---- Rooms cards slider ---- (markup: .laura-swiper; reuses room-card partial) */
.laura-roomcards-slide { height: auto; }
.laura-roomcards-slide .laura-apt-card { height: 100%; border: 1px solid var(--color-line); }
.laura-roomcards-pag { position: static; margin-top: 30px; }
