@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --ink:        #14212F;   /* near-black navy for text */
  --navy:       #1C3A63;   /* primary brand blue */
  --navy-deep:  #0E2138;   /* darkest panels */
  --gold:       #B9812F;   /* muted heritage gold */
  --gold-bright:#D8A24E;   /* accent highlight */
  --pine:       #4B6B4E;   /* forest green */
  --cream:      #F7F2E8;   /* main background */
  --cream-2:    #EFE7D6;   /* secondary panel bg */
  --stone:      #E4DCC9;   /* border / hairline on cream */
  --ash:        #6C6255;   /* muted body text on cream */
  --white:      #FFFFFF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1240px;
  --radius: 6px;
  --shadow-soft: 0 20px 50px -25px rgba(14,33,56,0.35);
  --shadow-lift: 0 30px 60px -20px rgba(14,33,56,0.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; margin:0; color:var(--navy-deep); line-height:1.12; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--gold-bright); color:var(--navy-deep); }

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

.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .container{ padding:0 20px; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold); }

.fluid-h1{ font-size:clamp(2.6rem, 5.4vw, 4.6rem); }
.fluid-h2{ font-size:clamp(2.1rem, 3.6vw, 3.1rem); }
.fluid-h3{ font-size:clamp(1.4rem, 2vw, 1.8rem); }

