/* ==========================================================
   IBIZA PRIVÉE — website template, version 5

   LOGO  The real artwork, extracted as vector from the supplied
   PDF and inlined as #ipMark. EVENT AGENCY removed. It inherits
   colour from CSS, so navy on cream and white on dark come from
   the same single source. Size it with width only.

   IMAGERY  Pexels, free for commercial use, no attribution needed.
   Files live in assets/images/. Hero slides use an inline
   background-image; every other photo is lazy-loaded from the
   data-bg attribute on .ph__img by js/main.js.

   BEFORE LAUNCH  Search index.html and js/main.js for "SET:".
   ========================================================== */

:root{
  --navy:#042D62;            /* sampled from the logo artwork */
  --navy-deep:#08192B;
  --night:#050D16;
  --sea:#1D6E8E;
  --gold:#B8934F;
  --gold-soft:#D9C08A;
  --shell:#F5F3EE;           /* the logo background cream */
  --white:#FFFFFF;
  --line-dark:rgba(217,192,138,.22);
  --line-light:rgba(4,45,98,.16);

  --display:"Cormorant Garamond",Georgia,serif;
  --text:"Jost","Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(22px,5vw,72px);
  --max:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dock:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--night);color:var(--white);
  font-family:var(--text);font-weight:300;font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:var(--dock);
}
body.is-locked{overflow:hidden}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- the mark ---------- */
.mark{width:180px;height:auto;aspect-ratio:142.85/71.77;color:currentColor}

/* ==========================================================
   IMAGE LAYER — slow drift plus fade in on approach
   ========================================================== */
.ph{position:relative;background-color:var(--navy-deep);overflow:hidden;isolation:isolate}
.ph__img{
  position:absolute;inset:-2%;
  background-size:cover;background-position:center;
  transform-origin:center;opacity:0;
  transition:opacity 1.5s var(--ease);
  animation:drift var(--dur,28s) var(--ease) infinite alternate;
  will-change:transform,opacity;
}
.ph__img.is-shown{opacity:1}
.k2 .ph__img{animation-name:drift2;--dur:34s}
.k3 .ph__img{animation-name:drift3;--dur:31s}
@keyframes drift{from{transform:scale(1.00) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(-1.4%,-1.2%,0)}}
@keyframes drift2{from{transform:scale(1.10) translate3d(1.2%,1.0%,0)}to{transform:scale(1.00) translate3d(0,0,0)}}
@keyframes drift3{from{transform:scale(1.02) translate3d(-1.0%,.6%,0)}to{transform:scale(1.12) translate3d(1.0%,-.8%,0)}}
.ph::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,25,43,.16) 0%,rgba(5,13,22,.10) 40%,rgba(5,13,22,.72) 100%);
}
.ph--soft::before{background:linear-gradient(180deg,rgba(8,25,43,.05) 0%,rgba(8,25,43,.16) 100%)}
.ph--deep::before{background:linear-gradient(180deg,rgba(5,13,22,.46) 0%,rgba(8,25,43,.34) 38%,rgba(5,13,22,.80) 100%)}
.ph::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ==========================================================
   NAV
   ========================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px var(--gutter);padding-top:max(18px,env(safe-area-inset-top));
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s;
}
.nav.is-stuck{background:rgba(5,13,22,.90);backdrop-filter:blur(14px);padding-block:11px;border-bottom-color:var(--line-dark)}
.nav__mark .mark{width:clamp(108px,13vw,150px)}
.nav__links{display:flex;gap:28px;align-items:center;font-size:13px;letter-spacing:.09em}
.nav__links a{opacity:.78;transition:opacity .3s,color .3s}
.nav__links a:hover{opacity:1;color:var(--gold-soft)}
.nav__cta{border:1px solid var(--line-dark);padding:9px 20px;border-radius:999px;color:var(--gold-soft);opacity:1 !important;transition:background .35s var(--ease),color .35s}
.nav__cta:hover{background:var(--gold);color:var(--night)}

