/* =========================================================
   Homepage — page-specific styles
   ========================================================= */

/* --- 02 · Hero --- */
.hero{
  background: var(--c-black);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px){
  .hero{ grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.hero-content{
  padding: 76px var(--gutter-mobile) 0;
  display:flex; flex-direction:column;
}
@media (min-width:1360px){ .hero-content{ padding-left:80px; padding-right:60px; } }
.hero-content .eyebrow{ margin-bottom: 14px; }
.hero-title{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-cream);
}
.hero-title-script{
  font-family: var(--font-serif-italic);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(34px, 5.2vw, 65px);
  line-height: 1;
  color: var(--c-gold);
  margin-top: 6px;
}
.hero-lede{
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.78;
  color: #cfc8bd;
  max-width: 463px;
  margin-top: 26px;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap: 16px;
  margin-top: 40px;
  margin-bottom: 44px;
}
@media (max-width: 800px){
  .hero-actions{ flex-direction: column; align-items: flex-start; }
  .hero-actions .btn{ width: 220px; }
}
.hero-quote-box{
  background: var(--c-cream-2);
  margin-left: calc(-1 * var(--gutter-mobile));
  margin-right: calc(-1 * var(--gutter-mobile));
  padding: 48px var(--gutter-mobile) 40px;
  margin-top: auto;
}
@media (min-width:1360px){
  .hero-quote-box{
    margin-left: -80px;
    margin-right: -60px;
    padding-left:80px;
    padding-right:60px;
  }
}
.hero-quote{
  font-family: var(--font-serif-italic);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 33px);
  line-height: 1.45;
  color: var(--c-navy);
  max-width: 520px;
}
.hero-quote-by{
  margin-top: 24px;
}
.hero-quote-by .label{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.8px;
  color: var(--c-gold);
  display:block;
}
.hero-quote-by .name{
  font-size: 13px;
  color: var(--c-text);
  margin-top: 6px;
  display:block;
}
.hero-media{
  position: relative;
  min-height: 360px;
  background: var(--c-black-2);
}
@media (max-width: 999px){ .hero-media{ order: -1; } }
.hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* --- 03 · The Promise --- */
.promise{ padding: 90px 0 90px; }
.promise-inner{ max-width: var(--container); margin:0 auto; padding: 0 var(--gutter-mobile); }
@media (min-width:1360px){ .promise-inner{ padding:0; } }
.promise-head-row{
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.promise-card-img{
  flex: none;
  width: 220px;
  aspect-ratio: 324/486;
  object-fit: cover;
  border-radius: 18px;
}
@media (max-width: 800px){
  .promise-head-row{ flex-direction: column; }
  .promise-card-img{ width: 180px; }
}
.promise-head{
  border-top: 1px solid rgba(201,168,76,.3);
  padding-top: 40px;
  max-width: 646px;
}
.promise-head .h-display{ font-size: clamp(32px, 4vw, 52px); }
.promise-head .lede{ margin-top: 22px; }
.promise-cols{
  border-top: 5px solid rgba(201,168,76,.3);
  margin-top: 50px;
  padding-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 800px){ .promise-cols{ grid-template-columns: 1fr; gap: 32px; } }
.promise-col .num{
  font-family: var(--font-sans); font-weight: 900; font-size: 13px;
  letter-spacing: 2.6px; color: var(--c-gold); margin-bottom: 14px; display:block;
}
.promise-col h3{
  font-family: var(--font-sans); font-weight: 500; font-size: 20px;
  letter-spacing: -0.02em; color: var(--c-navy); margin-bottom: 10px;
}
.promise-col p{ font-size: 14px; line-height: 1.6; color: var(--c-text); }

/* --- 04 · The Destination --- */
.destination{ display:grid; grid-template-columns: 1fr; }
@media (min-width: 1000px){ .destination{ grid-template-columns: 1fr 1fr; } }
.dest-media{ position:relative; min-height: 320px; background: var(--c-black-2); }
.dest-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dest-content{ padding: 70px var(--gutter-mobile); position: relative; }
@media (min-width:1360px){ .dest-content{ padding-left:60px; padding-right:80px; } }
.dest-content .eyebrow{ color: var(--c-gold); }
.dest-content h2{
  font-family: var(--font-sans); font-weight: 500; font-size: clamp(28px,3.4vw,45px);
  letter-spacing: -0.02em; color: var(--c-cream); line-height: 1.05;
}
.dest-content .h-script{ font-size: clamp(26px,3.8vw,54px); margin-top: 6px; }
.dest-content p.lede{ margin-top: 22px; max-width: 562px; }
.dest-grid{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
}
@media (max-width: 640px){ .dest-grid{ grid-template-columns: 1fr; } }
.dest-grid .place-name{
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 2.16px; text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 8px;
}
.dest-grid .place-desc{
  font-family: var(--font-alt); font-weight: 600; font-size: 12px;
  line-height: 1.55; color: var(--c-text-muted);
}
.dest-content .btn-link{ margin-top: 44px; display:inline-flex; }

/* --- 05 · Services --- */
.services{ padding: 88px 0 88px; position: relative; }
.services-bg{
  position: absolute;
  top: -43.6%;
  right: -1%;
  width: 55.7%;
  height: 171.4%;
  opacity: .22;
  object-fit: cover;
  object-position: 50% 22%;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 0;
}
.services-bg-fade{
  position: absolute;
  top: 0;
  right: 0;
  width: 55.7%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to bottom, var(--c-cream) 0%, transparent 12%, transparent 88%, var(--c-cream) 100%),
    linear-gradient(to right, var(--c-cream) 0%, transparent 30%);
}
@media (max-width: 1100px){ .services-bg, .services-bg-fade{ display:none; } }
.services-inner{ max-width: var(--container); margin:0 auto; padding: 0 var(--gutter-mobile); position: relative; z-index: 1; }
@media (min-width:1360px){ .services-inner{ padding:0; } }
.services h2{ font-size: clamp(28px,3.6vw,50px); }
.services .h-script{ font-size: clamp(26px,3.8vw,50px); margin-top:4px; }
.services .lede{ margin-top: 22px; }
.services-grid{
  margin-top: 48px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 1000px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .services-grid{ grid-template-columns: 1fr; } }
