/* ==========================================================================
   EZEEMABI HUB: COMPONENTS
   Preloader · nav · menu · footer · marquee · cards · stats · quotes ·
   accordion · forms · lightbox · badges
   ========================================================================== */

/* ------------------------------------------------------------- PRELOADER */
.preloader{
  position:fixed;inset:0;z-index:var(--z-preloader);
  display:grid;place-items:center;background:var(--ink-950);
}
.preloader__inner{display:grid;place-items:center;gap:2rem;transition:opacity .5s var(--ease-luxe)}
.preloader__mark{width:76px;height:76px}
.preloader__mark path,.preloader__mark line{
  stroke:var(--gold);fill:none;stroke-width:1.6;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  animation:draw 1.5s var(--ease-luxe) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.preloader__bar{width:min(220px,42vw);height:1px;background:var(--ivory-14);position:relative;overflow:hidden}
.preloader__bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.preloader__num{
  font-family:var(--ff-mono);font-size:var(--fs-xs);letter-spacing:.2em;color:var(--ivory-30);
}
/* Two obsidian panels part like a curtain to reveal the page. */
.preloader__curtain{position:absolute;inset:0;display:flex;pointer-events:none}
.preloader__curtain span{flex:1;background:var(--ink-950);transition:transform 1.05s var(--ease-luxe)}
.preloader__curtain span:first-child{transform-origin:left}
.preloader__curtain span:last-child{transform-origin:right}
.preloader.is-done .preloader__inner{opacity:0}
.preloader.is-done .preloader__curtain span:first-child{transform:translateX(-101%)}
.preloader.is-done .preloader__curtain span:last-child{transform:translateX(101%)}
.preloader.is-gone{display:none}

/* ------------------------------------------------------------------- NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  transition:transform var(--dur-2) var(--ease-luxe),background-color var(--dur-2) var(--ease-luxe),
             border-color var(--dur-2) var(--ease-luxe),backdrop-filter var(--dur-2);
  border-bottom:1px solid transparent;
}
.nav__in{
  max-width:var(--maxw-wide);margin-inline:auto;padding:clamp(1.1rem,.7rem + 1.2vw,1.7rem) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  transition:padding var(--dur-2) var(--ease-luxe);
}
.nav.is-stuck{background:var(--nav-bg);backdrop-filter:blur(18px) saturate(140%);
              -webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line)}
.nav.is-stuck .nav__in{padding-block:clamp(.7rem,.45rem + .8vw,1rem)}
.nav.is-hidden{transform:translateY(-102%)}

.brand{display:flex;align-items:center;gap:.85rem;flex:none}
.brand__mark{width:38px;height:38px;flex:none;transition:transform var(--dur-3) var(--ease-luxe)}
.brand:hover .brand__mark{transform:rotate(-8deg)}
.brand__mark path,.brand__mark line{stroke:var(--gold);fill:none;stroke-width:1.4}
.brand__txt{display:grid;line-height:1}
.brand__name{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:1.22rem;
              letter-spacing:.12em;text-transform:uppercase;color:var(--ivory)}
.brand__sub{font-size:.5625rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-top:.42em}

.nav__links{display:none;align-items:center;gap:clamp(1.5rem,.6rem + 1.9vw,2.9rem)}
@media (min-width:1060px){ .nav__links{display:flex} }
.nav__link{
  position:relative;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--ivory-60);padding-block:.4rem;
  transition:color var(--dur-1) var(--ease-luxe);
}
.nav__link::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform var(--dur-2) var(--ease-luxe);
}
.nav__link:hover{color:var(--ivory)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__link[aria-current="page"]{color:var(--gold-pale)}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}

.nav__end{display:flex;align-items:center;gap:1rem;flex:none}
.nav__cta{display:none}
@media (min-width:760px){ .nav__cta{display:inline-flex} }

/* Hamburger: two rules that rotate into a cross. */
.burger{
  position:relative;display:grid;place-items:center;width:46px;height:46px;flex:none;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  transition:border-color var(--dur-2) var(--ease-luxe),background-color var(--dur-2) var(--ease-luxe),
             translate var(--dur-2) var(--ease-luxe),box-shadow var(--dur-2) var(--ease-luxe);
}
@media (min-width:1060px){ .burger{display:none} }
.burger:hover{border-color:var(--gold-50);background:var(--gold-08);
              translate:0 var(--lift-sm);box-shadow:var(--shadow-card),var(--glow)}
/* Bars are absolutely centred so the open state is an exact X. Relying on
   flow spacing plus a translate leaves a chevron instead. */
.burger i{
  position:absolute;left:50%;top:50%;width:18px;height:1px;background:var(--ivory);
  transform:translate(-50%,-50%) translateY(-3px);
  transition:transform var(--dur-2) var(--ease-luxe);
}
.burger i:last-child{transform:translate(-50%,-50%) translateY(3px)}
.burger.is-open i:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.burger.is-open i:last-child{transform:translate(-50%,-50%) rotate(-45deg)}

/* -------------------------------------------------------- THEME TOGGLE
   One button, two icons. The icon shown is the theme you will GET, not the
   one you are in: dark mode offers a sun, light mode offers a moon. */
.tswitch{
  position:relative;display:grid;place-items:center;width:46px;height:46px;flex:none;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--ivory-60);overflow:hidden;
  transition:border-color var(--dur-2) var(--ease-luxe),
             background-color var(--dur-2) var(--ease-luxe),
             color var(--dur-2) var(--ease-luxe),
             translate var(--dur-2) var(--ease-luxe),
             box-shadow var(--dur-2) var(--ease-luxe);
}
.tswitch:hover{border-color:var(--gold-50);background:var(--gold-08);color:var(--gold);
               translate:0 var(--lift-sm);box-shadow:var(--shadow-card),var(--glow)}
