/* =====================================================================
   MUZSIK FODRÁSZAT — homepage
   Fonts: Inter (body / headlines) · Unbounded (display / brand)
   ===================================================================== */

/* ------------------------------- TOKENS ------------------------------ */
:root{
  --cream:#F7F6F2;
  --cream-2:#EFECE3;
  --plate:#F7F5F4;          /* the clip's own backdrop — hides its edges */
  --beige:#E9E3D7;
  --beige-2:#DED6C6;
  --ink:#171717;
  --ink-2:#0E0E0E;
  --ink-3:#232321;
  --brown:#83653F;
  --brown-2:#AD9B83;
  --brown-3:#6B5133;
  --grey:#4D4D4B;
  --grey-2:#979797;
  --grey-3:#6E6E6C;
  --white:#FFFFFF;
  --red:#F34B4B;
  --sel:#4D4A45;

  --ff:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ff-d:'Unbounded','Inter',system-ui,sans-serif;

  --wrap:min(1680px, 92vw);
  --pad:clamp(18px,4vw,64px);
  --navh:clamp(64px,5.6vw,104px);

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-soft:cubic-bezier(.25,.8,.25,1);
}

/* ------------------------------- RESET ------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color:var(--brown-2) var(--cream-2);
}
body{
  font-family:var(--ff);
  font-weight:400;
  color:var(--grey);
  background:var(--cream);
  line-height:1.5;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:4px}

::selection{background:var(--brown);color:var(--cream)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:var(--brown-2);border-radius:20px;border:2px solid var(--cream-2)}
::-webkit-scrollbar-thumb:hover{background:var(--brown)}

/* ------------------------------- LOADER ------------------------------ */
.loader{
  position:fixed;inset:0;z-index:9000;
  display:grid;place-content:center;justify-items:center;gap:34px;
  background:var(--cream);
  transition:opacity .7s var(--e-out),visibility .7s;
}
.loader__mark{
  width:clamp(150px,20vw,280px);
  opacity:0;
  animation:markIn 1.1s var(--e-out) .1s forwards;
}
@keyframes markIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.loader__bar{
  width:clamp(140px,18vw,240px);height:2px;
  background:rgba(131,101,63,.18);overflow:hidden;border-radius:2px;
}
.loader__fill{
  display:block;height:100%;width:0%;
  background:var(--brown);
  transition:width .35s var(--e-soft);
}
body:not(.is-loading) .loader{opacity:0;visibility:hidden;pointer-events:none}

/* ------------------------------- BUTTONS ----------------------------- */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff);font-weight:700;
  font-size:clamp(11px,.86vw,17px);
  letter-spacing:.055em;
  padding:clamp(13px,1.15vw,23px) clamp(22px,2.3vw,46px);
  border:1.6px solid var(--bd);
  color:var(--fg);background:var(--bg);
  overflow:hidden;isolation:isolate;
  transition:color .45s var(--e-out),border-color .45s var(--e-out),transform .5s var(--e-out);
  white-space:nowrap;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform .55s var(--e-out);
}
.btn:hover{color:var(--cream);transform:translateY(-2px)}
.btn:hover::before{transform:scaleY(1);transform-origin:top center}
.btn:active{transform:translateY(0) scale(.985)}

.btn--box{--bg:var(--white);--fg:var(--ink);--bd:var(--ink)}
.btn--fill{--bg:var(--white);--fg:var(--ink);--bd:var(--white)}
.btn--fill::before{background:var(--brown)}
.btn--fill:hover{border-color:var(--brown);color:var(--white)}

.icon-btn{
  display:grid;place-items:center;
  width:clamp(62px,5.1vw,100px);aspect-ratio:1;
  border-radius:clamp(16px,1.5vw,28px);
  overflow:hidden;background:var(--ink);
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out);
}
.icon-btn img{width:100%;height:100%;object-fit:contain;transition:transform .55s var(--e-out)}
.icon-btn:hover{transform:translate(4px,-4px);box-shadow:-8px 8px 0 0 var(--brown-2)}
.icon-btn:hover img{transform:scale(1.08)}

/* ================================= NAV ================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  height:var(--navh);
  display:flex;align-items:center;gap:clamp(14px,2vw,40px);
  padding:0 var(--pad);
  transition:transform .6s var(--e-out),background-color .5s ease,backdrop-filter .5s ease;
}
.nav::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--cream) 78%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  opacity:0;transition:opacity .5s var(--e-out);
}
.nav.is-stuck::after{opacity:1}
.nav.is-dark.is-stuck::after{background:color-mix(in srgb,var(--ink) 72%,transparent)}
.nav.is-hidden{transform:translateY(-105%)}

.nav__logo{flex:0 0 auto;position:relative;display:block;line-height:0}
.nav__logo-img{
  width:clamp(112px,10.4vw,200px);
  transition:opacity .45s var(--e-out),transform .55s var(--e-out);
}
.nav__logo-img--light{position:absolute;inset:0;opacity:0}
.nav.is-dark .nav__logo-img--dark{opacity:0}
.nav.is-dark .nav__logo-img--light{opacity:1}
.nav__logo:hover .nav__logo-img{transform:scale(1.035)}

.nav__search{
  display:inline-flex;align-items:center;gap:.5em;
  /* dead centre of the viewport, out of the flex flow so the logo
     and the links can never nudge it off the middle */
  position:absolute;left:50%;
  transform:translateX(-50%);
  font-family:var(--ff-d);font-weight:500;
  font-size:clamp(11px,.83vw,16px);
  color:var(--ink);
  opacity:.9;
  transition:opacity .4s ease,color .45s ease,letter-spacing .5s var(--e-out);
}
.nav__search img{width:1.15em;height:1.15em;object-fit:contain;transition:transform .5s var(--e-out)}
.nav__search:hover{opacity:1;letter-spacing:.02em}
.nav__search:hover img{transform:rotate(-12deg) scale(1.1)}
.nav.is-dark .nav__search{color:var(--cream)}
.nav.is-dark .nav__search img{filter:invert(1)}

