/* =========================================================
   Julia Stewart Events — Bali
   Design system: With Grace & Gold (Kelly Zugay) sensibility
   — soft neutral editorial palette, classic serif display,
   letter-spaced uppercase eyebrows, generous white space,
   gold hairline accents — warmed with Bali clay + tropical green.
   ========================================================= */

:root{
  --ivory:#f7f3ec;
  --cream:#efe8dd;
  --sand:#e3d8c7;
  --ink:#2b2723;
  --ink-soft:#5b5349;
  --clay:#b06a4e;       /* Bali terracotta */
  --clay-deep:#9a5740;
  --green:#2f3d33;      /* deep jungle */
  --green-2:#3c4d40;
  --gold:#c2a36b;
  --gold-soft:#d8c39a;
  --white:#fffdf9;

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;

  --maxw:1180px;
  --pad:clamp(1.25rem, 5vw, 4rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--ivory);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Type primitives ---------- */
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:.7rem;
  font-weight:400;
  color:var(--clay);
  margin-bottom:1.4rem;
}
.eyebrow--light{color:var(--gold-soft)}
.eyebrow--gold{color:var(--gold)}

.display{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.1rem, 5.2vw, 4rem);
  line-height:1.08;
  letter-spacing:.01em;
  color:var(--ink);
}
.display--light{color:var(--white)}

h3{font-family:var(--serif);font-weight:500;font-size:1.55rem;line-height:1.2;letter-spacing:.01em}
h4{font-family:var(--serif);font-weight:500;font-size:1.25rem}

.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft);margin-top:1.4rem;font-weight:300}
.lead--accent{color:var(--clay-deep);font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.4}
.lead--light{color:rgba(255,253,249,.82)}
.muted{color:var(--ink-soft);font-style:italic;opacity:.7;margin-top:.8rem}
em{font-style:italic}
.center{text-align:center}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:760px}
.section{padding:clamp(4rem,9vw,7.5rem) 0}
.section--cream{background:var(--cream)}
.section--deep{background:var(--green);position:relative}
.section--deep::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 0%, rgba(194,163,107,.10), transparent 60%);
  pointer-events:none;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:400;
  padding:1.05em 2.2em;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .45s var(--ease);
}
.btn--solid{background:var(--clay);color:var(--white);border-color:var(--clay)}
.btn--solid:hover{background:var(--clay-deep);border-color:var(--clay-deep);transform:translateY(-2px)}
.btn--ghost{border-color:rgba(255,253,249,.5);color:var(--white)}
.btn--ghost:hover{background:rgba(255,253,249,.1);border-color:var(--white)}
.btn--nav{background:transparent;border-color:var(--clay);color:var(--clay);padding:.85em 1.6em}
.btn--nav:hover{background:var(--clay);color:var(--white)}
.btn--lg{padding:1.25em 3em;margin-top:2.4rem}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding:1.4rem 0;
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.nav__brand{display:flex;flex-direction:column;line-height:1.1}
.nav__brand-name{font-family:var(--serif);font-size:1.4rem;color:var(--white);transition:color .5s var(--ease)}
.nav__brand-sub{font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-soft);transition:color .5s var(--ease)}
.nav__links{display:flex;gap:2.2rem}
.nav__links a{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,253,249,.85);
  position:relative;padding:.3rem 0;transition:color .4s var(--ease);
}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .4s var(--ease)}
.nav__links a:hover::after{width:100%}

