/**
 * css/style.css — Mon Senior
 * ──────────────────────────────────────────────────────────────────────────────
 * Sources:
 *   Design System  → Figma node 6-2  (Colors 6:209 · Text Styles 6:172)
 *   Header         → Figma node 3:261  (1440 × 64 px)
 *   Hero           → Figma node 3:4   (1440 × 1040 px)
 *   Video Section  → Figma node 11:14 (1440 × 1040 px)
 *   Concept Sect.  → Figma node 12:217 (1440 × hug px)
 *   Accommodation  → Figma node 17:4
 *
 * Token naming convention
 * ───────────────────────
 *   --ds-*        Official Design System tokens  (Figma node 6-2)
 *   --clr-*       Extended component colours     (from specific Figma nodes)
 *   --font-*      Font-family stacks
 *   --text-*      Typography scale values
 *   --header-*    Header layout measurements
 *   --hero-*      Hero layout measurements
 *   --radius-*    Border radius values
 *
 * Structure
 * ─────────────────────────────────────────────────────────────────────────────
 *   1. Design Tokens
 *   2. Global Reset
 *   3. Preloader
 *   4. Site Header
 *   5. Hero Section
 *   6. Mask-Reveal (GSAP helper)
 *   7. Hero Buttons
 *   8. Video Section
 *   9. Concept Section
 *  10. Accommodation Section
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── 1A. DESIGN SYSTEM PALETTE  (Figma node 6:209) ───────────────────────
     Four official brand colours — the single source of truth for all UI tints.
  ──────────────────────────────────────────────────────────────────────────── */
  --ds-dark: #1A1A17;
  /* fill_GCLYZV  "Dark"       — primary / dark surfaces */
  --ds-light: #ECECED;
  /* fill_OV091J  "Light"      — off-white / light fills  */
  --ds-background: #FFF0E2;
  /* fill_H9EB3O  "Background" — warm cream page bg       */
  --ds-accent: #D28376;
  /* fill_10CJM1  "Accent"     — dusty rose CTA           */

  /* ── 1B. EXTENDED PALETTE  (from specific Figma component nodes) ──────────
  ──────────────────────────────────────────────────────────────────────────── */
  --clr-charcoal: #231F20;
  /* node 3:2   — hero overlay / body bg base         */
  --clr-cream: #F9F5EB;
  /* node 3:266 — header nav link colour              */
  --clr-warm-white: #F4F3EA;
  /* card titles, card label text                     */
  --clr-charcoal-mid: #505358;
  /* node 3:183 — solid button text                   */

  /* ── 1C. COMPUTED / ALPHA VARIANTS ───────────────────────────────────────── */
  --clr-hero-overlay: linear-gradient(180deg, rgba(26, 26, 23, 0.15) 0%, rgba(26, 26, 23, 0.80) 100%);
  /* Hero gradient — Figma: "Linear Overlay 15%-80%" (node 11:12)          */
  --clr-video-overlay: rgba(26, 26, 23, 0.46);
  /* Video dark fill — Figma: "Full Overlay - 46%"  (node 12:344)          */
  --clr-card-overlay: linear-gradient(180deg, rgba(26, 26, 23, 0) 32%, rgba(26, 26, 23, 0.80) 100%);
  /* Accommodation cards gradient — Figma: "Cards Black Overlay"           */
  --clr-glass: rgba(255, 255, 255, 0.16);
  --clr-glass-hover: rgba(255, 255, 255, 0.25);
  --clr-border-dark: rgba(26, 26, 23, 0.16);
  /* DS dark w/ opacity          */
  --clr-border-warm: rgba(244, 243, 234, 0.32);
  /* warm white semi-transparent */
  --clr-scrolled-bg: rgba(26, 26, 23, 0.72);
  /* Header glassmorphism bg     */

  /* ── 1D. TYPOGRAPHY — FONTS  (Figma node 6:172) ──────────────────────────── */
  --font-ui: 'Roboto Condensed', system-ui, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-gs: 'General Sans', system-ui, sans-serif;

  /* ── 1E. TYPOGRAPHY — SCALE  (Design System node 6:172) ─────────────────── */
  --text-h2-size: clamp(2rem, 3.89vw, 56px);
  /* 56px / lh:1em / ls:−2%      */
  --text-h2-lh: 1em;
  --text-h2-ls: -0.02em;

  --text-h3-size: 40px;
  /* H3 / lh:1em / ls:−2%        */
  --text-h3-lh: 1em;
  --text-h3-ls: -0.02em;

  --text-h4-size: 32px;
  /* H4 / lh:1em / ls:−3%        */
  --text-h4-lh: 1em;
  --text-h4-ls: -0.03em;

  --text-body-size: 16px;
  /* Body / lh:1.5em              */
  --text-body-lh: 1.5em;

  --text-sm-size: 14px;
  /* Small / lh:1.4286em / ls:−1% */
  --text-sm-lh: 1.4286em;
  --text-sm-ls: -0.01em;

  --text-label-size: 12px;
  /* Label / lh:1.333em / ls:+2% / UPPERCASE */
  --text-label-lh: 1.333em;
  --text-label-ls: 0.02em;

  /* Card-specific type values (Figma cards, slightly scaled from DS) */
  --text-card-label: 11.15px;
  /* style_BALJFV */
  --text-card-title: 22.31px;
  /* style_ORJHY8 / lh:1.167 / ls:−3%  */
  --text-card-title-lh: 1.167em;
  --text-card-title-ls: -0.03em;
  --text-card-desc: 13px;
  /* style_JCUXQL / lh:1.429 / ls:−1%  */
  --text-card-desc-lh: 1.429em;
  --text-card-desc-ls: -0.01em;

  /* ── 1F. SPACING — HEADER  (Figma node 3:261, 1440 × 64 px) ────────────── */
  --header-h: 64px;
  --header-col-logo-w: 231px;
  --header-col-cta-w: 228px;
  --header-logo-pl: 23px;
  --header-cta-pl: 50px;

  /* ── 1G. SPACING — HERO LOGO  (Figma node 3:139) ────────────────────────── */
  --hero-logo-t: 10.19%;
  /* 106 / 1040 */
  --hero-logo-l: 5.28%;
  /*  76 / 1440 */
  --hero-logo-w: 89.44%;
  /* 1288 / 1440 */

  /* ── 1H. SPACING — HERO CONTENT  (Figma node 3:193) ─────────────────────── */
  --hero-content-l: 5.69%;
  /*  82 / 1440 */
  --hero-content-b: 13.85%;
  /* 144 / 1040 — approx bottom from frame base */
  --hero-content-w: 44.44%;
  /* 640 / 1440 */
  --hero-content-gap: 25px;

  /* ── 1I. SPACING — VIDEO EXPERIENCE  (Figma node 16:273) ────────────────── */
  --exp-l: 5.35%;
  /*  77 / 1440 */
  --exp-t: 12.31%;
  /* 128 / 1040 */
  --exp-w: 89.31%;
  /* 1286 / 1440 */

  /* ── 1J. BORDER RADIUS ───────────────────────────────────────────────────── */
  --radius-btn: 8px;
  /* All buttons */
  --radius-card: 24px;
  /* DS section frames / large pills */
  --radius-pill-sm: 8px;
  /* Small eyebrow pills */
  --radius-accom: 7.44px;
  /* Accommodation cards (Figma: 7.436px) */
  --radius-card-btn: 50%;
  /* Circular arrow button on cards */
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. GLOBAL RESET
   ═══════════════════════════════════════════════════════════════════════════ */

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

