/* ==========================================================================
   NEIGHBOURS KITCHEN & COFFEE — style.css
   Direcție: crem cald + alamă, în registrul velanosmykonos.com dus la nivel de
   brunch premium londonez (aer mult, un singur accent metalic, foto editorial).
   Un singur CSS, fonturi self-hosted, zero dependențe la runtime.
   ========================================================================== */

/* --- fonturi self-hosted -------------------------------------------------- */
/* Instrument Serif: o singură grosime plus italic, deci nu se declară intervale.
   E strâns și cu contrast mare, în același registru cu wordmarkul din logo. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-italic-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-italic-latin.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/garamond-latin-ext.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/garamond-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/garamond-italic-latin-ext.woff2') format('woff2');
  font-weight: 400 500; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/garamond-italic-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
}

/* --- variabile ------------------------------------------------------------ */
:root {
  --paper:    #fbf7f2;   /* cremul de bază */
  --paper-2:  #ffffff;
  --panel:    #f3e9de;   /* panou cald */
  --panel-2:  #ead9c7;
  --line:     #e4d6c6;
  --line-2:   #d6c3ac;

  --ink:      #241f1b;
  --ink-2:    #453b32;
  --mute:     #7c6f63;

  --brass:    #a9865c;   /* singurul accent metalic */
  --brass-2:  #c2a179;

  --dark:     #1c1815;   /* secțiunea de seară + footer */
  --dark-2:   #272019;
  --on-dark:  rgba(255, 248, 240, .74);
  --dark-line: rgba(255, 240, 224, .18);

  --sans:    'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif:   'EB Garamond', Garamond, 'Times New Roman', serif;
  --display: 'Instrument Serif', 'EB Garamond', Georgia, serif;

  --pad:  clamp(20px, 5vw, 72px);
  --maxw: 1240px;
  --col:  620px;

  --hdr-top:  30px;
  --hdr-main: 78px;
  --hdr:      108px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --hp: 0;               /* progresul de stingere a hero-ului, îl scrie JS */
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 28px;
  letter-spacing: .2px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* figure vine din browser cu margin: 1em 40px, care înghesuia toate fotografiile */
figure { margin: 0; }
/* picture e inline din oficiu, deci nu transmite înălțimea copilului <img> */
picture { display: block; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- tipografie ------------------------------------------------------------
   Titlurile mari sunt Playfair (aceeași familie de contrast mare ca wordmarkul
   din logo), etichetele sunt Inter cu tracking, textul curent e Garamond.
   -------------------------------------------------------------------------- */
/* Instrument Serif e vizibil mai îngust decât Playfair, deci ca să aibă aceeași
   prezență pe pagină corpul creste cu vreo 15% față de setarea inițială */
h1, .h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -.2px;
  text-transform: uppercase;
}
h1 > span, .h1 > span, h1 > em, .h1 > em { display: block; }
h1 em, .h1 em { font-style: italic; text-transform: none; letter-spacing: 0; }

h2, .h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.9vw, 52px);
  line-height: 1.08;
  letter-spacing: -.1px;
  text-transform: uppercase;
}
h2 em, .h2 em { font-style: italic; text-transform: none; }

h3, .h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 18px;
  display: block;
}
.eyebrow--mute { color: var(--mute); }
.eyebrow--dark { color: var(--brass-2); }

.lede {
  font-size: clamp(19px, 1.5vw, 21px);
  line-height: 32px;
  color: var(--ink-2);
  max-width: 46ch;
}
/* titlurile nu au margine proprie, ca să nu se bată cu grid gap-urile;
   aerul de sub ele se pune aici, unde chiar urmează text */
h1 + .lede, h2 + .lede, h2 + p, h3 + p, .h2 + .lede { margin-top: 20px; }
.muted { color: var(--mute); }
.meta {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--mute);
}