.burger{display:none;width:46px;height:46px;border:0;background:none;cursor:pointer;padding:0;place-items:center;margin-right:-10px}
.burger i{display:block;width:24px;height:1px;background:var(--white);position:relative;transition:background .3s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:24px;height:1px;background:var(--white);transition:transform .4s var(--ease),top .3s}
.burger i::before{top:-7px}
.burger i::after{top:7px}
.is-open .burger i{background:transparent}
.is-open .burger i::before{top:0;transform:rotate(45deg)}
.is-open .burger i::after{top:0;transform:rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:75;background:var(--night);
  display:grid;align-content:center;gap:2px;padding:0 var(--gutter);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
.is-open .menu{opacity:1;visibility:visible;transform:none}
.menu a{font-family:var(--display);font-weight:300;font-size:clamp(28px,8.5vw,42px);line-height:1.5;border-bottom:1px solid var(--line-dark);padding:10px 0}
.menu a:last-of-type{border-bottom:0;color:var(--gold-soft);margin-top:12px}
@media (max-width:960px){ .nav__links{display:none} .burger{display:grid} }

/* ==========================================================
   HERO — crossfading slideshow
   ========================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:140px 0 clamp(52px,8vh,92px);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0;background:var(--navy-deep)}
.slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.05);
  transition:opacity 1.4s var(--ease);
  will-change:opacity,transform;
}
.slide.is-on{opacity:1;animation:slideZoom 7s linear forwards}
@keyframes slideZoom{from{transform:scale(1.02)}to{transform:scale(1.10)}}
.hero__media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(5,13,22,.46) 0%,rgba(8,25,43,.14) 32%,rgba(5,13,22,.80) 100%),
    linear-gradient(90deg,rgba(5,13,22,.52) 0%,rgba(5,13,22,0) 60%);
}
.orbit{position:absolute;z-index:1;top:42%;left:50%;translate:-50% -50%;width:min(86vw,700px);aspect-ratio:1;border:1px solid var(--line-dark);border-radius:50%;opacity:0;scale:.86;pointer-events:none}
.orbit--in{opacity:1;scale:1;transition:opacity 1.7s var(--ease) .2s,scale 2s var(--ease) .2s}
.hero .wrap{position:relative;z-index:3;width:100%}
.hero__word{margin:0}
.hero__word .mark{width:clamp(250px,42vw,470px)}
.hero__rule{width:1px;height:clamp(32px,6vh,56px);margin:26px 0 22px;background:linear-gradient(to bottom,var(--gold),transparent)}
.hero__line{font-size:clamp(15px,1.6vw,18.5px);font-weight:200;max-width:34ch;margin:0;color:rgba(255,255,255,.88)}
.hero__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero__dots{position:absolute;z-index:3;bottom:26px;right:var(--gutter);display:flex;gap:9px}
.hero__dots button{width:26px;height:2px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.28);transition:background .4s}
.hero__dots button[aria-current="true"]{background:var(--gold-soft)}
@media (max-width:620px){
  .hero{padding-bottom:70px}
  .hero__acts .btn{flex:1 1 100%}
  .hero__dots{bottom:18px;left:var(--gutter);right:auto}
}

.rise{opacity:0;transform:translateY(18px)}
.rise--in{opacity:1;transform:none;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.d1{transition-delay:.35s}.d2{transition-delay:.55s}.d3{transition-delay:.75s}.d4{transition-delay:.95s}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 30px;border-radius:999px;border:1px solid transparent;font-size:12.5px;letter-spacing:.14em;font-weight:400;cursor:pointer;text-align:center;transition:background .4s var(--ease),color .4s,border-color .4s}
.btn--gold{background:var(--gold);color:var(--night)}
.btn--gold:hover{background:var(--gold-soft)}
.btn--ghost{border-color:var(--line-dark);color:var(--white)}
.btn--ghost:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:var(--sea)}
.btn--outline{border-color:var(--line-light);color:var(--navy)}
.btn--outline:hover{border-color:var(--navy)}

/* ==========================================================
   STATEMENT
   ========================================================== */
.statement{position:relative;color:var(--white);padding:clamp(96px,15vw,200px) 0;overflow:hidden}
.statement > .ph{position:absolute;inset:0}
.statement__grid{position:relative;z-index:3;display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.statement__aside{font-size:11px;letter-spacing:.22em;color:var(--gold-soft);padding-top:15px;line-height:1.6}
.statement__body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,64px);align-items:end}
.statement h2{font-family:var(--display);font-weight:300;font-size:clamp(27px,3.8vw,46px);line-height:1.22;margin:0;max-width:19ch}
.statement p{margin:0;font-size:15.5px;line-height:1.85;color:rgba(255,255,255,.82)}
@media (max-width:980px){ .statement__body{grid-template-columns:1fr;gap:22px;align-items:start} }
@media (max-width:700px){
  .statement__grid{grid-template-columns:1fr;gap:16px}
  .statement__aside{padding-top:0}
}

/* ==========================================================
   SERVICES
   ========================================================== */
.services{background:var(--shell);color:var(--navy);padding:clamp(64px,9vw,120px) 0 clamp(56px,9vw,116px)}
.services__head{max-width:32ch;margin-bottom:clamp(28px,5vw,58px)}
.services__head h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,5vw,56px);line-height:1.02;margin:0 0 14px}
.services__head p{margin:0;font-size:15.5px;color:rgba(4,45,98,.72)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,5vw,76px);align-items:center;padding:clamp(24px,3.6vw,46px) 0;border-top:1px solid var(--line-light)}
.row:last-of-type{border-bottom:1px solid var(--line-light)}
.row--flip .row__media{order:2}
.row__media .ph{aspect-ratio:5/4;border-radius:3px}
.row__no{font-size:11px;letter-spacing:.28em;color:var(--gold);margin:0 0 14px}
.row h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,40px);line-height:1.1;margin:0 0 12px}
.row p{margin:0;font-size:15.5px;line-height:1.75;color:rgba(4,45,98,.74);max-width:40ch}
@media (max-width:820px){
  .row{grid-template-columns:1fr;gap:20px;padding:30px 0}
  .row--flip .row__media{order:0}
  .row__media .ph{aspect-ratio:16/10}
}

/* ==========================================================
   ACQUISITION
   ========================================================== */
.acq{position:relative;padding:clamp(80px,13vw,180px) 0;overflow:hidden}
.acq > .ph{position:absolute;inset:0}
.acq__in{position:relative;z-index:3;max-width:560px}
.acq__eyebrow{font-size:11px;letter-spacing:.28em;color:var(--gold-soft);margin:0 0 18px}
.acq h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,5.4vw,62px);line-height:1.02;margin:0 0 20px}
.acq p{font-size:15.5px;line-height:1.8;color:rgba(255,255,255,.84);margin:0 0 16px;max-width:44ch}
.acq .btn{margin-top:16px}
@media (max-width:620px){ .acq .btn{width:100%} }

