/* ============================================================
   ELITE PHOTOBOOTHS — Design System v2
   Editorial luxury on a blush canvas + Nightfall dark mode
   ============================================================ */

@property --ep-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

:root{
  /* surface */
  --shell:#FEF6F3; --cream:#FFEDE3; --cream-deep:#F7E7DA; --champagne:#CAB8AA;
  /* brand */
  --sky:#86A8C1; --sky-mid:#A6C3D5; --sky-light:#C6DAE6;
  --rose:#E8B9AC; --rose-deep:#B58271; --gold:#C89A6B;
  /* ink */
  --ink:#2A2320; --ink-70:#5C534C; --ink-45:#8B817A; --line:#EADFD8;
  /* nightfall */
  --night:#0A0A1E; --night-2:#12112E; --neon:#4A3BFF; --neon-cyan:#6FE7D2;
  /* status */
  --success:#5E8A6A; --warn:#C08A3E; --danger:#B4564C;
  /* geometry */
  --nav-h:92px;   /* transparent nav: 24px padding + 42px CTA + 24px */
  --r-pill:999px; --r-card:24px; --r-hero:32px; --r-input:14px;
  --sh-sm:0 2px 8px rgba(42,35,32,.06);
  --sh-md:0 12px 32px rgba(42,35,32,.08);
  --sh-glass:0 8px 40px rgba(42,35,32,.12);
  /* type */
  --serif:"Bodoni Moda","Didot","Playfair Display",Georgia,serif;
  --sans:Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --grad-cinema:
    radial-gradient(78% 56% at 50% 46%,rgba(8,8,18,.60) 0%,rgba(8,8,18,.30) 58%,rgba(8,8,18,0) 100%),
    linear-gradient(180deg,rgba(8,8,18,.62) 0%,rgba(8,8,18,.34) 30%,rgba(8,8,18,.38) 64%,rgba(30,23,20,.74) 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--shell);color:var(--ink);
  font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-locked{overflow:hidden}
/* Display serif is reserved for h1, h2, the menu overlay and numerals.
   Everything else — card titles, quotes, questions, contact values — is Inter. */
h1,h2{font-family:var(--serif);margin:0;font-weight:700}
h3,h4,blockquote{font-family:var(--sans);margin:0;font-weight:600}
p{margin:0}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--rose);color:#3B2620}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}

.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
@media(min-width:900px){.wrap{padding:0 48px}}
.wrap--narrow{max-width:960px}

.eyebrow{display:inline-block;font:600 12px/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-45)}
.eyebrow--gold{color:var(--gold)}
.rule{width:64px;height:1px;background:var(--gold);border:0;margin:32px 0 0}
.rule--c{margin-left:auto;margin-right:auto}

/* ============ BUTTONS ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:17px 38px;border:1px solid transparent;border-radius:var(--r-pill);
  font:600 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn--primary{background:var(--cream);color:var(--ink)}
.btn--primary:hover{background:var(--cream-deep);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn--ink{background:var(--ink);color:var(--cream)}
.btn--ink:hover{background:#3B322D;transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--outline:hover{background:var(--cream);transform:translateY(-1px)}
.btn--neon{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--neon:hover{background:var(--neon);border-color:var(--neon);box-shadow:0 0 32px rgba(74,59,255,.55)}
.btn--sm{min-height:42px;padding:13px 24px;font-size:11.5px;letter-spacing:.14em}
.btn--wide{width:100%}

/* Book Now — light travels the perimeter on hover */
.btn--book{background:var(--ink);color:var(--cream);isolation:isolate;overflow:visible}
.btn--book::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--ep-angle),
    rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 268deg,
    rgba(200,154,107,.65) 300deg,#FFF3E8 336deg,#FFFFFF 348deg,
    rgba(232,185,172,.7) 356deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .22s var(--ease);pointer-events:none;z-index:2}
.btn--book::after{content:"";position:absolute;inset:-6px;border-radius:inherit;
  background:conic-gradient(from var(--ep-angle),
    rgba(255,255,255,0) 300deg,rgba(255,241,225,.45) 348deg,rgba(255,255,255,0) 360deg);
  filter:blur(9px);opacity:0;transition:opacity .22s var(--ease);pointer-events:none;z-index:-1}
