/* ==========================================================================
   OC OFFICIAL — A Dreamscape of Desire
   Stylesheet — single-file build
   ========================================================================== */

/* ==========================================================================
   OC Fonts — @font-face declarations
   CA SaygonText (body) + TWS-Lygia Sans (display) + Italianno (script)
   Format: WOFF2 (modern) with WOFF fallback
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');

/* ====== TWS-Lygia Sans (display headings) ====== */
@font-face {
  font-family: 'TWS Lygia Sans';
  src: url('../fonts/tws-lygiasans-regular.woff2') format('woff2'),
       url('../fonts/tws-lygiasans-regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TWS Lygia Sans';
  src: url('../fonts/tws-lygiasans-italic.woff2') format('woff2'),
       url('../fonts/tws-lygiasans-italic.woff')  format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ====== CA SaygonText (body) — full weight range 100-800 ====== */
@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-thin.woff2') format('woff2'),
       url('../fonts/ca-saygontext-thin.woff')  format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-thin-italic.woff2') format('woff2'),
       url('../fonts/ca-saygontext-thin-italic.woff')  format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-light.woff2') format('woff2'),
       url('../fonts/ca-saygontext-light.woff')  format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-light-italic.woff2') format('woff2'),
       url('../fonts/ca-saygontext-light-italic.woff')  format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-regular.woff2') format('woff2'),
       url('../fonts/ca-saygontext-regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-italic.woff2') format('woff2'),
       url('../fonts/ca-saygontext-italic.woff')  format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-medium.woff2') format('woff2'),
       url('../fonts/ca-saygontext-medium.woff')  format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-medium-italic.woff2') format('woff2'),
       url('../fonts/ca-saygontext-medium-italic.woff')  format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-semibold.woff2') format('woff2'),
       url('../fonts/ca-saygontext-semibold.woff')  format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-semibold-italic.woff2') format('woff2'),
       url('../fonts/ca-saygontext-semibold-italic.woff')  format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-bold.woff2') format('woff2'),
       url('../fonts/ca-saygontext-bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-bold-italic.woff2') format('woff2'),
       url('../fonts/ca-saygontext-bold-italic.woff')  format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-extrabold.woff2') format('woff2'),
       url('../fonts/ca-saygontext-extrabold.woff')  format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CA SaygonText';
  src: url('../fonts/ca-saygontext-extrabold-italic.woff2') format('woff2'),
       url('../fonts/ca-saygontext-extrabold-italic.woff')  format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
/* ==========================================================================
   GLOBAL DESIGN SYSTEM
   Based on Figma Style Guide:
   - Brand Color: #AA7143
   - Natural Color: #FFFFFF
   - Display Font: TWS Lygia Sans (OC custom)
   - Body Font: CA SaygonText (OC custom)
   ========================================================================== */

:root {
  /* ----- Brand Colors (Style Guide) ----- */
  --brand:              #AA7646;          /* Brand color */
  --natural:            #ffffff;          /* Natural color */

  /* ----- Background Colors ----- */
  --color-bg:           #07090a;
  --color-bg-alt:       #0f1213;
  --color-bg-soft:      #131618;

  /* ----- Text Colors ----- */
  --color-text:         var(--natural);
  --color-text-muted:   rgba(255, 255, 255, 0.8);
  --color-text-soft:    rgba(255, 255, 255, 0.4);

  /* ----- Border / Line ----- */
  --color-line:         rgba(255, 255, 255, 0.14);
  --color-line-strong:  rgba(255, 255, 255, 0.28);

  /* ----- Gold Tones (variations of brand) ----- */
  --color-gold:         var(--brand);
  --color-gold-light:   #f3cba0;          /* Champagne (gradient start) */
  --color-gold-mid:     #d49968;          /* Mid copper */
  --color-gold-deep:    #9d6340;          /* Dark copper (gradient end) */

  /* ----- Signature Gold Gradient ----- */
  --gradient-gold: linear-gradient(180deg, #d49968 0%, #aa7143 60%, #8b5a32 100%);
  --gradient-gold-vertical: linear-gradient(180deg, #d49968 0%, #aa7143 60%, #8b5a32 100%);
  --gradient-gold-soft: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);

  /* ----- Typography Families (OC custom fonts) ----- */
  --font-display: 'TWS Lygia Sans', 'Wix Madefor Display', 'Optima', 'Helvetica Neue', sans-serif;
  --font-script:  'Italianno', 'Brush Script MT', cursive;
  --font-body:    'CA SaygonText', 'Manrope', 'Helvetica Neue', sans-serif;

  /* ----- Typography Scale (from Style Guide) -----
     Heading 1: Medium 82px / 115%
     Heading 2: Medium 48px / 115%
     Heading 3: Medium 40px / 115%
     Body Text 1: Medium 24px / 0%
     Body Text 2: Medium 24px / 155%
     Body Text 3: Medium 20px / 0%
     Paragraph 1: Regular 16px / 155%
     Paragraph 2: Regular 14px / 155%
  ---------------------------------------------------- */
  --fs-h1: clamp(46px, 5.6vw, 90px);
  --fs-h2: clamp(41px, 3.4vw, 58px);
	--fs-htitle: clamp(34px, 3.4vw, 58px);
  --fs-h3: clamp(26px, 2.8vw, 40px);
  --fs-body-1: clamp(18px, 1.5vw, 24px);
  --fs-body-2: clamp(18px, 1.5vw, 24px);
  --fs-body-3: clamp(16px, 1.2vw, 20px);
  --fs-p1: 16px;
  --fs-p2: 14px;

  --lh-tight: 1.4;
  --lh-loose: 1.55;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ----- Spacing Scale ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
  --space-10: 160px;

  /* ----- Layout (measured from design @ 1366vw frame: WIDE=1180px=86vw, NARROW=995px=73vw) ----- */
  --container-max: clamp(1100px, 90vw, 1720px);
  --container-narrow: clamp(900px, 73vw, 1450px);
  --container-pad: clamp(20px, 4vw, 100px);
  --header-height: 88px;
  --radius-pill: 999px;
  --radius-card: 12px;

  /* ----- Easings ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   GLOBAL TYPOGRAPHY UTILITIES (Style Guide compliant)
   ========================================================================== */
.h1, .heading-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

.h2, .heading-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

.h3, .heading-3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

.body-1 { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body-1); line-height: 1; }
.body-2 { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body-2); line-height: var(--lh-loose); }
.body-3 { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body-3); line-height: 1; }
.p1     { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-p1); line-height: var(--lh-loose); }
.p2     { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-p2); line-height: var(--lh-loose); }


/* --------------------------------------------------------------------------
   2. Reset / Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-p1);
  line-height: var(--lh-loose);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* bg-1.jpg wood-grain texture only on Section 02 ("Where Icon Invites Icon")
   and Section 05 ("The Curated Collection / Master Plan + Amenities") */
.section-02,
.section-05 {
  background:
    var(--color-bg)
    url('../images/bg-gallery.png') ;
}

img, svg { display: block; max-width: 100%; }

/* ----- Image utilities ----- */
.full-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  inset: 0;
}

.band-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

a { color: inherit; text-decoration: none; transition: color 0.4s var(--ease-out); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul { list-style: none; }


/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  /* No inner padding by default — max-width auto-centers content matching design.
     Padding is added back at small viewports (≤1100px) via media query below. */
}

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


/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
/* Gold gradient text — applied to h2 displays (not hero, hero needs explicit solid for visibility) */
.text-gold-gradient{
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.display-h2{
  background: var(--gradient-gold-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Hero title — SOLID copper color for guaranteed visibility on dark hero overlay */
.hero-title,
.hero-title span {
background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;

}

/* Multiline variant — smaller font for slide 2 (3 lines) */
.hero-title--multiline,
.hero-title--multiline span {
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.2;
}

.display-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

.lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: var(--lh-loose);
  letter-spacing: 0;
  color: var(--color-text-muted);
  max-width: 36em;
}

.eyebrow {
	font-family: 'TWS Lygia Sans';
  font-style: normal;
	font-weight: 400;
	font-size: 36px;
	line-height: 49px;
	color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   5. Buttons & Links — hover white -> gold
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  background: transparent;
  border-radius: 25px;
  cursor: pointer;
  transition:
    color 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    background 0.4s var(--ease-out),
    transform 0.6s var(--ease-out);
  position: relative;
}

/* Solid white pill — hero slide 1 CTA */
.btn--white {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--color-bg);
  font-weight: 500;
  padding: 13px 22px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.btn--white:hover,
.btn--white:focus-visible {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  border-color: transparent;
  color: var(--color-bg);
}
.gallery-section .container{
	width: 80%;
}
@media screen and (max-width: 991px){
.gallery-section .container{
	width: 100%;
}	
}
/* Solid gold pill — hero slide 2 & 3 CTA */
.btn--gold {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  border-color: transparent;
  color: var(--color-bg);
  font-weight: 500;
  padding: 16px 32px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  border-color: transparent;
  color: var(--color-bg);
}

/* Outline pill — header CTA "Get Consultation" */
.btn--outline {
  background: transparent;
  border-color: var(--color-text);
  color: var(--color-text);
  transition:
    color 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    background 0.5s var(--ease-out),
    transform 0.6s var(--ease-out);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  border-color: transparent;
  color: var(--color-bg);
}

/* Solid gold pill — alternative primary */
.btn--primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-bg);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  color: var(--color-bg);
}

/* Ghost / outline — body section CTAs (gold outline + gold text) */
.btn--ghost {
  background: transparent;
  border-color: rgba(243, 203, 160, 0.5);
  color: var(--color-gold-light);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  border-color: transparent;
  color: var(--color-bg);
}

.btn:active { transform: translateY(1px); }

.btn svg { transition: transform 0.4s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

/* ---------- Unified hover animation for ALL gold-fill buttons ----------
   - Smoother gradient transition (0.5s cubic-bezier)
   - Subtle backdrop-filter blur on the underlying area
   - Soft glow shadow + tiny lift (translateY -2px) */
.btn,
.badge-link,
.arrow-btn--circle,
.facilities-nav__btn,
.gallery-card__arrow,
.map-btn {
  transition:
    background 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    color 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    backdrop-filter 0.4s var(--ease-out);
  -webkit-backdrop-filter: blur(0);
          backdrop-filter: blur(0);
  will-change: transform, background;
}
.btn:hover,
.badge-link:hover,
.arrow-btn--circle:hover,
.facilities-nav__btn:hover,
.gallery-card__arrow:hover,
.map-btn:hover {
  -webkit-backdrop-filter: blur(34.1268px);
          backdrop-filter: blur(34.1268px);
  box-shadow: 0 6px 24px rgba(243, 203, 160, 0.25);
  transform: translateY(-2px);
	border:0;
}
.btn:active,
.badge-link:active,
.arrow-btn--circle:active,
.facilities-nav__btn:active,
.gallery-card__arrow:active,
.map-btn:active {
  transform: translateY(0);
}


/* "Explore more >" badge link — small uppercase */
.badge-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  /* text-transform: uppercase; */
  color: var(--color-text);
  padding: 11px 34px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 25px;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}