.tswitch svg{
  position:absolute;width:19px;height:19px;
  stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .55s var(--ease-luxe),opacity .3s var(--ease-luxe);
}
.tswitch__sun{opacity:1;transform:rotate(0deg) scale(1)}
.tswitch__moon{opacity:0;transform:rotate(-90deg) scale(.55)}
[data-theme="light"] .tswitch__sun{opacity:0;transform:rotate(90deg) scale(.55)}
[data-theme="light"] .tswitch__moon{opacity:1;transform:rotate(0deg) scale(1)}

/* --------------------------------------------------------- FULLSCREEN MENU */
.menu{
  position:fixed;inset:0;z-index:var(--z-menu);background:var(--ink-950);
  display:grid;grid-template-rows:auto 1fr auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .85s var(--ease-luxe);
  visibility:hidden;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.menu__head{padding:clamp(1.1rem,.7rem + 1.2vw,1.7rem) var(--gutter);display:flex;
            align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.menu__head-end{display:flex;align-items:center;gap:.6rem}
.menu__body{
  display:grid;align-content:safe center;gap:.2rem;
  padding:clamp(2rem,1rem + 4vw,4rem) var(--gutter);overflow-y:auto;
  position:relative;z-index:1;
}
.menu__head,.menu__foot{position:relative;z-index:2}

/* The menu's image stage. Hovering a destination brings up a photograph of
   that space behind the type, masked so it dissolves into the page rather
   than sitting in a box. Absolutely positioned, so it stays out of the
   menu's grid rows. */
.menu__stage{
  position:absolute;top:0;right:0;bottom:0;width:48%;
  overflow:hidden;pointer-events:none;display:none;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%);
          mask-image:linear-gradient(90deg,transparent,#000 26%);
}
@media (min-width:900px){ .menu__stage{display:block} }
.menu__img{width:100%;height:100%;object-fit:cover;filter:var(--grade-deep);opacity:0}
.menu__link{
  display:flex;align-items:baseline;gap:1.2rem;
  font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:clamp(2.4rem,1.4rem + 5.4vw,5rem);
  line-height:1.16;color:var(--ivory-60);
  transition:color var(--dur-2) var(--ease-luxe),padding-left var(--dur-2) var(--ease-luxe);
  opacity:0;transform:translateY(24px);
}
.menu.is-open .menu__link{opacity:1;transform:none;
  transition:opacity .7s var(--ease-luxe) calc(.2s + var(--i,0)*.07s),
             transform .7s var(--ease-luxe) calc(.2s + var(--i,0)*.07s),
             color var(--dur-2) var(--ease-luxe),padding-left var(--dur-2) var(--ease-luxe)}
.menu__link:hover{color:var(--gold-pale);padding-left:1.1rem}
.menu__link em{font-family:var(--ff-mono);font-style:normal;font-size:.75rem;color:var(--gold);letter-spacing:.14em}
.menu__foot{
  padding:clamp(1.4rem,1rem + 1.6vw,2.4rem) var(--gutter);border-top:1px solid var(--line);
  display:grid;gap:1.4rem;
}
@media (min-width:760px){ .menu__foot{grid-template-columns:repeat(3,1fr);align-items:center} }
.menu__meta{font-size:var(--fs-sm);color:var(--ivory-45)}
.menu__meta b{display:block;color:var(--gold);font-size:var(--fs-eyebrow);font-weight:500;
              letter-spacing:var(--ls-eyebrow);text-transform:uppercase;margin-bottom:.5rem}

/* --------------------------------------------------------------- MARQUEE */
.marquee{
  border-block:1px solid var(--line);padding-block:1.5rem;overflow:hidden;
  background:var(--ink-850);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:2.75rem;padding-right:2.75rem;flex:none}
.marquee__item{
  display:flex;align-items:center;gap:2.75rem;
  font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:clamp(1.15rem,.95rem + .8vw,1.7rem);
  color:var(--ivory-45);white-space:nowrap;letter-spacing:.02em;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee__track{animation:none} }

/* ----------------------------------------------------------------- CARDS */
.card{
  position:relative;background:var(--ink-750);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--edge),var(--shadow-card);
  transition:border-color var(--dur-2) var(--ease-luxe),translate var(--dur-2) var(--ease-luxe),
             box-shadow var(--dur-2) var(--ease-luxe);
}
.card:hover{border-color:var(--gold-30);translate:0 var(--lift);
            box-shadow:var(--edge),var(--shadow-lift),var(--glow)}
.card__body{padding:clamp(1.5rem,1.1rem + 1.3vw,2.25rem)}
.card__title{margin-bottom:.7rem}
.card__text{color:var(--ivory-45);font-size:var(--fs-sm);line-height:1.75}

/* Space card: image with copy overlaid on the lower third. */
.space{
  position:relative;display:block;overflow:hidden;overflow:clip;border-radius:var(--radius);
  transition:translate var(--dur-2) var(--ease-luxe),box-shadow var(--dur-2) var(--ease-luxe);
}
.space:hover{
  translate:0 var(--lift);
  box-shadow:0 0 0 1px var(--gold-30),var(--shadow-lift),var(--glow);
}
.space__media{position:absolute;inset:0}
.space__media img{width:100%;height:100%;object-fit:cover;
  filter:var(--grade);
  transition:transform 1.1s var(--ease-luxe),filter var(--dur-3) var(--ease-luxe)}
.space:hover .space__media img{transform:scale(1.06);filter:var(--grade-hover)}
.space__in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
           min-height:clamp(22rem,16rem + 18vw,32rem);padding:clamp(1.5rem,1rem + 1.8vw,2.5rem)}