/* ==========================================================
   COLLECTION
   ========================================================== */
.collection{padding:clamp(68px,10vw,140px) 0;background:var(--night)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,40px)}
.sec-head h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,5.4vw,62px);line-height:1;margin:0}
.sec-head p{margin:0;max-width:40ch;font-size:14.5px;color:rgba(255,255,255,.64)}
.filters{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:4px;margin-bottom:14px;overflow:hidden}
.f{background:var(--night);padding:13px 18px;display:flex;flex-direction:column;gap:5px;min-height:62px;justify-content:center}
.f label{font-size:9.5px;letter-spacing:.22em;color:var(--gold-soft);font-weight:400}
.f select,.f input{background:transparent;border:0;padding:0;font-size:15px;font-weight:300;color:var(--white);width:100%;cursor:pointer;min-height:24px}
.f select option{background:var(--navy-deep);color:var(--white)}
.f input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.5;cursor:pointer}
.f--dates{flex-direction:row;align-items:center;gap:14px}
.f--dates > div{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.f--go{background:var(--night);display:grid;place-items:center;padding:0}
.f--go button{background:var(--gold);color:var(--night);border:0;cursor:pointer;height:100%;width:100%;min-width:150px;min-height:62px;padding:0 26px;font-size:12px;letter-spacing:.16em;transition:background .35s var(--ease)}
.f--go button:hover{background:var(--gold-soft)}
.f-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 clamp(22px,4vw,36px)}
.f-note{font-size:12px;color:rgba(255,255,255,.44);margin:0}
.f-ask{font-size:12px;letter-spacing:.06em;color:var(--gold-soft);border-bottom:1px solid var(--line-dark);padding-bottom:3px;transition:color .35s}
.f-ask:hover{color:var(--white)}
@media (max-width:1000px){ .filters{grid-template-columns:1fr 1fr} .f--go{grid-column:1/-1} }
@media (max-width:560px){ .filters{grid-template-columns:1fr} }

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px)}
@media (max-width:1000px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .grid{grid-template-columns:1fr} }
.card{display:block;cursor:pointer}
.card[hidden]{display:none}
.card .ph{aspect-ratio:4/5;border-radius:3px}
.card__tag{position:absolute;z-index:3;top:13px;left:13px;font-size:9px;letter-spacing:.2em;color:var(--gold-soft);border:1px solid var(--line-dark);border-radius:999px;padding:5px 11px;background:rgba(5,13,22,.42);backdrop-filter:blur(6px)}
.card__body{position:absolute;z-index:3;bottom:0;left:0;right:0;padding:18px}
.card h3{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.16;margin:0 0 6px}
.card__meta{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;color:rgba(255,255,255,.7)}
.card__meta span::after{content:" /";color:var(--gold-soft);opacity:.6}
.card__meta span:last-child::after{content:""}
.card__price{margin:10px 0 0;font-size:11px;letter-spacing:.13em;color:var(--gold-soft)}

/* hover elevation: the card lifts, its shadow deepens and the photo eases in.
   Uses transform on .card and `scale` on the photo, so neither clashes with
   the reveal animation (translate) or the image drift (transform). */
.card{transition:transform .6s var(--ease)}
.card .ph{box-shadow:0 0 0 1px transparent,0 4px 14px -10px rgba(0,0,0,.4);transition:box-shadow .6s var(--ease)}
.card .ph__img{transition:opacity 1.5s var(--ease),scale .9s var(--ease)}
.card .ph::before{transition:opacity .6s var(--ease)}
.card:hover,.card:focus-visible{transform:translateY(-8px) scale(1.02)}
.card:hover .ph,.card:focus-visible .ph{box-shadow:0 0 0 1px rgba(217,192,138,.28),0 28px 50px -20px rgba(0,0,0,.85),0 12px 24px -12px rgba(0,0,0,.6)}
.card:hover .ph__img,.card:focus-visible .ph__img{scale:1.05}
.card:hover .ph::before{opacity:.82}
@media (hover:none){ .card:hover{transform:none} }
.card__more{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--white);padding-bottom:4px;border-bottom:1px solid var(--gold-soft)}
.card__more::after{content:"\2192";color:var(--gold-soft);transition:translate .4s var(--ease)}
.card--feature:hover .card__more::after{translate:4px 0}
/* Can Talaia: accent underline slides under the title and label on hover */
.card--feature h3{display:inline-block;position:relative}
.card--feature .card__more{position:relative;border-bottom-color:rgba(217,192,138,.28)}
.card--feature h3::after,.card--feature .card__more::before{
  content:"";position:absolute;left:0;width:0;height:1px;background:var(--gold-soft);
  transition:width .3s ease;
}
.card--feature h3::after{bottom:-3px}
.card--feature .card__more::before{bottom:-1px;transition-delay:.06s}
.card--feature:hover h3::after,.card--feature:focus-visible h3::after,
.card--feature:hover .card__more::before,.card--feature:focus-visible .card__more::before{width:100%}

.empty{grid-column:1/-1;padding:56px 24px;text-align:center;border:1px solid var(--line-dark);border-radius:4px}
.empty p{margin:0 0 6px;font-family:var(--display);font-size:25px}
.empty span{font-size:14px;color:rgba(255,255,255,.6)}

/* ==========================================================
   SEASON
   ========================================================== */
/* original photo background across the whole section; text left,
   video right. The grid runs edge to edge so the video bleeds off the
   right of the page; the text column is padded to line up with .wrap. */
