/* ============================================================
   FOREVERLY — Wedding invitation storefront
   Single self-contained HTML. All animations native CSS+JS.
   ============================================================ */

:root{
  --forest:#2d3e2d;
  --forest-deep:#1f2e21;
  --cream:#f5efe1;
  --cream-soft:#eee4cf;
  --ivory:#faf5e8;
  --chocolate:#3a2e26;
  --chocolate-deep:#2a1e18;
  --sage:#9aab8e;
  --gold-muted:#b89968;
  --ink:#1a1a17;
  --muted:#6b6b60;
  --page-bg:var(--cream);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--page-bg);
  color:var(--ink);
  transition:background-color 1.4s ease;
}
body{
  font-family:"EB Garamond",Georgia,serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (pointer:fine){
  html,body,a,button,input,select,textarea{cursor:none}
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;color:inherit}
::selection{background:var(--gold-muted);color:var(--ivory)}

/* Type helpers */
.serif{font-family:"Bodoni Moda",serif}
.italic{font-family:"Cormorant Garamond",serif;font-style:italic}
.script{font-family:"Great Vibes",cursive}
.label{
  font-family:"Montserrat",sans-serif;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--muted);
}
.micro{
  font-family:"Montserrat",sans-serif;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:10px;
}

/* Sections */
section{
  position:relative;
  padding:140px 32px;
}
.col{max-width:680px;margin:0 auto;text-align:center}

/* Section page numbers like magazine page marks */
.pageno{
  position:absolute;
  top:32px;
  right:36px;
  color:var(--muted);
  font-family:"Montserrat",sans-serif;
  letter-spacing:.32em;
  font-size:10px;
  text-transform:uppercase;
  opacity:.75;
  z-index:5;
}
.pageno::after{
  content:"";
  display:block;
  width:46px;
  height:1px;
  background:currentColor;
  margin-top:8px;
  margin-left:auto;
  opacity:.5;
}

/* ============================================================
   FILM GRAIN OVERLAY (animated)
   ============================================================ */
.grain{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.045;
  background-repeat:repeat;
  background-size:200px 200px;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-ring{
  position:fixed;
  top:0;left:0;
  width:16px;height:16px;
  border:1px solid var(--cream);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), background-color .35s ease, border-color .35s ease, opacity .3s ease, mix-blend-mode 0s;
  mix-blend-mode:difference;
  display:flex;align-items:center;justify-content:center;
  font-family:"Montserrat",sans-serif;
  font-size:0;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ivory);
}
.cursor-ring.dot{
  width:8px;height:8px;
  background:var(--cream);
}
.cursor-ring.expand{
  width:84px;height:84px;
  background:rgba(245,239,225,.94);
  border-color:rgba(245,239,225,.94);
  color:var(--forest);
  mix-blend-mode:normal;
  font-size:9px;
}
.cursor-dot{
  position:fixed;
  top:0;left:0;
  width:4px;height:4px;
  background:var(--cream);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
@media (pointer:coarse){
  .cursor-ring,.cursor-dot{display:none}
}

/* ============================================================
   CURSOR SPOTLIGHT (only on .dark sections)
   ============================================================ */
.spotlight{
  position:fixed;
  top:0;left:0;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,239,225,.55) 0%, rgba(245,239,225,0) 60%);
  pointer-events:none;
  z-index:5;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .5s ease, transform .4s ease;
  mix-blend-mode:soft-light;
}
.spotlight.active{opacity:.85}
@media (pointer:coarse){.spotlight{display:none}}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:22px 32px;
  transition:background-color .6s ease, backdrop-filter .6s ease, color .6s ease, padding .5s ease;
  color:var(--ivory);
}
.nav.scrolled{
  background:rgba(245,239,225,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--ink);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:14px 32px;
}
.nav .links{
  display:flex;
  align-items:center;
  gap:44px;
  font-family:"Montserrat",sans-serif;
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
}
.nav .links a{opacity:.9;transition:opacity .3s}
.nav .links a:hover{opacity:1}
.nav .brand{
  font-family:"Great Vibes",cursive;
  font-size:38px;
  line-height:1;
  padding:0 28px;
  transform:translateY(-2px);
}
.nav .menu-btn{
  display:none;
  position:absolute;
  right:24px;top:22px;
  font-family:"Montserrat",sans-serif;
  letter-spacing:.3em;
  font-size:10px;
  text-transform:uppercase;
}
@media (max-width:820px){
  .nav .links{display:none}
  .nav .menu-btn{display:block}
  .nav .brand{font-size:32px;padding:0}
}