.nav__links{display:flex;align-items:center;gap:clamp(14px,2.1vw,42px);margin-left:auto}
.nav__links a{
  font-family:var(--ff-d);font-weight:700;
  font-size:clamp(10px,.83vw,16px);
  letter-spacing:.01em;
  color:var(--brown);
  position:relative;
  padding-block:6px;
  overflow:hidden;
  display:block;
  transition:color .45s var(--e-out);
}
.nav__links a span{display:block;transition:transform .55s var(--e-out)}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--e-out);
}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__links a:hover span{transform:translateY(-2px)}
.nav.is-dark .nav__links a{color:var(--brown-2)}
.nav.is-dark .nav__links a:hover{color:var(--cream)}

/* burger */
.burger{
  flex:0 0 auto;
  width:clamp(30px,2.4vw,46px);height:clamp(22px,1.75vw,34px);
  display:grid;align-content:space-between;
  padding:0;
}
.burger span{
  display:block;height:clamp(3px,.24vw,5px);width:100%;
  background:var(--brown);border-radius:99px;
  transition:transform .55s var(--e-out),opacity .3s ease,background-color .45s ease,width .5s var(--e-out);
}
.burger:hover span:nth-child(2){width:72%}
.nav.is-dark .burger span{background:var(--brown-2)}
.burger.is-open span{background:var(--cream)}
.burger.is-open span:nth-child(1){transform:translateY(calc(clamp(22px,1.75vw,34px)/2 - 50%)) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0;width:100%}
.burger.is-open span:nth-child(3){transform:translateY(calc(clamp(22px,1.75vw,34px)/-2 + 50%)) rotate(-45deg)}

/* ------------------------------ MENU --------------------------------- */
.menu{
  position:fixed;inset:0;z-index:790;
  background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--navh) var(--pad) var(--pad);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .85s var(--e-out);
}
.menu[hidden]{display:none}
.menu.is-open{clip-path:inset(0 0 0 0)}
.menu__links{display:flex;flex-direction:column;gap:clamp(4px,.6vw,12px)}
.menu__links a{
  display:flex;align-items:baseline;gap:clamp(12px,1.6vw,32px);
  font-family:var(--ff-d);font-weight:800;
  font-size:clamp(26px,5.4vw,104px);
  line-height:1.08;
  color:var(--cream);
  opacity:0;transform:translateY(38px);
  transition:color .4s ease,opacity .7s var(--e-out),transform .8s var(--e-out);
}
.menu.is-open .menu__links a{opacity:1;transform:none}
.menu.is-open .menu__links a:nth-child(1){transition-delay:.16s}
.menu.is-open .menu__links a:nth-child(2){transition-delay:.22s}
.menu.is-open .menu__links a:nth-child(3){transition-delay:.28s}
.menu.is-open .menu__links a:nth-child(4){transition-delay:.34s}
.menu.is-open .menu__links a:nth-child(5){transition-delay:.40s}
.menu__links a i{
  font-family:var(--ff);font-style:normal;font-weight:500;
  font-size:clamp(10px,.9vw,17px);color:var(--brown-2);
  letter-spacing:.14em;
}
.menu__links a:hover{color:var(--brown-2)}
.menu__meta{
  margin-top:clamp(28px,4vw,70px);
  display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,40px);
  font-size:clamp(12px,.9vw,17px);color:var(--grey-2);
  opacity:0;transition:opacity .6s ease .5s;
}
.menu.is-open .menu__meta{opacity:1}

/* ------------------------------ TO TOP ------------------------------- */
.totop{
  position:fixed;left:var(--pad);bottom:clamp(20px,2.4vw,44px);z-index:700;
  width:clamp(40px,3.5vw,66px);aspect-ratio:1;
  opacity:0;transform:translateY(18px) scale(.85);pointer-events:none;
  transition:opacity .55s var(--e-out),transform .55s var(--e-out);
}
.totop img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--e-out)}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover img{transform:translateY(-6px)}
.totop.is-light img{filter:invert(1)}

