/* Mama Mantia concept, rebuilt section by section on Baillardran's home page (baillardran.com).
   Sizes, grid, easing and hover mechanics follow the reference theme CSS (html 62.5%, rem = 10px). */
:root {
  --accent: #bf4e17;         /* paprika orange (Baillardran red #d71d2f in the same role) */
  --accent-dark: #a5410f;
  --brown: #a8592a;          /* caramel (Baillardran terracotta #c46841): headings, hover */
  --cream: #fdf4ea;          /* page ground (ref #fdf5ed) */
  --card: #feeed5;           /* packshot ground, the printed menu's own cream */
  --text: #4e443c;
  --ink: #000;
  --gray: #828282;
  --gray-light: #a4a4a4;
  --line: #ededed;
  --white: #fff;
  --ease: cubic-bezier(.55, 0, .1, 1);
  --sur: 3.6rem;
  --gut: 1.6rem;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --script: "Ms Madi", "Brush Script MT", cursive;
}
@media (min-width: 641px) { :root { --gut: 2.4rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font-family: var(--sans); font-size: 1.6rem; font-weight: 400; line-height: 1.375;
  color: var(--text); background: var(--cream);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, dl, dd, blockquote { margin: 0; }
ul { list-style: none; padding: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 1.6rem; top: -10rem; z-index: 400; background: var(--white); color: var(--ink); padding: 1rem 1.4rem; font-size: 1.3rem; }
.skip-link:focus { top: 1.6rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.footer :focus-visible, .surheader :focus-visible, .push:focus-visible { outline-color: var(--white); }

/* ---------- grid ---------- */
.row { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; position: relative; }
.col { width: 100%; padding: 0 var(--gut); }
@media (min-width: 641px) { .col-half { width: 50%; } }
.col-end { display: flex; justify-content: flex-end; align-items: flex-start; }
.mw-36 { max-width: 36rem; }
.mw-45 { max-width: 45rem; }

/* ---------- type ---------- */
.h3 { font-size: 1.8rem; line-height: 1.208; font-weight: 400; letter-spacing: -.03em; }
.h5 { font-size: 1.2rem; line-height: 1.125; font-weight: 400; text-transform: uppercase; }
.h6 { font-size: 1.3rem; line-height: 1.125; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; }
.h-script strong {
  position: relative; top: -.2rem; margin: 0 .4rem; font-family: var(--script); font-weight: 400;
  font-size: 3.6rem; line-height: 0; letter-spacing: 0; text-transform: none; color: currentColor;
}
.text.small, .text.small p { font-size: 1.3rem; line-height: 1.41; }
.mentions { font-size: 1.2rem; line-height: 1.41; }
.text-brown { color: var(--brown); }
.text-gray { color: var(--gray); }
.label { color: var(--gray-light); }
@media (min-width: 1025px) {
  .h3 { font-size: 2.4rem; }
  .h5 { font-size: 1.5rem; }
  .h-script strong { font-size: 4.6rem; top: -.3rem; }
}

/* ---------- buttons ---------- */
.button {
  position: relative; display: inline-flex; justify-content: center; align-items: center; overflow: hidden;
  padding: 1.2rem; border: 1px solid transparent; font-family: var(--sans); font-size: 1.6rem; font-weight: 400;
  line-height: 1.14; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.button span { position: relative; z-index: 2; }
.button.-small { padding: 1rem 1.1rem; font-size: 1.2rem; letter-spacing: .1em; }
.button.-primary { background: var(--accent); color: var(--white); border-color: var(--accent); }
.button.-primary:hover, .button.-primary:focus-visible { background: var(--brown); border-color: var(--brown); }
.button.-outline { background: transparent; color: var(--white); border-color: var(--white); }
.button.-outline:hover, .button.-outline:focus-visible { background: var(--white); color: var(--ink); }
.button.extend { display: flex; width: 100%; }

/* ---------- loader ---------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: var(--cream); animation: loaderOut .6s 3.2s forwards;
}
.loader__mark { width: 6.4rem; fill: var(--accent); animation: loaderPulse 1.2s var(--ease) infinite alternate; }
.loader.is-done { opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
@keyframes loaderOut { to { opacity: 0; visibility: hidden; } }
@keyframes loaderPulse { from { transform: translateX(-.6rem) rotate(-4deg); } to { transform: translateX(.6rem) rotate(4deg); } }

/* ---------- surheader ---------- */
.surheader { position: relative; z-index: 1; background: var(--accent); color: var(--white); padding: 1rem var(--gut); text-align: center; }
.surheader p { font-size: 1rem; line-height: 1.4; letter-spacing: .05rem; text-transform: uppercase; }
.surheader u { text-underline-offset: 2px; }
@media (min-width: 641px) { .surheader p { font-size: 1.2rem; } }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: transparent;
  transform: translate3d(0, var(--hy, 3.6rem), 0);
  transition: background-color .5s var(--ease);
}
.site-header.is-light { background: var(--white); box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.hdr {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 6.4rem; padding: 0 var(--gut); transition: height .5s var(--ease);
}
.link-menu {
  padding: .2rem 0; font-size: 1.1rem; font-weight: 400; line-height: 1.27; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; color: var(--white); transition: color .25s var(--ease);
}
.is-light .link-menu { color: var(--ink); }
.link-menu:hover, .is-light .link-menu:hover { color: var(--accent); }
.hero-dark .link-menu:hover { color: #ffd9bd; }
.hdr__left { display: flex; align-items: center; }
.hdr__nav { display: none; }
.hdr__nav ul { display: flex; }
.hdr__nav li:not(:last-child) { margin-right: 3rem; }
.hdr__toggle { text-align: left; }
.logo { position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--white); }
.logo__mark { width: 3.6rem; height: 1.15rem; fill: currentColor; transition: transform .5s var(--ease), fill .25s var(--ease); }
.logo__name {
  margin-top: .6rem; font-size: 1.5rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.logo__sub {
  display: none; margin-top: .6rem; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.is-light .logo { color: var(--accent); }
.is-pinned .logo__name, .is-pinned .logo__sub { opacity: 0; transform: translateY(1.2rem); }
.is-pinned .logo__mark { transform: translateY(1.05rem) scale(1.25); }
.hdr__right { display: flex; justify-content: flex-end; align-items: center; }
.hdr__top { display: none; }
.hdr__links { display: flex; align-items: center; }
.hdr__links li:not(:last-child) { margin-right: 3rem; }
.hdr__hide-m { display: none; }
.link-reserve { display: inline-flex; align-items: center; gap: .5rem; }
.link-reserve svg { width: 1.5rem; height: 1.5rem; }
.lang { display: flex; align-items: center; }
.lang__btn { opacity: .55; }
.lang__btn[aria-pressed="true"] { opacity: 1; }
.lang__sep { margin: 0 .4rem; font-size: 1.1rem; color: var(--white); }
.is-light .lang__sep { color: var(--ink); }
.hdr__pin { display: inline-flex; color: var(--white); margin-right: 1.6rem; transition: color .25s var(--ease); }
.hdr__pin svg { width: 1.5rem; height: 1.5rem; }
.hdr__pin:hover { color: var(--accent); }
.is-light .hdr__pin { color: var(--ink); }

@media (min-width: 1025px) {
  .hdr { height: 11rem; align-items: stretch; grid-template-rows: 100%; }
  .is-pinned .hdr { height: 6.2rem; }
  .hdr__toggle { display: none; }
  .hdr__nav { display: block; }
  .hdr__left { height: 100%; align-items: center; padding-top: .2rem; }
  .is-pinned .hdr__left { padding-top: 0; }
  .logo { align-self: start; margin-top: 1.4rem; transition: margin .5s var(--ease); }
  .logo__mark { width: 4.6rem; height: 1.45rem; }
  .logo__name { font-size: 2.2rem; letter-spacing: .16em; margin-top: .9rem; }
  .logo__sub { display: block; }
  .is-pinned .logo { margin-top: 2.35rem; }
  .is-pinned .logo__mark { transform: translateY(0) scale(1.3); }
  .hdr__right { height: 100%; flex-direction: column; justify-content: center; align-items: flex-end; position: relative; }
  .hdr__top { display: flex; align-items: center; position: absolute; top: 1.4rem; right: 0; transition: transform .5s var(--ease), opacity .3s var(--ease); }
  .is-pinned .hdr__top { transform: translateY(-3rem); opacity: 0; pointer-events: none; }
  .hdr__links { padding-top: .2rem; }
  .hdr__hide-m { display: block; }
}

/* mobile drawer (ref .menu overlay: 2.2rem light links) */
.mnav {
  position: fixed; inset: 0; z-index: 250; background: var(--white); color: var(--ink);
  transform: translateX(-100%); transition: transform .6s var(--ease); visibility: hidden;
}
.mnav.is-open { transform: none; visibility: visible; }
.mnav__inner { display: flex; flex-direction: column; height: 100%; padding: 2.2rem var(--gut) 3rem; overflow-y: auto; }
.mnav__close { align-self: flex-start; color: var(--ink); margin-bottom: 5rem; }
.mnav__list li { border-bottom: 1px solid var(--line); }
.mnav__list a { display: block; padding: 1.6rem 0; font-size: 2.8rem; font-weight: 300; letter-spacing: -.03em; text-decoration: none; text-transform: uppercase; color: var(--ink); }
.mnav__list a:hover { color: var(--accent); }
.mnav__lang { margin: 3rem 0 2.4rem; }
.mnav__lang .lang__btn, .mnav__lang .lang__sep { color: var(--ink); font-size: 1.3rem; }
.mnav .button { align-self: flex-start; }
.mnav__meta { margin-top: auto; padding-top: 3rem; font-size: 1.3rem; color: var(--gray); }
.mnav__meta a { color: var(--text); }

/* ---------- hero ---------- */
.hero { position: relative; height: calc(100svh - var(--sur)); min-height: 52rem; overflow: hidden; color: var(--white); background: #2a1d14; }
.hero__media, .hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .08) 32%, rgba(0, 0, 0, .06) 70%, rgba(0, 0, 0, .28)),
    radial-gradient(ellipse 58% 46% at 50% 52%, rgba(24, 12, 4, .42), rgba(24, 12, 4, 0) 100%);
}
.hero__content { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 0 var(--gut); }
.hero__inner { width: 100%; max-width: 92rem; text-align: center; }
.hero__kicker { font-size: 1.6rem; letter-spacing: -.03em; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.hero__kicker strong { position: relative; top: -.2rem; margin-left: .8rem; font-family: var(--script); font-weight: 400; font-size: 3.4rem; letter-spacing: 0; }
.hero__title {
  margin: .6rem 0 1.4rem; font-size: clamp(3.4rem, 5.6vw, 8.4rem); line-height: 1.22; font-weight: 300;
  letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 2px 30px rgba(0, 0, 0, .22);
}
.push {
  position: absolute; z-index: 6; right: var(--gut); left: var(--gut); bottom: 5.2rem; display: flex; align-items: center; gap: 1.6rem;
  padding: 1.5rem; background: var(--accent); color: var(--white); text-decoration: none;
}
.push__content { display: block; flex: 1; }
.push__sub { display: block; margin-bottom: .8rem; font-size: 1rem; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; }
.push__title { display: block; font-size: 1.6rem; line-height: 1.3; letter-spacing: -.03em; }
.push__note { display: block; margin-top: .6rem; font-size: 1rem; line-height: 1.4; }
.push__img { display: none; }
.push:hover .push__img svg { transform: rotate(-4deg) translateY(-.3rem); }
.push__img svg { width: 100%; transition: transform .5s var(--ease); }
@media (min-width: 641px) {
  .push { left: auto; width: 50%; right: 1.5rem; }
}
@media (min-width: 1025px) {
  .hero__kicker strong { font-size: 4.4rem; margin-left: 1rem; }
  .push { width: 41rem; right: 4.8rem; bottom: 6rem; padding: 1.8rem; }
  .push__sub { font-size: 1.2rem; margin-bottom: 1rem; }
  .push__title { font-size: 2.4rem; line-height: 1.375; }
  .push__note { font-size: 1.2rem; }
  .push__img { display: block; width: 11.5rem; flex: none; }
}

/* ---------- intro (l-home-title) ---------- */
.intro { background: var(--white); padding-top: 4.4rem; }
.divider { position: relative; padding-bottom: 3rem; }
.divider::after, .divider-top::before {
  content: ""; position: absolute; left: 50%; width: calc(100% - 2 * var(--gut)); height: 1px; background: var(--line); transform: translateX(-50%);
}
.divider::after { bottom: 0; }
.divider-top { position: relative; }
.divider-top::before { top: 0; }
.intro .label { margin-bottom: 1.6rem; }
.intro__content { display: flex; }
.intro h1 { max-width: 52rem; font-size: 2.4rem; line-height: 1.4; font-weight: 300; letter-spacing: 0; color: var(--brown); }
.intro-icon {
  display: inline-block; width: 3.2rem; height: 3.2rem; margin: 0 .2rem; vertical-align: text-bottom; position: relative; top: .2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23a8592a' stroke-width='1.4' stroke-linecap='round'%3E%3Cellipse cx='20' cy='24' rx='17' ry='11'/%3E%3Cpath d='M3 24v3c0 6 7.6 11 17 11s17-5 17-11v-3'/%3E%3Cpath d='M20 24a1.5 1 0 0 1 3 0 3.5 2.3 0 0 1-7 0 5.5 3.6 0 0 1 11 0 7.5 5 0 0 1-15 0 9.5 6.3 0 0 1 19 0'/%3E%3Cpath d='M14 6c-2 2.5 2 4 0 7M20 4c-2 2.5 2 4 0 7M26 6c-2 2.5 2 4 0 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 641px) {
  .intro__content { justify-content: flex-end; margin-top: -1.5rem; }
  .intro .label { margin-bottom: 0; }
}
@media (min-width: 1025px) {
  .intro { padding-top: 8.6rem; }
  .divider { padding-bottom: 8rem; }
  .intro h1 { font-size: 3.2rem; line-height: 1.2; }
  .intro-icon { width: 3.6rem; height: 4.2rem; top: .4rem; }
}

/* ---------- products (m-products) ---------- */
.products, .menu { background: var(--white); padding: 4.8rem 0 6rem; }
.products__head { margin-bottom: 2.4rem; align-items: center; }
.products__head .h3 { margin-bottom: 1.6rem; }
.products__more { margin-top: 3.2rem; text-align: center; padding: 0 var(--gut); }
.product-list {
  display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.2rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.product-list > li { flex: 0 0 80%; scroll-snap-align: start; }
.card { height: 100%; }
.card__link { display: block; text-decoration: none; color: inherit; }
.card__top { position: relative; overflow: hidden; background: var(--card); }
.card__img { position: relative; aspect-ratio: 5 / 6; }
.card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s var(--ease), transform 1.2s var(--ease); }
.card__img.multiple img:last-of-type { opacity: 0; }
.card__link:hover .card__img.multiple img:first-of-type, .card__link:focus-visible .card__img.multiple img:first-of-type { opacity: 0; }
.card__link:hover .card__img.multiple img:last-of-type, .card__link:focus-visible .card__img.multiple img:last-of-type { opacity: 1; }
.card__link:hover .card__img:not(.multiple) img { transform: scale(1.04); }
.card__stickers { position: absolute; top: 1.2rem; left: 1.2rem; z-index: 2; }
.sticker {
  display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.2rem; border-radius: 50px; background: var(--white);
  font-size: 1rem; line-height: 1; letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
}
.sticker svg { width: 1.4rem; height: 1.4rem; color: var(--accent); fill: var(--accent); }
.card__overlay { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 3; transform: translateY(101%); transition: transform .25s var(--ease); }
.card__overlay .button { padding: 1.6rem 1rem; }
.card__link:hover .card__overlay, .card__link:focus-visible .card__overlay { transform: translateY(0); }
.card__content { display: flex; justify-content: space-between; gap: 1.2rem; margin-top: .6rem; }
.card__l { width: 70%; }
.card__name { font-size: 1.3rem; line-height: 1.41; font-weight: 400; color: var(--text); }
.card__sub { font-size: 1.3rem; line-height: 1.41; color: var(--gray); }
.card__price { width: 30%; text-align: right; font-size: 1.2rem; line-height: 1.83; color: var(--text); }
.card__price span { display: block; }
@media (min-width: 641px) {
  .products__head .h3 { margin-bottom: 0; }
  .product-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 2.4rem; overflow: visible; padding-bottom: 0; }
  .card__stickers { top: 2.4rem; left: 2.4rem; }
}
@media (min-width: 1025px) {
  .products, .menu { padding: 6.4rem 0 8rem; }
  .products__head { margin-bottom: 4rem; }
  .products__more { margin-top: 4.4rem; }
  .product-list { grid-template-columns: repeat(4, 1fr); }
}
.products--second { position: relative; padding-top: 8rem; }
.products--second::before { content: ""; position: absolute; top: 8rem; left: var(--gut); right: var(--gut); height: 1px; background: var(--line); }
.products--second .products__head { padding-top: 4.8rem; }
@media (max-width: 640px) { .products--second { padding-top: 4rem; } .products--second::before { top: 4rem; } .products--second .products__head { padding-top: 3.2rem; } }

/* ---------- full image (l-home-full) ---------- */
.full { position: relative; background: var(--white); }
.full__image { position: relative; aspect-ratio: 3 / 5; overflow: hidden; background: #1d150f; }
.full__image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .21), rgba(0, 0, 0, .21)), linear-gradient(20deg, rgba(14, 8, 3, .62), rgba(14, 8, 3, 0) 58%);
}
.img-plx { position: relative; overflow: hidden; }
.plx { position: absolute; left: 0; right: 0; top: -12%; bottom: -12%; will-change: transform; }
.plx img { width: 100%; height: 100%; object-fit: cover; }
.full__content { position: absolute; z-index: 5; left: 0; bottom: 3rem; padding: 0 var(--gut); color: var(--white); max-width: 92rem; }
.full__kicker { font-size: 1.6rem; margin-bottom: .4rem; }
.full__kicker strong { font-size: 3.2rem; }
.full__title { margin-bottom: 1.6rem; font-size: 2.8rem; line-height: 1.08; font-weight: 300; letter-spacing: -.02em; text-transform: uppercase; }
@media (min-width: 641px) { .full__image { aspect-ratio: 4 / 3; } }
@media (min-width: 1025px) {
  .full__image { aspect-ratio: 1440 / 850; }
  .full__content { left: 3.6rem; bottom: 7.2rem; }
  .full__kicker strong { font-size: 3.8rem; }
  .full__title { font-size: 3.8rem; margin-bottom: 2.4rem; }
}

/* ---------- menu (e-shop listing) ---------- */
.menu { padding-top: 6.4rem; }
.menu-grid { column-count: 1; column-gap: 2.4rem; }
.m-cat { break-inside: avoid; padding-bottom: 4rem; }
.m-cat__title { margin-bottom: 1.4rem; color: var(--text); }
.m-cat__title strong { color: var(--brown); }
.m-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1.6rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.m-cat__list .m-item:last-child { border-bottom: 1px solid var(--line); }
.m-item__name { font-size: 1.3rem; line-height: 1.41; color: var(--text); }
.m-item__name > span:first-child { display: block; }
.m-item__note { display: block; color: var(--gray); }
.m-item__price { flex: none; font-size: 1.2rem; color: var(--text); font-variant-numeric: tabular-nums; }
.m-cat__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; font: inherit; letter-spacing: inherit; color: inherit; }
.m-cat__toggle:disabled { cursor: default; opacity: 1; }
.m-cat__icon { display: none; width: 2rem; height: 2rem; flex: none; color: var(--accent); transition: transform .4s var(--ease); }
.m-cat.is-closed .m-cat__list, .m-cat.is-closed .m-cat__note { display: none; }
@media (max-width: 640px) {
  .m-cat { padding-bottom: 0; border-top: 1px solid var(--line); }
  .m-cat:last-child { border-bottom: 1px solid var(--line); }
  .m-cat__title { margin: 0; padding: 1.4rem 0; }
  .m-cat__icon { display: block; transform: rotate(45deg); }
  .m-cat.is-closed .m-cat__icon { transform: rotate(0); }
  .m-cat:not(.is-closed) { padding-bottom: 2.4rem; }
  .m-cat__list .m-item:last-child { border-bottom: 0; }
}
.m-cat__note { margin-top: 1rem; font-size: 1.2rem; color: var(--gray); font-style: italic; }
@media (min-width: 641px) { .menu-grid { column-count: 2; } }
@media (min-width: 1025px) { .menu { padding-top: 8rem; } .menu-grid { column-count: 4; } .m-cat { padding-bottom: 5.6rem; } }

/* ---------- hotspots (m-hotpoint-section) ---------- */
.hotspots { background: var(--white); position: relative; }
.hotspots__container { position: relative; }
.hotspots__image { position: relative; }
.hotspots__ratio { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.hotspots__ratio img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.hotspots__ratio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .2)), linear-gradient(30deg, rgba(20, 10, 2, .5), rgba(20, 10, 2, 0) 50%); }
.hotspots__content { position: absolute; z-index: 5; left: 0; bottom: 18rem; padding: 0 var(--gut); color: var(--white); }
.hotspots__kicker { font-size: 1.6rem; }
.hotspots__kicker strong { font-size: 3.2rem; }
.hotspots__title { margin-top: 1rem; font-size: 2.8rem; line-height: 1.08; font-weight: 300; letter-spacing: -.02em; text-transform: uppercase; }
.hps { position: absolute; left: 0; right: 0; bottom: 2rem; display: flex; gap: 1.2rem; overflow-x: auto; padding: 1rem var(--gut); scroll-snap-type: x mandatory; z-index: 6; }
.hp { flex: 0 0 82%; scroll-snap-align: start; }
.hp__marker { display: none; }
.hp__card { background: var(--white); }
.hp__link { display: flex; color: inherit; text-decoration: none; }
.hp__img { position: relative; flex: none; width: 8.4rem; aspect-ratio: 1; overflow: hidden; background: var(--card); }
.hp__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp__img--cup img { object-position: 92% 30%; transform: scale(1.9); transform-origin: 88% 30%; }
.hp__content { display: flex; flex-direction: column; justify-content: center; padding: 1.2rem 1.2rem 1.2rem 1.4rem; min-width: 0; }
.hp__brand { font-size: 1.3rem; color: var(--text); }
.hp__title { margin-top: .4rem; font-size: 1.3rem; color: var(--brown); }
.hp__more { display: inline-flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; font-size: 1.3rem; color: var(--accent); }
.hp__more svg { width: 1.1rem; height: 1rem; }
.hp__link:hover .hp__more { color: var(--brown); }
@media (min-width: 641px) {
  .hotspots__ratio { aspect-ratio: 1440 / 850; }
  .hotspots__content { left: 3.6rem; bottom: 7.2rem; }
  .hps { position: static; display: block; padding: 0; overflow: visible; }
  .hp { position: absolute; z-index: 6; margin: -2.5rem 0 0 -2.5rem; }
  .hp__marker {
    display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%;
    background: var(--accent); color: var(--white); transform: rotate(0); transition: transform .5s var(--ease), background-color .25s var(--ease);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
  }
  .hp__marker svg { width: 2rem; height: 2rem; }
  .hp__marker:hover { background: var(--accent-dark); }
  .hp.is-open .hp__marker { transform: rotate(45deg); }
  .hp__card {
    position: absolute; top: 50%; right: calc(100% + 1rem); width: 34.2rem;
    transform: translateY(-50%) scaleX(0); transform-origin: top right; transition: transform .5s var(--ease);
  }
  .hp.-right .hp__card { right: auto; left: calc(100% + 1rem); transform-origin: top left; }
  .hp.is-open .hp__card { transform: translateY(-50%) scaleX(1); }
  .hp__img { width: 10.2rem; }
  .hp__content, .hp__img img { opacity: 0; transition: opacity .25s var(--ease) 0s; }
  .hp.is-open .hp__content, .hp.is-open .hp__img img { opacity: 1; transition: opacity .25s var(--ease) .5s; }
  .hp__content { width: calc(100% - 10.2rem); padding-left: 1.6rem; }
  .hp__more { margin-top: 1.5rem; }
}
@media (min-width: 1025px) {
  .hotspots__kicker strong { font-size: 3.8rem; }
  .hotspots__title { font-size: 3.8rem; }
}

