@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:#0b0d14;
  --ink-2:#12151f;
  --panel:#181c29;
  --royal:#1d3ba8;
  --royal-bright:#3f5fe0;
  --royal-deep:#122a7a;
  --wine:#7a1f3d;
  --gold:#cda45e;
  --gold-soft:#e3c98c;
  --emerald:#1f7a5c;
  --rose:#c23b5e;
  --amethyst:#5a3b8c;
  --cream:#f3ede2;
  --dim:#98a1bd;
  --border:rgba(243,237,226,0.12);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{height:auto;}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:'Manrope', system-ui, sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--royal); color:var(--cream);}
a{color:inherit;}
.mono{font-family:'Space Mono', ui-monospace, monospace;}
.serif{font-family:'Fraunces', Georgia, serif;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--panel); border-radius:6px; border:2px solid var(--ink);}
::-webkit-scrollbar-thumb:hover{background:var(--royal-bright);}

#glow{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(560px circle at var(--x,50%) var(--y,50%), rgba(63,95,224,0.10), transparent 42%);
}

/* ---------- header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px clamp(20px,5vw,60px);
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  background:rgba(11,13,20,0.68); backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--border);
  transition:transform .4s ease, background .3s ease;
}
header.hide{transform:translateY(-100%);}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;}
.crest{width:30px; height:30px; flex-shrink:0;}
.brand-name{font-family:'Fraunces', serif; font-size:1.08rem; letter-spacing:.01em; font-weight:600;}

.navlinks{display:flex; flex:1; justify-content:center;}
.navlinks ul{list-style:none; display:flex; align-items:center; gap:4px; margin:0; padding:5px; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:4px;}
.navlinks a{
  text-decoration:none; font-size:.9rem; font-weight:500; color:var(--dim);
  padding:9px 18px; border-radius:2px; transition:color .25s ease, background .25s ease;
}
.navlinks a:hover{color:var(--cream); background:rgba(255,255,255,0.06);}
.navlinks a.active{color:var(--cream); background:linear-gradient(100deg, var(--royal), var(--royal-deep));}

.btn{
  display:inline-flex; align-items:center; gap:9px; padding:12px 24px; border-radius:3px;
  font-size:.88rem; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease, background .25s ease;
  position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent;
}
.btn.primary{background:linear-gradient(100deg, var(--royal), var(--royal-deep)); color:var(--cream); border:1px solid rgba(205,164,94,.35);}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(29,59,168,.7); border-color:var(--gold-soft);}
.btn.ghost{border-color:var(--border); color:var(--cream); background:transparent;}
.btn.ghost:hover{border-color:var(--royal-bright); color:var(--royal-bright); transform:translateY(-2px);}
.btn:active{transform:scale(.93);}
.header-cta{padding:10px 22px; font-size:.85rem; flex-shrink:0;}
.mobile-cta{display:none;}

/* ---------- ripple ---------- */
.ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.4);
  transform:scale(0); pointer-events:none; animation:rippleAnim .55s ease-out forwards;
}
@keyframes rippleAnim{ to{ transform:scale(1); opacity:0; } }

/* ---------- mobile floating book button ---------- */
.fab-book{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:150;
  display:none; align-items:center; gap:8px; padding:14px 20px; border-radius:3px;
  background:linear-gradient(100deg, var(--royal), var(--royal-deep)); color:var(--cream);
  border:1px solid var(--gold); font-weight:700; font-size:.85rem; text-decoration:none;
  box-shadow:0 14px 32px -8px rgba(29,59,168,.65);
  opacity:0; transform:translateY(30px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden; -webkit-tap-highlight-color:transparent;
}
.fab-book.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.fab-book:active{transform:scale(.92);}
@media (max-width:820px){ .fab-book{display:inline-flex;} }

#menuBtn{display:none;}

/* ---------- layout ---------- */
section{padding:clamp(90px,14vw,130px) clamp(20px,5vw,60px) clamp(60px,8vw,96px); max-width:1180px; margin:0 auto; position:relative;}
.eyebrow{
  font-family:'Space Mono',monospace; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--royal-bright); margin:0 0 16px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:24px; height:1px; background:var(--royal-bright);}