/* --- butoane -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: 2.05px; text-transform: uppercase;
  padding: 16px 30px; border: 1px solid var(--ink); color: var(--ink);
  background: transparent; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--fill { background: var(--ink); color: var(--paper); }
.btn--fill:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn--brass { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn--brass:hover { background: var(--ink); border-color: var(--ink); }
.btn--ghost-dark { border-color: var(--dark-line); color: #fff; }
.btn--ghost-dark:hover { background: #fff; color: var(--dark); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.link-u {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: 2.05px; text-transform: uppercase;
  border-bottom: 1px solid var(--line-2); padding-bottom: 5px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.link-u:hover { border-color: var(--brass); color: var(--brass); }

/* --- header ----------------------------------------------------------------
   Bară crem plină de la început, nu transparentă. Hero-ul e împărțit în două,
   iar jumătatea din dreapta e fotografie deschisă: un nav închis peste ea
   devine ilizibil, iar unul alb ar dispărea peste cremul din stânga. Filetul
   și umbra apar abia după 80px de scroll, ca bara să nu taie pagina cât ești sus.
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: var(--paper);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(36, 31, 27, .05);
}
.hdr__top {
  height: var(--hdr-top);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  border-bottom: 1px solid transparent;
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--mute);
  transition: border-color .4s var(--ease);
}
.hdr.is-stuck .hdr__top { border-bottom-color: var(--line); }
.hdr__top a:hover { color: var(--brass); }
.hdr__top-r { display: flex; align-items: center; gap: 22px; }

.hdr__main {
  height: var(--hdr-main);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--pad);
}
.hdr__logo { display: block; color: var(--ink); flex: 0 0 auto; }
.hdr__logo img { width: clamp(132px, 15vw, 186px); height: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.nav a {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: 2.05px; text-transform: uppercase;
  color: var(--ink); position: relative; padding: 6px 0;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--brass); transition: right .4s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }

.hdr__cta { margin-left: 26px; }
.hdr__cta .btn { padding: 13px 22px; }

.burger {
  display: none; margin-left: auto;
  width: 42px; height: 42px; align-items: center; justify-content: center;
}
.burger span {
  display: block; width: 22px; height: 1px; background: var(--ink);
  position: relative; transition: background .2s;
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1px;
  background: var(--ink); transition: transform .35s var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
body.is-menu .burger span { background: transparent; }
body.is-menu .burger span::before { transform: translateY(7px) rotate(45deg); }
body.is-menu .burger span::after { transform: translateY(-7px) rotate(-45deg); }

/* meniul de pe mobil */
.mnav {
  position: fixed; inset: 0; z-index: 55;
  background: var(--paper);
  padding: calc(var(--hdr) + 24px) var(--pad) 40px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
  overflow-y: auto;
}
body.is-menu .mnav { transform: translateY(0); }
.mnav a {
  font-family: var(--display); font-size: 30px; text-transform: uppercase;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.mnav__foot { margin-top: auto; padding-top: 28px; }

/* --- structură ------------------------------------------------------------ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: clamp(64px, 9vw, 128px) 0; }
.sec--tight { padding: clamp(44px, 6vw, 82px) 0; }
.sec--panel { background: var(--panel); }
.sec--paper2 { background: var(--paper-2); }
.sec--dark { background: var(--dark); color: #fff; }
.sec--dark .lede, .sec--dark p { color: var(--on-dark); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 84px); align-items: center;
}
.split--wide-l { grid-template-columns: 1.15fr 1fr; }
.split--wide-r { grid-template-columns: 1fr 1.15fr; }
.split__txt { max-width: var(--col); }

.head-c { text-align: center; max-width: 720px; margin: 0 auto clamp(38px, 5vw, 66px); }
.head-c .lede { margin-left: auto; margin-right: auto; }

/* --- hero split ------------------------------------------------------------
   Stânga tipografie pe crem, dreapta fotografie pe toată înălțimea. Pozele
   clientului sunt toate verticale, deci ăsta e singurul hero care nu le taie.
   -------------------------------------------------------------------------- */
.hero {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100svh;
  padding-top: var(--hdr);   /* fotografia începe sub bară, nu pe sub ea */
  background: var(--paper);
}
.hero__txt {
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px clamp(24px, 4.6vw, 76px) 56px var(--pad);
  opacity: calc(1 - var(--hp) * .85);
  transform: translateY(calc(var(--hp) * -26px));
}
.hero__txt h1 { margin-bottom: 6px; }  /* restul aerului vine din h1 + .lede */
.hero__meta {
  margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.hero__fig { position: relative; overflow: hidden; }
.hero__fig picture { height: 100%; }
.hero__fig img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1 + var(--hp) * .06));
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 9px; letter-spacing: 2.2px;
  text-transform: uppercase; color: #fff; opacity: calc(1 - var(--hp) * 2);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}