.season{position:relative;overflow:hidden}
.season > .ph{position:absolute;inset:0}
.season__grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.season__in{
  position:relative;z-index:2;align-self:center;max-width:600px;box-sizing:content-box;
  padding-block:clamp(80px,12vw,170px);
  padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-right:clamp(12px,2vw,24px);
}
.season__media{position:relative;z-index:1}   /* starts right of the text, never under it */
.season__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the blend: the video's left edge turns transparent, so the section
   photo underneath shows through with no dividing line */
.season__media{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 14%,rgba(0,0,0,.78) 30%,#000 44%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 14%,rgba(0,0,0,.78) 30%,#000 44%);
}
/* same tint as the photo's .ph--deep veil so both read as one image */
.season__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,13,22,.52) 0%,rgba(8,25,43,.34) 40%,rgba(5,13,22,.72) 100%);
}
@media (max-width:900px){
  .season__grid{grid-template-columns:1fr}
  .season__in{max-width:600px;padding:clamp(72px,12vw,110px) var(--gutter) 24px}
  .season__media{margin:0;aspect-ratio:4/3;max-height:70vh}
  .season__media{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 82%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 82%,transparent 100%);
  }
}
.season h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,5.4vw,58px);line-height:1.02;margin:0 0 20px}
.season__lead{font-size:15.5px;color:rgba(255,255,255,.82);margin:0 0 30px;max-width:44ch}
.season ul{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:10px;max-width:460px}
.season li{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line-dark);font-size:14.5px}
.season li span{color:var(--gold-soft);font-size:11.5px;letter-spacing:.1em;white-space:nowrap}
@media (max-width:620px){ .season .btn{width:100%} }

/* ==========================================================
   ENQUIRY
   ========================================================== */
.enq{background:var(--shell);color:var(--navy);padding:clamp(68px,10vw,140px) 0}
.enq__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,7vw,90px)}
.enq h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,5vw,56px);line-height:1.02;margin:0 0 18px}
.enq__intro{font-size:15.5px;line-height:1.8;color:rgba(4,45,98,.74);max-width:38ch;margin:0 0 28px}
.enq__contact{display:grid;gap:8px;font-size:15px}
.enq__contact a{border-bottom:1px solid var(--line-light);padding-bottom:4px;width:fit-content}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.field label{font-size:10px;letter-spacing:.2em;color:rgba(4,45,98,.6);font-weight:400}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--line-light);padding:11px 0;font-size:16px;font-weight:300;color:var(--navy);border-radius:0;transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--gold);outline:none}
.field textarea{resize:vertical;min-height:88px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.enq__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.enq__note{font-size:12px;color:rgba(4,45,98,.55);margin:18px 0 0;max-width:48ch}
.enq__status{font-size:13px;color:#9B2C2C;margin:14px 0 0}
.enq__done{border-top:1px solid var(--gold);padding-top:26px;animation:enqIn .6s var(--ease) both}
.enq__done:focus{outline:none}
.enq__done h3{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.4vw,38px);line-height:1.1;margin:0 0 10px}
.enq__done p{font-size:15.5px;line-height:1.8;color:rgba(4,45,98,.74);margin:0}
@keyframes enqIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn[disabled]{opacity:.6;cursor:progress}
@media (max-width:820px){ .enq__grid{grid-template-columns:1fr} .field-row{grid-template-columns:1fr;gap:0} }
@media (max-width:620px){ .enq__acts .btn{flex:1 1 100%} }

/* ==========================================================
   REVIEWS — photo background, floating review belts, form
   ========================================================== */
.reviews{
  position:relative;overflow:hidden;background:var(--navy-deep);
  padding:clamp(80px,11vw,160px) 0 clamp(72px,10vw,140px);
}
.reviews > .wrap{position:relative;z-index:3}
.reviews__bg{position:absolute;inset:0}
.reviews__bg .ph__img{
  background-image:url('../assets/images/in-their-own-words-bg.jpg');
  background-size:cover;background-position:center;
}
/* dark veil keeps the review text high-contrast over the photo */
.reviews__bg::before{
  background:
    linear-gradient(180deg,rgba(5,13,22,.90) 0%,rgba(5,13,22,.66) 30%,rgba(5,13,22,.66) 68%,rgba(5,13,22,.94) 100%),
    radial-gradient(70% 60% at 50% 50%,rgba(5,13,22,.15),rgba(5,13,22,.55));
}

/* static grid: the no-JS / reduced-motion fallback */
.belts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);align-items:start}
.review{
  margin:0;display:flex;flex-direction:column;gap:18px;
  padding:clamp(24px,2.4vw,34px);
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02)),rgba(8,25,43,.55);
  border:1px solid var(--line-dark);border-radius:4px;
  transition:border-color .5s;
}
.review:hover{border-color:rgba(217,192,138,.5)}
.review blockquote{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(19px,1.7vw,22px);line-height:1.45;color:rgba(255,255,255,.94)}
.review figcaption{font-size:12px;letter-spacing:.16em;color:var(--gold-soft)}
.stars{display:flex;gap:5px;color:var(--gold)}
.stars svg{width:14px;height:14px;fill:currentColor}

/* belts: js/main.js deals the cards into columns and clones each set
   once, so translating a track by -50% loops seamlessly */
