/* =========================================================================
   NEMA — Boutique Hotel & Spa, Artà
   Concept: "Nivell / the level line" — the hairline E-bar of the NEMA mark
   becomes a recurring level rule (the still water of the spa, the even course
   of blue shutters, equilibrium). Display: Yeseva One. Body: Inter.
   Palette: eucalyptus green + warm stone.
   ========================================================================= */

:root{
  /* — eucalyptus greens — */
  --ink:#28332b;          /* deep eucalyptus, near-black */
  --ink-2:#33413a;
  --sage:#6f8a73;         /* mid eucalyptus */
  --euc:#9bb29a;          /* soft eucalyptus accent */
  --euc-line:#b9cab6;

  /* — warm stone neutrals — */
  --paper:#f7f4ee;        /* page */
  --sand:#efe7d8;         /* warm stone band */
  --stone:#cdbfa7;        /* marès */
  --stone-deep:#a8997f;
  --line:#e2dccf;         /* hairline on paper */

  --white:#ffffff;
  --gold:#b89b6a;         /* rare brass glint (reading lights, brass taps) */

  --measure:68ch;
  --pad:clamp(1.15rem, 5vw, 6rem);
  --maxw:1280px;
  --r:3px;                /* edges: nearly square, precise */

  --serif:'Yeseva One', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-slow:1100ms cubic-bezier(.16,.84,.34,1);
  --t:560ms cubic-bezier(.16,.84,.34,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:clamp(1rem,.96rem + .2vw,1.085rem);
  line-height:1.66;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;font-family:var(--serif);
  word-break:keep-all;overflow-wrap:normal;hyphens:none;letter-spacing:.005em}
p{margin:0}
::selection{background:var(--euc);color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:.7em 1.1em;z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ---------- the level-line motif (signature) ---------- */
.levelline{position:relative;display:block;height:1px;width:100%;
  background:currentColor;opacity:.5}
.levelline__tick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:block;width:30px;height:1px;background:currentColor}
.levelline__tick::before,.levelline__tick::after{content:"";position:absolute;
  top:50%;width:5px;height:5px;border:1px solid currentColor;border-radius:50%;
  transform:translateY(-50%);background:var(--paper)}
.levelline__tick::before{left:-7px}
.levelline__tick::after{right:-7px}
.levelline--light{color:var(--euc-line)}
.levelline--sage{color:var(--sage)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:500;font-size:.86rem;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent;
  padding:.92em 1.5em;border-radius:var(--r);transition:background var(--t),color var(--t),
  border-color var(--t),transform var(--t);min-height:46px;line-height:1.1}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn--lg{padding:1.02em 1.8em;font-size:.9rem}
.btn--xl{padding:1.12em 2.1em;font-size:.92rem}

.link-tick{position:relative;text-decoration:none;font-weight:600;color:var(--ink);
  white-space:nowrap;padding-bottom:2px;border-bottom:1px solid var(--stone-deep);
  transition:border-color var(--t),color var(--t)}
.link-tick:hover{color:var(--sage);border-color:var(--sage)}

/* ---------- kicker / section index ---------- */
.kicker{display:flex;align-items:center;gap:.7em;margin:0 0 1.2em;
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage)}
.kicker__no{font-family:var(--serif);font-size:1.05rem;letter-spacing:0;color:var(--stone-deep);
  line-height:1;position:relative;padding-right:.7em}
.kicker__no::after{content:"";position:absolute;right:0;top:50%;width:1px;height:14px;
  background:var(--line);transform:translateY(-50%)}
.kicker--light{color:#fff}
.kicker--light .kicker__no{color:rgba(255,255,255,.78)}
.kicker--light .kicker__no::after{background:rgba(255,255,255,.34)}

/* =========================================================================
   HEADER
   ========================================================================= */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;gap:1.2rem;padding:.85rem var(--pad);
  transition:background var(--t),box-shadow var(--t),padding var(--t)}
