/* =====================================================
   VOWS WEDDING STORY — editorial romance
   Fonts: Fraunces (display) · Jost (body) · Ephesis (script)
   ===================================================== */
:root{
  --cream:#F6F1E7;
  --paper:#FBF8F1;
  --ink:#241C12;
  --ink-soft:#57503F;
  --clay:#A65B3B;
  --clay-deep:#8C462A;
  --gold:#B08A3E;
  --sage:#6E7561;
  --line:rgba(36,28,18,.16);
  --shadow:0 30px 60px -30px rgba(36,28,18,.35);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Jost",Avenir,sans-serif;
  --script:"Ephesis",cursive;
  --ease:cubic-bezier(.22,.9,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:400 1.06rem/1.75 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--clay);color:var(--cream)}

.wrap{width:min(1180px,92vw);margin-inline:auto}
.section{padding:clamp(4.5rem,9vw,8rem) 0}

/* ---- grain overlay ---- */
.grain{
  position:fixed;inset:-50%;z-index:120;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,2%)}
}

/* ---- type helpers ---- */
.eyebrow{
  font:500 .78rem/1 var(--sans);
  letter-spacing:.34em;text-transform:uppercase;color:var(--clay);
  margin:0 0 1.1rem;display:flex;align-items:center;gap:.9rem;
}
.eyebrow::before{content:"";width:2.4rem;height:1px;background:var(--clay);opacity:.7}
.h2{
  font:300 clamp(2.1rem,4.6vw,3.6rem)/1.12 var(--serif);
  letter-spacing:-.015em;margin:0 0 1.4rem;
}
.h2 em{font-style:italic;font-weight:400;color:var(--clay)}
.sec-head{position:relative;margin-bottom:clamp(2.4rem,5vw,4rem)}
.sec-script{
  position:absolute;right:0;top:.4rem;
  font:400 clamp(2.4rem,5vw,4rem)/1 var(--script);color:var(--gold);
  opacity:.55;transform:rotate(-4deg);pointer-events:none;
}
.sec-head--center{text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head--center .eyebrow::before{display:none}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font:500 .82rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  padding:1.05rem 1.9rem;border-radius:999px;border:1px solid var(--ink);
  cursor:pointer;transition:all .45s var(--ease);white-space:nowrap;
}
.btn .arrow{transition:transform .45s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}
.btn--solid{background:var(--ink);color:var(--cream)}
.btn--solid:hover{background:var(--clay-deep);border-color:var(--clay-deep)}
.btn--outline{background:transparent;color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--cream)}
.btn--ghost{border-color:transparent;padding-inline:.4rem}
.btn--ghost:hover{color:var(--clay-deep)}
.btn--wide{width:100%;justify-content:center}