/* ---------- about collage (l-home-about) = gallery ---------- */
.about { padding: 4.4rem 0 4.4rem; background: var(--cream); overflow: hidden; }
.about__row { align-items: flex-end; }
.about__media { margin-top: 4rem; margin-bottom: 6rem; }
.about__frame { position: relative; }
.about__main { aspect-ratio: 1; }
.about__first { position: absolute; z-index: 5; top: -2rem; right: 35%; width: 35%; aspect-ratio: 3 / 4; overflow: hidden; box-shadow: 0 10px 30px rgba(60, 30, 10, .12); }
.about__first img, .about__night img { width: 100%; height: 100%; object-fit: cover; }
.about__sign { position: absolute; z-index: 6; top: 18%; right: 0; width: 64%; color: #2b2523; overflow: visible; }
.about__sign text { font-family: var(--script); font-size: 56px; fill: currentColor; paint-order: stroke; stroke: var(--cream); stroke-width: 6px; stroke-linejoin: round; }
.about__stamp { position: absolute; z-index: 6; top: -5%; right: 0; width: 8rem; color: var(--text); fill: currentColor; }
.stamp__text { font-family: var(--sans); font-size: 9.6px; letter-spacing: 1.3px; fill: currentColor; }
.about__stamp use { fill: var(--accent); }
.about__night { position: absolute; z-index: 4; left: -4%; bottom: -12%; width: 46%; aspect-ratio: 16 / 9; overflow: hidden; box-shadow: 0 10px 30px rgba(60, 30, 10, .14); }
.about__hearts { width: 4.4rem; color: var(--brown); margin-bottom: .6rem; }
.about__content .h3 { margin-bottom: 1.8rem; color: var(--text); }
.about__content .h3 strong { color: var(--text); }
.about__content .mw-45 { margin-bottom: 2.4rem; }
@media (min-width: 641px) {
  .about__media { width: 50%; margin: 0 0 0 8.333%; order: 2; }
  .about__content { width: 41.666%; order: 1; }
}
@media (min-width: 1025px) {
  .about { padding: 23.4rem 0 7rem; }
  .about__media { width: 41.666%; margin-left: 8.333%; }
  .about__content { width: 33.333%; margin-left: 8.333%; padding-bottom: 8rem; }
  .about__first { top: -20%; right: 15%; }
  .about__sign { top: 16%; right: -22%; width: 30rem; }
  .about__stamp { width: 9.6rem; }
  .about__night { left: -16%; bottom: -10%; width: 40%; }
}

/* ---------- blocks (l-home-block) = reputation ---------- */
.block { padding: 2rem 0 4rem; background: var(--cream); }
.block__badge { text-align: center; margin: 0 var(--gut) 3.2rem; }
.block__badge a { display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--text); }
.block__badge a:hover { color: var(--accent); }
.stars { display: inline-flex; gap: .2rem; color: var(--accent); }
.stars svg { width: 1.5rem; height: 1.5rem; }
.stars .half { opacity: .35; }
.block__row { justify-content: center; }
.block__col { margin-bottom: 4rem; }
.block__img { aspect-ratio: 4 / 3; }
.block__text { margin-top: 2rem; }
.block__text .h3 { margin-bottom: 1rem; color: var(--text); }
.block__text blockquote { margin-bottom: 2rem; }
.block__text blockquote p { color: var(--text); }
.block__text cite { font-style: normal; color: var(--gray); }
.block__text footer { margin-top: .4rem; font-size: 1.3rem; }
@media (min-width: 641px) {
  .block__col { width: 50%; }
  .block__img { aspect-ratio: 3 / 4; }
}
@media (min-width: 1025px) {
  .block { padding: 7rem 0 12.6rem; }
  .block__badge { margin-bottom: 5.6rem; }
  .block__col { width: 41.666%; margin-bottom: 0; }
}