.btn--book:hover,.btn--book:focus-visible{background:#372E29}
.btn--book:hover::before,.btn--book:focus-visible::before,
.btn--book:hover::after,.btn--book:focus-visible::after{opacity:1;animation:ep-orbit 1.5s linear infinite}
@keyframes ep-orbit{to{--ep-angle:360deg}}
.on-image .btn--book{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(8px)}
.on-image .btn--book:hover{background:rgba(255,255,255,.2)}

/* ============ NAV ============ */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:22px 24px;
  transition:background .25s var(--ease),padding .25s var(--ease),box-shadow .25s var(--ease)}
@media(min-width:900px){.nav{padding:24px 48px}}
.nav__mark{--mark-ink:#fff;--spark:#FFF1DC;position:relative;display:inline-block;
  text-decoration:none;color:var(--mark-ink);font:600 15px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;
  transition:color .25s,text-shadow .3s var(--ease),transform .2s var(--ease)}
.nav__mark:active{transform:scale(.985);transform-origin:left center}

/* Sparkles: four-point stars that twinkle over the wordmark while hovered.
   Each carries its own position, size and delay so they never pulse in unison.
   Purely decorative and pointer-inert, so they cannot swallow the click. */
.nav__sparks{position:absolute;inset:0;pointer-events:none}
.nav__sparks i{position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);background:var(--spark);opacity:0;
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
  transform:translate(-50%,-50%) scale(0)}
.nav__mark:hover{text-shadow:0 0 18px rgba(255,241,220,.45)}
.nav__mark:hover .nav__sparks i,
.nav__mark:focus-visible .nav__sparks i{
  animation:mark-spark 1.6s var(--ease) var(--d) infinite}
@keyframes mark-spark{
  0%,70%,100%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-30deg)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  46%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(25deg)}
}
.nav__links{display:none;align-items:center;gap:28px}
@media(min-width:1120px){.nav__links{display:flex}}
.nav__links a{position:relative;color:rgba(255,255,255,.86);text-decoration:none;
  font:500 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  padding:6px 0;transition:color .2s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--rose);transition:right .3s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-active::after{right:0}
.nav__links a:hover{color:#fff}
.nav__right{display:flex;align-items:center;gap:12px}
.nav.is-solid{background:rgba(254,246,243,.88);backdrop-filter:saturate(140%) blur(18px);
  padding-top:14px;padding-bottom:14px;box-shadow:0 1px 0 var(--line),0 8px 30px rgba(42,35,32,.06)}
.nav.is-solid .nav__mark{--mark-ink:var(--ink);--spark:var(--gold)}
.nav.is-solid .nav__mark:hover{text-shadow:none}
.nav.is-solid .nav__links a{color:var(--ink-70)}
.nav.is-solid .nav__links a:hover,.nav.is-solid .nav__links a.is-active{color:var(--ink)}
.nav.is-solid .btn--book{background:var(--ink);color:var(--cream);border-color:transparent;backdrop-filter:none}
.nav.is-hidden{transform:translateY(-102%)}
.nav{transition:transform .4s var(--ease),background .25s var(--ease),padding .25s var(--ease),box-shadow .25s var(--ease)}

/* burger */
.burger{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;
  cursor:pointer;padding:0}
@media(min-width:1120px){.burger{display:none}}
.burger span{display:block;width:22px;height:1.5px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:6px}
.nav.is-solid .burger span{background:var(--ink)}
body.menu-open .burger span{background:var(--ink)}
body.menu-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:75;background:var(--shell);
  display:flex;flex-direction:column;justify-content:center;padding:110px 24px 40px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.menu.is-open{opacity:1;visibility:visible}
.menu a{display:block;font-family:var(--serif);font-size:clamp(30px,8vw,52px);line-height:1.12;
  text-transform:uppercase;text-decoration:none;color:var(--ink);padding:7px 0;
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s}
.menu a:hover{color:var(--rose-deep)}
.menu.is-open a{opacity:1;transform:none}
.menu__foot{margin-top:44px;display:grid;gap:6px;font-size:14px;color:var(--ink-70)}
.menu__foot a{font:400 14px/1.6 var(--sans);text-transform:none;color:var(--ink-70);padding:0;opacity:1;transform:none}

/* ============ CINEMATIC HERO (fixed curtain) ============ */
.hero{position:fixed;inset:0;z-index:1;overflow:hidden;background:var(--night)}
/* <picture> swaps in a portrait crop on phones, where a 16:9 hero would
   crop the booth itself out of frame. display:contents keeps .hero__img
   positioned against .hero exactly as before. */
.hero__pic{display:contents}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.07);animation:kenburns 22s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes kenburns{to{transform:scale(1)}}
/* The home hero is a bright golden-hour frame, so it carries a lighter grade
   than --grad-cinema (which still serves the sub-page heroes unchanged).
   The copy is left-aligned, so the weight sits left and the booth on the
   right keeps its highlights. */