/* ================================ HERO ================================ */
.hero-pin{
  position:relative;
  height:calc(100svh + var(--pin,190vh));
  background:var(--cream);
}
.hero{
  --p:0;
  /* the pillar-box is gone from the file itself now, so the box simply
     takes the clip's own 1292x1080 shape and nothing is cropped away. */
  --h0:min(74svh,780px);
  --w0:min(calc(var(--h0) * 1.196),96vw);
  position:sticky;top:0;
  height:100svh;
  overflow:hidden;
  background:var(--plate);
  isolation:isolate;
}

/* headline block */
.hero__copy{
  position:absolute;z-index:3;
  top:calc(var(--navh) + clamp(14px,3.4vh,54px));
  left:50%;width:min(1220px,90vw);
  text-align:center;
  transform:translateX(-50%);
}
.hero__title{
  font-family:var(--ff);font-weight:700;
  font-size:clamp(27px,3.25vw,62px);
  line-height:1.08;letter-spacing:-.021em;
  color:var(--brown);
}
.hero__sub{
  margin-top:.32em;
  font-weight:400;
  font-size:clamp(15px,1.52vw,29px);
  line-height:1.25;letter-spacing:-.01em;
  color:var(--grey);
}

/* video — parked on the floor of the screen, plain and fixed in size */
.hero__stage{position:absolute;inset:0;z-index:1}
.hero__media{
  position:absolute;left:50%;bottom:0;
  width:var(--w0);
  height:var(--h0);
  transform:translateX(-50%);
  overflow:hidden;
  background:var(--plate);
}
.hero__video{
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
}

.hero__foot{
  position:absolute;z-index:4;
  left:var(--pad);right:var(--pad);
  bottom:clamp(18px,2.4vw,44px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.hero__hint{
  display:flex;align-items:center;gap:clamp(10px,1vw,20px);
  color:var(--ink);
  transition:color .5s var(--e-out);
}
.hero__hint-label{
  font-family:var(--ff-d);font-weight:600;
  font-size:clamp(9px,.68vw,13px);letter-spacing:.2em;
  opacity:.72;
}
.hero__hint-track{
  display:block;position:relative;
  width:clamp(64px,9vw,168px);height:2px;
  background:currentColor;opacity:.28;border-radius:2px;overflow:hidden;
}
.hero__hint-fill{
  position:absolute;inset:0;transform-origin:left center;
  transform:scaleX(var(--p));
  background:currentColor;
}
.hero__cta{transition:opacity .5s var(--e-out),color .45s var(--e-out),transform .5s var(--e-out)}

/* split-text primitive */
[data-split] .w{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-block:.14em;margin-block:-.14em;
}
[data-split] .w i{
  display:inline-block;font-style:inherit;
  transform:translateY(115%);
  transition:transform .95s var(--e-out);
  transition-delay:var(--d,0s);
}
[data-split].is-in .w i{transform:none}

/* ============================ SECTION BASE ============================ */
.sec{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(96px,11vh,168px);
  overflow-x:clip;
}
.sec--cream{background:var(--cream);color:var(--grey)}
.sec--dark{background:var(--ink);color:var(--grey-2)}

.sec__inner{
  width:var(--wrap);margin-inline:auto;
  will-change:opacity,transform;
}
html.js [data-fade]{opacity:0}

.sec__head{
  text-align:center;
  margin-bottom:clamp(32px,4.4vw,84px);
  position:relative;
}
.sec__head--tight{margin-bottom:clamp(24px,3vw,56px)}
.sec__title{
  font-family:var(--ff);font-weight:700;
  font-size:clamp(22px,2.72vw,52px);
  line-height:1.12;letter-spacing:-.023em;
  color:var(--white);
}
.sec--cream .sec__title{color:var(--ink)}
.sec--cream .sec__title--brown,.sec__title--brown{color:var(--brown)}
.sec__title--sm{font-size:clamp(19px,1.95vw,38px)}
.sec__sub{
  margin-top:.24em;
  font-weight:400;
  font-size:clamp(13px,1.42vw,27px);
  line-height:1.3;letter-spacing:-.008em;
  color:var(--grey-2);
}
.sec--cream .sec__sub{color:var(--grey)}
.sec__sub--sm{font-size:clamp(12px,1.05vw,20px)}

/* stagger primitive */
html.js [data-stagger] > *{
  opacity:0;transform:translateY(34px);
  transition:opacity .85s var(--e-out),transform .95s var(--e-out);
  transition-delay:var(--d,0s);
}
html.js [data-stagger].is-in > *{opacity:1;transform:none}

/* ========================= 02 · OCCASION / BEFORE-AFTER ========================= */
.s-occasion{
  padding-top:clamp(88px,10vh,150px);
  padding-bottom:clamp(150px,25vh,300px);
}
.s-occasion .sec__head{margin-bottom:clamp(24px,3.4vh,64px)}

.ba{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2.1vw,40px);
}
.ba__item{display:flex;flex-direction:column;align-items:center}
.ba__frame{
  position:relative;                    /* the three pairs stack in here */
  height:clamp(180px,46vh,532px);
  width:auto;
  aspect-ratio:405/570;
  border-radius:clamp(10px,1.45vw,28px);
  overflow:hidden;
  background:var(--ink-3);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
  transition:transform .8s var(--e-out),box-shadow .8s var(--e-out);
}
/* one frame, three results — they cross-fade in place, and the incoming
   one drifts a hair closer so the swap reads as a settle, not a cut */
.ba__frame img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  transform:scale(1.065);
  transition:opacity .95s var(--e-out),transform 1.5s var(--e-out);
}
.ba__frame img.is-on{opacity:1;transform:scale(1.02)}
.ba__item:hover .ba__frame{transform:translateY(-8px) scale(1.02);box-shadow:0 44px 80px -32px rgba(0,0,0,1)}
.ba__item:hover .ba__frame img.is-on{transform:scale(1.08)}
.ba__item figcaption{
  margin-top:clamp(8px,1vh,20px);
  font-size:clamp(12px,1.35vw,26px);
  color:var(--grey-2);
}
.ba__arrow{
  width:clamp(46px,6vw,116px);
  color:var(--white);
  flex:0 0 auto;
  margin-bottom:clamp(22px,2.5vw,48px);
}
.ba__arrow svg{width:100%;height:auto;overflow:visible}
.ba__arrow-line{stroke-dasharray:104;stroke-dashoffset:104;transition:stroke-dashoffset 1s var(--e-out) .45s}
.ba__arrow-head{opacity:0;transform:translateX(-10px);transform-origin:center;transition:opacity .5s ease 1.1s,transform .7s var(--e-out) 1.1s}
[data-stagger].is-in .ba__arrow-line{stroke-dashoffset:0}
[data-stagger].is-in .ba__arrow-head{opacity:1;transform:none}
/* every time the pair swaps the arrow ticks over with it, so the eye is
   pulled left-to-right through the new before → after */
