/* ═══════════════════════════════════════════════════════════════════════════
   Juffinger's Gaumenwerk — hero
   Mechanics ported from era-residence.com:
     PHASE A  image translates slowly (~0.18× scroll) to its bottom edge
              content scrolls at 1.0× · counter/rail/nav pinned at 0×
     PHASE B  image stops, zooms from scroll; #after slides up over the hero
   Reference's own numbers: bg box = viewport + 418.5px travel over a 3520px
   pin = 0.119 visual speed; later sections 0.07–0.27; scrub 0.5 lag.
   Type scale: display 12vw / lh .875 / ls -.024em · labels 8.8px / +.048em.
   Palette sampled from uploads/logo.jpg and uploads/hero.png.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --brand:#604669;            /* logo.jpg, exact */
  --ink:#1f1423;
  --bone:#f1e7df;
  --bone-60:rgba(241,231,223,.6);
  --bone-38:rgba(241,231,223,.38);
  --bone-16:rgba(241,231,223,.16);
  --mauve:#b796a1;            /* hero.png wall */
  --wood:#c7a48e;             /* hero.png table */
  --sky:#d8c9d3;              /* light panel for #after */
  --brass:#c08e55;

  --f-display:"Fraunces",'Times New Roman',serif;   /* був Bodoni Moda — тонкий діднот, замінено */
  --f-ui:"Fraunces",'Iowan Old Style',Georgia,serif;   /* важчий серіф, ближче до лого */
  --f-script:"Pinyon Script",cursive;

  --fs-display:clamp(1.6rem,5.8vw,5.2rem);
  --fs-script:clamp(1.5rem,6.3vw,5rem);       /* трохи менше, було 7.4vw/5.9rem */
  --fs-label:.5625rem;
  --fs-body:.8125rem;

  --gut:clamp(1.15rem,3.2vw,3rem);
  /* на скільки секція з куполом заходить поверх попередньої. Одне джерело для
     двох місць: негативний margin-top купола (#info) і запас padding-bottom під
     ним (.menus) — інакше зміна одного числа накрила б куполом чужий контент */
  --dome-rise:clamp(6rem,18vw,22rem);
  --nav-h:clamp(8.5rem,13vw,11rem);   /* висота лівого блоку nav: лого + індикатор скролу */
  --svh:100vh;

  --ease:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* CustomEase "Out" з коду референсу (assets.slater.app/…/60900.js:
     CustomEase.create("Out","0.25,1,0.5,1")) — та сама крива, що на hover
     character-flip лінків (initLinkHover, durM=.8s). Попередня версія брала
     їхню криву "In" (0.5,0,0.75,0) — вона за формою ease-in (повільний старт,
     різкий фінал), тому zoom-in картки виглядав як смик. */
  --ease-card:cubic-bezier(.25,1,.5,1);
  --dur-card:.8s;   /* durM з їхнього коду — константа, зарезервована саме під hover-взаємодії */
}

/* driven by hero.js */
@property --pa{syntax:'<number>';inherits:true;initial-value:0}
@property --pb{syntax:'<number>';inherits:true;initial-value:0}
@property --sc{syntax:'<number>';inherits:true;initial-value:1}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  max-width:100%;
  width:100%;
}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--f-ui);font-size:var(--fs-body);font-weight:500;line-height:1.385;letter-spacing:-.024em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
  width:100%;
}
main{
  overflow-x:hidden;
  max-width:100%;
  width:100%;
}
h1,h2,h3,p,ol,dl{margin:0}
ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:99}
.skip:focus{left:var(--gut);top:.5rem;padding:.6rem 1rem;background:var(--bone);color:var(--ink)}

.label{
  font-size:var(--fs-label);line-height:1.45;letter-spacing:.048em;
  text-transform:uppercase;font-weight:650;
}

/* roll-up hover — clip on .roll_i so button padding can't leak the copy */
.roll_i{display:block;height:1.15em;overflow:hidden}
.roll_i>span{display:block;height:1.15em;transition:transform .6s var(--ease)}
.roll:hover .roll_i>span,.roll:focus-visible .roll_i>span{transform:translateY(-100%)}

/* ── nav ─────────────────────────────────────────────────────────────────────
   Фіксований на весь екран оверлей (не бар). Лого + індикатор скролу (nav_left)
   і посилання (nav_links) — окремі кутові блоки, завжди на екрані на всіх
   сторінках сайту, незалежно від висоти hero чи довжини сторінки. ──────────── */
.nav{
  position:fixed;inset:0;z-index:40;padding:var(--gut);
  pointer-events:none;
}
.nav_left,.nav_right_actions{pointer-events:auto}

.nav_left{
  position:absolute;top:var(--gut);left:var(--gut);
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
}
.nav_logo{width:clamp(3rem,4.6vw,4.25rem)}
.nav_logo img{width:100%;height:auto}

.nav_right_actions{
  position:absolute;top:var(--gut);right:var(--gut);
  display:flex;align-items:center;gap:1.2rem;
}
.nav_right_actions .btn--solid{
  background:transparent;color:var(--bone);border:none;padding:0;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  opacity:.85;transition:opacity .3s var(--ease);
}
.nav_right_actions .btn--solid:hover{background:transparent;color:var(--bone);opacity:1}

