*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #F7F3EC; -webkit-font-smoothing: antialiased; cursor: none; }
section[id], footer { scroll-margin-top: 68px; }
[data-reveal] { opacity: 0; }
@keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes titleIn { 0% { opacity: 0; transform: translateY(32px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes scrollCue { 0%,100% { opacity: 0.4; transform: translateX(-50%) translateY(0); } 50% { opacity: 0.85; transform: translateX(-50%) translateY(8px); } }
input::placeholder, textarea::placeholder { color: rgba(253,250,245,0.35); font-family: 'DM Sans', sans-serif; }
input:focus, textarea:focus, select:focus { outline: none; }
::selection { background: rgba(196,149,106,0.28); color: #2C1F14; }

/* ── LUXURY SCROLLBAR ── */
::-webkit-scrollbar { width: 3px; background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(45,74,62,0.28); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(45,74,62,0.55); }

/* ── CUSTOM CURSOR ── */
.c-dot {
  position: fixed; width: 7px; height: 7px; background: #2C1F14;
  border-radius: 50%; pointer-events: none; z-index: 99999;
  left: 0; top: 0; transform: translate(-50%,-50%);
  transition: width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s, opacity 0.3s;
}
.c-ring {
  position: fixed; width: 38px; height: 38px;
  border: 1px solid rgba(44,31,20,0.28); border-radius: 50%;
  pointer-events: none; z-index: 99998; left: 0; top: 0;
  transform: translate(-50%,-50%);
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1), height 0.5s cubic-bezier(0.16,1,0.3,1), border-color 0.4s, opacity 0.3s;
}
.c-dot.hover { width: 4px; height: 4px; background: #2D4A3E; }
.c-ring.hover { width: 58px; height: 58px; border-color: rgba(45,74,62,0.2); }
.c-dot.hidden, .c-ring.hidden { opacity: 0; }
a, button, [style*="cursor:pointer"], [style*="cursor: pointer"] { cursor: none !important; }

/* ── SCROLL PROGRESS BAR ── */
.s-bar {
  position: fixed; top: 0; left: 0; height: 1.5px;
  background: linear-gradient(90deg, #C4956A 0%, #2D4A3E 50%, #C4956A 100%);
  background-size: 200% 100%;
  z-index: 99997; width: 0%;
  animation: barShimmer 3s linear infinite;
}
@keyframes barShimmer { 0%{background-position:0% 0} 100%{background-position:200% 0} }

/* ── GRAIN TEXTURE ── */
.grain-wrap {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 99996; overflow: hidden;
  mix-blend-mode: multiply; opacity: 0.45;
}
.grain-wrap::after {
  content: '';
  position: absolute; inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  animation: grainAnim 0.9s steps(3) infinite;
}
@keyframes grainAnim {
  0%  { transform: translate(0,0); }
  25% { transform: translate(-3%,-4%); }
  50% { transform: translate(4%,2%); }
  75% { transform: translate(-2%,5%); }
  100%{ transform: translate(3%,-2%); }
}

/* ── MARQUEE ── */
.marquee-outer {
  overflow: hidden; background: #2D4A3E; padding: 18px 0;
  border-top: 1px solid rgba(253,250,245,0.06);
  border-bottom: 1px solid rgba(253,250,245,0.06);
}
.marquee-inner { display: flex; width: max-content; animation: marqueeAnim 44s linear infinite; }
.marquee-inner:hover { animation-play-state: paused; }
.marquee-item {
  font-family: 'DM Sans', sans-serif; font-size: 9px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(253,250,245,0.45); white-space: nowrap; padding: 0 32px;
}
.marquee-item.serif {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 14px; letter-spacing: 0.08em;
  text-transform: none; color: rgba(253,250,245,0.7);
}
@keyframes marqueeAnim { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── FLOATING PARTICLES ── */
.particle {
  position: absolute; border-radius: 50%;
  background: rgba(253,250,245,0.7); pointer-events: none;
  animation: floatUp var(--dur,9s) ease-in-out infinite var(--delay,0s);
}
@keyframes floatUp {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  12%  { opacity: 0.88; }
  80%  { opacity: 0.3; }
  100% { transform: translateY(-72vh) translateX(var(--dx,20px)) scale(0.15); opacity: 0; }
}

/* ── LIFT CARDS ── */
/* VanillaTilt handles 3D transform on hover; only CSS box-shadow here to avoid conflict */
.lift-card {
  transition: box-shadow 0.5s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.lift-card:hover {
  box-shadow: 0 24px 56px rgba(44,31,20,0.1), 0 4px 12px rgba(44,31,20,0.05);
}
/* Fallback for touch devices without VanillaTilt */
@media (hover: none) {
  .lift-card { will-change: auto; }
}

/* ── REVIEW CARDS — decorative opening quote mark ── */
#reviews .lift-card {
  position: relative;
  overflow: hidden;
}
#reviews .lift-card::before {
  content: '\201C';
  font-family: 'Cormorant Garamond', serif;
  font-size: 100px;
  line-height: 1;
  color: rgba(196,149,106,0.14);
  position: absolute;
  top: 8px;
  left: 20px;
  pointer-events: none;
  user-select: none;
  font-weight: 400;
}

/* ── STORY HOST QUOTE — editorial style ── */
#story .lift-card {
  border-left: none !important;
  border-top: 1px solid rgba(45,74,62,0.14) !important;
  border-bottom: 1px solid rgba(45,74,62,0.14) !important;
  background: transparent !important;
  padding: 44px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  will-change: auto !important;
}
#story .lift-card:hover { box-shadow: none !important; }

/* ── FOOTER LINK HOVER UNDERLINE ── */
footer a { position: relative; display: inline-block; }
footer a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  opacity: 0.5;
  transition: width 0.38s cubic-bezier(0.16,1,0.3,1);
}
footer a:hover::after { width: 100%; }

/* ── SECTION DEPTH NUMBERS — very faint background counters ── */
#story    { position: relative; }
#amenities { position: relative; }
#experience { position: relative; }
#reviews  { position: relative; }
#story::after, #amenities::after, #experience::after, #reviews::after {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(80px, 16vw, 180px);
  font-weight: 300;
  line-height: 1;
  position: absolute;
  top: 56px; right: 20px;
  pointer-events: none; user-select: none;
  color: rgba(44,31,20,0.04);
  letter-spacing: -0.02em;
}
#story::after    { content: '01'; }
#amenities::after { content: '02'; }
#experience::after { content: '03'; }
#reviews::after  { content: '04'; }

/* ── AMENITY ROW HOVER ── */
.amen-item {
  transition: background 0.3s, padding-left 0.35s cubic-bezier(0.16,1,0.3,1);
  border-radius: 2px;
}
.amen-item:hover { background: rgba(45,74,62,0.04); padding-left: 8px !important; }

/* ── MAP PULSE ── */
@keyframes mapPulse {
  0%,100% { r: 15; opacity: 0.22; }
  50%      { r: 24; opacity: 0; }
}

/* ── ROOM CHAPTERS ── */
.rchap { position:relative; }
.rstick { position:sticky;top:0;height:100vh;overflow:hidden; }
.rscene { position:absolute;inset:0;transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1);display:flex;align-items:flex-end; }
.rscene.roff { opacity:0;pointer-events:none;transform:scale(1.03); }
.rscene.ron { opacity:1;transform:scale(1); }
.rpanel { padding:40px 40px 56px;max-width:520px; }
.rpip { display:flex;gap:6px;margin-bottom:20px; }
.rpip span { width:18px;height:1.5px;background:rgba(253,250,245,0.3);border-radius:1px;transition:background 0.4s,width 0.4s; }
.rpip span.a { background:#FDFAF5;width:30px; }
.rnav { display:flex;gap:10px;margin-top:18px; }
.rnbtn { background:rgba(253,250,245,0.12);border:1px solid rgba(253,250,245,0.18);color:#FDFAF5;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;padding:10px 20px;cursor:pointer;border-radius:1px;backdrop-filter:blur(6px);transition:background 0.3s; }
.rnbtn:hover { background:rgba(253,250,245,0.22); }
@media(max-width:600px){ .rpanel{padding:28px 24px 44px} }

/* ── HERO TITLE CENTERING ── */
/* Once Splitting.js adds .splitting, switch to flex so justify-content:center
   is geometrically perfect — no letter-spacing trailing-space bias */
.d-hero-title.splitting {
  display: flex !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
}
.d-hero-title.splitting .word { display: flex; align-items: baseline; }
.d-hero-title.splitting .char { margin-right: 0.22em; letter-spacing: 0; }
.d-hero-title.splitting .char:last-child { margin-right: 0; }
@media (min-width: 768px) {
  .d-hero-title.splitting .char { margin-right: 0.32em; }
}
#hero-content > p,
#hero-content > div { animation: none; opacity: 0; }

/* Desktop overrides */
@media (min-width: 768px) {
  .d-nav-links { display: flex !important; }
  .d-nav-burger { display: none !important; }
  .d-wide { max-width: 1100px !important; }
  .d-px { padding-left: 64px !important; padding-right: 64px !important; }
  .d-space-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .d-reviews-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 20px !important; }
  .d-amen-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; }
  .d-book-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 80px !important; align-items: start !important; }
  .d-jdh-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .d-details-grid { grid-template-columns: 1fr 1fr 1fr 1fr !important; }
  .d-hero-title { font-size: clamp(72px, 9vw, 140px) !important; letter-spacing: 0.32em !important; white-space: nowrap !important; }
  .d-section-py { padding-top: 120px !important; padding-bottom: 120px !important; }
  .d-h2 { font-size: clamp(40px, 4.5vw, 68px) !important; }
  .d-room-img { padding-top: 70% !important; }
  .d-map { height: 420px !important; }
  /* Amenities: 2 columns (more spacious than 3) with gap instead of alternating padding */
  .d-amen-grid { grid-template-columns: 1fr 1fr !important; column-gap: 48px !important; }
  .d-amen-grid .amen-item { padding: 22px 0 !important; }
}
@media (min-width: 1200px) {
  .d-wide { max-width: 1280px !important; }
}
@media (hover: none) {
  .c-dot, .c-ring { display: none; }
  body { cursor: auto; }
  a, button { cursor: auto !important; }
}

/* ── BOOK FORM — MOBILE FIXES ── */
@media (max-width: 767px) {
  /* Stack date inputs vertically — side-by-side is too cramped on phones */
  .date-pair { grid-template-columns: 1fr !important; }

  /* iOS Safari auto-zooms inputs with font-size < 16px — prevent that */
  #book input,
  #book textarea,
  #book select { font-size: 16px !important; padding: 14px 15px !important; }

  /* Give the book section more breathing room */
  #book { padding: 72px 0 !important; }

  /* Slightly more compact form gap on small screens */
  #book form { gap: 11px !important; }

  /* Full-width submit button on mobile */
  #book button[type="submit"] { width: 100%; }
}