.space__num{position:absolute;top:clamp(1.25rem,1rem + 1vw,2rem);left:clamp(1.5rem,1rem + 1.8vw,2.5rem);
            z-index:2;font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--gold);letter-spacing:.16em}
.space__cap{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
            color:var(--gold);margin-bottom:.85rem}
.space__meta{display:flex;flex-wrap:wrap;gap:.55rem 1.25rem;margin-top:1rem;
             font-size:var(--fs-xs);color:var(--ivory-45)}
.space__meta span{display:flex;align-items:center;gap:.5rem}
/* Price and a direct booking action on each card. Capacity answers "will my
   guests fit"; the rate answers the question people actually ask next, and
   Reserve skips them into the wizard with the space already chosen. */
.space__foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  margin-top:1.35rem;padding-top:1.1rem;border-top:1px solid var(--line-strong);
}
.space__price{line-height:1.2}
.space__price b{
  display:block;font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:1.45rem;color:var(--gold-pale);line-height:1;letter-spacing:-.01em;
  min-height:1em;
}
.space__price i{
  display:block;margin-top:.45rem;font-style:normal;
  font-size:var(--fs-xs);color:var(--ivory-45);letter-spacing:.04em;
}
.space__cta{
  position:relative;z-index:2;flex:none;
  padding:.75rem 1.25rem;border:1px solid var(--gold-50);border-radius:var(--radius);
  font-size:var(--fs-eyebrow);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--ls-caps);color:var(--gold-pale);white-space:nowrap;
  transition:all var(--dur-2) var(--ease-luxe);
}
.space__cta:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-900);
                  translate:0 var(--lift-sm)}
/* The card title carries a stretched link, so the whole card opens the hall
   page while the Reserve button above it keeps its own destination. */