.mobile-overlay{
  position:fixed;
  inset:0;
  background:var(--forest);
  color:var(--ivory);
  z-index:80;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:38px;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease;
}
.mobile-overlay.open{opacity:1;pointer-events:auto}
.mobile-overlay a{
  font-family:"Bodoni Moda",serif;
  font-style:italic;
  font-size:44px;
}
.mobile-overlay .close{
  position:absolute;
  top:24px;right:24px;
  font-family:"Montserrat",sans-serif;
  letter-spacing:.3em;
  font-size:11px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:var(--forest);
  color:var(--ivory);
  min-height:100vh;
  padding:140px 64px 80px;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:80px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(184,153,104,.08), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(154,171,142,.05), transparent 50%);
  pointer-events:none;
}
.hero-left{position:relative;z-index:2;padding-left:24px}
.hero-kicker{
  font-family:"Montserrat",sans-serif;
  letter-spacing:.4em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(245,239,225,.65);
  margin-bottom:36px;
  display:flex;align-items:center;gap:14px;
}
.hero-kicker::before{
  content:"";
  width:42px;height:1px;
  background:rgba(245,239,225,.4);
}
.hero-title{
  font-family:"Bodoni Moda",serif;
  font-weight:400;
  font-size:clamp(48px, 6.4vw, 96px);
  line-height:.98;
  letter-spacing:-.01em;
  margin-bottom:36px;
}
.hero-title em{
  font-style:italic;
  display:block;
  font-weight:400;
  color:var(--cream);
}
.hero-subline{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:24px;
  color:rgba(245,239,225,.85);
  margin-bottom:48px;
  font-weight:400;
}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:18px 32px;
  border-radius:999px;
  font-family:"Montserrat",sans-serif;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:10px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), background .4s, color .4s, border-color .4s;
  will-change:transform;
}
.btn-primary{
  background:var(--cream);
  color:var(--ink);
}
.btn-primary:hover{background:var(--ivory)}
.btn-ghost{
  border:1px solid rgba(245,239,225,.5);
  color:var(--ivory);
}
.btn-ghost:hover{border-color:var(--cream)}

.hero-right{
  position:relative;
  height:78vh;
  z-index:2;
  margin-right:24px;
}
.hero-photo-wrap{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:2px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.hero-photo{
  width:100%;height:100%;
  background:
      linear-gradient(180deg, rgba(31,46,33,.05), rgba(31,46,33,.25)),
      var(--hero-image) center/cover no-repeat;
  animation:kenburns 18s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  0%{transform:scale(1.02) translate(0,0)}
  100%{transform:scale(1.08) translate(-2%,-1%)}
}
.taped-label{
  position:absolute;
  top:18px;right:18px;
  background:var(--ivory);
  color:var(--forest);
  padding:6px 14px;
  font-family:"Montserrat",sans-serif;
  letter-spacing:.34em;
  font-size:9px;
  text-transform:uppercase;
  transform:rotate(-3deg);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  z-index:3;
}
.taped-label::before,
.taped-label::after{
  content:"";
  position:absolute;
  width:28px;height:14px;
  background:rgba(184,153,104,.22);
  top:-6px;
}
.taped-label::before{left:-4px;transform:rotate(-12deg)}
.taped-label::after{right:-4px;transform:rotate(8deg)}

.scroll-cue{
  position:absolute;
  bottom:36px;
  left:50%;
  transform:translateX(-50%);
  color:rgba(245,239,225,.55);
  font-family:"Montserrat",sans-serif;
  font-size:9px;
  letter-spacing:.4em;
  text-transform:uppercase;
  z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.scroll-cue::after{
  content:"";
  display:block;
  width:1px;height:38px;
  background:rgba(245,239,225,.5);
  animation:scrollLine 2.4s ease-in-out infinite;
  transform-origin:top;
}
@keyframes scrollLine{
  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}
}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding:120px 24px 60px;gap:50px}
  .hero-left{padding-left:0}
  .hero-right{height:62vh;margin-right:0}
}

