/* ==========================================================================
   LUXE & LATTE — Stylesheet
   Design system: warm espresso darks + ivory cream, editorial serif display,
   "coffee ticket" motif (mono numerals, stamped circles, dotted tear-lines)
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* colour */
  --espresso:       #2A1B12;
  --espresso-90:     rgba(42,27,18,.92);
  --espresso-60:     rgba(42,27,18,.62);
  --espresso-20:     rgba(42,27,18,.18);
  --espresso-10:     rgba(42,27,18,.09);
  --cream:           #F3ECDF;
  --cream-soft:      #FAF6EE;
  --caramel:         #B27C46;
  --terracotta:      #A24E2A;
  --terracotta-dark: #7E3B1E;
  --sage:            #77816A;
  --gold:            #BF9A3F;
  --line:            rgba(42,27,18,.14);
  --line-light:      rgba(243,236,223,.24);

  /* type */
  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body:    'Manrope', -apple-system, sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* layout */
  --container-w: 1240px;
  --edge: clamp(20px, 5vw, 64px);
  --radius-s: 6px;
  --radius-m: 14px;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
.container{ max-width: var(--container-w); margin:0 auto; padding:0 var(--edge); }
.container--narrow{ max-width: 760px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

/* ---------- Shared text styles ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity:.85;
}
.eyebrow--dark{ color: var(--terracotta); opacity:1; }

.ticket-num{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing:.08em;
  color: var(--espresso-60);
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--line);
  position: relative;
}
.ticket-num--dark{ color: rgba(243,236,223,.55); border-bottom-color: var(--line-light); }
.ticket-num--center{ display:flex; justify-content:center; border-bottom:none; margin-bottom: 34px; }

.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head--center{ max-width: 640px; margin-left:auto; margin-right:auto; text-align:center; }
.section-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.section-title--light{ color: var(--cream-soft); }
.section-title em, .hero__title em{ font-style: italic; font-weight: 400; color: var(--terracotta); }

.text-link{
  display:inline-flex;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing:.04em;
  color: var(--terracotta-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  width: max-content;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.text-link:hover{ opacity:.65; transform: translateX(3px); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 15px 30px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing:.01em;
  border-radius: 999px;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
.btn--primary{
  background: var(--terracotta);
  color: var(--cream-soft);
  box-shadow: 0 8px 24px -8px rgba(162,78,42,.55);
}
.btn--primary:hover{ background: var(--terracotta-dark); transform: translateY(-2px); }

.btn--outline{
  border: 1.4px solid var(--cream-soft);
  color: var(--cream-soft);
}
.btn--outline:hover{ background: var(--cream-soft); color: var(--espresso); transform: translateY(-2px); }
.btn--outline-light{ border-color: var(--espresso-20); color: var(--espresso); }
.btn--outline-light:hover{ background: var(--espresso); color: var(--cream-soft); border-color: var(--espresso); }

.btn--ghost-nav{
  border: 1.4px solid currentColor;
  padding: 10px 22px;
  font-size: 13px;
}

.link-btn{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing:.03em;
  color: var(--terracotta-dark);
  transition: opacity .2s var(--ease);
}
.link-btn:hover{ opacity:.6; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader{
  position: fixed; inset:0; z-index:200;
  background: var(--espresso);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.is-hidden{ opacity:0; visibility:hidden; }
.preloader__mark{ position:relative; width:86px; height:86px; display:flex; align-items:center; justify-content:center; }
.preloader__ring{ position:absolute; inset:0; width:100%; height:100%; transform: rotate(-90deg); }
.preloader__ring circle{
  fill:none; stroke: var(--terracotta); stroke-width:2.5;
  stroke-dasharray: 264; stroke-dashoffset: 264;
  animation: ringDraw 1.1s var(--ease) forwards;
}
@keyframes ringDraw{ to{ stroke-dashoffset: 0; } }
.preloader__letter{
  font-family: var(--font-display); font-style:italic; font-weight:500;
  color: var(--cream); font-size: 20px; letter-spacing:.02em;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index:100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding: 22px 0;
}
.nav.is-scrolled{
  background: rgba(243,236,223,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: 12px 0;
}
.nav__inner{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--edge);
  display:flex; align-items:center; justify-content:space-between;
  color: var(--cream-soft);
  transition: color .4s var(--ease);
}
.nav.is-scrolled .nav__inner{ color: var(--espresso); }

.nav__logo{ display:flex; align-items:center; gap:10px; }
.nav__bean{ width:22px; height:22px; color: var(--terracotta); flex-shrink:0; }
.nav__bean svg{ width:100%; height:100%; fill: currentColor; }
.nav__word{ font-family: var(--font-display); font-weight:500; font-size:17px; letter-spacing:.03em; }
.nav__word em{ font-style:italic; color: var(--terracotta); font-weight:400; margin:0 2px; }

.nav__links{ display:flex; gap: 34px; }
.nav__link{
  font-size: 14px; font-weight:500; position:relative; padding: 4px 0;
}
.nav__link::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background: currentColor;
  transition: right .3s var(--ease);
}
.nav__link:hover::after{ right:0; }

.nav__actions{ display:flex; align-items:center; gap: 22px; }

.nav__burger{
  display:none; flex-direction:column; gap:5px; width:26px; padding:4px;
}
.nav__burger span{ width:100%; height:1.6px; background: currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav__burger.is-open span:nth-child(1){ transform: translateY(6.6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform: translateY(-6.6px) rotate(-45deg); }

.mobile-menu{
  position:absolute; top:100%; left:0; right:0;
  background: var(--espresso);
  color: var(--cream-soft);
  display:flex; flex-direction:column;
  max-height:0; overflow:hidden;
  transition: max-height .5s var(--ease);
}
.mobile-menu.is-open{ max-height: 420px; }
.mobile-menu__link{
  padding: 16px var(--edge); font-family: var(--font-display); font-size:20px; border-bottom:1px solid var(--line-light);
}
.mobile-menu__cta{ margin: 20px var(--edge); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center;
  overflow:hidden;
  color: var(--cream-soft);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__img{ width:100%; height:100%; object-fit:cover; transform: scale(1.06); animation: heroZoom 10s var(--ease) forwards; }
@keyframes heroZoom{ to{ transform: scale(1); } }
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(24,15,10,.55) 0%, rgba(24,15,10,.42) 40%, rgba(24,15,10,.82) 100%);
}

.hero__bean{
  position:absolute; z-index:1; border-radius:50%;
  border: 1px solid rgba(243,236,223,.28);
  opacity:.6;
}
.hero__bean--a{ width:120px; height:120px; top:18%; right:8%; animation: floatY 7s ease-in-out infinite; }
.hero__bean--b{ width:44px; height:44px; top:65%; right:20%; border-color: rgba(191,154,63,.5); animation: floatY 6s ease-in-out infinite .8s; }
.hero__bean--c{ width:70px; height:70px; bottom:14%; left:9%; animation: floatY 8s ease-in-out infinite .3s; }
@keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-18px); } }

.hero__content{ position:relative; z-index:2; max-width: 760px; padding: 0 var(--edge); margin-top: 40px; }
.hero__title{
  font-family: var(--font-display);
  font-weight:500;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.015em;
  margin: 18px 0 24px;
}
.hero__title span{ display:block; }
.hero__sub{
  max-width: 480px;
  font-size: 17px;
  color: rgba(243,236,223,.86);
  margin-bottom: 38px;
}
.hero__actions{ display:flex; gap:18px; flex-wrap:wrap; }

.hero__badge{
  position:absolute; z-index:2; right: var(--edge); bottom: 54px;
  display:flex; align-items:center; gap:14px;
}
.hero__badge-stamp{ width:78px; height:78px; }
.hero__badge-stamp svg{ width:100%; height:100%; animation: spinSlow 22s linear infinite; }
.hero__badge-stamp text{ font-family: var(--font-mono); font-size:6.6px; letter-spacing:.06em; fill: rgba(243,236,223,.75); }
@keyframes spinSlow{ to{ transform: rotate(360deg); } }
.hero__badge-num{ font-family: var(--font-mono); font-size:12px; color: rgba(243,236,223,.8); }

.hero__scroll{
  position:absolute; left: var(--edge); bottom: 44px; z-index:2;
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(243,236,223,.7);
}
.hero__scroll-line{ width:1px; height:34px; background: rgba(243,236,223,.5); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--cream-soft);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
.hero__scroll-text{ writing-mode: vertical-rl; }

/* entrance reveal */
.reveal-up{ opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-up.is-visible{ opacity:1; transform: translateY(0); }
.hero .reveal-up[data-delay="0"].is-visible{ transition-delay:.1s; }
.hero .reveal-up[data-delay="1"].is-visible{ transition-delay:.22s; }
.hero .reveal-up[data-delay="2"].is-visible{ transition-delay:.34s; }
.hero .reveal-up[data-delay="3"].is-visible{ transition-delay:.46s; }
.hero .reveal-up[data-delay="4"].is-visible{ transition-delay:.58s; }

/* ==========================================================================
   SIGNATURE / FEATURED
   ========================================================================== */
.signature{ padding: 130px 0 110px; background: var(--cream); }
.signature__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.signature__item{ display:flex; flex-direction:column; }
.signature__item--tall{ transform: translateY(-46px); }
.signature__media{
  aspect-ratio: 3/4; overflow:hidden; border-radius: var(--radius-m); margin-bottom:22px;
  position:relative;
}
.signature__media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.signature__item:hover .signature__media img{ transform: scale(1.08); }
.signature__info h3{
  font-family: var(--font-display); font-weight:500; font-size:1.5rem; margin-bottom:8px;
}
.signature__info p{ color: var(--espresso-60); font-size:14.5px; max-width: 30ch; margin-bottom:18px; }
.signature__row{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px dashed var(--line); }
.price{ font-family: var(--font-mono); font-size:15px; color: var(--terracotta-dark); }

/* ==========================================================================
   STORY (editorial split)
   ========================================================================== */
.story{
  display:grid; grid-template-columns: 1.1fr .9fr;
  background: var(--espresso); color: var(--cream-soft);
  min-height: 640px;
}
.story__media{ position:relative; overflow:hidden; }
.story__media img{ width:100%; height:100%; object-fit:cover; min-height: 340px; }
.story__content{
  display:flex; flex-direction:column; justify-content:center;
  padding: 80px var(--edge);
  max-width: 560px;
}
.story__title{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin: 16px 0 22px; line-height:1.12;
}
.story__text{ color: rgba(243,236,223,.78); font-size:15.5px; margin-bottom:26px; max-width:42ch; }

/* ==========================================================================
   COLLAGE
   ========================================================================== */
.collage{ padding: 130px 0; background: var(--cream); }
.collage__grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 200px 200px;
  gap: 18px;
}
.collage__cell{ position:relative; overflow:hidden; border-radius: var(--radius-m); margin:0; }
.collage__cell img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.collage__cell:hover img{ transform: scale(1.06); }
.collage__cell--1{ grid-column: 1 / 4; grid-row: 1 / 3; }
.collage__cell--2{ grid-column: 4 / 6; grid-row: 1 / 2; }
.collage__cell--3{ grid-column: 6 / 7; grid-row: 1 / 3; }
.collage__cell--4{ grid-column: 4 / 5; grid-row: 2 / 3; }
.collage__cell--5{ grid-column: 5 / 6; grid-row: 2 / 3; }
.collage__tag{
  position:absolute; left:14px; bottom:14px;
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--espresso); background: var(--cream-soft);
  padding: 7px 12px; border-radius: 999px;
}