html,
body {
  width: 100%;
  overflow-x: clip;
  /* clip ≡ hidden visually — does NOT block position:sticky on children */
}

body {
  background-color: var(--ds-dark);
  font-family: var(--font-ui);
  color: var(--ds-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. PRELOADER
   Figma: frame "Preloader-Section" — 1440 × 1040 px  (node 12:185)
   Background : --ds-dark (#1A1A17)  |  Figma fill_CHSFCV
   Logo       : x:76  y:792  w:1288  h:248  (flush with frame bottom)

   Architecture (two fixed siblings — move INDEPENDENTLY)
   ─────────────────────────────────────────────────────
   #preloader           z-index:200  dark curtain  — yPercent: 0 → −100
   #preloader-logo-wrap z-index:201  logo wrapper  — y: 0 → −deltaY
   #preloader-logo      clip-path draw-in via GSAP  inset(0 100% 0 0) → inset(0 0% 0 0)
   ═══════════════════════════════════════════════════════════════════════════ */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--ds-dark);
  will-change: transform;
}

#preloader-logo-wrap {
  position: fixed;
  left: var(--hero-logo-l);
  /* 5.28%  — x:76 / 1440              */
  width: var(--hero-logo-w);
  /* 89.44% — w:1288 / 1440            */
  bottom: 0;
  /* y:792 + h:248 = 1040 = frame bottom */
  z-index: 201;
  /* always above curtain               */
  will-change: transform;
}

