/* =========================================================
   DIAMOND PHOTOGRAPHY — DESIGN SYSTEM
   Mobile-first. Enhancement at 768px and 1100px.
   ========================================================= */

:root {
  /* --- palette (warm light theme) ---
     ink-950/900/800 are kept dark on purpose: they're still used for
     photo scrims, the lightbox backdrop, and dark UI chrome (nav pill,
     whatsapp fab) that sit on top of imagery regardless of site theme. */
  --ink-950: #0A0605;
  --ink-900: #170D0C;
  --ink-800: #2B1B12;
  --red-500: #A32E2E;
  --red-400: #C24B45;
  --red-600: #D6301F;
  --red-900: #3B0C0C;
  --gold-500: #B8863E;
  --gold-veil: rgba(184, 134, 62, 0.28);
  --cream-100: #F1E6DC;
  --cream-200: #F5EDE6;
  --taupe-400: #BBA89B;
  /* new: light-theme surfaces + dark-on-light text */
  --paper-050: #FBF2E3;
  --paper-100: #F3E2C9;
  --text-dark: #2B1B12;
  --text-muted: #7A6353;
  --line-dark: rgba(43, 27, 18, 0.12);

  /* --- type --- */
  --f-display: "Fraunces", "Playfair Display", serif;
  --f-editorial: "Playfair Display", serif;
  --f-body: "Manrope", sans-serif;
  --f-script: "Alex Brush", cursive;

  /* --- rhythm --- */
  --gutter: 20px;
  --section-pad: 88px;
  --radius-soft: 2px;

  --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --section-pad: 140px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 64px; --section-pad: 180px; }
}

/* =============== RESET =============== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--paper-050);
  color: var(--text-dark);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

/* grain overlay, subtle, sits above section content but below fixed UI (nav/lightbox/fab/intro) */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  filter: url(#grainFilter);
  opacity: 0.5;
  mix-blend-mode: overlay;
}

.section-label {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--red-500);
  margin: 0 0 14px;
}
.section-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 7vw, 52px);
  line-height: 1.1;
  color: var(--text-dark);
  max-width: 14ch;
}
.section-head { padding: 0 var(--gutter); margin-bottom: 44px; }
@media (min-width: 1100px) { .section-head { margin-bottom: 64px; } }

.text-link {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dark);
  border-bottom: 1px solid var(--gold-veil);
  padding-bottom: 4px;
  transition: border-color 0.3s var(--ease-cinema), color 0.3s var(--ease-cinema);
}
.text-link:hover { border-color: var(--red-500); color: var(--red-500); }

/* =========================================================
   INTRO
   ========================================================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 900;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(214, 48, 31, 0.14), transparent 60%),
    var(--paper-050);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.intro-inner { padding: 0 24px; }
.intro-mark {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  opacity: 0;
  margin: 0 0 18px;
}
.intro-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 9vw, 64px);
  letter-spacing: 0.02em;
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(18px);
}
.intro-name span {
  display: block;
  font-size: 0.42em;
  letter-spacing: 0.32em;
  color: var(--red-500);
  font-family: var(--f-body);
  font-weight: 600;
}
.intro-quote {
  font-family: var(--f-editorial);
  font-style: italic;
  font-size: clamp(14px, 3vw, 18px);
  color: var(--text-muted);
  margin-top: 20px;
  opacity: 0;
}
.intro-bar {
  width: 160px;
  height: 1px;
  background: var(--line-dark);
  margin: 40px auto 0;
  overflow: hidden;
}
.intro-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--red-500);
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.site-nav {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  padding: 0 14px;
  opacity: 0;
  transform: translateY(-14px);
}
@media (min-width: 768px) { .site-nav { top: 24px; } }

.nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 960px;
  background: linear-gradient(180deg, rgba(43, 24, 20, 0.42), rgba(20, 11, 10, 0.5));
  border: 1px solid rgba(241, 230, 220, 0.16);
  box-shadow: 0 14px 40px rgba(10, 6, 5, 0.35), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(184,134,62,0.06);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-radius: 999px;
  padding: 12px 12px 12px 22px;
}
.nav-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(184,134,62,0.35), transparent 30%, transparent 70%, rgba(163,46,46,0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@media (min-width: 768px) { .nav-pill { padding: 14px 14px 14px 28px; gap: 16px; } }
.nav-logo {
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--cream-100);
  white-space: nowrap;
  margin-right: 4px;
}
@media (min-width: 768px) { .nav-logo { font-size: 18px; } }
.nav-links-wrap {
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-links-wrap::-webkit-scrollbar { display: none; }
.nav-links {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}
.nav-indicator {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(241, 230, 220, 0.09);
  border: 1px solid rgba(241, 230, 220, 0.1);
  transform: translateX(0);
  width: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s var(--ease-cinema);
}
.nav-links:hover .nav-indicator, .nav-indicator.is-visible { opacity: 1; }
.nav-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--taupe-400);
  padding: 12px 12px;
  border-radius: 999px;
  transition: color 0.25s var(--ease-cinema);
}
@media (min-width: 768px) { .nav-link { padding: 12px 16px; font-size: 13.5px; } }
.nav-link-icon { flex-shrink: 0; }
.nav-link-text { display: none; }
@media (min-width: 768px) { .nav-link-text { display: inline; } }
.nav-link.is-active, .nav-link:hover { color: var(--cream-100); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-book {
  display: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper-050);
  background: linear-gradient(135deg, var(--red-600), var(--red-500));
  padding: 12px 22px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(214, 48, 31, 0.35);
  transition: transform 0.25s var(--ease-cinema), box-shadow 0.25s var(--ease-cinema);
}
.nav-book:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(214, 48, 31, 0.45); }
@media (min-width: 640px) { .nav-book { display: inline-block; } }
.nav-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-500), var(--red-500));
  color: var(--cream-100);
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(184,134,62,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.25s var(--ease-cinema), box-shadow 0.25s var(--ease-cinema);
}
.nav-whatsapp svg { width: 19px; height: 19px; }
.nav-whatsapp:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 8px 20px rgba(184,134,62,0.45); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  z-index: 1;
  /* 100svh (small viewport height) instead of 100vh/100dvh: svh is fixed to
     the viewport size when mobile browser chrome is fully expanded, so it
     never changes as the address bar shows/hides mid-scroll. That removes
     the resize-vs-scroll-position fight at its root, rather than papering
     over it with a static px workaround. Desktop browsers don't have a
     collapsing chrome bar, so svh == vh there anyway. */
  height: 100svh;
  overflow: clip;
}
/* Mobile no longer pins the hero (see script.js) — it scrolls away and the
   portfolio section simply follows in normal flow, layered by z-index. */