.badge-link:hover,
.badge-link:focus-visible {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  border-color: transparent;
  color: #07090a;
  outline: none;
}


/* --------------------------------------------------------------------------
   6. Placeholder Images (until real assets)
   -------------------------------------------------------------------------- */
.placeholder-img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  background:
    linear-gradient(135deg, #1a1a1c 0%, #0f1011 100%);
  border: 1px solid var(--color-line);
  position: relative;
  overflow: hidden;
}

.placeholder-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(243, 203, 160, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(157, 99, 64, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.placeholder-img--hero {
  min-height: 100vh;
  font-size: 14px;
}

.placeholder-img--wide {
  aspect-ratio: 16 / 6;
  min-height: 380px;
}

.placeholder-img--tall {
  aspect-ratio: 4 / 5;
  min-height: 540px;
}

.placeholder-img--masterplan {
  aspect-ratio: 16 / 9;
  min-height: 480px;
}


/* --------------------------------------------------------------------------
   7. Reveal-on-scroll
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s var(--ease-out),
    transform 1.1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 44px 0 24px;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0) 100%);
  transition: background 0.5s var(--ease-out), padding 0.5s var(--ease-out), backdrop-filter 0.5s var(--ease-out);
}

.site-header.is-scrolled,
.site-header--inner {
  background: #0c0e0f;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, transparent 50%),
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 3px,
      rgba(255, 255, 255, 0.012) 3px,
      rgba(255, 255, 255, 0.012) 4px);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 0;
  border-bottom: 1px solid rgba(243, 203, 160, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.site-header--inner{
  background: #07090A url('../images/bg-menu-desk.png') repeat-x!important;
  border-bottom: 0;
}
/* GET CONSULTATION button transforms from outline → gold filled */
.site-header.is-scrolled .btn--outline,
.site-header--inner .btn--outline {
  background: transparent;
  border: 1px solid var(--color-line-strong);
  color: #fff;
  font-weight: 500;
}

.site-header.is-scrolled .btn--outline:hover,
.site-header.is-scrolled .btn--outline:focus-visible,
.site-header--inner .btn--outline:hover,
.site-header--inner .btn--outline:focus-visible {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  border-color: transparent;
  color: var(--color-bg);
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  /* padding: 0 var(--container-pad); */
	padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

.logo {
  justify-self: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.logo-img {
  height: 44px;
  width: auto;
  display: block;
  transition: opacity 0.4s var(--ease-out);
}

.logo:hover .logo-img { opacity: 0.85; }

.logo-text {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.32em;
  color: var(--color-text);
  transition: color 0.4s var(--ease-out);
  white-space: nowrap;
}

.logo:hover .logo-text {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.main-nav {
  justify-self: start;
}

.main-nav ul {
  display: flex;
  gap: clamp(20px, 2.5vw, 44px);
}
.main-nav ul .menu-item a{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  padding: 6px 0;
  position: relative;
  transition: color 0.4s var(--ease-out);	
}
.nav-link {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  padding: 6px 0;
  position: relative;
  transition: color 0.4s var(--ease-out);
}

.main-nav ul .menu-item a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s var(--ease-out);
}

.main-nav ul .menu-item a:hover,
.main-nav ul .menu-item.current-menu-item a {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}

.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.header-right .btn {
  padding: 10px 22px;
  font-size: 13px;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-btn {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--color-text);
  padding: 4px 2px;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity 0.4s var(--ease-out);
}

.lang-btn.active {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lang-btn:hover { opacity: 0.85; }

.lang-divider {
  color: var(--color-text);
  font-size: 14px;
  opacity: 0.5;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
	position: absolute;
	top: 50px;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--brand);
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out), background 0.4s var(--ease-out);
}

/* Hamburger → X animation when open */
body.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
body.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
body.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ==========================================================================
   MOBILE MENU OVERLAY (full-screen, only mobile)
   ========================================================================== */
/* MOBILE MENU — full-screen drawer with bg-menu.png texture */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:#0c0e0f url('../images/bg-menu.png') center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 64px 24px 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s var(--ease-out);
  overflow-y: auto;
}

.mobile-menu[hidden] {
  display: none;
}

body.menu-open .mobile-menu {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Lock body scroll when menu open */
body.menu-open {
  overflow: hidden;
}

/* Close (X) button — top right */
.mobile-menu__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--color-gold-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.mobile-menu__close:hover {
  color: #fff;
  transform: rotate(90deg);
}

/* Navigation list — centered, generous spacing */
.mobile-menu__nav {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vw, 44px);
  text-align: center;
  width: 100%;
}

.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(22px, 6.4vw, 32px);
  font-weight: 400;
  letter-spacing: 0.32em;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 6px 0;
  transition: color 0.3s var(--ease-out);
}
.mobile-menu__link.active {
  color: var(--color-gold-light);                    /* HOME highlighted in gold */
}
.mobile-menu__link:hover {
  color: var(--color-gold-light);
}

/* CTA button "GET CONSULTATION" */
.mobile-menu__cta {
  margin: clamp(24px, 4vw, 40px) 0 20px;
}

.mobile-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.mobile-menu__btn:hover {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  color: #07090a;
  border-color: transparent;
}
.mobile-menu__btn svg {
  flex-shrink: 0;
  color: var(--color-gold-light);
}
.mobile-menu__btn:hover svg { color: #07090a; }

/* Language switcher EN | VN */
.mobile-menu__lang {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 16px 0 32px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.24em;
}
.mobile-menu__lang-btn {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  padding: 6px 4px;
  transition: color 0.3s var(--ease-out);
}
.mobile-menu__lang-btn.active,
.mobile-menu__lang-btn:hover {
  color: var(--color-gold-light);
}
.mobile-menu__lang-divider {
  color: rgba(255, 255, 255, 0.3);
}

/* Partner logos at bottom */
.mobile-menu__partners {
  width: 100%;
  max-width: 360px;
  margin-top: auto;
}
.mobile-menu__partners img {
  width: 100%;
  height: auto;
  opacity: 0.85;
}


/* --------------------------------------------------------------------------
   9. Hero — 3-slide Swiper
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* Mobile-only elements — hidden on desktop, shown via media query */
.hero-mobile-logo,
.hero-mobile-social {
  display: none;
}

.hero-swiper {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
}

/*
 * FOIC fix — Swiper fade+loop sets ALL slides to opacity:0 via inline style
 * before it assigns .swiper-slide-active. During that brief window (can be
 * several hundred ms on slow connections) the hero is completely invisible
 * against the dark body background. Force the first child slide to remain
 * visible until Swiper has finished initialising.
 *
 * Once .swiper-initialized is present, Swiper controls opacity via JS
 * (inline style) so this selector has no further effect.
 */
.hero-swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide:first-child {
  opacity: 1 !important;
}
/* Ensure the hero bg image is always a block element so it never collapses */
.hero-swiper:not(.swiper-initialized) .hero-bg__img {
  display: block;
}

.hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  /* Ensure dark bg matches body — prevents white flash on slow image load */
  background-color: var(--color-bg);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(7, 9, 10, 0.85) 0%,
    rgba(7, 9, 10, 0.5) 40%,
    rgba(7, 9, 10, 0) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 60px;
  padding-bottom: 80px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  margin-bottom: clamp(20px, 2.4vw, 50px);
  max-width: 20ch;
}

.hero-title span {
  display: block;
}

.hero-tag {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--color-text-muted);
  max-width: 36em;
  margin-bottom: clamp(28px, 5vw, 90px);
}

/* Hero pagination — fixed bottom-left, doesn't slide */
.hero-pagination {
  position: absolute;
  bottom: clamp(36px, 4vh, 56px);
  left: var(--container-pad);
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  color: var(--color-text);
  z-index: 10;
}

.hero-page-number {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.hero-page-divider,
.hero-page-total {
  font-size: 18px;
  color: var(--color-text);
  opacity: 0.4;
}

.hero-page-divider { margin: 0 1px; }

.hero-page-arrows {
  display: flex;
  gap: 12px;
  margin-left: 18px;
  align-items: center;
}

.arrow-btn {
  width: auto;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
  opacity: 0.7;
}

.arrow-btn:hover {
  color: var(--color-gold-light);
  opacity: 1;
}

/* Hero partner — single image strip with all 3 partner logos, fixed across slides */
.hero-partner {
  position: absolute;
  bottom: clamp(36px, 4vh, 56px);
  right: var(--container-pad);
  z-index: 10;
  /* max-width: calc(100% - 2 * var(--container-pad)); */
	max-width: 390px;
}

.hero-partner__img {
  /* Original image is 387×38px; scale up 1.5–2x for legibility on large screens */
  width: clamp(320px, 32vw, 580px);
  height: auto;
  display: block;
  filter: brightness(1.05);
}

[data-reveal-delay="120"]  { transition-delay: 120ms; }
[data-reveal-delay="180"]  { transition-delay: 180ms; }
[data-reveal-delay="240"]  { transition-delay: 240ms; }
[data-reveal-delay="360"]  { transition-delay: 360ms; }


/* --------------------------------------------------------------------------
   10. Sections — base
   -------------------------------------------------------------------------- */
.section {
  /* padding: clamp(40px, 8vw, 150px) 0; */
  position: relative;
}


/* --------------------------------------------------------------------------
   11. Section 01 — A WORLD INTO YOU DRIFT
   -------------------------------------------------------------------------- */
.section-01 .container {
  display: flex;
  flex-direction: column;
  gap: clamp(50px, 5vw, 90px);
}
.section.section-01{
	padding-top:clamp(60px, 8vw, 150px);
}
/* Tagline image — exact artwork from Figma, scales responsively */
.tagline-stack {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

.tagline-img {
  width: clamp(320px, 50vw, 534px);
  height: auto;
  max-width: 100%;
  display: block;
}

/* Wide cinematic video band */
.section-01__band {
  position: relative;
  width: 100%;
  /* aspect-ratio: 24 / 7; */
  /* overflow: hidden; */
  margin: 0;
  border-radius: 4px;
}
/* @media screen and ()
@media screen and (min-width: 1900px){
	.section-01__band{
		max-width: 1656px;
		margin-left: auto;
		margin-right: auto;
	}
} */
.section-01__band img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  /* object-position: center; */
  display: block;
}

.placeholder-img--band {
  aspect-ratio: 24 / 7;
  min-height: 280px;
}

/* Watch Video CTA — bottom-right of the band */
.watch-btn {
  position: absolute;
  right: clamp(16px, 2.4vw, 36px);
  bottom: clamp(16px, 2vw, 28px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--color-text);
  z-index: 3;
}

.watch-btn__circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--color-text);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}