.space__link{color:inherit}
.space__link::after{content:'';position:absolute;inset:0;z-index:1}

.space__go{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-caps);
  color:var(--gold-pale);opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-2) var(--ease-luxe),transform var(--dur-2) var(--ease-luxe)}
.space:hover .space__go{opacity:1;transform:none}
@media (hover:none){ .space__go{opacity:1;transform:none} }

/* Occasion tile: icon, title, short line. Hover fills with a gold sweep. */
/* A 1px box drawn around every cell is the most generic pattern in web
   design, and on a light ground it is what made this page look ordinary.
   These are set as a printed spec sheet instead: a continuous hairline above
   each row, an index in the corner, and a gold rule that draws in on hover. */
.occs{display:grid;gap:0}
@media (min-width:640px){ .occs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:980px){ .occs{grid-template-columns:repeat(3,minmax(0,1fr))} }

.occ{
  --occ-gutter:clamp(2rem,1.4rem + 2.8vw,4.25rem);
  position:relative;border-top:1px solid var(--line);
  padding-block:clamp(1.6rem,1.3rem + 1.3vw,2.3rem) clamp(1.9rem,1.5rem + 1.6vw,2.75rem);
  padding-right:var(--occ-gutter);
}
.occ::after{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-luxe);
}
.occ:hover::after{transform:scaleX(1)}
.occ__n{
  position:absolute;top:clamp(1.6rem,1.3rem + 1.3vw,2.3rem);right:var(--occ-gutter);
  font-family:var(--ff-mono);font-size:var(--fs-xs);letter-spacing:.14em;
  color:var(--ivory-30);transition:color var(--dur-2) var(--ease-luxe);
}
.occ:hover .occ__n{color:var(--gold)}
.occ__ico{width:26px;height:26px;margin-bottom:1.4rem;color:var(--gold)}
.occ__ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.25}
.occ__title{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:var(--fs-d4);
            margin-bottom:.55rem;position:relative}
.occ__text{font-size:var(--fs-sm);color:var(--ivory-45);line-height:1.7;position:relative}

/* ----------------------------------------------------------------- STATS */
.stats{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:560px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .stats--4{grid-template-columns:repeat(4,1fr)} .stats--3{grid-template-columns:repeat(3,1fr)} }
.stat{background:var(--ink-900);padding:clamp(1.75rem,1.2rem + 1.8vw,2.75rem) clamp(1.25rem,1rem + 1vw,2rem);
      text-align:center}
.stat__n{font-family:var(--ff-display);font-weight:var(--fw-display);
         font-size:clamp(2.4rem,1.8rem + 2.4vw,3.6rem);
         line-height:1;color:var(--gold-pale);letter-spacing:-.02em}
.stat__l{margin-top:.85rem;font-size:var(--fs-eyebrow);text-transform:uppercase;
         letter-spacing:var(--ls-eyebrow);color:var(--ivory-45)}

/* ---------------------------------------------------------------- QUOTES */
.quote{max-width:52rem;margin-inline:auto;text-align:center}
.quote__mark{font-family:var(--ff-display);font-weight:var(--fw-display);font-size:5rem;
             line-height:.6;color:var(--gold-30);
             display:block;margin-bottom:1.5rem}
.quote__txt{font-family:var(--ff-display);font-weight:var(--fw-display);
            font-size:clamp(1.45rem,1.1rem + 1.7vw,2.35rem);
            line-height:1.42;font-style:italic;color:var(--ivory)}
.quote__by{margin-top:2rem;font-size:var(--fs-eyebrow);text-transform:uppercase;
           letter-spacing:var(--ls-eyebrow);color:var(--gold)}
.quote__by span{display:block;color:var(--ivory-30);margin-top:.5rem;letter-spacing:.14em}
.quotes{position:relative}
.quotes__item{display:none}
.quotes__item.is-active{display:block;animation:qfade .8s var(--ease-luxe)}
@keyframes qfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.quotes__nav{display:flex;justify-content:center;gap:.6rem;margin-top:3rem}
.quotes__dot{width:26px;height:2px;background:var(--ivory-14);transition:background-color var(--dur-2)}
.quotes__dot.is-active{background:var(--gold)}