#preloader-logo {
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(0 100% 0 0);
  /* GSAP start: fully hidden right     */
  will-change: clip-path;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. SITE HEADER
   Figma: frame "Header" — 1440 × 64 px  (node 3:261)
   Layout : 3-column flex  →  [Logo 231px] | [Nav flex-1] | [CTA 228px]
   ═══════════════════════════════════════════════════════════════════════════ */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header-h);
  will-change: transform, opacity;
  transition:
    background-color 0.45s ease,
    backdrop-filter 0.45s ease,
    -webkit-backdrop-filter 0.45s ease;
}

#site-header.is-scrolled {
  background-color: var(--clr-scrolled-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.header-rule {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--clr-glass);
}

.header-inner {
  display: flex;
  height: 100%;
}

.header-col-logo {
  display: flex;
  align-items: center;
  flex: none;
  width: var(--header-col-logo-w);
  padding-left: var(--header-logo-pl);
}

.header-col-logo a {
  line-height: 0;
}

.header-divider {
  flex: none;
  align-self: stretch;
  width: 1px;
  background-color: var(--clr-glass);
}

.header-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-nav-list {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--clr-cream);
  transition: opacity 0.2s ease;
}

.nav-link:hover {
  opacity: 0.65;
}

.header-col-cta {
  display: flex;
  align-items: center;
  flex: none;
  width: var(--header-col-cta-w);
  padding-left: var(--header-cta-pl);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: var(--text-sm-size);
  font-weight: 500;
  line-height: var(--text-sm-lh);
  letter-spacing: var(--text-sm-ls);
  color: var(--clr-cream);
  background-color: var(--clr-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-btn);
  transition: background-color 0.3s ease;
}

.btn-cta:hover {
  background-color: var(--clr-glass-hover);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. HERO SECTION
   Figma: frame "Hero-Section" — 1440 × 1040 px  (node 3:4)
   position:sticky — stack layer 1 (video slides over from z-index:2)
   ═══════════════════════════════════════════════════════════════════════════ */

#hero {
  position: sticky;
  top: 0;
  z-index: 1;
  /* stack layer 1 — video (z:2) slides over     */
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#hero figure {
  position: absolute;
  inset: 0;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  /* GSAP zooms to scale(1) over 3.5 s           */
  transform-origin: center center;
  will-change: transform;
}

/* Gradient overlay — Figma: "Linear Overlay 15% - 80%" (node 11:12) */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--clr-hero-overlay);
}

/* Decorative MONSIGNOR logotype — Figma: x:76 y:106 w:1288 h:248 */
#hero-logo-wrap {
  position: absolute;
  z-index: 1;
  top: var(--hero-logo-t);
  left: var(--hero-logo-l);
  width: var(--hero-logo-w);
  opacity: 0;
  /* GSAP crossfades in at t=1.2s                 */
  will-change: opacity;
}

#hero-logo-wrap img {
  width: 100%;
  height: auto;
}

/* Hero content container — Figma: x:82 y:686 w:640 col gap:25px */
#hero-content {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  left: var(--hero-content-l);
  bottom: var(--hero-content-b);
  width: var(--hero-content-w);
  gap: var(--hero-content-gap);
}

/* H1 — Instrument Serif / Heading-H2 metrics / DS Light */
.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  color: var(--ds-light);
  font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. MASK-REVEAL  (GSAP animation helper)
   .mask-wrapper has overflow:hidden — GSAP slides .mask-inner
   from yPercent:110 (clipped below) to yPercent:0 (fully visible).
   ═══════════════════════════════════════════════════════════════════════════ */

.mask-wrapper {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  /* prevent descender clipping */
}

.mask-inner {
  display: block;
  opacity: 0;
  will-change: transform, opacity;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. HERO BUTTONS
   Figma: Btn-Container — row, gap:25px  (node 3:192)
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 25px;
}

.hero-btn {
  opacity: 0;
  will-change: opacity, transform;
}

