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

/* ============ TOKENS — Editorial Line ============
   Same mark, same palette as the logo (deep forest ink, cream ground,
   sage wash, brass accent) — but read through a split-screen, magazine
   layout instead of the centred/circular "Canopy" treatment.          */
:root{
  --cream:#F8F6F0;
  --cream-deep:#EFEADD;
  --paper:#FFFFFF;
  --forest:#2C3D26;
  --forest-deep:#182212;
  --sage:#7C8F6C;
  --sage-soft:#A9B99A;
  --rust:#A8452C;
  --gold:#BE9A55;
  --ink:#22271E;
  --ink-soft:#5B6353;
  --line: rgba(34,39,30,0.14);
  --shadow: 0 26px 60px rgba(24,34,18,0.16);
  --radius: 6px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  padding-top:var(--nav-offset, 96px);
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

h1,h2,h3,h4{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  color:var(--forest-deep);
  letter-spacing:0.005em;
}

a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}

.eyebrow{
  font-family:'Jost', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.38em;
  font-size:0.66rem;
  font-weight:500;
  color:var(--sage);
}
.eyebrow.on-dark{color:var(--sage-soft);}

.wrap{ max-width:1280px; margin:0 auto; padding:0 6vw; }
.wrap-wide{ max-width:1480px; margin:0 auto; padding:0 5vw; }

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

/* ============ LOGO MEDALLION (kept circular — the mark's own crop) ============ */
.logo-medallion{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; flex-shrink:0;
}
.logo-medallion img{ width:auto; height:100%; object-fit:contain; }
.brand-logo{ height:124px; width:auto; object-fit:contain; transition:height 0.35s ease; display:block; }
.nav-shell.scrolled .brand-logo{ height:62px; }
.foot-logo{ height:88px; width:auto; object-fit:contain; display:block; }
.hero-mark{
  height:118px; padding:22px;
  background:rgba(248,246,240,0.10); border:1px solid rgba(248,246,240,0.35);
  border-radius:50%; backdrop-filter:blur(6px);
  box-shadow:0 14px 34px rgba(0,0,0,0.30);
}
.hero-mark img{ height:100%; }

/* ============ NAVIGATION — fixed overlay header ============
   Fixed (not sticky) so its own height can change on scroll — collapsing
   the utility row — WITHOUT ever reflowing/pushing the page content below
   it (that reflow was the "banner/page jumps while scrolling" bug: a
   sticky element that changes height shifts everything after it in the
   document, which reads as a jump). The page is given a constant
   padding-top (--nav-offset, set from JS to the nav's compact/scrolled
   height) so content never moves. The taller, unscrolled nav simply
   overlaps the very top of the hero/page-header image for a moment —
   harmless since those banners carry no text up there — and that overlap
   smoothly shrinks away as the utility row collapses.                     */
.nav-shell{ position:fixed; top:0; left:0; right:0; width:100%; z-index:500; }

/* -- utility row: contact / socials, collapses on scroll -- */
.nav-utility{
  max-height:44px; opacity:1; overflow:hidden;
  background:var(--forest-deep);
  border-bottom:1px solid rgba(248,246,240,0.14);
  transition:max-height 0.4s ease, opacity 0.3s ease, border-color 0.4s ease;
}
.nav-utility-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 0; }
.nav-utility-info{ display:flex; align-items:center; gap:10px; font-size:0.72rem; letter-spacing:0.04em; color:rgba(248,246,240,0.75); flex-wrap:wrap; }
.nav-utility-info a{ color:rgba(248,246,240,0.88); transition:color 0.3s ease; }
.nav-utility-info a:hover{ color:var(--gold); }
.tb-sep{ opacity:0.4; }
.nav-utility-right{ display:flex; align-items:center; gap:22px; }
.nav-utility-social{ display:flex; gap:10px; }
.nav-utility-social a{ width:24px; height:24px; border:1px solid rgba(248,246,240,0.3); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(248,246,240,0.85); transition:0.3s ease; }
.nav-utility-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--forest-deep); }
.nav-utility-social svg{ width:12px; height:12px; }

.nav-shell.scrolled .nav-utility{ max-height:0; opacity:0; border-bottom-color:transparent; }