.hero__scrim{position:absolute;inset:0;background:
  radial-gradient(62% 62% at 24% 48%,rgba(8,8,18,.50) 0%,rgba(8,8,18,.22) 58%,rgba(8,8,18,0) 100%),
  linear-gradient(100deg,rgba(8,8,18,.60) 0%,rgba(8,8,18,.36) 34%,rgba(8,8,18,.08) 62%,rgba(8,8,18,0) 100%),
  linear-gradient(180deg,rgba(8,8,18,.44) 0%,rgba(8,8,18,.10) 28%,rgba(8,8,18,.14) 62%,rgba(30,23,20,.62) 100%)}
/* In a portrait viewport the booth is centred, so an even vertical scrim
   reads better than a left-weighted one. */
@media(max-aspect-ratio:3/4){
  .hero__scrim{background:
    radial-gradient(90% 46% at 50% 34%,rgba(8,8,18,.52) 0%,rgba(8,8,18,.24) 62%,rgba(8,8,18,0) 100%),
    linear-gradient(180deg,rgba(8,8,18,.52) 0%,rgba(8,8,18,.20) 34%,rgba(8,8,18,.20) 60%,rgba(30,23,20,.66) 100%)}
}
.hero__inner{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:stretch;text-align:left;padding:96px 0 150px}
/* the copy block lines up with .wrap, so the hero shares the page's gutter */
.hero__copy{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}
@media(min-width:900px){.hero__copy{padding:0 48px}}
.hero .eyebrow{color:rgba(255,255,255,.72);margin-bottom:24px}
.hero h1{color:#fff;text-transform:uppercase;font-size:clamp(36px,5.4vw,88px);
  line-height:.9;letter-spacing:-.02em;text-shadow:0 4px 40px rgba(10,10,20,.45);max-width:13ch}
.hero__sub{margin:24px 0 0;max-width:560px;color:rgba(255,255,255,.92);font-size:15px;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.55;
  text-shadow:0 2px 20px rgba(10,10,20,.55)}
.hero__sub b{display:block;font-weight:700}
.hero__cta{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}
.hero__cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  color:rgba(255,255,255,.75);font:600 10.5px/1 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;display:grid;gap:12px;justify-items:center}
.hero__cue i{display:block;width:1px;height:44px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));
  animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.spacer{height:100svh}
.page{position:relative;z-index:2;display:flow-root;background:var(--shell);
  border-radius:var(--r-hero) var(--r-hero) 0 0;box-shadow:0 -30px 60px rgba(10,10,20,.28)}

/* compact hero for subpages */
.subhero{position:relative;min-height:76svh;display:grid;align-items:end;overflow:hidden;
  background:var(--night);padding-top:calc(var(--nav-h) + 28px)}
.subhero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);animation:kenburns 24s cubic-bezier(.22,.61,.36,1) forwards}
.subhero::after{content:"";position:absolute;inset:0;background:var(--grad-cinema)}
/* width:100% matters: .wrap brings margin:0 auto, and as a grid item that
   would shrink the block to its content width and centre it once the headline
   and lead gained max-widths. Same reason .hero__copy sets it. */
.subhero__copy{position:relative;z-index:2;width:100%;padding:0 24px 88px;max-width:100%}
.subhero .eyebrow{color:rgba(255,255,255,.7)}
.subhero h1{color:#fff;text-transform:uppercase;font-size:clamp(36px,5.4vw,88px);
  line-height:.9;letter-spacing:-.02em;margin:18px 0 0;max-width:22ch;  /* the
     <br> in each headline sets the breaks; this is only a safety stop so a
     line never runs edge to edge on an ultrawide screen */
  text-shadow:0 4px 40px rgba(10,10,20,.45)}