.lede{ font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--ash); max-width:60ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:2px; font-size:14px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; border:1px solid transparent;
  transition:all .35s var(--ease); white-space:nowrap;
}
.btn-primary{ background:var(--gold); color:var(--white); }
.btn-primary:hover{ background:var(--gold-bright); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.btn-outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }
.btn-dark{ background:var(--navy-deep); color:var(--white); }
.btn-dark:hover{ background:var(--navy); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.btn-ghost{ background:transparent; color:var(--navy-deep); border-color:var(--stone); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- Ridge divider (signature element) ---------- */
.ridge{
  width:100%; height:64px; display:block;
  color:var(--cream);
}
.ridge path{ fill:currentColor; }
.ridge.flip{ transform:rotate(180deg); }
.ridge-navy{ color:var(--navy-deep); }
.ridge-cream2{ color:var(--cream-2); }

/* ============================================================
   NAVBAR
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0; transition:all .4s var(--ease);
  background:transparent;
}
.site-header.is-scrolled{
  padding:12px 0; background:rgba(20,33,47,.92); backdrop-filter:blur(10px);
  box-shadow:0 8px 30px -15px rgba(0,0,0,.4);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:42px; width:auto; transition:height .3s var(--ease); }
.site-header.is-scrolled .brand img{ height:34px; }
.brand-text{ font-family:var(--font-display); color:#fff; line-height:1.05; }
.brand-text b{ display:block; font-size:19px; font-weight:600; letter-spacing:.02em; }
.brand-text span{ display:block; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-bright); margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  color:rgba(255,255,255,.88); font-size:13.5px; font-weight:500; letter-spacing:.03em;
  padding:10px 15px; position:relative;
}
.nav-links a::after{
  content:''; position:absolute; left:15px; right:15px; bottom:6px; height:1px;
  background:var(--gold-bright); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.nav-links a.active{ color:#fff; }

.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-cta .btn{ padding:11px 20px; font-size:12px; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:26px; padding:4px; }

@media (max-width:1050px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(340px,86vw); height:100vh;
    background:var(--navy-deep); flex-direction:column; align-items:flex-start;
    padding:100px 30px 30px; gap:6px; transform:translateX(100%);
    transition:transform .45s var(--ease); box-shadow:-30px 0 60px rgba(0,0,0,.35);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ width:100%; padding:14px 6px; font-size:16px; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav-toggle{ display:block; z-index:1200; }
  .nav-cta{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; height:100vh; min-height:620px; overflow:hidden; color:#fff; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease;
  background-size:cover; background-position:center;
}
.hero-slide.active{ opacity:1; }
.hero-slide .kenburns{
  position:absolute; inset:0; background-size:cover; background-position:center;
  animation:kenburns 4s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1);} to{ transform:scale(1.12);} }
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,20,32,.55) 0%, rgba(10,20,32,.35) 40%, rgba(10,20,32,.75) 100%);
  z-index:2;
}
.hero-content{
  position:relative; z-index:3; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 24px;
}
.hero-content .eyebrow{ color:var(--gold-bright); justify-content:center; }
.hero-content .eyebrow::before{ background:var(--gold-bright); }
.hero-title{ font-size:clamp(2.2rem,4.2vw,3.8rem); margin:20px 0 18px; color:#fff; max-width:18ch; }
.hero-sub{ font-size:clamp(0.95rem,1.3vw,1.1rem); color:rgba(255,255,255,.86); max-width:52ch; margin-bottom:38px; font-weight:300; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.hero-dots{ position:absolute; z-index:3; bottom:36px; left:50%; transform:translateX(-50%); display:flex; gap:10px; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.7); background:transparent; padding:0; }
.hero-dots button.active{ background:var(--gold-bright); border-color:var(--gold-bright); }
.scroll-cue{
  position:absolute; z-index:3; bottom:34px; right:44px; writing-mode:vertical-rl;
  color:rgba(255,255,255,.7); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.scroll-cue::after{ content:''; width:1px; height:46px; background:rgba(255,255,255,.5); }
@media (max-width:640px){ .scroll-cue{ display:none; } }

/* page hero (interior pages) */
.page-hero{
  position:relative; height:56vh; min-height:380px; display:flex; align-items:flex-end;
  color:#fff; background-size:cover; background-position:center; overflow:hidden;
}
.page-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,20,32,.35), rgba(10,20,32,.82)); }
.page-hero-inner{ position:relative; z-index:2; padding-bottom:56px; width:100%; }
.page-hero-inner h1{ color:#fff; }
.breadcrumb{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:14px; }
.breadcrumb a:hover{ color:var(--gold-bright); }

/* ============================================================
   SECTIONS / GENERIC
   ============================================================ */
section{ position:relative; }
.section{ padding:110px 0; }
.section-tight{ padding:80px 0; }
.section-navy{ background:var(--navy-deep); color:#fff; }
.section-navy h2, .section-navy h3{ color:#fff; }
.section-cream2{ background:var(--cream-2); }

.section-head{ max-width:680px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ margin-top:14px; }
.section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:56px; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(32px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.stagger .reveal:nth-child(1){ transition-delay:.05s; }
.stagger .reveal:nth-child(2){ transition-delay:.15s; }
.stagger .reveal:nth-child(3){ transition-delay:.25s; }
.stagger .reveal:nth-child(4){ transition-delay:.35s; }
.stagger .reveal:nth-child(5){ transition-delay:.45s; }
.stagger .reveal:nth-child(6){ transition-delay:.55s; }

/* ============================================================
   WELCOME SECTION
   ============================================================ */
.welcome-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:start; }
.welcome-media{ position:sticky; top:110px; }
.welcome-media{ position:relative; }
.welcome-media img{ border-radius:var(--radius); box-shadow:var(--shadow-lift); }
.welcome-media-second{
  position:absolute; top:-34px; right:-30px; width:54%; height:210px; object-fit:cover;
  border:6px solid var(--cream); z-index:2; box-shadow:var(--shadow-soft);
}
.welcome-media .float-card{
  position:absolute; bottom:-30px; left:-30px; background:#fff; padding:22px 26px;
  border-radius:var(--radius); box-shadow:var(--shadow-soft); max-width:220px;
}
.float-card b{ display:block; font-family:var(--font-display); font-size:30px; color:var(--gold); }
.float-card span{ font-size:12px; color:var(--ash); letter-spacing:.03em; }
.welcome-text p{ color:var(--ash); margin-top:18px; }
.welcome-stats{ display:flex; gap:36px; margin-top:34px; flex-wrap:wrap; }
.welcome-stats div b{ display:block; font-family:var(--font-display); font-size:28px; color:var(--navy); }
.welcome-stats div span{ font-size:12.5px; color:var(--ash); text-transform:uppercase; letter-spacing:.08em; }

@media (max-width:900px){
  .welcome-grid{ grid-template-columns:1fr; gap:50px; }

  .welcome-media{ position:relative; }


  .welcome-media .float-card{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    top:auto;
    display:inline-block;
    margin:-28px 16px 0 16px;
    padding:16px 20px;
    max-width:calc(100% - 32px);
    z-index:5;
  }

  .welcome-media-second{ width:46%; height:140px; top:-20px; right:-14px; border-width:4px; }
}

/* Gallery attached below image area */
.welcome-gallery{
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  margin-top:35px;

  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;

  z-index:1;
}


.gallery-placeholder{
  height:300px;
  background:#eee8dc;
  border-radius:var(--radius);
  border:2px dashed #c9c0ae;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--ash);
  font-size:14px;
  letter-spacing:.05em;
}



/* Keep float card above gallery */
.welcome-media .float-card{
  z-index:5;
}


@media(max-width:900px){

  .welcome-gallery{
    position:static;
    margin-top:36px;
  }

}

/* ============================================================
   ROOM CARDS
   ============================================================ */
.room-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.room-grid-3{ grid-template-columns:repeat(3,1fr); }
.room-card{
  position:relative; border-radius:var(--radius); overflow:hidden; height:560px;
  box-shadow:var(--shadow-soft);
}
.room-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.room-card:hover img{ transform:scale(1.07); }
.room-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,33,56,0) 30%, rgba(14,33,56,.92) 100%); }
.room-card-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px; color:#fff; }
.room-tag{ font-size:11.5px; text-transform:uppercase; letter-spacing:.18em; color:var(--gold-bright); }
.room-card-body h3{ color:#fff; margin:10px 0 12px; }
.room-card-body p{ color:rgba(255,255,255,.78); font-size:14.5px; max-width:44ch; }
.room-meta{ display:flex; gap:18px; margin:16px 0 20px; flex-wrap:wrap; }
.room-meta span{ font-size:12.5px; color:rgba(255,255,255,.85); display:flex; align-items:center; gap:6px; }

.room-photo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.room-photo-grid .dest-card{ height:460px; }
@media (max-width:760px){ .room-photo-grid{ grid-template-columns:1fr; } .room-photo-grid .dest-card{ height:340px; } }

@media (max-width:860px){ .room-grid{ grid-template-columns:1fr; } .room-card{ height:460px; } }
@media (min-width:861px) and (max-width:1100px){ .room-grid-3{ grid-template-columns:repeat(2,1fr); } }

/* room page detail blocks */
.room-detail{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:120px; }
.room-detail.reverse .room-detail-media{ order:2; }
.room-detail-media{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lift); }
.room-detail-media img{ width:100%; height:520px; object-fit:cover; }
.feature-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-top:26px; }
.feature-list li{ font-size:14.5px; color:var(--ash); display:flex; align-items:center; gap:10px; }
.feature-list li::before{ content:'—'; color:var(--gold); font-weight:700; }
.price-tag{ display:inline-flex; align-items:baseline; gap:6px; margin-top:26px; font-family:var(--font-display); }
.price-tag b{ font-size:30px; color:var(--navy); }
.price-tag span{ font-size:13px; color:var(--ash); }
@media (max-width:880px){ .room-detail, .room-detail.reverse{ grid-template-columns:1fr; } .room-detail.reverse .room-detail-media{ order:0; } .room-detail-media img{ height:340px; } }

