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

:root{
  --ink:        #060f0a;   /* near-black, green-cast — matches logo background */
  --charcoal:   #0d2318;   /* deep Moroccan green panel — sampled from logo bg */
  --charcoal-2: #123020;
  --sand:       #cda36a;
  --ivory:      #ede6d6;
  --gold:       #d9a768;   /* sampled from the logo mark */
  --gold-bright:#f4d89a;   /* sampled highlight on the gold strokes */
  --green:      #1c6b3f;   /* saturated accent green, for gradients/glow */
  --red:        #b4222c;   /* sampled from the hidden triangle */

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.16,.84,.44,1);
  --dur-slow: 1.4s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:0; color:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background:var(--gold); color:var(--ink); }

:focus-visible{
  outline: 1.5px solid var(--sand);
  outline-offset: 4px;
}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sand);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--gold);
  display:inline-block;
}

.section{
  position:relative;
  padding:clamp(80px,12vw,160px) 0;
}
.section-head{
  max-width:640px;
  margin-bottom:clamp(36px,6vw,72px);
}
.section-head h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem,4.4vw,3.6rem);
  line-height:1.08;
  margin-top:.5em;
  color:var(--ivory);
}
.section-head p{
  margin-top:1.1em;
  color:rgba(237,230,214,.6);
  font-size:1.02rem;
  line-height:1.7;
  max-width:52ch;
}

.divider-symbol{
  width:30px;
  opacity:.75;
  margin:0 auto;
  display:block;
}

/* ============================================================
   Preloader / Cinematic Intro
   ============================================================ */
#intro{
  position:fixed; inset:0;
  z-index:9999;
  background:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  transition:opacity 1.1s var(--ease), visibility 1.1s var(--ease);
}
#intro.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#intro-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.intro-content{
  position:relative;
  z-index:2;
  text-align:center;
  opacity:0;
}
.intro-symbol{
  width:64px;
  margin:0 auto 24px;
  display:block;
}
.brand-divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:14px 0;
}
.brand-divider .ln{ width:52px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.brand-divider .ln.r{ background:linear-gradient(270deg,transparent,var(--gold)); }
.brand-divider .star{ color:var(--gold); font-size:.85rem; }
.intro-word{
  font-family:var(--display);
  font-size:clamp(1.6rem,4.2vw,2.4rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ivory);
}
.intro-phil{
  margin-top:.9em;
  font-size:.86rem;
  letter-spacing:.05em;
  color:rgba(237,230,214,.55);
  font-style:italic;
  font-family:var(--display);
}
.intro-skip{
  position:absolute;
  bottom:36px; right:36px;
  z-index:3;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(237,230,214,.5);
  border:1px solid rgba(237,230,214,.25);
  padding:.75em 1.3em;
  border-radius:999px;
  transition:color .3s, border-color .3s;
}
.intro-skip:hover{ color:var(--ivory); border-color:var(--sand); }

/* ============================================================
   Nav
   ============================================================ */
#nav{
  position:fixed; top:0; left:0; right:0;
  z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:background .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s;
}
#nav.scrolled{
  background:rgba(11,10,8,.82);
  backdrop-filter:blur(10px);
  padding-top:14px; padding-bottom:14px;
  border-bottom:1px solid rgba(237,230,214,.08);
}
.nav-brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.nav-brand img.mark{ width:20px; height:auto; display:block; }
.nav-links{ display:flex; gap:2.4rem; }
.nav-links a{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(237,230,214,.75);
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--sand);
  transition:width .35s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(237,230,214,.35);
  padding:.7em 1.4em; border-radius:999px;
  transition:border-color .3s, background .3s;
}
@media (hover:hover) and (pointer:fine){
  .nav-cta:hover{ border-color:var(--sand); background:rgba(184,146,90,.1); }
}
.nav-burger{ display:none; }

@media (max-width: 860px){
  .nav-links{
    position:fixed; inset:0;
    flex-direction:column; align-items:center; justify-content:center; gap:2.4rem;
    background:var(--ink);
    transform:translateY(-100%);
    transition:transform .5s var(--ease);
    z-index:400;
  }
  .nav-links a{ font-size:1.1rem; }
  #nav.menu-open .nav-links{ display:flex; transform:translateY(0); }
  .nav-burger{
    display:flex; flex-direction:column; gap:5px;
    width:26px; z-index:410; position:relative;
  }
  .nav-burger span{ height:1px; background:var(--ivory); width:100%; transition:transform .3s, opacity .3s; }
  #nav.menu-open .nav-burger span:first-child{ transform:translateY(3px) rotate(45deg); }
  #nav.menu-open .nav-burger span:last-child{ transform:translateY(-3px) rotate(-45deg); }
}

/* ============================================================
   Hero
   ============================================================ */
#hero{
  position:relative;
  height:100svh;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
#hero-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.hero-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(11,10,8,0) 0%, rgba(11,10,8,.55) 68%, rgba(11,10,8,.96) 100%),
    linear-gradient(to top, var(--ink) 0%, rgba(11,10,8,0) 42%);
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2;
  width:100%;
  padding:0 var(--gutter) clamp(56px,9vw,110px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero-eyebrow{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--sand);
  opacity:0;
}
.hero-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3rem,10vw,7.6rem);
  line-height:.94;
  letter-spacing:-.01em;
  margin-top:.3em;
  overflow:hidden;
}
.hero-title span{ display:block; overflow:hidden; }
.hero-title em{
  font-style:italic; font-weight:300;
  display:inline-block; transform:translateY(110%);
  will-change:transform;
}
.hero-sub{
  margin-top:1.4rem;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.05rem,1.9vw,1.4rem);
  color:rgba(237,230,214,.78);
  opacity:0;
}
.hero-sub2{
  margin-top:.5rem;
  font-size:.86rem;
  color:rgba(237,230,214,.42);
  opacity:0;
}
.hero-ctas{
  margin-top:2.4rem;
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
  opacity:0;
}
.btn{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  padding:1em 2.1em; border-radius:999px;
  transition:transform .45s var(--ease), background .35s, border-color .35s, color .35s;
  display:inline-block;
}
.btn-primary{
  background:var(--ivory); color:var(--ink);
}
.btn-ghost{
  border:1px solid rgba(237,230,214,.35);
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ transform:translateY(-2px); background:var(--sand); }
  .btn-ghost:hover{ border-color:var(--sand); color:var(--sand); transform:translateY(-2px); }
}
.btn-primary:active{ transform:translateY(0) scale(.97); background:var(--sand); }
.btn-ghost:active{ transform:translateY(0) scale(.97); border-color:var(--sand); color:var(--sand); }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0;
}
.scroll-cue .line{
  width:1px; height:38px;
  background:linear-gradient(to bottom, var(--sand), transparent);
  animation:cueMove 2.4s ease-in-out infinite;
}
@keyframes cueMove{ 0%{transform:scaleY(.3);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 100%{transform:scaleY(.3);transform-origin:bottom;} }
.scroll-cue span{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(237,230,214,.45); }

/* ============================================================
   Manifesto
   ============================================================ */
#manifesto{ background:var(--ink); text-align:center; }
.manifesto-text{
  max-width:820px; margin:0 auto;
  font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,2.5rem);
  line-height:1.5;
  color:var(--ivory);
}
.manifesto-text .fade-line{ opacity:.22; }
.manifesto-signature{
  margin-top:2.4rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sand);
}

/* ============================================================
   Experiences
   ============================================================ */
#experiences{ background:var(--charcoal); }
.exp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px;
  background:rgba(237,230,214,.08);
  border:1px solid rgba(237,230,214,.08);
}
.exp-card{
  position:relative;
  background:var(--charcoal);
  padding:44px 34px;
  min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  transition:background .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.exp-card::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(184,146,90,.16), transparent 55%),
    linear-gradient(150deg, var(--green) 0%, var(--charcoal) 55%);
  opacity:0;
  transition:opacity .6s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .exp-card:hover::before{ opacity:.55; }
  .exp-card:hover{ background:var(--charcoal-2); transform:translateY(-3px); box-shadow:0 24px 48px rgba(0,0,0,.32); }
}
.exp-card:active{ transform:translateY(-1px) scale(.995); }
.exp-num{
  position:absolute; top:32px; left:34px;
  font-size:.7rem; letter-spacing:.14em; color:rgba(237,230,214,.35);
}
.exp-tag{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sand);
}
.exp-title{
  font-family:var(--display); font-size:1.7rem; margin-top:.4em; line-height:1.15;
  position:relative; z-index:2;
}
.exp-desc{
  margin-top:.7em; font-size:.9rem; color:rgba(237,230,214,.55); line-height:1.6;
  position:relative; z-index:2;
}
.exp-meta{
  margin-top:1.6em; display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:2;
}
.exp-price{ font-size:.82rem; color:var(--ivory); }
.exp-price small{ display:block; color:rgba(237,230,214,.4); font-size:.68rem; letter-spacing:.06em; }
.exp-link{
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid rgba(237,230,214,.4);
  padding-bottom:2px;
  transition:border-color .3s, color .3s;
}
@media (hover:hover) and (pointer:fine){
  .exp-card:hover .exp-link{ color:var(--sand); border-color:var(--sand); }
}
.exp-card.featured{ grid-column:span 2; }
@media(max-width:700px){ .exp-card.featured{ grid-column:span 1; } }

/* ============================================================
   Three Worlds
   ============================================================ */
#three-worlds{
  position:relative;
  height:420vh;
}
.tw-pin{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.tw-bg{
  position:absolute; inset:0;
  overflow:hidden;
  background:#060f0a;
  transition:background-color 1s;
}
.tw-bg-image{
  position:absolute; inset:-3%;
  background-position:center;
  background-size:cover;
  opacity:0;
  transform:scale(1.07);
  will-change:opacity,transform;
}
.tw-bg-shade{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 45%, rgba(6,15,10,.20), rgba(6,15,10,.62) 72%),
    linear-gradient(180deg, rgba(6,15,10,.44), rgba(6,15,10,.66));
  pointer-events:none;
}
.tw-chapter{
  position:absolute; inset:0;
  z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  opacity:0;
  padding:0 var(--gutter);
}
.tw-chapter .eyebrow{ justify-content:center; }
.tw-chapter h3{
  font-family:var(--display);
  font-size:clamp(2.2rem,6vw,4.6rem);
  margin-top:.4em;
}
.tw-chapter p{
  margin-top:1em; max-width:44ch;
  color:rgba(237,230,214,.7);
}
.tw-head{
  position:absolute; top:14%; left:0; right:0; text-align:center; z-index:3;
}
.tw-head span{ font-family:var(--display); font-style:italic; font-size:1.1rem; color:rgba(237,230,214,.55); }
.tw-price{
  position:absolute; bottom:9%; left:0; right:0; text-align:center; z-index:3;
}
.tw-price .btn{ margin-top:1em; }