.nav__brand{display:flex;align-items:center;flex:0 0 auto}
.nav__logo{height:38px;width:auto;transition:opacity var(--t)}
.nav__logo--dark{display:none}
.nav__links{display:flex;gap:1.55rem;flex:1;justify-content:center}
.nav__links a{font-size:.82rem;letter-spacing:.06em;text-decoration:none;color:#fff;
  font-weight:500;opacity:.92;position:relative;padding:.2em 0;transition:opacity var(--t)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:currentColor;transition:right var(--t)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{right:0}
.nav__right{display:flex;align-items:center;gap:1rem;flex:0 0 auto}
.lang{display:flex;align-items:center;gap:.3em}
.lang__btn{background:none;border:none;cursor:pointer;font-family:var(--sans);
  font-size:.78rem;font-weight:600;letter-spacing:.05em;color:#fff;opacity:.6;
  padding:.35em .15em;transition:opacity var(--t);min-width:30px;min-height:30px}
.lang__btn.is-active{opacity:1;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px}
.lang__sep{opacity:.4;font-size:.7rem;color:#fff}
.nav__book{color:#fff;border-color:rgba(255,255,255,.65);padding:.62em 1.1em;
  font-size:.76rem;min-height:40px}
.nav__book:hover{background:#fff;color:var(--ink);border-color:#fff}

/* scrolled / on-paper state */
.nav[data-theme="solid"]{background:rgba(247,244,238,.94);
  backdrop-filter:saturate(1.1) blur(10px);box-shadow:0 1px 0 var(--line)}
.nav[data-theme="solid"] .nav__logo--light{display:none}
.nav[data-theme="solid"] .nav__logo--dark{display:block}
.nav[data-theme="solid"] .nav__links a{color:var(--ink)}
.nav[data-theme="solid"] .lang__btn,
.nav[data-theme="solid"] .lang__sep{color:var(--ink)}
.nav[data-theme="solid"] .nav__book{color:var(--ink);border-color:var(--ink)}
.nav[data-theme="solid"] .nav__book:hover{background:var(--ink);color:var(--paper)}

/* =========================================================================
   HERO — full-bleed photographic
   ========================================================================= */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 var(--pad) clamp(4.5rem,11vh,8rem);
  isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-3}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero__scrim{position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(24,32,27,.46) 0%,rgba(24,32,27,.1) 32%,
    rgba(24,32,27,.12) 55%,rgba(20,28,23,.74) 100%)}
.hero__inner{max-width:min(54rem,100%);color:#fff}
.hero__eyebrow{display:flex;align-items:center;gap:.8em;margin:0 0 1.15rem;
  font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.92)}
.hero__eyebrow-line{display:block;width:34px;height:1px;background:var(--euc-line);flex:0 0 auto}
.hero__title{font-size:clamp(2.85rem,8.2vw,6.6rem);line-height:.98;
  letter-spacing:-.01em;text-shadow:0 1px 40px rgba(15,22,18,.3)}
.hero__line{display:block}
.hero__line--accent{color:#fff;font-style:normal}
.hero__line--accent>span{display:inline}
.hero__level{display:inline-block;width:clamp(48px,9vw,118px);height:2px;
  background:var(--euc-line);vertical-align:middle;margin:0 .22em .14em;border-radius:2px;
  box-shadow:0 0 16px rgba(185,202,182,.5)}
.hero__sub{margin:1.5rem 0 0;max-width:40rem;font-size:clamp(1.02rem,1.4vw,1.2rem);
  line-height:1.62;color:rgba(255,255,255,.94)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}

.hero__datum{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(1.7rem,4.5vh,2.7rem);z-index:1;display:flex;align-items:center;gap:1.1rem;
  color:rgba(255,255,255,.85)}
.hero__datum-k{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;flex:0 0 auto}
.hero__datum-k--r{text-align:right}
.hero__datum .levelline{flex:1 1 auto;min-width:0}

.hero__scroll{position:absolute;right:var(--pad);top:clamp(5.2rem,12vh,7rem);
  display:none;flex-direction:column;align-items:center;gap:.45rem;text-decoration:none;
  color:#fff;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.hero__scroll svg{width:16px;height:26px}
.scroll-line{stroke:#fff;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================================
   HOUSE
   ========================================================================= */
.house{max-width:var(--maxw);margin:0 auto;padding:clamp(4.5rem,10vw,8rem) var(--pad) clamp(3rem,7vw,5rem);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.4rem,5vw,4rem)}
.house__lead{max-width:42rem}
.house__title{font-size:clamp(1.95rem,4.4vw,3.3rem);line-height:1.07;margin-bottom:1.1rem}
.house__intro{font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.6;color:var(--ink-2);
  margin-bottom:1rem}
.house__p{color:var(--ink-2);max-width:var(--measure)}

.house__figs{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:clamp(.8rem,1.8vw,1.3rem)}
.house__fig{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--sand)}
.house__fig img{width:100%;height:100%;object-fit:cover}
.house__fig--wide{aspect-ratio:16/10}
.house__fig--tall{aspect-ratio:3/4}
.house__fig figcaption{position:absolute;left:0;bottom:0;right:0;display:flex;
  flex-direction:column;gap:.15rem;padding:1.5rem 1.1rem .9rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,28,23,.72));font-size:.8rem}