.subhero p{margin:24px 0 0;max-width:560px;color:rgba(255,255,255,.92);font-size:15px;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.55;
  text-shadow:0 2px 20px rgba(10,10,20,.55)}
.subhero p b{display:block;font-weight:700}
/* The sub-page hero stops at 76svh on purpose, so the content below peeks into
   view. A full 150px section gap on top of that stacked into a dead band, so
   the first section after a hero carries a trimmed top padding. */
.subhero+section{padding-top:clamp(44px,5.5vw,72px)}

/* ============ SECTIONS ============ */
section{padding:96px 0}
@media(min-width:900px){section{padding:150px 0}}
.sechead{max-width:680px;margin:0 0 64px}
.sechead--c{margin-left:auto;margin-right:auto;text-align:center}
/* heading left, its CTA pinned right on the same baseline */
.sechead--split{display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;flex-wrap:wrap;max-width:100%}
.sechead--split>div{max-width:680px}
.sechead--split .btn{flex:none;margin-bottom:4px}
.sechead h2{font-size:clamp(32px,4.6vw,62px);line-height:1.02;letter-spacing:-.018em;
  text-transform:uppercase;margin:16px 0 18px}
.sechead p{color:var(--ink-70);max-width:56ch}
.sechead--c p{margin-left:auto;margin-right:auto}

/* statement */
.statement{text-align:center;max-width:940px;margin:0 auto}
.statement p{font-size:clamp(20px,2.4vw,30px);line-height:1.5;font-weight:400;
  letter-spacing:-.012em;color:var(--ink)}
.statement p b{font-weight:600;color:var(--rose-deep)}


/* ============ BOOTH GRID ============ */
.booths{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.booths{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.booths{grid-template-columns:repeat(3,1fr);gap:24px}}
.booth{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:4/5;background:var(--cream);text-decoration:none;color:#fff;isolation:isolate}
.booth img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.booth::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,20,0) 32%,rgba(10,10,20,.28) 58%,rgba(10,10,20,.82) 100%);
  transition:opacity .45s var(--ease)}
.booth:hover img{transform:scale(1.05)}
.booth__body{position:absolute;inset:auto 0 0 0;z-index:2;padding:28px 26px}
.booth__n{font:600 11px/1 var(--sans);letter-spacing:.2em;color:rgba(255,255,255,.6)}
.booth h3{font:600 19px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.07em;margin:11px 0 0}
.booth p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.8);margin:10px 0 0;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s var(--ease),opacity .35s var(--ease),margin .45s var(--ease)}
.booth:hover p,.booth:focus-visible p{max-height:120px;opacity:1}
.booth__more{position:absolute;top:22px;right:22px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);
  transform:scale(.7);opacity:0;transition:transform .4s var(--ease),opacity .3s}
.booth:hover .booth__more{transform:none;opacity:1}
.booth__more svg{width:14px;height:14px;stroke:#fff}

/* ============ SPLIT (image + copy) ============ */
.split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.02fr .98fr;gap:80px}
  .split--flip .split__media{order:2}}
.split__media{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:var(--cream)}
.split__media--wide{aspect-ratio:16/11}
.split__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.split__media:hover img{transform:scale(1.04)}
.split h2,.split h3{font-size:clamp(28px,3.6vw,50px);line-height:1.04;text-transform:uppercase;
  letter-spacing:-.014em;margin:16px 0 20px}
.split p{color:var(--ink-70);max-width:48ch}
.split .btn{margin-top:30px}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px;font-size:14.5px;color:var(--ink-70)}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks li::before{content:"✦";color:var(--gold);line-height:1.5;flex:none}

/* ============ STEPS ============ */
/* Inset panel: the one surface change between the hero and the Nightfall
   break, so the middle of the page has a second beat. */
.panel{background:var(--cream);border-radius:var(--r-hero);
  padding:clamp(48px,6vw,88px) clamp(24px,4vw,64px)}
.panel .sechead{margin-bottom:48px}
/* a section whose panel already carries the padding */
.section--inset{padding-block:clamp(32px,4vw,56px)}

.steps{display:grid;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--cream);padding:40px 26px 44px;position:relative;
  transition:background .4s var(--ease)}