.watch-btn:hover .watch-btn__circle {
  color: var(--color-gold-light);
  border-color: var(--color-gold-light);
  background: rgba(243, 203, 160, 0.08);
}

.watch-btn__label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: color 0.4s var(--ease-out);
}

.watch-btn:hover .watch-btn__label { color: var(--color-gold-light); }


/* Section 01 grid: copy left, 2 cards right
   NARROW: only the grid is narrow — tagline + band above stay full container width */
.section-01__grid {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: clamp(40px, 4vw, 70px);
  align-items: flex-start;
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.section-01__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  max-width: 460px;
}
@media screen and (min-width: 1900px){
	.section-01__copy{
		padding-top: clamp(30px, 4vw, 60px);	
	}
	
}
.section-01__copy .display-h2 {
  margin-bottom: 4px;
}

.section-01__copy .lead {
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.section-01__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media screen and (min-width: 992px){
.section-01__cards{
		min-width: clamp(440px, 36vw, 680px);
	}	
	.section-01__cards .img-card{
		aspect-ratio: inherit;
	}
	.section-01__cards .img-card img{
		object-fit: inherit;
		object-position: inherit;
	}
}
.img-card {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  border-radius: 4px;
}

.img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s var(--ease-out);
}

.img-card:hover img { transform: scale(1.05); }


/* --------------------------------------------------------------------------
   12. Section 02 — Where Icon Invites Icon (framed image + centered caption)
   -------------------------------------------------------------------------- */
.section.section-02 {
  padding: clamp(40px, 7vw, 150px) 0;
  /* background: var(--color-bg); */
}

.section-02__media {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto clamp(30px, 5vw, 40px);
}

.section-02__content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 810px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--container-pad);
}

.section-02__content .display-h2 {
  text-align: center;
}

.section-02__content .lead {
  text-align: center;
  color: var(--color-text-muted);
}

/* Decorative frame wrapper for images */
.framed-image {
  position: relative;
  width: 100%;
  /* aspect-ratio: 22 / 10; */
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(243, 203, 160, 0.25);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 30px 80px -20px rgba(0, 0, 0, 0.6);
    
}

.framed-image img {
  padding: 16px;
  object-fit: inherit;
  display: block;
  border-radius: 12px;
}


/* --------------------------------------------------------------------------
   13. Section 03 — The Exquisite Beauty (full-width image + side copy)
   -------------------------------------------------------------------------- */
/* Full-bleed cinematic image with overlay copy on the right */
.section-03 {
  position: relative;
  overflow: hidden;
}
.section-03__grid {
  display: block;
  position: relative;
  padding: 0;
  gap: 0;
}
.section-03__media {
  width: 100%;
  aspect-ratio: 16 / 6;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}
.section-03__media picture,
.section-03__media picture > img,
.section-03__media > img {
  width: 100%;
  height: 100%;
  display: block;
}
.section-03__media picture > img,
.section-03__media > img {
  object-fit: cover;
}
.section-03__copy {
  position: absolute;
  /* Vertical center via top/bottom 0 + margin auto — leaves `transform`
     free so the .reveal animation (translateY 40 → 0) doesn't clash. */
  top: 0;
  bottom: 0;
  right: clamp(20px, 4vw, 80px);
  margin: auto 0;
  height: fit-content;
  max-width: 540px;                   /* wider so title fits on one line */
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  color: #fff;
}

/* Larger title to match design (was clamping smaller in default .display-h2) */
.section-03__copy .display-h2 {
  font-size: clamp(41px, 3.4vw, 58px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  font-weight: 400;
}
.section-03__copy .lead {
  font-size: clamp(15px, 1.05vw, 20px);
  line-height: 1.7;
  margin: 0;
}
@media screen and (min-width: 992px){
.section-03__copy .lead {
  padding-bottom: 40px;
}	
}
/* Image-right modifier — overlay sits on the LEFT instead */
.section-03__grid--reverse .section-03__copy {
  right: auto;
  left: clamp(20px, 4vw, 80px);
}

/* Mobile (≤900px) — image on top, 2-col content below
   LEFT col: title (spans full content height)
   RIGHT col: lead text (row 1) + button (row 2) */
@media (max-width: 900px) {
	.badge-link{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 3px 8px;
		gap: 0;
		border:1px solid #FFFFFF;
		backdrop-filter: blur(19.1472px);
		/* Note: backdrop-filter has minimal browser support */
		border-radius: 19px;
		font-size: 9px;
	}
  .section-03 {
    overflow: visible;
  }
  .section-03__media {
    aspect-ratio: 4 / 3;
  }
  .section-03__copy {
    position: static;
    transform: none;
    max-width: none;
    color: var(--color-text);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(16px, 4vw, 32px);
    row-gap: 16px;
    align-items: start;
    padding: clamp(28px, 5vw, 48px) var(--container-pad);
  }
  .section-03__copy .display-h2 {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    font-size: clamp(28px, 7vw, 44px);
    line-height: 1.15;
    margin: 0;
  }
  .section-03__copy .lead {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(13px, 1.6vw, 15px);
    line-height: 1.6;
    margin: 0;
  }
  .section-03__copy .btn {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 4px;
  }
  .section-03__grid--reverse .section-03__copy { left: auto; }
}


/* --------------------------------------------------------------------------
   14. Section 04 — A Triumph of Craftsmanship
   -------------------------------------------------------------------------- */
/* .section-04 {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
} */

.section-04 .container {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
  max-width: var(--container-narrow);
}

.section-04__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
}

.section-04__header-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 660px;
}

.section-04__arrows {
  display: flex;
  gap: 10px;
}

.arrow-btn--circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0d0e10;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.arrow-btn--circle:hover,
.arrow-btn--circle:focus-visible {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  color: #07090a;
  border-color: transparent;
  outline: none;
}
.arrow-btn--circle svg path { fill: currentColor; }

.arrow-btn--circle:hover,
.arrow-btn--circle:focus-visible {
  color: var(--color-bg);
  border-color: var(--color-gold-light);
  background: var(--color-gold-light);
}

.arrow-btn--circle:disabled,
.arrow-btn--circle.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Craft (Section 04) Swiper */
.craft-swiper {
  width: 100%;
  overflow: hidden;
}

.craft-slide {
  display: grid;
  grid-template-columns: 1.4fr 0.65fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: stretch;
}

.craft-slide__media {
  --craft-badge-w: clamp(44px, 5.2vw, 58px);
  position: relative;
  margin: 0;
  /* aspect-ratio: 837 / 440; */
  overflow: hidden;
  background: #050909;
  border-radius: 28px 20px 20px 28px;
}

.craft-slide__media img,
.craft-slide__media .full-img {
  width: calc(100%);

	  display: block;
  /*
  height: 100%;object-fit: cover;
  object-position: center;

  margin-left: var(--craft-badge-w);*/
  /*border-radius: 0 20px 20px 0;*/
}

.craft-slide__media .placeholder-img {
  min-height: 100%;
}

.craft-slide__media .placeholder-img--wide {
  aspect-ratio: auto;
}

.craft-slide__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
}
@media screen and (min-width: 992px){
	.craft-slide__copy{
		padding-left: clamp(20px, 8vw, 40px);
	}
}
/* Maison/Couture side tab with the small diagonal dark fold. */
.vertical-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--craft-badge-w);
  height: 100%;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 14%;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #07090a;
  writing-mode: sideways-lr;
  z-index: 2;
  border-radius: 28px 0 0 28px;
  overflow: hidden;
  box-shadow:
    inset 1px 0 0 #d49b69,
    inset 0 1px 0 #d49b69,
    inset 0 -1px 0 #d49b69;
}

.vertical-badge::before,
.vertical-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.vertical-badge::before {
  background: linear-gradient(180deg, #e9b783 0%, #f2c79a 42%, #c98c5a 100%);
  clip-path: polygon(0 0, 100% 0, 100% 58%, 0 42%);
}

.vertical-badge::after {
  background: #050909;
  clip-path: polygon(0 42%, 100% 58%, 100% 100%, 0 100%);
}

.craft-slide__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 400;
  line-height: 1.2;
font-style: normal;
color: rgba(255, 255, 255, 0.63);


}

.craft-slide__line {
  font-family: var(--font-body);
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 30px;
leading-trim: both;
text-edge: cap;
color: rgba(255, 255, 255, 0.63);
}

/* Small button variant */
.btn--sm {
  padding: 10px 20px;
  font-size: 12px;
}

.maison-block__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 44px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-gold-light);
}

.maison-block__line {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   14b. Section 04 — Craft tabs (MAISON | COUTURE)
   -------------------------------------------------------------------------- */
.craft-tabs-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 36px);
}

