/* Public site styles - palette and type lifted from the original Memel mockup. */
:root{
  --ink:#0d100d;
  --ink2:#171b16;
  --gold:#c6a24d;
  --gold-lt:#e8d6a3;
  --cream:#f4efe4;
  --blush:#c6899e;
  --line: rgba(198,162,77,0.28);
  --danger:#c65454;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--ink); color:var(--cream);
  font-family:'Jost', sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.serif{ font-family:'Cormorant Garamond', serif; font-weight:500; color:var(--cream); }
a{color:inherit; text-decoration:none;}
.wrap{max-width:1000px; margin:0 auto; padding:0 32px;}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  section{ padding:56px 0; }
}
.gold-text{
  background:linear-gradient(115deg, #8a6e2c 0%, var(--gold-lt) 25%, var(--gold) 50%, var(--gold-lt) 72%, #8a6e2c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Background + blur live on ::before (not on nav itself) because backdrop-filter
   on an element turns it into a containing block for position:fixed descendants -
   that broke the mobile nav-links dropdown, pinning it to nav's own 80px-tall box
   instead of the viewport, so it rendered squashed and hidden behind the hero. */
nav{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); }
nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(13,16,13,0.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand .name{ font-family:'Cormorant Garamond', serif; font-size:20px; letter-spacing:0.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-links{ display:flex; align-items:center; gap:32px; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; }
.nav-links a{ color:rgba(244,239,228,0.82); }
.nav-cta{ border:1px solid var(--gold); color:var(--gold-lt); padding:9px 20px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; border-radius:999px; transition:background .25s ease, color .25s ease; white-space:nowrap; }
.nav-cta:hover{ background:var(--gold); color:var(--ink); }
.nav-cta-mobile{ display:none; }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; margin-left:8px; }
.nav-toggle span{ display:block; width:100%; height:2px; background:var(--gold-lt); transition:transform .25s ease, opacity .25s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:760px){
  .nav-toggle{ display:flex; }
  .nav-cta-desktop{ display:none; }
  .nav-cta-mobile{ display:inline-flex; justify-content:center; margin-top:10px; }
  .nav-links{
    position:fixed; top:80px; left:0; right:0; bottom:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--ink); border-top:1px solid var(--line);
    padding:10px 32px 30px;
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    overflow-y:auto;
  }
  .nav-links.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .nav-links a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line); }
}

main{ min-height:60vh; }

.hero-banner{
  position:relative;
  width:100%;
  min-height:92vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:140px 32px;
  background:var(--ink);
  overflow:hidden;
}
@media (max-width:560px){
  .hero-banner{ min-height:80vh; padding:100px 22px; }
}
.hero-bg{
  position:absolute; inset:-4%;
  background-image:var(--hero-image, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  animation:heroZoom 26s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-banner.has-image::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,16,13,0.45) 0%, rgba(13,16,13,0.62) 55%, rgba(13,16,13,0.9) 100%);
  z-index:1;
}
.hero-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.hero-content > *{ opacity:0; transform:translateY(22px); animation:heroFadeUp 1s ease forwards; }
.hero-content > *:nth-child(1){ animation-delay:.15s; }
.hero-content > *:nth-child(2){ animation-delay:.32s; }
.hero-content > *:nth-child(3){ animation-delay:.48s; }
.hero-content > *:nth-child(4){ animation-delay:.64s; }
.hero-content > *:nth-child(5){ animation-delay:.8s; }

@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.12); } }
@keyframes heroFadeUp{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation:none; }
  .hero-content > *{ animation:none; opacity:1; transform:none; }
}
section{ padding:80px 0; }
.kicker{ font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; display:flex; align-items:center; gap:12px; }
.kicker::before{ content:""; width:26px; height:1px; background:var(--gold); }
.page-head{ padding:70px 0 40px; text-align:center; }
.page-head h1{ font-size:clamp(32px,5vw,54px); }
.page-head p{ margin-top:16px; color:rgba(244,239,228,0.68); max-width:56ch; margin-left:auto; margin-right:auto; }

