/* ==========================================================================
   SA DESIGNS — Design tokens
   ========================================================================== */
:root{
  --ivory:        #FBF7EF;
  --ivory-deep:   #F2E9D8;
  --ivory-line:   #E9DEC7;
  --ink:          #2A241C;
  --ink-soft:     #6B6153;
  --gold:         #B08D57;
  --gold-deep:    #8A6A38;
  --gold-light:   #E7D2A4;
  --gold-glow:    rgba(176,141,87,.18);

  --serif: 'Cormorant Garamond', serif;
  --sans:  'Poppins', sans-serif;

  --ease: cubic-bezier(.22,.68,.15,1);
  --radius: 22px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family: var(--serif); font-weight:500; margin:0; color:var(--ink); }
p{ margin:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* subtle grain overlay for texture */
.grain{
  position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index:1000;
  padding: 18px 6vw;
  display:flex; justify-content:center;
  transform: translateY(-120%);
  transition: transform .5s var(--ease), background .4s ease, box-shadow .4s ease;
}
.site-nav.show{ transform: translateY(0); }
.site-nav.scrolled{
  background: rgba(251,247,239,.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--ivory-line);
}
.nav-inner{
  width:100%; max-width:1180px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{
  font-family: var(--serif); font-size:1.25rem; letter-spacing:.05em; color:var(--ink);
}
.nav-logo span{ color: var(--gold); font-style: italic; }
.nav-links{ display:flex; gap:38px; }
.nav-links a{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
  transition: width .35s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-links a:hover{ color: var(--ink); }
.nav-ig{
  width:36px; height:36px; border:1px solid var(--gold-light); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold-deep);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.nav-ig:hover{ background:var(--gold); color:#fff; transform: rotate(-8deg) scale(1.06); }
@media (max-width: 720px){ .nav-links{ display:none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 120px 6vw 80px;
  overflow:hidden;
}
.hero-glow{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(600px 420px at 50% 8%, var(--gold-glow), transparent 70%),
    radial-gradient(500px 500px at 90% 90%, rgba(176,141,87,.10), transparent 65%),
    radial-gradient(500px 500px at 5% 85%, rgba(176,141,87,.10), transparent 65%);
}
.hero-content{ position:relative; z-index:1; max-width:760px; display:flex; flex-direction:column; align-items:center; }

.logo-frame{
  width:104px; height:104px; border-radius:50%;
  padding:6px;
  background: conic-gradient(from 180deg, var(--gold-light), var(--gold), var(--gold-light), var(--gold-deep), var(--gold-light));
  margin-bottom:26px;
  animation: rotateRing 12s linear infinite;
}
@keyframes rotateRing{ to{ transform: rotate(360deg); } }
.logo-frame .logo-img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  border: 4px solid var(--ivory);
  background: var(--ivory);
}

.ig-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 18px; margin-bottom: 22px;
  border:1px solid var(--gold-light); border-radius:40px;
  font-size:.78rem; letter-spacing:.08em; color:var(--gold-deep);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.ig-pill:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }

.hero .eyebrow{ text-align:center; }

.hero-title{
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  line-height:1.12;
  letter-spacing:.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.hero-title em{ color: var(--gold-deep); font-style:italic; }

.ornament{ display:flex; align-items:center; gap:10px; margin: 22px 0; }
.ornament span{ width:46px; height:1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament span:last-child{ background: linear-gradient(90deg, var(--gold), transparent); }
.ornament i{ width:6px; height:6px; background:var(--gold); transform:rotate(45deg); display:block; }

.hero-desc{
  font-size: 1.02rem; font-weight:300; color: var(--ink-soft);
  max-width: 440px; line-height:1.7; margin-bottom: 38px;
}

.btn-gold{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  padding: 16px 40px;
  border: 1px solid var(--gold);
  border-radius: 40px;
  font-family: var(--sans); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--gold-deep);
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn-gold span{ position:relative; z-index:2; }
.btn-gold::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(120deg, var(--gold-deep), var(--gold));
  transform: translateX(-101%); transition: transform .45s var(--ease);
}
.btn-gold:hover{ color:#fff; }
.btn-gold:hover::before{ transform: translateX(0); }

.scroll-cue{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.65rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);
}
.scroll-line{ width:1px; height:34px; background: linear-gradient(var(--gold), transparent); animation: pulseLine 2.4s ease-in-out infinite; }
@keyframes pulseLine{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ==========================================================================
   About / What We Do
   ========================================================================== */
.about{ padding: 110px 6vw; max-width:1180px; margin:0 auto; }
.about-grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:70px; align-items:center;
}
.about-frame{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 40px 80px -30px rgba(42,36,28,.28);
  border: 1px solid var(--ivory-line);
  transform: rotate(-1.4deg);
  transition: transform .6s var(--ease);
}
.about-media:hover .about-frame{ transform: rotate(0deg) scale(1.01); }
.about-frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }

.about-copy h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height:1.22; margin-bottom:22px; }
.about-copy h2 em{ color:var(--gold-deep); font-style:italic; }
.about-text{ color:var(--ink-soft); line-height:1.85; font-size:.98rem; max-width:460px; margin-bottom: 40px; }

.about-stats{ display:flex; gap:38px; flex-wrap:wrap; }
.about-stats div{ display:flex; flex-direction:column; gap:2px; }
.about-stats strong{ font-family:var(--serif); font-size:2.1rem; color:var(--gold-deep); font-weight:500; }
.about-stats span{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }

@media (max-width: 860px){
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .about-frame{ transform:none; max-width:360px; margin:0 auto; }
  .about-copy{ text-align:center; }
  .about-text{ margin-left:auto; margin-right:auto; }
  .about-stats{ justify-content:center; }
}

/* ==========================================================================
   Work / Portfolio cards
   ========================================================================== */
.work{ padding: 90px 6vw 130px; max-width:1280px; margin:0 auto; }
.work-head{ text-align:center; max-width:640px; margin: 0 auto 64px; }
.work-head h2{ font-size: clamp(1.9rem,3.6vw,2.7rem); line-height:1.2; }
.work-head h2 em{ font-style:italic; color:var(--gold-deep); }

.cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
}
@media (max-width: 980px){ .cards{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }

.package-card{
  background: #fff;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--ivory-line);
  box-shadow: 0 24px 50px -30px rgba(42,36,28,.22);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
  display:flex; flex-direction:column;
}
.package-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 40px 70px -28px rgba(42,36,28,.32);
}

.card-media{ position:relative; aspect-ratio: 4/5; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease); }
.package-card:hover .card-media img{ transform: scale(1.08); }
.card-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(20,16,10,.62) 100%);
}
.tier-tag{
  position:absolute; top:18px; left:18px; z-index:2;
  padding:6px 14px; border-radius:30px;
  background: rgba(251,247,239,.9); backdrop-filter: blur(6px);
  font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep);
}
.card-media-caption{
  position:absolute; left:22px; bottom:18px; z-index:2; color:#fff;
  font-family:var(--serif); font-size:1.5rem; font-style:italic;
}