.ba__arrow.is-pulse svg{animation:baPulse 1s var(--e-out)}
@keyframes baPulse{
  0%{transform:translateX(-9px);opacity:.35}
  55%{transform:translateX(4px);opacity:1}
  100%{transform:none;opacity:1}
}

/* --------------------------- WORD CYCLER --------------------------- */
.cycler{
  position:absolute;z-index:2;
  left:clamp(12px,1.7vw,34px);
  right:var(--pad);
  bottom:clamp(14px,3vh,52px);
  height:clamp(58px,9.6vw,190px);
  pointer-events:none;
}
.cycler__word{
  position:absolute;left:0;bottom:0;
  display:block;
  font-family:var(--ff-d);font-weight:800;
  font-size:56px;               /* replaced by JS auto-fit */
  line-height:1;letter-spacing:-.02em;
  color:var(--white);
  white-space:nowrap;
  visibility:hidden;
}
.cycler__word.is-live{visibility:visible}
.cycler__word .l{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-block:.16em;margin-block:-.16em;
}
.cycler__word .l i{
  display:block;font-style:normal;
  transform:translateY(112%);
  transition:transform .9s var(--e-out);
  transition-delay:calc(var(--i,0) * 26ms);
}
.cycler__word.is-in .l i{transform:none}
.cycler__word.is-out .l i{
  transform:translateY(-112%);
  transition-duration:.62s;
  transition-delay:calc(var(--i,0) * 16ms);
}

.cycler__dots{
  position:absolute;z-index:3;
  right:var(--pad);bottom:clamp(20px,3vh,52px);
  display:flex;gap:9px;
}
.cycler__dots b{
  display:block;width:26px;height:3px;border-radius:99px;
  background:rgba(255,255,255,.22);overflow:hidden;position:relative;
}
.cycler__dots b::after{
  content:"";position:absolute;inset:0;background:var(--white);
  transform:scaleX(0);transform-origin:left;
}
.cycler__dots b.is-on::after{transform:scaleX(1);transition:transform 3.6s linear}

/* ========================= 03 · POLAROID GALLERY ========================= */
.s-gallery .sec__head{
  display:grid;
  grid-template-columns:auto auto;
  justify-content:center;align-items:center;
  column-gap:clamp(10px,1.35vw,26px);
}
.s-gallery .sec__title{grid-column:1}
.s-gallery .sec__sub{grid-column:1/-1}
.ig-badge{
  grid-column:2;
  width:clamp(26px,2.9vw,56px);aspect-ratio:1;
  transition:transform .6s var(--e-out),filter .6s var(--e-out);
}
.ig-badge img{width:100%;height:100%;object-fit:contain;border-radius:22%}
.ig-badge:hover{transform:rotate(-8deg) scale(1.12)}

.polas{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(8px,1.6vw,34px);
}
.pola{
  --rot:0deg;--ty:0px;
  position:relative;flex:0 1 auto;
  width:clamp(146px,24.2vw,472px);
  transform:rotate(var(--rot)) translateY(var(--ty));
  transition:transform .85s var(--e-out),opacity .85s var(--e-out),filter .6s ease;
  cursor:pointer;
}
.pola--a{--rot:-3.2deg;--ty:22px}
.pola--b{--rot:1.5deg;--ty:-30px}
.pola--c{--rot:2.6deg;--ty:32px}
.pola__shot{
  width:100%;height:auto;
  filter:drop-shadow(0 22px 34px rgba(90,72,48,.20));
  transition:filter .7s var(--e-out);
}
.pola:hover{
  transform:rotate(calc(var(--rot) * .18)) translateY(calc(var(--ty) - 18px)) scale(1.035);
  z-index:6;
}
.pola:hover .pola__shot{filter:drop-shadow(0 40px 56px rgba(90,72,48,.32))}
.polas:hover .pola:not(:hover){filter:saturate(.55) opacity(.72)}