.hero-pin {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; will-change: transform, filter; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(10,6,5,0.86) 0%, rgba(10,6,5,0.32) 42%, rgba(10,6,5,0.08) 62%, rgba(10,6,5,0.5) 100%);
}
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 var(--gutter) 64px;
  will-change: transform, opacity, filter;
  transform-origin: center 46%;
  z-index: 3;
}
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
}

.hero-meta {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--taupe-400);
}
.hero-meta--top { margin-bottom: 18px; }
.hero-headline {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(44px, 13vw, 108px);
  line-height: 0.98;
  color: var(--cream-100);
  margin: 0 0 20px;
}
.hero-headline-line { display: block; }
.hero-headline-line--script {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 0.5em;
  color: var(--red-400);
  margin-top: -0.02em;
}
.hero-sub {
  font-family: var(--f-editorial);
  font-style: italic;
  font-size: clamp(15px, 3vw, 20px);
  color: var(--cream-200);
  max-width: 34ch;
  margin: 0 auto 32px;
}
.hero-foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  z-index: 3;
}
@media (min-width: 1100px) { .hero-foot { bottom: 40px; } }
.hero-meta--location, .hero-meta--est { font-size: 11px; }
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cream-100);
  border-bottom: 1px solid var(--gold-500);
  padding-bottom: 6px;
  transition: gap 0.3s var(--ease-cinema), color 0.3s var(--ease-cinema);
}
.hero-cta:hover { gap: 16px; color: var(--gold-500); }

.scroll-hint {
  position: absolute;
  bottom: 28px;
  right: var(--gutter);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--taupe-400);
  z-index: 3;
}
@media (min-width: 768px) { .scroll-hint { display: flex; } }
.scroll-hint-line {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--gold-500), transparent);
}

/* ---- reusable torn-paper edge: jagged bottom border via clip-path,
   used at the seam where portfolio slides over the hero, and at the
   top of the footer. Height/jaggedness scale up slightly on desktop. ---- */
.torn-edge {
  position: absolute;
  left: -1%; right: -1%;
  top: 0;
  height: 56px;
  background: var(--paper-050);
  clip-path: polygon(0% 42%, 4% 66%, 8% 24%, 12% 58%, 16% 18%, 20% 60%, 24% 28%,
    28% 52%, 32% 14%, 36% 50%, 40% 24%, 44% 60%, 48% 20%, 52% 46%, 56% 12%,
    60% 54%, 64% 22%, 68% 50%, 72% 16%, 76% 58%, 80% 26%, 84% 46%, 88% 14%,
    92% 52%, 96% 20%, 100% 44%, 100% 0%, 0% 0%);
  filter: drop-shadow(0 8px 10px rgba(20, 10, 6, 0.22));
  pointer-events: none;
  z-index: 4;
}
@media (min-width: 768px) { .torn-edge { height: 76px; } }
@media (min-width: 1100px) { .torn-edge { height: 96px; } }

