/* RESRV homepage styles — scoped to front page only */

/* ==========================================================
   RESRV TRAVEL — Modern travel concierge
   Palette: cream #F7F1E8 / taupe #B8A99A / charcoal #333333
   ========================================================== */

:root{
  --cream:#f7f1e8;
  --cream-2:#efe7d8;
  --charcoal:#333333;
  --charcoal-90:rgba(var(--charcoal-rgb),.9);
  --charcoal-70:rgba(var(--charcoal-rgb),.7);
  --charcoal-30:rgba(var(--charcoal-rgb),.3);
  --taupe:#b8a99a;
  --taupe-light:#e5ddd3;
  --taupe-dark:#9a8b7d;
  --muted:#7a7268;
  --muted-warm:#a89e92;
  --white:#ffffff;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --container:1440px;
  --pad-x:clamp(20px, 5vw, 80px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.4,0,.2,1);
  /* RGB channels of the brand colours, so every translucent border, scrim and
     overlay in the stylesheets follows the Customizer palette too. These are
     re-declared with the chosen colours by inc/customizer.php. */
  --cream-rgb:247,241,232;
  --cream-2-rgb:239,231,216;
  --charcoal-rgb:51,51,51;
  --taupe-rgb:184,169,154;
  --espresso-rgb:34,26,20;
}

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

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
}

html.lenis,html.lenis body{height:auto}

.lenis.lenis-smooth{scroll-behavior:auto !important}

.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  color:var(--charcoal);
  background:var(--cream);
  overflow-x:hidden;
  min-height:100vh;
  min-height:100svh;
  -webkit-tap-highlight-color:transparent;
}

img,video{max-width:100%; display:block; height:auto}

a{
  color:inherit; text-decoration:none;
  transition:color .15s ease, opacity .2s ease;
  -webkit-tap-highlight-color:rgba(var(--taupe-rgb),.2);
}

/* === Accessibility — visible focus ring for keyboard users === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--taupe);
  outline-offset:3px;
  border-radius:2px;
}


button,input,select,textarea{font:inherit; color:inherit}

button{
  border:none; background:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}



select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-opacity='.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0 center;
  padding-right:24px !important;
}

input,textarea{-webkit-appearance:none; appearance:none; border-radius:0}

/* ============== TYPOGRAPHY ============== */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:0;
  text-wrap:balance;
  color:var(--charcoal);
}

h1{font-size:clamp(40px,8vw,92px); line-height:1.05}

h2{font-size:clamp(32px,4.5vw,56px); line-height:1.15}

h3{font-size:clamp(22px,2vw,28px); line-height:1.3}

h4{font-size:clamp(18px,1.4vw,22px); line-height:1.3}

p{font-size:16px; line-height:1.7}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--pad-x)}

.eyebrow{
  font-family:var(--sans);
  font-size:12px; font-weight:500;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--taupe-dark);
  display:inline-flex; align-items:center; gap:10px;
}

/* Dash mark intentionally removed site-wide per design update. */

/* ============== REVEAL ANIMATIONS ============== */

.split-words .word{
  display:inline-block;
  margin-right:.25em;
  -webkit-filter:blur(8px); filter:blur(8px);
  opacity:0;
  color:var(--muted-warm);
  transition:filter .9s var(--ease), -webkit-filter .9s var(--ease),
             opacity .9s var(--ease), color .9s var(--ease);
}

.split-words.in .word{
  -webkit-filter:blur(0); filter:blur(0);
  opacity:1; color:inherit;
}

/* No trailing gap after the final word so centered headlines stay centered. */
.split-words .word:last-child{margin-right:0}

.reveal{opacity:0; transform:translateY(50px); transition:opacity 1s var(--ease), transform 1s var(--ease)}

.reveal.in{opacity:1; transform:translateY(0)}

.reveal-big{opacity:0; transform:translateY(150px); transition:opacity 1.4s var(--ease), transform 1.4s var(--ease)}

.reveal-big.in{opacity:1; transform:translateY(0)}

.reveal-stagger > *{opacity:0; transform:translateY(50px); transition:opacity .9s var(--ease), transform .9s var(--ease)}

.reveal-stagger.in > *{opacity:1; transform:translateY(0)}

.reveal-stagger.in > *:nth-child(1){transition-delay:0s}

.reveal-stagger.in > *:nth-child(2){transition-delay:.10s}