/* -- main row: solid white, centered logo, links split either side -- */
.site-nav{
  padding:16px 0;
  background:var(--paper);
  transition: padding 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  border-bottom:1px solid var(--line);
}
.site-nav .nav-top.nav-centered{
  display:grid; grid-template-columns:1fr auto 1fr auto;
  align-items:center; gap:20px;
  width:100%; max-width:1480px; margin:0 auto; padding:0 3vw;
}
.site-nav .brand{ display:flex; align-items:center; gap:14px; justify-self:center; grid-column:2; }
.site-nav .brand-type{ display:flex; flex-direction:column; line-height:1; }
.site-nav .brand-type small{ font-family:'Jost'; letter-spacing:0.34em; font-size:0.54rem; text-transform:uppercase; font-weight:500; color:var(--sage); }
.site-nav .brand-type span{ font-family:'Cormorant Garamond'; font-size:1.7rem; font-weight:500; color:var(--forest-deep); letter-spacing:0.01em; }

.site-nav .nav-links{ display:flex; align-items:center; gap:clamp(18px, 2vw, 34px); flex-wrap:wrap; }
.nav-links-left{ grid-column:1; justify-content:flex-end; }
.nav-links-right{ grid-column:3; justify-content:flex-start; }
.site-nav .nav-links a{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.14em; font-weight:500;
  color:var(--ink); position:relative;
  padding:8px 14px; border-radius:999px;
  transition:color 0.3s ease, background 0.3s ease;
}
.site-nav .nav-links a:not(.btn)::after{ content:""; position:absolute; left:14px; right:14px; bottom:2px; height:1px; background:var(--forest); transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; }
.site-nav .nav-links a:not(.btn):hover{ color:var(--forest); background:rgba(44,61,38,0.08); }
.site-nav .nav-links a:not(.btn):hover::after, .site-nav .nav-links a.active::after{ transform:scaleX(1); }
.site-nav .nav-links a.active{ color:var(--forest); }
.btn-nav{ padding:9px 20px !important; font-size:0.66rem !important; background:var(--forest); border-color:var(--forest); color:var(--cream); }
.btn-nav:hover{ background:var(--forest-deep); border-color:var(--forest-deep); color:var(--cream); }
.btn-nav::after{ display:none; }

.burger{ grid-column:4; }

.nav-shell.scrolled .site-nav{
  padding:12px 0;
  box-shadow:0 8px 26px rgba(24,34,18,0.10);
}

/* ============ HOME PAGE — nav floats transparently over the hero video,
   then becomes the normal solid header once you scroll past it ============ */