/* ---------- ROOM GALLERY ---------- */

.room-gallery{

    position:relative;

    overflow:hidden;

}

.gallery-wrapper{

    position:relative;

    width:100%;

    height:100%;

}

.gallery-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity .45s ease;

}

.gallery-image.active{

    opacity:1;

}

/* arrows */

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.82);

    color:#23313f;

    font-size:20px;

    cursor:pointer;

    opacity:0;

    transition:.3s;

    z-index:5;

}

.room-gallery:hover .gallery-arrow{

    opacity:1;

}

.gallery-arrow:hover{

    background:#c8a96a;

    color:#fff;

}

.prev{

    left:15px;

}

.next{

    right:15px;

}

/* dots */

.gallery-dots{

    position:absolute;

    left:50%;

    bottom:78px;

    transform:translateX(-50%);

    display:flex;

    gap:8px;

    z-index:5;

}

.gallery-dots span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:rgba(255,255,255,.6);

    cursor:pointer;

    transition:.3s;

}

.gallery-dots span.active{

    width:24px;

    border-radius:20px;

    background:#fff;

}
/* ============================================================
   DESTINATION / FACILITY CARDS
   ============================================================ */
.dest-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

.dest-card{ position:relative; border-radius:var(--radius); overflow:hidden; height:380px; box-shadow:var(--shadow-soft); }
.dest-card img, .dest-card .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.dest-card .ph{ background:linear-gradient(150deg,var(--navy),var(--pine)); display:flex; align-items:center; justify-content:center; }
.dest-card:hover img, .dest-card:hover .ph{ transform:scale(1.06); }
.dest-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,33,56,0) 40%, rgba(14,33,56,.88) 100%); }
.dest-card-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; color:#fff; }
.dest-card-body span{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--gold-bright); }
.dest-card-body h4{ color:#fff; font-size:20px; margin-top:6px; }
.dest-card-body p{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.8); margin-top:8px; max-width:34ch; }
@media (max-width:980px){ .dest-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .dest-grid{ grid-template-columns:1fr; } }