/* ============================================================
   Concierge
   ============================================================ */
#concierge{
  background:var(--ink);
  position:relative;
}
.concierge-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;
}
@media(max-width:860px){ .concierge-grid{ grid-template-columns:1fr; } }
.concierge-list{ margin-top:2em; display:grid; gap:1px; background:rgba(237,230,214,.1); border-top:1px solid rgba(237,230,214,.1);}
.concierge-list div{
  background:var(--ink); padding:1.1em 0; display:flex; justify-content:space-between; font-size:.9rem;
}
.concierge-list span:first-child{ color:var(--ivory); }
.concierge-list span:last-child{ color:rgba(237,230,214,.45); font-size:.8rem; }
.concierge-panel{
  border:1px solid rgba(237,230,214,.14);
  padding:44px;
  text-align:center;
}
.concierge-panel .divider-symbol{ margin-bottom:20px; }
.concierge-panel h3{ font-family:var(--display); font-size:1.5rem; }
.concierge-panel p{ margin-top:.8em; font-size:.88rem; color:rgba(237,230,214,.55); }
.concierge-panel .btn{ margin-top:1.6em; }

/* ============================================================
   Secret Invitation
   ============================================================ */
#secret{
  background:var(--charcoal);
  text-align:center;
  overflow:hidden;
}
.secret-door{
  width:180px; height:220px;
  margin:0 auto 40px;
  position:relative;
  cursor:pointer;
}
.secret-door svg{ width:100%; height:100%; color:var(--gold); }
.secret-door .leaf-l, .secret-door .leaf-r{ transition:transform 1.1s var(--ease); transform-origin:left center; }
.secret-door.open .leaf-l{ transform:rotateY(62deg) translateX(-2px); }
.secret-door.open .leaf-r{ transform:rotateY(-62deg) translateX(2px); }
.secret-door .glow{
  position:absolute; inset:14% 20%;
  background:radial-gradient(ellipse at center, rgba(184,146,90,.5), transparent 70%);
  opacity:0; transition:opacity 1.2s .3s;
  pointer-events:none;
}
.secret-door.open .glow{ opacity:1; }
.secret-title{
  font-family:var(--display); font-size:clamp(2rem,5vw,3.4rem);
}
.secret-lines{
  margin-top:1.4rem; font-family:var(--display); font-style:italic;
  color:rgba(237,230,214,.6); font-size:1.05rem; line-height:2;
}
.secret-reveal{
  margin-top:2rem; min-height:2em;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sand);
  opacity:0; transition:opacity 1s .4s;
}
.secret-door.open ~ .secret-reveal{ opacity:1; }

/* ============================================================
   Live Moments
   ============================================================ */
#live{ background:var(--ink); }
.live-track-wrap{ overflow-x:auto; scrollbar-width:none; padding-bottom:8px; }
.live-track-wrap::-webkit-scrollbar{ display:none; }
.live-track{ display:flex; gap:18px; }
.live-item{
  flex:0 0 auto; width:min(320px,74vw); aspect-ratio:4/5;
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--green),var(--charcoal) 70%);
}
.live-item:nth-child(2){ background:linear-gradient(160deg,var(--red),var(--charcoal) 70%); }
.live-item:nth-child(3){ background:linear-gradient(160deg,var(--gold),var(--charcoal) 70%); }
.live-item span{
  position:absolute; left:18px; bottom:16px; font-size:.78rem; letter-spacing:.05em; color:var(--ivory);
}
.live-foot{ margin-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.live-foot a{ font-size:.78rem; letter-spacing:.1em; color:var(--sand); border-bottom:1px solid var(--sand); padding-bottom:2px; }

/* ============================================================
   Guest stories
   ============================================================ */
#stories{ background:var(--charcoal); }
.stories-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:48px; }
.story blockquote{
  font-family:var(--display); font-style:italic; font-size:1.15rem; line-height:1.65; color:var(--ivory);
}
.story cite{ display:block; margin-top:1.2em; font-style:normal; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(237,230,214,.45); }

/* ============================================================
   FAQ
   ============================================================ */
#faq{ background:var(--ink); }
.faq-item{ border-top:1px solid rgba(237,230,214,.14); }
.faq-item:last-child{ border-bottom:1px solid rgba(237,230,214,.14); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:1.5em 0; text-align:left; font-size:1.02rem; color:var(--ivory);
}
.faq-q .plus{ font-size:1.2rem; color:var(--sand); transition:transform .4s var(--ease); }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .5s var(--ease);
}
.faq-a p{ padding-bottom:1.6em; color:rgba(237,230,214,.6); line-height:1.7; max-width:60ch; font-size:.94rem; }

/* ============================================================
   Request form
   ============================================================ */
#request{ background:var(--charcoal); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; margin-top:2.4rem; }
@media(max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.5em; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(237,230,214,.5); }
.field input, .field select, .field textarea{
  background:transparent; border:0; border-bottom:1px solid rgba(237,230,214,.28);
  padding:.7em 0; color:var(--ivory); font-family:var(--body); font-size:.98rem;
  transition:border-color .3s;
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--sand); outline:none; }
.field select option{ background:var(--charcoal); color:var(--ivory); }
.form-foot{ margin-top:2.2rem; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.form-note{ font-size:.78rem; color:rgba(237,230,214,.4); }

/* ============================================================
   Footer
   ============================================================ */
footer{ background:var(--ink); border-top:1px solid rgba(237,230,214,.1); padding:64px 0 32px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
@media(max-width:700px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-brand{ display:flex; align-items:center; gap:12px; font-family:var(--display); letter-spacing:.1em; text-transform:uppercase; }
.foot-brand img.mark{ width:20px; height:auto; display:block; }
.foot-phil{ margin-top:1em; font-family:var(--display); font-style:italic; color:rgba(237,230,214,.5); max-width:32ch; }
.foot-col h5{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sand); margin-bottom:1em; }
.foot-col a, .foot-col p{ display:block; font-size:.86rem; color:rgba(237,230,214,.6); margin-bottom:.7em; }
.foot-bottom{ margin-top:56px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.72rem; color:rgba(237,230,214,.35); border-top:1px solid rgba(237,230,214,.08); padding-top:24px; }

/* ============================================================
   Concierge floating button
   ============================================================ */
#wa-float{
  position:fixed; bottom:28px; right:28px; z-index:400;
  display:flex; align-items:center; gap:.7em;
  background:rgba(28,24,21,.92);
  border:1px solid rgba(237,230,214,.18);
  padding:.85em 1.3em;
  border-radius:999px;
  backdrop-filter:blur(8px);
  font-size:.74rem; letter-spacing:.06em;
  transition:border-color .3s, transform .3s;
}
@media (hover:hover) and (pointer:fine){
  #wa-float:hover{ border-color:var(--sand); transform:translateY(-2px); }
}
#wa-float:active{ transform:scale(.95); }
#wa-float .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(47,74,60,.35); }

/* ============================================================
   Reveal utility (used by GSAP / IO)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.2s !important; }
}

/* ================================================================
   HIDDEN MOROCCO V3 — MODULAR EXPERIENCE + SECRET INVITATION LAYERS
   Scoped additions. Keep these selectors isolated for safe editing.
   ================================================================ */

body.layer-open{ overflow:hidden; }

/* Principles */
.principles-section{ padding-top:clamp(70px,9vw,120px); }
.compact-head{ margin-bottom:2.2rem; }
.principles-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(237,230,214,.12); }
.principles-grid article{ padding:2rem 1.4rem 2.2rem 0; border-right:1px solid rgba(237,230,214,.1); }
.principles-grid article+article{ padding-left:1.4rem; }
.principles-grid article:last-child{ border-right:0; }
.principles-grid article>span{ font-size:.65rem; letter-spacing:.18em; color:var(--gold); opacity:.75; }
.principles-grid h3{ margin-top:1.2rem; font-family:var(--display); font-size:1.25rem; font-weight:400; }
.principles-grid p{ margin-top:.7rem; color:rgba(237,230,214,.5); font-size:.82rem; line-height:1.7; }
@media(max-width:850px){ .principles-grid{ grid-template-columns:1fr 1fr; }.principles-grid article:nth-child(2){border-right:0}.principles-grid article:nth-child(3),.principles-grid article:nth-child(4){border-top:1px solid rgba(237,230,214,.1)} }
@media(max-width:560px){ .principles-grid{grid-template-columns:1fr}.principles-grid article,.principles-grid article+article{padding:1.5rem 0;border-right:0;border-top:1px solid rgba(237,230,214,.1)} }

/* Experience cards now open one reusable layer */
.exp-card[role="button"]{ cursor:pointer; }
.exp-card[role="button"]:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
.exp-link.exp-open{ font:inherit; background:none; cursor:pointer; }
.concierge-pay{ margin-top:1rem!important; padding-top:1rem; border-top:1px solid rgba(237,230,214,.1); font-size:.72rem!important; letter-spacing:.04em; }