.belts.is-belted{
  --belt-gap:clamp(16px,2vw,24px);
  height:clamp(520px,74vh,740px);overflow:hidden;gap:var(--belt-gap);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
}
.belts.is-belted[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.belts.is-belted[data-cols="1"]{grid-template-columns:1fr}
.belt__track{display:flex;flex-direction:column;animation:beltUp var(--dur,44s) linear infinite;will-change:transform}
.belt--down .belt__track{animation-name:beltDown}
.belt .review{margin-bottom:var(--belt-gap)}
.belt:hover .belt__track{animation-play-state:paused}
@keyframes beltUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes beltDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}

/* leave a review */
.rv-leave{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,7vw,90px);
  margin-top:clamp(40px,6vw,80px);padding-top:clamp(40px,6vw,72px);
  border-top:1px solid var(--line-dark);
}
.rv-leave__eyebrow{font-size:10px;letter-spacing:.24em;color:var(--gold-soft);margin:0 0 14px}
.rv-leave h3,.rv-done h3{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.8vw,44px);line-height:1.05;margin:0 0 16px}
.rv-leave__intro p:last-child{font-size:15px;color:rgba(255,255,255,.66);max-width:38ch;margin:0}

.reviews .field label,.modal .field label{color:var(--gold-soft)}
.reviews .field input,.reviews .field textarea,.modal .field input,.modal .field select{color:var(--white);border-bottom-color:var(--line-dark)}
.reviews .field input::placeholder,.reviews .field textarea::placeholder,.modal .field input::placeholder{color:rgba(255,255,255,.34)}
.reviews .field input:focus,.reviews .field textarea:focus,.modal .field input:focus,.modal .field select:focus{border-bottom-color:var(--gold)}
.modal .field select option{background:var(--navy-deep);color:var(--white)}
.modal .field input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.5;cursor:pointer}

.rating{border:0;margin:0 0 22px;padding:0}
.rating legend{font-size:10px;letter-spacing:.2em;color:var(--gold-soft);font-weight:400;padding:0;margin-bottom:10px}
/* reversed DOM order + row-reverse lets ~ light up every star up to the hovered one */
.rating__stars{display:inline-flex;flex-direction:row-reverse;gap:6px}
.rating__stars input{position:absolute;opacity:0;width:1px;height:1px}
.rating__stars label{cursor:pointer;color:rgba(217,192,138,.28);transition:color .25s,transform .25s var(--ease)}
.rating__stars svg{width:26px;height:26px;fill:currentColor}
.rating__stars label:hover,.rating__stars label:hover ~ label,
.rating__stars input:checked ~ label{color:var(--gold)}
.rating__stars label:hover{transform:scale(1.12)}
.rating__stars input:focus-visible + label{outline:2px solid var(--gold-soft);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.rv-status{font-size:13px;color:#E8A0A0;margin:14px 0 0}
.rv-done{border-top:1px solid var(--gold);padding-top:26px;animation:enqIn .6s var(--ease) both}
.rv-done:focus{outline:none}
.rv-done .stars{margin-bottom:18px}
.rv-done p{font-size:15.5px;color:rgba(255,255,255,.7);margin:0}

@media (max-width:960px){ .belts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){ .rv-leave{grid-template-columns:1fr} }
@media (max-width:620px){
  .belts{grid-template-columns:1fr}
  .reviews .enq__acts .btn{flex:1 1 100%}
}

/* ==========================================================
   STATS — count-up bar between the season and the enquiry
   ========================================================== */
.stats{
  position:relative;background:var(--night);
  padding:clamp(30px,3.6vw,48px) 0;
  border-top:1px solid var(--line-dark);
}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:980px;margin:0 auto}
.stats__item{text-align:center;padding:4px clamp(12px,2.4vw,32px)}
.stats__item + .stats__item{border-left:1px solid var(--line-dark)}
.stats__num{
  display:inline-flex;align-items:center;gap:.14em;margin:0;
  font-family:var(--display);font-weight:300;
  font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:.01em;
  font-variant-numeric:tabular-nums lining-nums;
}
.stats__val{min-width:1ch}
.stats__star{width:.38em;height:.38em;fill:var(--gold);translate:0 -.08em}
.stats__label{
  margin:12px 0 0;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-soft);font-weight:400;
}
.stats__label::before{content:"";display:block;width:22px;height:1px;background:var(--gold);opacity:.7;margin:0 auto 11px}
@media (max-width:520px){
  .stats__item{padding:2px 6px}
  .stats__label{font-size:8.5px;letter-spacing:.18em}
}

/* ==========================================================
   SCROLL REVEAL — two-way fade + slide, staggered per group
   js/main.js adds .reveal (+ --rd delay, --ry direction), then
   toggles .is-in / .is-out every time an element enters or
   leaves the viewport. Keyframes on opacity/translate only, so
   they never override hover transitions or transforms.
   ========================================================== */
.reveal{opacity:0}
.reveal.is-in{animation:revealIn .75s cubic-bezier(.22,.61,.36,1) var(--rd,0ms) both}
.reveal.is-out{animation:revealOut .55s cubic-bezier(.4,0,.6,1) both}
@keyframes revealIn{
  from{opacity:0;translate:0 var(--ry,26px)}
  to{opacity:1;translate:0 0}
}
@keyframes revealOut{
  from{opacity:1;translate:0 0}
  to{opacity:0;translate:0 var(--ry,26px)}
}

/* ==========================================================
   PARALLAX DEPTH — photos drift slower than the page
   js/main.js sets `translate` on the photo layer; the extra
   vertical bleed gives it room to travel without showing edges.
   ========================================================== */
