/* ============================================================
   Les Tziganes — landing page styles
   Palette and type from New Assets/Les Tziganes - Materials.pdf
   ============================================================ */

/* ---------- Fonts (local, no CDN) ---------- */
@font-face{
  font-family:"Farnham Display";
  src:url("../fonts/FarnhamDisplay-Light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Farnham Display";
  src:url("../fonts/FarnhamDisplay-LightItalic.woff2") format("woff2");
  font-weight:300; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Farnham Display";
  src:url("../fonts/FarnhamDisplay-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gotham";
  src:url("../fonts/GOTHAM-BLACK.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"WinSoft Pro";
  src:url("../fonts/WinSoftPro-Med.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"WinSoft Pro";
  src:url("../fonts/WinSoftPro-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --blue:#2e55a4;
  --coral:#fc5058;
  --sand:#d6caa6;
  --cream:#f1eada;
  --ink:#16161a;
  --serif:"Farnham Display", Georgia, "Times New Roman", serif;
  --sans:"Gotham", "Helvetica Neue", Arial, sans-serif;
  --body:"WinSoft Pro", "Segoe UI", Tahoma, sans-serif;
  --pad:clamp(1.25rem, 5.2vw, 6.25rem);
  --maxw:1500px;
  --nav-h:4.25rem;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 1.25rem); }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-weight:500;
  line-height:1.55;
}
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
h1,h2{ font-family:var(--serif); font-weight:300; margin:0; text-transform:uppercase; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Masked brand vectors ----------
   One SVG file, any brand color: element gets the color as
   background and the artwork as an alpha mask. */
.logo-mask{
  display:inline-block;
  aspect-ratio:471.495/344.627;           /* logo.svg viewBox proportions */
  -webkit-mask:url("../img/logo.svg") no-repeat center / contain;
  mask:url("../img/logo.svg") no-repeat center / contain;
}
.logo-mask--blue{ background:var(--blue); }
.logo-mask--cream{ background:var(--cream); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:900;
  text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(.8rem, 1vw, .95rem);
  padding:.9em 1.8em; border-radius:999px;
  min-height:44px;
  transition:transform .15s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn .arrow{ transition:transform .2s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--outline{ color:#fff; border:2px solid rgba(255,255,255,.95); background:transparent; }
.btn--outline:hover{ background:#fff; color:var(--coral); }
.btn--coral{ color:#fff; background:var(--coral); box-shadow:0 10px 24px -10px rgba(252,80,88,.8); }
.btn--coral:hover{ background:#e8434b; }

.eyebrow{
  font-family:var(--sans); font-weight:900; text-transform:uppercase;
  color:var(--blue); letter-spacing:.08em; margin:0 0 .6rem;
  font-size:clamp(.9rem, 1.3vw, 1.15rem);
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(241,234,218,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(46,85,164,.15);
}
.nav__inner{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  min-height:var(--nav-h);
}
.nav__logo{ display:inline-flex; }
.nav__logo .logo-mask{ width:clamp(88px, 8vw, 120px); }
.nav__links{
  display:flex; gap:clamp(1rem,2.5vw,2.25rem); margin-left:auto;
  font-family:var(--sans); font-weight:900; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.06em;
}
.nav__links a{ padding:.75rem 0; color:var(--ink); transition:color .15s ease; }
.nav__links a:hover{ color:var(--coral); }
.nav__phone{
  font-family:var(--sans); font-weight:900; font-size:.8rem; letter-spacing:.04em;
  color:#fff; background:var(--blue);
  padding:.65em 1.3em; border-radius:999px;
  transition:background .15s ease;
}
.nav__phone:hover{ background:#24468c; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:clamp(540px, 52.5vw, 1009px);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:0;
}
.hero::before{   /* cream wash on the left, per PSD */
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(241,234,218,.94) 0%, rgba(241,234,218,.78) 26%, rgba(241,234,218,.28) 52%, rgba(241,234,218,0) 70%),
    linear-gradient(0deg, rgba(241,234,218,.55) 0%, rgba(241,234,218,0) 22%);
}
.hero__rosette{   /* coral watermark, right edge, per PSD */
  position:absolute; z-index:1;
  top:45.7%; transform:translateY(-50%);
  right:clamp(-30rem,-24.6vw,-8rem);
  width:clamp(300px, 41.4vw, 795px); aspect-ratio:1;
  background:var(--coral); opacity:.35;
  -webkit-mask:url("../img/rosette-b.svg") no-repeat center / contain;
  mask:url("../img/rosette-b.svg") no-repeat center / contain;
  pointer-events:none;
}
.hero__badge{
  position:absolute; z-index:3;
  top:clamp(1rem,2.4vw,2.75rem); left:var(--pad);
  width:clamp(110px, 11vw, 175px); aspect-ratio:1;
  background:var(--blue); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  /* % padding/gap on an abs-positioned box resolves against the hero's
     width, not the badge's — use the badge's own clamp scale instead */
  gap:clamp(7px, .66vw, 10.5px); padding:clamp(13px, 1.32vw, 21px);
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.hero__badge-script{
  width:100%; flex:0 0 auto; aspect-ratio:471.495/344.627;
  background:var(--sand);
  -webkit-mask:url("../img/logo.svg") no-repeat center / contain;
  mask:url("../img/logo.svg") no-repeat center / contain;
}
.hero__badge-tag{
  font-family:var(--sans); font-weight:900; text-transform:uppercase;
  color:var(--sand); text-align:center;
  font-size:clamp(.32rem, .45vw, .5rem); letter-spacing:.14em; line-height:1.6;
}
.hero__content{
  position:relative; z-index:3;
  padding:0 var(--pad) clamp(2rem, 5vw, 4.5rem);
  max-width:820px;
}
.hero__title{ line-height:1.04; letter-spacing:.01em; font-size:clamp(2.1rem, 4.9vw, 4.3rem); }
.hero__title .l1{ color:var(--blue); display:block; }
.hero__title .l2{ color:var(--coral); display:block; }
.hero__intro{
  margin:clamp(1rem,2.2vw,1.8rem) 0 0;
  max-width:34em;
  text-transform:uppercase; letter-spacing:.08em;
  font-weight:500; color:#23262b;
  font-size:clamp(.78rem, 1vw, .95rem); line-height:1.9;
}

/* ---------- Food gallery ---------- */
.gallery{ position:relative; padding:clamp(2.2rem,5vw,4.5rem) 0 clamp(1.5rem,3vw,3rem); overflow:hidden; }
.gallery::before{   /* soft coral rosette peeking from the left, per PSD */
  content:""; position:absolute; z-index:0;
  left:clamp(-9rem,-8vw,-4rem); bottom:-15%;
  width:clamp(260px, 26vw, 480px); aspect-ratio:1;
  background:var(--coral); opacity:.18;
  -webkit-mask:url("../img/rosette-a.svg") no-repeat center / contain;
  mask:url("../img/rosette-a.svg") no-repeat center / contain;
}
.carousel{ position:relative; z-index:1; overflow:hidden; }
.carousel__track{
  display:flex; width:max-content;
  animation:carousel-marquee var(--marquee-duration,240s) linear infinite;
}
.carousel:hover .carousel__track{ animation-play-state:paused; }
.carousel__group{
  display:flex; align-items:center;
  gap:clamp(.6rem,1.4vw,1.5rem); padding-right:clamp(.6rem,1.4vw,1.5rem);
}
.carousel__group img{
  height:clamp(180px, 26vw, 360px); width:auto; object-fit:cover;
  border-radius:6px; box-shadow:0 16px 30px -22px rgba(0,0,0,.45);
}
@keyframes carousel-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Menu band ---------- */
.menu-band{ position:relative; background:var(--coral); overflow:hidden; }
.menu-band::before{   /* cream rosette overlay, left */
  content:""; position:absolute;
  left:clamp(-7rem,-5vw,-3rem); top:50%; transform:translateY(-50%);
  width:clamp(240px, 22vw, 420px); aspect-ratio:1;
  background:var(--cream); opacity:.22;
  -webkit-mask:url("../img/rosette-a.svg") no-repeat center / contain;
  mask:url("../img/rosette-a.svg") no-repeat center / contain;
}
.menu-band__inner{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.6rem,3vw,2.6rem);
  flex-wrap:wrap;
}
.menu-band__text h2{ color:#fff; letter-spacing:.02em; font-size:clamp(1.5rem, 3vw, 2.7rem); }
.menu-band__text p{
  margin:.45rem 0 0; color:#fff;
  font-family:var(--sans); font-weight:900; text-transform:uppercase;
  font-size:clamp(.72rem,1vw,.9rem); letter-spacing:.1em;
}

/* ---------- Step inside ---------- */
.step{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center; gap:clamp(1.5rem,4vw,4.5rem);
  padding-block:clamp(2.5rem,5vw,5rem);
}
.step__img img{
  width:100%; height:auto; border-radius:8px;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.55);
}
.step__text h2{ color:var(--blue); line-height:1.06; font-size:clamp(1.8rem, 3.6vw, 3.4rem); }
.step__text p{
  margin:clamp(1rem,2vw,1.6rem) 0 clamp(1.4rem,2.6vw,2rem);
  max-width:30em;
  text-transform:uppercase; letter-spacing:.08em; line-height:1.9;
  color:#23262b; font-size:clamp(.78rem,1vw,.95rem);
}

/* ---------- Visit us ---------- */
.visit{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center; gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(2rem,4vw,4rem) clamp(3rem,6vw,6rem);
}
.visit__title{ line-height:1.06; margin-bottom:1.4rem; font-size:clamp(1.8rem, 3.8vw, 3.4rem); }
.visit__title .blue{ color:var(--blue); }
.visit__title .coral{ color:var(--coral); }
.visit__details{ font-style:normal; font-size:clamp(.9rem,1.1vw,1.1rem); }
.visit__details .line{ display:block; margin:.35rem 0; }
.visit__details a.line:hover{ color:var(--coral); }
.visit__details .strong{ font-weight:700; }
.social{ display:flex; gap:.9rem; margin-top:clamp(1.4rem,2.6vw,2.2rem); }
.social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--blue); color:var(--cream);
  transition:transform .15s ease, background .15s ease;
}
.social a:hover{ transform:translateY(-3px); background:var(--coral); }
.visit__map iframe{
  display:block; width:100%; aspect-ratio:4/3; border:0;
  border-radius:10px; box-shadow:0 24px 46px -28px rgba(0,0,0,.5);
}
.visit__map-link{
  display:inline-block; margin-top:.8rem;
  font-family:var(--sans); font-weight:900; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--blue);
}
.visit__map-link:hover{ color:var(--coral); }

/* ---------- Footer ---------- */
.footer{ position:relative; background:var(--blue); color:var(--cream); overflow:hidden; }
.footer__rosette{
  position:absolute; right:clamp(-8rem,-6vw,-3rem); top:50%; transform:translateY(-50%);
  width:clamp(260px, 24vw, 440px); aspect-ratio:1;
  background:var(--cream); opacity:.08;
  -webkit-mask:url("../img/rosette-b.svg") no-repeat center / contain;
  mask:url("../img/rosette-b.svg") no-repeat center / contain;
  pointer-events:none;
}
.footer__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  padding-block:clamp(2.2rem,4vw,3.5rem);
  text-align:center;
}
.footer__logo{ width:clamp(130px, 12vw, 180px); }
.footer__recap{
  margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .9rem;
  font-size:clamp(.85rem,1vw,1rem);
}
.footer__recap a:hover{ color:#fff; text-decoration:underline; }
.footer__phones{ margin-top:-.5rem; font-weight:700; }
.footer__whatsapp{
  display:inline-flex; align-items:center; gap:.55rem;
  background:#25d366; color:#fff; font-weight:700;
  padding:.6rem 1.4rem; border-radius:999px;
  font-size:clamp(.85rem,1vw,1rem);
  transition:transform .15s ease, background .15s ease;
}
.footer__whatsapp:hover{ transform:translateY(-2px); background:#1ebe5d; color:#fff; }
.social--footer a{ background:rgba(241,234,218,.12); color:var(--cream); width:40px; height:40px; }
.social--footer a:hover{ background:var(--coral); }
.footer__copy{ margin:.4rem 0 0; opacity:.75; font-size:.78rem; letter-spacing:.03em; }

/* ============ Tablet (≤1024px) ============ */
@media (max-width:1024px){
  .step{ grid-template-columns:1fr; }
  .step__img{ order:-1; }
  .step__text p{ max-width:none; }
  .visit{ grid-template-columns:1fr; }
  .visit__map{ order:-1; }
  .hero__rosette{ opacity:.25; }
}

/* ============ Mobile (≤640px) ============ */
@media (max-width:640px){
  html{ scroll-padding-top:7.75rem; }  /* two-row nav is taller */
  .nav__inner{ flex-wrap:wrap; padding-block:.6rem; row-gap:0; }
  .nav__links{
    order:3; width:100%; margin-left:0;
    justify-content:space-between;
  }
  .nav__links a{ padding:.35rem 0 .55rem; }
  .nav__phone{ margin-left:auto; }
  .hero{ min-height:78vh; }
  .hero::before{
    background:
      linear-gradient(0deg, rgba(241,234,218,.96) 6%, rgba(241,234,218,.62) 36%, rgba(241,234,218,.15) 66%, rgba(241,234,218,0) 88%);
  }
  .hero__content{ max-width:none; }
  .hero__rosette{ display:none; }
  .menu-band__inner{ flex-direction:column; align-items:flex-start; }
  .visit__map iframe{ aspect-ratio:auto; height:300px; }
}

/* ============ Small phones (≤380px) ============ */
@media (max-width:380px){
  .nav__phone{ font-size:.72rem; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; }
  .carousel{ overflow-x:auto; }
  .carousel__track{ animation:none; width:auto; }
  .carousel__group[aria-hidden="true"]{ display:none; }
}