h2.title{font-family:'Fraunces', serif; font-size:clamp(2rem,3.6vw,2.9rem); margin:0 0 40px; font-weight:500; text-wrap:balance;}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- hero ---------- */
.hero{
  min-height:100svh; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:40px;
  padding-top:calc(clamp(90px,14vw,130px) + env(safe-area-inset-top,0px)); position:relative;
}
@media (max-width:900px){ .hero{grid-template-columns:1fr;} }

.hero-kicker{font-family:'Space Mono',monospace; color:var(--dim); font-size:.85rem; letter-spacing:.08em; margin-bottom:20px; display:flex; align-items:center; gap:10px; text-transform:uppercase;}
.hero-kicker .dot2{width:6px; height:6px; border-radius:50%; background:var(--royal-bright); box-shadow:0 0 10px var(--royal-bright); animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}

h1{font-family:'Fraunces', serif; font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:1.05; margin:0 0 24px; font-weight:500; letter-spacing:-.01em; text-wrap:balance;}
h1 .line{display:block; overflow:hidden;}
h1 .line span{display:inline-block; transform:translateY(110%); transition:transform .9s cubic-bezier(.16,.9,.2,1);}
h1.in .line span{transform:translateY(0); font-style:italic; padding:5px 0;}
h1 .line:nth-child(1) span{transition-delay:.05s;}
h1 .line:nth-child(2) span{transition-delay:.18s;}
h1 .accent{color:var(--royal-bright); text-transform:uppercase;}

.hero p.lead{max-width:480px; color:var(--dim); font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.75; margin:0 0 34px;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}

/* wax seal emblem */
.seal-wrap{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; max-width:420px; margin:0 auto;}
canvas#blob{position:absolute; inset:0; width:100%; height:100%; border-radius:50%;}
.seal-halo{
  position:absolute; width:84%; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 0deg,
    var(--royal-bright), var(--emerald), var(--gold-soft), var(--rose),
    var(--wine), var(--amethyst), var(--royal), var(--royal-bright));
  filter:blur(1px) saturate(1.15);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  animation:haloSpin 14s linear infinite;
  box-shadow:0 0 34px rgba(63,95,224,.35);
}
@keyframes haloSpin{to{transform:rotate(360deg);}}
.seal-ring{position:relative; width:72%; aspect-ratio:1; border-radius:50%; border:1px solid rgba(205,164,94,.5); display:flex; align-items:center; justify-content:center; background:var(--ink);}
.seal-ring::before{content:''; position:absolute; inset:14px; border-radius:50%; border:1px dashed rgba(205,164,94,.35);}
.seal-core{width:64%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--royal-bright), var(--royal-deep) 70%); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 30px rgba(0,0,0,.4), 0 0 40px rgba(29,59,168,.5); animation:sealspin 30s linear infinite;}
@keyframes sealspin{to{transform:rotate(360deg);}}
.seal-core svg{width:52%; height:52%;}
@media (prefers-reduced-motion: reduce){ .seal-halo{animation:none;} }

.scroll-cue{position:absolute; bottom:34px; left:clamp(20px,5vw,60px); display:flex; align-items:center; gap:10px; color:var(--dim); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-family:'Space Mono',monospace;}
.scroll-cue .line-drop{width:1px; height:32px; background:linear-gradient(var(--royal-bright), transparent); animation:drop 1.8s ease-in-out infinite;}
@keyframes drop{0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 50.01%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;}}

/* ---------- ribbon banner ---------- */
.ribbon-banner{position:relative; padding:20px 0; margin:20px 0 0; overflow:hidden; transform:rotate(-1deg); background:linear-gradient(90deg, var(--royal-deep), var(--royal) 50%, var(--royal-deep)); border-top:1px solid rgba(205,164,94,.4); border-bottom:1px solid rgba(205,164,94,.4);}
.ribbon-track{display:flex; width:max-content; gap:40px; animation:scroll 24s linear infinite;}
.ribbon-track:hover{animation-play-state:paused;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.ribbon-track span{font-family:'Space Mono',monospace; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); white-space:nowrap; display:flex; align-items:center; gap:40px;}
.ribbon-track span::after{content:'✦'; color:var(--cream); font-size:.7rem; margin-left:40px;}