/* ============================================================
   MARQUEE TICKER
   ============================================================ */
.marquee{
  background:var(--chocolate);
  color:var(--ivory);
  height:64px;
  display:flex;
  align-items:center;
  overflow:hidden;
  position:relative;
  border-top:1px solid rgba(245,239,225,.06);
  border-bottom:1px solid rgba(245,239,225,.06);
}
.marquee-track{
  display:flex;
  gap:54px;
  white-space:nowrap;
  animation:marquee 38s linear infinite;
  align-items:center;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:24px;
  font-weight:400;
}
.marquee:hover .marquee-track{animation-direction:reverse}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.marquee-track span{display:inline-flex;align-items:center;gap:54px}
.seal-mini{
  width:14px;height:14px;
  display:inline-block;
  color:var(--gold-muted);
  opacity:.7;
}

/* ============================================================
   INTRO
   ============================================================ */
.intro{
  background:var(--cream);
  padding:160px 32px 140px;
}
.intro .col{max-width:640px}
.intro h2{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:48px;
  font-weight:400;
  color:var(--ink);
  margin:18px 0 36px;
  line-height:1.1;
}
.intro p{
  font-family:"EB Garamond",serif;
  font-size:18px;
  line-height:1.85;
  color:var(--ink);
  margin-bottom:20px;
  font-weight:400;
}
.kicker-gold{
  font-family:"Montserrat",sans-serif;
  letter-spacing:.4em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--gold-muted);
}
.intro-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  margin-top:54px;
  font-family:"Montserrat",sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--muted);
}
.intro-stats span{display:flex;align-items:center;gap:30px}
.intro-stats em{
  font-style:normal;
  color:var(--ink);
  font-family:"Bodoni Moda",serif;
  font-size:14px;
  letter-spacing:.05em;
  text-transform:none;
  margin-right:6px;
}
.intro-stats .divider{
  display:inline-block;
  width:1px;height:18px;
  background:rgba(0,0,0,.18);
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio{
  background:var(--cream-soft);
  padding:160px 32px;
}
.section-head{
  text-align:center;
  margin-bottom:80px;
}
.section-head .label{display:block;margin-bottom:18px}
.section-head h2{
  font-family:"Bodoni Moda",serif;
  font-weight:400;
  font-size:clamp(40px,5vw,72px);
  line-height:1;
  color:var(--ink);
  margin-bottom:18px;
  letter-spacing:-.01em;
}
.section-head .sub{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:22px;
  color:var(--muted);
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  max-width:1320px;
  margin:0 auto;
}
.portfolio-grid > .card.featured{grid-column:span 2}
@media (max-width:1024px){
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid > .card.featured{grid-column:span 2}
}
@media (max-width:640px){
  .portfolio-grid{grid-template-columns:1fr}
  .portfolio-grid > .card.featured{grid-column:span 1}
}

.card{
  position:relative;
  background:var(--ivory);
  padding:14px 14px 24px;
  cursor:pointer;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .7s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.card:hover{
  transform:translateY(-10px) rotate(-1.2deg);
  box-shadow:0 28px 60px rgba(0,0,0,.18);
}
.card-photo{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--forest);
}
.card.featured .card-photo{aspect-ratio:5/4}
.card-photo img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card-photo img{transform:scale(1.06)}

.example-seal{
  position:absolute;
  top:16px;right:16px;
  width:78px;height:78px;
  transform:rotate(-8deg);
  z-index:3;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.card:hover .example-seal{
  animation:sealWobble 1.6s ease-in-out infinite;
}
@keyframes sealWobble{
  0%,100%{transform:rotate(-8deg)}
  50%{transform:rotate(-3deg)}
}

.card-body{
  padding:22px 10px 4px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.card-name{
  font-family:"Bodoni Moda",serif;
  font-weight:400;
  font-size:26px;
  color:var(--ink);
  line-height:1.1;
}
.card-date{
  font-family:"Montserrat",sans-serif;
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:4px;
}
.card-theme{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:16px;
  color:var(--muted);
  margin-top:2px;
}
.card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.08);
}
.swatches{display:flex;gap:6px}
.swatch{
  width:14px;height:14px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.06);
}
.card-link{
  font-family:"Montserrat",sans-serif;
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink);
}