/* ---------- reassurance ---------- */
.reassurance { background: var(--white); padding: 6rem 0 4rem; }
.ra { flex-direction: column; gap: 4rem; padding: 0 var(--gut); }
.ra__item { text-align: center; }
.ra__icon { width: 8rem; height: 8rem; margin: 0 auto; color: var(--brown); }
.ra__item .h5 { margin: 1.6rem 0 1rem; }
@media (min-width: 641px) {
  .ra { flex-direction: row; gap: 0; max-width: 83.333%; padding: 0; }
  .ra__item { width: 33.333%; padding: 0 2.4rem; }
}
@media (min-width: 1025px) { .reassurance { padding: 8rem 0; } .ra__item .h5 { margin-top: 2rem; } }

/* ---------- footer (m-footer) ---------- */
.footer { background: var(--accent); color: var(--white); padding: 4rem var(--gut) 2rem; }
.footer__top { display: flex; flex-direction: column; gap: 3.2rem; margin-bottom: 4rem; }
.logo--footer { color: var(--white); align-items: center; }
.logo--footer .logo__mark { width: 5.2rem; height: 1.65rem; }
.logo--footer .logo__name { font-size: 2rem; margin-top: 1rem; }
.footer__title { margin-bottom: .5rem; font-size: 1.6rem; font-weight: 400; }
.footer__dl { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.6rem; margin-top: 1.6rem; font-size: 1.2rem; line-height: 1.41; }
.footer__dl div { display: contents; }
.footer__dl dt { font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; opacity: .78; padding-top: .15rem; }
.footer__dl a { text-decoration: none; }
.footer__dl a:hover { text-decoration: underline; }
.reserve-bar {
  display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; height: 4rem; padding: 0 1.4rem 0 1rem;
  border-radius: 4px; background: var(--white); color: var(--text); font-size: 1.3rem; text-decoration: none; transition: color .25s var(--ease);
}
.reserve-bar svg { width: 1.1rem; height: 1rem; transition: transform .25s var(--ease); }
.reserve-bar:hover { color: var(--accent); }
.reserve-bar:hover svg { transform: translateX(.3rem); }
.social { display: flex; gap: 1.5rem; margin-top: 2rem; }
.social svg { width: 2.6rem; height: 2.6rem; }
.link-footer { font-size: 1rem; font-weight: 400; line-height: 1; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--white); transition: color .25s var(--ease); }
a.link-footer:hover { color: #ffdcc2; }
.footer__dir { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2.4rem; }
.footer__dir svg { width: 1.1rem; height: 1rem; }
.footer__bottom { display: flex; flex-direction: column; gap: 1.6rem; }
.links { display: flex; flex-wrap: wrap; gap: 1.2rem 1.5rem; align-items: center; }
.footer .lang__sep { color: var(--white); font-size: 1rem; }
.footer .lang__btn { color: var(--white); font-size: 1rem; }
@media (min-width: 1025px) {
  .footer { padding: 9rem 0 2rem; }
  .footer__top { flex-direction: row; align-items: flex-start; width: 83.333%; margin: 0 auto 6rem; gap: 0; }
  .footer__logo { width: 20%; align-self: center; }
  .logo--footer { align-items: flex-start; }
  .footer__visit { width: 50%; padding: 0 9.6rem 0 2.4rem; }
  .footer__follow { width: 30%; }
  .footer__bottom { width: 83.333%; margin: 0 auto; flex-direction: row; justify-content: space-between; align-items: center; padding-left: calc(20% + 2.4rem); }
  .links--right { justify-content: flex-end; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .footer__top { display: grid; grid-template-columns: 1fr 1fr; }
  .footer__logo { grid-column: 1 / -1; }
  .logo--footer { align-items: flex-start; }
}

/* ---------- concept toast ---------- */
.toast {
  position: fixed; z-index: 200; left: 1.6rem; right: 1.6rem; bottom: 1.6rem; max-width: 38rem;
  display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.6rem 1.4rem 1.6rem 1.8rem;
  background: var(--white); color: var(--text); border-radius: 4px; box-shadow: 0 10px 40px rgba(40, 20, 5, .18);
  font-size: 1.3rem; line-height: 1.45; opacity: 0; transform: translateY(1.6rem); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.toast[hidden] { display: none; }
.toast.is-visible { opacity: 1; transform: none; }
.toast p { flex: 1; }
.toast__close { flex: none; width: 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center; margin: -.4rem -.4rem 0 0; color: var(--text); border-radius: 50%; }
.toast__close svg { width: 1.8rem; height: 1.8rem; transform: rotate(45deg); }
.toast__close:hover { color: var(--accent); background: var(--cream); }
@media (min-width: 641px) { .toast { left: 2rem; bottom: 2rem; right: auto; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .loader { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .plx { top: 0; bottom: 0; }
}

.footer__lang { margin-top: 2rem; }