.card-body{ padding: 28px 26px 30px; display:flex; flex-direction:column; flex:1; }
.card-body h3{ font-size:1.5rem; margin-bottom:10px; }
.card-desc{ color:var(--ink-soft); font-size:.92rem; line-height:1.7; margin-bottom:22px; }

.btn-preview{
  align-self:flex-start;
  position:relative; overflow:hidden;
  padding: 12px 28px; margin-bottom: 18px;
  border:1px solid var(--gold); border-radius:40px;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); background:transparent; cursor:pointer;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.btn-preview span{ position:relative; z-index:2; }
.btn-preview::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(120deg, var(--gold-deep), var(--gold));
  transform: translateX(-101%); transition: transform .4s var(--ease);
}
.btn-preview:hover{ color:#fff; }
.btn-preview:hover::before{ transform: translateX(0); }

.requirements{ border-top:1px solid var(--ivory-line); padding-top:16px; margin-top:auto; }
.requirements summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}
.requirements summary::-webkit-details-marker{ display:none; }
.requirements summary::after{
  content:'+'; font-family:var(--serif); font-size:1.1rem; color:var(--gold); transition: transform .3s var(--ease);
}
.requirements[open] summary::after{ content:'–'; }
.requirements ul{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.requirements li{
  font-size:.84rem; color:var(--ink); padding-left:18px; position:relative; line-height:1.5;
}
.requirements li::before{
  content:''; position:absolute; left:0; top:8px; width:5px; height:5px; background:var(--gold); border-radius:50%;
}
.requirements .opt{ color:var(--ink-soft); font-style:italic; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  text-align:center; padding: 90px 6vw 46px;
  border-top:1px solid var(--ivory-line);
  background: linear-gradient(180deg, transparent, var(--ivory-deep) 120%);
}
.footer-ornament{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:30px; }
.footer-ornament span{ width:46px; height:1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.footer-ornament span:last-child{ background: linear-gradient(90deg, var(--gold), transparent); }
.footer-ornament i{ width:6px; height:6px; background:var(--gold); transform:rotate(45deg); display:block; }

.footer-ig{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; border:1px solid var(--gold-light);
  color:var(--gold-deep); margin-bottom:18px;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.footer-ig:hover{ background:var(--gold); color:#fff; transform: translateY(-4px); }
.footer-follow{ font-size:.9rem; color:var(--ink-soft); margin-bottom:4px; }
.footer-handle{ font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--gold-deep); margin-bottom:26px; }
.footer-copy{ font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft); opacity:.8; }

/* ==========================================================================
   Preview Modal
   ========================================================================== */
.preview-modal{
  position:fixed; inset:0; z-index:3000;
  display:flex; align-items:center; justify-content:center;
  padding: 3vh 0;
  background: rgba(20,16,10,.55);
  backdrop-filter: blur(6px);
  opacity:0; visibility:hidden;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.preview-modal.open{ opacity:1; visibility:visible; }

.preview-shell{
  position:relative;
  width:min(94vw, 460px);
  height: 94svh;
  background: var(--ivory);
  border-radius: 34px;
  overflow:hidden;
  box-shadow: 0 60px 120px -30px rgba(0,0,0,.5);
  transform: scale(.86) rotateX(6deg);
  opacity:0;
  transition: transform .55s var(--ease), opacity .5s var(--ease);
  border: 6px solid #1c1712;
}
.preview-modal.open .preview-shell{ transform: scale(1) rotateX(0); opacity:1; }

.preview-close{
  position:absolute; top:16px; right:16px; z-index:20;
  width:36px; height:36px; border-radius:50%;
  background: rgba(20,16,10,.5); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(6px);
  transition: background .3s ease, transform .3s ease;
}
.preview-close:hover{ background: var(--gold); transform: rotate(90deg); }

.preview-scroll{ height:100%; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; }
.preview-scroll::-webkit-scrollbar{ width:4px; }
.preview-scroll::-webkit-scrollbar-thumb{ background: var(--gold-light); border-radius:4px; }

@media (min-width: 640px){
  .preview-shell{ width: 420px; border-radius: 44px; border-width:10px; }
}

/* ---- shared preview building blocks ---- */
.pv-hero{
  position:relative; min-height: 100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 60px 30px; color:#fff; background-size:cover; background-position:center;
}
.pv-hero::before{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,10,.35), rgba(20,16,10,.75)); }
.pv-hero > *{ position:relative; z-index:1; }
.pv-eyebrow{ font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-light); margin-bottom:18px; }
.pv-names{ font-family:var(--serif); font-style:italic; font-size:2.6rem; line-height:1.15; margin-bottom:16px; }
.pv-amp{ display:block; font-size:1.6rem; color:var(--gold-light); margin: 4px 0; }
.pv-divider{ width:44px; height:1px; background:var(--gold-light); margin: 18px 0; }
.pv-sub{ font-size:.82rem; letter-spacing:.08em; opacity:.9; }