.reveal-stagger.in > *:nth-child(3){transition-delay:.20s}

.reveal-stagger.in > *:nth-child(4){transition-delay:.30s}

.reveal-stagger.in > *:nth-child(5){transition-delay:.40s}

.reveal-stagger.in > *:nth-child(6){transition-delay:.50s}

/* ============== PRELOADER ============== */

.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--charcoal);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:18px;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}

.preloader.done{opacity:0; visibility:hidden; pointer-events:none}

.preloader-logo{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:36px;
  letter-spacing:10px; color:var(--cream); font-weight:400;
  opacity:0; animation:preFade 1.4s .2s var(--ease) forwards;
}

/* Uploaded logo on the loading screen. max-height comes from the Customizer. */
.preloader-logo .preloader-logo-img{
  width:auto; height:auto;
  max-width:min(78vw, 520px);
  display:block;
}

@media (max-width:809px){
  .preloader-logo .preloader-logo-img{max-width:62vw}
}

.preloader-bar{
  width:120px; height:1px;
  background:rgba(var(--cream-rgb),.25);
  position:relative; overflow:hidden;
  opacity:0; animation:preFade 1.4s .4s var(--ease) forwards;
}

.preloader-bar::after{
  content:""; position:absolute; left:-30%; top:0;
  width:30%; height:100%;
  background:var(--taupe);
  animation:loadBar 1.6s infinite var(--ease);
}

@keyframes preFade{
  to{opacity:1}
}

@keyframes loadBar{
  to{ left:100% }
}

/* ============== NAV — 3-zone editorial layout ============== */

/* LEFT: RESRV Your Experience CTA */

/* CENTER: RESRV logo */

/* RIGHT: MENU toggle — visible at all scroll positions */

/* ============== FULL-SCREEN MENU OVERLAY (cream, centered editorial pattern) ============== */

/* Top-left action bar — Inquire CTA + phone */

/* Centered content column */

/* Centered RESRV brand mark at top of content */

/* Vertical centered nav — clean, no numbers, no italic */

/* Centered social icons at bottom */

/* When menu is open, the menu-toggle (close button) needs to stay readable on cream bg */

/* ============== FIXED HERO with 3-variant slider ============== */

.hero-fixed{
  position:fixed; top:0; left:0; right:0;
  height:100vh; height:100svh;
  z-index:1;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--cream);
  overflow:hidden;
}

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

.hero-slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1.6s var(--ease-out);
}

.hero-slide.active{opacity:1}

.hero-slide img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1.05);
  transition:transform 8s ease;
}

.hero-slide.active img{transform:scale(1)}

.hero-slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--charcoal-rgb),.35) 0%, rgba(var(--charcoal-rgb),.20) 40%, rgba(var(--charcoal-rgb),.65) 100%);
}

.hero-content{
  position:relative; z-index:2;
  max-width:1100px; padding:0 var(--pad-x);
  will-change:transform, opacity;
}

.hero-logo{
  display:flex; justify-content:center; align-items:center;
  margin-bottom:40px;
  opacity:0; animation:fadeUp 1.2s .4s var(--ease) forwards;
}

.hero-logo-img{
  max-height:clamp(56px, 8vw, 108px);
  width:auto;
  /* Site Identity logos are usually dark; the hero background is dark too,
     so invert by default. Users can opt out by adding 'no-invert' class. */
  -webkit-filter:brightness(0) invert(1);
  filter:brightness(0) invert(1);
}

.hero-logo-img.no-invert{
  -webkit-filter:none;
  filter:none;
}

.hero-logo-wordmark{
  font-family:var(--serif);
  font-size:clamp(28px, 3.4vw, 44px);
  letter-spacing:.42em;
  color:var(--cream);
  font-weight:400;
  text-indent:.42em;
  text-transform:uppercase;
}

/* Legacy class — left in so old caches don't break the layout if served stale */
.hero-eyebrow{display:none}

.hero-headline{
  margin-bottom:0;
  min-height:clamp(110px, 12vw, 180px);
  display:flex; align-items:center; justify-content:center;
}

.hero-headline h1{
  /* Larger, upright per design update */
  font-size:clamp(48px, 7.5vw, 104px) !important;
  line-height:1.05;
  color:var(--cream);
  font-style:normal;
  font-weight:400;
  margin:0;
  text-wrap:balance;
  max-width:1100px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  animation:fadeUp 1.4s .6s var(--ease) forwards;
}