/* Button ① — Primary (Accommodation) — fill #ECECED / text #505358 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  font-weight: 400;
  line-height: var(--text-body-lh);
  color: var(--clr-charcoal-mid);
  background-color: var(--ds-light);
  border-radius: var(--radius-btn);
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #ffffff;
}

/* Button ② — Glass (Learn more) — rgba(255,255,255,0.16) + blur(16px) */
.btn-glass-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  font-weight: 400;
  line-height: var(--text-body-lh);
  color: var(--ds-light);
  background-color: var(--clr-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-btn);
  transition: background-color 0.3s ease;
}

.btn-glass-hero:hover {
  background-color: var(--clr-glass-hover);
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. LATERAL STAGE + VIDEO SECTION
   Figma: frame "Video-Section" — 1440 × 1040 px  (node 11:14)

   #lateral-stage  — Contains both Concept (z:1) + Video (z:2) as absolute layers.
                     overflow:hidden acts as the clip mask for the off-screen video.
                     GSAP pins this wrapper and drives the lateral stacking timeline.

   #video-section  — position:absolute; inset:0; z-index:2
                     Starts xPercent:100 (off-screen right).
                     GSAP timeline:  slide in → container expands → text fades in.

   .video-container — Figma frame proportions: aspect-ratio 1440/1040
                      Initial: width:80%, border-radius:24px
                      GSAP expands to: width:100%, border-radius:0
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lateral Stage wrapper ───────────────────────────────────────────────── */

#lateral-stage {
  position: relative;
  z-index: 2;
  /* renders above sticky hero (z:1)             */
  height: 100vh;
  overflow: hidden;
  /* clips the off-screen video — acts as mask   */
}

/* ── Video Section (absolute layer, starts off-screen right) ─────────────── */

#video-section {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* renders above concept (z:1)                 */
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* ── Video Container ─────────────────────────────────────────────────────────
   Initial state (GSAP set):  width:80%  aspect-ratio:1440/1040  radius:24px
   GSAP animates to:          width:100%                          radius:0
   overflow:hidden clips the rounded corners and video edges.
────────────────────────────────────────────────────────────────────────────── */

.video-container {
  position: relative;
  width: 80%;
  /* GSAP: animates → 100%                       */
  aspect-ratio: 1440 / 1040;
  /* Figma frame exact proportions               */
  max-height: 100%;
  /* prevent overflow on non-standard viewports  */
  border-radius: 24px;
  /* GSAP: animates → 0                          */
  overflow: hidden;
  flex-shrink: 0;
  will-change: width, border-radius;
}

/* Full-bleed background video */
.video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark overlay — Figma: rgba(26,26,23,0.46) "Full Overlay - 46%" */
.video-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--clr-video-overlay);
}

/* ── Cinematic Outro overlay ─────────────────────────────────────────────────
   Activates at end of lateral stacking timeline (step ④).
   backdrop-filter blurs the video beneath; rgba background darkens it.
   z-index: 5  — above video + existing overlay, below experience text (z:10).
   GSAP: opacity 0 → 1  |  backdrop-filter: blur(0px) → blur(20px)
   pointer-events:none so experience-container remains interactive.
──────────────────────────────────────────────────────────────────────────── */

#video-outro-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.82);
  /* near-black cinematic fade                   */
  opacity: 0;
  /* GSAP: animates → 1                          */
  backdrop-filter: blur(0px);
  /* GSAP: animates → blur(20px)                 */
  -webkit-backdrop-filter: blur(0px);
  will-change: opacity, backdrop-filter;
  pointer-events: none;
  /* text above remains interactive              */
}

/* ── Experience Container ─────────────────────────────────────────────────
   Figma: Experience-Container (16:273)
   ROW at x:77  y:128  w:1286  h:288  gap:16px
   Percentages are relative to the video-container (1440/1040 aspect-ratio box).
   Left:  Eyebrow pill — 12px / uppercase / General Sans / #F4F3EA
   Right: H3 description — 40px / General Sans / #F4F3EA
──────────────────────────────────────────────────────────────────────────── */

.experience-container {
  position: absolute;
  left: var(--exp-l);
  /* 5.35% — 77 / 1440                           */
  top: var(--exp-t);
  /* 12.31% — 128 / 1040                         */
  width: var(--exp-w);
  /* 89.31% — 1286 / 1440                        */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 550px;
  z-index: 10;
  will-change: opacity;
}