/* ==========================================================================
   MENU
   ========================================================================== */
.menu{ padding: 130px 0; background: var(--espresso); color: var(--cream-soft); }
.menu__filters{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 50px;
}
.menu__filter{
  font-family: var(--font-mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  padding: 10px 20px; border-radius:999px; border:1px solid var(--line-light);
  color: rgba(243,236,223,.7);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.menu__filter.is-active, .menu__filter:hover{ background: var(--terracotta); color: var(--cream-soft); border-color: var(--terracotta); }

.menu__list{
  display:grid; grid-template-columns: 1fr 1fr; gap: 0 60px;
}
.menu__list li{
  display:flex; justify-content:space-between; gap: 18px;
  padding: 20px 0;
  border-bottom: 1px dashed var(--line-light);
  opacity:0; transform: translateY(10px);
  animation: menuIn .5s var(--ease) forwards;
}
@keyframes menuIn{ to{ opacity:1; transform:translateY(0); } }
.menu__item-name{ font-family: var(--font-display); font-size:1.15rem; font-weight:500; margin-bottom:4px; }
.menu__item-desc{ font-size:13.5px; color: rgba(243,236,223,.6); max-width: 34ch; }
.menu__item-price{ font-family: var(--font-mono); font-size:14px; color: var(--gold); white-space:nowrap; padding-top:4px; }
.menu__cta{ text-align:center; margin-top: 54px; }

/* ==========================================================================
   EXPERIENCE
   ========================================================================== */
.experience{ padding: 130px 0; background: var(--cream); }
.experience__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.experience__item{ position:relative; }
.experience__media{ aspect-ratio: 4/5; border-radius: var(--radius-m); overflow:hidden; margin-bottom:20px; position:relative; }
.experience__media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease), filter .5s var(--ease); filter: grayscale(.25) brightness(.94); }
.experience__item:hover .experience__media img{ transform: scale(1.07); filter: grayscale(0) brightness(1); }
.experience__num{
  font-family: var(--font-mono); font-size:12px; color: var(--terracotta-dark);
}
.experience__item h3{ font-family: var(--font-display); font-weight:500; font-size:1.5rem; margin: 8px 0 8px; }
.experience__item p{ color: var(--espresso-60); font-size:14.5px; max-width:28ch; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials{ padding: 130px 0; background: var(--cream); text-align:center; }
.testimonial-slider{ position:relative; min-height: 170px; }
.testimonial{
  position:absolute; inset:0;
  opacity:0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.testimonial.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }
.testimonial__quote{
  font-family: var(--font-display); font-style:italic; font-weight:400;
  font-size: clamp(1.4rem, 3vw, 2.05rem); line-height:1.32; color: var(--espresso);
}
.testimonial__author{ margin-top:20px; font-family: var(--font-mono); font-size:13px; color: var(--terracotta-dark); }
.testimonial-controls{ display:flex; align-items:center; justify-content:center; gap: 26px; margin-top: 40px; }
.testimonial-arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.testimonial-arrow:hover{ background: var(--espresso); color: var(--cream-soft); border-color: var(--espresso); }
.testimonial-dots{ display:flex; gap:8px; }
.testimonial-dots button{
  width:7px; height:7px; border-radius:50%; background: var(--espresso-20);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.testimonial-dots button.is-active{ background: var(--terracotta); transform: scale(1.3); }

/* ==========================================================================
   VISIT / LOCATION
   ========================================================================== */
.visit{ padding: 130px 0; background: var(--espresso); color: var(--cream-soft); }
.visit__grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items:center; }
.visit__block{ margin-bottom: 30px; }
.visit__block h3{
  font-family: var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold);
  margin-bottom:10px;
}
.visit__block p{ font-size:15.5px; line-height:1.6; color: rgba(243,236,223,.85); }
.visit__map{ border-radius: var(--radius-m); overflow:hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.map-svg{ width:100%; height:auto; display:block; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{ position:relative; min-height: 70vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.final-cta__media{ position:absolute; inset:0; }
.final-cta__media img{ width:100%; height:100%; object-fit:cover; }
.final-cta__overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(24,15,10,.7), rgba(24,15,10,.86)); }
.final-cta__content{ position:relative; z-index:1; color: var(--cream-soft); max-width:640px; padding: 0 var(--edge); }
.final-cta__content h2{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(2rem, 5vw, 3.2rem); line-height:1.1; margin-bottom:20px;
}
.final-cta__content p{ font-size:16px; color: rgba(243,236,223,.82); margin-bottom: 34px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background: #1E130D; color: var(--cream-soft); padding-top: 90px; }
.footer__grid{
  display:grid; grid-template-columns: 1.4fr .8fr .8fr 1.2fr; gap: 50px;
  padding-bottom: 60px; border-bottom: 1px solid var(--line-light);
}
.footer__logo{ margin-bottom: 18px; }
.footer__desc{ font-size:14px; color: rgba(243,236,223,.6); max-width: 32ch; margin-bottom: 22px; }
.footer__social{ display:flex; gap:18px; font-size:13.5px; }
.footer__social a{ color: rgba(243,236,223,.8); transition: color .2s var(--ease); }
.footer__social a:hover{ color: var(--terracotta); }
.footer__col h4{ font-family: var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--gold); margin-bottom: 18px; }
.footer__col a{ display:block; font-size:14px; color: rgba(243,236,223,.75); margin-bottom:12px; transition: color .2s var(--ease); }
.footer__col a:hover{ color: var(--cream-soft); }
.footer__addr{ font-size:14px; color: rgba(243,236,223,.75); margin-top:6px; }
.footer__newsletter p{ font-size:13.5px; color: rgba(243,236,223,.6); margin-bottom:16px; }
.footer__input-row{ display:flex; border-bottom: 1px solid var(--line-light); padding-bottom:10px; }
.footer__input-row input{
  flex:1; background:none; border:none; color: var(--cream-soft); font-family: var(--font-body); font-size:14px; padding: 6px 0;
}
.footer__input-row input::placeholder{ color: rgba(243,236,223,.4); }
.footer__input-row button{ font-size:16px; color: var(--terracotta); transition: transform .25s var(--ease); }
.footer__input-row button:hover{ transform: translateX(4px); }
.footer__form-msg{ font-size:12.5px; margin-top:10px; min-height:16px; color: var(--sage); }
.footer__form-msg.is-error{ color: var(--terracotta); }
.footer__bottom{ text-align:center; padding: 26px var(--edge); font-size:12.5px; color: rgba(243,236,223,.45); }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.back-to-top{
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  width: 46px; height:46px; border-radius:50%;
  background: var(--espresso); color: var(--cream-soft);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.5);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--terracotta); }