.hero-headline h1.fading{
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}

.hero-headline h1.entering{
  opacity:0;
  transform:translateY(20px);
  animation:none;
}

.hero-headline h1.entered{
  opacity:1;
  transform:translateY(0);
  animation:none;
}

.hero-subtitle{
  color:var(--cream);
  font-size:clamp(15px, 1.4vw, 18px);
  line-height:1.7;
  max-width:560px;
  margin:24px auto 0;
  text-wrap:balance;
  opacity:0; animation:fadeUp 1.4s .85s var(--ease) forwards;
}

.hero-cta{
  display:flex; flex-wrap:wrap; gap:16px;
  justify-content:center;
  margin-top:36px;
  opacity:0; animation:fadeUp 1.4s 1.05s var(--ease) forwards;
}

/* Pill shape to match the header + section CTAs */
.hero-cta .btn{border-radius:999px}

/* Design update: the hero shows the headline only — the supporting paragraph
   and the CTA buttons are hidden. Both remain editable in the admin, so
   deleting these two lines brings them straight back. */
.hero-subtitle,
.hero-cta{display:none}

@media (max-width:480px){
  .hero-cta{flex-direction:column; align-items:center; gap:12px}
  .hero-cta .btn{width:100%; max-width:300px; justify-content:center}
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(30px)}
  to{opacity:1; transform:translateY(0)}
}

.btn{
  padding:16px 32px; font-size:13px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase;
  border:1px solid;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  display:inline-flex; align-items:center; gap:10px;
  cursor:pointer; min-height:48px;
  white-space:nowrap;
}

.btn:hover,
.btn:focus-visible{transform:translateY(-1px)}

.btn:active{transform:translateY(0)}

.btn-primary{background:var(--charcoal); color:var(--cream); border-color:var(--charcoal)}

.btn-primary:hover{background:var(--cream); color:var(--charcoal)}

.btn-secondary{background:transparent; color:var(--cream); border-color:var(--cream)}

.btn-secondary:hover{background:var(--cream); color:var(--charcoal)}

.btn-cream-outline{background:transparent; color:var(--charcoal); border-color:var(--charcoal)}

.btn-cream-outline:hover{background:var(--charcoal); color:var(--cream)}

.btn-taupe{background:var(--taupe); color:var(--charcoal); border-color:var(--taupe)}

.btn-taupe:hover{background:var(--taupe-dark); border-color:var(--taupe-dark); color:var(--cream)}

.hero-spacer{height:100vh; height:100svh; pointer-events:none}

/* ============== SCROLL CONTENT (above fixed hero) ============== */

.scroll-content{position:relative; z-index:2; background:var(--cream)}

section{padding:clamp(48px,6vw,96px) 0; background:var(--cream)}

.section-dark{background:var(--charcoal); color:var(--cream)}

.section-dark p{color:var(--cream); opacity:.85}

.section-dark .eyebrow{color:var(--taupe-light)}

.section-dark h2{color:var(--cream)}

.section-cream{background:var(--cream-2)}

/* ============== ABOUT STATEMENT ============== */

.about-statement{
  text-align:center;
  /* Trim the lower padding so the transition into the gallery is tighter. */
  padding:clamp(48px, 6.5vw, 108px) 0 clamp(24px, 3vw, 48px);
}

.about-statement .container{max-width:980px}

.about-statement .eyebrow{margin-bottom:20px; justify-content:center}

/* Flanking em-dashes on both sides of the About eyebrow ("— About RESRV —"). */
.about-statement .eyebrow::before,
.about-statement .eyebrow::after{
  content:"\2014";
  color:var(--taupe-dark);
  font-weight:400;
}

.about-statement h2{
  /* Upright per design update — italics retained on the tagline below */
  font-style:normal;
  font-size:clamp(28px,4vw,48px);
  line-height:1.3; max-width:880px;
  margin:0 auto 22px;
}

.about-statement .tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(18px,2vw,22px);
  color:var(--taupe-dark);
  max-width:560px;
  margin:0 auto;
  line-height:1.6;
}

/* ============== GALLERY — editorial magazine mosaic (true mixed sizes) ============== */

.gallery{
  /* Lighter lower padding so the gallery flows into offerings without a gap. */
  padding:clamp(28px,4vw,60px) 0 clamp(16px,2vw,32px);
  background:var(--cream);
}