.facility-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.facility-card{ background:#fff; border:1px solid var(--stone); border-radius:var(--radius); padding:34px 26px; transition:all .4s var(--ease); }
.facility-card:hover{ border-color:var(--gold); transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.facility-icon{ width:48px; height:48px; margin-bottom:18px; color:var(--gold); }
.facility-card h4{ font-size:17px; margin-bottom:8px; }
.facility-card p{ font-size:13.5px; color:var(--ash); }
@media (max-width:980px){ .facility-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .facility-grid{ grid-template-columns:1fr; } }

/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.video-card{ position:relative; border-radius:var(--radius); overflow:hidden; height:280px; box-shadow:var(--shadow-soft); cursor:pointer; }
.video-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.video-card:hover img{ transform:scale(1.08); }
.video-card::after{ content:''; position:absolute; inset:0; background:rgba(14,33,56,.42); transition:background .4s; }
.video-card:hover::after{ background:rgba(14,33,56,.6); }
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.75); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:all .35s var(--ease);
}
.video-card:hover .play-btn{ background:var(--gold); border-color:var(--gold); transform:translate(-50%,-50%) scale(1.08); }
.play-btn svg{ width:20px; height:20px; fill:#fff; margin-left:3px; }
.video-label{ position:absolute; left:22px; bottom:18px; z-index:2; color:#fff; font-size:14.5px; font-weight:500; }
@media (max-width:900px){ .video-grid{ grid-template-columns:1fr; } }

/* ============================================================
   GALLERY / MASONRY
   ============================================================ */
.gallery-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.gfilter{ padding:9px 20px; border:1px solid var(--stone); border-radius:30px; font-size:13px; background:transparent; color:var(--ash); transition:all .3s; }
.gfilter.active, .gfilter:hover{ background:var(--navy-deep); color:#fff; border-color:var(--navy-deep); }

.g-item{ cursor:zoom-in; }
.masonry{ column-count:3; column-gap:22px; }
.masonry .g-item{ break-inside:avoid; margin-bottom:22px; border-radius:var(--radius); overflow:hidden; position:relative; cursor:zoom-in; box-shadow:var(--shadow-soft); }
.masonry .g-item img{ width:100%; display:block; transition:transform .6s var(--ease); }
.masonry .g-item:hover img{ transform:scale(1.08); }
.masonry .g-item .g-overlay{
  position:absolute; inset:0; background:rgba(14,33,56,0); transition:background .35s;
  display:flex; align-items:flex-end; padding:16px; opacity:0;
}
.masonry .g-item:hover .g-overlay{ background:rgba(14,33,56,.28); opacity:1; }
.masonry .g-item .g-overlay span{ color:#fff; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; }
@media (max-width:900px){ .masonry{ column-count:2; } }
@media (max-width:560px){ .masonry{ column-count:1; } }

.lightbox{
  position:fixed; inset:0; z-index:3000; background:rgba(10,18,28,.94);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease); padding:40px;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox-close, .lightbox-nav{
  position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3); color:#fff;
  border-radius:50%; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  font-size:20px; transition:all .3s;
}
.lightbox-close:hover, .lightbox-nav:hover{ background:var(--gold); border-color:var(--gold); }
.lightbox-close{ top:26px; right:26px; }
.lightbox-nav.prev{ left:26px; top:50%; transform:translateY(-50%); }
.lightbox-nav.next{ right:26px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){ .lightbox-nav{ width:38px; height:38px; } }

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--stone); border-radius:var(--radius); overflow:hidden; }
.why-item{ background:var(--cream); padding:40px 28px; text-align:center; transition:background .35s; }
.why-item:hover{ background:#fff; }
.why-item svg{ width:36px; height:36px; color:var(--gold); margin-bottom:16px; }
.why-item h4{ font-size:15px; margin-bottom:6px; }
.why-item p{ font-size:12.5px; color:var(--ash); }
@media (max-width:900px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{
  position:relative; padding:130px 0; text-align:center; color:#fff;
  background-size:cover; background-position:center; overflow:hidden;
}
.cta-banner::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,33,56,.55), rgba(14,33,56,.88)); }
.cta-banner .container{ position:relative; z-index:2; }
.cta-banner h2{ color:#fff; margin:16px 0 30px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--navy-deep); color:rgba(255,255,255,.75); padding-top:80px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.09); }
.footer-brand .brand-text b{ color:#fff; }
.footer-brand p{ font-size:13.5px; margin:18px 0 20px; max-width:32ch; color:rgba(255,255,255,.6); }
.footer-col h5{ color:#fff; font-family:var(--font-display); font-weight:500; font-size:16px; margin-bottom:20px; }
.footer-col li{ margin-bottom:11px; font-size:13.5px; }
.footer-col a:hover{ color:var(--gold-bright); }
.social-row{ display:flex; gap:10px; margin-top:8px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.social-row a:hover{ background:var(--gold); border-color:var(--gold); }
.social-row svg{ width:15px; height:15px; }
.qr-row{ display:flex; gap:10px; margin-top:14px; }
.qr-row div{ background:#fff; padding:5px; border-radius:4px; width:58px; height:58px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:12.5px; color:rgba(255,255,255,.5); flex-wrap:wrap; gap:10px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ============================================================
   ABOUT / TIMELINE
   ============================================================ */
.about-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.about-media-stack{ display:flex; gap:24px; align-items:stretch; }
.about-media-stack img{ flex:1.1; width:100%; border-radius:var(--radius); box-shadow:var(--shadow-lift); height:600px; object-fit:cover; }
.video-placeholder{
  position:relative; flex:0 0 100%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft);
  background:linear-gradient(160deg,var(--navy),var(--pine)); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; aspect-ratio:9/16; height:600px;
}
.video-placeholder .play-btn{ position:static; transform:none; width:76px; height:76px; }
.video-placeholder .video-label{ position:static; color:rgba(255,255,255,.85); font-size:13.5px; letter-spacing:.03em; text-align:center; padding:0 20px; }
@media (max-width:900px){
  .about-hero-grid{ grid-template-columns:1fr; }
  .about-media-stack{ flex-direction:column; }
  .about-media-stack img{ height:320px; }
  .video-placeholder{ height:460px; aspect-ratio:auto; flex:none; }
}

.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.mv-card{ background:#fff; border:1px solid var(--stone); border-radius:var(--radius); padding:44px; }
.mv-card .eyebrow{ margin-bottom:16px; }
.mv-card p{ color:var(--ash); margin-top:14px; }
@media (max-width:760px){ .mv-grid{ grid-template-columns:1fr; } }

.timeline{ position:relative; max-width:820px; margin:0 auto; }
.timeline::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--stone); transform:translateX(-50%); }
.t-item{ position:relative; width:50%; padding:0 50px 70px; }
.t-item:nth-child(odd){ left:0; text-align:right; }
.t-item:nth-child(even){ left:50%; text-align:left; }
.t-dot{ position:absolute; top:2px; width:13px; height:13px; border-radius:50%; background:var(--gold); border:3px solid var(--cream); box-shadow:0 0 0 1px var(--stone); }
.t-item:nth-child(odd) .t-dot{ right:-7px; }
.t-item:nth-child(even) .t-dot{ left:-7px; }
.t-year{ font-family:var(--font-display); color:var(--navy); font-size:22px; }
.t-item p{ color:var(--ash); font-size:14.5px; margin-top:8px; }
@media (max-width:700px){
  .timeline::before{ left:12px; }
  .t-item, .t-item:nth-child(odd), .t-item:nth-child(even){ width:100%; left:0; text-align:left; padding:0 0 46px 44px; }
  .t-item:nth-child(odd) .t-dot, .t-item:nth-child(even) .t-dot{ left:5px; right:auto; }
}

/* ---------- Journey Section ---------- */

.journey-desc{
    max-width:760px;
    margin:20px auto 55px;
    text-align:center;
    line-height:1.9;
    color:#746b5f;
}

/* GRID */

.journey-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    align-items:stretch;
}

/* CARD */

.journey-card{

    position:relative;
    overflow:hidden;

    padding:34px 30px;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(252,248,241,.97),
            rgba(255,255,255,.98)
        );

    background-size:220% 220%;

    animation:cardGradient 12s ease infinite;

    border:1px solid rgba(200,169,106,.12);

    box-shadow:
        0 10px 20px rgba(0,0,0,.04),
        0 24px 45px rgba(0,0,0,.07);

    transition:
        transform .45s,
        box-shadow .45s,
        border-color .45s;
}

/* Soft golden glow */

.journey-card::after{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        rgba(200,169,106,.10),
        transparent 45%,
        transparent 60%,
        rgba(200,169,106,.06)
    );

    opacity:0;

    transition:.45s;

}