/* =========================================================
   PORTFOLIO / MASONRY
   ========================================================= */
.portfolio {
  position: relative;
  z-index: 10;
  background:
    radial-gradient(70% 55% at 12% 0%, var(--gold-veil), transparent 60%),
    radial-gradient(60% 50% at 96% 30%, rgba(163,46,46,0.14), transparent 60%),
    var(--paper-050);
  padding: 64px 0 var(--section-pad);
}
.portfolio::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  opacity: 0.5;
  mix-blend-mode: overlay;
  filter: url(#grainFilter);
  pointer-events: none;
}
.portfolio > *:not(.torn-edge) { position: relative; z-index: 2; }
.masonry {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  padding: 0 3px;
}
@media (min-width: 768px) {
  .masonry { grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 4px; }
}
@media (min-width: 1100px) {
  .masonry { grid-template-columns: repeat(6, 1fr); }
}
.masonry-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper-100);
  border: 1px solid rgba(43,27,18,0.05);
}
.masonry-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.14) saturate(1.08) contrast(1.03);
  transition: transform 0.7s var(--ease-cinema), filter 0.5s var(--ease-cinema);
}
.masonry-item:hover img { transform: scale(1.06); filter: sepia(0.04) saturate(1.15) contrast(1.05); }
.masonry-item::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(163,46,46,0.16) 0%, transparent 40%),
    radial-gradient(120% 90% at 50% 110%, rgba(10,6,5,0.35), transparent 60%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.masonry-item::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 50%, rgba(10,6,5,0.8) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-cinema);
}
.masonry-item:hover::after { opacity: 1; }
.masonry-label {
  position: absolute;
  left: 12px; bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--cream-100);
  opacity: 1;
  z-index: 2;
}
@media (min-width: 768px) {
  .masonry-label { opacity: 0; transform: translateY(6px); transition: opacity 0.35s var(--ease-cinema), transform 0.35s var(--ease-cinema); }
  .masonry-item:hover .masonry-label { opacity: 1; transform: translateY(0); }
}

/* span variants for asymmetric composition */
.m-tall { grid-row: span 2; }
.m-wide { grid-column: span 2; }
.m-big { grid-column: span 2; grid-row: span 2; }

.portfolio-foot { text-align: center; margin-top: 40px; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(6, 3, 3, 0.96);
  display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 16px) 8px env(safe-area-inset-bottom, 16px);
}
.lightbox[hidden] { display: none; }
.lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 1400px;
}
.lightbox-figure { max-width: min(92vw, 900px); width: 100%; text-align: center; flex-shrink: 0; }
.lightbox-figure img { width: 100%; max-height: 70svh; object-fit: contain; margin: 0 auto; }
.lightbox-figure figcaption {
  margin-top: 14px;
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.06em; color: var(--taupe-400);
}
.lightbox-category { color: var(--gold-500); }
.lightbox-close {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream-100); background: rgba(241,230,220,0.08);
  z-index: 2;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream-100); background: rgba(241,230,220,0.08);
  transition: background 0.25s var(--ease-cinema), transform 0.25s var(--ease-cinema);
  z-index: 2;
}
.lightbox-nav:hover { background: rgba(241,230,220,0.16); }
.lightbox-prev { left: 6px; }
.lightbox-next { right: 6px; }
@media (min-width: 768px) { .lightbox-prev, .lightbox-next { width: 46px; height: 46px; } .lightbox-prev { left: 24px; } .lightbox-next { right: 24px; } }

/* neighbor previews — desktop only, blurred, click to jump */
.lightbox-neighbor {
  display: none;
  width: 220px;
  aspect-ratio: 3/4;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0.4;
  filter: blur(3px);
  transform: scale(0.92);
  transition: opacity 0.35s var(--ease-cinema), filter 0.35s var(--ease-cinema), transform 0.35s var(--ease-cinema);
}
.lightbox-neighbor:hover { opacity: 0.75; filter: blur(1px); transform: scale(0.95); }
.lightbox-neighbor img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1200px) { .lightbox-neighbor { display: block; } }

/* =========================================================
   PACKAGES — STICKY STACK
   ========================================================= */
.packages { position: relative; background: var(--paper-050); padding-top: var(--section-pad); }
.packages::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  filter: url(#grainFilter);
  pointer-events: none;
}

