/* ==========================================================================
   Subhajyoti Global Hospitality — Design System
   Palette + type mirrored from the approved Emergent concept.
   ========================================================================== */

:root {
  --sj-teal: #0e5a5f;
  --sj-teal-dark: #0a3f42;
  --sj-teal-ink: #0e4a4f;
  --sj-amber: #f5a623;
  --sj-amber-light: #ffd680;
  --sj-lime: #b8e62d;
  --sj-lime-dark: #a1d420;
  --sj-cream: #fdf8f1;
  --sj-cream-2: #f9efe0;
  --sj-mint: #e7f5f4;
  --sj-line: #dae5e7;
  --sj-muted: #52767a;

  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shell: 1400px;
  --pad: 24px;

  --ff-body: "DM Sans", Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-display: "Playfair Display", Georgia, serif;
  --ff-script: "Dancing Script", cursive;
  --ff-caveat: "Caveat", cursive;

  --shadow-sm: 0 10px 30px -18px rgba(14, 90, 95, .35);
  --shadow-md: 0 20px 45px -25px rgba(14, 90, 95, .40);
  --shadow-lg: 0 30px 60px -30px rgba(14, 90, 95, .55);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sj-teal-ink);
  background: var(--sj-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--ff-display); font-weight: 800; line-height: 1.15; color: var(--sj-teal); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(245, 166, 35, .22); color: var(--sj-teal-ink); }
:focus-visible { outline: 3px solid var(--sj-amber); outline-offset: 3px; border-radius: 6px; }