.pv-section{ padding: 56px 30px; text-align:center; }
.pv-section.alt{ background: var(--ivory-deep); }
.pv-section h3{ font-size:1.6rem; font-style:italic; color:var(--gold-deep); margin-bottom:8px; }
.pv-section .pv-eyebrow-dark{ font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:10px; display:block; }
.pv-body-text{ font-size:.86rem; color:var(--ink-soft); line-height:1.8; max-width:320px; margin:0 auto; }

.pv-countdown{ display:flex; justify-content:center; gap:14px; margin-top:26px; flex-wrap:wrap; }
.pv-countdown div{ display:flex; flex-direction:column; align-items:center; min-width:56px; }
.pv-countdown strong{ font-family:var(--serif); font-size:1.9rem; color:var(--gold-deep); }
.pv-countdown span{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px; }

.pv-details{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.pv-detail-item{
  display:flex; align-items:center; gap:14px; text-align:left;
  background:#fff; border:1px solid var(--ivory-line); border-radius:16px; padding:14px 16px;
}
.pv-detail-item .ic{
  width:38px; height:38px; border-radius:50%; background:var(--ivory-deep); color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pv-detail-item strong{ display:block; font-size:.82rem; color:var(--ink); font-weight:500; }
.pv-detail-item span{ font-size:.76rem; color:var(--ink-soft); }

.pv-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:26px; }
.pv-gallery img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; transition: transform .4s var(--ease); }
.pv-gallery img:hover{ transform: scale(1.06); }