.step:hover{background:var(--cream-deep)}
.step__n{font-family:var(--serif);font-size:52px;line-height:1;color:var(--rose);
  transition:color .4s var(--ease)}
.step:hover .step__n{color:var(--rose-deep)}
.step h3{font:600 12.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:22px 0 12px;
  font-family:var(--sans)}
.step p{font-size:14px;line-height:1.6;color:var(--ink-70)}

/* ============ EVENT TILES ============ */
.tiles{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:600px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;aspect-ratio:3/4;
  text-decoration:none;color:#fff;background:var(--cream)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,20,.05) 40%,rgba(10,10,20,.78) 100%)}
.tile__body{position:absolute;inset:auto 0 0 0;z-index:2;padding:26px 24px}
.tile h3{font:600 17px/1.25 var(--sans);text-transform:uppercase;letter-spacing:.07em}
.tile span{display:block;margin-top:9px;font:500 11px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.68)}

/* ============ NIGHTFALL ============ */
.night{position:relative;background:var(--night);color:#fff;overflow:hidden;padding:0}
.night__media{position:relative;min-height:86svh;display:grid;place-items:center;text-align:center}
.night__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.night__media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(92% 74% at 50% 50%,rgba(10,10,30,.62) 0%,rgba(10,10,30,.9) 100%)}
.night__copy{position:relative;z-index:2;padding:110px 24px;max-width:760px}
.night .eyebrow{color:var(--neon-cyan)}
.night h2{font-size:clamp(32px,5.2vw,76px);line-height:.94;text-transform:uppercase;
  letter-spacing:-.02em;color:#fff;margin:18px 0 0}
.night p{color:rgba(255,255,255,.8);margin:22px auto 34px;max-width:44ch;font-size:16px;
  line-height:1.65}
.night__stats{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:44px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:34px}
.night__stats div{text-align:center}
.night__stats b{display:block;font-family:var(--serif);font-size:42px;line-height:1;color:#fff}
.night__stats span{display:block;margin-top:9px;font:500 10.5px/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
/* Split variant (home Glam Booth feature): the booth sits in the middle of the photo, so the copy must
   never be centred over it. Below 1000px: photo first, untouched, text beneath on night. From 1000px:
   full-bleed with the photo anchored LEFT - if the image is cropped at all, the booth (39.5% across the
   photo) can then only move right - and the copy capped at ~35vw, so it cannot reach the booth. */
.night--split .night__media{display:block;min-height:0;text-align:center}
.night--split .night__media img{position:static;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:1}
.night--split .night__media::after{display:none}
.night--split .night__copy{padding:44px 24px 64px;max-width:none}
.night--split p{margin:18px auto 28px}
.night--split .night__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px;justify-items:center}
.night--split .night__stats b{font-size:30px}
@media(min-width:1000px){
  .night--split .night__media{display:flex;align-items:center;min-height:86svh;text-align:left}
  .night--split .night__media img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:0% 50%}
  .night--split .night__media::after{display:block;background:linear-gradient(90deg,rgba(10,10,30,.92) 0%,rgba(10,10,30,.88) 28%,rgba(10,10,30,.5) 35%,rgba(10,10,30,.1) 42%,rgba(10,10,30,0) 50%)}
  .night--split .night__copy{padding:96px 0 96px clamp(28px,4vw,72px);max-width:min(31vw,460px)}
  .night--split h2{font-size:clamp(38px,4.2vw,66px)}
  .night--split p{margin:20px 0 30px}
  .night--split .night__stats{justify-items:start;gap:22px 24px}
  .night--split .night__stats div{text-align:left}
  .night--split .night__stats b{font-size:26px}
}

/* ============ GALLERY ============ */
.gallery{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.gallery{grid-template-columns:repeat(4,1fr);gap:20px}
  .gallery figure:first-child{grid-column:span 2;grid-row:span 2}}
.gallery figure{margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:1;background:var(--cream)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}

/* ============ PRICING ============ */
.pkgs{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:700px){.pkgs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.pkgs{grid-template-columns:repeat(4,1fr)}}
.pkg{position:relative;background:var(--cream);border:1px solid transparent;border-radius:var(--r-card);
  padding:34px 30px 32px;display:flex;flex-direction:column;gap:16px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.pkg--feature{background:var(--ink);color:var(--cream);box-shadow:var(--sh-md)}
.pkg--feature .pkg__tier,.pkg--feature .pkg li{color:rgba(255,237,227,.72)}
.pkg--feature .pkg__price em{color:rgba(255,237,227,.6)}
.pkg__tier{font:600 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45)}
.pkg__price{font-family:var(--serif);font-size:48px;line-height:1;letter-spacing:-.02em}
.pkg__price em{display:block;margin-top:10px;font:500 11px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);font-style:normal}
.pkg ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:11px;font-size:14px;color:var(--ink-70)}
.pkg li{display:flex;gap:11px}
.pkg li::before{content:"✦";color:var(--gold);flex:none}
.pkg .btn{margin-top:auto}
.badge{position:absolute;top:-11px;left:30px;font:600 10.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;padding:8px 15px;border-radius:var(--r-pill);background:var(--rose);color:#4A2E26}
.badge--sky{background:var(--sky-light);color:#25404F}
.badge--gold{background:transparent;border:1px solid var(--gold);color:var(--gold)}

.addons{display:grid;gap:1px;background:var(--line);margin-top:24px;border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden}
@media(min-width:700px){.addons{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.addons{grid-template-columns:repeat(3,1fr)}}
.addon{background:var(--shell);padding:26px 28px;transition:background .3s var(--ease)}
.addon:hover{background:var(--cream)}
.addon h4{font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.addon p{font-size:13.5px;color:var(--ink-45);line-height:1.55}
.addon b{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink);display:block;margin-top:12px}

/* ============ TESTIMONIALS ============ */
.quotes{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:860px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{background:var(--cream);border-radius:var(--r-card);padding:38px 34px;display:flex;
  flex-direction:column;gap:20px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.quote:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.quote__stars{display:flex;gap:4px;color:var(--gold);font-size:13px;letter-spacing:.2em}
.quote blockquote{position:relative;font-size:17px;line-height:1.62;margin:0;font-weight:400;
  color:var(--ink)}
.quote cite{margin-top:auto;font:600 11px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-45);font-style:normal}
.quote cite b{display:block;color:var(--ink);font-weight:600;margin-bottom:5px}

/* ============ FORM / CHECK YOUR DATE ============ */
.book{background:var(--cream);border-radius:var(--r-hero);overflow:hidden;
  display:grid;grid-template-columns:1fr}
@media(min-width:1000px){.book{grid-template-columns:.92fr 1.08fr}}
.book__media{position:relative;min-height:280px}
.book__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.book__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,35,32,.12),rgba(42,35,32,.5))}
.book__media div{position:absolute;inset:auto 0 0 0;z-index:2;padding:36px 34px;color:#fff}
.book__media h3{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3vw,36px);
  text-transform:uppercase;line-height:1.04;letter-spacing:-.01em}
.book__media p{margin-top:11px;font:600 11px/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.7)}
.book__form{padding:40px 30px}
@media(min-width:700px){.book__form{padding:56px 52px}}
.grid2{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:620px){.grid2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:9px}
.field--full{grid-column:1/-1}
label{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
input,select,textarea{width:100%;font:400 16px/1.5 var(--sans);color:var(--ink);
  background:#FFF7F4;border:1px solid var(--line);border-radius:var(--r-input);padding:14px 16px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
textarea{min-height:104px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sky);
  box-shadow:0 0 0 3px rgba(134,168,193,.22)}
input::placeholder,textarea::placeholder{color:var(--ink-45)}
select{appearance:none;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='%238B817A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.formnote{margin-top:18px;font-size:12.5px;color:var(--ink-45)}
.formmsg{margin-top:18px;padding:14px 18px;border-radius:var(--r-input);font-size:14px;display:none}
.formmsg.is-on{display:block}
.formmsg--ok{background:rgba(94,138,106,.12);color:#3F6349;border:1px solid rgba(94,138,106,.3)}

/* chips */
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{font:600 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  padding:11px 17px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;
  color:var(--ink-70);cursor:pointer;transition:all .2s var(--ease)}
.chip:hover{border-color:var(--rose);color:var(--ink)}
.chip.is-on{background:var(--rose);border-color:var(--rose);color:#4A2E26}

/* ============ CTA BAND ============ */
.cta{position:relative;overflow:hidden;border-radius:var(--r-hero);margin:0 24px;min-height:520px;
  display:grid;place-items:center;text-align:center}
@media(min-width:900px){.cta{margin:0 48px}}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,23,20,.34),rgba(30,23,20,.68))}
.cta__copy{position:relative;z-index:2;padding:84px 24px;max-width:660px}
.cta .eyebrow{color:rgba(255,255,255,.72)}
.cta h2{color:#fff;font-size:clamp(32px,5vw,70px);line-height:.96;text-transform:uppercase;
  letter-spacing:-.02em;margin:18px 0 0}
.cta p{color:rgba(255,255,255,.9);font-size:16.5px;margin:20px auto 34px;max-width:44ch;
  line-height:1.65}
.cta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;
  gap:24px;align-items:center;font:500 clamp(16px,1.5vw,18.5px)/1.45 var(--sans);
  letter-spacing:-.005em;
  transition:color .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rose-deep)}