/* Left: Eyebrow pill — Figma (16:274) borderRadius:32px / rgba(244,243,234,0.25) */
.experience-eyebrow {
  flex: none;
  /* shrink-wraps the pill content               */
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid rgba(244, 243, 234, 0.25);
  border-radius: 32px;
  align-self: flex-start;
}

/* Label — Figma: 12px / 500 / ls:+2% / uppercase / #F4F3EA */
.experience-label {
  font-family: var(--font-gs);
  /* General Sans                                */
  font-size: var(--text-label-size);
  /* 12px                                        */
  font-weight: 500;
  line-height: var(--text-label-lh);
  letter-spacing: var(--text-label-ls);
  /* +2%                                         */
  text-transform: uppercase;
  color: var(--clr-warm-white);
  /* #F4F3EA                                     */
}

/* Right: H3 description — Figma (16:277) 40px / General Sans / #F4F3EA */
.experience-desc {
  flex: 1;
  font-family: var(--font-gs);
  /* General Sans                                */
  font-size: var(--text-h3-size);
  /* 40px                                        */
  font-weight: 400;
  line-height: var(--text-h3-lh);
  /* 1em                                         */
  letter-spacing: var(--text-h3-ls);
  /* -2%                                         */
  color: var(--clr-warm-white);
  /* #F4F3EA                                     */
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. CONCEPT SECTION
   Figma: frame "Consept-Section" — node 25:5
   1440 × 1040 px  |  bg: #ECECED  |  padding: 100px 76px
   Layout: column, justify-content: space-between, gap: 8px
   position: absolute; inset: 0; z-index: 1  — within #lateral-stage
   (video section z:2 slides over it from the right)

   GSAP initial state : scale(0.9) + borderRadius(40px)  [set in main.js]
   GSAP scroll anim   : → scale(1) + borderRadius(0)
                        trigger: #lateral-stage | start:'top bottom' → end:'top top'
   ═══════════════════════════════════════════════════════════════════════════ */

#concept-section {
  position: absolute;
  inset: 0;
  /* fills #lateral-stage completely             */
  z-index: 1;
  /* behind video section (z:2)                  */
  overflow: hidden;
  /* clips content to borderRadius during GSAP   */
  background-color: var(--ds-light);
  /* #ECECED                                     */
  padding: 100px 76px;
  /* Figma: padding 100px 76px                   */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* concept-container top / transition bottom   */
  gap: 8px;
  /* Figma: gap: 8px                             */
  transform-origin: top center;
  /* GSAP scales downward from top edge          */
  will-change: transform;
}

/* ── Consept-Container (top group) ──────────────────────────────────────────
   Figma: (25:8) — column, justifyContent:center, gap:24px, w:1278px
─────────────────────────────────────────────────────────────────────────────── */

.concept-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  /* Figma: gap: 24px                     */
  max-width: 1278px;
  /* Figma: w: 1278px                     */
  width: 100%;
}

/* Navicon SVG — Figma: (25:50) | 72.09 × 62.26 px */
.concept-icon {
  display: block;
  width: 72px;
  height: auto;
  flex-shrink: 0;
}

/* Title — Figma: H2 Roboto Condensed (25:11)
   56px / 400 / lh:1em / ls:−2% / color:#1A1A17 / max-width:639px / left */
.concept-title {
  font-family: var(--font-ui);
  /* Roboto Condensed                     */
  font-size: var(--text-h2-size);
  /* clamp(2rem, 3.89vw, 56px)            */
  font-weight: 400;
  line-height: var(--text-h2-lh);
  /* 1em                                  */
  letter-spacing: var(--text-h2-ls);
  /* −0.02em                              */
  color: var(--ds-dark);
  /* #1A1A17                              */
  max-width: 639px;
  /* Figma: w: 639px                      */
  text-align: left;
}

/* Description — Figma: Body Text Roboto Condensed (25:63)
   16px / 400 / lh:1.5em / color:#1A1A17 / max-width:639px / left */
.concept-desc {
  font-family: var(--font-ui);
  /* Roboto Condensed                     */
  font-size: var(--text-body-size);
  /* 16px                                 */
  font-weight: 400;
  line-height: var(--text-body-lh);
  /* 1.5em                                */
  color: var(--ds-dark);
  /* #1A1A17                              */
  max-width: 639px;
  /* Figma: w: 639px                      */
  text-align: left;
}