[data-parallax] .ph__img{inset:-12% -2%;will-change:transform,opacity,translate}
.hero__media{will-change:translate}

/* ==========================================================
   SLIDING UNDERLINE — text links
   ========================================================== */
.nav__links a:not(.nav__cta),.foot__col a,.enq__contact a,.f-ask{position:relative}
.nav__links a:not(.nav__cta)::after,.foot__col a::after,.enq__contact a::after,.f-ask::after{
  content:"";position:absolute;left:0;bottom:-4px;
  width:0;height:1px;background:var(--u-color,var(--gold-soft));
  transition:width .45s cubic-bezier(.22,.61,.36,1);
}
.enq__contact a{--u-color:var(--gold)}
.enq__contact a::after,.f-ask::after{bottom:-1px}   /* sit on the existing hairline */
.nav__links a:not(.nav__cta):hover::after,.foot__col a:hover::after,.enq__contact a:hover::after,.f-ask:hover::after,
.nav__links a:not(.nav__cta):focus-visible::after,.foot__col a:focus-visible::after,.enq__contact a:focus-visible::after,.f-ask:focus-visible::after{width:100%}
.foot__col a{width:fit-content}

/* ==========================================================
   MODAL — Can Talaia
   ========================================================== */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(0px,3vh,32px) clamp(0px,3vw,40px)}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;inset:0;background:rgba(5,13,22,.62);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .5s var(--ease);
}
.modal__panel{
  position:relative;width:min(1200px,100%);height:100%;
  background:var(--night);border:1px solid var(--line-dark);border-radius:6px;overflow:hidden;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.85);
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .55s var(--ease),transform .75s var(--ease);
}
.modal.is-open .modal__backdrop{opacity:1}
.modal.is-open .modal__panel{opacity:1;transform:none}
.modal__scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.modal__close{
  position:absolute;top:18px;right:18px;z-index:6;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--white);
  border:1px solid rgba(255,255,255,.34);background:rgba(5,13,22,.34);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .4s var(--ease),border-color .4s,color .4s,transform .6s var(--ease);
}
.modal__close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3}
.modal__close:hover{background:var(--gold);border-color:var(--gold);color:var(--night);transform:rotate(90deg)}

/* gallery */
.gallery{position:relative;height:clamp(300px,62vh,640px);overflow:hidden;background:var(--navy-deep)}
.gallery__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.4s var(--ease)}
.gallery__slide.is-on{opacity:1;animation:slideZoom 7s linear forwards}
.gallery__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,13,22,.35) 0%,rgba(5,13,22,0) 30%,rgba(5,13,22,.15) 55%,rgba(5,13,22,.88) 100%)}
.gallery__caption{position:absolute;z-index:2;left:clamp(22px,5vw,72px);bottom:clamp(26px,4vw,52px)}
.modal__eyebrow{font-size:10.5px;letter-spacing:.28em;color:var(--gold-soft);margin:0 0 10px}
.gallery h2{font-family:var(--display);font-weight:300;font-size:clamp(42px,6.4vw,84px);line-height:.95;margin:0}
.gallery__dots{position:absolute;z-index:2;right:clamp(22px,5vw,72px);bottom:clamp(32px,4.4vw,60px);display:flex;gap:9px}
.gallery__dots button{width:26px;height:2px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.32);transition:background .4s,width .5s var(--ease)}
.gallery__dots button[aria-current="true"]{background:var(--gold-soft);width:44px}

/* editorial */
.modal__body{padding:clamp(34px,5vw,72px) clamp(22px,5vw,72px) clamp(40px,6vw,80px)}
.story__facts{list-style:none;margin:0 0 clamp(34px,5vw,56px);padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line-dark)}
.story__facts li{padding:18px 0;display:flex;flex-direction:column;gap:4px}
.story__facts li + li{padding-left:clamp(14px,2.4vw,30px);border-left:1px solid var(--line-dark)}
.story__facts strong{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.6vw,32px);line-height:1;font-variant-numeric:lining-nums}
.story__facts span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.story__text{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px clamp(28px,5vw,64px)}
.story__lead{grid-row:span 2;margin:0;font-family:var(--display);font-weight:300;font-size:clamp(22px,2.3vw,29px);line-height:1.42;color:rgba(255,255,255,.95)}
.story__text p:not(.story__lead){margin:0;font-size:15px;line-height:1.85;color:rgba(255,255,255,.72)}
.story__near{margin-top:clamp(32px,4vw,48px)}
.story__near h3{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);font-weight:400;margin:0 0 16px}
.story__near ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(28px,5vw,64px)}
.story__near li{position:relative;padding:0 0 12px 22px;border-bottom:1px solid var(--line-dark);font-size:14.5px;color:rgba(255,255,255,.8)}
.story__near li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--gold)}