/* scrolled state */
.nav.is-stuck{background:rgba(247,243,236,.96);box-shadow:0 1px 0 rgba(43,39,35,.08);padding:.9rem 0;backdrop-filter:blur(8px)}
.nav.is-stuck .nav__brand-name{color:var(--ink)}
.nav.is-stuck .nav__brand-sub{color:var(--clay)}
.nav.is-stuck .nav__links a{color:var(--ink-soft)}
.nav.is-stuck .btn--nav{border-color:var(--clay);color:var(--clay)}
.nav.is-stuck .btn--nav:hover{background:var(--clay);color:var(--white)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:6rem var(--pad) 4rem;overflow:hidden}
.hero__media{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(47,61,51,.15), rgba(47,61,51,.25)),
    url("https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=2000&q=80") center/cover no-repeat,
    linear-gradient(160deg,#3c4d40,#2f3d33 60%,#9a5740);
  transform:scale(1.08);
  will-change:transform;
}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg, rgba(43,39,35,.35) 0%, rgba(43,39,35,.15) 40%, rgba(43,39,35,.55) 100%)}
.hero__content{position:relative;z-index:2;max-width:880px}
.hero__title{
  font-family:var(--serif);font-weight:500;color:var(--white);
  font-size:clamp(3rem,11vw,7.5rem);line-height:.98;letter-spacing:.005em;
  text-shadow:0 2px 40px rgba(0,0,0,.25);
}
.hero__lede{color:rgba(255,253,249,.92);font-size:clamp(1.1rem,2vw,1.4rem);font-weight:300;max-width:640px;margin:1.8rem auto 0;line-height:1.55}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem}
.hero__note{margin-top:2rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
.hero__scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,253,249,.7)}
.hero__scroll::after{content:"";display:block;width:1px;height:42px;margin:.8rem auto 0;background:linear-gradient(rgba(255,253,249,.7),transparent);animation:scrollpulse 2.4s var(--ease) infinite}
@keyframes scrollpulse{0%{opacity:0;transform:scaleY(.3)}50%{opacity:1}100%{opacity:0;transform:scaleY(1)}}

/* ---------- TRUST STRIP ---------- */
.strip{background:var(--ink);color:var(--ivory)}
.strip__inner{max-width:var(--maxw);margin:0 auto;padding:1.2rem var(--pad);display:flex;flex-wrap:wrap;gap:1rem 1.4rem;justify-content:center;align-items:center;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:300;color:rgba(247,243,236,.85)}
.strip__dot{color:var(--gold)}

/* ---------- CARDS / GRID ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem)}
.grid-3--tight{gap:1.4rem;margin-top:2.4rem}
.card{padding:2.4rem 0 0;border-top:1px solid var(--sand)}
.card__num{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--clay);display:block;margin-bottom:1rem}
.card h3{margin-bottom:.8rem}
.card p{color:var(--ink-soft);font-size:1rem}

/* ---------- VALUE STACK ---------- */
.stack{list-style:none;max-width:880px;margin:3.4rem auto 0;border-top:1px solid rgba(216,195,154,.25)}
.stack__item{padding:1.7rem 0;border-bottom:1px solid rgba(216,195,154,.25)}
.stack__head{display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem}
.stack__head h3{color:var(--white);font-size:1.5rem}
.stack__val{font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);white-space:nowrap;border:1px solid rgba(194,163,107,.4);padding:.45em .9em;border-radius:2px}
.stack__item p{color:rgba(255,253,249,.7);margin-top:.7rem;font-size:1rem;max-width:62ch}
.stack__item--feature{background:rgba(194,163,107,.07);margin:0 -1.6rem;padding:1.7rem 1.6rem;border-radius:4px;border-bottom-color:transparent}
.stack__item--feature .stack__val{background:var(--gold);color:var(--green);border-color:var(--gold)}

/* ---------- BONUS ---------- */
.bonus{margin-top:4rem}
.bonus__card{background:rgba(255,253,249,.05);border:1px solid rgba(216,195,154,.2);padding:1.8rem;border-radius:4px;text-align:center}
.bonus__tag{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.bonus__card h4{color:var(--white);margin:.8rem 0 .6rem}
.bonus__card p{color:rgba(255,253,249,.65);font-size:.92rem}

/* ---------- PRICE ---------- */
.price{text-align:center;margin-top:4.5rem;padding-top:3rem;border-top:1px solid rgba(216,195,154,.25)}
.price__stack{color:var(--gold-soft);letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}
.price__stack s{opacity:.7}
.price__line{color:rgba(255,253,249,.7);margin-top:1.8rem;font-size:.82rem;letter-spacing:.25em;text-transform:uppercase}
.price__big{font-family:var(--serif);color:var(--white);font-size:clamp(2.8rem,7vw,4.4rem);line-height:1;margin-top:.4rem}
.price__big span{font-size:.3em;letter-spacing:.2em;color:var(--gold);vertical-align:middle}
.price__sub{color:rgba(255,253,249,.7);max-width:46ch;margin:1.2rem auto 0;font-size:.98rem}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3.2rem;counter-reset:s}
.step{position:relative;padding-top:1.6rem;border-top:1px solid var(--sand)}
.step__n{font-family:var(--serif);font-size:2.4rem;color:var(--clay);line-height:1;display:block;margin-bottom:.8rem}
.step h3{margin-bottom:.6rem}
.step p{color:var(--ink-soft);font-size:.96rem}