.faq summary i{flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;position:relative;transition:transform .3s var(--ease),border-color .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;background:var(--ink);
  transition:opacity .3s var(--ease)}
.faq summary i::before{width:11px;height:1px}
.faq summary i::after{width:1px;height:11px}
.faq details[open] summary i{transform:rotate(90deg);border-color:var(--rose)}
.faq details[open] summary i::after{opacity:0}
.faq details p{padding:0 0 28px;max-width:70ch;color:var(--ink-70);font-size:15px}

/* ============ CONTACT CARDS ============ */
.ccards{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:760px){.ccards{grid-template-columns:repeat(3,1fr)}}
.ccard{background:var(--cream);border-radius:var(--r-card);padding:34px 30px;display:grid;gap:12px;
  align-content:start;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.ccard h3{font:600 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45)}
.ccard a,.ccard p{font:500 19px/1.45 var(--sans);letter-spacing:-.005em;text-decoration:none;
  color:var(--ink);transition:color .2s}
.ccard a:hover{color:var(--rose-deep)}
.ccard small{font-size:13px;color:var(--ink-45);font-family:var(--sans)}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:rgba(255,237,227,.72);padding:88px 0 40px;margin-top:0}
.foot{display:grid;gap:48px;grid-template-columns:1fr}
@media(min-width:860px){.foot{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px}}
.foot h4{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,237,227,.45);margin:0 0 20px;font-family:var(--sans)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.foot a{color:rgba(255,237,227,.76);text-decoration:none;font-size:14.5px;transition:color .2s}
.foot a:hover{color:#fff}
.foot__mark{display:block;font:600 15px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream);text-decoration:none}
.foot__blurb{margin-top:22px;font-size:14.5px;line-height:1.7;max-width:34ch;color:rgba(255,237,227,.6)}
.foot__bot{margin-top:64px;padding-top:26px;border-top:1px solid rgba(255,237,227,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;
  color:rgba(255,237,227,.45)}
.foot__cities{display:flex;gap:22px;flex-wrap:wrap;font:500 11px/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;margin-top:26px;color:rgba(255,237,227,.5)}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .hero__img,.subhero__img{transform:none}
}
footer{position:relative;z-index:2}