/* ── Experience-Transition Container (bottom group) ─────────────────────────
   Figma: (25:66) — column, alignItems:flex-end (right), gap:5px, w:1278px
─────────────────────────────────────────────────────────────────────────────── */

.concept-transition {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* right-aligned                        */
  gap: 5px;
  /* Figma: gap: 5px                      */
  max-width: 100%;
  width: 100%;
}

/* Transition label — Figma: H3 Roboto Condensed (25:67)
   40px / 400 / lh:1em / ls:−2% / color:#808080 / right-aligned */
.concept-transition-label {
  font-family: var(--font-ui);
  /* Roboto Condensed                     */
  font-size: var(--text-h3-size);
  /* 40px                                 */
  font-weight: 400;
  line-height: var(--text-h3-lh);
  /* 1em                                  */
  letter-spacing: var(--text-h3-ls);
  /* −0.02em                              */
  color: #808080;
  /* Figma: fill_JFRF59                   */
  text-align: right;
}

/* Transition heading — Figma: Instrument Serif H2 (25:64)
   56px / 400 / lh:1em / ls:−2% / color:#D28376 / right-aligned */
.concept-transition-heading {
  font-family: var(--font-display);
  /* Instrument Serif                     */
  font-size: var(--text-h2-size);
  /* clamp(2rem, 3.89vw, 56px)            */
  font-weight: 400;
  line-height: var(--text-h2-lh);
  /* 1em                                  */
  letter-spacing: var(--text-h2-ls);
  /* −0.02em                              */
  color: var(--ds-accent);
  /* #D28376 — fill_0KRLJ4                */
  text-align: right;
}

/* ── Shared dark eyebrow label (used in Accommodation section) ───────────────
─────────────────────────────────────────────────────────────────────────────── */

.eyebrow-label-dark {
  font-family: var(--font-ui);
  font-size: var(--text-label-size);
  /* 12px                                 */
  font-weight: 500;
  line-height: var(--text-label-lh);
  letter-spacing: var(--text-label-ls);
  /* +2%                                  */
  text-transform: uppercase;
  color: var(--ds-dark);
  /* #1A1A17                              */
}


/* ═══════════════════════════════════════════════════════════════════════════
  10. ACCOMMODATION SECTION
   Figma: frame "Accommodation-Section" — node 17:4
   Background : #ECECED (fill_GIDGH4)
   Padding    : 150px 76px 100px
   position:relative; z-index:4  — follows concept section
   Container  : max-width 1279px, centered
   ═══════════════════════════════════════════════════════════════════════════ */

#accommodation {
  position: relative;
  z-index: 4;
  background-color: var(--ds-light);
  /* #ECECED                         */
  padding: 150px 76px 100px;
}

/* Max-width wrapper — 1279px centered (matches Figma container) */
.accom-container {
  max-width: 1279px;
  margin: 0 auto;
  position: relative;
}

/* Decorative MONSIGNOR logo — Figma: x:167.58 y:0 w:1111.42 h:214
   Offset from left: 167.58 / 1279 = 13.1%
   Width: 1111.42 / 1279 = 86.9% */
.accom-logo-decor {
  display: block;
  width: 100%;
  /* 1111.42 / 1279                              */
  height: auto;
  margin-left: 13.1%;
  /* x:167.58 / 1279                             */
  opacity: 0.6;
  /* subtle decorative treatment on cream bg      */
  will-change: opacity;
}

/* Accommodation Items — y:364 (214px logo + 150px gap below) */
.accom-items {
  display: flex;
  flex-direction: column;
  gap: 80px;
  /* Figma: layout_B1TS2S gap:80px                */
  margin-top: 150px;
  /* 364 − 214 = 150px gap below logo             */
}

/* ── Accommodation Header ────────────────────────────────────────────────
   Figma: Accommodation-Container (17:26) — column, gap:24px, w:1268, h:144
──────────────────────────────────────────────────────────────────────── */

.accom-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  will-change: opacity, transform;
}

/* Eyebrow wrapper — Figma: Frame 11 (17:35) — padding:4px 16px / br:24px / stroke rgba(26,26,23,0.16) */
.accom-eyebrow-wrap {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px;
  border: 1px solid var(--clr-border-dark);
  border-radius: var(--radius-card);
  /* 24px                             */
  align-self: flex-start;
}