/* ============================================================
   PROCESS (scroll-driven horizontal pinned)
   ============================================================ */
.process-wrap{
  position:relative;
  height:400vh; /* enough scroll distance for 4 panels */
}
.process{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--cream);
  transition:background-color 1.2s ease;
}
.process-track{
  display:flex;
  height:100%;
  width:400vw;
  will-change:transform;
}
.process-panel{
  flex:0 0 100vw;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 32px;
  position:relative;
}
.process-panel .step-num{
  font-family:"Bodoni Moda",serif;
  font-style:italic;
  font-size:clamp(96px,16vw,200px);
  line-height:1;
  opacity:.18;
  position:absolute;
  top:18%;
  left:50%;
  transform:translateX(-50%);
}
.process-panel .step-icon{
  width:62px;height:62px;
  margin-bottom:28px;
  color:var(--ink);
  position:relative;z-index:2;
}
.process-panel .step-kicker{
  font-family:"Montserrat",sans-serif;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-size:11px;
  margin-bottom:18px;
  position:relative;z-index:2;
}
.process-panel h3{
  font-family:"Bodoni Moda",serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(48px,6vw,84px);
  line-height:1.05;
  margin-bottom:24px;
  position:relative;z-index:2;
}
.process-panel .step-tag{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:22px;
  margin-bottom:18px;
  max-width:520px;
  position:relative;z-index:2;
}
.process-panel p{
  font-family:"EB Garamond",serif;
  font-size:17px;
  line-height:1.7;
  max-width:520px;
  color:rgba(0,0,0,.7);
  position:relative;z-index:2;
}
.panel-2{background:var(--sage);color:var(--ink)}
.panel-2 .step-num{color:var(--cream)}
.panel-4{background:var(--chocolate);color:var(--ivory)}
.panel-4 .step-num{color:var(--ivory)}
.panel-4 .step-icon{color:var(--ivory)}
.panel-4 p{color:rgba(245,239,225,.75)}

.process-indicator{
  position:absolute;
  bottom:38px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:18px;
  z-index:5;
  font-family:"Montserrat",sans-serif;
  font-size:10px;
  letter-spacing:.3em;
}
.process-indicator .dot{
  width:22px;height:1px;
  background:currentColor;
  opacity:.3;
  transition:opacity .4s, height .4s;
}
.process-indicator .dot.active{opacity:1;height:2px}

@media (max-width:820px){
  /* On mobile, horizontal scroll-pin can be janky — show panels stacked instead */
  .process-wrap{height:auto}
  .process{position:relative;height:auto;overflow:visible}
  .process-track{flex-direction:column;width:100%;height:auto;transform:none !important}
  .process-panel{flex:0 0 auto;min-height:90vh}
  .process-indicator{display:none}
}

/* ============================================================
   THEMES STRIP
   ============================================================ */