.burger_btn{
  width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid var(--bone-38);background:rgba(31,20,35,.4);
  backdrop-filter:blur(4px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  cursor:pointer;transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.burger_btn:hover{border-color:var(--bone);background:var(--brand)}
.burger_btn span{display:block;width:1.15rem;height:2px;background:var(--bone);border-radius:1px}

/* Burger drawer overlay */
.burger_overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;justify-content:flex-end;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;
}
.burger_overlay.is-open{opacity:1;visibility:visible}

.burger_backdrop{
  position:absolute;inset:0;background:rgba(15,10,18,.75);backdrop-filter:blur(8px);
}
.burger_content{
  position:relative;z-index:2;width:min(26rem,85vw);height:100%;
  background:var(--ink);border-left:1px solid var(--bone-16);
  padding:var(--gut) clamp(1.5rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.burger_overlay.is-open .burger_content{transform:translateX(0)}
.burger_close{
  position:absolute;top:var(--gut);right:var(--gut);
  width:2.5rem;height:2.5rem;font-size:2rem;line-height:1;
  color:var(--bone-60);display:grid;place-items:center;
  transition:color .3s var(--ease);cursor:pointer;
}
.burger_close:hover{color:var(--bone)}
.burger_nav{display:flex;flex-direction:column;gap:1.5rem}
.burger_link{
  font-family:var(--f-display);font-size:clamp(1.25rem,3.2vw,2rem);
  text-transform:uppercase;color:var(--bone);letter-spacing:-.01em;
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;z-index:0;background:var(--ink);
  /* висоту (FH+LA+LB) створює сам ScrollTrigger через pin-spacer — тут нічого
     не задаємо, інакше зайвий порожній простір поверх spacer'а */
}
.hero_frame{
  height:var(--svh);
  /* position:fixed застосує сюди сам ScrollTrigger (pin:true) на час скролу;
     clip, НЕ hidden — hidden зробив би предка scroll-контейнером */
  overflow:clip;
  background:linear-gradient(160deg,#6c5260 0%,#8d768a 42%,#926f69 100%);
}

/* slow layer. Full width at natural aspect ⇒ taller than the frame; the
   surplus IS the travel distance for phase A. Bottom-anchored origin so the
   phase-B zoom pushes into the food and never exposes an edge. */
.hero_media{
  position:absolute;top:0;left:0;width:100%;
  transform-origin:50% 100%;
  will-change:transform;
}
.hero_img{
  width:100%;height:auto;
  opacity:0;
  will-change:transform,opacity;
}
.nav_left,.nav_links,.hero_eyebrow,.hero_tag,.hero_cta{opacity:0}
body.is-ready .nav_left,body.is-ready .nav_links,body.is-ready .hero_eyebrow,body.is-ready .hero_tag,body.is-ready .hero_cta{opacity:1}

/* fallback where the image is shorter than the viewport (portrait phones):
   no reveal to give, so cover the frame and keep only the phase-B zoom */
.hero--simple .hero_media{height:100%}
.hero--simple .hero_img{height:100%;object-fit:cover;object-position:58% 100%}

.hero_scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(31,20,35,.74) 0%, rgba(31,20,35,.32) 26%,
      rgba(31,20,35,0)   46%, rgba(31,20,35,0) 78%,
      rgba(31,20,35,.34) 100%),
    radial-gradient(120% 76% at 16% 26%,rgba(31,20,35,.28) 0%,rgba(31,20,35,0) 60%);
}
.hero_cover{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:#604769;will-change:opacity;
}

/* ── hotspots ────────────────────────────────────────────────────────────── */
.pins{
  position:absolute;inset:0;z-index:3;
  opacity:clamp(0,(var(--pa) - .5) * 3.2,1);
  pointer-events:none;
}
.pins.on{pointer-events:auto}
.pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
/* counter-scale so markers keep their size through the phase-B zoom */
.pin>*{transform:scale(calc(1 / var(--sc)))}

.pin_dot{
  position:absolute;translate:-50% -50%;
  width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.10);
  backdrop-filter:blur(2px);
  display:grid;place-items:center;
  transition:background-color .4s var(--ease),border-color .4s var(--ease);
}
.pin_dot::after{
  content:"";width:.4rem;height:.4rem;border-radius:50%;background:#fff;
  transition:transform .4s var(--ease);
}
.pin_dot:hover,.pin_dot:focus-visible{background:rgba(255,255,255,.9);border-color:#fff}
.pin_dot:hover::after,.pin_dot:focus-visible::after{background:var(--ink);transform:scale(1.5)}

/* пульсуюче кільце навколо точки. У референса аналогічний ефект (.pin_bg_pulse)
   керується GSAP-твіном, значення якого не вдалось зняти (кільця неактивні в
   поточній сесії) — тому тривалість/крива тут підібрані власноруч. */
.pin_dot::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);pointer-events:none;
  animation:pinPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.pin.open .pin_dot::before{animation-play-state:paused;opacity:0}
@keyframes pinPulse{
  0%{transform:scale(1);opacity:.65}
  100%{transform:scale(1.9);opacity:0}
}

.pin_card{
  position:absolute;left:2.25rem;top:-1rem;width:min(20rem,64vw);
  transform-origin:0 0;
  padding:1.25rem 1.35rem 1.35rem;border-radius:3px;
  background:rgba(244,238,232,.97);color:var(--ink);
  box-shadow:0 1.5rem 3rem rgba(20,12,24,.3);
  opacity:0;visibility:hidden;transform:scale(.82);
  /* крива й тривалість — реальні значення з референсу: computed transition
     на .floating-tip-card (картка, що з'являється при наведенні на пін) */
  transition:opacity var(--dur-card) var(--ease-card),transform var(--dur-card) var(--ease-card),visibility var(--dur-card);
}
.pin--left .pin_card{left:auto;right:2.25rem;transform-origin:100% 0}
.pin.open .pin_card{opacity:1;visibility:visible;transform:scale(1)}
.pin_card h3{
  font-family:var(--f-display);font-variation-settings:'opsz' 24;font-weight:400;
  text-transform:uppercase;font-size:1.15rem;line-height:1.05;letter-spacing:-.02em;
  margin-bottom:.6rem;padding-right:1.5rem;
}
.pin_card p{font-size:.8125rem;line-height:1.45;color:rgba(31,20,35,.78)}
.pin_meta{margin-top:.6rem;font-weight:600;color:var(--brand)!important}
.pin_x{
  position:absolute;top:.5rem;right:.6rem;width:1.75rem;height:1.75rem;
  border-radius:50%;display:grid;place-items:center;font-size:1.1rem;line-height:1;
  color:rgba(31,20,35,.5);
}
.pin_x:hover{color:var(--ink);background:rgba(31,20,35,.07)}

/* ── normal-speed content layer ──────────────────────────────────────────── */
.hero_content{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* центр по всій висоті кадру — nav — це fixed-оверлей поза потоком, тому
     відступ на nav-h тут більше не потрібен (був причиною зсуву вниз) */
  text-align:center;padding:0 var(--gut);
  will-change:transform;
}
.hero_stack{width:100%;max-width:56rem;display:flex;flex-direction:column;align-items:center}

.hero_eyebrow{display:flex;gap:.6em;align-items:center;justify-content:center;color:var(--bone-60)}
.hero_eyebrow i{font-style:normal;color:var(--bone-38)}

/* ── split title animation ────────────────────────────────────────────────── */
.split-word{
  display:inline-block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  vertical-align:bottom !important;
  margin-right:.22em;
}
.split-word:last-child{margin-right:0}
.split-char{
  display:inline-block !important;
  will-change:transform,opacity;
}

.hero_script .split-word{
  padding:.35em .15em;
  margin:-.35em -.15em;
}

.hero_script{
  font-family:var(--f-script);font-weight:400;
  font-size:var(--fs-script);line-height:.82;
  margin:clamp(1.1rem,3.2vh,2.4rem) 0 0 .06em;color:var(--mauve);   /* більший відступ, було 2.2vh/1.75rem */
}
.hero_display{
  font-family:var(--f-display);font-optical-sizing:auto;
  font-weight:650;text-transform:uppercase;               /* було 400 — занадто тонко для Fraunces у великому кеглі */
  font-size:var(--fs-display);line-height:.875;letter-spacing:-.024em;
  margin-top:-.12em;white-space:nowrap;
}
/* the reference's split tagline with a rule between the halves */
.hero_tag{
  margin-top:clamp(1.5rem,3.6vh,2.75rem);                 /* більший відступ, було 2.6vh/2rem */
  display:flex;align-items:center;justify-content:center;gap:clamp(.9rem,2vw,1.7rem);
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:550;
  text-transform:uppercase;letter-spacing:.03em;font-size:clamp(.75rem,1.05vw,.9rem);
  color:var(--bone-60);
}
.hero_tag em{flex:0 1 7rem;height:1px;background:var(--bone-38)}

.hero_cta{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center;margin-top:clamp(1.75rem,4.2vh,3rem)}   /* більший відступ, було 3vh/2.25rem */
.btn{
  display:inline-block;padding:.9em 1.5em;border:1px solid transparent;border-radius:2px;   /* трохи менше, було 1.05em 1.7em */
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:700;
  transition:background-color .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.btn--solid{background:var(--bone);color:var(--ink)}
.btn--solid:hover{background:var(--brand);color:var(--bone)}
.btn--ghost{border-color:var(--bone-38);color:var(--bone)}
.btn--ghost:hover{border-color:var(--bone);background:rgba(241,231,223,.08)}

/* ── nav_scroll — індикатор скролу ────────────────────────────────────────── */
.nav_scroll{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
.nav_count{
  font-family:var(--f-display);font-variation-settings:'opsz' 16;color:var(--bone);
  font-size:1.5rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.nav_rail{display:block;width:1px;height:50vh;background:var(--bone-16);position:relative;overflow:hidden}
.nav_rail i{
  position:absolute;top:0;left:0;right:0;display:block;height:40px;background:var(--bone);
  will-change:transform;
}
.nav_word{writing-mode:vertical-rl;color:var(--bone-60);transition:opacity .5s var(--ease)}

/* ── AFTER — rides up over the pinned hero ──────────────────────────────── */
.after{
  position:relative;z-index:10;width:100%;
  margin-top:calc(var(--svh) * -1);       /* provisional; hero.js sets exact px */
  background:var(--sky);color:var(--ink);
  padding:0 var(--gut) clamp(4rem,10vh,8rem);
  /* купол: два кутові радіуси по 50vw у сумі точно = ширині секції (100vw),
     тож дуги сходяться рівно в центрі без зламу — справжній півкруг, а не
     плаский eліпс. Довжина в vw, не % — % рахувався б від власної (величезної)
     висоти секції і зламав би форму. */
  border-radius:50vw 50vw 0 0;
}
.after_arc{
  margin:0 auto;max-width:64rem;padding-top:clamp(.5rem,1.5vw,1.5rem);
  transform:translateY(100px);
}
.after_arc svg{width:100%;height:auto;overflow:visible}
.after_arc text{
  fill:var(--ink);font-family:var(--f-display);font-variation-settings:'opsz' 40;
  font-size:52px;text-transform:uppercase;letter-spacing:.06em;
}

/* ── after_deco — заповнює простір, доки купол (border-radius:50vw) ще
      видимий; вимірюється у vw, щоб лишатись пропорційною радіусу купола
      на будь-якій ширині екрана ─────────────────────────────────────────── */
.after_deco{
  margin-top:5vw;display:flex;flex-direction:column;align-items:center;gap:clamp(1.5rem,4vw,3rem);
}
.after_deco_row{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.9rem,2vw,1.6rem);color:rgba(31,20,35,.5);
  width:100%;max-width:32rem;
}
.after_deco_row .label{flex:1 1 0;color:inherit}
.after_deco_row .label:first-child{text-align:right}
.after_deco_row .label:last-child{text-align:left}
/* два декоративні мотиви секції — ромб-розділювач і вертикальна волосінь.
   Другі імена (.deco_mark/.deco_line) — щоб той самий мотив можна було взяти
   в іншу секцію (#reinheit) без копіювання значень. Висота волосіні там своя,
   через локальний перебив. */
.after_deco_mark,.deco_mark{
  width:.45rem;height:.45rem;flex:none;
  border:1px solid rgba(31,20,35,.4);transform:rotate(45deg);
}
.after_deco_line,.deco_line{width:1px;height:clamp(5rem,13vw,10rem);background:rgba(31,20,35,.18)}
.after_deco_sub{
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:550;
  text-transform:uppercase;letter-spacing:.03em;font-size:clamp(.75rem,1.05vw,.9rem);
  color:rgba(31,20,35,.55);text-align:center;line-height:1.5;
}

/* ── acols — асиметричний колонковий шаблон із референсу ────────────────────
      Виміряно на референсі: широка колонка — порожній канал — така сама широка
      колонка, у пропорції 1000 : 500 : 1000, тобто 40% : 20% : 40%. Сітка на
      10 колонок дає цю пропорцію РІВНО цілими спанами: колонки 1–4 (40%) ·
      канал 5–6 (20%) · колонки 7–10 (40%). (На 12 колонках цілими спанами така
      пропорція не виражається — вийшло б 41.7 / 16.7 / 41.7, тобто канал на
      чверть вужчий за референс, тому саме 10.)
      Контент ніколи не займає всю ширину — тільки один із двох крайніх блоків,
      тож порожній канал тримає асиметрію на будь-якій ширині екрана без жодного
      фіксованого px.
      Ритм — почерговий (right → left → right → left → right) із вертикальним
      перекриттям --stagger: сусідні блоки заходять один одному «за плече».
      Перекриття зроблене негативним margin-top: він зменшує висоту власного
      рядка, тому всі наступні рядки підтягуються вгору, а сам блок виступає
      над своїм рядком — без absolute і без transform (тобто потік і висота
      секції лишаються коректними). Колізії немає: блоки, що перекриваються по
      вертикалі, стоять у різних колонках і горизонтально не перетинаються. */
.acols{
  /* --stagger керує і перекриттям сусідніх блоків, і порожнечею ВСЕРЕДИНІ
     колонки: між двома лівими блоками стоїть рядок правого, тому
     вертикальний просвіт у колонці = висота плитки − 2 × stagger. Отже
     stagger і просвіт — обернені: просвіт = висота_фото + 2×висота_підпису
     − 2×stagger. Тому "більший просвіт" = МЕНШИЙ stagger (і, відповідно,
     менше перекриття з правою колонкою — це та сама одна величина).
     Форма calc(6vw + 2.4rem), а не чисті vw: підпис має фіксовану висоту, тому
     лише мішана формула тримає просвіт у стабильній пропорції до фото
     (≈0.6 його висоти) на всіх ширинах, а не лише на одній.
     Історія: 5vw (≈0.7 висоти фото) → 11vw (≈0.34) → 13vw (≈0.3) →
     тепер ≈0.6, тобто вдвічі більший просвіт. */
  --stagger:clamp(1.25rem,calc(6vw + 2.4rem),15rem);
  margin-top:clamp(3rem,7vw,6rem);
  display:grid;grid-template-columns:repeat(10,1fr);align-items:start;
}
.acols_i{grid-column:1/5}        /* ліва широка колонка — 40% */
.acols_i--r{grid-column:7/11}    /* права широка колонка — 40% */
/* кожен блок — у власному рядку. Без цього auto-placement пакує лівий і правий
   блоки в ОДИН рядок (по колонках вони не конфліктують), і ритм виходить
   симетричний «пліч-о-пліч» замість почергового зигзагу референсу.
   Додається блок у секцію → дописати йому номер рядка тут. */
.acols_i:nth-child(1){grid-row:1}
.acols_i:nth-child(2){grid-row:2}
.acols_i:nth-child(3){grid-row:3}
.acols_i:nth-child(4){grid-row:4}
.acols_i:nth-child(5){grid-row:5}
.acols_i:nth-child(6){grid-row:6}
.acols_i+.acols_i{margin-top:calc(var(--stagger) * -1)}

/* ── lead — заголовок + текст рівно як на референсі: великий display-заголовок
      на всю ширину колонки (перший рядок із відступом — деталь референсу),
      а короткий абзац — лише в правій частині тієї ж колонки, вирівняний по
      її правому краю. Довгий суцільний абзац переписано в цю пару. ───────── */
.lead{
  grid-column:5/11;
  display:grid;grid-template-columns:repeat(5,1fr);row-gap:clamp(1.5rem,4.5vw,4.5rem);
}
@media (max-width:56rem){
  .lead{grid-column:1/-1}
}
.lead_h{
  grid-column:1/-1;color:var(--ink);
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.35rem,2.7vw,2.9rem);line-height:1.06;letter-spacing:-.008em;
  text-transform:uppercase;
}
/* 2/-1 = 80% ширини колонки; правий край збігається з правим краєм заголовка */
.lead_p{grid-column:2/-1;color:rgba(31,20,35,.72);font-size:.9375rem;line-height:1.55}
@media (min-width:64rem){
  .lead_h{padding-left:3.2em}
}

.tile{display:block}   /* заокруглення прибрано — референс: гострі кути */
/* display:block обовʼязковий: на inline-елементі aspect-ratio не діє взагалі,
   тому висота бралася з власних пропорцій картинки (3/2), а не з заданої */
.tile_img{display:block;position:relative;aspect-ratio:4/3;overflow:clip;background:var(--ink)}
.tile_img img{width:100%;height:100%;object-fit:cover}   /* без hover-анімації самого фото */

/* ── tile_ring — кільце з підписом усередині фото: їде за курсором і видиме
      лише під час hover (як на референсі). Анімується transform-ом (translate),
      тобто композитором, без layout; плавне "доганяння" курсора дає сам
      transition на translate — власний rAF-lerp не потрібен.
      Якір — центр фото (left/top:50%), а JS пише у --rx/--ry ВІДХИЛЕННЯ курсора
      від цього центру. Тому дефолт (--rx/--ry = 0, тобто без JS або до першого
      руху мишею, включно з появою по focus-visible) — це рівний центр фото.
      Відсоток у translate рахується від САМОГО кільця, тож -50%/-50% центрують
      його на якорі — мішати туди позицію курсора у % не можна, це і давало б
      куток замість центру.
      Окремі властивості translate/scale (а не transform) — щоб JS (позиція) і
      CSS (поява/масштаб) не перезаписували одне одного.
      overflow:clip на .tile_img обрізає кільце по краю фото — воно ніколи не
      виходить за межі картинки. ──────────────────────────────────────────── */
.tile_ring{
  position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;
  width:clamp(5.5rem,8.5vw,9rem);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(241,231,223,.8);
  display:grid;place-items:center;padding:0 .9rem;
  color:var(--bone);text-align:center;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;line-height:1.4;
  translate:calc(var(--rx,0px) - 50%) calc(var(--ry,0px) - 50%);
  scale:.82;opacity:0;
  transition:translate .45s var(--ease-out),scale .45s var(--ease-out),opacity .3s var(--ease-out);
}
.tile:hover .tile_ring,.tile:focus-visible .tile_ring{scale:1;opacity:1}
/* стрибок кільця на місце курсора при вході, без проїзду з попередньої точки */
.tile_ring.is-jump{transition:scale .45s var(--ease-out),opacity .3s var(--ease-out)}
/* тач: hover-стану немає — кільце нічого не додає, лише блимало б після тапу,
   а опис має бути видимий завжди, інакше на телефоні до нього не дістатись */
@media (hover:none){
  .tile_ring{display:none}
  .tile_desc>span{clip-path:none;transition:none}
}

/* підпис — плоский текст під картинкою, без фону/тіні/накладання: у
   референсі жодна підпис-плитка не має тіні чи боксу поверх фото */
.tile_label{
  display:block;margin-top:1rem;color:var(--ink);
  font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;font-weight:600;
}

/* ── tile_desc — опис під підписом, з'являється лише на hover ───────────────
      Маска: зовнішній span має висоту тексту й overflow:clip, внутрішній
      живе у потоці (тому висота зарезервована завжди — hover нічого не
      штовхає) і виїжджає translate-ом з-під нижнього краю маски.
      Mask-in і mask-out — різні: transition на базовому стані описує ВИХІД
      (швидше, симетрична крива), transition у :hover — ВХІД (довше, ease-out).
      Через це поява читається як витягування тексту, а зникання — як швидке
      прибирання під маску. ────────────────────────────────────────────────── */
/* margin-left:20% — той самий лівий відступ, що й у описі під заголовком
   (.lead_p стоїть у 2-й з 5 колонок своєї колонки, тобто теж 20%).
   34ch замість 42ch — щоб довший текст лягав у 3 рядки, а не в 2. */
.tile_desc{display:block;overflow:clip;margin-top:.55rem;margin-left:20%;max-width:34ch}
/* Сам ТЕКСТ не рухається взагалі — рухається лише край маски (clip-path):
   inset(0 100% 0 0) = обрізано праворуч повністю (тексту не видно) →
   inset(0 0 0 0) = маска зійшла, текст відкритий. Це і є "штора", що
   з'їжджає з нерухомого тексту; жодного translate на тексті. */
.tile_desc>span{
  display:block;color:rgba(31,20,35,.72);font-size:.875rem;line-height:1.5;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .4s var(--ease);        /* mask-out: штора накриває */
}
.tile:hover .tile_desc>span,.tile:focus-visible .tile_desc>span{
  clip-path:inset(0 0 0 0);
  transition:clip-path .6s var(--ease-out);    /* mask-in: штора відкриває */
}

/* ── Rezepte — по центру секції, з центрованим описом під кнопкою ─────────── */
.acols_i--mid{
  grid-column:1/-1;                     /* на всі 10 колонок, а не в одну з двох */
  display:grid;justify-items:center;text-align:center;
}
.rezepte_desc{
  margin-top:clamp(1.25rem,2.4vw,2.25rem);max-width:36ch;
  color:rgba(31,20,35,.72);font-size:.9375rem;line-height:1.55;
}
.rezepte_kicker{margin-top:clamp(1rem,1.8vw,1.75rem);color:rgba(31,20,35,.5)}

/* кругла кнопка "Rezepte" — окремий елемент, не плитка з фото */
.round-btn{
  position:relative;
  width:clamp(9rem,16vw,13rem);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;color:var(--ink);
}
.round-btn_ring{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(31,20,35,.32);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.round-btn .roll_i{position:relative;z-index:1}   /* інакше кільце (position:absolute) намалюється над текстом */
.round-btn:hover .round-btn_ring,.round-btn:focus-visible .round-btn_ring{border-color:var(--ink);transform:scale(1.04)}

/* пульс — той самий "вказівник", що на пінах у hero (.pin_dot::before): та сама
   тривалість 2.4s і та сама крива. Відрізняється лише масштаб: пін — 2.5rem на
   фото (scale 1.9 = +30px), а кругла кнопка ~13rem, і scale 1.9 роздуло б кільце
   майже на 200px у сусідній контент, тому 1.22.
   ОДНЕ правило на всі круглі кнопки сайту (Rezepte + Catering) — щоб пульс не
   розʼїхався по копіях; різниться лише колір кільця, бо контекст різний:
   ink на світлій секції, bone на фото. */
.round-btn::before,.cat_cta::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1px solid currentColor;
  animation:btnPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.round-btn::before{color:rgba(31,20,35,.32)}
.cat_cta::before{color:rgba(241,231,223,.45)}
/* на hover пульс заважає — там уже своя реакція кільця (scale 1.04) */
.round-btn:hover::before,.round-btn:focus-visible::before,
.cat_cta:hover::before,.cat_cta:focus-visible::before{animation-play-state:paused;opacity:0}
@keyframes btnPulse{
  0%{transform:scale(1);opacity:.55}
  100%{transform:scale(1.22);opacity:0}
}

/* світлий варіант тієї самої круглої кнопки — для темних секцій. Мусить стояти
   ПІСЛЯ .round-btn і .round-btn::before: специфічність однакова (0,1,0), тому
   вирішує порядок — раніше правило стояло вище й ink просто перебивав bone. */
.round-btn--light{color:var(--bone)}
.round-btn--light .round-btn_ring{border-color:rgba(241,231,223,.42)}
.round-btn--light:hover .round-btn_ring,
.round-btn--light:focus-visible .round-btn_ring{border-color:var(--bone)}
.round-btn--light::before{color:rgba(241,231,223,.42)}

/* вузькі екрани: асиметрія й перекриття не мають сенсу — один стовпчик на всю
   ширину, звичайний вертикальний ритм */
@media (max-width:56rem){
  .acols{--stagger:0px;row-gap:clamp(2rem,7vw,3.5rem)}
  .acols_i,.acols_i--r{grid-column:1/-1}
  .lead_p{grid-column:1/-1}
}

/* ── pure (Reinheit) — біла секція з відео-фоном ────────────────────────────
      Композиція з референсу: капс-eyebrow → центрований display-заголовок →
      центрований текст → сітка "frei von"-значків замикає композицію (замість
      декоративного ромба з референсу: тут цю роль виконує змістовний блок).
      isolation:isolate — щоб z-index відео не конфліктував із фіксованим nav. */
.pure{
  position:relative;isolation:isolate;overflow:clip;
  background:#fff;color:var(--ink);
  min-height:100svh;
  padding:clamp(6rem,20vh,14rem) var(--gut) clamp(9rem,20vw,22rem);
  display:grid;align-content:center;
}
/* ЦЕЙ блок і центрує вміст. Без нього (був просто div без стилів) центрованим
   виходив лише сам wrapper, а його діти — ліворуч у ньому: eyebrow і абзаци
   стояли зі зсувом вліво, і центрованим виглядав тільки заголовок, бо мав
   власний text-align. */
.pure_in{
  display:grid;justify-items:center;text-align:center;
  width:100%;max-width:82rem;margin-inline:auto;
}
/* відео — фон, не контент: без контролів, без фокуса, під вмістом.
   Не inset:0 + cover! Секція майже завжди вища за 16/9, і тоді cover обрізав би
   кадр ПО БОКАХ — тобто саме там, де корова і свині (на 1585×1148 це -228px з
   кожного боку). Тому відео — смуга на всю ширину, прибита до низу, з власною
   пропорцією 16/9: кадр не ріжеться ніколи, зверху лишається біле поле, яке
   збігається з фоном секції, а якщо вʼюпорт нижчий за смугу — overflow:clip
   зрізає верх кадру, де все одно біле небо. */
/* У самому файлі відео є темна кайма: заміряно по кадру через canvas —
   верхні 5px ≈ яскравість 21 (майже чорні) і 3 крайні лівих стовпці темні.
   Саме ця кайма й читалась як тонка темна лінія через увесь екран.
   Тому: бока й низ смуги виносяться ЗА межі секції (overflow:clip їх зрізає),
   а верх зрізається clip-path. Зрізи не видно — навколо все одно білий фон
   секції, який дорівнює білому небу в кадрі. */
.pure_bg{
  position:absolute;left:-1rem;bottom:-1rem;z-index:-1;
  width:calc(100% + 2rem);height:auto;aspect-ratio:16/9;
  clip-path:inset(.75rem 0 0 0);
  pointer-events:none;
}
.pure_k{color:rgba(31,20,35,.8)}
/* Пропорції знято з референсу (2000px vp): заголовок ≈50px (2.5vw) при мірі
   ≈54vw — тобто НЕ гігантський кегль у вузьку колонку, а середній у широку. */
.pure_h{
  margin-top:clamp(1.25rem,2.3vw,2.75rem);max-width:34ch;
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.5rem,2.6vw,3.4rem);line-height:1.06;letter-spacing:-.012em;
  text-transform:uppercase;
}
/* декор між заголовком і сіткою — той самий стек, що в after_deco:
   рядок капс-слів із ромбами-розділювачами, під ним вертикальна волосінь.
   Волосінь тут коротша за ту в #after: там вона тримає великий порожній простір
   під куполом, тут — лише пауза між заголовком і сіткою. */
.pure_deco{
  margin-top:clamp(1.75rem,4vw,3.5rem);
  display:flex;flex-direction:column;align-items:center;gap:clamp(1.25rem,3vw,2.25rem);
}
.pure_deco_row{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(.9rem,2vw,1.6rem);color:rgba(31,20,35,.5);
}
.pure_deco_row .label{color:inherit}
.pure_deco .deco_line{height:clamp(2.5rem,6vw,4.5rem)}

/* міра ширша за референсну (22rem → 40rem): тут два змістових абзаци, а не
   один короткий підпис, і вузька колонка робила з них довгий стовпчик */
.pure_c{
  margin-top:clamp(2.25rem,5vw,4.5rem);max-width:min(100%,40rem);
  display:grid;gap:1rem;
  color:rgba(31,20,35,.72);font-size:.9375rem;line-height:1.6;
}

/* ── frei — сітка "frei von"-значків: 3 в рядок × 2 рядки, як у клієнтському
      макеті зі значками. Ширина збігається з мірою опису під нею (40rem), тому
      обидва блоки стоять в одній вертикальній колоні. На вузькому екрані —
      2 колонки, бо три підписи на кшталт "Gentechnik frei" там не вміщаються. */
.frei{
  list-style:none;margin:clamp(2rem,4.5vw,4rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.75rem,3.5vw,2.75rem) clamp(1.5rem,3vw,2.5rem);
  width:100%;max-width:min(100%,40rem);
}
@media (min-width:30rem){.frei{grid-template-columns:repeat(3,minmax(0,1fr))}}
.frei_i{display:grid;justify-items:center;gap:.7rem;color:var(--ink)}
.frei_i svg{
  width:clamp(1.6rem,2.3vw,2.1rem);height:auto;
  fill:none;stroke:currentColor;stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round;
  color:rgba(31,20,35,.62);
}
/* риска "frei von" — трохи товща й темніша за сам предмет, щоб читалась
   як окремий знак, а не як частина малюнка */
.frei_i .frei_slash{stroke-width:1.4;stroke:rgba(31,20,35,.85)}
.frei_i .label{color:rgba(31,20,35,.72);letter-spacing:.06em}

/* ── cat (Catering) — клон композиції референсу ──────────────────────────────
      Сітка 2×3 розкладає три кутові блоки так само, як у референсі:
        ряд 1 / колонка 2 → список-перемикач (праворуч, під фіксованим nav)
        ряд 3 / колонка 1 → опис (знизу-ліворуч)
        ряд 3 / колонка 2 → кругла CTA (знизу-праворуч)
      padding-top обраний так, щоб список починався НИЖЧЕ посилань фіксованого
      nav — вони теж у правому верхньому куті. ──────────────────────────────── */
.cat{
  position:relative;isolation:isolate;overflow:clip;
  min-height:100svh;color:var(--bone);background:var(--ink);
  padding:clamp(9rem,17vh,12rem) var(--gut) clamp(2.5rem,7vh,5rem);
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;
  gap:clamp(2rem,5vh,4rem) clamp(1.5rem,4vw,4rem);
}

/* фото: три шари один над одним, активний проявляється + доїжджає з масштабу
   (як на референсі — не різкий cut, а мʼяка зміна кадру) */
.cat_media{position:absolute;inset:0;z-index:-1}
.cat_img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.045);
  transition:opacity .9s var(--ease-out),transform 1.6s var(--ease-out);
}
.cat_img.is-on{opacity:1;transform:scale(1)}
/* фото світлі (білі скатертини) — без цього градієнта біла типографіка на них
   просто зникає; знизу темніше, бо там найбільший блок тексту */