/* Shared full-screen experience layer */
.experience-layer{ position:fixed; inset:0; z-index:10020; visibility:hidden; pointer-events:none; }
.experience-layer.is-open{ visibility:visible; pointer-events:auto; }
.experience-layer-backdrop{ position:absolute; inset:0; background:rgba(2,6,4,.78); opacity:0; backdrop-filter:blur(0); transition:opacity .55s ease,backdrop-filter .7s ease; }
.experience-layer.is-open .experience-layer-backdrop{ opacity:1; backdrop-filter:blur(12px); }
.experience-layer-shell{ position:absolute; inset:0; background:linear-gradient(145deg,#07100b 0%,#0b1710 50%,#11120e 100%); color:var(--ivory); transform:translate3d(0,100%,0) scale(.985); transition:transform .85s cubic-bezier(.16,.84,.32,1); overflow:auto; overscroll-behavior:contain; }
.experience-layer.is-open .experience-layer-shell{ transform:translate3d(0,0,0) scale(1); }
.experience-layer-shell::before{ content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 80% 10%,rgba(183,146,76,.08),transparent 34%),radial-gradient(circle at 8% 88%,rgba(22,77,53,.12),transparent 40%); }
.experience-layer-close{ position:fixed; z-index:3; top:22px; right:24px; border:0; border-bottom:1px solid rgba(237,230,214,.35); background:transparent; color:var(--ivory); padding:.45rem .1rem; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; }
.experience-layer-progress{ position:fixed; top:0; left:0; right:0; height:2px; background:rgba(255,255,255,.05); z-index:4; }
.experience-layer-progress span{ display:block; width:0; height:100%; background:var(--gold); transition:width .55s var(--ease); }
.experience-layer-inner{ position:relative; width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:clamp(90px,12vh,150px) 0 56px; min-height:100%; }
.experience-layer-header{ max-width:850px; position:relative; padding-right:90px; }
.experience-layer-number{ position:absolute; top:-8px; right:0; font-family:var(--display); font-size:clamp(3.5rem,8vw,7rem); line-height:1; color:rgba(237,230,214,.045); }
.experience-layer-header h2{ margin-top:.55rem; font-family:var(--display); font-size:clamp(2.7rem,7vw,6.4rem); font-weight:400; line-height:.94; letter-spacing:-.035em; }
.experience-layer-header>p{ max-width:68ch; margin-top:1.4rem; color:rgba(237,230,214,.6); line-height:1.75; }
.experience-layer-body{ display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.7fr); gap:clamp(35px,7vw,100px); margin-top:clamp(50px,8vw,90px); }
.experience-options-head{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(237,230,214,.14); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; }
.experience-options-head small{ color:rgba(237,230,214,.35); }
.experience-option{ display:grid; grid-template-columns:110px 1fr auto; gap:1.2rem; align-items:center; width:100%; padding:1.35rem 0; border:0; border-bottom:1px solid rgba(237,230,214,.1); background:transparent; color:inherit; text-align:left; cursor:pointer; transition:padding .35s ease,background .35s ease; }
.experience-option:hover,.experience-option.is-selected{ padding-left:1rem; padding-right:1rem; background:rgba(237,230,214,.035); }
.experience-option.is-selected{ box-shadow:inset 2px 0 0 var(--gold); }
.experience-option-type{ color:var(--gold); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; }
.experience-option-copy strong{ display:block; font-family:var(--display); font-size:1.15rem; font-weight:400; }
.experience-option-copy small{ display:block; margin-top:.35rem; color:rgba(237,230,214,.42); font-size:.75rem; line-height:1.5; }
.experience-option-price{ font-size:.8rem; white-space:nowrap; color:var(--ivory); }
.experience-layer-notes h3{ font-family:var(--display); font-weight:400; font-size:1.2rem; }
.experience-layer-notes ul{ list-style:none; margin:1rem 0 0; padding:0; }
.experience-layer-notes li{ padding:.72rem 0; border-bottom:1px solid rgba(237,230,214,.08); color:rgba(237,230,214,.48); font-size:.78rem; line-height:1.55; }
.experience-layer-policy{ margin-top:1.6rem; padding:1.2rem; border:1px solid rgba(183,146,76,.2); background:rgba(183,146,76,.035); }
.experience-layer-policy strong{ display:block; color:var(--sand); font-family:var(--display); font-weight:400; }
.experience-layer-policy span{ display:block; margin-top:.55rem; color:rgba(237,230,214,.45); font-size:.72rem; line-height:1.55; }
.experience-layer-cta{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(237,230,214,.13); }
.experience-layer-cta>div span{ display:block; color:rgba(237,230,214,.4); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.experience-layer-cta>div strong{ display:block; margin-top:.3rem; font-family:var(--display); font-size:1.45rem; font-weight:400; }
.experience-layer-request[disabled]{ opacity:.35; pointer-events:none; }
@media(max-width:820px){
  .experience-layer-inner{ width:min(100% - 28px,1180px); padding-top:90px; }
  .experience-layer-body{ grid-template-columns:1fr; }
  .experience-layer-header{ padding-right:0; }
  .experience-layer-number{ position:static; display:block; margin-top:1rem; font-size:2rem; color:rgba(237,230,214,.2); }
  .experience-option{ grid-template-columns:1fr auto; gap:.65rem; }
  .experience-option-type{ grid-column:1/-1; }
  .experience-layer-cta{ align-items:flex-start; flex-direction:column; }
  .experience-layer-cta .btn{ width:100%; text-align:center; }
}

/* Secret Invitation — Layer 1 */
.secret-section{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:clamp(90px,12vw,160px) 0; background:#030504; perspective:1400px; }
.secret-atmosphere{ position:absolute; inset:-15%; background:radial-gradient(circle at 50% 44%,rgba(173,137,70,.10),transparent 18%),radial-gradient(circle at 50% 50%,rgba(11,41,27,.16),transparent 42%); filter:blur(10px); pointer-events:none; }
.secret-discovery{ position:relative; text-align:center; }
.secret-eyebrow{ display:flex; justify-content:center; color:rgba(237,230,214,.42); }
.si-artifact{ position:relative; width:min(360px,72vw); aspect-ratio:.72; margin:3.5rem auto 2.5rem; transform-style:preserve-3d; transform:rotateY(-12deg) rotateX(4deg); transition:transform .9s cubic-bezier(.16,.84,.32,1),filter .7s ease; cursor:pointer; }
.si-artifact:hover{ transform:rotateY(-4deg) rotateX(1deg) translateY(-5px); }
.si-artifact:focus-visible{ outline:1px solid var(--gold); outline-offset:10px; }
.si-card-face{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2.2rem; border:1px solid rgba(183,146,76,.32); background:linear-gradient(145deg,#060706,#0c0d0b 55%,#050605); box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 45px rgba(255,255,255,.012); transform:translateZ(10px); }
.si-card-face::after{ content:""; position:absolute; inset:14px; border:1px solid rgba(183,146,76,.12); pointer-events:none; }
.si-eye{ position:relative; width:72px; height:38px; border:1px solid rgba(183,146,76,.75); border-radius:100% 0 100% 0; transform:rotate(45deg); margin-bottom:2rem; }
.si-eye span{ position:absolute; width:18px;height:18px;border:1px solid var(--gold);border-radius:50%;top:9px;left:26px; }
.si-kicker{ text-transform:uppercase; letter-spacing:.22em; color:var(--gold); font-size:.63rem; }
.si-card-face h2{ margin-top:.65rem; font-family:var(--display); font-size:clamp(1.8rem,5vw,2.7rem); font-weight:400; }
.si-sub{ margin-top:.6rem; text-transform:uppercase; letter-spacing:.18em; color:rgba(237,230,214,.38); font-size:.55rem; }
.si-seal{ position:absolute; right:15%; bottom:13%; display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:radial-gradient(circle at 38% 30%,#6d1e1c,#38100f 64%,#1e0808); color:#b57164; border:2px solid #541411; box-shadow:0 7px 18px rgba(0,0,0,.6); transform:translateZ(18px) rotate(-8deg); }
.si-copy p{ color:rgba(237,230,214,.45); line-height:1.8; }
.si-copy h3{ margin-top:1rem; font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.2; }
.si-discover{ margin-top:2rem; padding:.7rem .2rem; border:0; border-bottom:1px solid rgba(183,146,76,.65); background:transparent; color:var(--sand); text-transform:uppercase; letter-spacing:.2em; font-size:.65rem; cursor:pointer; }

/* Secret Invitation — immersive Layer 2 */
.si-layer{ position:fixed; inset:0; z-index:10040; visibility:hidden; opacity:0; pointer-events:none; background:#020302; overflow:auto; transition:opacity .6s ease,visibility 0s linear .6s; }
.si-layer.is-open{ visibility:visible; opacity:1; pointer-events:auto; transition:opacity .7s ease; }
.si-layer::before{ content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 10%,rgba(183,146,76,.08),transparent 34%); }
.si-close{ position:fixed; z-index:4; top:22px; right:24px; color:rgba(237,230,214,.7); background:none; border:0; border-bottom:1px solid rgba(237,230,214,.25); padding:.5rem 0; text-transform:uppercase; letter-spacing:.16em; font-size:.6rem; cursor:pointer; }
.si-layer-inner{ width:min(900px,calc(100% - 32px)); margin:0 auto; padding:clamp(95px,12vh,145px) 0 80px; perspective:1500px; }
.si-letter-wrap{ position:relative; transform-origin:center top; }
.si-envelope-back{ position:absolute; top:-28px; left:4%; width:92%; height:160px; background:#080908; border:1px solid rgba(183,146,76,.16); transform:rotateX(62deg) translateZ(-30px); transform-origin:top; }
.si-letter{ position:relative; padding:clamp(2rem,6vw,5rem); background:linear-gradient(100deg,#d8c9aa,#eee1c6 52%,#d3c09e); color:#211d16; box-shadow:0 40px 100px rgba(0,0,0,.6); }
.si-letter::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(55,42,26,.06) 4px); mix-blend-mode:multiply; }
.si-letter-eye{ display:block; width:44px; height:24px; border:1px solid #735c31; border-radius:100% 0 100% 0; transform:rotate(45deg); margin:0 auto 2.4rem; }
.si-letter-kicker{ text-align:center; text-transform:uppercase; letter-spacing:.2em; font-size:.6rem; color:#715c37; }
.si-letter h2{ margin-top:1.2rem; text-align:center; font-family:var(--display); font-weight:400; font-size:clamp(2.1rem,6vw,4rem); }
.si-poem{ margin:2.2rem auto; text-align:center; font-family:var(--display); font-size:clamp(1.2rem,3vw,1.7rem); line-height:1.6; }
.si-letter>p:not(.si-letter-kicker):not(.si-poem):not(.si-welcome){ max-width:62ch; margin:1.6rem auto 0; line-height:1.85; }
.si-vows{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2rem; margin:3rem 0; padding:1.4rem 0; border-top:1px solid rgba(33,29,22,.22); border-bottom:1px solid rgba(33,29,22,.22); font-size:.7rem; letter-spacing:.15em; }
.si-welcome{ text-align:center; font-family:var(--display); font-size:1.2rem; line-height:1.65; }
.si-rules{ margin-top:4rem; border-top:1px solid rgba(33,29,22,.25); }
.si-rules>div{ display:grid; grid-template-columns:50px 1fr 1fr; gap:1.2rem; padding:1.4rem 0; border-bottom:1px solid rgba(33,29,22,.18); align-items:start; }
.si-rules span{ color:#80683b; font-size:.68rem; }
.si-rules h3{ font-family:var(--display); font-weight:400; font-size:1.1rem; }
.si-rules p{ color:rgba(33,29,22,.63); font-size:.78rem; }
.si-paths{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:4rem; background:rgba(33,29,22,.25); }
.si-path{ min-height:180px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:1.5rem; border:0; background:#181a16; color:#eee1c6; text-align:left; cursor:pointer; transition:background .35s ease; }
.si-path:hover,.si-path.is-selected{ background:#22261f; }
.si-path.is-selected{ box-shadow:inset 0 -2px 0 #a78952; }
.si-path span{ color:#a78952;font-size:.62rem;letter-spacing:.12em; }
.si-path strong{ margin-top:.8rem; font-family:var(--display); font-weight:400; font-size:1.35rem; }
.si-path small{ margin-top:.55rem; color:rgba(238,225,198,.48); line-height:1.5; }
.si-final{ margin-top:4rem; text-align:center; }
.si-final p{ font-family:var(--display); font-size:clamp(1.3rem,3vw,2rem); }
.si-final .btn{ margin-top:1.5rem; }
@media(max-width:620px){ .si-artifact{width:min(300px,76vw)}.si-rules>div{grid-template-columns:35px 1fr}.si-rules p{grid-column:2}.si-paths{grid-template-columns:1fr}.si-letter{padding:2rem 1.25rem}.si-vows{flex-direction:column}.si-close{right:16px} }

@media(prefers-reduced-motion:reduce){
  .experience-layer-shell,.experience-layer-backdrop,.si-layer,.si-artifact{ transition:none!important; }
  .si-artifact{ transform:none!important; }
}


/* ============ THE HIDDEN COLLECTION — isolated ecosystem ============ */
.hidden-collection{ position:relative; overflow:hidden; background:linear-gradient(180deg,#07100b 0%,#0a140e 52%,#07100b 100%); }
.hidden-collection::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 85% 12%,rgba(183,146,76,.09),transparent 28%),radial-gradient(circle at 12% 82%,rgba(31,92,65,.12),transparent 34%); }
.collection-head{ position:relative; max-width:820px; }
.collection-grid{ position:relative; display:grid; grid-template-columns:repeat(12,1fr); gap:1px; margin-top:clamp(42px,7vw,80px); background:rgba(237,230,214,.09); border:1px solid rgba(237,230,214,.09); }
.collection-category{ position:relative; min-height:310px; padding:clamp(22px,3vw,38px); border:0; background:#0a130e; color:var(--ivory); text-align:left; cursor:pointer; overflow:hidden; isolation:isolate; transition:transform .55s var(--ease),box-shadow .55s var(--ease); }
.collection-category:nth-child(1),.collection-category:nth-child(2){ grid-column:span 6; }
.collection-category:nth-child(n+3){ grid-column:span 6; min-height:310px; }
.collection-category::before{ content:""; position:absolute; inset:0; z-index:-2; background-image:var(--collection-cover); background-size:cover; background-position:center; transform:scale(1.025); filter:saturate(.9) contrast(1.06) brightness(.72); transition:transform .85s cubic-bezier(.16,.84,.32,1),filter .65s ease; }
.collection-category::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(3,8,5,.22) 0%,rgba(3,8,5,.38) 35%,rgba(3,8,5,.86) 100%),linear-gradient(90deg,rgba(3,8,5,.62) 0%,rgba(3,8,5,.16) 72%); transition:background .55s ease; }
.collection-category:hover,.collection-category:focus-visible{ z-index:1; transform:translateY(-4px); box-shadow:0 24px 70px rgba(0,0,0,.36); outline:none; }
.collection-category:hover::before,.collection-category:focus-visible::before{ transform:scale(1.08); filter:saturate(1) contrast(1.08) brightness(.82); }
.collection-category:hover::after,.collection-category:focus-visible::after{ background:linear-gradient(180deg,rgba(3,8,5,.12) 0%,rgba(3,8,5,.3) 34%,rgba(3,8,5,.8) 100%),linear-gradient(90deg,rgba(3,8,5,.52) 0%,rgba(3,8,5,.1) 72%); }
.collection-category-num{ position:absolute; top:22px; right:26px; font-family:var(--display); font-size:clamp(2.8rem,5vw,5rem); color:rgba(237,230,214,.18); text-shadow:0 2px 18px rgba(0,0,0,.5); }
.collection-category-kicker{ display:block; color:var(--gold); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; }
.collection-category strong{ position:relative; z-index:1; display:block; margin-top:clamp(65px,9vw,115px); max-width:12ch; font-family:var(--display); font-size:clamp(1.7rem,3vw,2.8rem); font-weight:400; line-height:1; }
.collection-category small{ position:relative; z-index:1; display:block; margin-top:.9rem; color:rgba(237,230,214,.78); font-size:.75rem; text-shadow:0 2px 14px rgba(0,0,0,.7); }
.collection-category-action{ position:absolute; z-index:1; left:clamp(22px,3vw,38px); bottom:26px; color:rgba(237,230,214,.7); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid rgba(183,146,76,.45); padding-bottom:.35rem; }
.hidden-partners{ position:relative; display:grid; grid-template-columns:1.5fr auto; gap:clamp(30px,7vw,90px); align-items:end; margin-top:clamp(60px,9vw,110px); padding-top:clamp(35px,5vw,60px); border-top:1px solid rgba(237,230,214,.12); }
.hidden-partners h3{ max-width:18ch; margin-top:.55rem; font-family:var(--display); font-size:clamp(1.8rem,3.5vw,3rem); font-weight:400; line-height:1.05; }
.hidden-partners p{ max-width:65ch; margin-top:1rem; color:rgba(237,230,214,.5); line-height:1.75; }
.hidden-partner-link{ color:var(--sand); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; white-space:nowrap; border-bottom:1px solid rgba(183,146,76,.5); padding-bottom:.5rem; }

.collection-layer{ position:fixed; inset:0; z-index:10030; visibility:hidden; pointer-events:none; }
.collection-layer.is-open{ visibility:visible; pointer-events:auto; }
.collection-layer-backdrop{ position:absolute; inset:0; background:rgba(2,6,4,.82); opacity:0; backdrop-filter:blur(0); transition:opacity .55s ease,backdrop-filter .7s ease; }
.collection-layer.is-open .collection-layer-backdrop{ opacity:1; backdrop-filter:blur(12px); }
.collection-layer-shell{ position:absolute; inset:0; overflow:auto; overscroll-behavior:contain; background:linear-gradient(145deg,#07100b 0%,#0b1710 52%,#11120e 100%); color:var(--ivory); transform:translate3d(0,100%,0) scale(.985); transition:transform .85s cubic-bezier(.16,.84,.32,1); }
.collection-layer.is-open .collection-layer-shell{ transform:translate3d(0,0,0) scale(1); }
.collection-layer-shell::before{ content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 82% 8%,rgba(183,146,76,.08),transparent 34%),radial-gradient(circle at 5% 92%,rgba(22,77,53,.13),transparent 38%); }
.collection-layer-close{ position:fixed; z-index:4; top:22px; right:24px; border:0; border-bottom:1px solid rgba(237,230,214,.35); background:transparent; color:var(--ivory); padding:.45rem .1rem; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; }
.collection-layer-inner{ position:relative; width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:clamp(90px,12vh,150px) 0 70px; }
.collection-layer-header{ position:relative; max-width:860px; padding-right:100px; }
.collection-layer-index{ position:absolute; top:-12px; right:0; font-family:var(--display); font-size:clamp(4rem,9vw,8rem); line-height:1; color:rgba(237,230,214,.045); }
.collection-layer-header h2{ margin-top:.5rem; font-family:var(--display); font-size:clamp(3rem,7vw,6.5rem); font-weight:400; line-height:.94; }
.collection-layer-header>p{ max-width:65ch; margin-top:1.3rem; color:rgba(237,230,214,.58); line-height:1.75; }
.collection-offerings{ display:grid; gap:clamp(28px,5vw,58px); margin-top:clamp(50px,8vw,90px); }
.collection-offering{ display:grid; grid-template-columns:minmax(230px,.72fr) minmax(0,1.4fr); gap:clamp(25px,5vw,70px); padding-top:clamp(26px,4vw,42px); border-top:1px solid rgba(237,230,214,.12); }
.collection-offering-visual{ position:relative; min-height:330px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; background:linear-gradient(145deg,#14251a,#0a100c); border:1px solid rgba(237,230,214,.08); }
.collection-offering-visual::before,.collection-offering-visual::after{ content:""; position:absolute; border-radius:50%; filter:blur(1px); }
.collection-offering-visual::before{ width:75%; aspect-ratio:1; top:-15%; right:-25%; background:radial-gradient(circle,rgba(183,146,76,.22),transparent 68%); }
.collection-offering-visual::after{ width:85%; aspect-ratio:1; bottom:-40%; left:-25%; background:radial-gradient(circle,rgba(32,103,72,.26),transparent 70%); }
.collection-offering-visual[data-visual="experiences"]{ background:linear-gradient(145deg,#21180e,#0b1510); }
.collection-offering-visual[data-visual="discover"]{ background:linear-gradient(145deg,#122027,#0a110e); }
.collection-offering-visual[data-visual="move"]{ background:linear-gradient(145deg,#161616,#0a130e); }
.collection-offering-visual span{ position:relative; z-index:1; color:rgba(237,230,214,.4); font-size:.62rem; letter-spacing:.16em; }
.collection-offering-visual strong{ position:relative; z-index:1; max-width:10ch; margin-top:.7rem; font-family:var(--display); font-size:clamp(1.7rem,3.2vw,3rem); font-weight:400; line-height:1; }
.collection-location{ color:var(--gold); font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; }
.collection-offering-copy h3{ margin-top:.65rem; font-family:var(--display); font-size:clamp(1.8rem,3vw,2.8rem); font-weight:400; }
.collection-offering-copy>p{ max-width:65ch; margin-top:.9rem; color:rgba(237,230,214,.56); line-height:1.72; }
.collection-offering-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:2rem; }
.collection-offering-grid h4{ margin-bottom:.8rem; color:rgba(237,230,214,.85); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; }
.collection-offering-grid ul{ list-style:none; padding:0; margin:0; }
.collection-offering-grid li{ padding:.58rem 0; border-bottom:1px solid rgba(237,230,214,.07); color:rgba(237,230,214,.45); font-size:.76rem; line-height:1.5; }
.collection-verification{ display:flex; flex-direction:column; gap:.55rem; }
.collection-check{ display:block; padding:.65rem .75rem; border:1px solid rgba(183,146,76,.18); background:rgba(183,146,76,.035); color:rgba(237,230,214,.55); font-size:.72rem; line-height:1.45; }
.collection-take{ margin-top:2rem; padding:1.2rem 1.3rem; border-left:2px solid var(--gold); background:rgba(237,230,214,.025); }
.collection-take span{ color:var(--gold); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; }
.collection-take p{ margin-top:.55rem; color:rgba(237,230,214,.62); font-family:var(--display); font-size:1.05rem; line-height:1.55; }
.collection-layer-footer{ display:flex; justify-content:space-between; align-items:center; gap:30px; margin-top:clamp(55px,8vw,90px); padding-top:28px; border-top:1px solid rgba(237,230,214,.14); }
.collection-layer-footer p{ max-width:65ch; color:rgba(237,230,214,.42); font-size:.74rem; line-height:1.65; }
.collection-layer-footer strong{ color:rgba(237,230,214,.75); }

@media(max-width:900px){
  .collection-category,.collection-category:nth-child(1),.collection-category:nth-child(2),.collection-category:nth-child(n+3){ grid-column:span 12; min-height:240px; }
  .collection-category strong{ margin-top:65px; }
  .hidden-partners{ grid-template-columns:1fr; align-items:start; }
  .collection-offering{ grid-template-columns:1fr; }
  .collection-offering-visual{ min-height:250px; }
}
@media(max-width:620px){
  .collection-layer-inner{ width:min(100% - 28px,1180px); padding-top:90px; }
  .collection-layer-header{ padding-right:0; }
  .collection-layer-index{ position:static; display:block; margin-top:1rem; font-size:2rem; color:rgba(237,230,214,.2); }
  .collection-offering-grid{ grid-template-columns:1fr; }
  .collection-layer-footer{ align-items:flex-start; flex-direction:column; }
  .collection-layer-footer .btn{ width:100%; text-align:center; }
}
@media(prefers-reduced-motion:reduce){ .collection-layer-shell,.collection-layer-backdrop,.collection-category{ transition:none!important; } }

/* ============================================================
   Tailor Mode — Official Cinematic Atelier V2
   Isolated module. Existing interaction hooks preserved.
   ============================================================ */
.tailor-atelier{
  position:relative;
  overflow:hidden;
  min-height:100svh;
  isolation:isolate;
  background:#070b08;
  border-top:1px solid rgba(237,230,214,.08);
  border-bottom:1px solid rgba(237,230,214,.08);
}
.tailor-atelier-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url('../assets/img/tailor-mode-official-cover.jpeg');
  background-size:cover;
  background-position:center 48%;
  transform:scale(1.015);
  filter:saturate(.82) contrast(1.08) brightness(.72) sepia(.08);
}
.tailor-atelier::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(4,8,6,.98) 0%, rgba(4,8,6,.91) 26%, rgba(4,8,6,.56) 48%, rgba(4,8,6,.12) 72%, rgba(4,8,6,.28) 100%),
    linear-gradient(180deg, rgba(4,8,6,.34) 0%, rgba(4,8,6,.02) 48%, rgba(4,8,6,.88) 100%);
  pointer-events:none;
}
.tailor-atelier::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 78% 54%, rgba(217,167,104,.10), transparent 36%);
  pointer-events:none;
}
.tailor-atelier-wrap{
  position:relative;
  z-index:2;
  min-height:100svh;
  padding-top:clamp(76px,8vw,118px);
  padding-bottom:clamp(52px,6vw,84px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
  grid-template-rows:1fr auto;
  column-gap:clamp(34px,6vw,88px);
  align-items:center;
}
.tailor-atelier-copy{
  grid-column:1;
  grid-row:1;
  max-width:720px;
  padding:clamp(22px,3vw,42px) 0;
}
.tailor-brandline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:1.25rem;
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(244,216,154,.84);
}
.tailor-brand-mark{
  width:34px;
  height:34px;
  border:1px solid rgba(217,167,104,.55);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--display);
  letter-spacing:.02em;
  color:var(--gold-bright);
}
.tailor-atelier h2{
  max-width:760px;
  margin-top:.65rem;
  font-family:var(--display);
  font-size:clamp(3.2rem,6.1vw,6.8rem);
  line-height:.91;
  letter-spacing:-.045em;
  color:var(--ivory);
  text-shadow:0 12px 34px rgba(0,0,0,.38);
}
.tailor-atelier h2 em{
  display:inline-block;
  margin-top:.08em;
  color:var(--sand);
  font-weight:400;
}
.tailor-atelier-intro{
  max-width:610px;
  margin-top:1.7rem;
  font-size:clamp(.95rem,1.16vw,1.08rem);
  line-height:1.75;
  color:rgba(237,230,214,.78);
  text-shadow:0 2px 14px rgba(0,0,0,.58);
}
.tailor-atelier-prompts{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:1.8rem;
}
.tailor-prompt{
  appearance:none;
  border:1px solid rgba(217,167,104,.34);
  background:rgba(4,8,6,.44);
  backdrop-filter:blur(10px);
  color:rgba(237,230,214,.72);
  border-radius:999px;
  padding:11px 17px;
  font:inherit;
  font-size:.65rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.tailor-prompt:hover,.tailor-prompt:focus-visible{
  color:var(--ivory);
  border-color:rgba(244,216,154,.8);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  outline:none;
}
.tailor-prompt.is-active{
  color:#120d07;
  background:linear-gradient(135deg,var(--gold-bright),var(--sand));
  border-color:var(--gold-bright);
  box-shadow:0 8px 24px rgba(217,167,104,.18);
}
.tailor-atelier-live{
  min-height:2.7em;
  max-width:620px;
  margin-top:1.7rem;
  font-family:var(--display);
  font-size:clamp(1.65rem,2.4vw,2.55rem);
  line-height:1.16;
  color:var(--ivory);
  text-shadow:0 4px 20px rgba(0,0,0,.5);
  transition:opacity .25s ease,transform .25s ease;
}
.tailor-atelier-live.is-changing{opacity:0;transform:translateY(6px)}
.tailor-atelier-actions{
  margin-top:1.45rem;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.tailor-begin-link{
  appearance:none;
  border:0;
  border-bottom:1px solid rgba(217,167,104,.44);
  background:transparent;
  color:var(--sand);
  padding:0 0 8px;
  font:inherit;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .3s ease,border-color .3s ease,transform .3s ease;
}
.tailor-begin-link span{display:inline-block;margin-left:8px;transition:transform .3s ease}
.tailor-begin-link:hover,.tailor-begin-link:focus-visible{color:var(--gold-bright);border-color:var(--gold-bright);outline:none}
.tailor-begin-link:hover span,.tailor-begin-link:focus-visible span{transform:translateX(5px)}
.tailor-atelier-note{
  max-width:360px;
  font-size:.68rem;
  line-height:1.55;
  color:rgba(237,230,214,.42);
}
.tailor-atelier-card{
  grid-column:1 / -1;
  grid-row:2;
  position:relative;
  display:grid;
  grid-template-columns:minmax(180px,.7fr) minmax(0,2.5fr);
  gap:clamp(22px,3vw,48px);
  padding:clamp(24px,3vw,38px);
  border:1px solid rgba(217,167,104,.30);
  background:linear-gradient(110deg,rgba(5,10,7,.90),rgba(7,15,10,.74));
  box-shadow:0 28px 80px rgba(0,0,0,.28);
  backdrop-filter:blur(16px) saturate(.85);
}
.tailor-atelier-card::before,.tailor-atelier-card::after{
  content:'';
  position:absolute;
  width:34px;
  height:34px;
  pointer-events:none;
}
.tailor-atelier-card::before{top:-1px;left:-1px;border-top:1px solid var(--sand);border-left:1px solid var(--sand)}
.tailor-atelier-card::after{right:-1px;bottom:-1px;border-right:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.tailor-card-intro{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding-right:clamp(16px,2vw,34px);border-right:1px solid rgba(237,230,214,.12)}
.tailor-card-kicker{font-family:var(--display);font-size:clamp(1.18rem,1.7vw,1.55rem);line-height:1.18;color:var(--sand)}
.tailor-atelier-card ol{list-style:none;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.tailor-atelier-card li{display:block;padding:0 clamp(18px,2.2vw,34px);border-left:1px solid rgba(237,230,214,.10)}
.tailor-atelier-card li:first-child{border-left:0}
.tailor-atelier-card li>span{display:block;margin-bottom:.75rem;font-size:.68rem;letter-spacing:.14em;color:rgba(217,167,104,.8)}
.tailor-atelier-card strong{display:block;font-family:var(--display);font-size:clamp(.98rem,1.15vw,1.14rem);line-height:1.35;color:var(--ivory)}
.tailor-atelier-card small{display:block;margin-top:.55rem;font-size:.75rem;line-height:1.65;color:rgba(237,230,214,.55)}
.tailor-card-seal{margin:0;display:flex;align-items:center;gap:12px}
.tailor-card-seal span{width:42px;height:42px;border:1px solid rgba(217,167,104,.58);border-radius:50%;display:grid;place-items:center;font-family:var(--display);color:var(--sand)}
.tailor-card-seal small{font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,230,214,.5)}
@media(min-width:901px){
  .tailor-atelier-copy{padding-right:clamp(20px,3vw,52px)}
}
@media(max-width:900px){
  .tailor-atelier-bg{background-position:62% center;filter:saturate(.78) contrast(1.08) brightness(.62)}
  .tailor-atelier::before{background:linear-gradient(180deg,rgba(4,8,6,.85) 0%,rgba(4,8,6,.62) 42%,rgba(4,8,6,.88) 100%)}
  .tailor-atelier-wrap{min-height:auto;grid-template-columns:1fr;grid-template-rows:auto auto;padding-top:92px}
  .tailor-atelier-copy{grid-column:1;grid-row:1;max-width:680px}
  .tailor-atelier-card{grid-column:1;grid-row:2;grid-template-columns:1fr}
  .tailor-card-intro{padding-right:0;padding-bottom:20px;border-right:0;border-bottom:1px solid rgba(237,230,214,.12)}
  .tailor-atelier-card ol{grid-template-columns:1fr}
  .tailor-atelier-card li{padding:18px 0;border-left:0;border-top:1px solid rgba(237,230,214,.09)}
  .tailor-atelier-card li:first-child{border-top:0}
}
@media(max-width:600px){
  .tailor-atelier-bg{background-position:68% center}
  .tailor-atelier h2{font-size:clamp(3rem,14vw,4.7rem)}
  .tailor-atelier-actions{align-items:flex-start;flex-direction:column}
  .tailor-prompt{padding:10px 13px}
  .tailor-atelier-card{padding:22px 18px}
}
@media(prefers-reduced-motion:reduce){.tailor-prompt,.tailor-atelier-live,.tailor-begin-link,.tailor-begin-link span{transition:none}}

/* ============================================================
   Hidden Moments — The Living Archive
   Isolated editorial motion system; no external/missing assets
   ============================================================ */
.hidden-moments{position:relative;padding:clamp(6rem,10vw,10rem) 0;overflow:hidden}
.hidden-moments__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.7fr);gap:clamp(2rem,7vw,7rem);align-items:end;padding:0 clamp(1.25rem,6vw,7rem);margin-bottom:clamp(2.5rem,5vw,5rem)}
.hidden-moments__head h2{font-size:clamp(2.8rem,6vw,6.8rem);line-height:.94;letter-spacing:-.045em;margin:.7rem 0 0}
.hidden-moments__head h2 em{font-weight:400}
.hidden-moments__head>p{max-width:34rem;line-height:1.75;opacity:.72}
.hidden-moments__rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(310px,38vw);gap:1rem;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;padding:0 clamp(1.25rem,6vw,7rem) 1.5rem;scrollbar-width:none}
.hidden-moments__rail::-webkit-scrollbar{display:none}
.moment-card{position:relative;min-height:clamp(480px,66vh,720px);overflow:hidden;scroll-snap-align:start;color:#fff;isolation:isolate;padding:clamp(1.5rem,3vw,3rem);display:flex;flex-direction:column;justify-content:space-between}
.moment-card::before,.moment-card::after{content:"";position:absolute;inset:0;z-index:-2}
.moment-card::after{z-index:-1;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.12),transparent 34%),linear-gradient(180deg,transparent 20%,rgba(0,0,0,.58) 100%)}
.moment-card--atlantic::before{background:linear-gradient(145deg,#183b42 0%,#5c7d80 45%,#b89978 100%)}
.moment-card--atlas::before{background:linear-gradient(145deg,#243126 0%,#6b7658 46%,#b59b72 100%)}
.moment-card--sky::before{background:linear-gradient(145deg,#5f4658 0%,#c78366 46%,#e5b77c 100%)}
.moment-card--night::before{background:linear-gradient(145deg,#161713 0%,#4b3929 48%,#8a6037 100%)}
.moment-card__index{font-size:clamp(4rem,8vw,9rem);line-height:.8;letter-spacing:-.06em;opacity:.12;font-weight:600}
.moment-card__content{position:relative}
.moment-card__meta{display:flex;justify-content:space-between;gap:1rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.72;margin-bottom:1rem}
.moment-card h3{font-size:clamp(2rem,3.5vw,4rem);line-height:1;margin:0 0 1rem;max-width:11ch}
.moment-card p{max-width:34rem;line-height:1.65;opacity:.84;margin:0 0 1.6rem}
.moment-card__actions{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
.moment-link{appearance:none;border:0;border-bottom:1px solid rgba(255,255,255,.55);background:transparent;color:inherit;padding:.45rem 0;font:inherit;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.moment-link--quiet{opacity:.68;border-bottom-color:rgba(255,255,255,.25)}
.hidden-moments__footer{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2rem clamp(1.25rem,6vw,7rem) 0}
.moments-proof{display:flex;gap:1rem;align-items:flex-start}
.moments-proof__mark{font-size:.7rem;margin-top:.3rem}
.moments-proof p{margin:0;font-size:.82rem;line-height:1.6;opacity:.7}
.moments-instagram{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.moment-concierge{margin:clamp(4rem,8vw,8rem) clamp(1.25rem,6vw,7rem) 0;padding:clamp(2rem,5vw,5rem);display:grid;grid-template-columns:.45fr 1fr auto;gap:2rem;align-items:center;border:1px solid rgba(20,35,26,.16)}
.moment-concierge h3{font-size:clamp(1.8rem,3vw,3.4rem);margin:0 0 .6rem}
.moment-concierge p{margin:0;max-width:38rem;line-height:1.65;opacity:.7}
@media(max-width:900px){.hidden-moments__head{grid-template-columns:1fr}.hidden-moments__rail{grid-auto-columns:82vw}.hidden-moments__footer{align-items:flex-start;flex-direction:column}.moment-concierge{grid-template-columns:1fr}}


/* ============================================================
   Hidden Moments — photographic 3D touch / horizontal selection
   Isolated to the living archive. No global systems modified.
   ============================================================ */
.hidden-moments__rail{
  perspective:1400px;
  perspective-origin:50% 50%;
  scroll-padding-inline:clamp(1.25rem,6vw,7rem);
  touch-action:pan-x pan-y pinch-zoom;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
}
.hidden-moments__rail.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.moment-card{
  --moment-rotate:0deg;
  --moment-z:0px;
  --moment-scale:.94;
  --moment-media-scale:1.06;
  transform:rotateY(var(--moment-rotate)) translateZ(var(--moment-z)) scale(var(--moment-scale));
  transform-style:preserve-3d;
  transform-origin:center center;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),filter .42s ease,box-shadow .42s ease;
  will-change:transform;
  background:#111;
  border-radius:2px;
  box-shadow:0 18px 55px rgba(0,0,0,.16);
}
.moment-card.is-selected{
  box-shadow:0 30px 85px rgba(0,0,0,.28);
}
.moment-card__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
  transform:scale(var(--moment-media-scale));
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease;
  will-change:transform;
  pointer-events:none;
}
.moment-card::before{background:linear-gradient(180deg,rgba(4,8,6,.03) 0%,rgba(4,8,6,.12) 46%,rgba(4,8,6,.56) 100%)}
.moment-card::after{background:radial-gradient(circle at 72% 18%,rgba(255,255,255,.12),transparent 32%),linear-gradient(180deg,rgba(0,0,0,.03) 10%,rgba(0,0,0,.68) 100%)}
.moment-card--atlantic::before,.moment-card--atlas::before,.moment-card--sky::before,.moment-card--night::before,.moment-card--magic::before{background:linear-gradient(180deg,rgba(5,8,7,.02) 0%,rgba(5,8,7,.18) 52%,rgba(5,8,7,.64) 100%)}
.moment-card__index,.moment-card__content{transform:translateZ(38px)}
.moment-card__content{text-shadow:0 2px 22px rgba(0,0,0,.24)}
.moment-card:focus-within{outline:1px solid rgba(255,255,255,.7);outline-offset:-1px}
.hidden-moments__rail:focus-visible{outline:1px solid rgba(20,35,26,.3);outline-offset:6px}
@media (hover:hover) and (pointer:fine){
  .moment-card:not(.is-selected):hover{--moment-scale:.965;--moment-media-scale:1.035}
}
@media(max-width:900px){
  .hidden-moments__rail{grid-auto-columns:84vw;padding-inline:8vw;scroll-padding-inline:8vw}
  .moment-card{min-height:min(68vh,680px)}
}
@media (prefers-reduced-motion:reduce){
  .moment-card,.moment-card__media{transition:none!important;transform:none!important}
  .hidden-moments__rail{scroll-behavior:auto}
}

/* ============================================================
   Product covers — 2026-07-20 isolated enhancement
   Keeps the existing experience card structure and interactions intact.
   ============================================================ */
.exp-card .exp-cover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  opacity:.72;
  transform:scale(1.015);
  transition:transform .9s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
  filter:saturate(.88) contrast(1.03) brightness(.78);
  pointer-events:none;
}
.exp-card::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(14,18,16,.10) 0%, rgba(14,18,16,.35) 38%, rgba(14,18,16,.94) 100%),
    linear-gradient(90deg, rgba(14,18,16,.28), transparent 58%);
}
.exp-card::before{ z-index:1; }
.exp-card > :not(.exp-cover){ position:relative; z-index:2; }
.exp-card .exp-num{ position:absolute; z-index:2; }
.exp-card:focus-visible .exp-cover{
  transform:scale(1.065);
  opacity:.84;
  filter:saturate(1) contrast(1.05) brightness(.82);
}
@media (hover:hover) and (pointer:fine){
  .exp-card:hover .exp-cover{
    transform:scale(1.065);
    opacity:.84;
    filter:saturate(1) contrast(1.05) brightness(.82);
  }
}
@media (hover:none){
  .exp-card:active .exp-cover{ transform:scale(1.03); opacity:.8; }
}
@media (prefers-reduced-motion: reduce){
  .exp-card .exp-cover{ transition:none; transform:none; }
  .exp-card:hover .exp-cover,
  .exp-card:focus-visible .exp-cover{ transform:none; }
}


/* ============================================================
   PRIVATE REQUEST — CINEMATIC EMAIL-PRIMARY MODULE (isolated)
   Fonts and design tokens (--ink/--gold/--display/...) come from
   the master :root block at the top of this file — not redefined
   here, so this module can never drift out of sync with the rest
   of the site. This block is desktop-first with explicit tablet
   and mobile overrides below.
   ============================================================ */
.request-cinematic-section{ padding:0 !important; }

.tr-root{
  --local-perspective: 1600px;
  --door-w: clamp(16px, 3vw, 34px);   /* stays inside the frame padding — never covers a field */
  margin:0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(28,107,63,.28), transparent 60%),
    radial-gradient(90% 70% at 85% 110%, rgba(217,167,104,.10), transparent 55%),
    var(--ink);
  color:var(--ivory);
  font-family:var(--body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  padding:clamp(64px,10vw,120px) clamp(16px,4vw,32px);
  overflow-x:hidden;
  position:relative;
}
.tr-root *{ box-sizing:border-box; }
.tr-root img{ max-width:100%; display:block; }
.tr-root button{ font-family:inherit; background:none; border:0; color:inherit; cursor:pointer; }
.tr-root h1,.tr-root h2,.tr-root h3,.tr-root p{ margin:0; }
.tr-root ::selection{ background:var(--gold); color:var(--ink); }

/* drifting gold motes — ambient depth, not a distraction */
.tr-motes{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.tr-motes span{
  position:absolute; bottom:-6%; width:3px; height:3px; border-radius:50%;
  background:var(--gold-bright); opacity:0; filter:blur(.2px);
  animation:tr-rise linear infinite;
}
@keyframes tr-rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  8%{ opacity:.55; }
  92%{ opacity:.3; }
  100%{ transform:translateY(-112vh) translateX(var(--drift,20px)); opacity:0; }
}

/* ============================================================
   STAGE — perspective wrapper that holds the two door leaves
   ============================================================ */
.tr-stage-outer{
  position:relative; z-index:1; width:100%; max-width:720px; margin:0 auto;
  perspective:var(--local-perspective);
}
.tr-frame{
  position:relative;
  border:1px solid rgba(217,167,104,.28);
  background:linear-gradient(165deg,#0a1a12,#0d1f16 55%,#08130d);
  box-shadow:0 40px 120px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.25);
  /* horizontal padding is always >= --door-w so the doors stay in the
     margin and never sit on top of a label, input or button */
  padding:clamp(28px,5vw,36px) clamp(40px,8vw,72px) clamp(28px,5vw,40px);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
}

/* door leaves — the signature motion. Purely decorative framing that
   swings open, hinge-style, one notch per chapter — echoing the brand
   mark's doorway. Sized to always live inside .tr-frame's own padding. */
.tr-door{
  position:absolute; top:0; bottom:0; width:var(--door-w);
  background:
    linear-gradient(180deg, rgba(217,167,104,.14), transparent 30%),
    linear-gradient(160deg,#0f2318,#0a170f 60%,#060f0a);
  border:1px solid rgba(217,167,104,.35);
  transform-style:preserve-3d;
  transition:transform 1.1s cubic-bezier(.22,.9,.26,1);
  pointer-events:none;
  z-index:1;
}
.tr-door::after{
  content:''; position:absolute; inset:8px;
  border:1px solid rgba(237,230,214,.09);
}
.tr-door.left{ left:0; transform-origin:left center; border-right:0; }
.tr-door.right{ right:0; transform-origin:right center; border-left:0; }
/* progressive opening, driven by data-step on .tr-frame */
.tr-frame[data-step="0"] .tr-door.left{ transform:rotateY(0deg); }
.tr-frame[data-step="0"] .tr-door.right{ transform:rotateY(0deg); }
.tr-frame[data-step="1"] .tr-door.left{ transform:rotateY(-28deg); }
.tr-frame[data-step="1"] .tr-door.right{ transform:rotateY(28deg); }
.tr-frame[data-step="2"] .tr-door.left{ transform:rotateY(-52deg); }
.tr-frame[data-step="2"] .tr-door.right{ transform:rotateY(52deg); }
.tr-frame[data-step="3"] .tr-door.left{ transform:rotateY(-78deg); }
.tr-frame[data-step="3"] .tr-door.right{ transform:rotateY(78deg); }

/* ============================================================
   HEADER
   ============================================================ */
.tr-head{ position:relative; z-index:2; text-align:center; padding:6px 0 26px; }
.tr-mark{ width:34px; height:41px; margin:0 auto 14px; color:var(--gold); opacity:.92; }
.tr-mark svg{ width:100%; height:100%; display:block; }
.tr-eyebrow{
  display:block; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sand); margin-bottom:.8em;
}
.tr-head h2{
  font-family:var(--display); font-weight:400; font-size:clamp(1.6rem,4.6vw,2.5rem);
  line-height:1.1; letter-spacing:-.01em;
}
.tr-head p{
  margin-top:.85em; font-family:var(--display); font-style:italic;
  color:rgba(237,230,214,.62); font-size:.98rem; max-width:38ch; margin-left:auto; margin-right:auto;
}

/* ============================================================
   STEP TRACKER
   ============================================================ */
.tr-tracker{
  position:relative; z-index:2; display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(8px,3vw,22px); margin-bottom:clamp(24px,5vw,36px);
}
.tr-tracker .step{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:44px; }
.tr-tracker .num{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-size:.78rem; color:rgba(237,230,214,.4);
  border:1px solid rgba(237,230,214,.18); transition:all .5s var(--ease);
}
.tr-tracker .label{
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(237,230,214,.32);
  transition:color .5s var(--ease); text-align:center;
}
.tr-tracker .step.is-done .num{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.tr-tracker .step.is-active .num{ border-color:var(--gold); color:var(--gold-bright); box-shadow:0 0 0 4px rgba(217,167,104,.14); }
.tr-tracker .step.is-active .label{ color:var(--gold-bright); }
.tr-tracker .step.is-done .label{ color:rgba(237,230,214,.55); }

/* ============================================================
   PANELS — quiet crossfade so the doors keep all the drama
   ============================================================ */
.tr-viewport{ position:relative; z-index:2; min-height:340px; }
.tr-panel{
  position:absolute; inset:0; opacity:0; transform:translateY(14px) scale(.985);
  pointer-events:none; transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.tr-panel.is-active{ position:relative; opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.tr-chapter{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sand); }
.tr-panel h3{
  font-family:var(--display); font-weight:400; font-size:clamp(1.2rem,3.2vw,1.55rem);
  margin-top:.5em; margin-bottom:.35em;
}
.tr-panel .lede{ font-family:var(--display); font-style:italic; color:rgba(237,230,214,.6); font-size:.94rem; margin-bottom:1.6em; }

.tr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.tr-field{ display:flex; flex-direction:column; gap:6px; }
.tr-field.full{ grid-column:1 / -1; }
.tr-field label{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(237,230,214,.5); }
.tr-field input, .tr-field select, .tr-field textarea{
  background:rgba(6,15,10,.55); border:1px solid rgba(237,230,214,.18); color:var(--ivory);
  font-family:var(--body); font-size:16px; padding:.75em .85em; border-radius:2px;
  transition:border-color .3s, background .3s, transform .2s;
}
.tr-field textarea{ resize:vertical; min-height:96px; }
.tr-field select option{ background:var(--charcoal); color:var(--ivory); }
.tr-field input:focus, .tr-field select:focus, .tr-field textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(217,167,104,.06); transform:translateY(-1px);
}
.tr-field input:invalid:not(:placeholder-shown){ border-color:rgba(180,34,44,.55); }
.tr-field input[aria-invalid="true"],
.tr-field select[aria-invalid="true"],
.tr-field textarea[aria-invalid="true"]{ border-color:rgba(180,34,44,.6); }

/* review (chapter 4) */
.tr-review{ display:grid; gap:2px; border:1px solid rgba(237,230,214,.14); }
.tr-review .row{ display:flex; justify-content:space-between; gap:14px; padding:.75em 1em; background:rgba(237,230,214,.03); font-size:.9rem; flex-wrap:wrap; }
.tr-review .row:nth-child(even){ background:rgba(237,230,214,.015); }
.tr-review .row span:first-child{ color:rgba(237,230,214,.45); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; flex:0 0 auto; }
.tr-review .row span:last-child{ text-align:right; color:var(--ivory); font-family:var(--display); font-style:italic; word-break:break-word; }
.tr-review .row.empty span:last-child{ color:rgba(237,230,214,.28); }

/* ============================================================
   NAV
   ============================================================ */
.tr-nav{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; margin-top:clamp(24px,5vw,32px); gap:14px; }
.tr-btn{
  padding:.9em 1.6em; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid rgba(237,230,214,.22); transition:all .35s var(--ease); min-height:44px;
}
.tr-btn.ghost{ color:rgba(237,230,214,.55); }
.tr-btn.ghost:hover{ border-color:var(--sand); color:var(--sand); }
.tr-btn.ghost:disabled{ opacity:0; pointer-events:none; }
.tr-btn.primary{
  background:var(--ivory); color:var(--ink); border-color:var(--ivory);
  font-family:var(--display); font-style:italic; letter-spacing:.02em; text-transform:none; font-size:.92rem;
}
.tr-btn.primary:hover{ background:var(--gold-bright); transform:translateY(-2px); }
.tr-btn.primary:disabled{ opacity:.35; pointer-events:none; }
.tr-note{ display:block; text-align:center; margin-top:14px; font-size:.72rem; color:rgba(237,230,214,.4); }

/* ============================================================
   THE SEAL — final confirmation overlay
   ============================================================ */
.tr-seal-overlay{
  position:absolute; inset:0; z-index:10; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 50% 40%, rgba(13,35,24,.97), rgba(6,15,10,.99));
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s; padding:24px;
}
.tr-seal-overlay.is-shown{ opacity:1; visibility:visible; transition:opacity .5s ease; }
.tr-wax{
  width:74px; height:74px; border-radius:50%; display:grid; place-items:center; margin:0 auto 22px;
  background:radial-gradient(circle at 36% 30%, #a53228, #6d1e1c 55%, #38100f);
  border:2px solid #541411; box-shadow:0 12px 30px rgba(0,0,0,.55);
  transform:scale(0) rotate(-25deg);
}
.tr-seal-overlay.is-shown .tr-wax{ animation:tr-stamp .7s cubic-bezier(.2,1.4,.4,1) .15s forwards; }
@keyframes tr-stamp{ 0%{ transform:scale(0) rotate(-25deg); } 60%{ transform:scale(1.15) rotate(4deg); } 100%{ transform:scale(1) rotate(0deg); } }
.tr-wax svg{ width:30px; height:36px; color:#e8c9a9; opacity:.92; }
.tr-seal-overlay h3{ font-family:var(--display); font-weight:400; font-size:1.6rem; }
.tr-seal-overlay p{ margin-top:.7em; color:rgba(237,230,214,.6); max-width:36ch; font-size:.94rem; margin-left:auto; margin-right:auto; }
.tr-seal-actions{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.tr-seal-actions a{
  padding:.85em 1.5em; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(237,230,214,.25); color:var(--ivory); transition:all .3s; min-height:44px; display:inline-flex; align-items:center;
}
.tr-seal-actions a.email-primary{ background:var(--ivory); border-color:var(--ivory); color:var(--ink); }
.tr-seal-actions a.wa{ background:var(--green); border-color:var(--green); }
.tr-seal-actions a:hover{ transform:translateY(-2px); border-color:var(--gold); }

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width:820px){
  .tr-frame{ padding-inline:clamp(30px,7vw,52px); }
}

/* ============================================================
   RESPONSIVE — mobile
   ============================================================ */
@media (max-width:620px){
  .tr-grid{ grid-template-columns:1fr; }
  .tr-root{ padding-block:clamp(48px,12vw,80px); }
  .tr-frame{ padding-inline:clamp(26px,9vw,40px); }
  .tr-door{ width:clamp(10px,2.6vw,18px); }
  .tr-viewport{ min-height:380px; }
  .tr-nav{ flex-direction:column-reverse; align-items:stretch; }
  .tr-nav .tr-btn{ width:100%; text-align:center; }
  .tr-nav .tr-btn.ghost{ border-color:transparent; }
  .tr-seal-actions{ flex-direction:column; align-items:stretch; }
  .tr-seal-actions a{ justify-content:center; }
}
@media (max-width:380px){
  .tr-tracker{ gap:8px; }
  .tr-tracker .label{ display:none; } /* numbers alone stay legible at this width */
}

/* motion + input safety */
@media (prefers-reduced-motion: reduce){
  .tr-door, .tr-panel, .tr-frame, .tr-wax{ transition:none !important; animation:none !important; }
  .tr-motes{ display:none; }
}


/* ============================================================
   Modification 05 — Hidden Moments desktop cinematic deck
   Large screens reveal the full archive at once; hover/focus/select
   creates the movement instead of relying on hidden horizontal scroll.
   Mobile/tablet retain the existing native horizontal selector.
   ============================================================ */
@media (min-width:1100px){
  .hidden-moments__rail{
    display:flex;
    grid-auto-flow:unset;
    grid-auto-columns:unset;
    gap:clamp(.55rem,.8vw,1rem);
    overflow:visible;
    padding:0 clamp(1.25rem,4vw,5rem) 2rem;
    scroll-snap-type:none;
    cursor:default;
    perspective:1800px;
    perspective-origin:50% 46%;
    align-items:stretch;
  }
  .moment-card{
    --moment-rotate:0deg;
    --moment-z:0px;
    --moment-scale:1;
    --moment-media-scale:1.055;
    --moment-rx:0deg;
    --moment-ry:0deg;
    --moment-lift:0px;
    --spot-x:50%;
    --spot-y:32%;
    flex:1 1 0;
    min-width:0;
    min-height:clamp(500px,62vh,690px);
    padding:clamp(1.1rem,1.65vw,2.2rem);
    transform:translateY(var(--moment-lift)) translateZ(var(--moment-z)) rotateX(var(--moment-rx)) rotateY(var(--moment-ry)) scale(var(--moment-scale));
    transform-origin:center center;
    transition:flex .62s cubic-bezier(.16,.84,.44,1),transform .34s cubic-bezier(.16,.84,.44,1),filter .5s ease,box-shadow .5s ease,opacity .5s ease;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
  }
  .moment-card::after{
    background:
      radial-gradient(circle at var(--spot-x) var(--spot-y),rgba(255,244,211,.26),transparent 24%),
      linear-gradient(180deg,rgba(0,0,0,.04) 8%,rgba(0,0,0,.72) 100%);
    transition:background .2s linear;
  }
  .moment-card__media{
    transform:scale(var(--moment-media-scale));
    transition:transform .7s cubic-bezier(.16,.84,.44,1),filter .5s ease;
  }
  .moment-card__index{
    font-size:clamp(3.2rem,5vw,6.5rem);
    transition:opacity .45s ease,transform .55s cubic-bezier(.16,.84,.44,1);
  }
  .moment-card__content{
    transform:translateZ(42px);
    transition:transform .55s cubic-bezier(.16,.84,.44,1),opacity .45s ease;
  }
  .moment-card h3{font-size:clamp(1.55rem,2.5vw,3rem)}
  .moment-card p{
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .hidden-moments__rail.has-active .moment-card:not(.is-selected){
    opacity:.72;
    filter:saturate(.72) brightness(.78);
    --moment-scale:.965;
  }
  .hidden-moments__rail .moment-card.is-selected,
  .hidden-moments__rail .moment-card:focus-within{
    flex:2.25 1 0;
    opacity:1;
    filter:saturate(1.06) brightness(1.02);
    --moment-scale:1.018;
    --moment-z:34px;
    --moment-lift:-10px;
    --moment-media-scale:1.015;
    box-shadow:0 42px 110px rgba(0,0,0,.34),0 0 0 1px rgba(217,167,104,.32);
    z-index:5;
  }
  .hidden-moments__rail .moment-card.is-selected .moment-card__content,
  .hidden-moments__rail .moment-card:focus-within .moment-card__content{transform:translateZ(62px)}
  .hidden-moments__rail .moment-card.is-selected .moment-card__index,
  .hidden-moments__rail .moment-card:focus-within .moment-card__index{opacity:.2;transform:translateZ(58px) translateY(-4px)}
  .hidden-moments__rail .moment-card.is-selected .moment-card__media,
  .hidden-moments__rail .moment-card:focus-within .moment-card__media{filter:contrast(1.025) saturate(1.06)}
  .hidden-moments__rail .moment-card{cursor:pointer}
  .hidden-moments__rail .moment-card a,
  .hidden-moments__rail .moment-card button{cursor:pointer}
}
@media (min-width:1400px){
  .hidden-moments__rail{padding-inline:clamp(2rem,5vw,7rem)}
  .hidden-moments__rail .moment-card.is-selected,
  .hidden-moments__rail .moment-card:focus-within{flex:2.55 1 0}
}
@media (min-width:1100px) and (prefers-reduced-motion:reduce){
  .moment-card{transform:none!important;transition:none!important}
  .hidden-moments__rail .moment-card.is-selected,
  .hidden-moments__rail .moment-card:focus-within{flex:1.65 1 0}
}


/* ============================================================
   Modification 04 — Hidden Collection photographic covers V2
   Long-term-safe mapping: direct stylesheet URLs, no inline URL vars.
   ============================================================ */
.collection-category[data-collection-category="stay"]::before{
  background-image:url("../assets/img/collection/01-stay-cover-v2.jpg");
  background-position:center center;
}
.collection-category[data-collection-category="activities"]::before{
  background-image:url("../assets/img/collection/02-things-to-do-cover-v2.jpg");
  background-position:center center;
}
.collection-category[data-collection-category="discover"]::before{
  background-image:url("../assets/img/collection/03-cities-cover-v2.jpg");
  background-position:center center;
}
.collection-category[data-collection-category="move"]::before{
  background-image:url("../assets/img/collection/04-move-cover-v2.jpg");
  background-position:center center;
}
.collection-grid .collection-category:nth-child(n){grid-column:span 6;min-height:310px}
@media(max-width:760px){
  .collection-grid .collection-category:nth-child(n){grid-column:span 12;min-height:260px}
}


/* ============================================================
   Modification 10 — Mobile smoothing & spacing refinement
   Additive only. No selector renamed, removed, or restructured;
   no copy, pricing, JS behavior, or 3D/GSAP systems touched.
   Scope: touch-scroll smoothness + breathing room for headings,
   descriptions and meta on small screens across existing sections.
   ============================================================ */

/* Removes the grey "flash" on tap so every card/button/link feels
   cleaner and more app-like on touch devices. Purely cosmetic. */
@media (hover:none){
  a, button, .exp-card, .collection-category, .moment-card, .btn{
    -webkit-tap-highlight-color:transparent;
  }
}

/* Smoother momentum scrolling inside the full-screen layers on iOS;
   these were already isolated/contained, this only adds inertia. */
.experience-layer-shell,
.collection-layer-shell{
  -webkit-overflow-scrolling:touch;
}

@media (max-width:620px){

  /* Section intros: a touch more air between the eyebrow, the
     heading and the paragraph that follows it. */
  .section-head{ margin-bottom:clamp(30px,9vw,56px); }
  .section-head h2{ margin-bottom:.1em; }
  .section-head p{ margin-top:.85em; line-height:1.7; }

  /* Experience cards: title, description and price no longer sit
     shoulder to shoulder — each block gets its own clear space. */
  .exp-card{ padding:36px 26px; }
  .exp-title{ margin-top:.55em; }
  .exp-desc{
    margin-top:1rem;
    max-width:36ch;
    font-size:.92rem;
    line-height:1.7;
  }
  .exp-meta{ margin-top:1.9em; }

  /* Collection cards: separate the label from the description so
     it doesn't crowd the image caption on narrow phones. */
  .collection-category small{ margin-top:1.1rem; line-height:1.55; }
  .collection-category-action{ padding-bottom:.5rem; }

  /* Principles / values grid: a little extra room per item now
     that each sits full-width and stacked. */
  .principles-grid article p{ margin-top:.6em; line-height:1.65; }

  /* Hidden Moments cards: keep the caption clear of the actions row. */
  .moment-card p{ margin-bottom:1.9rem; }
  .moment-card__meta{ margin-bottom:1.25rem; }

  /* Comfortable 44px minimum touch targets for small text links,
     without changing their visual size or underline styling. */
  .exp-link, .moment-link, .collection-category-action, .nav-cta{
    padding-block:.6em;
  }
}

@media (max-width:480px){
  .exp-card{ padding:32px 22px; min-height:300px; }
  .hero-title{ letter-spacing:-.005em; }
  .moment-card{ padding:clamp(1.35rem,5vw,2rem); }
}

@media (prefers-reduced-motion: reduce){
  .experience-layer-shell,
  .collection-layer-shell{ scroll-behavior:auto; }
}

/* ============================================================
   Modification 13 — Premium Cinematic Refinement Pass (2026-07-26)
   Purely additive/isolated. No selector above this block was
   renamed, removed or restructured; no HTML, copy, pricing,
   business logic, Secret Invitation mechanics, or JS behavior
   was changed. This block only refines motion timing, depth,
   light and touch/press feedback on existing elements site-wide.
   Respects prefers-reduced-motion throughout.
   ============================================================ */
:root{
  --ease-luxury: cubic-bezier(.19,1,.22,1);
  --ease-soft:   cubic-bezier(.22,.61,.36,1);
}

/* ---------- Typography: quieter, more deliberate rhythm ---------- */
h1, h2, h3, .exp-title, .collection-category strong{
  text-wrap: balance;
}
.section-head p, .exp-desc, .manifesto-text{
  text-wrap: pretty;
}
.eyebrow, .exp-tag, .collection-category-kicker{
  transition: letter-spacing .5s var(--ease-soft), color .4s ease;
}
@media (hover:hover) and (pointer:fine){
  .exp-card:hover .exp-tag{ letter-spacing:.22em; }
}

/* ---------- Buttons: physical, glassy, satisfying ---------- */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .5s var(--ease-luxury),
    background .35s,
    border-color .35s,
    color .35s,
    box-shadow .5s var(--ease-luxury);
  will-change:transform;
}
.btn::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%);
  opacity:.6;
  pointer-events:none;
}
.btn > *{ position:relative; z-index:2; }
.btn-primary{
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -14px rgba(0,0,0,.55);
}
.btn-ghost{
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{
    box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 22px 40px -18px rgba(0,0,0,.6);
  }
  .btn-ghost:hover{
    box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 18px 32px -20px rgba(0,0,0,.55);
  }
  .btn-primary:hover, .btn-ghost:hover{ transform:translateY(-3px); }
}
.btn:active{ transition-duration:.15s; }
#wa-float{ transition:transform .5s var(--ease-luxury), box-shadow .5s var(--ease-luxury); }
@media (hover:hover) and (pointer:fine){
  #wa-float:hover{ box-shadow:0 18px 34px -12px rgba(0,0,0,.5); }
}

/* ---------- Cards: light, depth and an edge highlight ---------- */
.exp-card, .collection-category, .moment-card{
  transition-timing-function: var(--ease-luxury);
}
.exp-card{
  box-shadow:0 0 0 1px rgba(237,230,214,0) inset;
  transition:
    background .6s var(--ease-luxury),
    transform .6s var(--ease-luxury),
    box-shadow .6s var(--ease-luxury);
}
@media (hover:hover) and (pointer:fine){
  .exp-card:hover{
    box-shadow:0 1px 0 rgba(217,167,104,.18) inset, 0 28px 56px -20px rgba(0,0,0,.5);
  }
}
.collection-category{
  transition:
    transform .6s var(--ease-luxury),
    box-shadow .6s var(--ease-luxury);
}
@media (hover:hover) and (pointer:fine){
  .collection-category:hover, .collection-category:focus-visible{
    box-shadow:0 1px 0 rgba(217,167,104,.14) inset, 0 28px 70px -18px rgba(0,0,0,.4);
  }
}

/* cursor-reactive tilt hook — values written by an additive, pointer:fine,
   motion-safe-only script in main.js (Modification 13); inert unless
   that script sets the custom properties below. */
@media (hover:hover) and (pointer:fine){
  .tilt-hover{
    transform:
      perspective(900px)
      rotateX(var(--tilt-x, 0deg))
      rotateY(var(--tilt-y, 0deg))
      translateY(var(--tilt-lift, 0px));
    transition: transform .5s var(--ease-luxury);
  }
  .tilt-hover.is-tilting{ transition: transform .12s linear; }
}

/* ---------- Section entrances: a touch slower, staggered ---------- */
@media not (prefers-reduced-motion: reduce){
  .reveal{
    transition-property: opacity, transform;
    transition-duration: .9s;
    transition-timing-function: var(--ease-luxury);
  }
  .exp-grid .reveal:nth-child(2){ transition-delay:.06s; }
  .exp-grid .reveal:nth-child(3){ transition-delay:.12s; }
  .exp-grid .reveal:nth-child(4){ transition-delay:.18s; }
  .exp-grid .reveal:nth-child(5){ transition-delay:.24s; }
}

/* ---------- Focus states: refined, still fully visible ---------- */
.btn:focus-visible{
  outline:1px solid var(--gold);
  outline-offset:4px;
}

/* ---------- Reduced motion: explicit, total opt-out for this block ---------- */
@media (prefers-reduced-motion: reduce){
  .btn, .exp-card, .collection-category, .tilt-hover{
    transition:none !important;
  }
  .tilt-hover{ transform:none !important; }
}