.stack-wrap {
  position: relative;
  /* Must match 3 × .stack-card height exactly, or the sticky stack (mobile)
     and the pinned stack (desktop) end with a leftover scroll gap before
     the next section. Both now use svh, so this does too.
     NOTE: deliberately NOT overflow:hidden here — any ancestor with
     overflow != visible becomes the containing block for position:sticky,
     and since this element never actually scrolls internally, that would
     silently turn the mobile card stack's sticky behavior into a no-op.
     The cloud-bleed overflow below is fixed at the source instead. */
  height: 300svh;
}
.stack-clouds { position: sticky; top: 0; height: 0; }
.stack-cloud {
  position: absolute;
  filter: blur(50px);
  pointer-events: none;
  border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%;
}
.stack-cloud--a {
  top: -14vh; left: -22%;
  width: 62%; height: 58vh;
  background: var(--gold-veil);
  opacity: 0.5;
}
.stack-cloud--b {
  top: 22vh; right: 4%;
  /* right was -26% in the original: that bleeds the box past the
     viewport's right edge with nothing to clip it, which is a genuine
     horizontal-scroll bug (LTR pages include rightward overflow in the
     scrollable area), not just a visual one — it's the likely cause of
     the sideways-shifted layout in your screenshots. Kept inset instead;
     the 50px blur already reads as an edge-less glow either way. */
  width: 54%; height: 50vh;
  background: var(--red-400);
  opacity: 0.08;
  border-radius: 52% 48% 55% 45% / 48% 55% 42% 58%;
}
.stack-cloud--c {
  top: 55vh; left: 6%;
  width: 40%; height: 42vh;
  background: var(--red-400);
  opacity: 0.1;
  border-radius: 44% 56% 50% 50% / 56% 44% 58% 42%;
}

.stack-card {
  height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  will-change: transform, opacity;
  border-top: 1px solid rgba(241,230,220,0.06);
}

/* ---- Mobile package stack: plain CSS position:sticky, no GSAP pin. ----
   Three siblings, each 100svh and sticky to top:0. Card 1 sticks for the
   scroll distance of its own box; the instant that distance is covered,
   card 2's box begins and starts sticking in the same spot, its later
   DOM order naturally painting over card 1 underneath. No JS pin math,
   no pinSpacing, nothing to recalculate on address-bar resize — the
   browser's native sticky implementation handles it. GSAP only animates
   opacity/scale (never position) on the card being covered, so there is
   exactly one positioning system (CSS sticky) per element. */
@media (max-width: 767px) {
  .stack-card { position: sticky; top: 0; }
}
.stack-card-media { position: absolute; inset: 0; }
.stack-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack-card-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 20% 100%, rgba(163,46,46,0.28), transparent 60%),
    linear-gradient(0deg, rgba(10,6,5,0.92) 0%, rgba(10,6,5,0.3) 48%, rgba(10,6,5,0.18) 100%);
}
.stack-card-content {
  position: relative;
  z-index: 2;
  padding: 34px var(--gutter) 64px;
  width: 100%;
  border-top: 3px solid var(--edge, var(--gold-500));
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(10,6,5,0.02), transparent 30%);
}
.stack-divider {
  width: 34px; height: 1px;
  background: linear-gradient(90deg, var(--edge, var(--gold-500)), transparent);
  margin: 0 0 16px;
  opacity: 0.8;
}
@media (min-width: 1100px) {
  /* desktop: 40% text panel (left, solid) / 60% image (right) instead of full-bleed overlay */
  .stack-card { align-items: stretch; border-top: none; }
  .stack-card-media { position: relative; inset: auto; width: 60%; margin-left: 40%; height: 100%; }
  .stack-card-scrim { background: linear-gradient(90deg, rgba(10,6,5,0.55) 0%, rgba(10,6,5,0.05) 30%); }
  .stack-card-content {
    position: absolute;
    inset: 0 60% 0 0;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 56px;
    background: var(--paper-050);
    border-top: none;
    border-radius: 0;
    border-right: 3px solid var(--edge, var(--gold-500));
    max-width: none;
  }
}
.stack-eyebrow {
  font-size: 12px; letter-spacing: 0.1em; color: var(--gold-500); margin-bottom: 10px;
}
.stack-name {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(30px, 6vw, 52px);
  color: var(--cream-100);
  margin-bottom: 14px;
}
/* mobile: card sits directly on the photo + dark scrim, so price/link stay light */
.stack-price {
  font-size: 15px; color: var(--cream-200); margin-bottom: 20px;
}
.stack-tiers { display: none; }
.stack-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13px; color: var(--cream-100);
  border-bottom: 1px solid var(--gold-500); padding-bottom: 5px;
  transition: gap 0.3s var(--ease-cinema);
}
.stack-link:hover { gap: 14px; color: var(--red-400); border-color: var(--red-400); }