/* Two-row editorial mosaic (up to 12 images). Columns auto-create and size
   themselves; tall feature tiles span both rows. JS assigns features by count. */
.gallery-grid{
  display:grid;
  /* Fixed 2 rows; columns auto-create and size themselves equally. Tall
     "feature" tiles span both rows, the rest stack two-high — JS assigns which
     tiles are features based on the image count, so the band is always 2 rows. */
  grid-auto-flow:column;
  grid-auto-columns:minmax(0, 1fr);
  grid-template-rows:repeat(2, clamp(160px, 19vw, 260px));
  gap:clamp(10px, 1.4vw, 18px);
}

.gallery-item{grid-row:span 1}
.gallery-item.is-feature{grid-row:span 2}

/* 1-2 images: a single full-width row (no empty second row). */
.gallery-grid[data-count="1"],
.gallery-grid[data-count="2"]{
  grid-template-rows:clamp(240px, 32vw, 380px);
}

.gallery-item{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  /* Subtle entry rise for each tile when revealed by IntersectionObserver */
  background:rgba(var(--taupe-rgb),.12);
}

.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.4s var(--ease), -webkit-filter .5s ease, filter .5s ease;
}

.gallery-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(var(--espresso-rgb),.12) 100%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}

.gallery-item:hover img,
.gallery-item:focus-within img{
  transform:scale(1.06);
  -webkit-filter:brightness(.96); filter:brightness(.96);
}

.gallery-item:hover::after,
.gallery-item:focus-within::after{opacity:1}

.gallery-item:focus-visible{outline:2px solid var(--taupe-dark); outline-offset:3px}

/* --- Captions laid over the photo -------------------------------------
   Always legible (a scrim carries the type), with a small lift on hover.
   The scrim only exists on tiles that actually have a caption. */

.gallery-item{margin:0}

.gallery-item.has-caption::before{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:62%;
  background:linear-gradient(180deg, transparent 0%, rgba(var(--espresso-rgb),.60) 100%);
  opacity:.9;
  transition:opacity .45s ease;
  pointer-events:none;
  z-index:1;
}

.gallery-item.has-caption:hover::before,
.gallery-item.has-caption:focus-within::before{opacity:1}

.gallery-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding:clamp(14px, 1.6vw, 22px);
  color:var(--cream);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(15px, 1.35vw, 21px);
  line-height:1.25;
  text-wrap:balance;
  pointer-events:none;
  transform:translateY(4px);
  transition:transform .5s var(--ease);
}

.gallery-item:hover .gallery-caption,
.gallery-item:focus-within .gallery-caption{transform:translateY(0)}

/* Hairline above the caption, drawn from the left edge of the text. */
.gallery-caption span{
  display:inline-block;
  padding-top:10px;
  border-top:1px solid rgba(var(--cream-rgb),.55);
}

@media (max-width:809px){
  .gallery-caption{font-size:14px; padding:12px}
  .gallery-caption span{padding-top:8px}
}

@media (prefers-reduced-motion: reduce){
  .gallery-caption{transform:none; transition:none}
}