/* ---------- layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: 88px; }
.section--tight { padding-block: 56px; }
.section--mint { background: var(--sj-mint); }
.section--white { background: #fff; }
.section--cream2 { background: var(--sj-cream-2); }
.grid { display: grid; gap: 24px; }
.center { text-align: center; }

/* ---------- type helpers ---------- */
.script { font-family: var(--ff-script); font-weight: 700; }
.caveat { font-family: var(--ff-caveat); font-weight: 600; }
.display { font-family: var(--ff-display); }
.eyebrow {
  font-family: var(--ff-caveat);
  font-size: 26px;
  color: var(--sj-amber);
  line-height: 1;
  margin-bottom: 6px;
}
.eyebrow--teal { color: var(--sj-teal); }
.sec-title { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
.sec-title em { font-family: var(--ff-script); font-style: normal; color: var(--sj-amber); font-weight: 700; }
.sec-lede { margin-top: 14px; max-width: 620px; color: rgba(10, 63, 66, .78); }
.sec-head { margin-bottom: 44px; }
.sec-head--center { text-align: center; }
.sec-head--center .sec-lede { margin-inline: auto; }
.sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.amber { color: var(--sj-amber); }
.teal { color: var(--sj-teal); }

.sep { display: inline-flex; align-items: center; gap: 10px; color: #cbd5d1; font-size: 12px; margin-top: 12px; }
.sep::before, .sep::after { content: ""; width: 60px; height: 1px; background: currentColor; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; font-weight: 700; letter-spacing: .01em;
  padding: 13px 26px; transition: background-color .2s, color .2s, transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--lime { background: var(--sj-lime); color: var(--sj-teal-dark); box-shadow: 0 6px 18px -6px rgba(184, 230, 45, .6); }
.btn--lime:hover { background: var(--sj-lime-dark); box-shadow: 0 12px 26px -8px rgba(161, 212, 32, .65); }
.btn--teal { background: var(--sj-teal); color: #fff; box-shadow: 0 8px 22px -10px rgba(14, 90, 95, .8); }
.btn--teal:hover { background: var(--sj-teal-dark); }
.btn--amber { background: var(--sj-amber); color: #fff; box-shadow: 0 8px 22px -10px rgba(245, 166, 35, .8); }
.btn--ghost { border: 2px solid var(--sj-teal); color: var(--sj-teal); padding: 11px 24px; }
.btn--ghost:hover { background: var(--sj-teal); color: #fff; }
.btn--light { background: #fff; color: var(--sj-teal); box-shadow: var(--shadow-sm); }
.btn--outline-light { border: 2px solid rgba(255, 255, 255, .55); color: #fff; padding: 11px 24px; }
.btn--outline-light:hover { background: #fff; color: var(--sj-teal); }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--lg { padding: 15px 32px; font-size: 17px; }
.btn--block { width: 100%; }

/* ---------- effects ---------- */
.lift { transition: transform .28s ease, box-shadow .28s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -22px rgba(14, 90, 95, .35); }
.zoom-wrap { overflow: hidden; }
.zoom-img { transition: transform .6s ease; }
.zoom-wrap:hover .zoom-img { transform: scale(1.08); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.9,.25,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .09s; }
.reveal.d2 { transition-delay: .18s; }
.reveal.d3 { transition-delay: .27s; }
.reveal.d4 { transition-delay: .36s; }
.reveal.d5 { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .05s !important; }
}

@keyframes floatSlow { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes floatSlower { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(-3deg); } }
.float-slow { animation: floatSlow 6s ease-in-out infinite; }
.float-slower { animation: floatSlower 8s ease-in-out infinite; }

/* Leaf sway, carried over from the original template's banner leaves:
   a gentle rotation that alternates direction. Pivoting from the stem's base
   rather than the centre makes it read as a branch moving in the breeze. */
@keyframes leafSwing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.leafswing {
  transform-box: fill-box;
  transform-origin: 3% 96%;
  animation: leafSwing 4s ease-in-out infinite alternate;
}
/* the mirrored sprig hangs from the other end and swings out of phase */
.leafswing--alt {
  transform-origin: 97% 96%;
  animation-duration: 5s;
  animation-delay: -1.6s;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar { background: var(--sj-cream); border-bottom: 1px solid rgba(14, 90, 95, .1); font-size: 13px; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 8px; }
.topbar__note { color: rgba(10, 63, 66, .8); }
.topbar__note i { font-style: italic; font-weight: 600; color: var(--sj-teal); }
.topbar__note b { font-weight: 600; font-style: italic; color: var(--sj-amber); }
.topbar__right { display: flex; align-items: center; gap: 20px; }
.topbar__mail { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.topbar__mail:hover, .soc a:hover { color: var(--sj-amber); }
.soc { display: flex; align-items: center; gap: 12px; color: rgba(10, 63, 66, .7); }
.soc a { transition: color .2s; }

.masthead { position: sticky; top: 0; z-index: 60; background: #fff; transition: box-shadow .3s; }
.masthead.is-stuck { box-shadow: 0 8px 26px -18px rgba(14, 74, 79, .55); }
.masthead__in { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark {
  height: 40px; width: 40px; border-radius: 50%; background: var(--sj-teal); color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 16px -8px rgba(14, 90, 95, .9);
  transition: transform .25s;
}
.logo:hover .logo__mark { transform: scale(1.06); }
.logo__text { font-family: var(--ff-display); font-size: 22px; font-weight: 800; color: var(--sj-teal); line-height: 1; }
.logo__text span { color: var(--sj-amber); }
.logo--light .logo__text { color: #fff; }
.logo__img { display: block; height: 58px; width: auto; max-width: 220px; object-fit: contain; }
.footer .logo__img { height: 68px; max-width: 260px; }

.mainnav { display: flex; align-items: center; gap: 26px; }
.mainnav a { position: relative; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--sj-teal-dark); transition: color .2s; }
.mainnav a:hover { color: var(--sj-amber); }
.mainnav a.is-active { color: var(--sj-lime-dark); }
.mainnav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 3px; border-radius: 3px; background: var(--sj-lime); }

.head-actions { display: flex; align-items: center; gap: 10px; }
.iconbtn { height: 40px; width: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--sj-teal); transition: background-color .2s; }
.iconbtn:hover { background: var(--sj-mint); }
.burger { display: none; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 340px); background: #fff; z-index: 90;
  transform: translateX(105%); visibility: hidden;
  transition: transform .35s cubic-bezier(.22,.9,.25,1), visibility .35s;
  padding: 24px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto;
  box-shadow: -20px 0 60px -30px rgba(10, 63, 66, .7);
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__nav { display: flex; flex-direction: column; gap: 4px; }
.drawer__nav a { padding: 11px 4px; font-weight: 600; border-bottom: 1px dashed var(--sj-line); }
.drawer__nav a.is-active { color: var(--sj-amber); }
.drawer__foot { margin-top: auto; display: grid; gap: 8px; font-size: 14px; color: var(--sj-muted); }
.scrim { position: fixed; inset: 0; background: rgba(10, 63, 66, .5); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.is-open { opacity: 1; pointer-events: auto; }

/* search */
.searchbar { display: none; background: var(--sj-mint); border-bottom: 1px solid var(--sj-line); }
.searchbar.is-open { display: block; }
.searchbar form { display: flex; gap: 10px; align-items: center; padding-block: 14px; }
.searchbar input {
  flex: 1; border: 1px solid var(--sj-line); background: #fff; border-radius: 999px;
  padding: 12px 20px; outline: none;
}
.searchbar input:focus { border-color: var(--sj-teal); }

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero { position: relative; background: var(--sj-cream); overflow: hidden; }
.hero__dots {
  position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: radial-gradient(var(--sj-teal) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero__in {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center; padding-block: 60px 90px;
}
.hero__copy { position: relative; z-index: 2; }
.hero__kicker { font-family: var(--ff-caveat); font-size: 28px; color: var(--sj-teal); line-height: 1; }

.hero__title { margin-top: 10px; font-size: clamp(42px, 5.4vw, 76px); line-height: .98; color: var(--sj-teal); }
.hero__title .swap-line { display: block; }
/* rotating headline */
.rotator { display: block; position: relative; min-height: 1.98em; }
.rotator__item {
  position: absolute; inset: 0; opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.25,1);
  pointer-events: none;
}
.rotator__item.is-on { opacity: 1; transform: none; position: relative; pointer-events: auto; }
.rotator__item.is-out { opacity: 0; transform: translateY(-24px); }
.rotator__item i { font-family: var(--ff-script); font-style: normal; font-weight: 700; color: var(--sj-amber); }
.rotator__item span { color: var(--sj-teal); }

.hero__lede { margin-top: 22px; max-width: 33rem; color: rgba(10, 63, 66, .8); }
.hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.hero__call { display: inline-flex; align-items: center; gap: 12px; }
.hero__call-ic {
  height: 44px; width: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  color: var(--sj-teal); box-shadow: 0 6px 16px -10px rgba(14, 90, 95, .8);
  border: 1px solid rgba(14, 90, 95, .1); transition: background-color .2s, color .2s;
}
.hero__call:hover .hero__call-ic { background: var(--sj-teal); color: #fff; }
.hero__call small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(10, 63, 66, .6); }
.hero__call b { display: block; font-family: var(--ff-script); font-size: 22px; color: var(--sj-amber); line-height: 1.2; }
/* the vine sits in the empty gutter between the copy column and the slider,
   below the headline and clear of the phone call-out */
.hero__vine { position: absolute; right: -22px; bottom: 44px; width: 168px; pointer-events: none; opacity: .78; z-index: -1; }

/* --- brush-stroke slider --- */
.brush { position: relative; min-height: 520px; }
.brush__stage {
  position: relative; height: 520px;
  -webkit-mask-image: url("../images/brush-mask.svg");
  mask-image: url("../images/brush-mask.svg");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: drop-shadow(0 30px 46px rgba(14, 90, 95, .35));
}
.brush__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1s ease, transform 1.6s ease;
  transform: scale(1.06);
}
.brush__slide.is-on { opacity: 1; transform: scale(1); z-index: 2; }
.brush__slide img { width: 100%; height: 100%; object-fit: cover; }
.brush__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, rgba(10, 63, 66, .42), transparent 55%);
}
/* dry-brush texture streaks painted over the photo edges */
.brush__texture { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* Ornaments sit on a deliberate diagonal so nothing stacks:
   amber stroke hugs the free top-left corner, lime stroke rides the right edge
   between the bullets and the arrows, and the two balloons take the opposite
   diagonal (pink above the top edge, blue off the left edge). The stage's three
   controls own top-right, bottom-left and bottom-right, so decorations avoid
   those corners entirely. */
.brush__paint { position: absolute; z-index: 1; pointer-events: none; }
.brush__paint--amber { left: -58px; top: -58px; width: 240px; opacity: .95; }
.brush__paint--lime { right: -62px; top: 33%; width: 248px; opacity: .95; }

.brush__pin {
  position: absolute; left: 22px; bottom: 22px; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
  padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 700; color: var(--sj-teal-dark);
}
.brush__nav { position: absolute; right: 22px; bottom: 22px; z-index: 5; display: flex; gap: 8px; }
.brush__nav button {
  height: 40px; width: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--sj-teal); transition: background-color .2s, transform .2s;
}
.brush__nav button:hover { transform: translateY(-2px); }
.brush__nav button.is-next { background: var(--sj-lime); color: var(--sj-teal-dark); }
.brush__bullets { position: absolute; right: 22px; top: 22px; z-index: 5; display: flex; gap: 8px; }
.brush__bullets button { height: 8px; width: 8px; border-radius: 999px; background: rgba(255, 255, 255, .55); transition: width .3s, background-color .3s; }
.brush__bullets button.is-on { width: 32px; background: #fff; }
.brush__balloon { position: absolute; pointer-events: none; z-index: 4; }
.brush__balloon--pink { top: -74px; right: 132px; }
.brush__balloon--blue { bottom: 118px; left: -46px; }
/* Second sprig. The artwork's corners are already spoken for (bullets, pin,
   arrows, amber and lime strokes), so this one hangs into the hero's top
   gutter, above and right of the kicker, balancing the sprig at the bottom. */
.hero__leaf { position: absolute; left: 250px; top: 10px; width: 158px; pointer-events: none; z-index: 1; opacity: .8; }

/* ==========================================================================
   PAGE BANNER (inner pages)
   ========================================================================== */
.pagehead { position: relative; background: var(--sj-teal); color: #fff; overflow: hidden; }
.pagehead__bg { position: absolute; inset: 0; }
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.pagehead__in { position: relative; padding-block: 76px; }
.pagehead h1 { color: #fff; font-size: clamp(34px, 4.6vw, 54px); }
.pagehead h1 em { font-family: var(--ff-script); font-style: normal; color: var(--sj-amber-light); }
.pagehead .eyebrow { color: var(--sj-amber-light); }
.pagehead p { margin-top: 12px; max-width: 640px; color: rgba(255, 255, 255, .84); }
.crumbs { margin-top: 18px; display: flex; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.crumbs a:hover { color: var(--sj-amber-light); }

/* ==========================================================================
   CARDS & MODULES
   ========================================================================== */
/* about */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about__media { position: relative; }
.about__main { position: relative; max-width: 440px; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.about__main img { width: 100%; height: 100%; object-fit: cover; }
.about__chip {
  position: absolute; border-radius: var(--radius); overflow: hidden;
  border: 4px solid var(--sj-cream); box-shadow: var(--shadow-md);
}
.about__chip img { width: 100%; height: 100%; object-fit: cover; }
.about__chip--1 { right: -16px; top: 32px; width: 160px; height: 160px; }
.about__chip--2 { right: -8px; bottom: 16px; width: 190px; height: 190px; }
.about__years {
  position: absolute; left: -24px; top: -24px; height: 96px; width: 96px; border-radius: 50%;
  background: var(--sj-amber); color: #fff; display: grid; place-items: center; text-align: center;
  font-family: var(--ff-display); font-weight: 900; box-shadow: var(--shadow-md); line-height: 1.05;
}
.about__years b { display: block; font-size: 26px; }
.about__years span { font-size: 10px; letter-spacing: .18em; }
.about__proof {
  position: absolute; left: -16px; bottom: 24px; display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-md);
}
.avatars { display: flex; }
.avatars img { height: 36px; width: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -8px; }
.avatars img:first-child { margin-left: 0; }
.about__proof b { color: var(--sj-amber); font-size: 18px; line-height: 1; }
.about__proof span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(10, 63, 66, .7); }

.minicards { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.minicard { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.minicard__ic { height: 40px; width: 40px; border-radius: 12px; background: var(--sj-mint); color: var(--sj-teal); display: grid; place-items: center; margin-bottom: 12px; }
.minicard h4 { font-size: 18px; }
.minicard p { margin-top: 6px; font-size: 13px; color: rgba(10, 63, 66, .75); }

/* marquee gallery */
.marquee { position: relative; overflow: hidden; }
.marquee__track { display: flex; gap: 16px; width: max-content; animation: marqueeX 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mtile { position: relative; flex: 0 0 auto; width: 280px; height: 200px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.mtile img { width: 100%; height: 100%; object-fit: cover; }
.mtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 63, 66, .7), transparent 55%); }
.mtile span { position: absolute; left: 16px; bottom: 12px; z-index: 2; color: #fff; font-weight: 600; font-size: 14px; }

/* package cards */
.pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pkg { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.pkg__media { position: relative; height: 200px; overflow: hidden; }
.pkg__media img { width: 100%; height: 100%; object-fit: cover; }
.pkg__tag {
  position: absolute; top: 12px; left: 12px; background: var(--sj-lime); color: var(--sj-teal-dark);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 12px; border-radius: 999px;
}
.pkg__fav { position: absolute; top: 12px; right: 12px; height: 32px; width: 32px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; color: var(--sj-teal); }
.pkg__dur {
  position: absolute; left: 12px; bottom: 12px; background: rgba(255, 255, 255, .93);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; color: var(--sj-teal-dark);
}
.pkg__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pkg__body h3 { font-size: 19px; }
.pkg__route { font-size: 13px; color: var(--sj-muted); }
.stars { color: var(--sj-amber); font-size: 13px; letter-spacing: 2px; }
.pkg__amen { display: flex; flex-wrap: wrap; gap: 8px; color: var(--sj-teal); }
.pkg__amen li { height: 30px; width: 30px; border-radius: 8px; background: var(--sj-mint); display: grid; place-items: center; }
.pkg__price { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--sj-line); }
.pkg__price small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--sj-muted); }
.pkg__price b { font-family: var(--ff-display); font-size: 24px; color: var(--sj-teal); }
.pkg__price s { color: var(--sj-muted); font-size: 14px; margin-left: 6px; }
.pkg__price span { font-size: 12px; color: var(--sj-muted); }
.pkg__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* destination band */
.dband { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--sj-teal); color: #fff; padding: 54px 48px; }
.dband__bg { position: absolute; inset: 0; }
.dband__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.dband__in { position: relative; max-width: 560px; }
.dband h2 { color: #fff; }
.dband h2 em { color: var(--sj-lime); font-family: var(--ff-script); font-style: normal; }
.dband p { margin-top: 14px; color: rgba(255, 255, 255, .85); }
.dband__ghost {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  font-family: var(--ff-display); font-weight: 900; font-size: 92px; line-height: .9;
  color: rgba(255, 255, 255, .1); text-align: right; pointer-events: none;
}

.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dest { position: relative; border-radius: var(--radius); overflow: hidden; height: 230px; box-shadow: var(--shadow-sm); }
.dest img { width: 100%; height: 100%; object-fit: cover; }
.dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 63, 66, .78), transparent 58%); }
.dest__meta { position: absolute; left: 16px; bottom: 14px; z-index: 2; color: #fff; }
.dest__meta small { display: flex; align-items: center; gap: 5px; font-size: 12px; opacity: .85; }
.dest__meta b { font-family: var(--ff-display); font-size: 20px; }
.dest__go { position: absolute; top: 12px; right: 12px; z-index: 2; height: 30px; width: 30px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--sj-teal); display: grid; place-items: center; }

/* counters */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.counters b { display: block; font-family: var(--ff-display); font-size: 40px; color: var(--sj-amber); line-height: 1; }
.counters span { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(10, 63, 66, .7); }

/* faq */
.faq-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.faq__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.faq__media img { width: 100%; height: 100%; object-fit: cover; }
.faq__note {
  position: absolute; left: 18px; bottom: 18px; background: #fff; border-radius: var(--radius);
  padding: 14px 18px; box-shadow: var(--shadow-md); font-family: var(--ff-caveat); font-size: 19px;
  color: var(--sj-teal); max-width: 230px; line-height: 1.25;
}
.acc { display: grid; gap: 12px; }
.acc__item { background: #fff; border: 1px solid var(--sj-line); border-radius: var(--radius); overflow: hidden; }
.acc__item[open] { border-color: rgba(245, 166, 35, .55); box-shadow: var(--shadow-sm); }
.acc__q {
  list-style: none; cursor: pointer; padding: 16px 20px; display: flex; gap: 12px; align-items: center;
  font-weight: 600; color: var(--sj-teal-dark);
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q i { font-style: normal; color: var(--sj-amber); font-weight: 800; font-size: 13px; letter-spacing: .06em; }
.acc__q::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--sj-teal); }
.acc__item[open] .acc__q::after { content: "–"; }
.acc__a { padding: 0 20px 18px; color: rgba(10, 63, 66, .78); font-size: 14.5px; }

/* services */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc { position: relative; border-radius: var(--radius); overflow: hidden; height: 220px; box-shadow: var(--shadow-sm); }
.svc img { width: 100%; height: 100%; object-fit: cover; }
.svc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 63, 66, .8), rgba(10, 63, 66, .05) 60%); }
.svc__label { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 16px; color: #fff; font-family: var(--ff-display); font-weight: 700; font-size: 17px; text-align: center; }
.svc__go { position: absolute; top: 12px; right: 12px; z-index: 2; height: 30px; width: 30px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--sj-teal); display: grid; place-items: center; }
.svc-wordmark { text-align: center; }
.svc-wordmark p { font-family: var(--ff-script); font-size: clamp(20px, 2.4vw, 30px); color: var(--sj-amber); }
.svc-wordmark h3 { font-size: clamp(34px, 6vw, 76px); letter-spacing: .02em; }
.svc-wordmark h3 em { font-style: normal; color: var(--sj-amber); }

/* plans */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; }
.plan--pop { outline: 3px solid var(--sj-lime); }
.plan__flag { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--sj-lime); color: var(--sj-teal-dark); border-radius: 999px; font-size: 11px; font-weight: 800; padding: 5px 12px; text-transform: uppercase; letter-spacing: .1em; }
.plan__media { height: 170px; overflow: hidden; }
.plan__media img { width: 100%; height: 100%; object-fit: cover; }
.plan__body { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.plan__price { font-family: var(--ff-display); font-size: 34px; color: var(--sj-amber); line-height: 1; }
.plan__price span { font-family: var(--ff-body); font-size: 13px; color: var(--sj-muted); }
.ticks { display: grid; gap: 9px; font-size: 14px; color: rgba(10, 63, 66, .82); }
.ticks li { display: flex; gap: 9px; align-items: flex-start; }
.ticks li::before { content: "✓"; color: var(--sj-lime-dark); font-weight: 800; }

/* blog */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.post__media { position: relative; height: 210px; overflow: hidden; }
.post__media img { width: 100%; height: 100%; object-fit: cover; }
.post__date {
  position: absolute; left: 14px; top: 14px; background: var(--sj-amber); color: #fff; border-radius: 12px;
  padding: 8px 12px; text-align: center; font-weight: 800; line-height: 1;
}
.post__date b { display: block; font-size: 18px; font-family: var(--ff-display); }
.post__date span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.post__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post__meta { font-size: 12px; color: var(--sj-muted); display: flex; gap: 14px; }
.post__body h3 { font-size: 19px; line-height: 1.3; }
.post__body h3 a:hover { color: var(--sj-amber); }
.post__more { margin-top: auto; font-weight: 700; color: var(--sj-teal); display: inline-flex; gap: 6px; }
.post__more:hover { color: var(--sj-amber); }

/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote { background: #fff; border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; }
.quote__mark { font-family: var(--ff-display); font-size: 46px; line-height: .6; color: var(--sj-amber); }
.quote p { color: rgba(10, 63, 66, .82); }
.quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.quote figcaption img { height: 44px; width: 44px; border-radius: 50%; object-fit: cover; }
.quote figcaption b { display: block; color: var(--sj-teal); }
.quote figcaption span { font-size: 13px; color: var(--sj-muted); }

/* cta strip */
.ctastrip { position: relative; overflow: hidden; background: var(--sj-teal-dark); color: #fff; }
.ctastrip__bg { position: absolute; inset: 0; }
.ctastrip__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .25; }
.ctastrip__in { position: relative; padding-block: 68px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.ctastrip h2 { color: #fff; }
.ctastrip h2 em { font-family: var(--ff-script); font-style: normal; color: var(--sj-lime); }
.ctastrip p { margin-top: 10px; color: rgba(255, 255, 255, .82); max-width: 560px; }
.ctastrip__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* forms */
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--sj-teal-dark); }
.field input, .field select, .field textarea {
  border: 1px solid var(--sj-line); border-radius: 12px; padding: 12px 14px; background: #fff; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sj-teal); box-shadow: 0 0 0 3px rgba(14, 90, 95, .1); }
.formcard { background: #fff; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-md); display: grid; gap: 16px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formnote { font-size: 13px; color: var(--sj-muted); }
.alert { border-radius: 12px; padding: 12px 16px; font-size: 14px; }
.alert--ok { background: rgba(184, 230, 45, .22); color: var(--sj-teal-dark); }
.alert--err { background: rgba(239, 68, 68, .12); color: #b91c1c; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: #fff; padding: 18px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.filters .field { flex: 1 1 180px; }
.chiprow { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid var(--sj-line); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; background: #fff; transition: all .2s; }
.chip:hover { border-color: var(--sj-teal); }
.chip.is-on { background: var(--sj-teal); border-color: var(--sj-teal); color: #fff; }

/* itinerary */
.itin { display: grid; gap: 16px; }
.itin__day { background: #fff; border-radius: var(--radius); border: 1px solid var(--sj-line); overflow: hidden; }
.itin__q { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; gap: 14px; align-items: center; font-weight: 700; color: var(--sj-teal); }
.itin__q::-webkit-details-marker { display: none; }
.itin__q b { background: var(--sj-mint); color: var(--sj-teal); border-radius: 10px; padding: 6px 12px; font-size: 13px; }
.itin__q::after { content: "+"; margin-left: auto; font-size: 20px; }
.itin__day[open] .itin__q::after { content: "–"; }
.itin__a { padding: 0 20px 18px 20px; color: rgba(10, 63, 66, .8); font-size: 14.5px; }

.sticky-card { position: sticky; top: 110px; }

/* two-column page layouts (detail / contact / plan). Declared as a class so the
   mobile collapse is guaranteed, rather than relying on inline grid styles. */
.split { display: grid; gap: 44px; align-items: start; }
.split--detail { grid-template-columns: 1.55fr .95fr; }
.split--article { grid-template-columns: 1.5fr .8fr; }
.split--form { grid-template-columns: 1.15fr .85fr; }
.split--contact { grid-template-columns: .85fr 1.15fr; }
.media-split { display: grid; gap: 30px; align-items: stretch; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.media-split { grid-template-columns: .95fr 1.05fr; }
.media-split--flip { grid-template-columns: 1.05fr .95fr; }
.media-split--flip .media-split__fig { order: 2; }
.media-split__fig { height: 100%; min-height: 260px; margin: 0; }
.media-split__fig img { width: 100%; height: 100%; object-fit: cover; }
.media-split__body { padding: 30px; align-self: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* --------------------------------------------------------------------------
   PARTNER HOTELS — dark rounded panel with expanding tiles.
   Modelled on the old template's "most favourite tour" band: tiles share the
   row with flex, and the hovered/active one grows to reveal its detail strip.
   -------------------------------------------------------------------------- */
.stays { padding: 50px 0; background: var(--sj-mint); }
.stays__panel { position: relative; background: var(--sj-teal); border-radius: var(--radius-xl); overflow: hidden; }
.stays__top { position: relative; z-index: 2; display: flex; align-items: center; gap: 40px; padding: 74px 40px 44px; }
.stays__intro { max-width: 520px; }
.stays__intro h2 { color: #fff; }
.stays__intro h2 em { font-family: var(--ff-script); font-style: normal; color: var(--sj-amber); }
.stays__intro p { margin-top: 14px; color: rgba(255, 255, 255, .82); }
.stays__proof { display: flex; align-items: center; gap: 14px; margin: 28px 0; }
.stays__proof b { display: block; font-weight: 900; font-size: 22px; color: var(--sj-lime); line-height: 1; }
.stays__proof span { display: block; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: #fff; }
.stays__wordmark {
  margin-left: auto; padding-left: 60px; text-align: right;
  font-family: var(--ff-display); font-weight: 900; font-size: clamp(44px, 6.6vw, 104px);
  line-height: 1.06; text-transform: uppercase; color: #fff;
}
.stays__wordmark span { display: block; color: var(--sj-amber); }
.stays__peak { position: absolute; right: 0; top: 0; width: 34%; max-width: 420px; opacity: .16; pointer-events: none; z-index: 1; }

.stays__row { position: relative; z-index: 2; display: flex; gap: 10px; padding: 0 34px 34px; }
.stay {
  flex: 1 1 0; min-width: 0; display: block;
  background: var(--sj-teal); border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--radius-lg);
  padding: 14px; transition: flex-grow .5s ease, background-color .5s ease;
}
.stay:hover, .stay:focus-visible { flex-grow: 3.2; background: var(--sj-mint); }
.stay__media { position: relative; border-radius: 20px; overflow: hidden; }
.stay__media img { width: 100%; height: 320px; object-fit: cover; object-position: center; transition: transform .6s ease; }
.stay:hover .stay__media img { transform: scale(1.06); }
/* the tag needs the expanded width to sit legibly, so it fades in with the tile */
.stay__tag {
  position: absolute; top: 12px; left: 12px; background: var(--sj-lime); color: var(--sj-teal-dark);
  border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  opacity: 0; transform: translateY(-6px); transition: opacity .4s ease, transform .4s ease;
}
.stay:hover .stay__tag { opacity: 1; transform: none; }
.stay__stars {
  position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, .92); color: var(--sj-amber);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; letter-spacing: 1px; white-space: nowrap;
}
.stay__body { margin-top: 14px; text-align: center; }
.stay__name {
  display: block; font-family: var(--ff-display); font-size: 18px; font-weight: 700; line-height: 1.25;
  color: #fff; transition: color .5s ease, font-size .5s ease;
  /* collapsed tiles are narrow, so allow two lines and clamp the rest */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stay:hover .stay__name { font-size: 25px; white-space: nowrap; }
.stay__place {
  display: block; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .82);
  transition: color .5s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stay:hover .stay__name, .stay:hover .stay__place { color: var(--sj-teal); }
/* the detail strip only has room once the tile expands */
.stay__more {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s ease, opacity .4s ease, margin-top .5s ease;
  font-size: 13px; color: var(--sj-teal); white-space: nowrap;
}
.stay:hover .stay__more { max-height: 60px; opacity: 1; margin-top: 12px; }
.stay__more b { color: var(--sj-teal); font-size: 15px; }
.stay__more i { font-style: normal; color: rgba(10, 63, 66, .55); }

.stays__foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 0 34px 40px; }
.stays__foot p { color: rgba(255, 255, 255, .78); font-size: 14.5px; }
/* horizontal swipe rail on narrow screens, matching the slider feel */
@media (max-width: 1199px) {
  .stays { padding: 0; }
  .stays__panel { border-radius: 0; }
  .stays__row {
    overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: 20px;
    scrollbar-width: none;
  }
  .stays__row::-webkit-scrollbar { display: none; }
  .stay { flex: 0 0 300px; scroll-snap-align: center; }
  .stay:hover, .stay:focus-visible { flex-grow: 0; }
  .stay__tag { opacity: 1; transform: none; }
  .stay__name { font-size: 22px; }
  .stay:hover .stay__name { font-size: 22px; }
  .stay__more { max-height: 60px; opacity: 1; margin-top: 12px; color: rgba(255, 255, 255, .85); }
  .stay__more b, .stay__more i { color: rgba(255, 255, 255, .9); }
  .stay:hover .stay__more { color: var(--sj-teal); }
  .stay:hover .stay__more b, .stay:hover .stay__more i { color: var(--sj-teal); }
}
@media (max-width: 991px) {
  .stays__top { display: block; padding: 50px 24px 26px; }
  .stays__wordmark { padding-left: 0; padding-top: 24px; text-align: left; }
  .stays__peak { display: none; }
  .stays__foot { padding: 0 24px 34px; }
}
@media (max-width: 575px) {
  .stays__row { padding-inline: 14px; }
  .stay { flex-basis: 260px; }
}

/* --------------------------------------------------------------------------
   WEDDINGS — the flagship service, given a warm marigold/rose treatment so it
   reads as an occasion rather than another card in the services grid.
   -------------------------------------------------------------------------- */
:root {
  --sj-marigold: #f08a24;
  --sj-rose: #b3204a;
  --sj-rose-deep: #7d1233;
  --sj-gold: #d4a03c;
}

/* the featured tile inside the services grid. It occupies a 2x2 block, and
   `dense` flow lets the ordinary tiles backfill the gap it would leave. */
.svc-grid:has(.svc--wedding) { grid-auto-flow: dense; }
.svc--wedding { grid-column: span 2; grid-row: span 2; height: auto; }
.svc--wedding::after { background: linear-gradient(to top, rgba(125, 18, 51, .88), rgba(125, 18, 51, .12) 62%); }
.svc--wedding .svc__label { font-size: 22px; }
.svc--wedding .svc__go { background: var(--sj-gold); color: #fff; }
.svc__flag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--sj-gold); color: #fff; border-radius: 999px;
  padding: 5px 14px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
}

/* the standalone wedding feature band */
.wed { position: relative; overflow: hidden; background: #fff6ef; padding-block: 92px; }
.wed__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 380px at 12% 0%, rgba(240, 138, 36, .16), transparent 70%),
    radial-gradient(620px 420px at 92% 100%, rgba(179, 32, 74, .14), transparent 70%);
}
/* marigold garland strung across the top, the way a mandap is dressed */
.wed__garland { position: absolute; top: 0; left: 0; width: 100%; height: 54px; pointer-events: none; opacity: .9; }

.wed__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.wed__eyebrow { font-family: var(--ff-caveat); font-size: 27px; color: var(--sj-rose); line-height: 1; }
.wed__title { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.12; color: var(--sj-rose-deep); margin-top: 6px; }
.wed__title em { font-family: var(--ff-script); font-style: normal; color: var(--sj-marigold); }
.wed__lede { margin-top: 18px; color: rgba(80, 26, 43, .82); max-width: 56ch; }
.wed__quote {
  margin-top: 22px; padding: 16px 22px; border-left: 4px solid var(--sj-gold);
  background: rgba(255, 255, 255, .72); border-radius: 0 14px 14px 0;
  font-family: var(--ff-caveat); font-size: 22px; line-height: 1.4; color: var(--sj-rose-deep);
}
.wed__cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn--rose { background: var(--sj-rose); color: #fff; box-shadow: 0 10px 26px -12px rgba(179, 32, 74, .9); }
.btn--rose:hover { background: var(--sj-rose-deep); }
.btn--gold-ghost { border: 2px solid var(--sj-gold); color: var(--sj-rose-deep); padding: 11px 24px; }
.btn--gold-ghost:hover { background: var(--sj-gold); color: #fff; }

/* collage */
.wed__art { position: relative; }
.wed__art figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px -32px rgba(125, 18, 51, .55); }
.wed__art img { width: 100%; height: 100%; object-fit: cover; }
.wed__art-main { aspect-ratio: 4 / 3; }
.wed__art-sm {
  position: absolute; width: 46%; aspect-ratio: 3 / 4; border: 5px solid #fff6ef; border-radius: var(--radius-lg);
}
.wed__art-sm--1 { right: -18px; bottom: -34px; }
.wed__art-sm--2 { left: -26px; bottom: -52px; width: 34%; aspect-ratio: 1 / 1; }
.wed__seal {
  position: absolute; top: -22px; left: -22px; z-index: 3;
  height: 104px; width: 104px; border-radius: 50%;
  background: var(--sj-gold); color: #fff; display: grid; place-items: center; text-align: center;
  font-family: var(--ff-display); font-weight: 900; line-height: 1.05;
  box-shadow: 0 18px 34px -16px rgba(125, 18, 51, .8);
}
.wed__seal b { display: block; font-size: 26px; }
.wed__seal span { font-size: 9.5px; letter-spacing: .16em; }

/* ritual timeline */
.wed__rituals { position: relative; z-index: 2; margin-top: 76px; }
.wed__rituals h3 { text-align: center; color: var(--sj-rose-deep); font-size: clamp(24px, 2.6vw, 32px); }
.wed__rituals > p { text-align: center; margin: 10px auto 0; max-width: 60ch; color: rgba(80, 26, 43, .75); }
.ritualrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 38px; }
.ritual {
  position: relative; background: #fff; border-radius: var(--radius); padding: 26px 18px 20px;
  box-shadow: 0 14px 34px -24px rgba(125, 18, 51, .55); text-align: center;
  border-top: 3px solid var(--sj-gold);
}
.ritual__no {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  height: 34px; width: 34px; border-radius: 50%; background: var(--sj-rose); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
}
.ritual h4 { color: var(--sj-rose-deep); font-size: 17px; margin-bottom: 8px; }
.ritual p { font-size: 13.5px; color: rgba(80, 26, 43, .78); line-height: 1.6; }

/* promises */
.wed__promises { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 46px; }
.promise { background: rgba(255, 255, 255, .8); border-radius: var(--radius); padding: 22px; }
.promise__ic { height: 42px; width: 42px; border-radius: 12px; background: rgba(240, 138, 36, .16); color: var(--sj-rose); display: grid; place-items: center; margin-bottom: 12px; }
.promise h4 { color: var(--sj-rose-deep); font-size: 16.5px; }
.promise p { margin-top: 6px; font-size: 13.5px; color: rgba(80, 26, 43, .78); line-height: 1.6; }

.wed__foot {
  position: relative; z-index: 2; margin-top: 46px; padding: 26px 30px;
  background: var(--sj-rose-deep); border-radius: var(--radius-lg); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.wed__foot p { color: rgba(255, 255, 255, .86); }
.wed__foot strong { display: block; font-family: var(--ff-display); font-size: 21px; color: #fff; }

@media (max-width: 1100px) {
  .ritualrow { grid-template-columns: repeat(3, 1fr); }
  .wed__promises { grid-template-columns: repeat(2, 1fr); }
  .svc--wedding { grid-column: span 2; }
}
@media (max-width: 960px) {
  .wed__in { grid-template-columns: 1fr; gap: 70px; }
  .wed { padding-block: 64px; }
  .wed__art-sm--2 { display: none; }
}
@media (max-width: 720px) {
  .ritualrow, .wed__promises { grid-template-columns: 1fr; }
  .svc--wedding { grid-column: span 1; grid-row: span 1; height: 260px; }
  .wed__art-sm { display: none; }
  .wed__seal { height: 82px; width: 82px; top: -14px; left: -10px; }
  .wed__seal b { font-size: 21px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--sj-teal-dark); color: rgba(255, 255, 255, .78); padding-block: 60px 0; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
.footer h4 { color: #fff; font-size: 17px; margin-bottom: 16px; }
.footer a:hover { color: var(--sj-lime); }
.footer__links { display: grid; gap: 10px; font-size: 14.5px; }
.footer__links a { display: inline-flex; gap: 8px; }
.footer__contact { display: grid; gap: 12px; font-size: 14.5px; }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer__news { display: flex; gap: 8px; margin-top: 14px; }
.footer__news input { flex: 1; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; padding: 11px 18px; outline: none; }
.footer__news input::placeholder { color: rgba(255, 255, 255, .5); }
.footer__soc { display: flex; gap: 10px; margin-top: 18px; }
.footer__soc a { height: 36px; width: 36px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; transition: background-color .2s, color .2s; }
.footer__soc a:hover { background: var(--sj-lime); color: var(--sj-teal-dark); }
.footer__bar { margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
.footer__bar ul { display: flex; gap: 18px; }

.floatwa {
  position: fixed; right: 20px; bottom: 20px; z-index: 70; height: 54px; width: 54px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -12px rgba(37, 211, 102, .9);
  transition: transform .2s;
}
.floatwa:hover { transform: scale(1.08); }
.totop {
  position: fixed; right: 20px; bottom: 86px; z-index: 70; height: 44px; width: 44px; border-radius: 50%;
  background: var(--sj-teal); color: #fff; display: grid; place-items: center; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .2s;
}
.totop.is-on { opacity: 1; pointer-events: auto; }
.totop:hover { transform: translateY(-3px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .pkg-grid, .dest-grid, .svc-grid, .counters { grid-template-columns: repeat(2, 1fr); }
  .blog-grid, .plan-grid, .quotes { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* The primary nav carries nine items; below this width it no longer fits
   beside the logo and CTA, so hand over to the drawer before it overflows. */
@media (max-width: 1180px) {
  .mainnav { display: none; }
  .burger { display: grid; }
}
@media (max-width: 960px) {
  .hero__in { grid-template-columns: 1fr; padding-block: 40px 70px; }
  .brush, .brush__stage { min-height: 400px; height: 400px; }
  .about__grid, .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .about__main { max-width: 100%; }
  .dband__ghost { display: none; }
  .section { padding-block: 64px; }
  .split, .media-split, .media-split--flip { grid-template-columns: 1fr; }
  .media-split--flip .media-split__fig { order: 0; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .sticky-card { position: static; }
}

/* Once the hero stacks, the copy column sits directly above the slider, so any
   ornament hanging off the artwork's top or left edge lands on the buttons.
   The stage's controls occupy top-right (bullets), bottom-left (pin) and
   bottom-right (arrows), so the stacked layout keeps decorations on the two
   free edges: top-left and the middle of the left and right sides. */
@media (max-width: 1300px) {
  .hero__vine { display: none; }
}
@media (max-width: 960px) {
  /* give the ornaments room above the artwork so they never reach the CTA row */
  .brush { margin-top: 56px; }
  .brush__paint--amber { left: -18px; right: auto; top: -30px; width: 176px; }
  .brush__paint--lime { right: -20px; left: auto; top: 42%; bottom: auto; width: 168px; }
  .brush__balloon--pink { top: -66px; right: 96px; left: auto; width: 54px; }
  .brush__balloon--blue { bottom: 38%; left: -30px; right: auto; width: 48px; }
  /* keep the top sprig inside the viewport once the hero stacks */
  .hero__leaf { left: auto; right: 6px; top: 6px; width: 132px; }
}
@media (max-width: 575px) {
  .brush { margin-top: 46px; }
  .brush__paint--amber { width: 128px; top: -22px; left: -12px; }
  .brush__paint--lime { display: none; }
  .brush__balloon--pink { top: -50px; right: 14px; width: 42px; }
  .brush__balloon--blue { display: none; }
  .hero__leaf { width: 108px; right: 2px; opacity: .7; }
}
@media (max-width: 720px) {
  .topbar__note { display: none; }
  .topbar__in { justify-content: center; }
  .pkg-grid, .dest-grid, .svc-grid, .blog-grid, .plan-grid, .quotes, .minicards, .form-2 { grid-template-columns: 1fr; }
  .counters { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .about__chip, .about__years { display: none; }
  .dband { padding: 34px 24px; }
  .hero__title { font-size: 40px; }
  .rotator { min-height: 2.05em; }
  .head-actions .btn { display: none; }
  :root { --pad: 18px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .media-split__body { padding: 22px; }
}