@media (min-width: 1100px) {
  /* desktop: content panel is a solid light surface now, so flip to dark text
     and swap the single starting-price line for the three tiers */
  .stack-eyebrow { color: var(--red-500); }
  .stack-name { color: var(--text-dark); }
  .stack-price { display: none; }
  .stack-tiers {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 300px;
    margin-bottom: 24px;
  }
  .stack-tier {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .stack-tier:last-child { border-bottom: none; }
  .stack-tier-name {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .stack-tier-price {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--text-dark);
  }
  .stack-link { color: var(--text-dark); }
}

/* =========================================================
   TRUST — quote, stats, India coverage map
   ========================================================= */
.trust {
  position: relative;
  background: var(--paper-100);
  padding: var(--section-pad) 0;
  overflow: hidden;
}
.trust-texture {
  position: absolute; inset: 0;
  z-index: 0;
  opacity: 0.5;
  filter: url(#grainFilter);
  background:
    radial-gradient(55% 45% at 85% 8%, var(--gold-veil), transparent 60%),
    radial-gradient(50% 40% at 5% 95%, rgba(163,46,46,0.16), transparent 60%);
}
.trust > *:not(.trust-texture) { position: relative; z-index: 1; }

.trust-quote { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.trust-quote-text {
  font-family: var(--f-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 4vw, 32px);
  line-height: 1.4;
  color: var(--text-dark);
}
.trust-quote-accent {
  font-family: var(--f-script);
  font-style: normal;
  font-size: 1.7em;
  color: var(--red-500);
  padding: 0 0.06em;
}

.trust-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 780px;
  margin: 56px auto 0;
  padding: 0 var(--gutter);
}
.trust-stat {
  text-align: center;
  padding: 20px 8px;
  border-right: 1px solid var(--line-dark);
}
.trust-stat:last-child { border-right: none; }
.trust-stat-num {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(28px, 6vw, 46px);
  color: var(--red-500);
}
.trust-stat-plus {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(20px, 4vw, 30px);
  color: var(--gold-500);
}
.trust-stat-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
@media (min-width: 768px) { .trust-stat-label { font-size: 12.5px; } }

.trust-map-wrap { margin-top: 72px; text-align: center; }
.trust-map-label {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--red-500);
  margin-bottom: 22px;
}
.trust-map {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  filter: drop-shadow(0 20px 40px rgba(163,46,46,0.12));
}
.trust-map-svg { width: 100%; height: auto; overflow: visible; display: block; min-height: 260px; }
/* individual India state boundaries, drawn from real geographic data */
.trust-map-state {
  fill: rgba(163,46,46,0.09);
  stroke: rgba(163,46,46,0.38);
  stroke-width: 1px;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.25s var(--ease-cinema), stroke 0.25s var(--ease-cinema);
}
.trust-map-state:hover,
.trust-map-state:focus-visible {
  fill: rgba(184,134,62,0.22);
  stroke: var(--red-500);
  stroke-width: 1.5px;
}
.trust-map-glow { mix-blend-mode: multiply; }
.trust-map-tooltip {
  position: absolute;
  top: 0; left: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
  background: var(--paper-050);
  color: var(--text-dark);
  border: 1px solid var(--line-dark);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(43,27,18,0.18);
}
.trust-map-fallback {
  color: var(--text-muted);
  font-size: 13px;
  padding: 60px 0;
  text-align: center;
}
.trust-pin { transform-box: fill-box; transform-origin: center bottom; }
.trust-pin-dot {
  animation: pinPulse 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.trust-pin:nth-child(3n) .trust-pin-dot { animation-delay: 0.4s; }
.trust-pin:nth-child(3n+1) .trust-pin-dot { animation-delay: 0.8s; }
@keyframes pinPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0; transform: scale(2.6); }
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials { position: relative; background: var(--paper-100); padding: var(--section-pad) 0; overflow: hidden; }
.testimonials::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  opacity: 0.45;
  mix-blend-mode: overlay;
  filter: url(#grainFilter);
  pointer-events: none;
}
.testi-texture {
  position: absolute; inset: 0;
  z-index: 0;
  opacity: 0.5;
  filter: url(#grainFilter);
  background:
    radial-gradient(60% 50% at 15% 10%, var(--gold-veil), transparent 60%),
    radial-gradient(50% 40% at 90% 90%, rgba(163,46,46,0.18), transparent 60%);
}
.testimonials > *:not(.testi-texture) { position: relative; z-index: 1; }

/* Native scroll-snap carousel — smoother/lighter than a transform+clone-loop
   track, especially on touch: the browser owns the drag physics so there's
   no JS transitionend bookkeeping to feel laggy. */
.testi-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px var(--gutter) 28px;
  scroll-padding-left: var(--gutter);
}
.testi-carousel::-webkit-scrollbar { display: none; }
.testi-track { display: flex; gap: 18px; width: max-content; }
.testi-card {
  flex: 0 0 82vw;
  max-width: 420px;
  scroll-snap-align: start;
}
@media (min-width: 640px) { .testi-card { flex-basis: 62vw; } }
@media (min-width: 768px) { .testi-card { flex-basis: 46vw; } }
@media (min-width: 1100px) { .testi-card { flex-basis: 34vw; max-width: 400px; } }

.testi-card-inner {
  position: relative;
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 18px 38px rgba(43,27,18,0.12);
  border-radius: 28px;
  padding: 36px 30px 30px;
  height: 100%;
  transition: background 0.3s var(--ease-cinema), border-color 0.3s var(--ease-cinema), transform 0.3s var(--ease-cinema);
}
.testi-card-inner:hover { background: rgba(255,255,255,0.85); border-color: var(--gold-veil); transform: translateY(-3px); }
.testi-mark {
  font-family: var(--f-script);
  font-size: 46px;
  line-height: 1;
  color: var(--red-400);
  opacity: 0.7;
  display: block;
  margin-bottom: 4px;
}
.testi-photo {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; margin-bottom: 18px;
  border: 2px solid var(--paper-050);
  box-shadow: 0 0 0 1.5px var(--gold-veil);
}
.testi-quote {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 26px; line-height: 1.35; color: var(--text-dark);
  margin-bottom: 22px;
}
.testi-name { font-family: var(--f-body); font-weight: 700; font-size: 14px; color: var(--text-dark); }
.testi-event { font-family: var(--f-body); font-size: 12px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.04em; }

.testi-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.testi-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dark);
  transition: border-color 0.3s var(--ease-cinema), color 0.3s var(--ease-cinema), background 0.3s var(--ease-cinema), transform 0.2s var(--ease-cinema);
}
.testi-btn:hover { border-color: var(--red-500); color: var(--red-500); background: rgba(163,46,46,0.08); }
.testi-btn:active { transform: scale(0.92); }
.testi-dots { display: flex; align-items: center; gap: 7px; }
.testi-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-dark); transition: background 0.3s var(--ease-cinema), width 0.3s var(--ease-cinema); }
.testi-dot.is-active { background: var(--red-500); width: 20px; border-radius: 3px; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { background: var(--paper-050); padding: var(--section-pad) 0; }
.contact-grid {
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
}
.section-title--contact { max-width: 12ch; margin-bottom: 18px; }
.contact-invite { color: var(--text-muted); max-width: 42ch; margin-bottom: 32px; }
.contact-details { margin-bottom: 32px; }
.contact-details li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--line-dark);
  font-size: 14px;
}
.contact-details li:last-child { border-bottom: 1px solid var(--line-dark); }
.contact-details-label { color: var(--text-muted); font-size: 11px; letter-spacing: 0.08em; }
.contact-details a { color: var(--text-dark); transition: color 0.3s var(--ease-cinema); }
.contact-details a:hover { color: var(--red-500); }
.contact-map { aspect-ratio: 16/10; overflow: hidden; filter: grayscale(0.3) sepia(0.15) contrast(1.05); border: 1px solid var(--line-dark); }
.contact-map iframe { width: 100%; height: 100%; border: 0; }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Below ~380px (iPhone SE and similar) two inputs side by side leaves too
   little room for the date field and "City, venue" placeholder — stack
   them instead of squeezing both into ~130px each. */