.house__fig .tag{font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:.66rem;color:var(--euc-line)}

.ledger{margin:0;border-top:1px solid var(--line)}
.ledger__row{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.ledger__k{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);padding-top:.18em}
.ledger__v{color:var(--ink-2)}
.ledger__v b{font-family:var(--serif);font-size:1.18rem;color:var(--ink);margin-right:.15em}

/* =========================================================================
   SPA — the level-line section
   ========================================================================= */
.spa{position:relative;background:var(--ink);color:var(--paper);
  padding:clamp(4rem,9vw,7rem) 0}
.spa__rule{max-width:var(--maxw);margin:0 auto clamp(2.6rem,6vw,4.5rem);
  width:calc(100% - 2*var(--pad))}
.spa__grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.spa__copy{max-width:34rem}
.spa__title{font-size:clamp(1.9rem,4.2vw,3.15rem);line-height:1.08;color:#fff;margin-bottom:1.15rem}
.spa__p{color:rgba(247,244,238,.84);margin-bottom:1rem;max-width:40ch}
.spa__p--soft{color:rgba(247,244,238,.66)}
.waterline{margin-top:1.7rem;font-family:var(--serif);font-size:1.18rem;color:var(--euc);
  position:relative;padding-left:46px}
.waterline::before{content:"";position:absolute;left:0;top:50%;width:34px;height:1px;
  background:var(--sage)}

.spa__figs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"hero hero" "a b";gap:clamp(.7rem,1.6vw,1.1rem)}
.spa__fig{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--ink-2)}
.spa__fig img{width:100%;height:100%;object-fit:cover}
.spa__fig--hero{grid-area:hero;aspect-ratio:16/9}
.spa__fig:not(.spa__fig--hero){aspect-ratio:1/1}
.spa__fig figcaption{position:absolute;left:0;bottom:0;right:0;padding:1.3rem .95rem .8rem;
  display:flex;flex-direction:column;gap:.1rem;color:#fff;font-size:.78rem;
  background:linear-gradient(180deg,transparent,rgba(12,18,14,.7))}
.spa__fig .tag{font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:.64rem;color:var(--euc-line)}

/* =========================================================================
   ROOMS
   ========================================================================= */
.rooms{max-width:var(--maxw);margin:0 auto;padding:clamp(4.5rem,10vw,8rem) var(--pad)}
.rooms__head{max-width:42rem;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.rooms__title{font-size:clamp(1.9rem,4.2vw,3.15rem);line-height:1.08;margin-bottom:1rem}
.rooms__lede{color:var(--ink-2);font-size:clamp(1.02rem,1.4vw,1.15rem);max-width:var(--measure)}

.cards{display:flex;flex-direction:column;gap:clamp(1.6rem,3.6vw,2.8rem)}
.card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.2vw,3rem);align-items:center}
.card--flip .card__media{order:2}
.card__media{position:relative;overflow:hidden;border-radius:var(--r);background:var(--sand);
  aspect-ratio:3/2}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.card:hover .card__media img{transform:scale(1.035)}