.hero__scroll i {
  display: block; width: 1px; height: 42px;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
}

/* --- bandă cu imagini care curge -------------------------------------------
   Patru capcane, toate pe telefon: fără loading="lazy" (banda se mișcă prin
   transform, deci imaginile nu ajung niciodată „vizibile"), fără vh în
   dimensiuni (bara de adresă schimbă vh în mijlocul animației), durata se
   recalculează doar la schimbare de lățime, animația se oprește off-screen.
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; background: var(--paper); padding: 8px 0; }
.marquee__track {
  display: flex; width: max-content; gap: 10px;
  animation: mq 60s linear infinite;
}
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__track img {
  height: clamp(190px, 24vw, 330px);
  width: auto; object-fit: cover; flex: 0 0 auto;
}
@keyframes mq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* --- carusel coverflow -----------------------------------------------------
   Cardul din centru e plin, vecinii doar conturați, fundalul se schimbă odată
   cu cardul, contor n / N, săgeți, swipe și taste.
   -------------------------------------------------------------------------- */
.cf { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0; }
.cf__bgs { position: absolute; inset: 0; z-index: 0; }
.cf__bgs img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .9s var(--ease);
  transform: scale(1.06);
}
.cf__bgs img.is-on { opacity: .2; }
.cf__bgs::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(var(--paper), rgba(251, 247, 242, .78) 45%, var(--paper));
}
.cf__inner { position: relative; z-index: 1; }
.cf__head { text-align: center; margin-bottom: clamp(30px, 4vw, 52px); }
.cf__view { overflow: hidden; }
.cf__track {
  display: flex; gap: 20px;
  transition: transform .7s var(--ease);
  will-change: transform;
}
.cf__card {
  flex: 0 0 300px; background: transparent;
  border: 1px solid var(--line-2);
  padding: 0 0 24px;
  opacity: .42; transform: scale(.9);
  transition: opacity .6s var(--ease), transform .6s var(--ease),
              background .6s var(--ease), border-color .6s var(--ease),
              box-shadow .6s var(--ease);
}
.cf__card.is-on {
  opacity: 1; transform: scale(1);
  background: var(--paper-2); border-color: var(--paper-2);
  box-shadow: 0 26px 60px rgba(36, 31, 27, .1);
}
.cf__card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cf__card .h3 { margin: 22px 24px 8px; }
.cf__card p { margin: 0 24px; font-size: 16px; line-height: 25px; color: var(--mute); }
.cf__nav {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.cf__btn {
  width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.cf__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cf__count {
  font-family: var(--sans); font-weight: 500;
  font-size: 11px; letter-spacing: 2px; color: var(--mute); min-width: 62px;
  text-align: center;
}

/* --- benzi full-bleed ------------------------------------------------------ */
.band { position: relative; overflow: hidden; }
.band__img { width: 100%; height: clamp(300px, 46vw, 580px); object-fit: cover; }
.band__over {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: var(--pad);
  background: linear-gradient(rgba(20, 16, 13, .34), rgba(20, 16, 13, .5));
  color: #fff;
}
.band__over h2, .band__over .h2 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.band__over p { color: rgba(255, 250, 244, .84); max-width: 52ch; margin-inline: auto; }

/* --- bandă de facilități peste poză întunecată ----------------------------- */
.feats { position: relative; overflow: hidden; background: var(--dark); }
.feats__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .3;
}
.feats__inner { position: relative; z-index: 1; padding: clamp(56px, 7vw, 96px) 0; }
.feats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px);
}
.feat { color: #fff; }
.feat__line { height: 1px; background: var(--dark-line); position: relative; margin-bottom: 22px; }
.feat__line i {
  position: absolute; inset: 0 100% 0 0; background: var(--brass-2);
  transition: right 1.1s var(--ease);
}
.feat.is-in .feat__line i { right: 0; }
.feat svg { width: 26px; height: 26px; color: var(--brass-2); margin-bottom: 16px; }
.feat h3 { font-size: 20px; margin-bottom: 8px; }
.feat p { font-size: 16px; line-height: 25px; color: var(--on-dark); margin: 0; }

/* --- grilă de cifre -------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.stat { background: var(--paper); padding: clamp(26px, 3.4vw, 46px) clamp(14px, 2vw, 26px); }
.stat b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1; margin-bottom: 12px;
}
.stat span {
  font-family: var(--sans); font-weight: 500; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--mute);
}

/* --- grile de imagini ------------------------------------------------------ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 26px); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.8vw, 26px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 20px); }

.card { display: block; }
.card__fig { overflow: hidden; position: relative; }
.card__fig img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.card:hover .card__fig img { transform: scale(1.045); }
.card h3 { margin: 20px 0 6px; }
.card p { font-size: 16px; line-height: 25px; color: var(--mute); margin: 0; }

/* --- galerie --------------------------------------------------------------- */
.gal { columns: 3; column-gap: clamp(12px, 1.8vw, 22px); }
.gal figure { break-inside: avoid; margin: 0 0 clamp(12px, 1.8vw, 22px); overflow: hidden; }
.gal img { width: 100%; transition: transform 1.1s var(--ease); }
.gal figure:hover img { transform: scale(1.04); }

/* --- listă de preparate (fără prețuri până le dă clientul) ----------------- */
.menu-cat + .menu-cat { margin-top: clamp(44px, 5vw, 72px); }
.menu-cat > h2 { margin-bottom: 6px; }
.menu-cat__note { color: var(--mute); font-style: italic; margin-bottom: 30px; }
.dish {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 20px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.dish h3 { font-size: 21px; }
.dish p { grid-column: 1 / -1; margin: 0; font-size: 16px; line-height: 25px; color: var(--mute); }
.dish__tag {
  font-family: var(--sans); font-weight: 500; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--brass);
}

/* --- program --------------------------------------------------------------- */
.hours { border-top: 1px solid var(--line); }
.hours li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.hours b { font-weight: 400; }
.hours span { color: var(--mute); }

/* --- hartă ----------------------------------------------------------------- */
.map { width: 100%; height: clamp(280px, 40vw, 460px); border: 0; display: block; filter: saturate(.8); }

/* --- ghid ------------------------------------------------------------------ */
.answer {
  background: var(--panel); border-left: 2px solid var(--brass);
  padding: clamp(20px, 3vw, 32px); margin-bottom: 38px;
}
.answer p:last-child { margin-bottom: 0; }
.toc { background: var(--paper-2); border: 1px solid var(--line); padding: 26px 30px; margin-bottom: 44px; }
.toc h2 { font-size: 15px; font-family: var(--sans); font-weight: 500;
          letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; }
.toc li { padding: 6px 0; }
.toc a { border-bottom: 1px solid var(--line-2); }
.toc a:hover { border-color: var(--brass); color: var(--brass); }
.prose { max-width: 720px; }
.prose h2 { margin: clamp(44px, 5vw, 66px) 0 16px; }
.prose h3 { margin: 32px 0 10px; }
.prose ul { margin: 0 0 1em; }
.prose ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.prose ul li::before {
  content: ''; position: absolute; left: 2px; top: 13px;
  width: 8px; height: 1px; background: var(--brass);
}
.faq { border-top: 1px solid var(--line); margin-top: 20px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-family: var(--display); font-size: 21px; display: flex;
  justify-content: space-between; gap: 20px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--brass); font-size: 24px; }