body.home-page{ padding-top:0; }
body.home-page .nav-shell .nav-utility,
body.home-page .nav-shell .site-nav{ transition:background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, padding 0.35s ease; }
body.home-page .nav-shell:not(.scrolled) .nav-utility{ background:transparent; border-bottom-color:transparent; }
body.home-page .nav-shell:not(.scrolled) .site-nav{ background:transparent; border-bottom-color:transparent; }
body.home-page .nav-shell:not(.scrolled) .nav-utility-info,
body.home-page .nav-shell:not(.scrolled) .nav-utility-info a{ color:rgba(248,246,240,0.92); }
body.home-page .nav-shell:not(.scrolled) .nav-utility-social a{ border-color:rgba(248,246,240,0.5); color:var(--cream); }
body.home-page .nav-shell:not(.scrolled) .site-nav .nav-links a{ color:var(--cream); }
body.home-page .nav-shell:not(.scrolled) .site-nav .nav-links a:not(.btn):hover{ color:var(--cream); background:rgba(248,246,240,0.14); }
body.home-page .nav-shell:not(.scrolled) .site-nav .nav-links a:not(.btn)::after{ background:var(--cream); }
body.home-page .nav-shell:not(.scrolled) .btn-nav{ background:var(--gold); border-color:var(--gold); color:var(--forest-deep); }
body.home-page .nav-shell:not(.scrolled) .burger span{ background:var(--cream); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  background:var(--gold);
  color:var(--forest-deep);
  border-radius:2px;
  text-transform:uppercase;
  font-size:0.72rem;
  letter-spacing:0.16em;
  font-weight:500;
  border:1px solid var(--gold);
  transition:background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover{ background:var(--cream); border-color:var(--cream); transform:translateY(-2px); box-shadow:0 12px 26px rgba(24,34,18,0.24); }
.btn.ghost{ background:transparent; border-color:rgba(248,246,240,0.55); color:var(--cream); }
.btn.ghost:hover{ background:var(--cream); color:var(--forest-deep); border-color:var(--cream); }
.btn.on-forest{ background:var(--forest); border-color:var(--forest); color:var(--cream); }
.btn.on-forest:hover{ background:var(--forest-deep); border-color:var(--forest-deep); }

.burger{ display:none; width:40px; height:40px; border:none; background:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span{ width:22px; height:1.5px; background:var(--forest-deep); display:block; transition:0.3s; }

.mobile-panel{
  position:fixed; inset:0; z-index:600;
  background:var(--forest-deep);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:22px; padding: 10vw 10vw;
  transform:translateY(-100%);
  transition:transform 0.5s cubic-bezier(.6,0,.2,1);
}
.mobile-panel.open{ transform:translateY(0); }
.mobile-panel a{ font-family:'Cormorant Garamond'; font-size:2.2rem; color:var(--cream); font-weight:500; }
.mobile-panel a.active{ color:var(--gold); }
.mobile-panel .close-x{ position:absolute; top:26px; right:6vw; width:40px;height:40px;border:none;background:none;color:var(--cream);font-size:1.6rem; }
.mobile-panel .mp-reserve{
  margin-top:6px; align-self:flex-start; font-family:'Jost'; font-size:0.78rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--forest-deep); background:var(--gold);
  padding:13px 26px; border-radius:2px;
}
.mobile-panel .mp-foot{ margin-top:22px; display:flex; align-items:center; gap:8px; color:var(--sage-soft); font-size:0.84rem; letter-spacing:0.04em; }
.mobile-panel .mp-foot a{ font-family:'Jost'; font-size:0.84rem; color:var(--sage-soft); font-weight:400; }
.mobile-panel .mp-social{ display:flex; gap:12px; margin-top:16px; }
.mobile-panel .mp-social a{ width:38px; height:38px; border:1px solid rgba(248,246,240,0.3); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--cream); }
.mobile-panel .mp-social svg{ width:16px; height:16px; }

/* ============ HERO (homepage) — full-bleed slideshow, Nirjhara-style ============ */
.hero{
  position:relative; min-height:90vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--cream); text-align:center;
}
.hero-banner-only{ min-height:88vh; }
.hero-slideshow{ position:absolute; inset:0; z-index:0; background:linear-gradient(155deg,#7C8F6C 0%, #4E5A38 55%, #182212 100%); }
.hero-slide{
  position:absolute; inset:0; opacity:0; background-size:cover; background-position:center;
  animation:heroFade2 12s infinite;
}
.hero-slide::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(ellipse at 25% 15%, rgba(255,255,255,0.16), transparent 46%);
}
.hero-slide.hs-1{ animation-delay:0s; }
.hero-slide.hs-2{ animation-delay:6s; }
@keyframes heroFade2{
  0%{opacity:0;}
  4%{opacity:1;}
  46%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:0;}
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(24,34,18,0.16) 0%, rgba(24,34,18,0.04) 35%, rgba(24,34,18,0.30) 100%);
}