.themes{
  background:var(--cream);
  padding:160px 0;
  overflow:hidden;
}
.themes-rail{
  display:flex;
  gap:24px;
  padding:0 64px 30px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.themes-rail::-webkit-scrollbar{display:none}
.theme-card{
  position:relative;
  flex:0 0 320px;
  aspect-ratio:3/5;
  overflow:hidden;
  scroll-snap-align:start;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
  background:var(--forest);
}
.theme-card:hover{transform:translateY(-8px)}
.theme-card img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.92);
  transition:transform 1.2s ease;
}
.theme-card:hover img{transform:scale(1.04)}
.theme-tag{
  position:absolute;
  left:14px;right:14px;bottom:14px;
  background:rgba(45,62,45,.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--ivory);
  padding:14px 18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.theme-tag .name{
  font-family:"Bodoni Moda",serif;
  font-style:italic;
  font-size:22px;
  line-height:1;
}
.theme-tag .num{
  font-family:"Montserrat",sans-serif;
  letter-spacing:.32em;
  font-size:9px;
  text-transform:uppercase;
  opacity:.7;
}
.preview-pill{
  position:absolute;
  top:14px;right:14px;
  background:var(--cream);
  color:var(--ink);
  padding:8px 14px;
  border-radius:999px;
  font-family:"Montserrat",sans-serif;
  font-size:9px;
  letter-spacing:.3em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .4s, transform .4s;
}
.theme-card:hover .preview-pill{opacity:1;transform:translateY(0)}

/* ============================================================
   TESTIMONIALS (postcard stack)
   ============================================================ */
.testimonials{
  background:var(--chocolate);
  color:var(--ivory);
  padding:160px 32px;
  position:relative;
}
.testimonials .section-head h2{color:var(--ivory)}
.testimonials .section-head .sub{color:rgba(245,239,225,.6)}
.postcards{
  position:relative;
  width:min(580px,90vw);
  height:380px;
  margin:60px auto 0;
}
.postcard{
  position:absolute;
  inset:0;
  background:var(--ivory);
  color:var(--ink);
  padding:46px 44px;
  cursor:pointer;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease, z-index 0s;
  box-shadow:0 18px 48px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.postcard::before{
  /* torn paper top edge */
  content:"";
  position:absolute;
  top:-1px;left:0;right:0;height:14px;
  background:var(--chocolate);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'><path d='M0,0 L600,0 L600,4 C580,12 560,2 540,8 C520,14 500,4 480,10 C460,14 440,4 420,9 C400,14 380,3 360,9 C340,14 320,5 300,10 C280,14 260,3 240,9 C220,14 200,4 180,10 C160,14 140,3 120,9 C100,14 80,4 60,10 C40,14 20,4 0,10 Z' fill='black'/></svg>") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'><path d='M0,0 L600,0 L600,4 C580,12 560,2 540,8 C520,14 500,4 480,10 C460,14 440,4 420,9 C400,14 380,3 360,9 C340,14 320,5 300,10 C280,14 260,3 240,9 C220,14 200,4 180,10 C160,14 140,3 120,9 C100,14 80,4 60,10 C40,14 20,4 0,10 Z' fill='black'/></svg>") center/100% 100% no-repeat;
}
.postcard .quote{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:24px;
  line-height:1.5;
  margin-bottom:24px;
}
.postcard .sig{
  font-family:"Montserrat",sans-serif;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-size:10px;
  color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.postcard .sig .heart{color:var(--gold-muted)}
.postcard[data-pos="0"]{transform:rotate(-4deg) translateY(0);z-index:3}
.postcard[data-pos="1"]{transform:rotate(2deg) translateY(8px);z-index:2}
.postcard[data-pos="2"]{transform:rotate(-3deg) translateY(16px);z-index:1}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats{
  background:var(--forest);
  color:var(--ivory);
  padding:80px 32px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
  border-top:1px solid rgba(245,239,225,.08);
  border-bottom:1px solid rgba(245,239,225,.08);
}
.stat{
  border-right:1px solid rgba(245,239,225,.15);
  padding:0 24px;
}
.stat:last-child{border-right:none}
.stat .num{
  font-family:"Bodoni Moda",serif;
  font-weight:400;
  font-size:clamp(40px,5vw,64px);
  line-height:1;
  letter-spacing:-.01em;
  margin-bottom:14px;
  color:var(--cream);
}
.stat .lbl{
  font-family:"Montserrat",sans-serif;
  letter-spacing:.32em;
  font-size:10px;
  text-transform:uppercase;
  color:rgba(245,239,225,.65);
}
@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr);gap:30px 0;padding:60px 24px}
  .stat{border-right:none;border-bottom:1px solid rgba(245,239,225,.1);padding-bottom:30px}
  .stat:nth-child(odd){border-right:1px solid rgba(245,239,225,.15)}
  .stat:nth-last-child(-n+2){border-bottom:none;padding-bottom:0}
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  background:var(--cream);
  padding:160px 32px;
}
.contact .col{max-width:560px}
.contact h2{
  font-family:"Bodoni Moda",serif;
  font-weight:400;
  font-size:clamp(48px,6vw,84px);
  line-height:1;
  margin:18px 0 18px;
  letter-spacing:-.01em;
}
.contact h2 em{font-style:italic}
.contact .sub{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:20px;
  color:var(--muted);
  margin-bottom:48px;
}
form{text-align:left;margin-top:24px}
.field{margin-bottom:28px}
.field label{
  display:block;
  font-family:"Montserrat",sans-serif;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:9px;
  color:var(--muted);
  margin-bottom:10px;
}
.field input,.field select,.field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(0,0,0,.18);
  padding:10px 0;
  font-family:"EB Garamond",serif;
  font-size:17px;
  font-style:italic;
  color:var(--ink);
  outline:none;
  transition:border-color .4s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--forest)}