/* ============== GALLERY LIGHTBOX ============== */
.resrv-lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 5vw, 64px);
  background:rgba(var(--espresso-rgb),.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.resrv-lightbox.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .35s var(--ease);
}
.rl-stage{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:min(1100px, 92vw); max-height:86vh;
}
.rl-img{
  max-width:100%; max-height:78vh; width:auto; height:auto;
  object-fit:contain; background:var(--cream);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.rl-caption{
  font-family:var(--sans); font-size:12px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--cream); opacity:.8; text-align:center;
}
.rl-close, .rl-prev, .rl-next{
  position:fixed; background:none; border:0; color:var(--cream); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  opacity:.8; transition:opacity .25s ease, transform .25s ease;
}
.rl-close:hover, .rl-prev:hover, .rl-next:hover{opacity:1}
.rl-close:focus-visible, .rl-prev:focus-visible, .rl-next:focus-visible{
  opacity:1; outline:2px solid var(--cream); outline-offset:4px;
}
.rl-close{top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); font-size:40px; width:48px; height:48px}
.rl-prev, .rl-next{top:50%; transform:translateY(-50%); font-size:56px; width:56px; height:80px}
.rl-prev{left:clamp(8px,2vw,28px)}
.rl-next{right:clamp(8px,2vw,28px)}
.rl-prev:hover{transform:translateY(-50%) translateX(-3px)}
.rl-next:hover{transform:translateY(-50%) translateX(3px)}
.rl-counter{
  position:fixed; bottom:clamp(14px,3vw,28px); left:50%; transform:translateX(-50%);
  font-family:var(--sans); font-size:12px; letter-spacing:2px; color:var(--cream); opacity:.7;
}
@media (max-width:809px){
  .rl-prev, .rl-next{font-size:40px; width:40px; height:60px}
  .rl-close{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .resrv-lightbox{transition:none}
}

/* Tablet — slightly shorter rows; still the 2-row mosaic. */
@media (max-width:1199px){
  .gallery-grid{
    grid-template-rows:repeat(2, clamp(140px, 19vw, 210px));
  }
}

/* Phones — two columns; images flow into as many rows as needed. */
@media (max-width:809px){
  .gallery-grid{
    grid-auto-flow:row;
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:none;
    grid-auto-rows:clamp(140px, 38vw, 200px);
    gap:8px;
  }
  /* On phones, drop the tall-feature spans for a clean 2-column flow. */
  .gallery-item.is-feature{grid-row:span 1; grid-column:span 1}
  .gallery-grid[data-count="1"]{grid-template-columns:1fr}
}

/* ============== OFFERINGS / SERVICES ============== */

.offerings-header{
  text-align:center;
  max-width:780px;
  margin:0 auto clamp(28px, 4vw, 48px);
}

.offerings-header .eyebrow{margin-bottom:16px; justify-content:center}

/* Flanking em-dashes on both sides of the Offerings eyebrow ("— Our Offerings —"). */
.offerings-header .eyebrow::before,
.offerings-header .eyebrow::after{
  content:"\2014";
  color:var(--taupe-dark);
  font-weight:400;
}

.offerings-header h2{margin-bottom:16px}

.offerings-header p{
  color:var(--muted);
  max-width:720px;
  margin:0 auto;
  line-height:1.75;
}

.offerings-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,2.6vw,40px) clamp(28px,3vw,44px);
}

.offering-card{
  padding:8px 0;
  border-top:1px solid rgba(var(--charcoal-rgb),.15);
  padding-top:22px;
  transition:border-color .3s ease;
}

.offering-card:hover{border-color:var(--taupe-dark)}

/* Offering numbers removed per design update */
.offering-num{display:none}

.offering-card h3{
  font-size:22px; font-weight:400;
  margin-bottom:14px;
}

.offering-card p{
  color:var(--muted); font-size:15px;
  line-height:1.7;
}

/* ============== STORY — single immersive crossfade band (no sticky pin) ============== */

.story-pin{
  position:relative;
  /* One viewport tall — fast to scroll past, no scroll lag */
  height:clamp(75vh, 88vh, 100vh);
  padding:0;
  background:#221a14;
  isolation:isolate;
  overflow:hidden;
}

/* Both top and bottom bleeds removed — the transition photos show clean,
   hard edges (no faded/blurred bands top or bottom). */

.story-pin .grain{
  position:absolute; inset:0; z-index:4;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='1'/></svg>");
  background-size:240px;
}

/* The parallax stage — extends slightly beyond the section so the image can translate */
.story-stage{
  position:absolute;
  inset:-10% 0;
  z-index:1;
  will-change:transform;
}

.story-img{
  position:absolute; inset:0;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.4s var(--ease), transform 6s var(--ease);
}

.story-img.active{
  opacity:1;
  transform:scale(1);
}

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

/* Readability overlay. Clean at the very top so the photo edge reads sharp
   (no dark haze/"blur" band), building to a gentle darkening toward the
   centre/bottom so the centered headline always stays legible. */
.story-veil{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(var(--espresso-rgb),.08) 0%,
    rgba(var(--espresso-rgb),.14) 24%,
    rgba(var(--espresso-rgb),.38) 56%,
    rgba(var(--espresso-rgb),.56) 100%);
}

/* Belt-and-braces: guarantee no blur filter ever lands on the story photos. */
.story-stage,
.story-img,
.story-img img{ -webkit-filter:none; filter:none; }

/* Text layer — crossfades in sync with the image */
.story-texts{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--pad-x);
  pointer-events:none;
}

.story-text{
  position:absolute;
  max-width:880px;
  text-align:center;
  color:var(--cream);
  opacity:0;
  transform:translateY(16px);
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
}

.story-text.active{
  opacity:1;
  transform:translateY(0);
}