/* -------------------------------------------------------------- ACCORDION */
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.6rem 0;text-align:left;font-family:var(--ff-display);font-weight:var(--fw-display);
  font-size:var(--fs-d4);
  color:var(--ivory-80);transition:color var(--dur-2) var(--ease-luxe);
}
.acc__btn:hover{color:var(--gold-pale)}
.acc__ico{position:relative;width:14px;height:14px;flex:none}
.acc__ico::before,.acc__ico::after{content:'';position:absolute;background:var(--gold);
  transition:transform var(--dur-2) var(--ease-luxe)}
.acc__ico::before{left:0;top:6.5px;width:14px;height:1px}
.acc__ico::after{left:6.5px;top:0;width:1px;height:14px}
.acc__btn[aria-expanded="true"] .acc__ico::after{transform:scaleY(0)}
/* Height is measured and set by site.js. The grid-template-rows 0fr→1fr trick
   collapses to 0 here, because the panel's content-based row sizing has no
   free space to distribute. An explicit px height is reliable everywhere. */
.acc__panel{height:0;overflow:hidden;transition:height var(--dur-2) var(--ease-luxe)}
.acc__panel>div{overflow:hidden}
.acc__panel p{padding-bottom:1.75rem;color:var(--ivory-45);font-size:var(--fs-sm);max-width:52ch}

/* ----------------------------------------------------------------- FORMS */
.field{display:grid;gap:.65rem}
.field__label{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
              color:var(--ivory-45)}
.field__label b{color:var(--gold);font-weight:400}
.input,.select,.textarea{
  width:100%;padding:1rem 1.15rem;background:var(--ink-800);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--ivory);font-size:var(--fs-body);font-weight:300;
  transition:border-color var(--dur-1),background-color var(--dur-1);
}
.input::placeholder,.textarea::placeholder{color:var(--ivory-30)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--gold-50);background:var(--ink-700)}
.textarea{min-height:8.5rem;resize:vertical;line-height:1.7}
.select{
  appearance:none;cursor:pointer;padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A227' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.15rem center;
}
.select option{background:var(--ink-800);color:var(--ivory)}
[data-theme="light"] .select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B5416' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
}
.field__err{font-size:var(--fs-xs);color:var(--danger);display:none}
.field.is-bad .input,.field.is-bad .select,.field.is-bad .textarea{border-color:var(--danger)}
.field.is-bad .field__err{display:block}

/* Choice chips (event type, filters) */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{
  padding:.7rem 1.2rem;border:1px solid var(--line-strong);border-radius:var(--radius);
  font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-caps);
  color:var(--ivory-60);transition:all var(--dur-1) var(--ease-luxe);
}
.chip:hover{border-color:var(--gold-50);color:var(--ivory);translate:0 var(--lift-sm);
            box-shadow:var(--shadow-card)}
.chip.is-on,.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink-900)}

/* --------------------------------------------------------------- BADGES */
.badge{
  display:inline-flex;align-items:center;gap:.6em;padding:.5rem 1rem;
  border:1px solid var(--gold-30);border-radius:999px;background:var(--gold-08);
  font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-caps);
  color:var(--gold-pale);
}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--gold);
         box-shadow:0 0 0 0 var(--gold-50);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--gold-50)}
  70%{box-shadow:0 0 0 9px rgba(201,162,39,0)}
  100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}
}

/* -------------------------------------------------------------- LIGHTBOX */
.lb{
  position:fixed;inset:0;z-index:var(--z-lightbox);
  background:rgba(5,5,6,.985);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  /* minmax(0,1fr): a bare 1fr keeps an `auto` minimum, which lets a tall
     image push the stage row past the viewport instead of scaling down. */
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  opacity:0;visibility:hidden;transition:opacity var(--dur-2) var(--ease-luxe),visibility var(--dur-2);
}
.lb.is-open{opacity:1;visibility:visible}
.lb__bar{display:flex;align-items:center;justify-content:space-between;
         padding:1.25rem var(--gutter);border-bottom:1px solid var(--line)}
.lb__count{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--gold);letter-spacing:.16em}
.lb__stage{display:grid;place-items:center;padding:clamp(1rem,.6rem + 1.6vw,2.5rem) var(--gutter);
           min-height:0;position:relative}
.lb__img{max-width:min(100%,84rem);max-height:100%;width:auto;height:auto;object-fit:contain;min-height:0;
         box-shadow:var(--shadow-lift);animation:lbin .55s var(--ease-luxe)}