/* H4 description — Figma: 32px / Roboto Condensed / w:680px / lh:1em / ls:−3% */
.accom-header-desc {
  font-family: var(--font-ui);
  font-size: var(--text-h4-size);
  /* 32px                             */
  font-weight: 400;
  line-height: var(--text-h4-lh);
  /* 1em                              */
  letter-spacing: var(--text-h4-ls);
  /* -3%                              */
  color: var(--ds-dark);
  max-width: 680px;
  /* Figma: layout_AQQA80 w:680       */
}

/* ── Accommodation Cards Grid ────────────────────────────────────────────
   Figma: 2 × 2 layout, each card 632.06 × 520.52 px, gap ~15px
   Tailwind `grid grid-cols-2 gap-[15px]` is applied directly in HTML.
   CSS here handles card internals only.
──────────────────────────────────────────────────────────────────────── */

.accom-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

/* Individual card — Figma: border-radius 7.44px, box-shadow, aspect ~632:521 */
.accom-card {
  position: relative;
  aspect-ratio: 632 / 521;
  border-radius: var(--radius-accom);
  /* 7.44px                           */
  overflow: hidden;
  box-shadow:
    inset 0px -0.93px 0px 0px rgba(26, 26, 23, 0.08),
    inset 0px 0.93px 0px 0px rgba(26, 26, 23, 0.04);
  will-change: opacity, transform;
}

/* Full-bleed card background image */
.card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient overlay — Figma: "Cards Black Overlay"
   linear-gradient(180deg, rgba(26,26,23,0) 32%, rgba(26,26,23,0.8) 100%) */
.card-overlay {
  position: absolute;
  inset: 0;
  background: var(--clr-card-overlay);
}

/* Content wrapper — Figma: layout_C0K62O  padding:37px 0  x:22.31 w:587.45
   space-between: desc block at top, btn at bottom */
.card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 37px 22px;
}

/* ── Card: description block (top of card) ────────────────────────────── */
.card-desc-block {
  display: flex;
  flex-direction: column;
  gap: 14.87px;
  /* Figma: layout_8H272M gap:14.872px             */
}

/* Eyebrow pill on card — Figma: Eyebrow (18:231) br:29.744px */
.card-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--clr-border-warm);
  /* rgba(244,243,234,0.32)     */
  border-radius: 30px;
  /* Figma: 29.744px                              */
  align-self: flex-start;
}

.card-label {
  font-family: var(--font-ui);
  font-size: var(--text-card-label);
  /* 11.15px                           */
  font-weight: 500;
  line-height: var(--text-label-lh);
  letter-spacing: var(--text-label-ls);
  /* +2%                               */
  text-transform: uppercase;
  color: var(--ds-light);
  /* #ECECED                           */
}

/* Card title — Figma: style_ORJHY8 — 22.31px / lh:1.167 / ls:−3% / #F4F3EA */
.card-title {
  font-family: var(--font-ui);
  font-size: var(--text-card-title);
  font-weight: 400;
  line-height: var(--text-card-title-lh);
  letter-spacing: var(--text-card-title-ls);
  color: var(--clr-warm-white);
  /* #F4F3EA                           */
}

/* Card description — Figma: style_JCUXQL — 13px / 500 / lh:1.429 / ls:−1% / white */
.card-desc {
  font-family: var(--font-ui);
  font-size: var(--text-card-desc);
  font-weight: 500;
  line-height: var(--text-card-desc-lh);
  letter-spacing: var(--text-card-desc-ls);
  color: #ffffff;
  max-width: 307px;
  /* Figma: layout_8KZIG0 w:307.67               */
}

/* ── Card: button row (bottom of card) ────────────────────────────────── */
.card-btn-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Circular arrow button — Figma: Button/Circle (18:292)
   br:29.744px / fill rgba(26,26,23,0.32) / stroke rgba(244,243,234,0.32) / blur:59px */
.card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  border-radius: var(--radius-card-btn);
  background-color: rgba(26, 26, 23, 0.32);
  border: 1px solid var(--clr-border-warm);
  backdrop-filter: blur(59px);
  -webkit-backdrop-filter: blur(59px);
  cursor: pointer;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}

.card-btn:hover {
  background-color: rgba(26, 26, 23, 0.55);
}