@media (max-width: 380px) {
  .form-row--split { grid-template-columns: 1fr; gap: 18px; }
}
.form-row--split > div { display: flex; flex-direction: column; gap: 8px; }
.form-row label {
  font-size: 11px; letter-spacing: 0.08em; color: var(--text-muted);
}
.form-row input, .form-row select, .form-row textarea {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line-dark);
  padding: 13px 14px;
  color: var(--text-dark);
  border-radius: var(--radius-soft);
  transition: border-color 0.25s var(--ease-cinema), background 0.25s var(--ease-cinema), transform 0.25s var(--ease-cinema);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { transform: translateY(-1px); }
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(43,27,18,0.35); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-color: var(--red-500);
  background: rgba(255,255,255,0.9);
  outline: none;
}
.form-row select:disabled { opacity: 0.5; }
.form-row.has-error input, .form-row.has-error select, .form-row.has-error textarea {
  border-color: var(--red-400);
  animation: fieldShake 0.4s var(--ease-cinema);
}
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.form-error { font-size: 11px; color: var(--red-400); min-height: 14px; }

/* ---- validation toast, sized/positioned like the WhatsApp fab notice ---- */
.form-toast {
  position: fixed;
  left: 16px; right: 16px; bottom: 20px;
  z-index: 900;
  display: flex; align-items: center; gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  background: var(--red-900);
  border: 1px solid rgba(241,230,220,0.14);
  color: var(--cream-100);
  border-radius: 14px;
  padding: 14px 14px 14px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  overflow: hidden;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.4s var(--ease-cinema), opacity 0.4s var(--ease-cinema);
}
.form-toast[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.form-toast.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
@media (min-width: 768px) { .form-toast { left: auto; right: 28px; bottom: 28px; margin: 0; } }
.form-toast-icon { flex-shrink: 0; color: var(--red-400); display: flex; }
.form-toast-text { font-size: 13px; line-height: 1.4; flex: 1; }
.form-toast-close {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--taupe-400); background: rgba(241,230,220,0.08);
  transition: color 0.2s var(--ease-cinema), background 0.2s var(--ease-cinema);
}
.form-toast-close:hover { color: var(--cream-100); background: rgba(241,230,220,0.16); }
.form-toast-bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--red-400);
  width: 100%;
  transform-origin: left;
}
.form-toast-bar.is-counting { animation: toastCountdown 5s linear forwards; }
@keyframes toastCountdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.form-submit {
  position: relative;
  margin-top: 8px;
  background: var(--red-600);
  color: var(--paper-050);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 16px 20px;
  border-radius: var(--radius-soft);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease-cinema), opacity 0.3s var(--ease-cinema), transform 0.15s var(--ease-cinema);
}
.form-submit:hover { background: #B7261A; transform: translateY(-1px); }
.form-submit:active { transform: translateY(0) scale(0.98); }
.form-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.form-submit-spinner {
  display: none;
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--paper-050);
  border-radius: 50%;
  margin-left: 10px;
  animation: spin 0.7s linear infinite;
}
.form-submit.is-loading .form-submit-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-status { font-size: 13px; min-height: 18px; }
.form-status.is-success { color: #7fae7a; }
.form-status.is-error { color: var(--red-400); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  position: relative;
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(184,134,62,0.35), transparent 60%),
    radial-gradient(60% 55% at 100% 100%, rgba(10,6,5,0.4), transparent 60%),
    linear-gradient(180deg, var(--red-600), var(--red-900) 140%);
  padding-top: 90px;
  overflow: hidden;
}
.footer-texture {
  position: absolute; inset: 0;
  z-index: 1;
  opacity: 0.55;
  mix-blend-mode: overlay;
  filter: url(#grainFilter);
  pointer-events: none;
}
.footer-texture::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(241,230,220,0.14) 1px, transparent 1.6px);
  background-size: 22px 22px;
  mix-blend-mode: overlay;
}
.footer-inner {
  position: relative;
  z-index: 2;
  padding: 40px var(--gutter) 48px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.footer-headline {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(30px, 6vw, 50px);
  color: var(--cream-100);
  line-height: 1.12;
  margin-bottom: 20px;
}
.footer-invite { color: rgba(245,237,230,0.78); max-width: 46ch; margin: 0 auto 32px; }
.footer-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 13px; letter-spacing: 0.03em;
  color: var(--red-900); background: var(--cream-100);
  padding: 15px 26px; border-radius: 999px;
  transition: gap 0.3s var(--ease-cinema), background 0.3s var(--ease-cinema);
}
.footer-cta:hover { gap: 16px; background: var(--gold-500); }