/* Hero video banner */
.hero-video-banner{ background:#182212; }
.hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.hero-sound-toggle{
  position:absolute; z-index:3; right:22px; bottom:22px;
  width:46px; height:46px; border-radius:50%;
  background:rgba(24,34,18,0.45); border:1px solid rgba(248,246,240,0.4);
  color:var(--cream); display:flex; align-items:center; justify-content:center;
  cursor:pointer; backdrop-filter:blur(2px); transition:background 0.2s ease;
}
.hero-sound-toggle:hover{ background:rgba(24,34,18,0.7); }
.hero-sound-toggle svg{ width:20px; height:20px; }
@media (max-width:640px){
  .hero-sound-toggle{ width:40px; height:40px; right:14px; bottom:14px; }
  .hero-sound-toggle svg{ width:17px; height:17px; }
}
.hero .hero-mark-float{
  position:relative; z-index:3; flex-shrink:0;
  margin-top:44px;
}

.hero-content{
  position:relative; z-index:3; width:100%; max-width:820px;
  padding:26px 6vw 54px; text-align:center;
}
.hero-content .eyebrow{ margin-bottom:20px; }
.hero-content h1{ font-size:clamp(2.5rem, 5.2vw, 4.2rem); line-height:1.1; color:var(--cream); font-weight:500; }
.hero-content h1 em{ font-style:italic; font-weight:400; color:var(--gold); }
.hero-sub{ max-width:520px; margin:22px 0 36px; color:rgba(248,246,240,0.78); font-size:1.04rem; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* Info strip now sits BELOW the banner (own block, not overlaid on the images) */
.hero-info-bar{
  position:relative; z-index:3; width:100%;
  text-align:left;
  background:var(--forest-deep);
  border-top:1px solid rgba(248,246,240,0.18);
}
.hero-info-grid{ display:grid; grid-template-columns:1.2fr 1fr 1.3fr auto; align-items:center; }
.hi-item{ padding:26px 3vw; border-right:1px solid rgba(248,246,240,0.14); }
.hi-item:last-child{ border-right:none; }
.hi-item h5{ font-family:'Jost'; text-transform:uppercase; letter-spacing:0.2em; font-size:0.62rem; color:var(--sage-soft); margin-bottom:8px; font-weight:500; }
.hi-item p{ font-size:0.88rem; color:rgba(248,246,240,0.85); }
.hi-item p a{ color:rgba(248,246,240,0.85); }
.hi-item p a:hover{ color:var(--gold); }
.hi-stats{ display:flex; gap:26px; }
.hi-stats div{ display:flex; flex-direction:column; }
.hi-stats strong{ font-family:'Cormorant Garamond'; font-size:1.5rem; color:var(--gold); font-weight:500; }
.hi-stats span{ font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; color:rgba(248,246,240,0.6); margin-top:2px; }
.hi-cta{ display:flex; justify-content:center; }
@media (max-width:1080px){
  .hero-info-grid{ grid-template-columns:1fr 1fr; }
  .hi-item{ border-right:1px solid rgba(248,246,240,0.14); border-bottom:1px solid rgba(248,246,240,0.14); }
  .hi-cta{ padding:22px 3vw; }
}
@media (max-width:620px){
  .hero-info-grid{ grid-template-columns:1fr; }
  .hi-item{ border-right:none; text-align:center; }
}

/* ============ PAGE HEADER (subpages) — full-bleed image-style banner ============ */
.page-header{
  position:relative;
  min-height:46vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:var(--cream);
}
.page-header.ph-tone-a{ background:linear-gradient(155deg,#7C8F6C 0%, #3E4E33 55%, #182212 100%); }
.page-header.ph-tone-r{ background:linear-gradient(155deg,#A9B99A 0%, #5E7049 55%, #2C3D26 100%); }
.page-header.ph-tone-g{ background:linear-gradient(155deg,#C9A97C 0%, #8C6E33 55%, #4E3B1B 100%); }
.page-header.ph-tone-c{ background:linear-gradient(155deg,#7C8F6C 0%, #33421F 55%, #182212 100%); }
.page-header::after{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: radial-gradient(ellipse at 80% 10%, rgba(255,255,255,0.20), transparent 50%);
}
.page-header .ph-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(24,34,18,0.24) 0%, rgba(24,34,18,0.88) 100%);
}
.page-header .ph-numeral{
  position:absolute; top:22px; right:5vw; z-index:1;
  font-family:'Cormorant Garamond'; font-weight:500; font-size:clamp(4.5rem,10vw,8.5rem); line-height:0.8;
  color:transparent; -webkit-text-stroke:1.5px rgba(248,246,240,0.22);
}
.page-header .ph-content{ position:relative; z-index:2; padding:56px 6vw 48px; }
.page-header .eyebrow{ margin-bottom:14px; }
.page-header h1{ font-size:clamp(2.2rem, 4.6vw, 3.6rem); font-weight:500; max-width:640px; color:var(--cream); }
.page-header p{ max-width:520px; margin-top:16px; color:rgba(248,246,240,0.8); }
.breadcrumb{ display:flex; gap:10px; margin-top:22px; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.14em; color:rgba(248,246,240,0.65); }
.breadcrumb a{ color:var(--gold); }
@media (max-width:760px){ .page-header .ph-numeral{ display:none; } }

/* ============ SECTION GENERIC ============ */
section{ position:relative; padding:120px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:60px; border-bottom:1px solid var(--line); padding-bottom:28px; }
.section-head .sh-text{ max-width:560px; }
.section-head h2{ font-size:clamp(2rem, 3.6vw, 2.9rem); font-weight:500; margin-top:12px; }
.section-head p{ color:var(--ink-soft); margin-top:14px; max-width:480px; }
.section-head .sh-index{ font-family:'Cormorant Garamond'; font-size:1rem; letter-spacing:0.1em; color:var(--sage); white-space:nowrap; }
@media (max-width:700px){ .section-head{ flex-direction:column; align-items:flex-start; } }

.reveal{ opacity:0; transform:translateY(30px); transition:opacity 0.9s ease, transform 0.9s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============ INTRO STRIP — numbered inline list, not a 3-box grid ============ */
.intro-strip{ background:var(--paper); padding:0; border-bottom:1px solid var(--line); }
.intro-list{ display:grid; grid-template-columns:repeat(3,1fr); }
.intro-item{ padding:54px 44px; border-left:1px solid var(--line); position:relative; }
.intro-item:first-child{ border-left:none; }
.intro-item .idx{ font-family:'Cormorant Garamond'; font-size:0.95rem; color:var(--gold); letter-spacing:0.06em; margin-bottom:18px; display:block; }
.intro-item h3{ font-size:1.32rem; font-weight:500; margin-bottom:10px; }
.intro-item p{ color:var(--ink-soft); font-size:0.95rem; }
@media (max-width:860px){ .intro-list{ grid-template-columns:1fr; } .intro-item{ border-left:none; border-top:1px solid var(--line); } .intro-item:first-child{ border-top:none; } }

/* ============ TEASER — alternating full-width rows ============ */
.teaser-stack{ display:flex; flex-direction:column; }
.teaser-row-item{
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
  border-bottom:1px solid var(--line);
}
.teaser-row-item:nth-child(even){ direction:rtl; }
.teaser-row-item:nth-child(even) > *{ direction:ltr; }
.teaser-row-item .tr-media{ aspect-ratio:16/11; overflow:hidden; }
.teaser-row-item .tr-media .ph{ width:100%; height:100%; transition:transform 0.8s ease; }
.teaser-row-item:hover .tr-media .ph{ transform:scale(1.05); }
.tr-body{ display:flex; flex-direction:column; justify-content:center; padding:50px 7vw; }
.tr-body .idx{ font-family:'Cormorant Garamond'; color:var(--sage); font-size:1rem; margin-bottom:14px; }
.tr-body h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:14px; }
.tr-body p{ color:var(--ink-soft); margin-bottom:22px; max-width:420px; }
.tr-link{ font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; border-bottom:1px solid var(--forest); padding-bottom:4px; color:var(--forest); align-self:flex-start; }
@media (max-width:800px){ .teaser-row-item, .teaser-row-item:nth-child(even){ grid-template-columns:1fr; direction:ltr; } .tr-body{ padding:36px 6vw; } }

/* ============ CTA BAND — diagonal clipped top edge ============ */
.cta-band{ position:relative; background:var(--forest); color:var(--cream); text-align:center; padding:130px 0 100px; clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
.cta-band h2{ color:var(--cream); font-weight:500; font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:22px; }
.cta-band p{ color:rgba(248,246,240,0.8); max-width:480px; margin:0 auto 34px; }
.cta-band .btn{ background:var(--gold); border-color:var(--gold); color:var(--forest-deep); }
.cta-band .btn:hover{ background:var(--cream); border-color:var(--cream); }

/* ============ ABOUT ============ */
#about-main{ background:var(--cream); }
.about-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:70px; align-items:center; }
.about-visual{ position:relative; }
.about-visual::before{
  content:attr(data-numeral); position:absolute; top:-46px; left:-24px; z-index:0;
  font-family:'Cormorant Garamond'; font-size:9rem; font-weight:500; line-height:1;
  color:transparent; -webkit-text-stroke:1.4px rgba(44,61,38,0.16);
}
.about-visual .frame{ position:relative; z-index:1; aspect-ratio:4/5; box-shadow:var(--shadow); border-radius:var(--radius); overflow:hidden; }
.about-visual .ph{ width:100%; height:100%; background: linear-gradient(160deg,#A9B99A 0%, #7C8F6C 45%, #3E4E33 100%); position:relative;}
.about-visual .ph::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.32), transparent 45%), linear-gradient(0deg, rgba(24,34,18,0.3), transparent 60%); }
.about-text .eyebrow{ margin-bottom:16px; }
.about-text h2{ font-size:clamp(2rem,3.8vw,2.9rem); font-weight:500; margin-bottom:22px;}
.about-text p{ color:var(--ink-soft); margin-bottom:18px; }
.pillars{ display:flex; flex-wrap:wrap; gap:0; margin-top:38px; border-top:1px solid var(--line); }
.pillar{ flex:1 1 160px; padding:26px 26px 0 0; border-right:1px solid var(--line); }
.pillar:last-child{ border-right:none; }
.pillar h4{ font-size:1.02rem; font-weight:500; margin-bottom:6px;}
.pillar span{ font-size:0.8rem; color:var(--ink-soft); }
.pillar .swatch{ width:22px; height:22px; border-radius:50%; margin:18px 0 12px; }
@media (max-width:600px){ .pillar{ border-right:none; border-top:1px solid var(--line); padding:20px 0 0; flex:1 1 100%; } }

.quote-block{ margin-top:50px; padding:8px 0 8px 36px; border-left:3px solid var(--gold); }
.quote-block p{ font-family:'Cormorant Garamond'; font-style:italic; font-size:1.4rem; color:var(--forest-deep); }
.quote-block cite{ display:block; margin-top:14px; font-style:normal; font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }

/* ============ TIMELINE — vertical spine, alternating sides ============ */
.timeline{ margin-top:20px; position:relative; }
.timeline::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line); }
.t-row{ display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:36px 0; position:relative; }
.t-row .t-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px; position:relative; }
.t-row .yr{ font-family:'Cormorant Garamond'; font-size:1.6rem; font-weight:500; color:var(--gold); display:block; margin-bottom:8px; }
.t-row h4{ font-size:1.1rem; margin-bottom:8px; }
.t-row p{ color:var(--ink-soft); font-size:0.92rem; }
.t-row .dot{ position:absolute; top:44px; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:var(--forest); border:3px solid var(--cream); box-shadow:0 0 0 1px var(--line); z-index:2; }
.t-row:nth-child(odd) .t-card{ grid-column:1; }
.t-row:nth-child(even) .t-card{ grid-column:2; }
@media (max-width:760px){
  .timeline::before{ left:20px; }
  .t-row{ grid-template-columns:1fr; gap:0; padding-left:50px; }
  .t-row:nth-child(odd) .t-card, .t-row:nth-child(even) .t-card{ grid-column:1; }
  .t-row .dot{ left:20px; top:36px; }
}

/* ============ ROOMS — alternating editorial rows ============ */
.rooms-hero-section{ background:var(--cream); padding-top:70px; }
.room-row{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:30px; background:var(--paper); }
.room-row:nth-child(even){ direction:rtl; }
.room-row:nth-child(even) > *{ direction:ltr; }
.room-media{ position:relative; aspect-ratio:5/4; overflow:hidden; }
.room-media .ph{ width:100%; height:100%; transition:transform 0.8s ease; }
.room-row:hover .room-media .ph{ transform:scale(1.05); }
.room-tag{ position:absolute; top:18px; left:18px; background:var(--forest); color:var(--cream); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; padding:7px 16px; border-radius:2px; }
.room-body{ padding:40px 44px; display:flex; flex-direction:column; justify-content:center; }
.room-body h3{ color:var(--forest-deep); font-size:1.7rem; font-weight:500; margin-bottom:10px; }
.room-meta{ display:flex; gap:16px; margin-bottom:16px; font-size:0.76rem; letter-spacing:0.06em; color:var(--sage); text-transform:uppercase; }
.room-body p{ color:var(--ink-soft); font-size:0.94rem; margin-bottom:20px; }
.room-amenities{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.room-amenities span{ font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; border:1px solid var(--line); padding:5px 12px; border-radius:2px; color:var(--ink-soft); }
.room-foot{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:22px;}
.room-price{ font-family:'Cormorant Garamond'; font-size:1.5rem; font-weight:500; color:var(--forest-deep); }
.room-price small{ font-family:'Jost'; font-size:0.68rem; color:var(--ink-soft); display:block; text-transform:uppercase; letter-spacing:0.1em; }
.room-link{ font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; border-bottom:1px solid var(--forest); padding-bottom:3px; color:var(--forest); }
@media (max-width:800px){ .room-row, .room-row:nth-child(even){ grid-template-columns:1fr; direction:ltr; } .room-body{ padding:32px; } }

.rm1{ background:linear-gradient(160deg,#A9B99A,#5E7049); }
.rm2{ background:linear-gradient(160deg,#BE9A55,#8C6E33); }
.rm3{ background:linear-gradient(160deg,#7C8F6C,#3E4E33); }
.rm4{ background:linear-gradient(160deg,#C9A96C,#8C7038); }

/* ============ GALLERY — video feature ============ */
.video-frame{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--forest-deep); }
.video-frame video{ width:100%; display:block; max-height:640px; background:#000; }

/* ============ GALLERY — masonry columns ============ */
#gallery-main{ background:var(--cream); }
.gallery-grid{ column-count:3; column-gap:16px; }
.g-item{ position:relative; overflow:hidden; border-radius:var(--radius); margin-bottom:16px; break-inside:avoid; }
.g-item .ph{ width:100%; transition:transform 0.7s ease; display:block; }
.g-item:hover .ph{ transform:scale(1.06); }
.g-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
  background:linear-gradient(0deg, rgba(24,34,18,0.75), transparent);
  color:var(--cream); font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity 0.4s ease, transform 0.4s ease;
}
.g-item:hover .cap{ opacity:1; transform:translateY(0); }
.gi1 .ph{ height:420px; background:linear-gradient(160deg,#D9D3BB,#A9B99A); }
.gi2 .ph{ height:260px; background:linear-gradient(160deg,#7C8F6C,#3E4E33); }
.gi3 .ph{ height:320px; background:linear-gradient(160deg,#BE9A55,#8C6E33); }
.gi4 .ph{ height:380px; background:linear-gradient(160deg,#C9A96C,#8C7038); }
.gi5 .ph{ height:230px; background:linear-gradient(160deg,#A9B99A,#5E7049); }
.gi6 .ph{ height:340px; background:linear-gradient(160deg,#2C3D26,#182212); }
.gi7 .ph{ height:280px; background:linear-gradient(160deg,#B9AD86,#8A7D52); }
.gi8 .ph{ height:400px; background:linear-gradient(160deg,#5E7049,#33421F); }
.gi9 .ph{ height:250px; background:linear-gradient(160deg,#9E9169,#68613F); }
@media (max-width:900px){ .gallery-grid{ column-count:2; } }
@media (max-width:560px){ .gallery-grid{ column-count:1; } }

.gallery-filter{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.gallery-filter button{
  background:transparent; border:1px solid var(--line); padding:9px 22px; border-radius:2px;
  font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
  transition:0.3s;
}
.gallery-filter button.active, .gallery-filter button:hover{ background:var(--forest); color:var(--cream); border-color:var(--forest); }

/* ============ CONTACT — sticky visual left, stacked index list right ============ */
.contact-hero-section{ background:var(--cream); padding-top:70px; }
.contact-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:0; align-items:start; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.map-panel{
  position:sticky; top:0; align-self:stretch;
  min-height:640px; position:relative; overflow:hidden;
  background: radial-gradient(circle at 30% 30%, #7C8F6C, #182212 70%);
}
.map-panel svg{ position:absolute; inset:0; width:100%; height:100%; opacity:0.85; }
.map-pin{ position:absolute; top:46%; left:50%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; }
.map-pin .dot{ width:16px; height:16px; border-radius:50%; background:var(--gold); border:3px solid var(--cream); box-shadow:0 0 0 6px rgba(190,154,85,0.28); }
.map-pin .stem{ width:2px; height:20px; background:var(--gold); }
.map-label{ position:absolute; bottom:28px; left:28px; right:28px; background:rgba(24,34,18,0.85); border-radius:var(--radius); border:1px solid rgba(248,246,240,0.2); padding:20px 24px; }
.map-label h5{ color:var(--cream); font-size:1.05rem; font-family:'Cormorant Garamond'; margin-bottom:4px; }
.map-label span{ color:rgba(248,246,240,0.65); font-size:0.8rem; }

.contact-info{ padding:8px 0; }
.contact-card{
  padding:32px 42px; display:flex; gap:20px; align-items:flex-start;
  border-bottom:1px solid var(--line);
  transition:background 0.3s ease;
}
.contact-card:last-of-type{ border-bottom:none; }
.contact-card:hover{ background:var(--cream-deep); }
.contact-card .ic{ width:24px; height:24px; flex-shrink:0; margin-top:3px; }
.contact-card h4{ color:var(--forest-deep); font-size:1.05rem; font-weight:500; margin-bottom:6px; }
.contact-card p, .contact-card a{ color:var(--ink-soft); font-size:0.92rem; }
.contact-card a:hover{ color:var(--forest); }

.social-row{ display:flex; gap:14px; padding:0 42px 32px; }
.social-row a{ width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:0.3s; }
.social-row a:hover{ background:var(--forest); border-color:var(--forest); }
.social-row a svg path, .social-row a svg rect, .social-row a svg circle{ stroke:var(--forest); }
.social-row a:hover svg path, .social-row a:hover svg rect, .social-row a:hover svg circle{ stroke:var(--cream); }

.hours-strip{ padding:32px 42px 42px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.hours-strip .h-item h4{ color:var(--forest-deep); font-size:1rem; margin-bottom:8px; }
.hours-strip .h-item p{ color:var(--ink-soft); font-size:0.88rem; }
@media (max-width:940px){ .contact-layout{ grid-template-columns:1fr; } .map-panel{ position:relative; min-height:340px; } .hours-strip{ grid-template-columns:1fr; } }

/* ============ FOOTER — minimal, vertical rule columns ============ */
footer{ background:var(--forest-deep); color:rgba(248,246,240,0.62); padding:70px 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(248,246,240,0.12); }
.foot-brand{ display:flex; align-items:center; gap:14px; }
.foot-brand span{ font-family:'Cormorant Garamond'; font-size:1.4rem; color:var(--cream); }
.foot-brand-col p{ margin-top:18px; font-size:0.86rem; max-width:240px; }
.foot-social{ display:flex; gap:12px; margin-top:22px; }
.foot-social a{ width:36px; height:36px; border:1px solid rgba(248,246,240,0.22); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(248,246,240,0.75); transition:0.3s ease; }
.foot-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--forest-deep); }
.foot-social svg{ width:15px; height:15px; }
.foot-col h5{ font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--sage-soft); margin-bottom:16px; }
.foot-col a{ display:block; font-size:0.88rem; padding:5px 0; color:rgba(248,246,240,0.62); }
.foot-col a:hover{ color:var(--cream); }
.foot-bottom{ display:flex; justify-content:space-between; padding-top:28px; font-size:0.78rem; flex-wrap:wrap; gap:14px; }
.foot-credit{ display:block; padding-top:14px; margin-top:14px; border-top:1px solid rgba(248,246,240,0.1); font-size:0.76rem; color:rgba(248,246,240,0.5); text-align:center; }
.foot-credit a{ color:rgba(248,246,240,0.75); text-decoration:none; }
.foot-credit a:hover{ color:var(--cream); text-decoration:underline; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }

/* ============ WHATSAPP FLOAT ============ */
footer{ padding-bottom:110px; }
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:700;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.22); transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float:hover{ transform:scale(1.08); box-shadow:0 8px 22px rgba(0,0,0,0.28); }
.wa-float svg{ width:30px; height:30px; }
@media (max-width: 600px){
  footer{ padding-bottom:100px; }
  .wa-float{ right:16px; bottom:16px; width:52px; height:52px; }
  .wa-float svg{ width:26px; height:26px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .site-nav .nav-links{ display:none; }
  .site-nav .nav-top.nav-centered{ grid-template-columns:1fr auto; justify-content:space-between; }
  .site-nav .brand{ grid-column:1; justify-self:flex-start; }
  .burger{ grid-column:2; }
  .burger{ display:flex; }
  .hero .hero-mark-float{ margin-top:30px; }
  .about-grid{ grid-template-columns:1fr; gap:50px; }
  .about-visual::before{ display:none; }
  .brand-logo{ height:84px; }
  .nav-shell.scrolled .brand-logo{ height:52px; }
}
@media (max-width:760px){
  .nav-utility-info span:last-child, .nav-utility-info .tb-sep:last-of-type{ display:none; }
}
@media (max-width:560px){
  section{ padding:80px 0; }
  .foot-links{ gap:26px; }
  .nav-utility-in{ gap:10px; }
  .nav-utility-info{ font-size:0.66rem; gap:6px; }
  .nav-utility-social{ display:none; }
}