@keyframes lbin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb__foot{padding:1.25rem var(--gutter);border-top:1px solid var(--line);
          display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.lb__cap{font-size:var(--fs-sm);color:var(--ivory-45)}
.lb__nav{display:flex;gap:.75rem}
.lb__btn{
  width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line-strong);
  border-radius:var(--radius);color:var(--ivory-60);
  transition:all var(--dur-1) var(--ease-luxe);
}
.lb__btn:hover{border-color:var(--gold-50);color:var(--gold);background:var(--gold-08);
               translate:0 var(--lift-sm)}
.lb__btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}

/* ---------------------------------------------------------------- FOOTER */
.foot{background:var(--ink-950);border-top:1px solid var(--line);position:relative}
.foot__top{padding-block:clamp(3.5rem,2.4rem + 4.4vw,6.5rem);display:grid;gap:clamp(2.5rem,1.6rem + 3vw,4.5rem)}
@media (min-width:620px){ .foot__top{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .foot__top{grid-template-columns:1.4fr 1fr 1fr 1.2fr} }
@media (min-width:620px) and (max-width:899px){ .foot__brand{grid-column:1 / -1} }
.foot__brand{max-width:22rem}
.foot__blurb{margin-top:1.5rem;color:var(--ivory-45);font-size:var(--fs-sm);line-height:1.8}
.foot__h{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
         color:var(--gold);margin-bottom:1.6rem}
.foot__list{display:grid;gap:.9rem}
.foot__list a,.foot__list p{color:var(--ivory-45);font-size:var(--fs-sm);transition:color var(--dur-1)}
.foot__list a:hover{color:var(--gold-pale)}
.foot__bot{
  /* Extra room at the bottom so the fixed WhatsApp pill never sits on top of
     the credit line, which is the last thing on the page. */
  border-top:1px solid var(--line);padding-block:1.75rem 5.25rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);color:var(--ivory-30);
}
.foot__social{display:flex;gap:.6rem}
.foot__social a{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-strong);
  border-radius:var(--radius);color:var(--ivory-45);transition:all var(--dur-1) var(--ease-luxe);
}
.foot__social a:hover{border-color:var(--gold-50);color:var(--gold);background:var(--gold-08);
                      translate:0 var(--lift-sm);box-shadow:var(--shadow-card),var(--glow)}
.foot__social svg{width:16px;height:16px;fill:currentColor}

/* Floating WhatsApp affordance: how Nigerian clients actually make contact. */
.wa{
  position:fixed;right:clamp(1rem,.6rem + 1.2vw,2rem);bottom:clamp(1rem,.6rem + 1.2vw,2rem);
  z-index:calc(var(--z-nav) - 1);
  display:flex;align-items:center;gap:.75rem;padding:.9rem 1.25rem;
  background:var(--ink-750);border:1px solid var(--gold-30);border-radius:999px;
  box-shadow:var(--shadow-card);
  font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-caps);
  color:var(--gold-pale);
  transition:all var(--dur-2) var(--ease-luxe);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);
}
body.has-scrolled .wa{opacity:1;visibility:visible;transform:none}
/* The booking page already offers WhatsApp in the contact cards and in the
   enquiry fallback, and the floating pill collides with the sticky booking
   summary on short viewports. Drop it there. */
body[data-page="contact.html"] .wa{display:none}
.wa:hover{background:var(--gold);color:var(--ink-900);border-color:var(--gold);
          translate:0 var(--lift-sm);box-shadow:var(--shadow-lift),var(--glow)}
.wa{box-shadow:var(--edge),var(--shadow-card)}
.wa svg{width:18px;height:18px;fill:currentColor;flex:none}
.wa span{display:none}
@media (min-width:560px){ .wa span{display:block} }


/* ==========================================================================
   SHORT-VIEWPORT MENU
   Five oversized links plus a header and a three-column footer do not fit a
   laptop window in landscape. The type steps down so nothing is ever clipped.
   This lives at the end of the file deliberately: it must win on source order
   against the .menu__link rule above, which carries the same specificity.
   ========================================================================== */
@media (max-height:880px){
  .menu__link{font-size:clamp(1.8rem,1rem + 3vw,3.1rem);line-height:1.12}
  .menu__foot{padding-block:clamp(1rem,.8rem + 1vw,1.6rem);gap:1rem}
  .menu__body{padding-block:clamp(1rem,.6rem + 2vw,2rem)}
}
@media (max-height:700px){
  .menu__link{font-size:clamp(1.5rem,1rem + 2.2vw,2.4rem)}
  .menu__foot{font-size:var(--fs-xs)}
}