.craft-tabs {
  display: inline-flex;
  align-items: flex-end;
  gap: clamp(28px, 4vw, 56px);
  align-self: flex-start;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.craft-tab-btn {
  position: relative;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 14px 6px 18px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: color 0.35s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.craft-tab-btn::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  transform: scale(0.6);
  transition: transform 0.4s ease, background 0.4s ease, opacity 0.4s ease;
}

.craft-tab-btn:hover {
  color: rgba(255, 255, 255, 0.85);
}

.craft-tab-btn.is-active {
  color: #f2c79a;
}

.craft-tab-btn.is-active::before {
  background: linear-gradient(135deg, #F3CBA0 0%, #9D6340 100%);
  opacity: 1;
  transform: scale(1);
}

.craft-tab-btn__underline {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(.6,.05,.2,1);
}

.craft-tab-btn.is-active .craft-tab-btn__underline {
  transform: scaleX(1);
}

.craft-tab-btn:focus-visible {
  outline: 2px solid rgba(243, 203, 160, 0.6);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Panels — both kept in flow (grid-stacked) so each swiper has real
   dimensions at init. Only the active one is visible/interactive.
   min-width/min-height: 0 are critical — they stop the grid cell from
   expanding to match Swiper's intrinsic (huge) content size. */
.craft-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}

.craft-tab-panel {
  grid-column: 1;
  grid-row: 1;            /* stack every panel into one cell */
  min-width: 0;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  /* Delay visibility transition so the panel fades out before being hidden */
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    visibility 0s linear 0.45s;
}

.craft-tab-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 1;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    visibility 0s linear 0s;
}

/* Mobile: center the tabs, tighter spacing */
@media (max-width: 768px) {
  .craft-tabs {
    width: 100%;
    justify-content: center;
    gap: clamp(18px, 8vw, 36px);
    align-self: stretch;
  }
  .craft-tab-btn {
    padding: 12px 4px 14px;
    font-size: 13px;
    letter-spacing: 0.18em;
  }
}

/* --------------------------------------------------------------------------
   15. Section 05 — The Curated Collection (Master Plan)
   -------------------------------------------------------------------------- */
.section.section-05 {
  /* background: var(--color-bg); */
	padding: clamp(50px, 6vw, 90px) 0 clamp(60px, 6vw, 110px) 0 ;
}
.section.section-06{
	padding: clamp(40px, 6vw, 64px) 0 clamp(30px, 6vw, 78px) 0;
}
/* Header + masterplan share the narrow container with sections 01/02/04 — */
/* Amenities table below stays WIDE (uses default .container 1720px) per design */
.section-05__header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 80px);
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

.section-05 .masterplan {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

.masterplan {
  position: relative;
  margin-bottom: clamp(60px, 7vw, 100px);
  width: 100%;
}

.masterplan__viewport {
  position: relative;
  width: 100%;
  overflow: visible;
  background: transparent;
}

.masterplan__viewport img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Legend overlay — bottom-right of master plan */
.masterplan__legend {
  position: absolute;
  right: clamp(40px, 8vw, 160px);
  bottom: clamp(40px, 6vw, 120px);
  display: flex;
  flex-direction: column;
  gap: 28px;                                  /* more breathing room between items */
  z-index: 4;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 24px;                                  /* wider gap between dot and text */
}

.legend-dot {
  width: 48px;                                /* much larger — matches design */
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.legend-dot--gold {
  background: var(--color-gold);
}

.legend-dot--cream,
.legend-dot--white {
  background: #d6c4a3;
}

.legend-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.amenities-list.couture-col__bottom{
	padding-top: 20px;
}
.legend-text .legend-vn {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.legend-text .legend-en {
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 300;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  line-height: 1.3;
}


/* Amenities grid — 3 zones (matches design) */
/* Amenities — 3 main zones, each with 2 sub-columns inside */
.amenities-grid {
  display: grid;
  /* SIGNATURE 2-col : MAISON 4-col : COUTURE 2-col → 2:4:2 ratio */
  grid-template-columns: 1fr 2.4fr 1fr;
  gap: clamp(32px, 3vw, 60px);
  align-items: start;
}

/* MAISON ZONE — explicit 4-column grid; each col has its own content flow */
.maison-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 48px);                  /* horizontal gap between columns */
  align-items: start;
}

.maison-col {
  display: flex;
  flex-direction: column;
}

/* Inside a maison-col, lists/headers flow tightly; spacing controlled by
   each element's own margins (amenities-list, amenities-level, etc.) */
.maison-col .amenities-list {
  margin: 0;
}

/* Bottom UL in cols 1, 2, 4 — top spacer matches Level 7 vertical block in col 3
   (margin-top 12 + padding-top 14 + text ~22 + margin-bottom 16 ≈ 64px) */
.maison-col__bottom {
  margin-top: 64px;
}

/* Level 7 inside maison-col — keep its own spacing, no border line */
.maison-col .amenities-level {
  margin: 12px 0 16px;
  padding-top: 14px;
  border-top: 0;
}

/* Sublabel inside maison-col — breathing room */
.maison-col .amenities-sublabel {
  margin-top: 28px;
  margin-bottom: 14px;
}

/* Item rows — looser spacing for design parity */
.maison-col .amenities-list {
  gap: 14px;
}

/* Responsive: drop to 3 / 2 / 1 columns on smaller screens */
@media (max-width: 1280px) {
  .maison-grid { grid-template-columns: repeat(4, 1fr); }
	.maison-col{
		min-width: 160px;
	}
}
@media (max-width: 1024px) {
  .maison-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .maison-grid { grid-template-columns: repeat(4, 1fr); }
  .maison-col__bottom { margin-top: 24px; }
}

/* COUTURE ZONE — explicit 2-column grid (top + bottom sections per col) */
.couture-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 48px);
  align-items: start;
}

.couture-col {
  display: flex;
  flex-direction: column;
}
.couture-col .amenities-list {
  margin: 0;
  gap: 14px;
}
.couture-col__bottom {
  margin-top: 64px;                       /* mirrors maison-col__bottom spacing */
}

@media (max-width: 600px) {
  /* .couture-grid { grid-template-columns: 1fr; } */
  .couture-col__bottom { margin-top: 24px; }
}

.amenities-col {
  display: flex;
  flex-direction: column;
}

.amenities-col__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 34px);
  letter-spacing: 0.18em;
  color: var(--brand);
  margin-bottom: clamp(20px, 2vw, 32px);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-line);
}

/* 2 sub-columns inside each zone */
.amenities-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 40px);
}

.amenities-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 16px;
}

.amenities-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.3;
  cursor: default;
}

/* Number badge — DEFAULT = OUTDOOR (gold gradient) */
.amenities-list .num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #9A603B;
  color: var(--color-bg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* INDOOR variant — cream/beige, matches TIỆN ÍCH TRONG NHÀ legend dot */
.amenities-list .num.num--indoor {
  background: #FCC790;
  color: #07090A;
}

/* Diamond/rhombus shape — for MAISON ZONE */
.amenities-col--diamond .amenities-list li {
  grid-template-columns: 26px 1fr;
}

.amenities-col--diamond .amenities-list .num {
  width: 22px;
  height: 22px;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  font-size: 9px;
  font-weight: 700;
}

/* Square shape — for COUTURE ZONE */
.amenities-col--square .amenities-list li {
  grid-template-columns: 26px 1fr;
}

.amenities-col--square .amenities-list .num {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  clip-path: none;
  font-size: 9.5px;
  font-weight: 700;
}

/* Bilingual text stack — VN gold-light, EN smaller white-soft */
.item-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.item-text .vn {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
  line-height: 1.25;
}

.item-text .en {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
  line-height: 1.25;


}

/* Level divider — full-width within column, before next sub-section */
.amenities-level {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 500;
  color: var(--color-gold-light);
  letter-spacing: 0.12em;
  margin: 12px 0 16px;
  padding-top: 14px;
  text-transform: capitalize;
}

/* Sub-section label — for spa house dividers within a sub-column */
.amenities-sublabel {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.12em;
  margin: 10px 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
  line-height: 1.4;
}

.amenities-sublabel span {
  color: var(--font-body);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.14em;
}

.amenities-note {
  margin-top: 60px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13px;
  text-align: center;
  color: var(--color-text-soft);
  letter-spacing: 0.04em;
}


/* --------------------------------------------------------------------------
   16. Section 06 — Iconic Beyond Timelessness (3 tab cards)
   -------------------------------------------------------------------------- */
.section-06__header {
  display: flex;                          /* was: grid */
  justify-content: space-between;         /* title hugs LEFT, lead hugs RIGHT */
  align-items: start;
  gap: clamp(24px, 6vw, 80px);            /* was: clamp(40, 6vw, 120) → simplified */
  margin-bottom: clamp(32px, 6vw, 80px);  /* was: clamp(50, 6vw, 80) → tighter min */
top: clamp(42px, 6vw, 90px);
  max-width: 100%;
}
.section-06__header .display-h2 {
  max-width: 600px;
  flex-shrink: 0;        /* prevent title shrinking when lead expands */
}
.section.section-06 .container{
	max-width: clamp(1100px, 90vw, 1400px)
}
@media screen and (min-width: 992px){
	.section-06__header .display-h2 {
	  max-width: 340px;
	  flex-shrink: 0;        /* prevent title shrinking when lead expands */
	}
	.lang-vi .section-06__header .display-h2{
		max-width: 260px;
	}
}
@media screen and (min-width: 1500px){
	.lang-vi .section-06__header .display-h2{
		max-width: 338px;
	}
}
.section-06__header .lead {
  max-width: 420px;
  align-self: end;       /* baseline-align với title bottom */
  padding-bottom: 8px;
}

.tabs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
}

/* Desktop default: swiper not initialized → wrapper acts as grid contents */
.tabs-grid.iconic-swiper:not(.swiper-initialized) > .swiper-wrapper {
  display: contents;          /* Children behave as direct grid items */
}

.tabs-grid.iconic-swiper:not(.swiper-initialized) > .iconic-pagination {
  display: none;              /* Hide dots on desktop */
}

/* When Swiper IS initialized (mobile), restore swiper layout */
.tabs-grid.iconic-swiper.swiper-initialized {
  display: block !important;
  padding-bottom: 32px;
}
.tabs-grid.iconic-swiper.swiper-initialized > .swiper-wrapper {
  display: flex !important;
  align-items: center;
}
.tabs-grid.iconic-swiper.swiper-initialized > .iconic-pagination {
  display: flex !important;
}

.tab-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* border: 1px solid var(--color-line); */
  background: var(--color-bg-alt);
  overflow: hidden;
  border-radius: 0;
  transition: border-color 0.4s var(--ease-out);
  position: relative;
}
.tab-card:before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  padding: 1px;
  background: linear-gradient(
    180deg,
    #ffffff 0%,        /* trắng đỉnh */
    #b8b8b8 25%,       /* bạc nhạt */
    #8a7a5a 55%,       /* be/nâu nhạt — KHÔNG đen */
    #a87a3a 80%,       /* copper dịu */
    #d4923a 100%       /* copper sáng đáy */
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;

}

.tab-card:hover {
  /*border-color: var(--color-gold-light);*/
}

.tab-card__media {
  /* aspect-ratio: 4 / 5; */
  overflow: hidden;
  padding: 16px;
	padding-bottom: 0;
}
.tab-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s var(--ease-out);
  border-radius: 12px;
}