/* ---------- services menu ---------- */
.menu{display:flex; flex-direction:column;}
.menu-row{
  display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:22px;
  padding:28px 0; border-top:1px solid var(--border); position:relative;
}
.menu-row:last-child{border-bottom:1px solid var(--border);}
.menu-row::before{content:''; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:var(--royal-bright); transition:width .5s ease;}
.menu-row:hover::before{width:100%;}
.menu-num{font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem; color:var(--royal-bright);}
.menu-main h3{font-family:'Fraunces',serif; font-weight:500; font-size:1.5rem; margin:0 0 8px; transition:color .3s;}
.menu-row:hover .menu-main h3{color:var(--royal-bright);}
.menu-main p{margin:0; color:var(--dim); line-height:1.7; font-size:.92rem; max-width:480px;}
.menu-chip{
  width:52px; height:52px; border-radius:50%; flex-shrink:0; position:relative; overflow:hidden;
  border:1px solid rgba(205,164,94,.4);
}
.menu-chip::after{content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.3) 42%, transparent 58%); transform:translateX(-140%); transition:transform .8s ease;}
.menu-row:hover .menu-chip::after{transform:translateX(140%);}
.chip-1{background:linear-gradient(135deg,var(--royal),var(--royal-deep));}
.chip-3{background:linear-gradient(135deg,var(--wine),var(--royal));}
@media (max-width:640px){ .menu-row{grid-template-columns:40px 1fr;} .menu-chip{display:none;} }

/* ---------- gallery filmstrip ---------- */
.filmstrip{display:flex; gap:16px; overflow-x:auto; overflow-y:hidden; padding:8px 4px 20px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
.filmstrip::-webkit-scrollbar{height:8px;}
.film-tile{
  flex:0 0 200px; scroll-snap-align:start; border-radius:14px; aspect-ratio:3/4; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:14px; transition:transform .35s ease;
  background-color:var(--panel);
  cursor:pointer;
}
.film-tile:hover{transform:translateY(-8px);}
.film-tile:active{transform:scale(.96);}
.film-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.film-tile::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.05) 45%, transparent 65%); transition:opacity .35s ease;}
.film-tile:hover::before{opacity:.75;}
.film-tile::after{content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.22) 42%, transparent 58%); transform:translateX(-140%); transition:transform .8s ease;}
.film-tile:hover::after{transform:translateX(140%);}
.film-label{position:relative; z-index:3; font-family:'Space Mono',monospace; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.94); background:rgba(0,0,0,.32); padding:5px 9px; border-radius:999px;}
.film-expand{
  position:absolute; top:10px; right:10px; z-index:3; width:28px; height:28px; border-radius:3px;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.85); transition:opacity .25s ease, transform .25s ease, border-color .25s ease;
}
.film-tile:hover .film-expand{opacity:1; transform:scale(1); border-color:var(--royal-bright);}
.filmstrip-cta{
  flex:0 0 200px; aspect-ratio:3/4; border-radius:14px; border:1px dashed var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
  text-decoration:none; padding:14px; scroll-snap-align:start;
}
.filmstrip-cta:hover{border-color:var(--royal-bright);}
.filmstrip-cta .ig-name{font-family:'Space Mono',monospace; font-size:.76rem; color:var(--royal-bright);}
.filmstrip-cta .ig-sub{font-size:.7rem; color:var(--dim);}
.drag-hint{font-family:'Space Mono',monospace; font-size:.7rem; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; margin:-16px 0 26px;}

