/* ==========================================================================
   Oculus Optiek — stylesheet
   ========================================================================== */

:root{
  --cream: #f7f4ef;
  --cream-2: #efe8de;
  --dark: #17171a;
  --dark-2: #232327;
  --gold: #b08d57;
  --line: rgba(23,23,26,0.1);

  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Jost', sans-serif;

  --container: 1760px;
  --pad: clamp(24px, 5vw, 80px);

  --ease: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:auto; }

body{
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--dark);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4,h5{
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

h2{ font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
h3{ font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
h4{ font-size: 1.15rem; font-family: var(--font-sans); font-weight:500; letter-spacing:.02em; }

p{ color: rgba(23,23,26,0.65); }

ul{ list-style:none; }

button{ font-family: inherit; cursor:pointer; border:none; background:none; }

::selection{ background: var(--dark); color: var(--cream); }

/* ==========================================================================
   Utility / layout
   ========================================================================== */

.section-head{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.section-head__eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 16px;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.section-head__eyebrow::before,
.section-head__eyebrow::after{
  content:'';
  display:block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.section-head__title{ margin:0; }
.section-head--light .section-head__eyebrow{ color: var(--gold); }
.section-head--light .section-head__title{ color: var(--cream); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 16px 36px;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
  white-space: nowrap;
}
.btn--solid{
  background: var(--dark);
  color: var(--cream);
  border-color: var(--dark);
}
.btn--solid:hover{ background: var(--gold); border-color: var(--gold); color: var(--dark); transform: translateY(-2px); }

.btn--outline{
  background: transparent;
  color: var(--dark);
  border-color: var(--dark);
}
.btn--outline:hover{ background: var(--dark); color: var(--cream); transform: translateY(-2px); }

.btn--text{
  border-color: transparent;
  padding: 16px 8px;
  color: var(--dark);
}
.btn--text:hover{ color: var(--gold); }

.btn--ghost{
  border-color: rgba(255,255,255,0.6);
  color: #fff;
  background: transparent;
}

/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader{
  position: fixed; inset: 0;
  background: var(--cream);
  display:flex; align-items:center; justify-content:center;
  z-index: 9999;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader__logo{ width: 220px; opacity:0; transform: scale(.92); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.preloader.is-loaded .preloader__logo{ opacity:1; transform: scale(1); }
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar{
  background: var(--dark);
  color: rgba(247,244,239,0.7);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}
.topbar__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px var(--pad);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
}
.topbar__info, .topbar__hours, .topbar__social{
  display:flex; align-items:center; gap:12px;
}
.topbar a:hover{ color: var(--gold); }
.topbar__sep{ width:1px; height:12px; background: rgba(247,244,239,0.25); display:inline-block; }
.topbar__social{ gap: 16px; }
.topbar__social a{ display:flex; align-items:center; transition: color .3s var(--ease); }
.topbar__social svg{ width: 16px; height: 16px; display:block; }

@media (max-width: 860px){
  .topbar__hours{ display:none; }
}
@media (max-width: 560px){
  .topbar__social{ display:none; }
  .topbar__inner{ justify-content:center; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position: sticky;
  top:0;
  z-index: 100;
  width: 100%;
  background: transparent;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.header__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 26px var(--pad);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 32px;
  transition: padding .4s var(--ease);
}
.header__logo img{
  height: 34px;
  width: auto;
  transition: filter .4s var(--ease);
}

.nav{
  display:flex;
  gap: 36px;
  align-items:center;
}
.nav__link{
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 6px;
}
.nav__link::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background: currentColor;
  transition: width .4s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after{ width:100%; }

.header__actions{
  display:flex;
  align-items:center;
  gap: 20px;
}

.header.is-scrolled{
  background: rgba(247,244,239,0.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.header.is-scrolled .header__inner{ padding: 16px var(--pad); }

/* Burger */
.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width: 30px; height: 22px;
}
.burger span{
  display:block;
  height:1px;
  width:100%;
  background: var(--dark);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
  transform-origin: center;
}
.burger.is-open{ position: relative; z-index: 101; }
.burger.is-open span{ background: var(--cream); }
.burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px){
  .nav{ display:none; }
  .header__actions .btn{ display:none; }
  .burger{ display:flex; }
}

/* Mobile nav */
.mobile-nav{
  position: fixed;
  inset: 0;
  background: var(--dark);
  color: var(--cream);
  z-index: 99;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .45s var(--ease), visibility .45s var(--ease), transform .45s var(--ease);
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform: translateY(0); }
.mobile-nav nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 28px;
}
.mobile-nav .nav__link{
  font-size: 1.6rem;
  font-family: var(--font-serif);
  letter-spacing: 0.05em;
  text-transform: none;
}
.mobile-nav .btn{ margin-top: 16px; border-color: var(--cream); color: var(--cream); }

body.menu-open{ overflow:hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: var(--dark);
}
.hero__media{
  position:absolute;
  inset:0;
  display:flex;
}
.hero__img{
  position:relative;
  flex: 1;
  overflow:hidden;
}
.hero__img img{
  position:absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
}
.hero__img--a img{ object-position: 85% center; }
.hero__img::after{
  content:'';
  position:absolute; inset:0;
  background: rgba(15,15,17,0.55);
}
.hero__img--a::after{ background: rgba(15,15,17,0.4); }
.hero__img--b::after{ background: rgba(15,15,17,0.55); }

.hero__content{
  position: relative;
  z-index: 2;
  text-align:center;
  color: var(--cream);
  max-width: 920px;
  padding: 0 var(--pad);
}
.hero__eyebrow{
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: rgba(247,244,239,0.85);
}
.hero__title{
  font-size: clamp(3.5rem, 11vw, 8.5rem);
  text-transform: uppercase;
  margin: 0 0 28px;
}
.hero__title span.reveal-line{ display:block; overflow:hidden; }
.hero__title--accent{ font-style: italic; color: var(--gold); }
.hero__subtitle{
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: rgba(247,244,239,0.78);
  max-width: 620px;
  margin: 0 auto 40px;
  font-weight: 300;
}
.hero__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 24px;
  flex-wrap: wrap;
}
.hero .btn--solid{ background: var(--cream); color: var(--dark); border-color: var(--cream); }
.hero .btn--solid:hover{ background: var(--gold); border-color:var(--gold); color: var(--dark); }
.hero .btn--text{ color: var(--cream); }
.hero .btn--text:hover{ color: var(--gold); }

@media (max-width: 760px){
  .hero__media{ flex-direction: column; }
}

/* ==========================================================================
   Statement
   ========================================================================== */
.statement{
  padding: clamp(100px, 14vw, 180px) var(--pad);
  text-align:center;
}
.statement__text{
  max-width: 980px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.45;
  color: var(--dark);
}
.statement__text .word{
  display:inline-block;
  opacity: 0.18;
}

/* ==========================================================================
   Services
   ========================================================================== */
.services{
  padding: clamp(90px, 12vw, 150px) 0;
  background: var(--cream-2);
  border-top: 1px solid var(--line);
}
.services__grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.service-card{
  display:flex;
  flex-direction:column;
}
.service-card__media{
  position:relative;
  overflow:hidden;
  border-radius: 4px;
  aspect-ratio: 4/5;
  margin-bottom: 28px;
}
.service-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.06);
  transition: transform 1s var(--ease);
}
.service-card:hover .service-card__media img{ transform: scale(1.14); }
.service-card h3{ margin-bottom: 12px; }

@media (max-width: 900px){
  .services__grid{ grid-template-columns: 1fr; gap: 56px; }
}

/* ==========================================================================
   Story
   ========================================================================== */
.story{
  padding: clamp(90px, 12vw, 150px) 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.story__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items:center;
}
.story__media{
  position: relative;
  height: clamp(420px, 55vw, 620px);
}
.story__img{ overflow:hidden; border-radius: 4px; }
.story__img img{ width:100%; height:100%; object-fit:cover; }
.story__img--main{
  position:absolute;
  top:0; left:0;
  width: 78%; height: 82%;
}
.story__img--small{
  position:absolute;
  bottom:0; right:0;
  width: 52%; height: 50%;
  border: 8px solid var(--cream);
  box-shadow: 0 30px 60px -20px rgba(23,23,26,0.35);
}

.story__content h2{ margin: 6px 0 22px; }
.story__content > p{ margin-bottom: 36px; max-width: 480px; }

.story__list{ display:flex; flex-direction:column; gap: 28px; margin-bottom: 40px; }
.story__list li{ display:flex; gap: 20px; align-items:flex-start; }
.story__list-icon{
  flex-shrink:0;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--gold);
  font-size: 1.1rem;
}
.story__list h4{ margin-bottom: 6px; }
.story__list p{ font-size: 0.95rem; }

@media (max-width: 900px){
  .story__inner{ grid-template-columns: 1fr; }
  .story__media{ height: 70vw; max-height: 480px; order: -1; }
}

/* ==========================================================================
   Split banner
   ========================================================================== */
.split-banner{
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.split-banner__col{
  position: relative;
  height: clamp(360px, 55vw, 560px);
  overflow:hidden;
  display:block;
  color: #fff;
}
.split-banner__col img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.05);
  transition: transform 1.2s var(--ease);
  filter: grayscale(15%);
}
.split-banner__col::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,15,17,0.1) 0%, rgba(15,15,17,0.75) 100%);
  transition: background .5s var(--ease);
  z-index:1;
}
.split-banner__col:hover img{ transform: scale(1.12); }
.split-banner__col:hover::before{ background: linear-gradient(180deg, rgba(176,141,87,0.15) 0%, rgba(15,15,17,0.8) 100%); }