/* ---- nav ---- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:2.2rem;
  padding:1.15rem 4vw;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(246,241,231,.88);backdrop-filter:blur(14px);
  padding-block:.7rem;box-shadow:0 1px 0 var(--line);
}
.brand{display:flex;align-items:baseline;gap:.55rem;margin-right:auto}
.brand-script{font:400 2.1rem/1 var(--script);color:var(--clay)}
.brand-caps{font:500 .72rem/1.25 var(--sans);letter-spacing:.32em;text-transform:uppercase}
.nav-links{display:flex;gap:1.9rem}
.nav-links a{font:400 .86rem/1 var(--sans);letter-spacing:.12em;position:relative;padding-block:.4rem}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--clay);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{padding:.75rem 1.4rem}
.burger{
  display:none;background:none;border:0;width:2.4rem;height:2rem;
  flex-direction:column;justify-content:center;gap:.45rem;cursor:pointer;
}
.burger span{display:block;height:1.5px;background:var(--ink);transition:all .35s var(--ease)}
.burger.is-open span:first-child{transform:translateY(.34rem) rotate(45deg)}
.burger.is-open span:last-child{transform:translateY(-.34rem) rotate(-45deg)}

/* ---- hero ---- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;padding:clamp(7rem,14vh,9rem) 0 3rem;
  background:
    radial-gradient(58rem 30rem at 88% -8%,rgba(176,138,62,.16),transparent 62%),
    radial-gradient(46rem 30rem at -12% 88%,rgba(166,91,59,.14),transparent 60%),
    var(--cream);
}
.hero-inner{
  width:min(1180px,92vw);margin-inline:auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:center;
}
.hero-title{
  font:300 clamp(3rem,7.2vw,5.6rem)/1.04 var(--serif);
  letter-spacing:-.02em;margin:0 0 1.8rem;
}
.hero-title span{display:block}
.hero-title em{font-style:italic;font-weight:400;color:var(--clay)}
.hero-sub{max-width:34rem;color:var(--ink-soft);margin:0 0 2.4rem;font-size:1.08rem}
.hero-actions{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center}

.hero-visual{position:relative;justify-self:end;width:min(26rem,80vw)}
.arch{
  margin:0;border-radius:12rem 12rem 1rem 1rem;overflow:hidden;
  box-shadow:var(--shadow);border:1px solid rgba(36,28,18,.08);
}
.arch img{width:100%;height:32rem;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.hero-visual:hover .arch img{transform:scale(1)}
.hero-badge{
  position:absolute;left:-3.4rem;bottom:2.6rem;
  background:var(--paper);border:1px solid var(--line);border-radius:1rem;
  padding:1rem 1.3rem;display:flex;align-items:center;gap:.8rem;
  box-shadow:0 18px 40px -20px rgba(36,28,18,.4);
}
.hero-badge strong{font:300 2.1rem/1 var(--serif);color:var(--clay)}
.hero-badge span{font:500 .72rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.hero-script{
  position:absolute;top:-2.6rem;right:-1.2rem;
  font:400 3.4rem/1 var(--script);color:var(--gold);transform:rotate(-8deg);
}
.scroll-hint{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font:500 .68rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);
}
.scroll-hint-line{width:1px;height:3rem;background:var(--ink);opacity:.5;animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- marquee ---- */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);
  background:var(--ink);color:var(--cream);padding:1rem 0;
}
.marquee-track{display:flex;gap:2.4rem;width:max-content;animation:marquee 26s linear infinite}
.marquee-track span{font:italic 300 1.5rem/1 var(--serif);letter-spacing:.06em;white-space:nowrap}
.marquee-track i{color:var(--gold);font-style:normal;align-self:center}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- about ---- */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.about-visual{position:relative;min-height:34rem}
.about-img{margin:0;position:absolute;overflow:hidden;border-radius:.8rem;box-shadow:var(--shadow)}
.about-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.about-img:hover img{transform:scale(1.05)}
.a-img1{top:0;left:0;width:62%;height:24rem;border-radius:12rem 12rem .8rem .8rem}
.a-img2{bottom:0;right:0;width:52%;height:15rem}
.about-stamp{
  position:absolute;top:1rem;right:8%;
  width:6rem;height:6rem;border:1px solid var(--clay);border-radius:50%;
  display:grid;place-items:center;text-align:center;
  font:500 .62rem/1.6 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--clay);
  transform:rotate(10deg);background:var(--paper);
}
.about-copy .stats{list-style:none;display:flex;gap:2.6rem;padding:0;margin:2.4rem 0 0;flex-wrap:wrap}
.about-copy .stats li{display:flex;flex-direction:column;gap:.2rem}
.about-copy .stats strong{font:300 2.6rem/1 var(--serif);color:var(--clay)}
.about-copy .stats span{font:500 .7rem/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.about-copy p:not(.eyebrow){color:var(--ink-soft)}

/* ---- services ---- */
.svc-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.svc{
  display:grid;grid-template-columns:5rem 1fr 11rem;gap:2rem;align-items:center;
  padding:2.1rem 0;border-bottom:1px solid var(--line);position:relative;
  transition:background .4s var(--ease),padding .4s var(--ease);
}
.svc:hover{background:rgba(166,91,59,.05);padding-left:1.2rem}
.svc-no{font:italic 300 1.4rem/1 var(--serif);color:var(--gold)}
.svc-body h3{font:400 clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--serif);margin:0 0 .5rem;letter-spacing:-.01em}
.svc-body p{margin:0;color:var(--ink-soft);max-width:44rem}
.svc-img{
  margin:0;width:11rem;height:7.4rem;border-radius:.7rem;overflow:hidden;
  opacity:0;transform:rotate(4deg) scale(.92);transition:all .5s var(--ease);
}
.svc:hover .svc-img{opacity:1;transform:rotate(0) scale(1)}
.svc-img img{width:100%;height:100%;object-fit:cover}