.field textarea{resize:vertical;min-height:80px;font-family:"EB Garamond",serif}
.submit{
  width:100%;
  background:var(--forest);
  color:var(--ivory);
  padding:20px 24px;
  border-radius:999px;
  font-family:"Montserrat",sans-serif;
  letter-spacing:.36em;
  font-size:11px;
  text-transform:uppercase;
  margin-top:14px;
  transition:background .4s, letter-spacing .5s;
}
.submit:hover{background:var(--forest-deep);letter-spacing:.44em}

.thankyou{
  display:none;
  text-align:center;
  padding:60px 0;
}
.thankyou.show{display:block;animation:fadeIn 1.2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.thankyou .note{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:28px;
  line-height:1.4;
  color:var(--ink);
  margin-bottom:14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--chocolate-deep);
  color:var(--ivory);
  padding:100px 32px 32px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:60px;
  max-width:1200px;
  margin:0 auto 60px;
}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr;gap:48px}}
.foot-mono{
  font-family:"Great Vibes",cursive;
  font-size:64px;
  line-height:1;
  margin-bottom:16px;
  color:var(--cream);
}
.foot-brand{
  font-family:"Bodoni Moda",serif;
  font-variant:small-caps;
  font-size:18px;
  letter-spacing:.18em;
  margin-bottom:18px;
}
.foot-tag{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:18px;
  color:rgba(245,239,225,.7);
}
.foot-col h4{
  font-family:"Montserrat",sans-serif;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:10px;
  color:rgba(245,239,225,.55);
  margin-bottom:22px;
  font-weight:500;
}
.contact-list{display:flex;flex-direction:column;gap:14px}
.contact-list a{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:"EB Garamond",serif;
  font-size:17px;
  font-style:italic;
  color:var(--ivory);
  transition:color .3s;
}
.contact-list a:hover{color:var(--cream)}
.contact-list svg{width:18px;height:18px;color:var(--gold-muted);flex-shrink:0}

.foot-ticker{
  position:relative;
  height:80px;
  overflow:hidden;
}
.foot-ticker-item{
  position:absolute;
  inset:0;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:17px;
  color:rgba(245,239,225,.75);
  line-height:1.5;
  opacity:0;
  transition:opacity .8s ease;
}
.foot-ticker-item.active{opacity:1}