.tab-card:hover .tab-card__media img { transform: scale(1.06); }

.tab-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
	padding: clamp(14px, 1vw, 16px) clamp(16px, 2vw, 16px) clamp(24px, 3vw, 30px) clamp(16px, 2vw, 16px);
  gap: 16px;
}

.tab-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1vw, 24px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   17. Section 07 — Map
   -------------------------------------------------------------------------- */
.section-07__header {
  margin-bottom: clamp(16px, 5vw, 30px);
	display: none;
}

.map-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-line);
  overflow: hidden;
  background: var(--color-bg-alt);
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.3) contrast(0.95) brightness(0.85);
}

/* Map zoom controls — joined pill: + on top, divider line, − on bottom */
.map-controls {
  position: absolute;
  right: 24px;
  bottom: 24px;
  top: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 4;
  background: #0a0a0a;
  border-radius: 12px;                     /* slightly rounded rectangle (not pill) */
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.map-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}

/* Thin divider between + and − */
.map-btn + .map-btn {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.map-btn:hover,
.map-btn:focus-visible {
  color: #07090a;
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  backdrop-filter: blur(34.1268px);
  -webkit-backdrop-filter: blur(34.1268px);
  outline: none;
}


/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  /* Transparent so body's bg-1.jpg texture shows through —
     consistent with the rest of the site (no brown gradient overlay) */
  background: transparent;
  margin-top: 0;
}

.footer-top {
  padding: clamp(20px, 6vw, 40px) 0 clamp(40px, 4vw, 60px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.6fr 2fr 2.4fr;
  gap: clamp(24px, 2vw, 40px);
}

.footer-col h4,
.footer-col__toggle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: #AA7143;
  text-transform: uppercase;
  margin-bottom: 22px;
  /* Reset button defaults for desktop */
  background: transparent;
  border: 0;
  padding: 0;
  cursor: default;
  display: block;
  width: 100%;
  text-align: left;
}

.footer-col__toggle .footer-col__chevron {
  display: none;  /* Hide chevron on desktop */
}

.footer-col__panel {
  /* Always visible on desktop (no accordion) */
  display: block;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: #AA7143;
  transition: color 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.footer-col a:hover { opacity: 1; color: #fff; }

.footer-mid__inner {
  border-top: 1px solid #AA7143;
  padding: 24px 0;
}
.footer-mid__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: clamp(20px, 2.4vw, 40px);
  flex-wrap: wrap;
}
.footer-links li{
	list-style: none;
	position: relative
}
.footer-links li:before{
	content: "";
    position: absolute;
    top: 50%;
    right: -15px;
    height: 60%;
    width: 1px;
    background: #aa7143;
    transform: translateY(-50%);
}
.footer-links li:last-child:before{
	display: none;
}
.footer-links a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: #AA7143;
  transition: color 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.footer-links a:hover { opacity: 1; color: #fff; }

.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-social__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: #AA7143;              /* champagne — matches design */
  margin-right: 8px;
  letter-spacing: 0;
  /* Follow @CapitaLand */
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.social-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.social-icon:hover {
  opacity: 0.75;
  transform: translateY(-2px);
}


.footer-bottom {
  background: var(--gradient-gold-soft); /* horizontal champagne → bronze (matches design) */
  color: var(--color-bg);
  padding: 26px 0;
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo__img {
  height: 44px;
  width: auto;
  display: block;
}

.footer-logo strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--color-bg);
}

.footer-logo__sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--color-bg);
  opacity: 0.85;
  text-transform: uppercase;
}

.footer-copy {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-bg);
  opacity: 0.85;
}


/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

/* Below 1600px — slight scale-down from 1920 baseline */
@media (max-width: 1600px) {
  :root {
    --container-pad: clamp(20px, 3.6vw, 80px);
    --header-height: 80px;

    --fs-h1: clamp(44px, 5.2vw, 72px);
    --fs-h2: clamp(41px, 3.2vw, 56px);
    --fs-h3: clamp(24px, 2.6vw, 36px);
    --fs-body-1: clamp(17px, 1.4vw, 22px);
    --fs-body-2: clamp(17px, 1.4vw, 22px);
    --fs-body-3: clamp(15px, 1.1vw, 18px);
  }

  /* .section { padding: clamp(56px, 6.4vw, 110px) 0; } */
}

/* Below 1440px — typical laptop (15") */
@media (max-width: 1440px) {
  :root {
    --container-pad: clamp(20px, 3.2vw, 64px);
    --header-height: 76px;

    --fs-h1: clamp(40px, 4.8vw, 64px);
    --fs-h2: clamp(41px, 2.5vw, 54px);
    --fs-h3: clamp(22px, 2.4vw, 32px);
    --fs-body-1: clamp(16px, 1.3vw, 20px);
    --fs-body-2: clamp(16px, 1.3vw, 20px);
    --fs-body-3: clamp(14px, 1vw, 16px);
  }

  /* .section { padding: clamp(48px, 5.6vw, 90px) 0; } */

  .hero-content { padding-top: 40px; padding-bottom: 60px; }
  .hero-pagination { bottom: 36px; }
  .hero-partner { bottom: 36px; gap: clamp(20px, 2vw, 36px); }
  .hero-partner__logo { font-size: 14px; }
  .hero-partner__label { font-size: 8px; }

  .section-01 .container { gap: clamp(36px, 4vw, 56px); }

  .amenities-list li { grid-template-columns: 24px 1fr; gap: 10px; }
  .item-text .vn { font-size: 12px; }
  .item-text .en { font-size: 10px; }

  .footer-col h4 { font-size: 11px; }
  .footer-col a { font-size: 12px; }
}

/* Below 1280px — 13" laptop (MacBook Air etc) */
@media (max-width: 1280px) {
  :root {
    --container-pad: clamp(20px, 3vw, 56px);
    --header-height: 72px;

    --fs-h1: clamp(36px, 4.4vw, 56px);
    --fs-h2: clamp(41px, 1vw, 46px);
    --fs-h3: clamp(20px, 2.2vw, 28px);
  }

  .section { padding: clamp(40px, 4.8vw, 72px) 0; }

  .nav-link { font-size: 13px; }
  .header-right .btn { padding: 9px 18px; font-size: 12px; }
  .lang-btn { font-size: 13px; }

  .hero-title { max-width: 100%; }
  .btn--white { padding: 14px 26px; font-size: 13px; }

  .craft-slide { gap: clamp(24px, 3vw, 40px); }
  .craft-slide__title { font-size: clamp(22px, 2vw, 30px); }

  .tabs-grid { gap: clamp(16px, 2vw, 24px); }
  .tab-card__title { font-size: clamp(16px, 1.3vw, 20px); }
}