.tape{
  position:absolute;pointer-events:none;
  width:38%;height:auto;
  filter:drop-shadow(0 5px 8px rgba(90,72,48,.16));
}
.tape--a1{width:40%;right:-15%;bottom:3%;transform:rotate(-16deg)}
.tape--b1{width:44%;right:-13%;top:-8%;transform:rotate(-34deg)}
.tape--b2{width:37%;left:-17%;bottom:-7%;transform:rotate(11deg)}
.tape--c1{width:44%;left:30%;top:-20%;transform:rotate(3deg)}

html.js .polas > .pola{opacity:0;transform:rotate(var(--rot)) translateY(calc(var(--ty) + 52px)) scale(.955)}
html.js .polas.is-in > .pola{opacity:1;transform:rotate(var(--rot)) translateY(var(--ty))}

/* ============================ 04 · DEMERAL ============================ */
.s-demeral{background:linear-gradient(180deg,var(--cream) 0%,#FDFCFA 48%,var(--cream) 100%)}
.demeral-mark{
  font-style:normal;font-weight:300;
  color:var(--ink);
  letter-spacing:.22em;
  padding-left:.4em;
  font-size:.98em;
}
.demeral{
  display:grid;grid-template-columns:1.02fr .98fr;
  align-items:center;gap:clamp(24px,3.6vw,72px);
}
.demeral__copy{padding-left:clamp(0px,2.6vw,64px)}
.demeral__name{
  font-family:var(--ff);font-weight:700;
  font-size:clamp(19px,2.05vw,39px);
  letter-spacing:-.02em;color:var(--ink);
}
.demeral__text{
  max-width:34em;
  margin-top:1.05em;
  font-size:clamp(13px,1.22vw,24px);
  line-height:1.46;color:var(--grey);
}
.demeral__copy .icon-btn{margin-top:clamp(20px,2.9vw,56px)}
.demeral__media{will-change:transform}
.demeral__media img{
  width:100%;height:auto;
  filter:drop-shadow(0 40px 46px rgba(60,45,28,.16));
}

/* ============================ 05/06 · TEAM ============================ */
.s-team--rev{padding-top:clamp(20px,4vh,60px)}
.person{
  display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:clamp(26px,4.4vw,86px);
}
.person--rev{grid-template-columns:.95fr 1.05fr}
.person__name{
  font-family:var(--ff);font-weight:700;
  font-size:clamp(21px,2.35vw,45px);
  letter-spacing:-.024em;color:var(--white);
}
.person__bio{
  max-width:47ch;
  margin-top:1.05em;
  font-size:clamp(12.5px,1.2vw,23px);
  line-height:1.5;color:var(--grey-2);
}
.person__copy{display:flex;flex-direction:column;align-items:flex-start}
.person__copy .btn{
  align-self:center;
  min-width:clamp(150px,16vw,320px);
  margin-top:clamp(22px,2.9vw,56px);
}

.person__media{
  position:relative;
  justify-self:center;
  width:min(100%,clamp(220px,30vw,580px));
  will-change:transform;
}
.person__media img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:clamp(12px,1.5vw,30px);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.95);
  transition:transform .9s var(--e-out);
}
.person__media:hover img{transform:scale(1.022) rotate(-.35deg)}