/* booking */
.book{margin-top:clamp(48px,7vw,90px);padding-top:clamp(40px,6vw,64px);border-top:1px solid var(--line-dark)}
.book__title{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.6vw,44px);line-height:1.05;margin:0 0 clamp(26px,4vw,42px)}
.book__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
.modal .enq__status{color:#E8A0A0}
.modal .enq__done p{color:rgba(255,255,255,.72)}

/* calendar */
.cal{border:1px solid var(--line-dark);border-radius:4px;padding:clamp(16px,2.2vw,26px);background:rgba(255,255,255,.02)}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal__month{margin:0;font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.01em;font-variant-numeric:lining-nums}
.cal__nav{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-dark);background:none;color:var(--gold-soft);display:grid;place-items:center;cursor:pointer;transition:border-color .3s,background .3s}
.cal__nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.cal__nav:hover:not(:disabled){border-color:var(--gold-soft);background:rgba(217,192,138,.08)}
.cal__nav:disabled{opacity:.28;cursor:default}
.cal__week,.cal__days{display:grid;grid-template-columns:repeat(7,1fr)}
.cal__week span{text-align:center;font-size:9.5px;letter-spacing:.14em;color:rgba(255,255,255,.42);padding:6px 0}
.cal__day{
  position:relative;z-index:0;aspect-ratio:1;border:0;padding:0;background:none;
  display:grid;place-items:center;font-size:14px;color:var(--white);cursor:pointer;
}
.cal__day::before,.cal__day::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.cal__day::after{inset:9%;border-radius:50%;border:1px solid transparent;transition:border-color .25s,background .25s}
.cal__day:not(:disabled):hover::after{border-color:var(--gold-soft)}
.cal__day:disabled{color:rgba(255,255,255,.2);cursor:default}
.cal__day.is-today{color:var(--gold-soft)}
/* range band: full cells between, half cells at the ends */
.cal__day.is-range::before,.cal__day.is-preview::before{inset:12% 0;background:rgba(184,147,79,.22)}
.cal__day.is-preview::before{background:rgba(184,147,79,.12)}
.cal__day.is-start.has-end::before{inset:12% 0 12% 50%;background:rgba(184,147,79,.22)}
.cal__day.is-end::before{inset:12% 50% 12% 0;background:rgba(184,147,79,.22)}
.cal__day.is-start::after,.cal__day.is-end::after{background:var(--gold);border-color:var(--gold)}
.cal__day.is-start,.cal__day.is-end{color:var(--night);font-weight:400}
.cal__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-dark)}
.cal__summary{margin:0;font-size:13px;color:rgba(255,255,255,.72)}
.cal__clear{background:none;border:0;padding:4px 0;color:var(--gold-soft);font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.cal__clear:hover{color:var(--white)}

/* WhatsApp */
.wa-box{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-dark)}
.wa-box__title{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 14px}
.wa-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;
  border:1px solid var(--line-dark);border-radius:4px;background:rgba(255,255,255,.03);
  font-size:12.5px;letter-spacing:.14em;color:var(--white);
  transition:background .4s var(--ease),border-color .4s,color .4s;
}
.wa-btn svg{width:20px;height:20px;fill:#25D366;transition:fill .4s}
.wa-btn:hover{background:#25D366;border-color:#25D366;color:var(--night)}
.wa-btn:hover svg{fill:var(--night)}

@media (max-width:900px){
  .book__grid{grid-template-columns:1fr}
  .story__text{grid-template-columns:1fr}
  .story__lead{grid-row:auto}
}
@media (max-width:680px){
  .modal{padding:0}
  .modal__panel{border-radius:0;border:0}
  .modal__close{top:12px;right:12px;width:40px;height:40px}
  .story__facts{grid-template-columns:1fr 1fr}
  .story__facts li:nth-child(3){padding-left:0;border-left:0}
  .story__facts li:nth-child(n+3){border-top:1px solid var(--line-dark)}
  .story__near ul{grid-template-columns:1fr}
  .gallery__dots{left:clamp(22px,5vw,72px);right:auto;bottom:18px}
  .gallery__caption{bottom:40px}
}

/* ==========================================================
   WALK-THROUGH — Casa Vedrà (scroll-driven, see initTour())
   ========================================================== */
.modal--tour{padding:0}
.modal--tour .modal__backdrop{background:rgba(5,13,22,.7);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.modal--tour .modal__panel{width:100%;border:0;border-radius:0}

/* one screen of scroll per scene, plus a short tail before the booking */
.tour{position:relative;height:calc((var(--scenes) + .6) * 100vh);height:calc((var(--scenes) + .6) * 100dvh)}
.tour__stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--night)}
/* dims as the booking takes over */
.tour__stage::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--night);opacity:calc(var(--tail,0) * .8)}

.tour__scenes{position:absolute;inset:0}
.tour__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;transform:scale(1.03);transform-origin:center;
  will-change:opacity,transform;
}
.tour__img:first-child{opacity:1;visibility:visible}
.tour__shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,13,22,.72) 0%,rgba(5,13,22,.28) 42%,rgba(5,13,22,0) 68%),
    linear-gradient(180deg,rgba(5,13,22,.55) 0%,rgba(5,13,22,0) 22%,rgba(5,13,22,0) 58%,rgba(5,13,22,.72) 100%);
}

.tour__head{position:absolute;z-index:3;top:clamp(24px,5vh,56px);left:clamp(22px,5vw,72px);pointer-events:none}
.tour__head h2{font-family:var(--display);font-weight:300;font-size:clamp(38px,5.6vw,72px);line-height:.95;margin:0}
.tour__sub{margin:12px 0 0;font-size:12.5px;letter-spacing:.16em;color:rgba(255,255,255,.74)}

/* story cards: stacked at the bottom left, driven by scroll */
.tour__cards{position:absolute;z-index:3;left:clamp(22px,5vw,72px);bottom:clamp(28px,8vh,80px);width:min(480px,calc(100% - 44px - 64px))}
.tour__card{
  position:absolute;left:0;bottom:0;width:100%;
  opacity:0;visibility:hidden;will-change:opacity,transform;
  padding:clamp(22px,2.4vw,32px);
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02)),rgba(5,13,22,.6);
  border:1px solid var(--line-dark);border-radius:4px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.tour__no{margin:0 0 10px;font-size:10.5px;letter-spacing:.26em;color:var(--gold-soft);font-variant-numeric:lining-nums}