/* ---- process ---- */
.process{background:var(--ink);color:var(--cream)}
.process .h2 em{color:var(--gold)}
.process .eyebrow{color:var(--gold)}
.process .eyebrow::before{background:var(--gold)}
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:step;
}
.step{
  border:1px solid rgba(246,241,231,.16);border-radius:1rem;
  padding:2rem 1.6rem;position:relative;
  background:linear-gradient(160deg,rgba(246,241,231,.05),transparent 55%);
  transition:transform .45s var(--ease),border-color .45s var(--ease);
}
.step:hover{transform:translateY(-6px);border-color:rgba(176,138,62,.6)}
.step-no{
  font:italic 300 3.2rem/1 var(--serif);color:var(--gold);opacity:.85;display:block;margin-bottom:1rem;
}
.step h3{font:400 1.3rem/1.25 var(--serif);margin:0 0 .7rem}
.step p{margin:0;font-size:.95rem;color:rgba(246,241,231,.72)}

/* ---- gallery ---- */
.masonry{columns:3;column-gap:1.4rem}
.shot{
  margin:0 0 1.4rem;break-inside:avoid;position:relative;cursor:zoom-in;
  border-radius:.8rem;overflow:hidden;
}
.shot img{width:100%;transition:transform .8s var(--ease)}
.shot:hover img{transform:scale(1.06)}
.shot figcaption{
  position:absolute;inset:auto 0 0 0;padding:2.4rem 1rem .9rem;
  font:500 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cream);
  background:linear-gradient(transparent,rgba(36,28,18,.72));
  opacity:0;transform:translateY(8px);transition:all .45s var(--ease);
}
.shot:hover figcaption{opacity:1;transform:none}
.gallery-note{text-align:center;margin-top:2.6rem;color:var(--ink-soft)}
.gallery-note a{color:var(--clay);border-bottom:1px solid currentColor}

/* ---- testimonials ---- */
.testimonials{background:var(--paper)}
.slider{max-width:46rem;margin-inline:auto;text-align:center}
.slides{position:relative;min-height:15rem}
.slide{
  margin:0;position:absolute;inset:0;opacity:0;visibility:hidden;
  transform:translateY(14px);transition:all .6s var(--ease);
}
.slide.is-active{opacity:1;visibility:visible;transform:none;position:relative}
.slide p{font:italic 300 clamp(1.15rem,2.2vw,1.5rem)/1.6 var(--serif);margin:0 0 1.6rem}
.slide p::before{content:"“";color:var(--gold);font-size:1.4em}
.slide footer{display:flex;flex-direction:column;gap:.15rem}
.slide footer strong{font:500 .9rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.slide footer span{font-size:.82rem;color:var(--ink-soft)}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.4rem}
.s-btn{
  width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid var(--line);
  background:transparent;cursor:pointer;font-size:1rem;color:var(--ink);
  transition:all .35s var(--ease);
}
.s-btn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.dots{display:flex;gap:.55rem}
.dots button{
  width:.55rem;height:.55rem;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:all .35s var(--ease);
}
.dots button.is-active{background:var(--clay);transform:scale(1.35)}

/* ---- faq ---- */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.faq-list{display:flex;flex-direction:column;gap:.9rem}
.faq-item{
  border:1px solid var(--line);border-radius:.9rem;background:var(--paper);
  padding:0;overflow:hidden;transition:border-color .35s var(--ease);
}
.faq-item[open]{border-color:var(--clay)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:1.25rem 1.5rem;
  font:400 1.08rem/1.4 var(--serif);display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--clay);transition:transform .35s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0;padding:0 1.5rem 1.4rem;color:var(--ink-soft)}