.split-banner__overlay{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding: clamp(28px, 5vw, 60px);
  gap: 14px;
}
.split-banner__overlay h3{ color:#fff; }
.split-banner__overlay p{ color: rgba(255,255,255,0.78); margin-bottom: 6px; }

@media (max-width: 760px){
  .split-banner{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery{
  background: var(--dark);
  padding: clamp(90px, 12vw, 150px) 0;
}
.gallery .section-head{
  margin-bottom: clamp(50px, 7vw, 90px);
}
.gallery__grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.gallery__item{
  overflow:hidden;
  border-radius: 4px;
  aspect-ratio: 3/4;
}
.gallery__item:nth-child(2),
.gallery__item:nth-child(4){
  margin-top: 40px;
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.08);
  transition: transform 1s var(--ease), filter 1s var(--ease);
  filter: grayscale(35%);
}
.gallery__item:hover img{ transform: scale(1.18); filter: grayscale(0%); }

@media (max-width: 980px){
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery__item:nth-child(2), .gallery__item:nth-child(4){ margin-top:0; }
  .gallery__item:nth-child(5){ display:none; }
}

/* ==========================================================================
   Brands marquee
   ========================================================================== */
.brands{
  padding: clamp(90px, 12vw, 150px) 0;
  overflow:hidden;
  background: var(--cream-2);
  border-top: 1px solid var(--line);
}
.marquee{
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex;
  align-items:center;
  gap: clamp(60px, 8vw, 120px);
  width: max-content;
  animation: marquee 36s linear infinite;
  padding: 0 60px;
}
.marquee__track img{
  height: 34px;
  width: auto;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(100%);
  transition: opacity .4s var(--ease), filter .4s var(--ease);
}
.marquee__track img:hover{ opacity:1; filter:grayscale(0%); }

@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */
.faq{
  padding: clamp(90px, 12vw, 150px) 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.accordion{
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.accordion__item{
  border-bottom: 1px solid var(--line);
}
.accordion__head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  padding: 28px 0;
  text-align:left;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}
.accordion__icon{
  position:relative;
  width: 20px; height:20px;
  flex-shrink:0;
}
.accordion__icon::before,
.accordion__icon::after{
  content:'';
  position:absolute;
  top:50%; left:0;
  width:100%; height:1px;
  background: var(--dark);
  transform: translateY(-50%);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.accordion__icon::after{ transform: translateY(-50%) rotate(90deg); }
.accordion__item.is-open .accordion__icon::after,
.booking-service.is-open .accordion__icon::after{ transform: translateY(-50%) rotate(0deg); opacity:0; }

.accordion__body{
  height:0;
  overflow:hidden;
  transition: height .45s var(--ease);
}
.accordion__body p{ padding-bottom: 28px; max-width: 640px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{
  padding: clamp(90px, 12vw, 150px) 0 clamp(100px, 12vw, 160px);
  background: var(--cream-2);
  border-top: 1px solid var(--line);
}
.contact__grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items:center;
}
.contact__info > p{ max-width: 480px; margin-bottom: 40px; }
.contact__details{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 44px;
}
.contact__details h4{ margin-bottom: 10px; }
.contact__details p{ font-size: 0.95rem; }
.contact__details a:hover{ color: var(--gold); }

.contact__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
}

.contact__map{
  height: clamp(360px, 50vw, 560px);
  border-radius: 4px;
  overflow:hidden;
  filter: grayscale(35%) contrast(1.05);
}
.contact__map iframe{ width:100%; height:100%; border:0; }

@media (max-width: 900px){
  .contact__grid{ grid-template-columns: 1fr; }
  .contact__map{ order:-1; }
}
@media (max-width: 560px){
  .contact__details{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  background: var(--dark);
  color: rgba(247,244,239,0.65);
}
.footer__top{
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(70px, 9vw, 110px) var(--pad) clamp(50px, 7vw, 80px);
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 50px;
}
.footer__logo{ height: 30px; width:auto; filter: invert(1) brightness(2); margin-bottom: 18px; }
.footer__brand p{ color: rgba(247,244,239,0.55); max-width: 280px; font-size: 0.95rem; }

.footer__col h5{
  color: var(--cream);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  margin-bottom: 22px;
}
.footer__col a, .footer__col p{
  display:block;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: rgba(247,244,239,0.6);
}
.footer__col a:hover{ color: var(--gold); }

.footer__bottom{
  border-top: 1px solid rgba(247,244,239,0.1);
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px calc(var(--pad) + 90px) 28px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  font-size: 0.8rem;
  flex-wrap: wrap;
}
.footer__social{ display:flex; gap: 24px; letter-spacing: 0.15em; text-transform:uppercase; font-size: 0.75rem; }
.footer__social a:hover{ color: var(--gold); }
.footer__bottom p{ color: rgba(247,244,239,0.55); margin: 0; }

@media (max-width: 900px){
  .footer__top{ grid-template-columns: 1fr 1fr; }
  .footer__brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .footer__top{ grid-template-columns: 1fr; }
  .footer__bottom{ justify-content:center; text-align:center; padding: 28px var(--pad) 90px; }
}

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top{
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.1rem;
  z-index: 60;
  opacity:0;
  transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
  pointer-events:none;
}
.back-to-top.is-visible{ opacity:1; transform: translateY(0); pointer-events:auto; }
.back-to-top:hover{ background: var(--gold); color: var(--dark); }

/* ==========================================================================
   Booking page header (always solid, no dark hero behind it)
   ========================================================================== */
body.page-booking .header{
  background: rgba(247,244,239,0.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

/* ==========================================================================
   Booking hero
   ========================================================================== */
.booking-hero{
  position: relative;
  padding: clamp(150px, 18vw, 230px) var(--pad) clamp(60px, 8vw, 90px);
  text-align:center;
  overflow:hidden;
  background: var(--dark);
}
.booking-hero__media{ position:absolute; inset:0; }
.booking-hero__media img{ width:100%; height:100%; object-fit:cover; }
.booking-hero__media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,15,17,0.6) 0%, rgba(15,15,17,0.7) 100%);
}
.booking-hero__inner{ position:relative; z-index:1; max-width: 720px; margin: 0 auto; }
.booking-hero .section-head__eyebrow{ color: var(--gold); }
.booking-hero .section-head__eyebrow::before,
.booking-hero .section-head__eyebrow::after{ background: var(--gold); }
.booking-hero h1{ margin: 6px 0 18px; color: var(--cream); }
.booking-hero p{ max-width: 540px; margin: 0 auto; color: rgba(247,244,239,0.8); }

/* ==========================================================================
   Booking widget
   ========================================================================== */
.booking{
  padding: clamp(70px, 9vw, 110px) 0 clamp(110px, 13vw, 170px);
  background: var(--cream);
}
.booking__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Stepper */
.booking__steps{
  display:flex;
  align-items:flex-start;
  max-width: 760px;
  margin: 0 auto clamp(50px, 7vw, 90px);
}
.booking__step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  flex-shrink:0;
}
.booking__step-num{
  width: 40px; height: 40px;
  border-radius:50%;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: rgba(23,23,26,0.4);
  background: var(--cream);
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.booking__step-label{
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(23,23,26,0.4);
  white-space: nowrap;
  transition: color .4s var(--ease);
}
.booking__step.is-active .booking__step-num,
.booking__step.is-done .booking__step-num{
  background: var(--dark);
  border-color: var(--dark);
  color: var(--cream);
}
.booking__step.is-active .booking__step-label,
.booking__step.is-done .booking__step-label{ color: var(--dark); }
.booking__step-check{ font-size: 1.1rem; }

.booking__step-line{
  flex:1;
  height:1px;
  background: var(--line);
  margin-top: 20px;
  min-width: 24px;
  transition: background .4s var(--ease);
}
.booking__step-line.is-done{ background: var(--dark); }

@media (max-width: 640px){
  .booking__step-label{ display:none; }
  .booking__step-line{ margin-top: 19px; }
}

/* Layout */
.booking__layout{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(40px, 6vw, 80px);
  align-items:start;
}
.booking__main h3{ margin-bottom: 28px; }
.booking__main h4{ margin-bottom: 18px; }

@media (max-width: 980px){
  .booking__layout{ grid-template-columns: 1fr; }
  .booking__sidebar{ order:-1; }
}

/* Panels */
.booking__panel{ display:none; }
.booking__panel.is-active{ display:block; }

/* Service list (step 1) */
.booking-service{
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 14px;
  transition: border-color .3s var(--ease);
}
.booking-service.is-open{ border-color: var(--gold); }
.booking-service__head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  padding: 22px 26px;
  text-align:left;
}
.booking-service__title{ font-family: var(--font-serif); font-size: 1.1rem; }
.booking-service__body{
  height:0;
  overflow:hidden;
  transition: height .4s var(--ease);
}
.booking-service__body-inner{ padding: 0 26px 26px; }
.booking-service__body-inner p{ font-size: 0.92rem; margin-bottom: 22px; max-width: 620px; }

/* Filters + calendar (step 2) */
.booking__filters{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.booking__filters button{
  padding: 12px 22px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: rgba(23,23,26,0.6);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.booking__filters button.is-active{
  background: var(--dark);
  color: var(--cream);
  border-color: var(--dark);
}

.booking__calendar{
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(20px, 3vw, 36px);
  margin-bottom: 36px;
}
.booking__calendar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 24px;
}
.booking__calendar-head h4{
  margin:0;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  text-transform: capitalize;
}
.booking__nav{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.1rem;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
}
.booking__nav:hover{ background: var(--dark); color: var(--cream); border-color: var(--dark); }
.booking__nav:disabled{ opacity: .25; pointer-events:none; }

.booking__calendar-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align:center;
  justify-content: center;
}
.booking__calendar-grid .day-name{
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(23,23,26,0.4);
  padding-bottom: 14px;
}
.booking__day{
  width: 42px;
  height: 42px;
  margin: 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  font-size: 0.9rem;
  border: 1px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.booking__day.is-empty{ visibility:hidden; }
.booking__day.is-disabled{ color: rgba(23,23,26,0.25); }
.booking__day.is-available{ border-color: var(--line); cursor:pointer; }
.booking__day.is-available:hover{ border-color: var(--gold); color: var(--gold); }
.booking__day.is-today{ font-weight:600; }
.booking__day.is-selected{
  background: var(--dark);
  color: var(--cream);
  border-color: var(--dark);
}

/* Time slots */
.booking__slots-head{
  margin: 0 0 20px;
  font-size: 1.15rem;
  text-transform: capitalize;
}
.booking__slots-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}
.booking__slot{
  padding: 14px 10px;
  text-align:center;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.booking__slot:hover, .booking__slot.is-selected{
  background: var(--dark);
  color: var(--cream);
  border-color: var(--dark);
}
.booking__slots-empty{ font-size: 0.95rem; color: rgba(23,23,26,0.5); }

/* Summary + form (step 3) */
.booking__summary-card{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(28px, 4vw, 44px);
  text-align:center;
  margin-bottom: 40px;
}
.booking__summary-edit{
  position:absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.booking__summary-edit:hover{ background: var(--dark); color: var(--cream); border-color: var(--dark); }
.booking__summary-label{
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.booking__summary-date{
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 26px;
  text-transform: capitalize;
}
.booking__summary-service{ font-family: var(--font-sans); font-weight:500; font-size: 1.05rem; }

.booking__form{ display:flex; flex-direction:column; gap: 18px; }
.booking__form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.booking__form input, .booking__form textarea{
  width:100%;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--cream);
  color: var(--dark);
  transition: border-color .3s var(--ease);
}
.booking__form input::placeholder, .booking__form textarea::placeholder{ color: rgba(23,23,26,0.4); }
.booking__form input:focus, .booking__form textarea:focus{ outline:none; border-color: var(--gold); }
.booking__form textarea{ min-height: 110px; resize: vertical; }
.booking__disclaimer{ font-size: 0.82rem; line-height: 1.7; }
.booking__disclaimer a{ text-decoration: underline; }
.booking__disclaimer a:hover{ color: var(--gold); }
.booking__submit{ margin-top: 6px; align-self:flex-start; }

@media (max-width: 560px){
  .booking__form-row{ grid-template-columns: 1fr; }
}

/* Done panel */
.booking__done{
  text-align:center;
  padding: clamp(20px, 4vw, 50px) 0;
  max-width: 520px;
  margin: 0 auto;
}
.booking__done-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 64px; height: 64px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--dark);
  color: var(--cream);
  font-size: 1.5rem;
}
.booking__done h3{ margin-bottom: 16px; }
.booking__done p{ margin-bottom: 32px; }

.booking__nav-actions{ margin-top: 36px; }

/* Sidebar */
.booking-store{
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(28px, 4vw, 40px);
  position: sticky;
  top: 110px;
}
.booking-store h4{ margin: 4px 0 24px; }
.booking-store__detail{ margin-bottom: 22px; }
.booking-store__detail h5,
.booking-summary h5{
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--font-sans);
  font-weight: 500;
  margin-bottom: 8px;
}
.booking-store__detail p, .booking-summary p{
  font-size: 0.92rem;
  color: rgba(23,23,26,0.65);
  margin: 0 0 4px;
}
.booking-store__detail a:hover{ color: var(--gold); }
.booking-store__map{
  height: 160px;
  border-radius: 4px;
  overflow:hidden;
  margin-bottom: 22px;
  filter: grayscale(35%) contrast(1.05);
}
.booking-store__map iframe{ width:100%; height:100%; border:0; }
.booking-summary{
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 22px;
}
.booking-summary p{ color: var(--dark); }

@media (max-width: 980px){
  .booking-store{ position:static; }
}

/* ==========================================================================
   Scroll reveal base states (animated via JS / IntersectionObserver)
   ========================================================================== */
.reveal-up, .reveal-img, .reveal-words, .reveal-line span{
  will-change: transform, opacity;
}
.reveal-up{
  opacity:0;
  transform: translateY(36px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-up.is-visible{ opacity:1; transform: translateY(0); }

.reveal-img{
  opacity:0;
  transform: translateY(28px) scale(.97);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal-img.is-visible{ opacity:1; transform: translateY(0) scale(1); }

.reveal-line{ overflow:hidden; }
.reveal-line span{
  display:inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
.reveal-line.is-visible span{ transform: translateY(0); }

/* staggering helper applied via inline custom property */
.reveal-up, .reveal-img{ transition-delay: var(--delay, 0s); }