.foot-bottom{
  border-top:1px solid rgba(245,239,225,.1);
  padding-top:28px;
  margin-top:60px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  font-family:"Montserrat",sans-serif;
  letter-spacing:.22em;
  font-size:10px;
  text-transform:uppercase;
  color:rgba(245,239,225,.55);
  max-width:1200px;margin-left:auto;margin-right:auto;
}
.foot-bottom .crafted{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  text-transform:none;
  letter-spacing:.04em;
  font-size:13px;
  color:rgba(245,239,225,.65);
}

/* ============================================================
   AMBIENT TICKER (bottom-left chip)
   ============================================================ */
.ambient{
  position:fixed;
  bottom:24px;left:24px;
  z-index:55;
  background:rgba(31,46,33,.88);
  color:var(--cream);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:8px 14px;
  font-family:"Montserrat",sans-serif;
  font-size:9px;
  letter-spacing:.28em;
  text-transform:uppercase;
  height:30px;
  display:flex;align-items:center;
  border-radius:999px;
  overflow:hidden;
  min-width:240px;
}
.ambient-item{
  display:inline-block;
  white-space:nowrap;
  transform:translateY(20px);
  opacity:0;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s;
  position:absolute;
}
.ambient-item.active{transform:translateY(0);opacity:1}
@media (max-width:540px){.ambient{display:none}}

/* ============================================================
   TEXT REVEAL UTILITY
   ============================================================ */
.split{display:inline-block;overflow:hidden}
.split .ch{
  display:inline-block;
  transform:translateY(110%);
  transition:transform 1s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.split.in .ch{transform:translateY(0)}

/* General reveal */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1.1s ease, transform 1.1s ease;
}
.reveal.in{opacity:1;transform:none}

/* Magnetic-button helper */
.mag{display:inline-block;will-change:transform}

/* Decorative inline svg wax seal */
.seal-decor{
  width:50px;height:50px;
  display:inline-block;
  color:var(--gold-muted);
}
/* ============================================================
   FEATURE BAR (formerly stats — now icon + label per row)
   ============================================================ */
.stat .feature-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  margin:0 auto 18px;
  color:var(--cream);
  opacity:.85;
}
.stat .feature-icon svg{width:100%;height:100%}

/* ============================================================
   LIVE DEMOS — replaces testimonial postcard stack
   Single clickable demo card (postcard-style, on chocolate bg)
   ============================================================ */
.demo-card{
  background:var(--ivory);
  color:var(--ink);
  padding:46px 44px;
  cursor:pointer;
  box-shadow:0 18px 48px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:absolute;
  inset:0;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease;
  text-decoration:none;
}
.demo-card:hover{
  transform:rotate(-2deg) translateY(-6px) !important;
  box-shadow:0 28px 60px rgba(0,0,0,.55);
}
.demo-card::before{
  /* torn paper top edge (same as postcards) */
  content:"";
  position:absolute;
  top:-1px;left:0;right:0;height:14px;
  background:var(--chocolate);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'><path d='M0,0 L600,0 L600,4 C580,12 560,2 540,8 C520,14 500,4 480,10 C460,14 440,4 420,9 C400,14 380,3 360,9 C340,14 320,5 300,10 C280,14 260,3 240,9 C220,14 200,4 180,10 C160,14 140,3 120,9 C100,14 80,4 60,10 C40,14 20,4 0,10 Z' fill='black'/></svg>") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'><path d='M0,0 L600,0 L600,4 C580,12 560,2 540,8 C520,14 500,4 480,10 C460,14 440,4 420,9 C400,14 380,3 360,9 C340,14 320,5 300,10 C280,14 260,3 240,9 C220,14 200,4 180,10 C160,14 140,3 120,9 C100,14 80,4 60,10 C40,14 20,4 0,10 Z' fill='black'/></svg>") center/100% 100% no-repeat;
}
.demo-card .demo-tag{
  font-family:"Montserrat",sans-serif;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:9px;
  color:var(--rose-deep, var(--gold-muted));
  margin-bottom:18px;
  align-self:flex-start;
  padding:6px 12px;
  border:1px solid currentColor;
  border-radius:999px;
}
.demo-card .demo-title{
  font-family:"Bodoni Moda",serif;
  font-style:italic;
  font-weight:500;
  font-size:42px;
  line-height:1.05;
  color:var(--forest-deep);
  margin-bottom:10px;
}
.demo-card .demo-label{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:18px;
  color:var(--muted);
  margin-bottom:28px;
}
.demo-card .demo-cta{
  font-family:"Montserrat",sans-serif;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--forest);
  border-top:1px solid rgba(0,0,0,.12);
  padding-top:18px;
  margin-top:auto;
}
.demo-card .demo-cta::after{
  content:"";
  display:inline-block;
  width:0;height:1px;
  background:currentColor;
  margin-left:8px;
  vertical-align:middle;
  transition:width .5s ease;
}
.demo-card:hover .demo-cta::after{width:28px}