.journey-card:hover::after{

    opacity:1;

}

/* Luxury shine */

.journey-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transform:skewX(-25deg);

    transition:1.2s;

}

.journey-card:hover::before{

    left:170%;

}

.journey-card:hover{

    transform:translateY(-10px);

    border-color:#c8a96a;

    box-shadow:
        0 18px 35px rgba(0,0,0,.08),
        0 35px 65px rgba(0,0,0,.13);

}

/* ICON */

.journey-icon{

    width:30px;

    height:30px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#fff;

    border:2px solid #c8a96a;

    color:#c8a96a;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    box-shadow:
        0 8px 18px rgba(200,169,106,.12);

    transition:.4s ease;

}

.journey-card:hover .journey-icon{

    transform:scale(1.15) rotate(8deg);

    background:#c8a96a;

    color:#fff;

}

/* TEXT */

.journey-tag{

    display:block;

    text-align:center;

    letter-spacing:2.6px;

    text-transform:uppercase;

    font-size:.72rem;

    font-weight:700;

    color:#b98d48;

    margin-bottom:12px;

}

.journey-card h3{

    text-align:center;

    margin-bottom:14px;

    color:#13253b;

    font-size:1.55rem;

}

.journey-card p{

    text-align:center;

    color:#666;

    font-size:.97rem;

    line-height:1.8;

}