/* red push-pin */
.pin{
  position:absolute;z-index:3;
  top:clamp(-22px,-1.9vw,-11px);left:45%;
  width:clamp(28px,3vw,58px);aspect-ratio:1/1.6;
  transform:rotate(-13deg);
  transform-origin:50% 22%;
  transition:transform .8s var(--e-out);
}
.person--rev .pin{transform:rotate(11deg)}
.pin::before{
  content:"";position:absolute;left:50%;top:46%;
  width:46%;height:56%;
  border-radius:14% 14% 46% 46%;
  transform:translateX(-50%);
  background:linear-gradient(96deg,#E4502C 0%,#C0300F 42%,#7C1A08 100%);
  box-shadow:0 8px 14px rgba(0,0,0,.55);
}
.pin::after{
  content:"";position:absolute;left:0;top:0;
  width:100%;aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 33% 27%,#FFB197 0%,#FA6438 26%,#DE3A12 58%,#8E1E0C 100%);
  box-shadow:inset -4px -5px 10px rgba(0,0,0,.4),0 10px 16px rgba(0,0,0,.5);
}
.person__media:hover .pin{transform:rotate(-2deg) scale(1.08)}
.person--rev .person__media:hover .pin{transform:rotate(3deg) scale(1.08)}

/* ============================ 07 · REVIEWS ============================ */
.reviews{
  display:grid;grid-template-columns:1.06fr .94fr;
  align-items:center;gap:clamp(24px,3.4vw,68px);
}
.reviews__stack{display:flex;flex-direction:column}
/* the PNGs carry their own transparent margin — pull the cards back together */
.review + .review{margin-top:-.75vw}
.review{
  width:76%;height:auto;
  transition:transform .8s var(--e-out),filter .6s ease;
  cursor:default;
}
.review--1{margin-left:24%}
.review--2{margin-left:0}
.review--3{margin-left:13%}
.review:hover{transform:translateX(10px) scale(1.02);z-index:3;position:relative}
.reviews__stack:hover .review:not(:hover){filter:opacity(.62)}

.reviews__title{
  font-family:var(--ff);font-weight:700;
  font-size:clamp(17px,1.86vw,36px);
  line-height:1.18;letter-spacing:-.022em;color:var(--ink);
}
.reviews__text{
  margin-top:1.3em;
  font-size:clamp(13px,1.18vw,23px);
  line-height:1.45;color:var(--grey);
  max-width:46ch;
}
.reviews__copy .btn{margin-top:clamp(26px,3.6vw,70px)}

/* ============================ 08 · BOOKING ============================ */
.s-booking{padding-bottom:clamp(80px,10vh,150px)}
.book{
  width:min(620px,94vw);margin-inline:auto;
  background:var(--white);
  border-radius:clamp(18px,1.9vw,38px);
  padding:clamp(26px,2.6vw,52px) clamp(20px,2.3vw,46px);
  box-shadow:0 40px 80px -50px rgba(80,64,42,.55),0 2px 10px -4px rgba(80,64,42,.14);
  display:flex;flex-direction:column;gap:clamp(22px,2.3vw,44px);
}
.book__intro h3{
  font-weight:700;font-size:clamp(14px,1.05vw,20px);
  color:var(--ink);letter-spacing:-.012em;
}
.book__intro p{
  margin-top:.85em;
  font-size:clamp(12.5px,.92vw,18px);line-height:1.42;color:var(--grey-3);
}
.field label,.field__label{
  display:block;
  font-weight:700;font-size:clamp(13.5px,1.02vw,20px);
  color:var(--ink);letter-spacing:-.012em;
}
.field__hint{
  margin-top:.15em;
  font-size:clamp(12.5px,.92vw,18px);color:var(--grey-3);
}

.select{position:relative;margin-top:clamp(12px,1.1vw,22px)}
.select select{
  appearance:none;-webkit-appearance:none;
  width:100%;
  padding:clamp(11px,.92vw,18px) clamp(44px,3.4vw,66px) clamp(11px,.92vw,18px) clamp(16px,1.25vw,25px);
  border:1.5px solid var(--ink);
  border-radius:99px;
  background:var(--white);
  font-size:clamp(12.5px,.94vw,18px);
  color:var(--ink);
  cursor:pointer;
  transition:border-color .35s ease,box-shadow .35s ease,background-color .35s ease;
}
.select select:invalid,.select select:has(option[value=""]:checked){color:var(--grey-3)}
.select:hover select{box-shadow:0 0 0 3px rgba(131,101,63,.12)}
.select select:focus{outline:none;border-color:var(--brown);box-shadow:0 0 0 3px rgba(131,101,63,.2)}
.select__chev{
  position:absolute;right:clamp(16px,1.25vw,25px);top:50%;
  width:clamp(13px,1vw,20px);height:auto;
  transform:translateY(-50%);
  color:var(--ink);pointer-events:none;
  transition:transform .4s var(--e-out);
}
.select:hover .select__chev{transform:translateY(-38%)}

.legend{display:flex;flex-direction:column;gap:.55em;margin-top:clamp(12px,1.1vw,22px)}
.legend li{display:flex;align-items:center;gap:.7em;font-size:clamp(12.5px,.92vw,18px);color:var(--grey-3)}
.dot{width:clamp(14px,1.1vw,22px);aspect-ratio:1;border-radius:50%;display:block}
.dot--free{background:var(--beige)}
.dot--busy{background:var(--red)}

/* calendar */
.cal{width:min(100%,358px);margin:clamp(20px,2vw,40px) auto 0}
.cal__bar{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.3vw,26px)}
.cal__month{
  font-weight:700;font-size:clamp(13.5px,1.02vw,20px);color:var(--ink);
  min-width:7.5ch;text-align:center;
}
.cal__nav{
  display:grid;place-items:center;
  width:clamp(20px,1.5vw,30px);aspect-ratio:1;color:var(--ink);
  transition:transform .4s var(--e-out),opacity .3s ease;
  opacity:.85;
}
.cal__nav svg{width:60%;height:auto}
.cal__nav:hover{opacity:1;transform:scale(1.2)}
#calPrev:hover{transform:translateX(-3px) scale(1.15)}
#calNext:hover{transform:translateX(3px) scale(1.15)}