/* Tablet & below */
@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .amenities-col--wide {
    grid-column: span 2;
  }
}

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }

  .header-inner {
    /* Hamburger RIGHT: switch to flex so the single visible element
       (menu-toggle) is pushed to the right edge. Grid col ordering
       can't move the first DOM child to the right without JS. */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
  }
  /* Hide logo from header bar — it surfaces inside the hero via ::before */
  .logo { display: none; }

  /* Hide EN | VI at all breakpoints ≤1024px (design shows hamburger only) */
  .header-right .lang-switch { display: none; }
  .header-right .btn { display: none; }

  /* Container padding for small viewports — design fidelity preserved at desktop ≥1100px */
  .container,
  .section-02__media {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  .section-01__grid,
  .section-03__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .section-04__header {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .craft-slide {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .craft-slide__media { aspect-ratio: 16 / 9; }

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

/* ==========================================================================
   MOBILE — Tablet & Phone (≤768px) — comprehensive design-matched rules
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
    --container-pad: 20px;
  }

  /* CRITICAL: prevent horizontal page scroll caused by any section.
     overflow-x: clip allows child scroll containers (amenities-grid) to still work,
     while preventing the parent from scrolling horizontally. */
  .section,
  section {
    max-width: 100vw;
    overflow-x: clip;
  }
  /* Fallback: hidden also works but slightly less ideal */
  @supports not (overflow: clip) {
    .section,
    section {
      overflow-x: hidden;
    }
  }

  /* ---------- HEADER (simplified — only hamburger top-right) ---------- */
  .site-header {
    padding: 16px 0;        /* more vertical padding so hamburger sits comfortably top */
  }
  .site-header.is-scrolled { padding: 12px 0; }

  .header-inner {
    /* Hamburger RIGHT: override 1024px flex to keep same direction,
       adjust only padding and width for phone screens. */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    padding: 0 24px;
    max-width: 100%;
  }
  .main-nav,
  .logo,
  .header-right .btn,
  .header-right .lang-switch {
    display: none;
  }
  .header-right {
    gap: 0;
    padding: 0;
  }
  .menu-toggle {
    display: flex;
    width: 28px;
    height: 18px;
  }

  /* ---------- HERO (compact, fits exactly 1 viewport on mobile) ---------- */
  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .hero-swiper {
    height: 100%;
    min-height: 0;
  }
  .hero-swiper .swiper-slide,
  .hero-swiper .swiper-slide-active {
    height: 100%;
    min-height: 0;
  }
  .hero-slide {
    padding-top: 0;
    align-items: stretch;
  }
.lead{
	font-size: 14px;
}
  .hero-content {
    padding: clamp(140px, 22vh, 200px) 24px clamp(96px, 14vh, 130px);
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .hero-content::before {
    /* Logo "ORCHARD COLLECTION" appears as a visual cue inside hero on mobile */
    display: none;
  }

  .hero-title {
    font-size: clamp(32px, 8.5vw, 48px);
    line-height: 1.1;
    text-align: center;
    margin-bottom: clamp(14px, 2.2vh, 22px);
  }
  .hero-title--multiline { font-size: clamp(26px, 7vw, 38px); }

  .hero-tag {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 320px;
    margin-bottom: clamp(20px, 3vh, 32px);
  }

  .hero-subtitle {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 320px;
  }

  .hero-content .btn {
    margin-left: auto;
    margin-right: auto;
  }

  /* Pagination + arrows + partners hidden in mobile (replaced by social icons) */
  .hero-pagination,
  .hero-partner {
    display: none;
  }

  /* Mobile-only ORCHARD COLLECTION logo — centered top of hero, above title */
  .hero-mobile-logo {
    display: block;
    position: absolute;
    top: 80px;                    /* below header (header padding 16+16=32, hamburger 18, ~30px buffer) */
    left: 50%;
    transform: translateX(-50%);
    width: 180px;                 /* logo width ~180px on mobile (matches design) */
    z-index: 5;
    pointer-events: none;         /* doesn't block hero interactions */
  }
  .hero-mobile-logo img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Mobile-only social icons inline in hero */
  .hero-mobile-social {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 24px 0 32px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 10;
  }
	.hero-mobile-social .hero-social-btn img{
		max-width: 24px;
	}
  .hero-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-gold);
    color: var(--color-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
  }
  .hero-social-btn:hover { transform: scale(1.05); }
  .hero-social-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-bg);
    letter-spacing: 0.02em;
  }

  /* ---------- SECTION 01 — Tagline + Band + Drift Into ---------- */
  .section-01 .container {
    padding: 0;
    gap: clamp(40px, 6vw, 60px);
  }
	.section-01 .section-01__grid{
		padding-left: 24px;
		padding-right: 0;
	}
  .tagline-img {
    width: 90%;
    max-width: 360px;
  }
  .section-01__band {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
  }
  .section-01__band img { border-radius: 8px; height: 100%!important; object-fit: cover;object-position: center;}
  .watch-btn { right: 16px; bottom: 16px; }
  .watch-btn__icon { width: 40px; height: 40px; }

  /* Drift Into grid → vertical stack (text on top, cards swipe horizontal below) */
  .section-01__grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
    text-align: center;
    max-width: 100%;
    padding: 0 16px;
	  display: flex;
	  flex-wrap: wrap;
	  flex : 0 0 100%;
	  width: 100%
  }
  .section-01__copy {
    align-items: center;
    text-align: center;
    max-width: 100%;
	  order: 2;
	  flex: 0 0 100%; 
  }
  .section-01__copy .display-h2 { text-align: center; }
  .section-01__copy .lead { text-align: center; }

  /* Cards horizontal scroll — first card full width, 2nd card peeks 2/3 */
  .section-01__cards {
    grid-template-columns: none;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 8px;
    margin: 0;
    scrollbar-width: none;
  }
  .section-01__cards::-webkit-scrollbar { display: none; }
  .section-01__cards .img-card {
    flex: 0 0 65%;          /* Each card takes 65% — second peeks ~2/3 */
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
    border-radius: 6px;
    margin: 0;
  }

  /* ---------- SECTION 02 — Where Icon ---------- */
  .section-02 { padding: clamp(40px, 8vw, 80px) 0; }
  .section-02__media {
    padding: 0 32px;
    margin-bottom: 32px;
  }
  .framed-image { border-radius: 12px; /*aspect-ratio: 16 / 10;*/ }
  .section-02__content {
    padding: 0 32px;
    max-width: 100%;
  }
  .section-02__content .display-h2 {
    font-size: clamp(41px, 7vw, 46px);
    line-height: 1.15;
  }

  /* ---------- SECTION 03 — Exquisite Beauty (KEEP 2-col on mobile per design) ---------- */
  .section-03 { padding: 0; }
  .section-03__grid {
    grid-template-columns: 1fr;  /* image full width on top */
    gap: 0;
  }
  .section-03__media {
    aspect-ratio: 16 / 11;
    width: 100%;
  }
  .section-03__media img { width: 100%; height: 100%; object-fit: cover; }

  /* But the COPY area becomes 2-col internally (title left + lead+button right) */
  .section-03__copy {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 16px;
    align-items: start;
    padding: 32px 16px;
  }
  .section-03__copy .display-h2 {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: clamp(41px, 7.5vw, 46px);
    line-height: 1.05;
    text-align: left;
  }
  .section-03__copy .lead {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    margin-bottom: 12px;
  }
  .section-03__copy .btn {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  /* ---------- SECTION 04 — Triumph + 2-slide swiper ---------- */
  .section-04 { padding: clamp(40px, 8vw, 80px) 0; }
  .section-04 .container {
    padding: 0 16px;
    text-align: center;
    max-width: 100%;
  }
  .section-04__header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }
  .section-04__header-text { text-align: center; max-width: 100%; }
  .section-04__header-text .display-h2 { text-align: center;font-size: 30px; }
  .section-04__header-text .lead { text-align: center; }

  /* On mobile, JS injects arrows inline into each slide's copy area.
     Hide the header arrows so they don't show in both places. */
  .section-04__header .section-04__arrows {
    display: none !important;
  }
  .craft-prev, .craft-next { width: 36px; height: 36px; }

  /* ── Zone-name row: JS injects .craft-zone-nav after .eyebrow ── */
  .craft-zone-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4px;
  }
  /* The eyebrow is pulled into the zone-nav row via JS — hide the
     original .eyebrow span so only the one inside the nav row shows */
  .craft-slide__copy > .eyebrow {
    display: none;
  }
  .craft-zone-nav .eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(20px, 5.5vw, 28px);
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 0.04em;
    margin: 0;
  }
  .craft-zone-nav .craft-arrows-inline {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }

  /* ── craft-slide__copy: left-align text, description+button row ── */
  .craft-slide__copy {
    padding-top: 16px;
    gap: 10px;
    align-items: stretch;       /* allow children to span full width */
  }
  .craft-slide__title {
    font-size: clamp(14px, 3.5vw, 16px);
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.06em;
    margin-bottom: 2px;
	  text-align:left;
  }
  /* Description: left-aligned (not centered) */
  .craft-slide__line {
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.55);
    flex: 1;
  }
  /* Description + button: same row, button pushed right */
  .craft-slide__copy-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }
  .craft-slide__copy-footer .craft-slide__line {
    margin: 0;
  }
  .craft-slide__copy-footer .btn {
    flex-shrink: 0;
    align-self: flex-end;
  }

  /* Craft card stacked: image on top, content below */
  .craft-card {
    grid-template-columns: 1fr;
    gap: 0;
    background: transparent;
  }
  .craft-card__media {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
  }
  .craft-card__badge {
    /* Vertical "MAISON" badge positioned at top-left corner of image */
    width: 36px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .craft-card__content {
    padding: 24px 0 0;
    text-align: left;
  }

  /* BUG 2 FIX: craft-slide__media — the desktop fullbleed values
     (86vh height, 50% img width, 80px border-radius) were leaking into
     mobile, producing a near-full-screen image with half the area empty.
     Reset to a proper stacked card layout on mobile. */
  .craft-slide__media {
    width: 100%;
    height: auto;
    /* aspect-ratio: 4 / 3; */
    margin-inline: 0;
    border-radius: 16px;
  }

  .craft-slide__media img,
  .craft-slide__media .full-img {
    width: 100%;
    /* height: 100%; */
    margin-left: 0;
    /* object-fit: cover;
    object-position: center; */
  }

  /* Vertical badge: shrink back to pill size (desktop size was 50% width) */
  .vertical-badge {
    width: var(--craft-badge-w, 52px);
    border-radius: 16px 0 0 16px;
    font-size: clamp(11px, 3vw, 14px);
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ---------- SECTION 05 — Curated Collection (vertical zones) ---------- */
  .section-05 { padding: clamp(40px, 8vw, 80px) 0; }
  .section-05 .container { padding: 0 16px; }
  .section-05__header {
    margin-bottom: 32px;
  }
  .section-05__header .display-h2 {
    font-size: 41px;
    text-align: center;
    line-height: 1.3;
	  max-width: 68%;
	  margin-left: auto;
	  margin-right: auto;
  }

  .masterplan { margin-bottom: 32px; }
  .masterplan__viewport { padding: 0; }
  .masterplan__viewport img { width: 100%; }

  /* Legend: row on mobile, centered below masterplan */
  .masterplan__legend {
    position: relative;
    right: auto;
    bottom: auto;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 20px 16px 0;
    background: transparent;
  }
  .legend-item { font-size: 11px; }

  /* Amenities: 3 ZONES scroll horizontal. Each zone fills viewport, swipe to see next zone. */
  .amenities-grid {
    display: flex;                          /* override desktop grid */
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    margin: 0 calc(var(--container-pad) * -1); /* full-bleed beyond container padding */
    padding: 0 24px 16px;                    /* breathing room from screen edge */
    scroll-padding-left: 24px;               /* keep snap aligned with the inset */
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) transparent;
  }
  .amenities-grid::-webkit-scrollbar { height: 3px; }
  .amenities-grid::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: 2px;
  }

  /* Each zone takes ~92% viewport — tiny peek of next zone hint user can swipe */
  .amenities-col,
  .amenities-col--wide,
  .amenities-col--diamond,
  .amenities-col--square {
    flex: 0 0 92%;
    scroll-snap-align: start;
    min-width: 0;
    padding-right: 8px;
  }