/* ---- small-screen nav corrections ---- */
.nav__mark{white-space:nowrap}

@media(max-width:600px){
  :root{--nav-h:76px}   /* 16px padding + 44px burger + 16px */
  .nav{padding:16px 18px}
  .nav__mark{font-size:12.5px;letter-spacing:.14em}
  .nav__right .btn--book{display:none}
  .hero__inner{padding:88px 0 132px}
  .hero__copy{padding:0 20px}
  .hero__sub,.subhero p{font-size:13px;letter-spacing:.06em}
  .btn{padding:16px 30px}
}
@media(max-width:380px){.nav__mark{font-size:11px;letter-spacing:.12em}}

/* ---- burger: deterministic geometry + menu-open nav colours ---- */
.burger{position:relative}
@media(min-width:1120px){.burger{display:none}}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;margin:0;
  transition:transform .3s var(--ease),opacity .2s var(--ease),background .25s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21.25px}
.burger span:nth-child(3){top:27.5px}
body.menu-open .burger span:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}
body.menu-open .nav{background:transparent;box-shadow:none}
body.menu-open .nav__mark{--mark-ink:var(--ink);--spark:var(--gold)}

@media(min-width:900px){.subhero__copy{padding:0 48px 104px}}
.subhero .wrap{max-width:1280px}
.subhero__copy>*{max-width:820px}