.cal__dows,.cal__grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:clamp(3px,.35vw,7px);
  margin-top:clamp(10px,1vw,20px);
}
.cal__dows span{
  text-align:center;font-weight:700;
  font-size:clamp(11px,.86vw,17px);color:var(--ink);
}
.cal__day{
  display:grid;place-items:center;
  aspect-ratio:1;border-radius:50%;
  font-size:clamp(11px,.86vw,17px);
  color:var(--grey-3);background:transparent;
  transition:background-color .35s var(--e-soft),color .35s ease,transform .4s var(--e-out);
}
.cal__day--out{opacity:.42;pointer-events:none}
.cal__day--free{background:var(--beige);color:var(--ink);cursor:pointer}
.cal__day--free:hover{background:var(--beige-2);transform:scale(1.13)}
.cal__day--busy{background:var(--red);color:var(--white);cursor:not-allowed}
.cal__day--past{color:var(--grey-2);opacity:.5;pointer-events:none}
.cal__day--sel{background:var(--sel);color:var(--white);transform:scale(1.06)}
.cal__day--sel:hover{background:var(--sel)}

/* time slots */
.slots{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(7px,.72vw,14px);
  margin-top:clamp(14px,1.3vw,26px);
}
.slot{
  padding:clamp(9px,.78vw,15px) 4px;
  border-radius:clamp(6px,.5vw,10px);
  background:var(--beige);
  font-weight:700;font-size:clamp(11.5px,.88vw,17px);
  color:var(--ink);text-align:center;
  transition:background-color .35s var(--e-soft),color .3s ease,transform .4s var(--e-out);
}
.slot:hover{background:var(--beige-2);transform:translateY(-2px)}
.slot.is-sel{background:var(--ink);color:var(--white);transform:translateY(-2px)}
.slots__empty{
  grid-column:1/-1;font-size:clamp(12.5px,.92vw,18px);color:var(--grey-3);
}
.book__submit{align-self:center;min-width:min(320px,70%)}
.book__done{
  text-align:center;font-size:clamp(12.5px,.92vw,18px);
  color:var(--brown);font-weight:600;min-height:1.4em;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s var(--e-out);
}
.book__done.is-on{opacity:1;transform:none}

/* ============================== 09 · FOOTER ============================== */
.footer{
  background:var(--ink);color:var(--grey-2);
  padding:clamp(56px,7vw,132px) 0 clamp(24px,2.4vw,48px);
  overflow-x:clip;
}
.footer__logo{
  width:clamp(190px,28vw,540px);
  margin:0 auto clamp(46px,6vw,116px);
}
.footer__cols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,60px);
  max-width:min(1400px,96%);margin-inline:auto;
}
.fcol h4{
  font-family:var(--ff-d);font-weight:700;
  font-size:clamp(16px,2vw,39px);
  letter-spacing:-.01em;color:var(--white);
  margin-bottom:clamp(16px,1.8vw,36px);
}
.fcol ul{display:flex;flex-direction:column;gap:clamp(9px,1.05vw,21px)}
.fcol li a{
  font-size:clamp(11.5px,.94vw,18px);
  color:var(--grey-2);
  position:relative;display:inline-block;
  transition:color .4s ease,transform .5s var(--e-out);
}
.fcol li a::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--e-out);
}
.fcol li a:hover{color:var(--white);transform:translateX(4px)}
.fcol li a:hover::after{transform:scaleX(1);transform-origin:left}

.socials{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,22px);margin-top:clamp(20px,2.4vw,48px)}
.socials a{
  width:clamp(28px,2.6vw,50px);aspect-ratio:1;color:var(--white);
  transition:transform .55s var(--e-out),color .4s ease;
}
.socials a svg{width:100%;height:100%}
.socials a:hover{transform:translateY(-4px) scale(1.1);color:var(--brown-2)}

.footer__base{
  margin-top:clamp(60px,9vw,180px);
  display:grid;justify-items:center;gap:clamp(12px,1.3vw,26px);
  position:relative;
}
.footer__made{font-size:clamp(13px,1.24vw,24px);color:var(--grey-2)}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.9vw,38px)}
.footer__legal a{
  font-size:clamp(11px,.88vw,17px);color:var(--grey-2);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(151,151,151,.5);
  transition:color .35s ease,text-decoration-color .35s ease;
}
.footer__legal a:hover{color:var(--white);text-decoration-color:var(--white)}
.footer__marks{
  position:absolute;right:var(--pad);bottom:0;
  display:flex;align-items:center;gap:clamp(10px,1.2vw,24px);
}
.footer__blckt{
  font-family:var(--ff-d);font-weight:500;
  font-size:clamp(14px,1.5vw,29px);color:var(--white);line-height:1;
}
.footer__blckt sup{font-size:.44em;vertical-align:super}
.footer__marks img{width:clamp(64px,7vw,134px)}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1100px){
  .demeral,.person,.person--rev,.reviews{grid-template-columns:1fr}
  .demeral__media,.person__media{order:-1;justify-self:center;max-width:min(520px,86vw)}
  .demeral__copy,.person__copy{max-width:none;text-align:left}
  .reviews__copy{text-align:left}
  .review,.review--1,.review--2,.review--3{width:100%;margin-left:0}
  .reviews__stack{gap:0}
  .review + .review{margin-top:-2vw}
}