.story-text .eyebrow{
  color:var(--taupe-light);
  justify-content:center;
  margin-bottom:clamp(20px, 2vw, 32px);
}

.story-text h2{
  color:var(--cream);
  font-weight:400;
  font-style:normal;
  font-size:clamp(36px, 6vw, 84px);
  line-height:1.08;
  text-wrap:balance;
}

/* Pagination dots */
.story-dots{
  position:absolute;
  bottom:clamp(28px, 3vw, 48px);
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex; gap:10px;
  align-items:center;
}

.story-dots button{
  width:34px; height:32px;
  padding:0; margin:0;
  background:transparent; border:none;
  cursor:pointer;
  position:relative;
  display:inline-flex; align-items:center;
}

.story-dots button::before{
  content:"";
  display:block;
  width:34px; height:2px;
  background:rgba(var(--cream-rgb),.28);
  transition:background .35s ease, width .35s ease;
}

.story-dots button:hover::before{background:rgba(var(--cream-rgb),.55)}

.story-dots button.active::before{
  background:var(--taupe);
  width:48px;
}

/* Reduced motion — disable transforms/transitions */
@media (prefers-reduced-motion: reduce){
  .story-img,
  .story-text{transition:none}
  .story-stage{transform:none !important}
}

/* Legacy .scene-* classes hidden as safety net (in case stale markup is cached) */
.scene,
.scene-bg,
.scene-text,
.scene-nav{display:none}

/* ============== PROCESS ============== */

.process-header{text-align:center; max-width:760px; margin:0 auto 28px}

.process-header .eyebrow{justify-content:center; margin-bottom:16px}

/* Flanking em-dashes on both sides of the Process eyebrow ("— Our Process —"). */
.process-header .eyebrow::before,
.process-header .eyebrow::after{
  content:"\2014";
  color:var(--taupe-dark);
  font-weight:400;
}

.process-header h2{margin-bottom:16px}

.process-header .process-intro{
  color:var(--muted);
  font-size:16px; line-height:1.7;
  max-width:680px; margin:0 auto;
}

.process-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.process-step{text-align:center; padding:16px 16px}

.process-num{
  font-family:var(--serif);
  font-size:clamp(56px,7vw,88px);
  font-weight:400;
  color:var(--taupe);
  line-height:1; margin-bottom:16px;
  font-style:italic;
}

.process-step h3{
  font-size:24px; font-weight:400;
  margin-bottom:12px;
}

.process-step p{color:var(--muted); font-size:15px}

.process-cta{text-align:center; margin-top:clamp(16px,2vw,28px)}

/* Match the header CTA: pill shape + charcoal/cream hover (not taupe-dark). */
.process-cta .btn{border-radius:999px}
.process-cta .btn:hover,
.process-cta .btn:focus-visible{
  background:var(--charcoal); color:var(--cream); border-color:var(--charcoal);
}

/* ============== DESTINATIONS — editorial index (numbered list + sticky image) ============== */

.destinations{background:var(--taupe)}

.destinations-header{text-align:center; max-width:680px; margin:0 auto clamp(28px,4vw,48px)}

.destinations-header .eyebrow{justify-content:center; margin-bottom:16px}

/* Eyebrow in bone (light taupe) with flanking em-dash lines to match the
   other section eyebrows ("— Featured Destinations —"). */
.destinations .eyebrow{color:var(--taupe-light)}

.destinations-header .eyebrow::before,
.destinations-header .eyebrow::after{
  content:"\2014";
  color:var(--taupe-light);
  font-weight:400;
}

.destinations-header h2{margin-bottom:14px}

.destinations-intro{
  color:var(--taupe-light);
  font-size:16px; line-height:1.7;
  max-width:680px; margin:0 auto;
  opacity:.92;
}

.dest-index{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:clamp(48px, 6vw, 96px);
  align-items:start;
}

/* === Left column: numbered list === */

.dest-list{
  list-style:none;
  padding:0; margin:0;
  border-top:1px solid rgba(var(--espresso-rgb),.22);
}

.dest-row{
  position:relative;
  border-bottom:1px solid rgba(var(--espresso-rgb),.22);
  padding:clamp(16px,2vw,26px) 0;
  transition:padding .4s ease;
}

.dest-anchor{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:clamp(20px,2.4vw,36px);
  color:inherit;
  text-decoration:none;
  /* Presentational only — hovering a row swaps the sticky image, but the
     destination name is not a link, so it must not look like one. */
  cursor:default;
}