.btn{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--gold); color:var(--gold-lt); padding:13px 30px; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; background:transparent; cursor:pointer; font-family:inherit; border-radius:999px; transition:background .25s ease, color .25s ease, transform .2s ease; }
.btn:hover{ background:var(--gold); color:var(--ink); transform:translateY(-1px); }
.btn-solid{ background:var(--gold); color:var(--ink); }
.btn-danger{ border-color:var(--danger); color:#f2b3b3; }
.btn-danger:hover{ background:var(--danger); color:#fff; }
.btn-ghost{ border-color:var(--line); color:rgba(244,239,228,0.7); }
.btn-sm{ padding:8px 16px; font-size:11px; }

.card{ border:1px solid var(--line); padding:32px; background:rgba(255,255,255,0.02); border-radius:28px 8px 28px 8px; }

form label{ display:block; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,239,228,0.55); margin-bottom:8px; }
form .field{ margin-bottom:22px; }
form input[type=text], form input[type=email], form input[type=tel], form input[type=date], form input[type=time], form input[type=number], form input[type=password], form input[type=datetime-local], form select, form textarea{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line); color:var(--cream);
  padding:13px 14px; font-family:'Jost',sans-serif; font-size:15px; font-weight:300;
  border-radius:10px;
}
form textarea{ min-height:110px; resize:vertical; }
form input:focus, form select:focus, form textarea:focus{ outline:none; border-color:var(--gold); }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:rgba(244,239,228,0.7); }
.checkbox-row input{ margin-top:3px; }
.hint{ font-size:12.5px; color:rgba(244,239,228,0.45); margin-top:6px; }
.error{ color:#f2a3a3; font-size:12.5px; margin-top:6px; }
.honeypot{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

.status-banner{ border:1px solid var(--gold); color:var(--gold-lt); padding:16px 20px; margin-bottom:28px; font-size:14px; border-radius:14px; }
.status-banner.error{ border-color:var(--danger); color:#f2b3b3; }

.badge{ display:inline-block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; border:1px solid var(--line); border-radius:999px; }
.badge-pending{ color:#e8d6a3; border-color:var(--gold); }
.badge-confirmed{ color:#a9d6b5; border-color:#5f9c73; }
.badge-proposed{ color:#e8d6a3; border-color:var(--gold); }
.badge-declined, .badge-cancelled, .badge-no_show{ color:#f2b3b3; border-color:var(--danger); }
.badge-completed{ color:rgba(244,239,228,0.6); border-color:var(--line); }

.services-list{ max-width:760px; margin:0 auto; }
.service-row{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); }
.service-row:first-child{ border-top:1px solid var(--line); }
.service-name{ font-family:'Cormorant Garamond', serif; font-size:24px; }
.service-desc{ font-size:13.5px; color:rgba(244,239,228,0.5); margin-top:6px; max-width:44ch; }
.service-price{ font-family:'Cormorant Garamond', serif; font-size:19px; color:var(--gold-lt); white-space:nowrap; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:700px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }

.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-grid img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:20px 4px 20px 4px; transition:transform .35s ease; }
.gallery-grid img:hover{ transform:translateY(-3px) scale(1.015); }
@media (max-width:820px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }

.event-card{ border:1px solid var(--line); padding:28px; margin-bottom:20px; display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; border-radius:6px 26px 6px 26px; }
.event-card img{ width:160px; height:160px; object-fit:cover; border-radius:16px; }
.event-card .meta{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:8px; }

footer{ padding:50px 0; border-top:1px solid var(--line); text-align:center; font-size:12px; color:rgba(244,239,228,0.4); }
footer a{ color:rgba(244,239,228,0.7); }

.requested-time-row{ display:flex; gap:10px; margin-bottom:10px; }
.requested-time-row input{ flex:1; }

.confetti-piece{
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:999;
  animation:confetti-fall 1.7s cubic-bezier(.25,.6,.4,1) forwards;
}
@keyframes confetti-fall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  100%{ transform:translate(var(--tx,0), var(--ty,200px)) rotate(var(--rot,360deg)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .confetti-piece{ display:none; }
}

.gallery-grid img{ cursor:zoom-in; }

.lightbox-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(8,9,7,0.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
.lightbox-overlay.open{ opacity:1; visibility:visible; }
.lightbox-overlay img{ max-width:88vw; max-height:82vh; object-fit:contain; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,0.06); border:1px solid var(--line); color:var(--gold-lt);
  cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:50%;
  font-size:20px; line-height:1; transition:background .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(198,162,77,0.18); }
.lightbox-close{ top:18px; right:18px; width:42px; height:42px; }
.lightbox-prev, .lightbox-next{ top:50%; transform:translateY(-50%); width:48px; height:48px; }
.lightbox-prev{ left:14px; }
.lightbox-next{ right:14px; }
.lightbox-count{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-size:12px; letter-spacing:0.08em; color:rgba(244,239,228,0.6); }
@media (max-width:560px){
  .lightbox-prev, .lightbox-next{ width:40px; height:40px; font-size:18px; }
  .lightbox-close{ width:38px; height:38px; top:10px; right:10px; }
}

.pwa-banner{
  position:fixed; left:14px; right:14px; bottom:14px; z-index:500;
  max-width:480px; margin:0 auto;
  background:var(--ink2); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; display:flex; align-items:center; gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  transform:translateY(140%); opacity:0; transition:transform .3s ease, opacity .3s ease;
  pointer-events:none;
}
.pwa-banner.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.pwa-banner img{ width:36px; height:36px; border-radius:8px; flex:0 0 auto; }
.pwa-banner .pwa-text{ flex:1; font-size:12.5px; line-height:1.4; color:var(--cream); }
.pwa-banner .pwa-text strong{ display:block; font-size:13.5px; color:var(--gold-lt); margin-bottom:2px; font-family:'Cormorant Garamond',serif; font-weight:500; }
.pwa-banner .pwa-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.pwa-banner .pwa-install-btn{
  background:var(--gold); color:var(--ink); border:none; border-radius:8px;
  padding:8px 14px; font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
  font-family:'Jost',sans-serif; font-weight:400; cursor:pointer; white-space:nowrap;
}
.pwa-banner .pwa-dismiss{
  background:none; border:none; color:rgba(244,239,228,0.5); font-size:20px; line-height:1;
  cursor:pointer; padding:4px 6px;
}
@media (max-width:480px){
  .pwa-banner{ left:10px; right:10px; bottom:10px; flex-wrap:wrap; }
  .pwa-banner .pwa-text{ flex:1 1 100%; }
}