.tour__card h3{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.8vw,36px);line-height:1.05;margin:0 0 14px}
.tour__card p:not(.tour__no){margin:0;font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.92)}
.tour__cta{margin-top:22px}

/* golden progress tracker */
.tour__track{
  position:absolute;z-index:4;right:clamp(14px,3vw,44px);top:50%;translate:0 -50%;
  height:min(56vh,440px);width:24px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
}
.tour__line{position:absolute;top:12px;bottom:12px;left:50%;width:1px;margin-left:-.5px;background:rgba(217,192,138,.3)}
.tour__fill{position:absolute;inset:0;background:var(--gold);transform-origin:top;transform:scaleY(0)}
.tour__dot{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.tour__dot::before{
  content:"";width:11px;height:11px;border-radius:50%;
  border:1px solid var(--gold);background:rgba(5,13,22,.7);
  transition:transform .35s var(--ease),background .45s ease,box-shadow .45s ease;
}
.tour__dot.is-done::before{background:var(--gold)}
.tour__dot.is-current::before{box-shadow:0 0 0 5px rgba(184,147,79,.22)}
.tour__dot:hover::before,.tour__dot:focus-visible::before{transform:scale(1.55)}
.tour__dot:focus-visible{outline:none}
.tour__label{
  position:absolute;right:calc(100% + 10px);top:50%;translate:8px -50%;
  opacity:0;pointer-events:none;white-space:nowrap;
  padding:7px 13px;border:1px solid var(--line-dark);border-radius:999px;
  background:rgba(5,13,22,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);font-variant-numeric:lining-nums;
  transition:opacity .3s ease,translate .35s var(--ease);
}
.tour__dot:hover .tour__label,.tour__dot:focus-visible .tour__label{opacity:1;translate:0 -50%}

.tour__hint{
  position:absolute;z-index:3;left:50%;bottom:22px;translate:-50% 0;margin:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.tour__hint span{width:1px;height:34px;background:linear-gradient(var(--gold-soft),transparent);transform-origin:top;animation:hintLine 2.2s ease-in-out infinite}
@keyframes hintLine{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.modal__body--book{padding-top:clamp(48px,7vw,90px)}
.modal__body--book .book{margin-top:0;padding-top:0;border-top:0}

@media (max-width:680px){
  .tour__cards{left:16px;bottom:20px;width:calc(100% - 32px - 34px)}
  .tour__card{padding:20px}
  .tour__card p:not(.tour__no){font-size:13.5px;line-height:1.65}
  .tour__hint{display:none}
  .tour__label{font-size:9.5px;padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){ .tour__img{transform:none !important} .tour__card{transform:none !important} }

/* ==========================================================
   FOOTER
   ========================================================== */
.foot{background:var(--night);padding:56px 0 calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--line-dark)}
.foot__top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;margin-bottom:44px}
.foot__mark .mark{width:170px}
.foot__cols{display:flex;gap:clamp(26px,6vw,80px);flex-wrap:wrap}
.foot__col{display:grid;gap:10px;font-size:13.5px;color:rgba(255,255,255,.66)}
.foot__col strong{font-weight:400;font-size:9.5px;letter-spacing:.22em;color:var(--gold-soft);margin-bottom:4px}
.foot__col a:hover{color:var(--white)}
.foot__base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line-dark);font-size:11.5px;color:rgba(255,255,255,.4)}

/* ==========================================================
   STICKY ACTION DOCK
   ========================================================== */
.dock{
  position:fixed;z-index:70;
  right:clamp(16px,3vw,30px);
  bottom:calc(clamp(16px,3vw,30px) + env(safe-area-inset-bottom));
  display:flex;gap:10px;align-items:center;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.dock a{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 24px;border-radius:999px;
  font-size:12.5px;letter-spacing:.11em;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  transition:background .4s var(--ease),color .4s;
}
.dock__talk{background:var(--gold);color:var(--night);border:1px solid var(--gold)}
.dock__talk:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.dock__wa{background:rgba(4,45,98,.94);backdrop-filter:blur(12px);border:1px solid var(--gold);color:var(--white)}
.dock__wa:hover{background:var(--gold);color:var(--night)}
.dock__wa svg{width:18px;height:18px;flex:none;fill:currentColor}
.is-open .dock{opacity:0;pointer-events:none;transform:translateY(12px)}
@media (max-width:680px){
  .dock{
    left:0;right:0;bottom:0;gap:0;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background:rgba(5,13,22,.92);backdrop-filter:blur(16px);
    border-top:1px solid var(--line-dark);
  }
  .dock a{flex:1;box-shadow:none;border-radius:999px;padding:0 14px;min-height:48px}
  .dock__talk{margin-right:8px}
  .dock__wa span{display:none}
  .dock__wa{flex:0 0 58px;padding:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .rise{opacity:1;transform:none}
  .orbit{opacity:1;scale:1}
  .ph__img{inset:0;opacity:1}
  .slide{transform:none}
  .reveal{opacity:1}
  [data-parallax] .ph__img{inset:0}
  .card:hover{transform:none}
  html{scroll-behavior:auto}
}