.dest-num{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(18px, 1.4vw, 22px);
  color:var(--taupe-dark);
  letter-spacing:1px;
  min-width:32px;
}

.dest-name{
  font-family:var(--serif);
  font-weight:400;
  font-size:22px;
  line-height:1.1;
  color:var(--charcoal);
  transition:color .35s ease, transform .35s ease;
  text-wrap:balance;
}

.dest-arrow{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:48px; height:48px;
  color:var(--charcoal);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .35s ease, transform .35s ease, color .35s ease;
}

.dest-row.active .dest-num,
.dest-row:hover .dest-num,
.dest-row:focus-within .dest-num{color:var(--charcoal)}

.dest-row.active .dest-name,
.dest-row:hover .dest-name,
.dest-row:focus-within .dest-name{
  color:var(--espresso);
  transform:translateX(6px);
}

.dest-row.active .dest-arrow,
.dest-row:hover .dest-arrow,
.dest-row:focus-within .dest-arrow{
  opacity:1;
  transform:translateX(0);
  color:var(--espresso);
}

.dest-text{
  font-size:14px;
  line-height:1.65;
  color:var(--taupe-light);
  max-width:540px;
  margin:8px 0 0 0;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .4s ease, max-height .5s ease, margin-top .4s ease;
}

.dest-row.active .dest-text,
.dest-row:hover .dest-text,
.dest-row:focus-within .dest-text{
  opacity:1;
  max-height:160px;
  margin-top:12px;
}

/* Inline image is desktop-hidden — only the sticky stage paints the photo */
.dest-inline-img{display:none}

/* === Right column: sticky image stage === */

.dest-stage{
  position:-webkit-sticky; position:sticky;
  top:clamp(80px,9vw,120px);
}

.dest-frame{
  position:relative;
  aspect-ratio:4/5;
  width:100%;
 
  margin-left:auto;
  overflow:hidden;
  background:rgba(var(--cream-rgb),.30);
  box-shadow:0 30px 80px -30px rgba(var(--espresso-rgb),.45);
}

.dest-image{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .9s var(--ease), transform 1.6s var(--ease);
}

.dest-image.active{
  opacity:1;
  transform:scale(1);
}

.dest-stage-mark{
  position:absolute;
  right:-8px; bottom:-8px;
  line-height:0;
  opacity:.9;
}

.dest-stage-mark img{max-height:48px; width:auto; display:block}

/* === Tablet === */
@media (max-width:1199px){
  .dest-index{grid-template-columns:1fr 1fr; gap:48px}
  .dest-frame{aspect-ratio:1/1}
  .dest-name{font-size:22px}
}

/* === Mobile: stack the list, show inline images, hide sticky stage === */
@media (max-width:809px){
  .dest-index{grid-template-columns:1fr; gap:0}
  .dest-stage{display:none}
  .dest-row{padding:28px 0}
  .dest-anchor{grid-template-columns:auto 1fr auto; gap:20px}
  .dest-name{font-size:20px}
  .dest-inline-img{
    display:block;
    aspect-ratio:5/3;
    overflow:hidden;
    margin:16px 0 0 0;
  }
  .dest-inline-img img{
    width:100%; height:100%; object-fit:cover;
    transition:transform 1.2s ease;
  }
  .dest-row:hover .dest-inline-img img,
  .dest-row.active .dest-inline-img img{transform:scale(1.04)}
  .dest-text{
    opacity:1; max-height:none;
    margin:12px 0 0 0;
  }
}

/* Legacy classes hidden as safety net */
.destinations-grid,
.destination-card,
.marquee,
.marquee-track,
.marquee-item{display:none}

/* ============== CONTACT ============== */

.contact{background:var(--charcoal); color:var(--cream); padding-bottom:clamp(24px,3vw,44px)}

.contact .container{display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:start}

.contact-intro .eyebrow{color:var(--taupe-light); margin-bottom:16px}

/* Flanking em-dashes on both sides of the Contact eyebrow ("— Get in Touch —"). */
.contact-intro .eyebrow::before,
.contact-intro .eyebrow::after{
  content:"\2014";
  color:var(--taupe-light);
  font-weight:400;
}

.contact-intro h2{color:var(--cream); margin-bottom:16px; font-size:clamp(32px,4vw,48px); font-style:italic}