/* Pull quotes carry their own curly quotes in the copy - no display mark needed. */

/* ---- line-breaking: keep short display copy from orphaning a word ---- */
h1,h2,.hero__sub,.sechead p,.statement p,.cta p,.night p{text-wrap:balance}
.split p,.faq details p,.subhero p{text-wrap:pretty}

/* ============================================================
   BOOTHS LEAD — section copy sitting beside the flagship booth.
   Replaces the old "heading over six equal cards" block so a
   photograph reaches the screen immediately after the hero.
   ============================================================ */
.boothlead{display:grid;gap:32px;align-items:center;margin-bottom:20px}
@media(min-width:980px){.boothlead{grid-template-columns:1fr 1.32fr;gap:40px;margin-bottom:24px}}
@media(min-width:1200px){.boothlead{grid-template-columns:1fr 1.5fr;gap:56px}}
.boothlead__copy h2{font-size:clamp(31px,3.7vw,56px);line-height:1.02;letter-spacing:-.018em;
  text-transform:uppercase;margin:16px 0 18px}
.boothlead__copy p{color:var(--ink-70);max-width:44ch}
.boothlead__price{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.6;color:var(--ink-70)}
.boothlead__price b{display:block;font-family:var(--serif);font-weight:700;font-size:27px;
  line-height:1;color:var(--ink);margin-bottom:9px;letter-spacing:-.015em}
.boothlead__price a{color:var(--rose-deep);text-decoration:none;
  border-bottom:1px solid var(--rose);transition:color .2s var(--ease),border-color .2s var(--ease)}
.boothlead__price a:hover{color:var(--ink);border-color:var(--ink)}
.boothlead .btn{margin-top:28px}

.boothfeat{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:4/3;background:var(--cream);text-decoration:none;color:#fff;isolation:isolate}
@media(min-width:700px){.boothfeat{aspect-ratio:16/11}}
.boothfeat img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.boothfeat:hover img{transform:scale(1.04)}
.boothfeat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(10,10,20,0) 26%,rgba(10,10,20,.36) 56%,rgba(10,10,20,.88) 100%)}
.boothfeat__body{position:absolute;inset:auto 0 0 0;z-index:2;padding:32px 32px 30px}
.boothfeat__n{font:600 11px/1 var(--sans);letter-spacing:.2em;color:rgba(255,255,255,.62)}
.boothfeat h3{font:600 clamp(20px,2.1vw,26px)/1.15 var(--sans);text-transform:uppercase;
  letter-spacing:.06em;margin:12px 0 0}
.boothfeat p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.84);margin:11px 0 0;max-width:46ch}
.boothfeat .badge{position:absolute;top:24px;left:24px;z-index:2}

/* ---- nav: never let a link label wrap. Between 1120 and 1400 the seven
       links, the wordmark and the CTA are tight, so tighten the gaps and
       drop the decorative ELITESHOTME sub-label rather than wrapping. ---- */
.nav__links{flex-wrap:nowrap}
.nav__links a{white-space:nowrap}
@media(max-width:1400px){
  .nav__links{gap:20px}
  .nav__right{gap:10px}
}
@media(max-width:1240px){.nav__links{gap:15px}.nav__links a{font-size:11.5px;letter-spacing:.1em}}

/* ============================================================
   BAND — compact two-up for a secondary service. Landscape image
   flush left, three lines and a button right. Deliberately lighter
   than .split so photography does not out-weigh the booths.
   ============================================================ */
.band{display:grid;grid-template-columns:1fr;background:var(--cream);
  border-radius:var(--r-card);overflow:hidden}
@media(min-width:820px){.band{grid-template-columns:1.05fr .95fr;align-items:stretch}}
.band__media{position:relative;min-height:240px;overflow:hidden;background:var(--cream-deep)}
.band__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.band:hover .band__media img{transform:scale(1.04)}
.band__body{padding:clamp(32px,4vw,56px)}
.band__body h2{font-size:clamp(26px,3vw,42px);line-height:1.05;letter-spacing:-.015em;
  text-transform:uppercase;margin:16px 0 16px}
.band__body p{color:var(--ink-70);max-width:42ch}
.band__body .btn{margin-top:28px}