.cat_scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(23,15,26,.78) 0%,rgba(23,15,26,.42) 45%,rgba(23,15,26,.34) 100%);
}

.cat_nav{grid-area:1/2;justify-self:end;display:grid;gap:clamp(.9rem,2vw,1.6rem);justify-items:start}
.cat_k{color:rgba(241,231,223,.5)}
.cat_tabs{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.15rem,.4vw,.4rem);justify-items:start}
.cat_tab{
  position:relative;display:block;padding:.1em 0;text-align:left;cursor:pointer;
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.05rem,1.75vw,1.85rem);line-height:1.2;letter-spacing:.008em;
  text-transform:uppercase;color:rgba(241,231,223,.42);
  transition:color .45s var(--ease);
}
.cat_tab:hover{color:rgba(241,231,223,.78)}
.cat_tab.is-on{color:var(--bone)}
/* волосінь ліворуч від активного пункту — деталь референсу */
.cat_tab.is-on::before{
  content:"";position:absolute;left:-.7em;top:.24em;bottom:.24em;width:1px;background:currentColor;
}

/* опис: великий текст статичний, а підписи-відлуння стоять усі в ОДНІЙ клітинці
   сітки — тому перемикання не змінює висоту блоку й нічого не штовхає */
.cat_copy{grid-area:3/1;align-self:end;display:grid;max-width:min(100%,44rem)}
.cat_labels{display:grid;margin-bottom:clamp(.9rem,2vw,1.5rem)}
.cat_lab{grid-area:1/1;color:rgba(241,231,223,.6);opacity:0;transition:opacity .45s var(--ease)}
.cat_lab.is-on{opacity:1}
.cat_t{
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.15rem,2.1vw,2.2rem);line-height:1.12;letter-spacing:-.008em;
  text-transform:uppercase;
}