/* ============================================================
   MOBILE TOUCH ANIMATIONS
   Equivalents to desktop cursor/hover effects on touch devices
   ============================================================ */

/* (1) Touch-spotlight — soft glow that follows the finger on .dark sections */
.touch-spot{
  position:fixed;
  top:0;left:0;
  width:420px;height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,239,225,.45) 0%, rgba(245,239,225,0) 65%);
  pointer-events:none;
  z-index:5;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .4s ease;
  mix-blend-mode:soft-light;
}
.touch-spot.active{opacity:.9}

/* (2) Tap-tilt — cards tilt and lift when tapped */
@media (pointer:coarse){
  /* Disable desktop hover transforms on touch — replaced with tap-active */
  .card:hover{transform:none !important;box-shadow:0 2px 8px rgba(0,0,0,.04) !important}
  .card:hover .card-photo img{transform:none}
  .card:hover .example-seal{animation:none}
  .theme-card:hover{transform:none}
  .theme-card:hover img{transform:none}
  .demo-card:hover{transform:rotate(-3deg) translateY(8px) !important;box-shadow:0 18px 48px rgba(0,0,0,.4) !important}

  /* tap-active state activates on touchstart */
  .card.tap-active{
    transform:translateY(-10px) rotate(-1.2deg) !important;
    box-shadow:0 28px 60px rgba(0,0,0,.18) !important;
    transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease !important;
  }
  .card.tap-active .card-photo img{transform:scale(1.06);transition:transform .5s ease}
  .card.tap-active .example-seal{
    animation:sealWobble 1.4s ease-in-out infinite !important;
  }
  .theme-card.tap-active{transform:translateY(-8px) !important;transition:transform .35s ease !important}
  .theme-card.tap-active img{transform:scale(1.04);transition:transform .5s ease}
  .demo-card.tap-active{
    transform:rotate(-2deg) translateY(-6px) !important;
    box-shadow:0 28px 60px rgba(0,0,0,.55) !important;
    transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease !important;
  }
}

/* (3) Tap "VIEW →" pill — appears on tap, fades in/out */
.tap-view-pill{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.85);
  background:rgba(245,239,225,.96);
  color:var(--forest-deep);
  padding:10px 22px;
  border-radius:999px;
  font-family:"Montserrat",sans-serif;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:10px;
  font-weight:500;
  opacity:0;
  pointer-events:none;
  z-index:10;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  white-space:nowrap;
}
.tap-active .tap-view-pill{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
/* Hide pill on desktop (cursor system handles it instead) */
@media (pointer:fine){
  .tap-view-pill{display:none}
}

/* Mobile-only: hide the legacy custom cursor entirely (already done in base CSS) */
@media (pointer:coarse){
  .cursor-ring,.cursor-dot,.spotlight{display:none !important}
}