/* ---------- GALLERY ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:42vh;gap:0}
.gallery__item{background-size:cover;background-position:center;position:relative;filter:saturate(.95)}
.gallery__item::after{content:"";position:absolute;inset:0;background:rgba(47,61,51,0);transition:background .6s var(--ease)}
.gallery__item:hover::after{background:rgba(47,61,51,.18)}
.gallery__item--a{background-image:linear-gradient(135deg,#3c4d40,#2f3d33);grid-row:span 1}
.gallery__item--b{background-image:linear-gradient(135deg,#b06a4e,#9a5740)}
.gallery__item--c{background-image:linear-gradient(135deg,#c2a36b,#9a5740)}
.gallery__item--d{background-image:linear-gradient(135deg,#3c4d40,#b06a4e)}

/* ---------- QUOTES ---------- */
.quote{padding:2.4rem 0 0;border-top:1px solid var(--sand)}
.quote p{font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.45;color:var(--ink)}
.quote cite{display:block;margin-top:1.2rem;font-style:normal;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}

/* ---------- ABOUT ---------- */
.about__grid{display:grid;grid-template-columns:0.85fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about__photo{
  aspect-ratio:4/5;border-radius:4px;
  background:
    linear-gradient(160deg, rgba(47,61,51,.1), rgba(176,106,78,.2)),
    url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=900&q=80") center/cover no-repeat,
    linear-gradient(160deg,#e3d8c7,#b06a4e);
  box-shadow:0 30px 60px -30px rgba(43,39,35,.4);
}
.about__text p{color:var(--ink-soft);margin-top:1.2rem;font-size:1.05rem}
.about__sig{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--clay-deep);margin-top:1.6rem}

/* ---------- FAQ ---------- */
.faq{margin-top:2.8rem}
.faq__item{border-bottom:1px solid var(--sand);padding:.4rem 0}
.faq__item summary{
  list-style:none;cursor:pointer;padding:1.3rem 0;font-family:var(--serif);font-size:1.3rem;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";color:var(--clay);font-size:1.6rem;transition:transform .4s var(--ease)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{color:var(--ink-soft);padding:0 0 1.4rem;max-width:64ch;font-size:1rem}

/* ---------- FORM ---------- */
.form{margin-top:2.8rem;text-align:left}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.form label{display:block;margin-top:1.2rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)}
.form input,.form select,.form textarea{
  width:100%;margin-top:.6rem;padding:.95rem 1.1rem;
  background:rgba(255,253,249,.06);border:1px solid rgba(216,195,154,.3);
  color:var(--white);font-family:var(--sans);font-size:.95rem;font-weight:300;border-radius:3px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.form textarea{resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,253,249,.4)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,253,249,.1)}
.form select option{background:var(--green);color:var(--white)}
.form__fine{margin-top:1.6rem;font-size:.85rem;color:rgba(255,253,249,.6);letter-spacing:.04em;text-transform:none}
.form__fine a{color:var(--gold-soft);border-bottom:1px solid rgba(216,195,154,.4)}
.form.is-sent{text-align:center;font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--white);padding:3rem 0}

/* ---------- FOOTER ---------- */
.footer{background:var(--ink);color:rgba(247,243,236,.8);padding:3.5rem 0}
.footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.6rem}
.footer__brand{display:flex;flex-direction:column}
.footer__name{font-family:var(--serif);font-size:1.4rem;color:var(--ivory)}
.footer__tag{font-style:italic;font-family:var(--serif);color:var(--gold-soft);font-size:.95rem}
.footer__links{display:flex;flex-wrap:wrap;gap:1.4rem}
.footer__links a{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,243,236,.7);transition:color .3s var(--ease)}
.footer__links a:hover{color:var(--gold)}
.footer__legal{width:100%;border-top:1px solid rgba(247,243,236,.12);padding-top:1.4rem;font-size:.72rem;letter-spacing:.1em;color:rgba(247,243,236,.5)}

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

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .nav__links{display:none}
  .grid-3,.steps{grid-template-columns:1fr 1fr}
  .about__grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:34vh}
}
@media (max-width:600px){
  .grid-3,.steps,.form__row{grid-template-columns:1fr}
  .stack__head{flex-direction:column;gap:.5rem}
  .btn--nav{display:none}
  .nav{padding:1rem 0}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__scroll::after{animation:none}
  html{scroll-behavior:auto}
}