.amenities-col--diamond{
	flex: 0 0 200%;
}
  .amenities-col__title {
    font-size: 22px;
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.18em;
    margin-bottom: 16px;
    padding-bottom: 12px;
    color: var(--color-gold-light);
  }

  /* Inside each zone: 2 sub-cols normal grid (no scroll) */
  .amenities-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .amenities-list { gap: 10px; }
  .amenities-list li {
    grid-template-columns: 22px 1fr;
    gap: 8px;
    font-size: 11px;
  }
  .amenities-list .num {
    width: 18px;
    height: 18px;
    font-size: 8.5px;
  }
  .amenities-col--diamond .amenities-list .num,
  .amenities-col--square .amenities-list .num {
    width: 20px;
    height: 20px;
    font-size: 8.5px;
  }
  .item-text .vn { font-size: 11px; line-height: 1.3; }
  .item-text .en { font-size: 9px; line-height: 1.3; }
  .amenities-level {
    font-size: 16px;
    font-family: var(--font-display);
    color: var(--color-gold-light);
    letter-spacing: 0;
    margin: 12px 0 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-line);
  }

  /* ---------- SECTION 06 — Iconic Beyond (Swiper center mode on mobile) ---------- */
  .section-06 {
    padding: clamp(40px, 8vw, 80px) 0;
    overflow: hidden;                /* CRITICAL: clip Swiper slides leak */
    width: 100%;
    max-width: 100vw;
  }
  .section-06 .container {
    padding: 0;
    overflow: hidden;                /* clip nested too */
    width: 100%;
    max-width: 100vw;
  }
  .section-06__header {
    display: flex;                  /* override desktop grid */
    flex-direction: column;
    text-align: center;
    padding: 0 16px;
    margin-bottom: 32px;
    width: 100%;
    box-sizing: border-box;
    gap: 16px;
  }
  .section-06__header .display-h2 {
    font-size: 32px;   /* smaller to fit narrow viewport */
    text-align: center;
    line-height: 1.2;
	  width: 100%;
    word-wrap: break-word;
    max-width: 50%;                /* reset desktop max-width */
	  margin-left: auto;
	  margin-right: auto;
  }
  .section-06__header .lead {
    font-size: 13px;
    text-align: center;
    margin: 16px auto 0;
    max-width: 280px;
    align-self: center;             /* reset desktop align-self: end */
    padding-bottom: 0;
    word-wrap: break-word;
  }

  /* tabs-grid as Swiper on mobile — Swiper sets up its own layout */
  .tabs-grid.iconic-swiper {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;                /* CRITICAL: was 'visible' — bug source */
    padding-bottom: 32px;            /* room for pagination */
    display: block;                  /* override grid */
    margin: 0;
  }
  .tabs-grid.iconic-swiper > .swiper-wrapper {
    display: flex;                   /* override display: contents */
    align-items: center;
    box-sizing: content-box;         /* let Swiper manage width */
  }
  .tabs-grid.iconic-swiper > .iconic-pagination {
    display: flex;                   /* show dots on mobile */
  }

  /* All cards equal size — no scale, no opacity dim
     IMPORTANT: do NOT set width/flex-basis on .tab-card here — Swiper computes inline width
     for centeredSlides + slidesPerView to work. */
  .tabs-grid.iconic-swiper .tab-card {
    transform: none;
    opacity: 1;
    transition: none;
    flex-basis: auto;        /* override any inherited flex-basis */
    flex-shrink: 0;          /* don't let flex shrink slides */
  }
  /* CRITICAL: reveal animation conflicts with Swiper layout — disable on swiper slides */
  .tabs-grid.iconic-swiper .tab-card.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
	  .tab-card__media img{
		  height: 100%!important;
	  }
  /* .tab-card__media { aspect-ratio: 3 / 4; } */
  .tab-card__bottom { padding: 16px 12px; gap: 12px; }
  .tab-card__title { font-size: 15px; }
  .tab-card__bottom .btn { padding: 8px 14px; font-size: 10px; }

  /* Iconic pagination dots */
  .iconic-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    width: 100%;
    position: relative;
  }
  .iconic-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: width 0.4s var(--ease-out), background 0.4s var(--ease-out);
    opacity: 1;
    border: 0;
    padding: 0;
  }
  .iconic-pagination .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background: var(--color-gold);
  }

  /* ---------- SECTION 07 — Map ---------- */
  .section-07 { padding: clamp(20px, 6vw, 60px) 0;}
  .section-07 .container { padding: 0; }
  .section-07__map { border-radius: 0; }
  .section-07__header { padding: 0 16px; }
  .map-controls { right: 12px; }
.map-wrap{
	aspect-ratio:3/3;
}
	  .map-wrap .map-img{
		  height: 100%!important;
	  }
	  .section.section-07{
		  padding-bottom:0;
	  }
	  .footer-links li{
		  width: 47%;
	  }
	  .footer-links li:nth-child(2),
	  .footer-links li:nth-child(4){
		  text-align: right;
	  }
  /* ---------- FOOTER — Accordion on mobile (match design) ---------- */
  .footer-top { padding: 32px 0 8px; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-col {
    border-bottom: 1px solid #BA8A5A; /* gold-tinted divider */
    padding: 0;
  }
  /* Accordion toggle button (override desktop) */
  .footer-col__toggle {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 20px 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    color: var(--color-gold-light);
    font-family: var(--font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
  }
  .footer-col__title {
    color: #BA8A5A;
    font-family: 'CA SaygonText', 'Manrope', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    letter-spacing: inherit;
    font-size: 15px;
  }
  .footer-col__toggle .footer-col__chevron {
    display: inline-block;          /* matches desktop selector specificity to override `display:none` */
    width: 20px;
    height: 20px;
    color: #BA8A5A;
    transition: transform 0.3s var(--ease-out);
    flex-shrink: 0;
  }
  .footer-col__toggle[aria-expanded="true"] .footer-col__chevron {
    transform: rotate(180deg);
  }
  /* Accordion panel — collapsed by default on mobile */
  .footer-col__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s var(--ease-out);
    display: block;
  }
  .footer-col__toggle[aria-expanded="true"] + .footer-col__panel {
    max-height: 600px;
  }
  .footer-col__panel ul {
    padding: 0 0 20px;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .footer-col__panel li { margin-bottom: 0; }
  .footer-col__panel a {
    color: #BA8A5A;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0;
  }

  /* Footer mid (Find A Property, Contact Us, ...) — 2-col links + label + horizontal social row */
  .footer-mid {
    padding: 24px 0 28px;
    border-top: 0;
  }
  .footer-mid__inner {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
	  border-top:0;
  }
  .footer-links {
    display: flex;
    justify-content: space-between;
    /* gap: 16px 24px; */
    width: 100%;
  }
	.footer-links li:before{
		display: none;
	}
  .footer-links a {
    font-size: 15px;
    color: #BA8A5A;
    font-weight: 400;
  }
  .footer-links a:nth-child(odd)  { justify-self: start; text-align: left; }
  .footer-links a:nth-child(even) { justify-self: end;   text-align: right; }

  .footer-social {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
  }
  .footer-social__label {
    width: 100%;                                  /* full row forces icons below */
    flex-basis: 100%;
    text-align: center;
    font-size: 14px;
    color: #BA8A5A;
    margin: 0 0 6px;
  }
  .footer-social .social-icon {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(243, 203, 160, 0.55);  /* gold ring */
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .footer-social .social-icon img {
    width: 16px;
    height: 16px;
  }

  /* Bottom gold band — logo + copyright stacked centered */
  .footer-bottom { padding: 28px 16px 32px; }
  .footer-bottom__inner {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .footer-logo { justify-content: center; }
  .footer-logo__img { height: 36px; }
  .footer-copy {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-bg);
    letter-spacing: 0;
  }
	  .btn{
		  font-size: 10px;
	  }
	  
}

/* ==========================================================================
   MOBILE SMALL — Phone (≤480px) — fine-tunes
   ========================================================================== */
@media (max-width: 480px) {
  .hero-content { padding: clamp(120px, 18vh, 170px) 20px clamp(88px, 12vh, 120px); }
  .hero-mobile-logo {
    top: 64px;                                       /* slightly higher on small phones */
    width: 150px;
  }
  .hero-title { font-size: clamp(28px, 8vw, 40px); }
  .hero-title--multiline { font-size: clamp(22px, 6.8vw, 32px); }
  .hero-tag { font-size: 13px; max-width: 300px; }

  .section-01__cards { gap: 8px; }

  /* BUG 3 FIX: Section 03 mobile — 2-col to single column.
     The 768px breakpoint sets explicit grid-column/grid-row on children
     (grid-column:2, grid-row:1/span2, etc.). When the outer grid switches
     to 1fr here at ≤480px those placements still fire, pushing children
     into a phantom column-2 that has auto width — resulting in a broken
     2-col appearance even at 375px.
     Reset ALL grid placement so the 1fr column actually stacks. */
  .section-03__copy {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    gap: 16px;
    padding: 28px 20px;
  }
  .section-03__copy .display-h2 {
    grid-column: unset;
    grid-row: unset;
    text-align: left;
    font-size: 41px;
  }
  .section-03__copy .lead {
    grid-column: unset;
    grid-row: unset;
    text-align: left;
  }
  .section-03__copy .btn {
    grid-column: unset;
    grid-row: unset;
    align-self: flex-start;
  }

  /* Amenities: keep 2 sub-cols but tighter gap */
  .amenities-subgrid { gap: 10px; }

  /* Footer 2-col still works at 480px */
}


/* --------------------------------------------------------------------------
   20. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.001s !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   FACILITIES PAGE & GALLERY PAGE
   ========================================================================== */

/* ----- Page hero (centered title + subtitle, used by both pages) ----- */
.page-hero {
  padding: clamp(200px, 16vh, 220px) 0 clamp(30px, 4vw, 70px);
  position: relative;
}

.page-hero__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 990px;
  margin-left: auto;
  margin-right: auto;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-htitle);
  line-height: var(--lh-tight);
  letter-spacing: 0;
text-align: center;
letter-spacing: -0.01em;
	font-weight: 400;
/* Golden */
	background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.page-hero__title span {
  display: inline;
}

.page-hero__subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: var(--lh-loose);
  color: #fff;
  text-align: center;
  max-width: 740px;
}

/* Eyebrow with horizontal dash (used on Gallery page) */
.eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--color-text);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.eyebrow-line__dash {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--color-text);
}


/* ==========================================================================
   FACILITIES SLIDER
   ========================================================================== */

/* Facilities page hero: title + subtitle centered (no arrows) */
.facilities-page-hero {
  position: relative;
}
.facilities-page-hero .container {
  position: relative;
}
.facilities-page-hero .facilities-nav {
	position: absolute;
	right:56px;
	justify-content: flex-end;
	top:108;
}
/* Controls (dots + arrows) BELOW the swiper image.
   Desktop: 3-col grid — pagination centered, arrows pushed to the right.
   Mobile: stacked column, both centered (overridden in @media below). */
.facilities-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: clamp(24px, 3vw, 48px);
}

.facilities-controls .facilities-pagination {
  grid-column: 2;
  justify-self: center;
}

.facilities-controls .facilities-nav {
  grid-column: 3;
  justify-self: end;
}

.facilities-section {
  padding-bottom: clamp(80px, 10vw, 160px);
  position: relative;
  overflow: hidden;
}
.facilities-section .container{
	overflow: hidden;
}
.facilities-swiper {
  width: 100%;
  overflow: visible;
  padding: 24px 0 0;
}

/* Small gap (~5px total) between adjacent cards */
.facilities-swiper .swiper-slide {
  padding: 0 2.5px;
}

/* Slide sizing — side slides shrink TOWARDS center (no gap), center stays full */
.facilities-swiper .swiper-slide {
  transform: scale(0.9);                          /* sides are ~68% of center → big visible difference */
  opacity: 0.4;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}

/* Prev (left) slide: shrink toward right-bottom (closer to center) */
.facilities-swiper .swiper-slide-prev {
  transform-origin: right bottom;
}

/* Next (right) slide: shrink toward left-bottom (closer to center) */
.facilities-swiper .swiper-slide-next {
  transform-origin: left bottom;
}

/* Active (center) slide: full size, bottom-aligned */
.facilities-swiper .swiper-slide-active {
  transform: scale(1);
  transform-origin: center bottom;
  opacity: 1;
  z-index: 2;
}