.faq details[open] summary::after { content: '\2212'; }
.faq p { margin: 0 0 20px; color: var(--ink-2); }

.crumb {
  font-family: var(--sans); font-weight: 500; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--mute);
}
.crumb a:hover { color: var(--brass); }

/* hero scurt pentru paginile interioare */
.phero { padding: calc(var(--hdr) + clamp(52px, 7vw, 96px)) 0 clamp(36px, 5vw, 62px); background: var(--panel); }
.phero h1 { margin: 14px 0 0; }
.phero .lede { margin-top: 22px; }

/* --- articole (carduri de ghid) -------------------------------------------- */
.art { display: block; background: var(--paper-2); border: 1px solid var(--line); }
.art img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.art__body { padding: 26px 26px 30px; }
.art h3 { margin: 10px 0 10px; }
.art p { font-size: 16px; line-height: 25px; color: var(--mute); margin: 0; }
.art:hover h3 { color: var(--brass); }

/* --- footer ---------------------------------------------------------------- */
.ftr { background: var(--dark); color: #fff; }
.ftr__top {
  padding: clamp(48px, 6vw, 78px) 0; border-bottom: 1px solid var(--dark-line);
  text-align: center;
}
.ftr__top img { width: clamp(180px, 26vw, 300px); height: auto; margin: 0 auto 22px; }
.ftr__top p { color: var(--on-dark); max-width: 44ch; margin: 0 auto; }
.ftr__cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 54px);
  padding: clamp(44px, 5.5vw, 70px) 0;
}
.ftr h4 {
  font-family: var(--sans); font-weight: 500; font-size: 10px;
  letter-spacing: 2.2px; text-transform: uppercase; color: var(--brass-2);
  margin-bottom: 18px;
}
.ftr li { margin-bottom: 10px; color: var(--on-dark); font-size: 17px; }
.ftr a:hover { color: #fff; }
.ftr__soc { display: flex; gap: 14px; margin-top: 18px; }
.ftr__soc a {
  width: 38px; height: 38px; border: 1px solid var(--dark-line); border-radius: 50%;
  display: grid; place-items: center; color: var(--on-dark);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.ftr__soc a:hover { background: #fff; color: var(--dark); border-color: #fff; }
.ftr__soc svg { width: 16px; height: 16px; }
.ftr__bar {
  border-top: 1px solid var(--dark-line);
  padding: 22px 0 26px;
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between;
  font-family: var(--sans); font-size: 10px; letter-spacing: 1.7px;
  text-transform: uppercase; color: rgba(255, 245, 235, .5);
}
.ftr__bar a:hover { color: #fff; }

/* --- buton fix de apel ----------------------------------------------------- */
.call {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--brass); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px rgba(36, 31, 27, .28);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.call.is-on { opacity: 1; visibility: visible; transform: none; }
.call svg { width: 21px; height: 21px; }
.call::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--brass); animation: ring 2.4s var(--ease) infinite;
}
@keyframes ring {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --- reveal la scroll ------------------------------------------------------
   Un singur IntersectionObserver. Masca se pune pe <img>, NU pe elementul
   observat: clip-path: inset(100%) pe elementul observat îl scoate din
   raportare și reveal-ul nu se mai declanșează niciodată.
   -------------------------------------------------------------------------- */
[data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-rv].is-in { opacity: 1; transform: none; }

[data-rv="mask"] { opacity: 1; transform: none; overflow: hidden; }
[data-rv="mask"] > img, [data-rv="mask"] > picture > img {
  clip-path: inset(100% 0 0 0); transform: scale(1.09);
  transition: clip-path 1.25s var(--ease), transform 1.5s var(--ease);
}
[data-rv="mask"].is-in > img, [data-rv="mask"].is-in > picture > img {
  clip-path: inset(0 0 0 0); transform: scale(1);
}

[data-rv="words"] { opacity: 1; transform: none; }
[data-rv="words"] .w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  /* Accentele majusculelor românești (Î, Â, Ă, Ș, Ț) ies deasupra și dedesubtul
     casetei de linie. Titlurile au line-height strâns (1,02 la h1), deci fără
     spațiul de mai jos overflow: hidden le reteza: „ÎNĂUNTRU" apărea „INAUNTRU".
     Marginea negativă anulează exact cât adaugă padding-ul, deci nimic nu se mișcă. */
  padding: .2em .04em .14em;
  margin: -.2em -.04em -.14em;
}
[data-rv="words"] .w > i {
  display: inline-block; font-style: inherit;
  /* 130%, nu 105%: caseta vizibilă e acum mai înaltă cu padding-ul de sus
     și de jos, iar la 105% textul ar fi rămas la vedere înainte de animație */
  transform: translateY(130%); transition: transform .95s var(--ease);
}
[data-rv="words"].is-in .w > i { transform: none; }

[data-rv="line"] { opacity: 1; transform: none; position: relative; overflow: hidden; }
[data-rv="line"]::after {
  content: ''; position: absolute; inset: 0 100% 0 0;
  background: var(--brass); transition: right 1.1s var(--ease);
}
[data-rv="line"].is-in::after { right: 0; }

[data-rv-list] > * { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-rv-list].is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-rv], [data-rv-list] > * { opacity: 1; transform: none; }
  [data-rv="mask"] > img { clip-path: none; transform: none; }
  [data-rv="words"] .w > i { transform: none; }
  .marquee__track { animation: none; }
}

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .feats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .ftr__cols { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .gal { columns: 2; }
}