.contact-intro p{color:var(--cream); opacity:.85; max-width:380px; line-height:1.7; margin-bottom:14px}

.contact-intro p.small{font-size:14px; opacity:.7}

.contact-intro p.small a{color:var(--taupe-light); text-decoration:underline; text-underline-offset:3px}

.contact-intro .contact-info{margin-top:28px; padding-top:20px; border-top:1px solid rgba(var(--cream-rgb),.15)}

.contact-intro .contact-info p{margin-bottom:10px; font-size:14px}

.contact-intro .contact-info a{color:var(--taupe-light)}

/* Contact newsletter (Stay Inspired) + work-with-us links */
.contact-newsletter{margin-bottom:18px}
.contact-newsletter-label{
  font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase; color:var(--taupe-light);
  margin-bottom:10px;
}
.contact-newsletter .small{opacity:.8; margin-bottom:16px; max-width:340px}
.contact-newsletter-form{max-width:360px}
.contact-worklinks{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.contact-worklinks a{
  color:var(--taupe-light); font-size:14px;
  text-decoration:underline; text-underline-offset:3px; width:-webkit-fit-content; width:fit-content;
}
.contact-worklinks a:hover{color:var(--cream)}

.contact-social{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:18px;
}

.contact-social a{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:40px; height:40px;
  color:var(--cream);
  opacity:.78;
  transition:opacity .25s ease, color .25s ease, transform .25s ease;
  border-radius:50%;
}

.contact-social a:hover,
.contact-social a:focus-visible{
  opacity:1;
  color:var(--taupe-light);
  transform:translateY(-2px);
}

.contact-social svg{width:22px; height:22px}

.form{display:grid; gap:22px; position:relative}

.form-row{display:grid; grid-template-columns:1fr 1fr; gap:22px}

.field label{
  display:block; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--cream); opacity:.6;
  margin-bottom:8px;
}

.field input, .field select, .field textarea{
  width:100%; padding:14px 24px 14px 0;
  background:transparent; color:var(--cream);
  border:none; border-bottom:1px solid rgba(var(--cream-rgb),.25);
  font-family:var(--sans); font-size:15px; font-weight:400;
  outline:none; transition:border-color .3s ease;
  min-height:44px;
}

.field input::placeholder, .field textarea::placeholder{color:rgba(var(--cream-rgb),.4)}

.field input:focus, .field select:focus, .field textarea:focus{border-bottom-color:var(--taupe-light)}

.field select option{background:var(--charcoal); color:var(--cream)}

.field textarea{resize:vertical; min-height:80px}

.form .btn{margin-top:16px; align-self:start; width:auto}

.form .btn-primary{background:var(--taupe); color:var(--charcoal); border-color:var(--taupe)}

.form .btn-primary:hover{background:var(--cream); border-color:var(--cream)}

/* ============== FOOTER ============== */

/* ============== STICKY MOBILE CTA ============== */

/* ============== RESPONSIVE ============== */

@media (max-width:1199px) {
  .offerings-grid, .process-grid, .destinations-grid{grid-template-columns:repeat(2,1fr)}
  .contact .container{grid-template-columns:1fr; gap:48px}
}

@media (max-width:809px) {
  section{padding:clamp(56px, 9vw, 80px) 0}
  .about-statement{padding:clamp(64px, 10vw, 100px) 0}
  .offerings-header, .process-header, .destinations-header{margin-bottom:clamp(36px,6vw,56px)}
  .offerings-grid, .process-grid, .destinations-grid{grid-template-columns:1fr; gap:32px}
  .form-row{grid-template-columns:1fr}
  .scene{height:clamp(60vh, 70vh, 75vh)}
  .scene-text h2{font-size:clamp(32px,7vw,48px)}
  body{padding-bottom:78px}
  .destination-body{padding:24px 22px}
  .destination-body h3{font-size:24px}
}

@media (max-width:380px) {
  /* Very small phones — even tighter logo and padding */
  /* Footer action bar — even more compact */
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .scene{height:auto; min-height:60vh; padding:80px 0}
  .scene-bg{position:absolute; inset:0}
  .scene-bg img{transform:none !important}
  .marquee-track{animation:none}
}

@media (forced-colors: active) {
  .btn{border:2px solid CanvasText}
}

@media print {
  .scroll-content{position:static}
  .story-pin{height:auto !important}
  .scene{position:relative !important; height:auto !important; page-break-after:always}
  body{color:#000; background:#fff}
}