.pv-map{
  margin-top:24px; border-radius:16px; overflow:hidden; border:1px solid var(--ivory-line);
  aspect-ratio: 16/10; position:relative; background: var(--ivory-deep);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
}
.pv-map .ic{ color: var(--gold-deep); }
.pv-map span{ font-size:.72rem; color:var(--ink-soft); letter-spacing:.05em; }

.pv-cta{
  display:inline-block; margin-top:26px; padding:13px 30px; border:1px solid var(--gold); border-radius:40px;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep);
}

.pv-story-item{ text-align:left; display:flex; gap:16px; margin-bottom:26px; }
.pv-story-item .dot-line{ display:flex; flex-direction:column; align-items:center; }
.pv-story-item .dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.pv-story-item .line{ width:1px; flex:1; background:var(--ivory-line); margin-top:4px; }
.pv-story-item h4{ font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--gold-deep); margin:0 0 4px; }
.pv-story-item p{ font-size:.8rem; color:var(--ink-soft); line-height:1.7; }

.pv-rsvp-form{ display:flex; flex-direction:column; gap:12px; margin-top:24px; text-align:left; }
.pv-rsvp-form input, .pv-rsvp-form select{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--ivory-line);
  background:#fff; font-family:var(--sans); font-size:.82rem; color:var(--ink); outline:none;
}
.pv-rsvp-form input:focus, .pv-rsvp-form select:focus{ border-color:var(--gold); }
.pv-rsvp-form label{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:-6px; }

.pv-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px; }
.pv-tags span{
  padding:8px 16px; border-radius:30px; background:#fff; border:1px solid var(--ivory-line);
  font-size:.72rem; color:var(--ink-soft);
}

.pv-music{
  position:absolute; top:16px; left:16px; z-index:20;
  width:36px; height:36px; border-radius:50%; background:rgba(20,16,10,.5); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter: blur(6px);
}
.pv-music.playing svg{ animation: spinDisc 3s linear infinite; }
@keyframes spinDisc{ to{ transform: rotate(360deg); } }

.pv-footer-note{ text-align:center; padding: 40px 30px 60px; font-size:.7rem; letter-spacing:.08em; color:var(--ink-soft); }
.pv-footer-note em{ color:var(--gold-deep); font-style:italic; font-family:var(--serif); font-size:.95rem; display:block; margin-bottom:6px; }