.card__no{position:absolute;top:.85rem;left:.95rem;z-index:1;font-family:var(--serif);
  font-size:.92rem;letter-spacing:.04em;color:#fff;background:rgba(40,51,43,.62);
  backdrop-filter:blur(3px);padding:.28em .62em;border-radius:var(--r)}
.card__body{max-width:34rem}
.card__name{font-size:clamp(1.5rem,2.8vw,2.15rem);line-height:1.08;margin-bottom:.7rem}
.card__txt{color:var(--ink-2);margin-bottom:1.1rem}
.card__meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.card__meta li{font-size:.74rem;font-weight:500;letter-spacing:.04em;color:var(--sage);
  border:1px solid var(--line);border-radius:100px;padding:.42em .9em;background:var(--paper)}

.rooms__note{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.1rem;
  margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:1.7rem;border-top:1px solid var(--line);
  color:var(--ink-2);max-width:62rem}
.rooms__note>span{flex:1 1 17rem;min-width:0}

/* =========================================================================
   TABLE — full-bleed image band
   ========================================================================= */
.table,.arta{position:relative;min-height:78vh;display:flex;align-items:center;
  padding:clamp(3.5rem,8vw,6rem) var(--pad);overflow:hidden;isolation:isolate}
.table__media,.arta__media{position:absolute;inset:0;z-index:-2}
.table__media img,.arta__media img{width:100%;height:100%;object-fit:cover}
.table__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(20,28,23,.82) 0%,rgba(20,28,23,.52) 46%,rgba(20,28,23,.08) 78%)}
.arta__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(75deg,rgba(20,28,23,.8) 0%,rgba(20,28,23,.46) 50%,rgba(20,28,23,.05) 82%)}
.table__inner,.arta__inner{max-width:var(--maxw);margin:0 auto;width:100%}
.table__panel,.arta__panel{max-width:33rem;color:#fff}
.table__title,.arta__title{font-size:clamp(1.95rem,4.4vw,3.3rem);line-height:1.07;
  color:#fff;margin-bottom:1.1rem}
.table__p,.arta__p{color:rgba(255,255,255,.9);margin-bottom:1.1rem;max-width:42ch}
.table__strip{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
.table__chip{font-size:.74rem;font-weight:500;letter-spacing:.04em;color:#fff;
  border:1px solid rgba(255,255,255,.42);border-radius:100px;padding:.5em 1em}

/* arta distances */
.dist{margin:1.6rem 0 0;border-top:1px solid rgba(255,255,255,.26)}
.dist__row{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 0;
  border-bottom:1px solid rgba(255,255,255,.18)}
.dist__row dt{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.78)}
.dist__row dd{margin:0;font-family:var(--serif);font-size:1.04rem;color:#fff;text-align:right;white-space:nowrap}

/* =========================================================================
   GALLERY — composed plate grid
   ========================================================================= */
.gallery{max-width:var(--maxw);margin:0 auto;padding:clamp(4.5rem,10vw,8rem) var(--pad)}
.gallery__head{max-width:40rem;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.gallery__title{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.08}

.plates{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:clamp(120px,15vw,190px);gap:clamp(.6rem,1.4vw,1rem)}
.plate{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--sand)}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.plate:hover img{transform:scale(1.04)}
.plate__tag{position:absolute;left:0;bottom:0;padding:1rem .8rem .65rem;right:0;color:#fff;
  font-size:.72rem;font-weight:500;letter-spacing:.06em;opacity:0;transform:translateY(6px);
  transition:opacity var(--t),transform var(--t);
  background:linear-gradient(180deg,transparent,rgba(20,28,23,.66))}
.plate:hover .plate__tag{opacity:1;transform:none}
.plate--a{grid-column:span 4;grid-row:span 2}
.plate--b{grid-column:span 2;grid-row:span 1}
.plate--c{grid-column:span 2;grid-row:span 1}
.plate--d{grid-column:span 2;grid-row:span 2}
.plate--e{grid-column:span 2;grid-row:span 1}
.plate--f{grid-column:span 2;grid-row:span 2}
.plate--g{grid-column:span 2;grid-row:span 1}

/* =========================================================================
   BOOK
   ========================================================================= */
.book{background:var(--sand);padding:clamp(4.5rem,10vw,8rem) var(--pad)}
.book__inner{max-width:46rem;margin:0 auto;text-align:center;position:relative}
.book__rule{width:120px;margin:0 auto 2rem}
.book__kick{justify-content:center}
.book__title{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.05;margin-bottom:1.1rem}
.book__txt{color:var(--ink-2);max-width:40rem;margin:0 auto 2rem;
  font-size:clamp(1.02rem,1.4vw,1.14rem)}
.book__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.book__contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem .9rem;margin-top:1.9rem;font-size:.92rem;color:var(--ink-2)}
.book__contact a{text-decoration:none;border-bottom:1px solid var(--stone);padding-bottom:1px}
.book__contact a:hover{color:var(--sage);border-color:var(--sage)}
.book__dot{color:var(--stone-deep)}
.book__rating{display:inline-flex;align-items:center;gap:.4em;width:100%;justify-content:center;
  margin-top:.5rem}
.book__rating b{font-family:var(--serif);color:var(--ink)}
.star{color:var(--gold)}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{background:var(--ink);color:rgba(247,244,238,.74);
  padding:clamp(3rem,6vw,4.5rem) var(--pad) 2rem}
.foot__grid{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem)}
.foot__logo{height:42px;width:auto;margin-bottom:1rem}
.foot__place{font-size:.84rem;letter-spacing:.04em;color:rgba(247,244,238,.6)}
.foot__rule{max-width:200px;margin-top:1.4rem}
.foot__h{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin:0 0 .9rem}
.foot__col p{font-size:.9rem;margin-bottom:.45rem;line-height:1.5}
.foot__col a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:1px}
.foot__col a:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.foot__rate{color:var(--euc)}
.foot__book{margin-top:.7rem;color:#fff;border-color:rgba(255,255,255,.5)}
.foot__book:hover{background:#fff;color:var(--ink)}
.foot__base{max-width:var(--maxw);margin:clamp(2.4rem,5vw,3.4rem) auto 0;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;
  font-size:.8rem;color:rgba(247,244,238,.5)}
.foot__sign{font-family:var(--serif);color:var(--euc)}

/* =========================================================================
   MOTION — reveal on scroll (reduced-motion + no-JS safe)
   ========================================================================= */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-slow),transform var(--t-slow)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .nav__links{gap:1.1rem}
  .house__figs{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
}

@media (max-width:880px){
  .nav__links{display:none}
  .spa__grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .spa__copy{max-width:none}
  .card,.card--flip .card__media{grid-template-columns:minmax(0,1fr)}
  .card{gap:1.1rem}
  .card--flip .card__media{order:0}
  .card__body{max-width:none}
}

@media (max-width:720px){
  .house__figs{grid-template-columns:minmax(0,1fr)}
  .house__fig--tall{aspect-ratio:4/3}
  .plates{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(140px,40vw,200px)}
  .plate--a{grid-column:span 2;grid-row:span 2}
  .plate--b,.plate--c,.plate--e,.plate--g{grid-column:span 1;grid-row:span 1}
  .plate--d,.plate--f{grid-column:span 1;grid-row:span 2}
  .foot__grid{grid-template-columns:minmax(0,1fr);gap:2rem}
}

@media (max-width:560px){
  .hero{padding-bottom:7.5rem}
  .hero__datum{gap:.7rem}
  .hero__datum-k{font-size:.6rem;letter-spacing:.1em}
  .hero__cta .btn{flex:1 1 auto}
  .spa__figs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ledger__row{grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:.8rem}
  .book__contact{flex-direction:column;gap:.4rem}
  .book__dot{display:none}
  /* header: logo + language only; the hero & sticky CTAs carry booking */
  .nav{padding-top:.7rem;padding-bottom:.7rem}
  .nav__book{display:none}
  .nav__logo{height:34px}
  .lang__btn{min-width:34px;min-height:44px;font-size:.82rem;padding:.5em .25em}
  .lang__sep{font-size:.8rem}
}

@media (max-width:380px){
  :root{--pad:1.05rem}
  .hero__title{font-size:clamp(2.5rem,11vw,3rem)}
}