@media (max-width:900px){
  :root{--wrap:min(1680px,90vw)}
  .nav__links{display:none}
  .burger{margin-left:auto}   /* with the links gone, nothing else pushes it right */
  .polas{flex-wrap:wrap;justify-content:center;gap:clamp(26px,7vw,60px) clamp(10px,3vw,26px)}
  .pola{width:min(46%,300px)}
  .pola--c{width:min(60%,340px)}
  .footer__cols{grid-template-columns:1fr 1fr;gap:40px 24px}
  .footer__base{margin-top:70px}
  .footer__marks{position:static;justify-content:center;margin-top:18px}
}

@media (max-width:640px){
  :root{--navh:64px}
  .sec{padding-block:clamp(84px,14vh,120px) clamp(64px,10vh,100px);min-height:auto}
  .s-occasion{padding-bottom:clamp(120px,26vh,220px)}
  .hero{--h0:min(72svh,620px)}
  .hero__title{font-size:clamp(24px,7vw,34px)}
  .hero__sub{font-size:clamp(14px,4.2vw,19px)}
  .hero__foot{bottom:16px}
  .hero__hint{display:none}
  .hero__cta{width:100%}
  .hero__hint{justify-content:center}
  .ba{gap:8px}
  .ba__frame{height:clamp(170px,34vh,300px)}
  .ba__arrow{width:34px;margin-bottom:34px}
  .cycler{height:clamp(46px,15vw,88px);right:12px;bottom:38px}
  .cycler__dots{bottom:12px}
  .pola{width:min(70%,280px)}
  .pola--a,.pola--b,.pola--c{--ty:0px}
  .polas{gap:34px}
  .footer__cols{grid-template-columns:1fr;gap:34px}
  .socials{flex-direction:row}
  .slots{grid-template-columns:repeat(3,1fr)}
  .totop{width:38px;bottom:16px}
  .menu__links a{gap:12px}
}

@media (max-width:420px){
  .slots{grid-template-columns:repeat(2,1fr)}
  .book{padding:24px 18px}
}

/* --------------------------- REDUCED MOTION --------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html.js [data-fade],
  html.js [data-stagger] > *,
  html.js .polas > .pola{opacity:1 !important;transform:none !important}
  [data-split] .w i{transform:none !important}
  .cycler__word .l i{transform:none !important}
  .hero-pin{height:auto}
  .hero{position:relative;height:auto;padding-bottom:clamp(24px,4vw,60px)}
  .hero__copy{position:relative;top:auto;left:auto;transform:none;width:min(1220px,90vw);margin:calc(var(--navh) + 24px) auto 24px}
  .hero__stage{position:relative;inset:auto;height:var(--h0)}
  .hero__media{position:relative;left:auto;bottom:auto;transform:none;margin-inline:auto}
  .hero__foot{position:relative;left:auto;right:auto;bottom:auto;margin:24px var(--pad) 0}
}

/* ------------------------------- PRINT -------------------------------- */
@media print{
  .nav,.menu,.totop,.loader,.hero__foot,.cycler__dots{display:none}
  .sec,.footer{min-height:0;page-break-inside:avoid}
  html.js [data-fade],html.js [data-stagger] > *{opacity:1;transform:none}
}

/* ------------------------- LATE ADJUSTMENTS -------------------------- */
section[id],footer[id],main[id]{scroll-margin-top:calc(var(--navh) + 8px)}

.cycler{height:clamp(48px,10vw,196px)}

@keyframes bookShake{
  0%,100%{transform:translateX(0)}
  16%{transform:translateX(-9px)}
  33%{transform:translateX(8px)}
  50%{transform:translateX(-6px)}
  67%{transform:translateX(4px)}
  84%{transform:translateX(-2px)}
}
.book.is-shake{animation:bookShake .55s var(--e-io)}

/* the slot buttons animate in with the day they belong to */
@keyframes slotIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slot{animation:slotIn .5s var(--e-out) backwards}
.slots .slot:nth-child(1){animation-delay:.02s}
.slots .slot:nth-child(2){animation-delay:.05s}
.slots .slot:nth-child(3){animation-delay:.08s}
.slots .slot:nth-child(4){animation-delay:.11s}
.slots .slot:nth-child(5){animation-delay:.14s}
.slots .slot:nth-child(6){animation-delay:.17s}
.slots .slot:nth-child(7){animation-delay:.20s}
.slots .slot:nth-child(8){animation-delay:.23s}

/* calendar days ease in when the month changes */
@keyframes dayIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.cal__grid > *{animation:dayIn .42s var(--e-out) backwards}

/* if the script never ran, nothing may stay hidden behind the loader */
html.fallback .loader{display:none}
html.fallback [data-fade],
html.fallback [data-stagger] > *,
html.fallback .polas > .pola{opacity:1!important;transform:none!important}
html.fallback [data-split] .w i,
html.fallback .cycler__word .l i{transform:none!important}
html.fallback .cycler__word:first-of-type{visibility:visible}
html.fallback .hero-pin{height:100svh}

/* while the fullscreen menu is up, the header keeps only its logo + toggle */
body.is-locked .nav__links,
body.is-locked .nav__search{opacity:0;pointer-events:none}
body.is-locked .nav::after{opacity:0}
body.is-locked .nav__logo-img--dark{opacity:0}
body.is-locked .nav__logo-img--light{opacity:1}