/* кругла CTA — світлий двійник .round-btn: та сама геометрія, інший контекст
   кольору (на фото, а не на світлій секції), текст ліворуч як у референсі */
/* текст: блок по центру кола (justify-items:center), але вирівняний ЛІВОРУЧ
   у собі — тому при переносі на два рядки другий не з'їжджає до центру */
.cat_cta{
  grid-area:3/2;justify-self:end;align-self:end;
  position:relative;width:clamp(9.5rem,17vw,15rem);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;justify-items:center;text-align:left;
  padding-inline:clamp(1.2rem,2.5vw,2rem);
  margin-top:clamp(5rem,12vh,9rem) !important;
  transform:translateY(clamp(3rem,6vh,5rem));
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  color:var(--bone);
}
.cat_cta_ring{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(241,231,223,.45);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.cat_cta .roll_i{position:relative;z-index:1}
.cat_cta:hover .cat_cta_ring,.cat_cta:focus-visible .cat_cta_ring{border-color:var(--bone);transform:scale(1.04)}

/* вузькі екрани: три кутові блоки не вміщаються по колонках — один потік */
@media (max-width:56rem){
  .cat{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;padding-top:clamp(7rem,15vh,10rem)}
  .cat_nav{grid-area:1/1;justify-self:start}
  .cat_copy{grid-area:3/1}
  .cat_cta{grid-area:4/1;justify-self:start;margin-top:clamp(1.5rem,4vh,2.5rem)}
}

/* ── menus (Mittagstisch) — картки меню з менеджера меню ────────────────────
      Секція темна (як решта сайту), самі аркуші — білі A4: вони й працюють як
      "папір на столі". Розкладка карток — flex, а не auto-fit grid: меню може
      бути два або пʼять, і flex-центрування тримає їх однакового розміру за
      будь-якої кількості, тоді як auto-fit розтягував би два аркуші на всю
      ширину. ───────────────────────────────────────────────────────────────── */
/* padding-bottom містить --dome-rise: стільки ж «з'їдає» купол наступної
   секції (#info), який лежить поверх цієї — без запасу він накрив би низ форми */
/* z-index нижчий за #info: секція піниться (ScrollTrigger робить її fixed), і без
   явного порядку купол #info міг би поїхати ПІД нею замість поверх */
.menus{
  position:relative;z-index:1;
  background:#5d4867;
  padding:clamp(4rem,12vh,10rem) var(--gut) clamp(2rem,4vh,3.5rem);
}
.menus_k{color:var(--bone-38)}
.menus_h{
  margin-top:clamp(1.25rem,2.4vw,2.5rem);
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:400;
  font-size:clamp(1.6rem,3.4vw,3.1rem);line-height:1.04;letter-spacing:-.022em;
}
.menus_lead{
  margin-top:clamp(1.25rem,2.4vw,2rem);
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:550;
  text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(.75rem,1.05vw,.9rem);color:var(--bone-60);line-height:1.5;
}
.menus_c{
  margin-top:clamp(1.5rem,3vw,2.5rem);
  color:var(--bone-60);font-size:.9375rem;line-height:1.6;
}
/* ── menus layout ────────────────────────────────────────────────────────── */
@media (min-width: 56.01rem){
  .menus .acols{
    display:grid;
    grid-template-columns:repeat(10,1fr);
    align-items:start;
    row-gap:1.25rem;
    --stagger:0px;
  }
  .menus .acols_i+.acols_i{margin-top:0 !important}
  .menus_head{grid-column:7/11 !important;grid-row:1 !important}
  .menus_grid{grid-column:1/5 !important;grid-row:1/3 !important}
  .menus_form{grid-column:6/11 !important;grid-row:2 !important;margin-top:100px !important}
  .menus_cta{
    grid-column:1/5 !important;grid-row:3 !important;
    justify-self:center !important;
    margin-top:1.5rem !important;
    transform:none !important;
  }
}

/* меню — один аркуш на всю ширину лівої колонки (їх може бути й кілька:
   тоді вони стають одне під одним, тому це grid, а не окремий випадок).
   padding-left відсуває аркуш від лівого краю: там висить фіксований nav
   (лого + лічильник + рейка), і без відступу він лягав просто на меню. */
.menus_grid{
  display:grid;gap:clamp(2rem,5vw,4rem);width:100%;
  padding-left:clamp(1.5rem,7vw,8rem);
}
.mcard{width:100%}
/* кнопка-обкладинка: сам аркуш і є вміст кнопки, тому в неї немає ні фону, ні
   падінгів — лише тінь і підйом на hover */
.mcard_face{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  box-shadow:0 1rem 2.5rem rgba(10,5,12,.45);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.mcard_face:hover,.mcard_face:focus-visible{
  transform:translateY(-.5rem);box-shadow:0 1.6rem 3.5rem rgba(10,5,12,.55);
}
.mcard_face img{width:100%;aspect-ratio:210/297;object-fit:cover;background:#fff}
.mcard_face.is-empty{
  cursor:default;aspect-ratio:210/297;display:grid;place-items:center;
  border:1px dashed var(--bone-16);box-shadow:none;background:rgba(241,231,223,.04);
}
.mcard_face.is-empty:hover{transform:none;box-shadow:none}
.mcard_soon{
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:var(--bone-38);
}
.mcard_label{
  margin-top:clamp(.9rem,1.8vw,1.4rem);
  font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;font-weight:600;
}
.mcard_label span{
  display:block;margin-top:.35rem;
  font-size:var(--fs-label);letter-spacing:.048em;font-weight:650;color:var(--bone-38);
}

/* ── mcardf — форма-картка (стиль референсу) ─────────────────────────────────
      Світле полотно на темній секції; ліва рейка (волосінь — знак — волосінь);
      поля — підкреслені рядки, де підпис стоїть ПРЕФІКСОМ усередині рядка, а не
      окремим лейблом над ним; знизу примітка ліворуч і pill-кнопка праворуч.
      Рядок — це <label> навколо поля, тому префікс лишається справжнім лейблом
      (клік фокусує, скрінрідер читає назву), хоча візуально це просто текст на
      одній лінії з полем. ────────────────────────────────────────────────────── */
.menus_form_k{color:var(--bone-38);margin-bottom:clamp(1.25rem,2.4vw,2rem)}
.menus_form .mcardf{margin-top:100px !important}
.mcardf{
  background:var(--sky);color:var(--ink);
  padding:clamp(1.5rem,3vw,2.75rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
}
/* рейка: дві волосіні тягнуться, знак тримає центр */
.mcardf_rail{display:grid;justify-items:center;align-content:stretch;gap:clamp(1rem,2vw,1.5rem)}
.mcardf_line{width:1px;background:rgba(31,20,35,.28)}
.mcardf_rail{grid-template-rows:1fr auto 1fr}
.mcardf_mark{width:clamp(2.5rem,4.5vw,3.75rem);height:auto}

.mcardf_body{display:grid;gap:clamp(.75rem,1.5vw,1.1rem)}
.mcardf_k{color:rgba(31,20,35,.5);margin-bottom:clamp(.25rem,1vw,.75rem)}

/* один рядок = підпис + поле на спільній підкресленій лінії */
.mfield{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:.6rem;padding-bottom:.45rem;
  border-bottom:1px solid rgba(31,20,35,.3);
  transition:border-color .35s var(--ease);
}
.mfield:focus-within{border-bottom-color:var(--ink)}
.mfield>span{
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:rgba(31,20,35,.62);white-space:nowrap;
}
.mfield input,.mfield select,.mfield textarea{
  width:100%;padding:.15rem 0;
  font:inherit;font-size:.9375rem;letter-spacing:normal;text-transform:none;
  color:var(--ink);background:transparent;border:0;border-radius:0;
}
.mfield input:focus,.mfield select:focus,.mfield textarea:focus{outline:0}
.mfield ::placeholder{color:rgba(31,20,35,.38)}
.mfield select{appearance:none;cursor:pointer}
/* нативний список малює ОС — задаємо явні кольори, щоб не вийшло світле на світлому */
.mfield select option{color:var(--ink);background:#fff}
.mfield input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.mfield input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
/* трійка Tag/Menü/Anzahl в одному рядку: три пари підпис+поле.
   display:contents на парі — щоб її підпис і поле стали клітинками СПІЛЬНОЇ
   сітки рядка; зв'язок label↔поле від цього не страждає (він у DOM, не в layout) */
.mfield--split{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto 3.5rem}
.mfield_pair{display:contents}
.mfield_qty{text-align:right}
.mfield--area{align-items:start;grid-template-columns:auto minmax(0,1fr)}
.mfield--area textarea{resize:vertical;line-height:1.5}

/* honeypot: приховане поле, але не display:none — боти таке пропускають */
.mform_trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.mcardf_foot{
  margin-top:clamp(2rem,4vw,3.25rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(1rem,2vw,1.5rem);
}
.mcardf_note{font-size:.8125rem;line-height:1.5;color:rgba(31,20,35,.6)}
.mcardf_note a{border-bottom:1px solid rgba(31,20,35,.3)}
.mcardf_note a:hover{border-bottom-color:var(--ink)}
.mform_status{margin-top:.4rem;font-size:.8125rem;line-height:1.4}
.mform_status.is-ok{color:#2f6b23}
.mform_status.is-err{color:#8c2f28}
/* pill-кнопка з референсу: тільки контур, великий радіус */
.mcardf_send{
  padding:.95rem 2.25rem;border:1px solid rgba(31,20,35,.45);border-radius:999px;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:var(--ink);background:transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.mcardf_send:hover,.mcardf_send:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.mcardf_send:disabled{opacity:.5;cursor:default}

@media (max-width:44rem){
  /* рейка з'їдає ширину, якої на вузькому екрані і так нема */
  .mcardf{grid-template-columns:1fr}
  .mcardf_rail{display:none}
  /* трійка розпадається на три рядки: пара знову стає власним рядком-сіткою */
  .mfield--split{grid-template-columns:1fr;gap:.6rem}
  .mfield_pair{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:center}
  .mfield_qty{text-align:left}
}

/* ── lb — великий вигляд меню ────────────────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:60;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;
  align-items:center;gap:clamp(.5rem,2vw,1.5rem);
  padding:clamp(3.5rem,7vh,5rem) clamp(.75rem,3vw,2.5rem) clamp(1.25rem,3vh,2rem);
  background:rgba(15,8,17,.94);
  opacity:0;transition:opacity .32s var(--ease-out);
}
/* ОБОВʼЯЗКОВО: display:grid вище перебиває браузерне [hidden]{display:none}
   (клас сильніший за UA-правило), тому закритий оверлей лишався у шарі — з
   opacity:0, але на весь екран — і перехоплював усі кліки та виділення тексту */
.lb[hidden]{display:none}
.lb.is-on{opacity:1}
.lb_stage{
  grid-column:2;grid-row:1;
  display:grid;place-items:center;min-height:0;height:100%;
}
/* A4: висота 88vh → ширина 88vh × 210/297 ≈ 62vh. min() із 92vw тримає аркуш
   у межах екрана і на вузьких вьюпортах */
.lb_sheet{width:min(92vw,62vh)}
.lb_img{max-width:min(92vw,62vh);max-height:88vh;width:auto;height:auto;background:#fff}
.lb_x{
  position:absolute;top:clamp(.75rem,2vh,1.5rem);right:clamp(.75rem,3vw,2.5rem);
  width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid var(--bone-38);color:var(--bone);font-size:1.5rem;line-height:1;
  display:grid;place-items:center;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.lb_x:hover,.lb_x:focus-visible{border-color:var(--bone);background:rgba(241,231,223,.1)}
.lb_nav{
  grid-row:1;align-self:center;
  width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid var(--bone-38);color:var(--bone);font-size:1.6rem;line-height:1;
  display:grid;place-items:center;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.lb_nav:hover,.lb_nav:focus-visible{border-color:var(--bone);background:rgba(241,231,223,.1)}
.lb_nav--prev{grid-column:1}
.lb_nav--next{grid-column:3}
.lb_cap{
  grid-column:1/-1;grid-row:2;text-align:center;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:var(--bone-60);
}
.lb_count{margin-left:1rem;color:var(--bone-38)}

/* кнопка живе в ЛІВІЙ колонці на рівні форми (grid-row:3), а не під нею: саме
   там лишалась велика порожнеча. Специфічність .menus .menus_cta (0,2,0) не
   нижча за .acols_i:nth-child(4) і правило стоїть пізніше — тому перебиває
   автоматичний номер рядка. */
.menus .menus_cta{
  grid-column:1/5;grid-row:3;
  justify-self:center;
  /* низ рядка, а не центр: угорі кнопка стояла майже під підписом аркуша, і
     порожнеча лишалась саме нижче */
  align-self:end;
}

/* ── info — акордеон із референсу ────────────────────────────────────────────
      Композиція: капс-рядок → вертикальна волосінь → стос великих заголовків.
      Клік по заголовку розкриває опис ПІД ним, «+» перетворюється на «×».
      Фон кремовий (--bone) — той самий колір, що текст на темних секціях, тому
      секція читається як «вивернута» решта сайту, а не як чужа вставка. ────── */
.info{
  position:relative;z-index:2;
  background:var(--bone);color:var(--ink);
  /* та сама техніка купола, що в .after: два кутові радіуси по 50vw у сумі = 100vw
     (ширина секції), тому дуги сходяться рівно в центрі верхньої межі — це
     справжній півкруг, а не плаский еліпс. vw, не % — % рахувався б від власної
     висоти секції і зламав би форму.
     Негативний margin підіймає секцію ПОВЕРХ .menus на ту саму --dome-rise, під
     яку в .menus зарезервований padding-bottom, тож купол «виїжджає» на фіолетове
     тло, нічого не накриваючи. */
  margin-top:calc(var(--dome-rise) * -1);
  border-radius:50vw 50vw 0 0;
  padding:clamp(4rem,12vh,9rem) var(--gut) clamp(5rem,14vh,10rem);
  display:grid;justify-items:center;text-align:center;
}
.info_k{color:rgba(31,20,35,.55)}
.info_line{margin-top:clamp(1.5rem,4vw,3rem);background:rgba(31,20,35,.22)}
.info_list{
  margin-top:clamp(2.5rem,7vw,6rem);width:100%;max-width:64rem;
  display:grid;gap:clamp(2rem,5vw,4rem);
}
.info_i_k{color:rgba(31,20,35,.5)}
.info_h{margin:0}
/* кнопка — увесь заголовок: клікабельна площа = сам текст, а не окрема іконка */
.info_t{
  display:inline-flex;align-items:flex-start;gap:.12em;
  margin-top:clamp(.6rem,1.4vw,1.1rem);
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.7rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.014em;
  text-transform:uppercase;color:var(--ink);text-align:center;
  transition:opacity .35s var(--ease);
}
.info_t:hover,.info_t:focus-visible{opacity:.62}
/* «+»/«×» — надрядковий знак, як у референсі */
.info_x{
  font-style:normal;font-size:.3em;line-height:1;font-weight:400;
  transform:translateY(.35em);
}
.info_i.is-open .info_x::after{content:""}

/* Розкриття: grid-template-rows 0fr→1fr анімує НЕВІДОМУ висоту без JS-замірів
   (max-height потребував би магічного числа). visibility прибирає закритий
   текст із дерева доступності — тому тут НЕ hidden: атрибут hidden із власним
   display у CSS не працює (як це було з лайтбоксом), а тут ще й ламав би
   анімацію. */
.info_p{
  display:grid;grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows .55s var(--ease-out),visibility .55s;
}
.info_p_in{overflow:hidden;display:grid;justify-items:center}
.info_i.is-open .info_p{grid-template-rows:1fr;visibility:visible}
.info_p p{
  margin-top:clamp(1.5rem,3vw,2.5rem);max-width:52ch;
  color:rgba(31,20,35,.72);font-size:.9375rem;line-height:1.62;
}
.info_p p+p{margin-top:clamp(.9rem,1.8vw,1.4rem)}
.info_quote{font-style:italic}
.info_quote span{
  display:block;margin-top:.6rem;font-style:normal;
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:rgba(31,20,35,.5);
}
/* коротка риска під текстом — теж деталь референсу */
.info_rule{
  width:clamp(3rem,6vw,5rem);height:1px;background:rgba(31,20,35,.35);
  margin-top:clamp(1.75rem,4vw,3rem);
}

/* ── loc — карта + години роботи ─────────────────────────────────────────────
      Той самий кремовий фон, що в #info, і жодної верхньої межі: візуально це
      продовження тієї ж «сторінки».
      Карта в потоці (задає висоту секції), але виходить за лівий край і згасає
      в прозоре з чотирьох боків — тому виглядає намальованою на тлі, а не
      вставленою картинкою в рамці. ─────────────────────────────────────────── */
.loc{
  background:var(--bone);color:var(--ink);
  /* верхній відступ — це та сама пауза між «Die ecoBOX» і заголовком годин */
  padding:clamp(4rem,13vh,10rem) var(--gut) clamp(3rem,9vh,7rem);
  /* дві рівні половини: карта ліворуч, стос «заголовок + картка годин» праворуч.
     minmax(0,…), а не auto: трек із auto міряється по вмісту, а вміст має
     width:min(100%,…) — відсоток від невизначеного треку, і карта згорталась. */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
/* правий стос: заголовок, під ним картка — обидва по центру своєї половини */
.loc_side{
  grid-column:2;
  display:grid;justify-items:center;
  gap:clamp(1rem,3vw,2.5rem);
}
.loc_h{
  text-align:left;justify-self:start;
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.5rem,3vw,2.75rem);line-height:1.05;letter-spacing:-.012em;
  text-transform:uppercase;
}
.loc_map{grid-column:1}
/* волосінь-розділювач: на всю ширину рядка, сама лінія по центру */
.loc_end{
  grid-column:1/-1;justify-self:center;
  margin-top:clamp(2.5rem,7vh,5rem);
  background:rgba(31,20,35,.22);
}
/* карта вдвічі менша за початкову (46rem → 23rem) і БЕЗ виходу за лівий край:
   вона лишається в межах padding секції та ще й трохи відступає */
.loc_map{
  position:relative;
  margin-left:clamp(0rem,4vw,4rem);
  width:100%;
}
.loc_map img{
  display:block;width:100%;height:auto;
  /* дві маски перетинаються: горизонтальне і вертикальне згасання разом дають
     плавний край з усіх боків (mask-composite:intersect — саме для цього) */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),
             linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  /* -webkit- варіант першим, стандартний після: source-in — це те саме, що
     intersect, але старим синтаксисом (Safari < 15.4) */
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* ── пін: точка з пульсом (той самий btnPulse, що в круглих кнопках) і
      відкрита картка з адресою. Координати — у % від картинки. ────────────── */
.loc_pin{position:absolute;left:56.1%;top:36.8%}
.loc_pin_dot{
  position:absolute;left:0;top:0;translate:-50% -50%;
  width:.7rem;height:.7rem;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 .28rem rgba(96,70,105,.22);
}
.loc_pin_dot::after{
  content:"";position:absolute;inset:-.28rem;border-radius:50%;
  border:1px solid var(--brand);
  animation:btnPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.loc_pin_card{
  position:absolute;left:1.1rem;top:-.6rem;
  /* 13rem, а не 15: карта тепер вужча, і ширша картка залазила б у колонку годин */
  width:max-content;max-width:13rem;
  background:var(--ink);color:var(--bone);
  padding:clamp(.9rem,1.6vw,1.2rem) clamp(1rem,1.8vw,1.35rem);
  box-shadow:0 .9rem 2.2rem rgba(20,12,24,.28);
}
.loc_pin_k{color:var(--bone-60);margin-bottom:.6rem}
.loc_pin_addr{font-size:.875rem;line-height:1.45}
.loc_pin_line{margin-top:.45rem;font-size:.875rem}
.loc_pin_line a{border-bottom:1px solid var(--bone-16)}
.loc_pin_line a:hover{border-bottom-color:var(--bone)}

/* ── картка годин — того самого крою, що форма-картка (.mcardf): світле
      полотно --sky, рядки з підкресленням, підпис ліворуч / значення праворуч.
      Так у секції два однакові «аркуші» — форма вище й години тут — а не текст,
      що висить у порожнечі. ────────────────────────────────────────────────── */
.loc_card{
  margin:0;background:var(--sky);color:var(--ink);
  padding:clamp(1.5rem,3vw,2.75rem);
  display:grid;gap:clamp(1rem,2vw,1.6rem);
  /* по центру своєї половини (не притиснута до лівого краю треку) */
  justify-self:center;width:min(100%,26rem);
}
.loc_g{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;gap:1rem;
  padding-bottom:clamp(.6rem,1.2vw,.9rem);
  border-bottom:1px solid rgba(31,20,35,.28);
}
.loc_g:last-child{padding-bottom:0;border-bottom:0}
.loc_g dt{
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;
  font-weight:650;color:rgba(31,20,35,.55);
}
.loc_g dd{
  margin:0;justify-self:end;text-align:right;
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(.95rem,1.35vw,1.15rem);letter-spacing:.01em;white-space:nowrap;
}

@media (max-width:56rem){
  .loc{grid-template-columns:1fr;gap:clamp(2rem,6vw,3rem)}
  .loc_map,.loc_side{grid-column:1}
  .loc_card{justify-self:stretch;width:auto}
  .loc_map{margin-left:0}
  /* на вузькому екрані картка піна не влізає збоку — ставимо її під точкою */
  .loc_pin_card{left:auto;right:0;top:1.4rem;transform:translateX(min(0px,calc(50vw - 100%)))}
}

/* ── cta — фото на весь екран + велика пара рядків + кругла кнопка ───────────
      Клон композиції референсу era-residence ("PERFECT SEA VIEWS"):
        ряд 1  display-пара рядків + розріджений капс-підпис під нею (верхня
               третина кадру, по центру — НЕ по вертикальному центру секції)
        ряд 3  кругла кнопка-кільце, по центру внизу
      Сітка на три ряди, де середній — розтяжна порожнеча: так обидва блоки
      тримаються своїх країв на будь-якій висоті екрана, без магічних відсотків.
      padding-top обраний так, щоб заголовок починався НИЖЧЕ рядка фіксованого
      nav (лого ліворуч / посилання праворуч) — інакше він наїхав би на них,
      бо стоїть по центру, а не в колонці. ──────────────────────────────────── */
.cta{
  position:relative;isolation:isolate;overflow:clip;
  /* фон — колір підвалу, а не --ink: коли кадр «відступає» (див. .cta_media
     нижче), навколо нього відкривається саме ця площина, і перехід у підвал
     читається як одне полотно, а не як третій колір між ними */
  min-height:100svh;background:#604769;color:var(--bone);
  /* великі поля з обох боків: у референсі заголовок і кільце помітно віддалені
     від країв кадру — саме ця «повітряність» і робить секцію афішею, а не
     банером. Верхнє поле водночас тримає заголовок нижче рядка nav. */
  padding:clamp(8.5rem,23vh,15rem) var(--gut) clamp(5rem,15vh,10rem);
  display:grid;grid-template-rows:auto 1fr auto;
  justify-items:center;text-align:center;
}
/* overflow:clip обовʼязковий: фото вище за свій контейнер (див. нижче), і без
   обрізки воно вилазило б за межі кадру, коли той зменшується.
   transform-origin — НИЖНЯ межа: кадр, що відступає, лишається приклеєним до
   межі з підвалом, а не відривається від неї, лишаючи фіолетову смугу.
   Сам scale ставить hero.js — тут лише геометрія. */
.cta_media{
  position:absolute;inset:0;z-index:-1;overflow:clip;
  transform-origin:50% 100%;will-change:transform;
}
/* object-position нижче центру: угорі кадру — глухий фасад і небо, а вітрина,
   маркіза й столики (те, за чим фото тут узагалі стоїть) — у нижніх 2/3.
   height:126% + top:-13% — це запас під паралакс: фото їде ±9% власної висоти
   повільніше за сторінку, і завдяки запасу воно ніколи не відкриває краю. */
.cta_media img{
  position:absolute;left:0;top:-13%;
  width:100%;height:126%;object-fit:cover;object-position:50% 62%;
  will-change:transform;
}
/* фото світле (світле дерево, бруківка, кремова стіна) — без цього scrim'у біла
   типографіка на ньому просто зникає. Темніше зверху й знизу, бо саме там
   стоять заголовок і кнопка; у середині кадр лишається відкритим */
.cta_scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(23,15,26,.7) 0%,rgba(23,15,26,.44) 46%,rgba(23,15,26,.66) 100%);
}

.cta_head{grid-row:1;display:grid;justify-items:center}
/* той самий кегль і крива, що в hero_display: це друга «афіша» сайту */
.cta_h{
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:650;
  font-size:clamp(2.2rem,9.4vw,8.5rem);line-height:.875;letter-spacing:-.024em;
  text-transform:uppercase;
  text-shadow:0 .06em .5em rgba(20,12,24,.3);   /* страховка на світлих ділянках кадру */
}
/* підпис у референсі помітно розріджений — це його головна прикмета, тому
   letter-spacing тут набагато більший за звичний .048em у .label */
.cta_sub{
  margin-top:clamp(1.5rem,5.5vh,4rem);
  letter-spacing:.34em;text-indent:.34em;   /* компенсація трекінгу останньої літери, інакше блок здається зсунутим уліво */
  font-size:clamp(.5625rem,.85vw,.8125rem);color:var(--bone-60);
}

/* кругла кнопка — той самий елемент, що .cat_cta, лише текст по центру
   (у кейтерингу він ліворуч) і кільце трохи більше, як у референсі */
.cta_btn{
  grid-row:3;position:relative;
  width:clamp(10rem,15vw,14.5rem);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;justify-items:center;text-align:center;
  padding-inline:clamp(1.2rem,2.5vw,2rem);
  margin-top:clamp(3.5rem,9vh,7rem);
  transform:translateY(clamp(2rem,5vh,4.5rem));
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  color:var(--bone);cursor:pointer;
}
.cta_btn_ring{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(241,231,223,.5);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.cta_btn .roll_i{position:relative;z-index:1}
.cta_btn:hover .cta_btn_ring,.cta_btn:focus-visible .cta_btn_ring{border-color:var(--bone);transform:scale(1.04)}
/* пульс — той самий, що на решті круглих кнопок сайту */
.cta_btn::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1px solid currentColor;color:rgba(241,231,223,.45);
  animation:btnPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.cta_btn:hover::before,.cta_btn:focus-visible::before{animation-play-state:paused;opacity:0}

/* ── pop — попап-анкета з кнопки «Anfrage senden» ────────────────────────────
      Оверлей того самого крою, що .lb: fixed, темне тло, opacity-перехід.
      [hidden] мусить бути ПІСЛЯ display:grid — клас сильніший за UA-правило
      [hidden]{display:none}, і без цього рядка закритий попап лишався б на весь
      екран і перехоплював кліки (та сама пастка, що в .lb). ────────────────── */
/* ── UNIVERSAL POPUP TEMPLATE (Card in middle + dark overlay) ─────────────── */
.pop{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease-out),visibility .55s;
}
.pop[hidden]{display:none}
.pop.is-on{opacity:1;visibility:visible}

.pop_backdrop{
  position:absolute;inset:0;
  background:rgba(15,10,18,.78);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:opacity .55s var(--ease-out);
}

/* Card fixed size & center alignment */
.pop_box{
  position:relative;z-index:2;
  width:min(54rem,90vw);
  height:min(36rem,85vh);
  background:var(--sky);
  color:var(--ink);
  border-radius:4px;
  box-shadow:0 2rem 4rem rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  overflow:hidden;
  transform:translateY(24px) scale(.95);
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s var(--ease-out);
}
.pop.is-on .pop_box{transform:translateY(0) scale(1)}

.pop_x{
  position:absolute;top:1.25rem;right:1.25rem;z-index:10;
  width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid rgba(31,20,35,.35);background:rgba(255,255,255,.25);
  backdrop-filter:blur(4px);
  display:grid;place-items:center;
  font-size:1.3rem;line-height:1;color:var(--ink);
  cursor:pointer;transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease);
}
.pop_x:hover,.pop_x:focus-visible{
  border-color:var(--ink);background:rgba(255,255,255,.8);
  transform:scale(1.06);
}

.pop_scroll{
  flex:1;overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:clamp(1.75rem,4vw,3.25rem);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--brand) rgba(96,70,105,.15);
}
.pop_scroll::-webkit-scrollbar{width:7px}
.pop_scroll::-webkit-scrollbar-track{background:rgba(96,70,105,.12);border-radius:999px}
.pop_scroll::-webkit-scrollbar-thumb{background:var(--brand);border-radius:999px}
.pop_scroll::-webkit-scrollbar-thumb:hover{background:#4a3652}

/* ── Navigation popup styling ── */
.pop_nav_in{padding:.25rem 0}
.pop_nav_list{
  display:flex;flex-direction:column;
  gap:clamp(.5rem,1vw,1rem);margin-top:1.25rem;
}
.pop_nav_link{
  display:flex;align-items:center;gap:1.2rem;
  font-family:var(--f-display);font-size:clamp(1.15rem,2.1vw,1.85rem);
  font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink);padding:.65rem .9rem;border-radius:4px;
  text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.pop_nav_link .num{
  font-family:var(--f-body);font-size:var(--fs-label);
  color:rgba(31,20,35,.45);font-weight:650;letter-spacing:.08em;
}
.pop_nav_link:hover{
  background:rgba(96,70,105,.12);color:var(--brand);
  transform:translateX(8px);
}

.pop_h{
  margin-bottom:clamp(.75rem,2vw,1.25rem);
  font-family:var(--f-display);font-variation-settings:'opsz' 40;font-weight:500;
  font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.06;letter-spacing:-.012em;
  text-transform:uppercase;
}

/* ── foot — підвал за композицією референсу ──────────────────────────────────
      Стос по центру: знак → гігантський номер телефону → дрібний капс-блок з
      адресою і поштою; найнижче — рядок копірайт/кнопки, прибитий до низу
      екрана великим верхнім відступом (у референсі між адресою і цим рядком
      порожньо майже на третину висоти).
      Фон — фірмовий #604769. Він світліший за --ink, тому власні прозорості
      тексту тут свої, а не спільні --bone-60/38: на фіолетовому ті самі
      значення читаються надто блідо. ─────────────────────────────────────────*/
.foot{
  background:#604769;color:var(--bone);
  padding:clamp(4rem,12vh,8rem) var(--gut) clamp(1.5rem,4vh,2.5rem);
  display:grid;justify-items:center;text-align:center;
}
/* сам логотип — фіолетовий квадрат того ж кольору, що тло, тому виглядає як
   знак, а не як вставлена картинка; рамка на ньому й дає той «медальйон» */
.foot_mark{width:clamp(3rem,5vw,4.5rem);height:auto}
/* головний елемент підвалу: номер телефону кеглем афіші */
.foot_tel{
  display:block;margin-top:clamp(1.5rem,4vw,3rem);
  font-family:var(--f-display);font-optical-sizing:auto;font-weight:500;
  font-size:clamp(1.9rem,6.4vw,5.5rem);line-height:1;letter-spacing:-.02em;
  white-space:nowrap;transition:opacity .35s var(--ease);
}
.foot_tel:hover,.foot_tel:focus-visible{opacity:.72}

.foot_addr{margin-top:clamp(1.25rem,3vw,2.25rem);display:grid;justify-items:center;gap:.55rem}
.foot_k{color:rgba(241,231,223,.62)}
/* адреса — той самий дрібний капс, але щільніший і трохи яскравіший за підпис
   над нею: у референсі це найконтрастніший рядок блоку */
.foot_lines{line-height:1.7;font-weight:700}
.foot_mail{margin-top:.35rem}
.foot_mail a{border-bottom:1px solid rgba(241,231,223,.35);padding-bottom:.15em}
.foot_mail a:hover{border-bottom-color:var(--bone)}

/* нижній рядок: копірайт ліворуч, кнопки праворуч. Великий верхній відступ —
   це і є та порожнеча з референсу, яка відсуває рядок до самого низу. */
.foot_bar{
  width:100%;max-width:96rem;
  margin-top:clamp(4rem,16vh,11rem);
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:clamp(1.25rem,3vw,2.5rem);text-align:left;
}
.foot_c{color:rgba(241,231,223,.62);line-height:1.7}
/* посилання — просто текст; ритм тримають ромби-розділювачі між ними */
.foot_links{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.7rem,1.6vw,1.25rem)}
.foot_link{
  font-size:var(--fs-label);letter-spacing:.048em;text-transform:uppercase;font-weight:650;
  color:rgba(241,231,223,.78);
  border-bottom:1px solid transparent;padding-bottom:.15em;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.foot_link:hover,.foot_link:focus-visible{color:var(--bone);border-bottom-color:var(--bone)}
/* Admin — службовий вхід, тому тихіший за решту */
.foot_link--admin{color:rgba(241,231,223,.5)}
/* ромб успадковує колір рамки з --bone-версії: базовий .deco_mark темний (він
   для світлих секцій), тут фон фіолетовий */
.foot_dot{border-color:rgba(241,231,223,.4)}

@media (max-width:44rem){
  .foot_bar{flex-direction:column;align-items:center;text-align:center}
}

/* ── entrance ────────────────────────────────────────────────────────────── */
.hero_stack>*{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.is-ready .hero_stack>*{opacity:1;transform:none}
.is-ready .hero_eyebrow{transition-delay:.15s}
.is-ready .hero_script{transition-delay:.26s}
.is-ready .hero_display{transition-delay:.34s}
.is-ready .hero_tag{transition-delay:.48s}
.is-ready .hero_cta{transition-delay:.58s}

/* ── narrow ──────────────────────────────────────────────────────────────── */
@media (max-width:60rem){
  .nav_links{display:none}                 /* лого + скрол лишаються — .nav_left не ховаємо */
  .after_arc text{font-size:64px}
  .pin_card{width:min(17rem,70vw)}
}
@media (max-width:36rem){
  .hero_tag em{display:none}
  .hero_tag{flex-wrap:wrap;gap:.35rem}
}

/* ── reduced motion: no runway, no overlap, nothing driven by scroll ─────── */
@media (prefers-reduced-motion:reduce){
  .after{margin-top:0;border-radius:0}
  .hero_media{transform:none!important;height:100%}
  .hero_img{height:100%;object-fit:cover;object-position:50% 100%;opacity:1;transition:none}
  .hero_content{transform:none!important}
  .pins{opacity:1;pointer-events:auto}
  .nav_rail i{transform:none}
  .hero_stack>*{opacity:1;transform:none;transition:none}
  .roll_i>span{transition:none}
  /* кільце лишається (це affordance, не декор), але без "доганяючого" руху —
     стоїть точно під курсором */
  .tile_ring{transition:opacity .3s linear}
  /* опис теж лишається hover-залежним, але без руху шторки — миттєво */
  .tile_desc>span{transition:none}
  .round-btn::before,.cat_cta::before,.cta_btn::before{animation:none;opacity:0}
  /* попап лишається (це відповідь на клік), але без наїзду картки */
  .pop_box{transform:none;transition:none}
  /* відео-фон — це рух на весь екран, тобто саме те, від чого відмовляється
     користувач із reduce; секція лишається білою й читабельною без нього */
  .pure_bg{display:none}
  /* зміна кадру в каталозі лишається (це відповідь на клік, не декор), але без
     наїзду масштабу — тільки проявлення */
  .cat_img{transform:none;transition:opacity .3s linear}
  /* фото в #anfrage — звичайний нерухомий фон: і паралакс, і «відступ» кадру
     веде саме hero.js, який при reduce не запускається взагалі */
  .cta_media img{top:0;height:100%}
}