.service-card{
  background: rgba(253,250,246,.7);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  padding: 32px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.service-card.is-best{ padding-top: 44px; }
.best-badge{
  position:absolute; top:-14px; left:24px;
  background: linear-gradient(181deg, var(--c-gold) 38%, #f9e4c5 96%);
  color: var(--c-navy);
  font-family: var(--font-sans); font-weight: 700; font-size: 10px;
  letter-spacing: 1.6px; text-transform: uppercase;
  padding: 7px 14px;
}
.service-card .bar{ width: 27px; height:2px; background: var(--c-gold); margin-bottom: 18px; }
.service-card h3{
  font-family: var(--font-sans); font-weight:500; font-size: 22px;
  letter-spacing: -0.02em; color: var(--c-navy); line-height: 1.1;
}
.service-card p{ font-size:14px; line-height:1.65; color: var(--c-text-muted-2); margin-top: auto; padding-top: 32px; }
.services > .services-inner > .btn-link{ margin-top: 48px; display:inline-flex; float:right; }
.services .services-cta-row{ display:flex; justify-content:flex-end; margin-top: 40px; }

/* --- 06 · Real Weddings (home teaser) --- */
.real-weddings{ padding: 90px 0 100px; }
.real-weddings .wrap > .eyebrow{ justify-content:flex-start; }
.real-weddings h2{ color: var(--c-cream); font-size: clamp(32px,4.2vw,60px); }
.real-weddings .h-script{ color: var(--c-gold); font-size: clamp(30px,4.4vw,60px); margin-top:4px; }
.real-weddings .lede-row{
  font-family: var(--font-sans); font-weight:600; font-size:16px; color: var(--c-text-muted);
  margin-top: 26px;
}
.rw-grid{
  margin-top: 44px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px){ .rw-grid{ grid-template-columns: 1fr; } }
.rw-card{ position:relative; border-radius:6px; overflow:hidden; aspect-ratio: 4/2.9; background:var(--c-black-2); }
.rw-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rw-caption{ margin-top:16px; }
.rw-caption .names{
  font-family: var(--font-sans); font-weight:700; font-size:12px; color: var(--c-gold);
}
.rw-caption .meta{
  font-family: var(--font-sans); font-weight:700; font-size:12px; color: var(--c-gold);
  opacity:.75;
}
.rw-more{ display:flex; justify-content:flex-end; margin-top: 36px; }

/* --- 07 · Meet Anni --- */
.meet-anni{ display:grid; grid-template-columns: 1fr; position: relative; }
@media (min-width: 1000px){ .meet-anni{ grid-template-columns: 40.3% 1fr; } }
.meet-media{ position:relative; min-height: 340px; background: var(--c-black-2); }
.meet-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.meet-badge{
  position: absolute;
  top: 40px;
  right: var(--gutter-mobile);
  text-align: center;
  opacity: .9;
}
@media (min-width:1360px){ .meet-badge{ right: 80px; } }
.meet-badge img:first-child{ height: 26px; width:auto; margin: 0 auto; }
.meet-badge img:last-child{ height: 6px; width:auto; margin: 5px auto 0; opacity:.7; }
@media (max-width: 700px){ .meet-badge{ display:none; } }
.meet-content{ padding: 76px var(--gutter-mobile); position: relative; }
@media (min-width:1360px){ .meet-content{ padding-left:60px; padding-right:80px; } }
.meet-content h2{ font-size: clamp(28px,3.4vw,50px); }
.meet-content .h-script{ font-size: clamp(24px,3vw,40px); margin-top:6px; }
.meet-content .lede{ margin-top:24px; max-width:721px; }
.meet-stats{
  display:flex; flex-wrap:wrap; gap: 48px;
  margin-top: 44px;
}
.meet-stats .stat .bar{ width:32px; height:2px; background:var(--c-gold); margin-bottom:14px; }
.meet-stats .stat span{ font-size:13px; line-height:1.55; color:var(--c-text); display:block; }
.meet-content .btn-link{ margin-top: 44px; display:inline-flex; }

/* --- 08 · Testimonials --- */
.testimonials{ padding: 90px 0 90px; }
.testimonials h2{ color: var(--c-cream-2); font-size: clamp(30px,4vw,50px); font-weight:600; }
.testimonials h2 em{ font-style: italic; font-family: var(--font-serif-italic); color: var(--c-gold); font-size: 1.1em; }
.testimonials .lede-row{
  font-size:16px; line-height:1.75; color: var(--c-text-muted); margin-top: 20px; max-width: 780px;
}
.t-grid{
  margin-top: 44px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;
}
@media (max-width: 900px){ .t-grid{ grid-template-columns: 1fr; } }
.t-card{
  background: rgba(102,97,89,.2);
  border: 1px solid rgba(201,168,76,.5);
  padding: 30px 28px;
}
.t-card .mark{ font-family: var(--font-serif-italic); font-style:italic; font-weight:300; font-size:48px; color: var(--c-gold); line-height:1; }
.t-card p{ font-size:14px; line-height:1.7; color: var(--c-text-muted); margin-top: 8px; min-height: 90px; }
.t-card .who{ font-family: var(--font-sans); font-weight:700; font-size:10px; letter-spacing:1.8px; color: var(--c-gold); margin-top: 22px; text-transform:uppercase; }

/* --- 09 · Closing CTA --- */
.closing-cta{ background: var(--c-navy); padding: 90px 0 90px; text-align:center; }
.closing-cta-bg{ position:absolute; inset:0; opacity:.17; }
.closing-cta-bg img{ width:100%; height:100%; object-fit:cover; }
.closing-cta .wrap{ position:relative; }
.closing-cta h2{
  font-family: var(--font-sans); font-weight:600; font-size: clamp(26px,3.2vw,40px);
  color: var(--c-cream-2); letter-spacing:-0.02em;
  text-align:left; margin-left:14.6%;
}
.closing-cta .h-script{
  color: var(--c-gold-pale); font-size: clamp(40px,7vw,100px); margin-top:4px;
  text-align:left; margin-left:28.2%;
}
@media (max-width: 700px){
  .closing-cta h2, .closing-cta .h-script{ margin-left:0; text-align:center; }
}
.closing-cta p{ font-size:16px; line-height:1.75; color: var(--c-cream); max-width: 720px; margin: 26px auto 0; }
.closing-cta .btn{ margin-top: 34px; }
.closing-cta .whatsapp{ font-weight:300; font-size:12px; color: var(--c-cta-muted); margin-top: 20px; }
.closing-cta .whatsapp a{ color:inherit; transition:color .2s ease; } .closing-cta .whatsapp a:hover{ color: var(--c-gold-light); }