@media (max-width: 900px) {
  :root { --hdr-main: 66px; --hdr: 96px; }
  .nav, .hdr__cta { display: none; }
  .burger { display: flex; }
  /* Pe telefon nu mai stau una sub alta: fotografia ocupă tot ecranul, iar textul
     vine peste ea. Ambele intră în aceeași celulă de grilă, deci nu e nevoie de
     poziționare absolută și înălțimea rămâne dată de .hero. */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    min-height: 100svh;
  }
  .hero__fig { grid-area: 1 / 1; height: 100%; }
  .hero__fig img { height: 100%; }
  .hero__fig::after {
    content: ''; position: absolute; inset: 0;
    /* jumătatea de jos a fotografiei e luminoasă (farfuria), iar exact acolo cade
       textul, deci scrimul se îngroașă de la 55% în jos */
    background: linear-gradient(rgba(18, 14, 11, .42),
                                rgba(18, 14, 11, .36) 26%,
                                rgba(18, 14, 11, .68) 55%,
                                rgba(18, 14, 11, .88));
  }
  .hero__txt {
    grid-area: 1 / 1; z-index: 2;
    justify-content: flex-end;
    padding: 40px var(--pad) 44px;
    color: #fff;
    text-shadow: 0 2px 26px rgba(0, 0, 0, .45);
  }
  .hero__txt .lede { color: rgba(255, 250, 244, .92); }
  .hero__txt .eyebrow { color: var(--brass-2); }
  .hero__meta { border-top-color: rgba(255, 245, 235, .3); }
  .hero__txt .meta { color: rgba(255, 250, 244, .82); }
  /* butonul conturat trebuie să treacă pe alb, altfel dispare pe fotografie */
  .hero__txt .btn { border-color: rgba(255, 245, 235, .55); color: #fff; text-shadow: none; }
  .hero__txt .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
  .hero__txt .btn--fill { background: #fff; color: var(--ink); border-color: #fff; }
  .hero__scroll { display: none; }
  .split, .split--wide-l, .split--wide-r { grid-template-columns: 1fr; }
  .split__txt { max-width: none; }
  .split--flip .split__fig { order: -1; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .cf__card { flex: 0 0 min(74vw, 300px); }
}

@media (max-width: 620px) {
  body { font-size: 17px; line-height: 27px; }
  .hdr__top { display: none; }
  :root { --hdr: 66px; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .gal { columns: 1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .feats__grid { grid-template-columns: 1fr; }
  .ftr__cols { grid-template-columns: 1fr; }
  .btn-row .btn { flex: 1 1 100%; }
  .call { right: 16px; bottom: 16px; }
}