.facility-card {
  margin: 0;
  width: 100%;
  padding: 10px;                                  /* gap between border and image */
  position: relative;
  background: var(--color-bg-alt);
  border: 1px solid rgba(212, 153, 104, 0.6);     /* gold border */
  border-radius: 12px;
  box-sizing: border-box;
}

.facility-card img {
  width: 100%;
  /* aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center; */
  display: block;
  border-radius: 6px;                              /* image bo nhẹ hơn card */
}
@media screen and (max-width: 991px){
.facility-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 6px;                              /* image bo nhẹ hơn card */
}	
.page-hero__title span{
	display: block;
}
	.page-hero__title{
		font-size: 34px;
	}
	.page-hero__subtitle{
		font-size: 14px;
	}
}
/* Nav arrows — flex row, centered below the image */
.facilities-nav {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 5;
}

.facilities-nav__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), background 0.4s var(--ease-out);
}

.facilities-nav__btn--dark {
  background: #111314;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.04),   /* vòng ngoài mờ */
    0 4px 16px rgba(0, 0, 0, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.facilities-nav__btn--dark:hover {
  background: linear-gradient(90deg, #9D6340 0%, #F3CBA0 100%);
  /* transform: matrix(-1, 0, 0, 1, 0, 0); */
  color: var(--color-bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  border: none;
}
.facilities-section .facilities-nav.show_mobile{
	display: none;
}
@media screen and (max-width: 991px){
	.facilities-page-hero .facilities-nav{
		display: none;
	}
	.facilities-section .facilities-nav.show_mobile{
	display: flex;
		margin-top: 40px;
		padding-bottom: 8px;
}
}

.facilities-nav__btn--gold {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  color: var(--color-bg);
}

.facilities-nav__btn--gold:hover {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
}

/* Pagination dots */
.facilities-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(40px, 4vw, 56px);
}

.facilities-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: inline-block;
  cursor: pointer;
  transition: width 0.4s var(--ease-out), background 0.4s var(--ease-out);
  opacity: 1;
}

.facilities-pagination .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 4px;
  background: var(--color-gold);
}


/* ==========================================================================
   GALLERY CARDS
   ========================================================================== */
.gallery-section {
  padding-bottom: clamp(80px, 10vw, 160px);
}

.gallery-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  /* aspect-ratio: 4 / 5; */
  background: var(--color-bg-alt);
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.6s var(--ease-out);
}

.gallery-card:hover {
  transform: translateY(-4px);
}

.gallery-card__media {
  /* position: absolute;
  inset: 0;
  overflow: hidden; */
}

.gallery-card__media img {
  width: 100%;
  /* height: 100%;
  object-fit: cover;
  object-position: center; */
  display: block;
  transition: transform 0.8s var(--ease-out);
}

.gallery-card:hover .gallery-card__media img {
  transform: scale(1.05);
}

.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

.gallery-card__overlay {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 2;
}
.container-fluid {
	padding-left: 16px;
	padding-right: 16px;
}
.maison-col .amenities-list.maison-col__bottom{
padding-top: 30px;	
}
.gallery-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--color-text);
  margin: 0;
  letter-spacing: 0;
}

.gallery-card__arrow {
  width: 44px;
  height: 44px;
  min-width: 44px;                       /* prevent flex compression */
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--color-text);
  flex-shrink: 0;
  box-sizing: border-box;
  transform: none;                       /* override global unified hover transform */
  box-shadow: none;                      /* override global gold-glow shadow */
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

/* Override the global unified hover (which adds translateY + box-shadow + blur)
   so the round arrow stays clean inside the card's overflow:hidden box */
.gallery-card__arrow:hover,
.gallery-card__arrow:focus-visible,
.gallery-card:hover .gallery-card__arrow {
  transform: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

.gallery-card__arrow--gold {
  background: linear-gradient(90deg, #F3CBA0 0%, #9D6340 100%);
  border-color: transparent;
  color: var(--color-bg);
}

.gallery-card:hover .gallery-card__arrow {
  background: linear-gradient(90deg, #9D6340 0%, #F3CBA0 100%);
	border: none;
  border-color: transparent;
  color: var(--color-bg);
  /* No translateX — arrow stays in place inside card's overflow box */
}

.gallery-page{
  background: #07090A url('../assets/images/bg-gallery.png');
}
.section.section-07{
	/* margin-bottom:0; */
	padding-bottom:0;
}
/* ==========================================================================
   FACILITIES + GALLERY — Responsive
   ========================================================================== */

/* Desktop ≥769px: Swiper isn't initialized on Gallery, but the HTML now wraps
   cards in .swiper-wrapper. We must re-impose grid layout on the wrapper. */
.elementor-page-14 main#content,
.elementor-page-15 main#content{
	background: var(--color-bg) url('../images/bg-gallery.png');
}
	@media screen and (max-width: 768px){
		.elementor-page-13 main#content {
			background: var(--color-bg) url('../images/bg-gallery.png');
		}
	}
@media (min-width: 769px) {
  .gallery-cards.gallery-swiper {
    display: block;
    overflow: visible;
  }
  .gallery-cards.gallery-swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 32px);
    transform: none !important;
    width: 100% !important;
  }
  .gallery-cards.gallery-swiper .swiper-slide.gallery-card {
    width: auto !important;
    margin: 0 !important;
    height: auto !important;
  }
  .gallery-pagination { display: none; }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .gallery-cards.gallery-swiper .swiper-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-card:nth-child(3) { grid-column: span 2; aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
	.section-03 .section-03__media img{
		object-position:0;
	}
	.section-03__copy .btn{
		gap:0;
		padding: 2px 10px;
	}
	.btn svg{
		width: 18px;
	}
	.btn{
		padding: 7px 10px;
		gap:0;
	}
	.lang-switcher{
		display: none!important;
	}
	
  /* Gallery on mobile = Swiper (.gallery-swiper) — center card large, sides peek
     The .gallery-cards container is also a .swiper, so override grid → flex */
  .gallery-cards.gallery-swiper {
    display: block;                                 /* Swiper takes over layout */
    grid-template-columns: none;
    gap: 0;
    overflow: visible;
    padding-bottom: 24px;                            /* room for pagination dots below */

    /* BUG 1 FIX: extend swiper to full viewport width so peek cards aren't
       clipped by the .container padding. Negative margin pulls the swiper
       outside the container edge; matching padding gives Swiper the full
       viewport to work with. */
    width: 100vw;
    margin-left: calc(-1 * var(--container-pad, 20px));
    margin-right: calc(-1 * var(--container-pad, 20px));
  }
  /* Override the global @media(≤768px) rule ".section { overflow-x: clip }"
     ONLY for the gallery section so peeking cards are visible. */
  .gallery-section,
  section.gallery-section {
    overflow-x: visible !important;
  }
  /* Also allow the container inside gallery-section to overflow */
  .gallery-section > .container {
    overflow: visible;
  }
  .gallery-cards.gallery-swiper .swiper-wrapper {
    align-items: center;
  }
  .gallery-card,
  .gallery-card:nth-child(3) {
    aspect-ratio: 4 / 5;
    grid-column: auto;
    height: auto;
    /* All 3 cards same size — no scale/opacity contrast */
    transform: none;
    opacity: 1;
  }
  .gallery-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-top: 24px;
  }
  .gallery-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(243, 203, 160, 0.35);
    border-radius: 999px;
    transition: width 0.3s, background 0.3s;
    cursor: pointer;
  }
  .gallery-pagination .swiper-pagination-bullet-active {
    width: 24px;
    background: var(--color-gold-light, #f3cba0);
  }

  /* Mobile: stack pagination above arrows, both centered (override desktop grid) */
  .facilities-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .facilities-controls .facilities-pagination,
  .facilities-controls .facilities-nav {
    justify-self: center;
    grid-column: auto;
  }
  /* Mobile: nav arrows smaller, still centered */
  .facilities-nav {
    gap: 8px;
  }
  .facilities-nav__btn {
    width: 38px;
    height: 38px;
  }
  .facilities-nav__btn svg {
    width: 14px;
    height: 14px;
  }
  /* Mobile: side slides clearly smaller than center for visual contrast */
  .facilities-swiper .swiper-slide {
    transform: scale(0.85);
    opacity: 0.55;
  }
  .facilities-swiper .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
  }
}
/* --------------------------------------------------------------------------
   BACK TO TOP — dùng icon arrow_button.svg (rounded square, gold gradient)
   - Hiện khi scroll > 400px
   - Vị trí: cố định góc phải dưới
   - Hover: filled gold version (filter) + glow + lift
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: clamp(20px, 3vw, 48px);
  bottom: clamp(24px, 3vw, 48px);
  z-index: 99;

  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  /* Ẩn mặc định — JS thêm .is-visible khi scroll > 400px */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 0.4s var(--ease-out),
    visibility 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    filter 0.4s var(--ease-out);
}



.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover: brighten icon + glow shadow + lift */
.back-to-top:hover img,
.back-to-top:focus-visible img {
  filter:
    brightness(1.25)
    drop-shadow(0 4px 18px rgba(243, 203, 160, 0.55));
  transform: translateY(-3px);
}

.back-to-top:focus-visible {
  outline: none;
}

.back-to-top:active img {
  transform: translateY(0);
  filter: brightness(1.1);
}

@media (max-width: 768px) {
  .back-to-top {
    right: 16px;
    bottom: 20px;
    width: 46px;
    height: 46px;
  }
  .back-to-top img {
    width: 46px;
    height: 46px;
  }
}
	.btt-img {
  display: block;
  width: 58px;
  height: 58px;
  transition: transform 0.3s ease;
}

/* Default: show img1, hide img2 */
.btt-img--default { display: block; }
.btt-img--hover   { display: none;  }

/* Hover: swap */
.back-to-top:hover .btt-img--default,
.back-to-top:focus-visible .btt-img--default { display: none;  }

.back-to-top:hover .btt-img--hover,
.back-to-top:focus-visible .btt-img--hover   { display: block; }

/* Lift on hover */
.back-to-top:hover .btt-img,
.back-to-top:focus-visible .btt-img { transform: translateY(-3px); }

.back-to-top:active .btt-img { transform: translateY(0); }

.back-to-top:focus-visible { outline: none; }

@media (max-width: 768px) {
  .back-to-top { right: 16px; bottom: 20px; width: 46px; height: 46px; }
  .btt-img     { width: 46px; height: 46px; }
}