/* ---- contact ---- */
.contact{
  background:
    radial-gradient(40rem 24rem at 110% 10%,rgba(176,138,62,.14),transparent 60%),
    var(--cream);
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.contact-list{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.2rem}
.contact-list li{display:flex;flex-direction:column;gap:.15rem;border-left:2px solid var(--clay);padding-left:1.1rem}
.c-label{font:500 .68rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
.contact-list a{font:400 1.15rem/1.5 var(--serif);transition:color .3s var(--ease)}
.contact-list a:hover{color:var(--clay-deep)}
.contact-form{
  background:var(--paper);border:1px solid var(--line);border-radius:1.2rem;
  padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow);
}
.field{margin-bottom:1.2rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field label{
  display:block;font:500 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.5rem;
}
.field input,.field textarea{
  width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;
  font:400 1rem/1.6 var(--sans);color:var(--ink);padding:.55rem 0;outline:none;
  transition:border-color .35s var(--ease);resize:vertical;
}
.field input:focus,.field textarea:focus{border-color:var(--clay)}
.field input::placeholder,.field textarea::placeholder{color:rgba(36,28,18,.35)}
.form-note{margin:.9rem 0 0;font-size:.9rem;color:var(--sage);text-align:center;min-height:1.4em}
.form-note.is-error{color:var(--clay-deep)}

/* ---- footer ---- */
.footer{background:var(--ink);color:var(--cream);padding:clamp(3.5rem,7vw,5.5rem) 0 2rem}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center}
.footer-word{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.fw-script{font:400 4.6rem/1 var(--script);color:var(--gold)}
.fw-caps{font:500 .82rem/1 var(--sans);letter-spacing:.5em;text-transform:uppercase}
.footer-links{display:flex;gap:1.8rem;flex-wrap:wrap;justify-content:center}
.footer-links a{font:400 .84rem/1 var(--sans);letter-spacing:.14em;opacity:.75;transition:opacity .3s}
.footer-links a:hover{opacity:1}
.footer-meta p{margin:.2rem 0 0;font-size:.82rem;opacity:.5}
.footer-ig{font:500 .8rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---- lightbox ---- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(24,18,11,.92);opacity:0;visibility:hidden;transition:all .4s var(--ease);
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:88vw;max-height:86vh;border-radius:.6rem;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.lb-close{
  position:absolute;top:1.2rem;right:1.6rem;width:2.8rem;height:2.8rem;border-radius:50%;
  border:1px solid rgba(246,241,231,.35);background:transparent;color:var(--cream);
  font-size:1.5rem;cursor:pointer;transition:all .3s;
}
.lb-close:hover{background:var(--cream);color:var(--ink)}

/* ---- reveal animations ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---- responsive ---- */
@media (max-width:1020px){
  .hero-inner{grid-template-columns:1fr;gap:3.2rem}
  .hero-visual{justify-self:start;width:min(24rem,88vw)}
  .hero-badge{left:auto;right:-.6rem}
  .steps{grid-template-columns:repeat(2,1fr)}
  .masonry{columns:2}
  .about-grid,.faq-grid,.contact-grid{grid-template-columns:1fr}
  .about-visual{min-height:30rem;order:2}
  .svc{grid-template-columns:3rem 1fr}
  .svc-img{display:none}
  .sec-script{display:none}
}
@media (max-width:720px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .nav.is-open{background:rgba(246,241,231,.97)}
  .nav.is-open .nav-links{
    display:flex;position:fixed;inset:3.6rem 0 0 0;flex-direction:column;
    align-items:center;justify-content:center;gap:2rem;font-size:1.2rem;
    background:var(--cream);
  }
  .steps{grid-template-columns:1fr}
  .masonry{columns:1}
  .field-row{grid-template-columns:1fr}
  .hero-badge{bottom:1.2rem}
  .about-stamp{right:2%}
  .scroll-hint{display:none}
}