.footer-social {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin: 56px 0 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(245,237,230,0.22);
}
.footer-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.32);
  color: var(--paper-050);
  transition: background 0.25s var(--ease-cinema), transform 0.2s var(--ease-cinema), border-color 0.25s var(--ease-cinema);
}
.footer-icon:hover { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.55); transform: translateY(-2px); }
.footer-icon svg { width: 18px; height: 18px; display: block; }

.footer-bottom {
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
  font-size: 12px; color: rgba(245,237,230,0.6);
  padding-bottom: 28px;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.footer-bottom nav a { color: rgba(245,237,230,0.6); transition: color 0.25s var(--ease-cinema); }
.footer-bottom nav a:hover { color: var(--cream-100); }
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* =========================================================
   WHATSAPP FAB
   ========================================================= */
.whatsapp-fab {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 450;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--red-500), var(--red-600));
  border: 1px solid rgba(241,230,220,0.22);
  color: var(--cream-100);
  border-radius: 999px;
  padding: 13px;
  overflow: hidden;
  max-width: 50px;
  box-shadow: 0 10px 26px rgba(163,46,46,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
  animation: fabGlow 2.6s ease-in-out infinite;
  transition: max-width 0.5s var(--ease-cinema), padding 0.5s var(--ease-cinema), box-shadow 0.4s var(--ease-cinema), opacity 0.3s var(--ease-cinema), transform 0.3s var(--ease-cinema);
}
@media (min-width: 768px) { .whatsapp-fab { right: 28px; bottom: 28px; } }
@keyframes fabGlow {
  0%, 100% { box-shadow: 0 10px 26px rgba(163,46,46,0.4), inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 0 rgba(184,134,62,0.35); }
  50% { box-shadow: 0 10px 26px rgba(163,46,46,0.4), inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 8px rgba(184,134,62,0); }
}
.whatsapp-fab-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream-100);
}
.whatsapp-fab-label {
  white-space: nowrap;
  font-family: var(--f-body);
  font-size: 13px; font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s var(--ease-cinema) 0.15s;
}
.whatsapp-fab.is-expanded {
  max-width: 320px;
  padding: 14px 22px 14px 14px;
  box-shadow: 0 14px 32px rgba(163,46,46,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.whatsapp-fab.is-expanded .whatsapp-fab-label { opacity: 1; }
.whatsapp-fab.is-nudged { animation: fabNudge 0.6s var(--ease-cinema); }
.whatsapp-fab.is-hidden {
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  pointer-events: none;
}
@keyframes fabNudge {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-6px) scale(1.06); }
  55% { transform: translateY(0) scale(0.98); }
}