/* LAST CARD */

.featured{

    grid-column:2 / span 2;

    justify-self:center;

    width:100%;

    max-width:650px;

}

/* FOOTER */

.journey-footer{

    margin-top:60px;

    text-align:center;

}

.journey-footer p{

    max-width:720px;

    margin:auto;

    color:#8b7047;

    font-size:1.15rem;

    font-style:italic;

    line-height:1.8;

}

/* ANIMATION */

@keyframes cardGradient{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/* RESPONSIVE */

@media(max-width:1100px){

.journey-grid{

grid-template-columns:repeat(2,1fr);

}

.featured{

grid-column:1 / span 2;

max-width:none;

}

}

@media(max-width:768px){

.journey-grid{

grid-template-columns:1fr;

}

.featured{

grid-column:auto;

}

}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-search{ position:relative; max-width:520px; margin:0 auto 50px; }
.faq-search input{
  width:100%; padding:16px 20px 16px 48px; border:1px solid var(--stone); border-radius:30px;
  font-family:inherit; font-size:14.5px; background:#fff; color:var(--ink);
}
.faq-search input:focus{ outline:none; border-color:var(--gold); }
.faq-search svg{ position:absolute; left:18px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ash); }

.faq-cats{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }

.accordion{ max-width:820px; margin:0 auto; }
.acc-item{ border-bottom:1px solid var(--stone); }
.acc-head{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 4px; background:none; border:none; text-align:left; font-family:var(--font-display); font-size:17px; color:var(--navy-deep); }
.acc-head .plus{ position:relative; width:20px; height:20px; flex:0 0 auto; }
.acc-head .plus::before, .acc-head .plus::after{ content:''; position:absolute; background:var(--gold); transition:transform .35s var(--ease); }
.acc-head .plus::before{ width:100%; height:2px; top:9px; left:0; }
.acc-head .plus::after{ width:2px; height:100%; left:9px; top:0; }
.acc-item.open .acc-head .plus::after{ transform:rotate(90deg); }
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.acc-panel-inner{ padding:0 4px 26px; color:var(--ash); font-size:14.5px; max-width:70ch; }
.acc-item[hidden]{ display:none; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:70px; }
.contact-card{ background:#fff; border:1px solid var(--stone); border-radius:var(--radius); padding:38px 30px; text-align:center; transition:all .35s var(--ease); }
.contact-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:var(--gold); }
.contact-card .cicon{ width:52px; height:52px; border-radius:50%; background:var(--cream-2); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.contact-card .cicon svg{ width:22px; height:22px; color:var(--gold); }
.contact-card h4{ font-size:17px; margin-bottom:8px; }
.contact-card p{ font-size:14px; color:var(--ash); }
.contact-card a.big{ font-family:var(--font-display); font-size:19px; color:var(--navy); display:block; margin-top:6px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

.qr-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.qr-block{ background:#fff; border:1px solid var(--stone); border-radius:var(--radius); padding:22px; text-align:center; }
.qr-block .qr-img{ width:100%; aspect-ratio:1; background:var(--cream-2); border-radius:4px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; color:var(--ash); font-size:11px; }
.qr-block span{ font-size:13px; color:var(--ash); }
@media (max-width:700px){ .qr-grid{ grid-template-columns:1fr 1fr; } }

.map-embed{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--stone); }
.map-embed iframe{ width:100%; height:440px; border:0; display:block; }

/* ============================================================
   MISC utility
   ============================================================ */
.split-2{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:860px){ .split-2{ grid-template-columns:1fr; gap:40px; } }
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.tag-list span{ font-size:12.5px; padding:8px 16px; border:1px solid var(--stone); border-radius:30px; color:var(--ash); }
.counter{ font-family:var(--font-display); }

.back-top{
  position:fixed; right:26px; bottom:26px; width:46px; height:46px; border-radius:50%;
  background:var(--navy-deep); color:#fff; display:flex; align-items:center; justify-content:center;
  z-index:900; opacity:0; pointer-events:none; transition:all .35s var(--ease); box-shadow:var(--shadow-soft);
}
.back-top.show{ opacity:1; pointer-events:auto; }
.back-top:hover{ background:var(--gold); }

.whatsapp-float{
  position:fixed; left:26px; bottom:26px; width:56px; height:56px; border-radius:50%;
  background:#3d8f5b; display:flex; align-items:center; justify-content:center; z-index:900;
  box-shadow:0 10px 30px rgba(0,0,0,.3); transition:transform .3s;
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float svg{ width:26px; height:26px; fill:#fff; }

.call-float{
  position:fixed; left:26px; bottom:94px; width:56px; height:56px; border-radius:50%;
  background:var(--gold); display:flex; align-items:center; justify-content:center; z-index:900;
  box-shadow:0 10px 30px rgba(0,0,0,.3); transition:transform .3s;
}
.call-float:hover{ transform:scale(1.08); }
.call-float svg{ width:23px; height:23px; fill:none; stroke:#fff; stroke-width:2; }

.qr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
    justify-content: center;
    gap: 20px;
}