/* ---------- booking invitation ---------- */
.invite{
  position:relative; background:var(--panel); border:1px solid var(--border);
  padding:clamp(40px,6vw,68px); text-align:center; overflow:hidden;
  clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
}
.invite::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%, rgba(29,59,168,.28), transparent 55%), radial-gradient(circle at 85% 85%, rgba(122,31,61,.22), transparent 55%);}
.invite-inner{position:relative;}
.invite h2{font-family:'Fraunces',serif; font-size:clamp(1.9rem,4vw,2.8rem); margin:0 0 16px; text-wrap:balance;}
.invite p{color:var(--dim); max-width:460px; margin:0 auto 30px; line-height:1.7;}
.contact-links{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

.seal-btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 30px; border-radius:3px;
  background:linear-gradient(100deg, var(--royal), var(--royal-deep)); color:var(--cream);
  border:1px solid var(--gold); font-weight:700; font-size:.9rem; text-decoration:none; cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent;
}
.seal-btn:hover{box-shadow:0 14px 30px -10px rgba(29,59,168,.7);}
.seal-btn:active{transform:scale(.93);}

.copy-field{
  display:inline-flex; align-items:center; gap:10px; background:var(--ink); border:1px solid var(--border);
  padding:11px 18px; border-radius:3px; font-family:'Space Mono',monospace; font-size:.85rem; cursor:pointer;
  transition:border-color .25s, background .25s;
}
.copy-field:hover{border-color:var(--royal-bright);}
.copy-field.copied{border-color:var(--gold); background:rgba(205,164,94,.12);}

footer{text-align:center; padding:30px 20px calc(30px + env(safe-area-inset-bottom,0px)); color:var(--dim); font-size:.8rem; border-top:1px solid var(--border);}

@media (max-width:820px){
  .navlinks{
    position:fixed; inset:0 0 0 auto; width:min(78vw,300px); height:100vh;
    background:var(--panel); border-left:1px solid var(--border); border-radius:0;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:100px 30px;
    transform:translateX(100%); transition:transform .4s ease; z-index:99;
  }
  .navlinks.open{transform:translateX(0);}
  .navlinks ul{flex-direction:column; align-items:flex-start; gap:10px; background:none; border:none; padding:0; width:100%;}
  .navlinks a{width:100%; padding:12px 16px; font-size:1rem;}
  .navlinks li{opacity:0; transform:translateX(24px); transition:opacity .35s ease, transform .35s ease;}
  .navlinks.open li{opacity:1; transform:translateX(0);}
  .navlinks.open li:nth-child(1){transition-delay:.06s;}
  .navlinks.open li:nth-child(2){transition-delay:.12s;}
  .navlinks.open li:nth-child(3){transition-delay:.18s;}
  .header-cta{display:none;}
  .mobile-cta{display:flex; margin-top:20px; opacity:0; transform:translateY(16px); transition:opacity .35s ease, transform .35s ease;}
  .navlinks.open .mobile-cta{opacity:1; transform:translateY(0); transition-delay:.24s;}
  #menuBtn{
    display:flex; width:38px; height:38px; align-items:center; justify-content:center;
    background:none; border:1px solid var(--border); border-radius:8px; color:var(--cream);
    cursor:pointer; z-index:101; flex-direction:column; gap:5px;
  }
  #menuBtn span{width:16px; height:1.5px; background:var(--cream); transition:transform .3s, opacity .3s;}
  #menuBtn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  #menuBtn.open span:nth-child(2){opacity:0;}
  #menuBtn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  h1 .line span{transform:translateY(0) !important;}
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; padding:24px;
  background:rgba(11,13,20,0.92); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
}
.lightbox[hidden]{display:none;}
.lightbox-frame{position:relative; max-width:90vw; max-height:85vh;}
.lightbox-frame img{
  display:block; max-width:90vw; max-height:85vh; width:auto; height:auto;
  border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:lightboxIn .25s ease;
}
.lightbox-cap{
  position:absolute; left:12px; bottom:12px; font-family:'Space Mono',monospace; font-size:.7rem;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.94);
  background:rgba(0,0,0,.4); padding:6px 11px; border-radius:3px;
}
@keyframes lightboxIn{from{opacity:0; transform:scale(.96);} to{opacity:1; transform:scale(1);}}
.lightbox-close{
  position:fixed; top:24px; right:24px; width:42px; height:42px; border-radius:3px;
  border:1px solid var(--border); background:rgba(255,255,255,0.06); color:var(--cream);
  font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .25s ease, color .25s ease;
}
.lightbox-close:hover{border-color:var(--royal-bright); color:var(--royal-bright);}