/* =========================================================
   UTILITY
   ========================================================= */
.js-fade-up { opacity: 0; transform: translateY(28px); }
.js-fade { opacity: 0; }

/* =========================================================
   MOBILE POLISH
   Heavy backdrop-filter blur is one of the more common sources of
   scroll jank on phones, so it's dialed back below 768px while still
   keeping the glass look; a few spacing/overflow nits are tightened
   up too.
   ========================================================= */
@media (max-width: 767px) {
  /* The nav pill (logo + 5 icon links + WhatsApp button) is wider than it
     looks once real font metrics are counted — on phones under ~420px the
     link row was overflowing its allotted flex space and silently
     scrolling, with no visual hint that it scrolls, and no code to bring
     the active page's icon back into view once it scrolled off. That's
     what read as nav items being "cut off". Tighten the surrounding
     spacing to reduce how much needs to scroll, then treat the rest as an
     intentionally swipeable strip (edge fade below) instead of fighting
     to force an exact fit that can't be verified across every phone/font. */
  .site-nav { padding: 0 10px; }
  .nav-pill { padding: 10px 10px 10px 18px; gap: 8px; }
  .nav-link { padding: 12px 11px; }
  .nav-link-icon { width: 18px; height: 18px; }
  .nav-links-wrap {
    -webkit-mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
  }

  .nav-pill { backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); }
  .testi-card-inner { backdrop-filter: blur(6px) saturate(130%); -webkit-backdrop-filter: blur(6px) saturate(130%); padding: 30px 24px 26px; }
  .testi-quote { font-size: 22px; }
  .hero-headline { font-size: clamp(40px, 15vw, 64px); }
  .trust-stats { gap: 8px; }
  .trust-stat { padding: 14px 4px; }
  .section-title { max-width: 100%; }
  .whatsapp-fab-label { font-size: 12.5px; }

  /* These are the primary tap targets on mobile (hero CTA, each package
     card's link) but were sized for a mouse pointer — text height plus a
     few px of underline padding, well under the ~44px touch target
     guideline. Pad the hit area on touch without changing the desktop
     hover styling above. */
  .hero-cta, .stack-link { padding-top: 10px; padding-bottom: 10px; margin: -10px 0; }

  /* CONTACT — on phones the section previously ran noticeably taller than
     its neighbours and the outer edges could get visually clipped. The
     clipping came from the label + value pairs in .contact-details: an
     unbreakable string (the email address especially) has no spaces to
     wrap on, so as a flex child it refused to shrink below its own
     content width and pushed past the section's side padding, right up
     against — and past — the edge of the screen. Wrapping each row and
     letting the value break/shrink fixes the overflow; trimming the
     surrounding spacing brings the section's height back in line with
     the rest of the page. */
  .contact { padding: 64px 0; }
  .contact-grid { padding: 0 24px; gap: 40px; }
  .contact-invite { margin-bottom: 24px; }
  .contact-details { margin-bottom: 24px; }
  .contact-details li {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .contact-details li > * { min-width: 0; }
  .contact-details-value {
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: right;
    max-width: 100%;
  }
  .contact-map { aspect-ratio: 4 / 3; }
  .contact-form { gap: 14px; }
}

/* prevent the fixed WhatsApp fab and nav from ever colliding with iOS
   safe-area insets on notched devices */
@supports (bottom: env(safe-area-inset-bottom)) {
  .whatsapp-fab { bottom: max(20px, env(safe-area-inset-bottom)); }
  .form-toast { bottom: max(20px, env(safe-area-inset-bottom)); }
  /* these two also pin content near the bottom edge, so the same notched-
     device home-indicator overlap applies to them */
  .hero-foot { bottom: max(24px, env(safe-area-inset-bottom)); }
  .stack-card-content { padding-bottom: max(64px, calc(24px + env(safe-area-inset-bottom))); }
}