/* ==========================================================================
   SCROLL REVEAL (generic sections)
   ========================================================================== */
.signature__item, .experience__item, .collage__cell{
  opacity:0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.signature__item.is-visible, .experience__item.is-visible, .collage__cell.is-visible{ opacity:1; transform: translateY(0); }
.story__media.reveal-up, .story__content .reveal-up{ transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .story{ grid-template-columns: 1fr; }
  .story__media img{ min-height: 380px; }
  .visit__grid{ grid-template-columns: 1fr; }
  .collage__grid{ grid-template-columns: repeat(4, 1fr); grid-template-rows: 180px 180px 180px; }
  .collage__cell--1{ grid-column: 1/3; grid-row: 1/2; }
  .collage__cell--2{ grid-column: 3/5; grid-row: 1/2; }
  .collage__cell--3{ grid-column: 1/2; grid-row: 2/4; }
  .collage__cell--4{ grid-column: 2/4; grid-row: 2/3; }
  .collage__cell--5{ grid-column: 2/4; grid-row: 3/4; }
}

@media (max-width: 900px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .btn--ghost-nav{ display:none; }

  .signature__grid{ grid-template-columns: 1fr; gap: 46px; }
  .signature__item--tall{ transform:none; }

  .menu__list{ grid-template-columns: 1fr; gap:0; }

  .experience__grid{ grid-template-columns: 1fr; gap: 40px; }

  .visit__grid{ gap: 40px; }

  .footer__grid{ grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 640px){
  .hero__badge{ display:none; }
  .hero__scroll{ display:none; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ text-align:center; }

  .collage__grid{ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 160px); }
  .collage__cell--1{ grid-column:1/3; grid-row:1/2; }
  .collage__cell--2{ grid-column:1/2; grid-row:2/3; }
  .collage__cell--3{ grid-column:2/3; grid-row:2/3; }
  .collage__cell--4{ grid-column:1/2; grid-row:3/4; }
  .collage__cell--5{ grid-column:2/3; grid-row:3/4; }

  .menu__filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; }
  .menu__filters::-webkit-scrollbar{ display:none; }

  .footer__grid{ grid-template-columns: 1fr; }
  .section-head{ margin-bottom: 40px; }
}