/* The Wedding Marketers — brand stylesheet (v2 brand kit) */

:root {
  /* Core */
  --navy: #111833;
  --navy-soft: #232a52;
  --white: #ffffff;
  --paper: #ffffff;
  --off-white: #fbfaff;
  --cloud: #f4f6ff;

  /* Brand palette — exact values from kit */
  --pink: #f0b3ff;
  --pink-deep: #c977e6;
  --periwinkle: #a5b2f0;
  --periwinkle-deep: #6f80d8;
  --green: #d5f5c1;
  --green-deep: #88c869;
  --aqua: #a8e4e5;
  --aqua-deep: #5db4b5;

  /* Soft tinted backgrounds (washes of the brand colours) */
  --pink-bg: #fcecff;
  --peri-bg: #f1f4ff;
  --green-bg: #f3fceb;
  --aqua-bg: #ecf9f9;

  /* Legacy alias kept for backwards compat — sky was the old aqua */
  --sky: var(--aqua);
  --sky-deep: var(--aqua-deep);
  --sky-bg: var(--aqua-bg);

  --ink: #1c2238;
  --muted: #6b7280;
  --line: #ece9f5;
  --shadow: 0 12px 40px rgba(17, 24, 51, 0.07);
  --shadow-strong: 0 24px 60px rgba(111, 128, 216, 0.18);

  /* Typography — two-font system.
     Poppins for headings & UI labels, Raleway for body copy. */
  --sans:    'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;  /* headings, big numbers, UI */
  --body:    'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;  /* body copy */
  --serif:   var(--sans);   /* legacy alias resolves to Poppins */
  --display: var(--sans);   /* legacy alias — resolves to Poppins */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--navy); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--periwinkle-deep); }

h1, h2, h3, h4 {
  font-family: var(--sans);   /* Raleway — bold sans for headlines */
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); font-weight: 800; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.9rem); text-wrap: balance; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); text-wrap: balance; }
h4 { font-size: 1.15rem; }

/* === Emphasis pill ===
   <em> inside headlines and any .display element gets a coloured pastel pill
   background with italic emphasis — Poppins italic at heavier weight. */
h1 em, h2 em, h3 em, .display {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 700;
  color: var(--navy);
  background: var(--pink);
  padding: 0.04em 0.36em 0.1em;
  border-radius: 0.5em;
  display: inline-block;
  line-height: 1.1;
  letter-spacing: -0.01em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 6px 18px rgba(208, 147, 232, 0.35);
  transform: rotate(-1.5deg);
  margin: 0 0.06em;
}
/* Accent colour variants — swap the pill background via class */
.display.is-peri,  h1 em.is-peri,  h2 em.is-peri,  h3 em.is-peri  {
  background: var(--periwinkle);
  box-shadow: 0 6px 18px rgba(111, 128, 216, 0.4);
}
.display.is-green, h1 em.is-green, h2 em.is-green, h3 em.is-green {
  background: var(--green);
  box-shadow: 0 6px 18px rgba(149, 205, 118, 0.4);
}
.display.is-aqua,  h1 em.is-aqua,  h2 em.is-aqua,  h3 em.is-aqua  {
  background: var(--aqua);
  box-shadow: 0 6px 18px rgba(95, 181, 181, 0.4);
}
.display.is-navy,  h1 em.is-navy,  h2 em.is-navy,  h3 em.is-navy  {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(17, 24, 51, 0.3);
}

p { margin-bottom: 1rem; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============== HEADER / NAV — sliding pill indicator ============== */
.site-header {
  position: sticky;
  top: 0;
  overflow-x: clip;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}
.site-header.scrolled {
  box-shadow: 0 10px 30px rgba(20, 33, 61, 0.06);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1280px;
  margin: 0 auto;
  gap: 24px;
}
.nav-logo {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.nav-logo img {
  height: 38px;
  width: auto;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-logo:hover img { transform: rotate(-3deg) scale(1.04); }

/* Sliding pill that sits behind nav links and follows hover */
.nav-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 4px;
  border-radius: 100px;
  background: rgba(244, 246, 255, 0.65);
  border: 1px solid rgba(165, 178, 240, 0.18);
}
/* Pill-host LI takes no flex space — the pill is positioned absolutely */
.nav-pill-host {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 0;
  pointer-events: none;
}
.nav-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: var(--pill-x, 0);
  width: var(--pill-w, 0);
  background: linear-gradient(135deg, var(--pink), var(--periwinkle));
  border-radius: 100px;
  opacity: var(--pill-opacity, 0);
  transition: left 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 8px 24px rgba(165, 178, 240, 0.4);
}
.nav-menu li {
  position: relative;
  z-index: 1;
}
.nav-menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  position: relative;
  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}
/* Animated SVG icon prefix — hidden until hover. Inline SVG via CSS mask
   so the icon inherits the link's current text colour. */
.nav-menu a[data-icon]::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 16px;
  background: currentColor;
  -webkit-mask-image: var(--nav-icon, none);
  mask-image: var(--nav-icon, none);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0;
  transform: scale(0.5) rotate(-25deg);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease,
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-menu a:hover[data-icon]::before,
.nav-menu li.active a[data-icon]::before {
  width: 16px;
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* Per-icon mask URLs — minimal stroke-style SVGs inlined as data URIs */
.nav-menu a[data-icon="home"]   { --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>"); }
.nav-menu a[data-icon="book"]   { --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5V4a1 1 0 011-1h14a1 1 0 011 1v16a1 1 0 01-1 1H6.5A2.5 2.5 0 014 18.5z'/><line x1='8' y1='8' x2='16' y2='8'/><line x1='8' y1='12' x2='14' y2='12'/></svg>"); }
.nav-menu a[data-icon="people"] { --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3'/><circle cx='17' cy='9' r='2.5'/><path d='M3 21v-1a5 5 0 015-5h2a5 5 0 015 5v1'/><path d='M15 21v-1a4 4 0 014-4'/></svg>"); }
.nav-menu a[data-icon="check"]  { --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9 12l2 2 5-5'/><path d='M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11'/></svg>"); }
.nav-menu a[data-icon="help"]   { --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>"); }

/* Mobile fullscreen nav — bump icon size since the text is bigger */
@media (max-width: 900px) {
  .nav-menu a[data-icon]::before {
    height: 22px;
    margin-right: 0;
  }
  .nav-menu a:hover[data-icon]::before,
  .nav-menu a:focus[data-icon]::before,
  .nav-menu.open a[data-icon]::before {
    width: 22px;
    margin-right: 10px;
  }
}
.nav-menu a:hover {
  color: var(--navy);
  transform: translateY(-1px);
}
.nav-menu li.active a { color: var(--navy); font-weight: 600; }

/* Qualify CTA — separate from the pill nav */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--navy);
  color: var(--white) !important;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  overflow: hidden;
}
.nav-cta::before {
  content: '✦';
  font-size: 11px;
  color: var(--pink);
  animation: ctaSparkle 2.2s ease-in-out infinite;
}
@keyframes ctaSparkle {
  0%, 100% { transform: scale(0.7) rotate(0); opacity: 0.6; }
  50%      { transform: scale(1.2) rotate(180deg); opacity: 1; }
}
.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--periwinkle-deep), var(--pink-deep));
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
  border-radius: inherit;
}
.nav-cta:hover {
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(217, 156, 238, 0.5);
}
.nav-cta:hover::after { opacity: 1; }

/* The nav-cta sits inside .nav-menu in the existing HTML — pull it out visually */
.nav-menu li:has(> .nav-cta) {
  margin-left: 8px;
}
.nav-menu li:has(> .nav-cta) .nav-cta {
  /* no pill highlight for the CTA */
}

/* Mobile hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
              opacity 0.3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Fullscreen mobile overlay */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: fixed;
    inset: 0;
    /* .site-header has backdrop-filter, which makes it the containing block for
       this fixed menu — so inset:0 only fills the header. Viewport units fix it. */
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, var(--white) 0%, var(--peri-bg) 100%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 80px 24px 40px;
    border-radius: 0;
    border: 0;
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
    z-index: 1000;
    overflow-y: auto;
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu::before {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    background: var(--pink);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    top: -100px; left: -80px;
    pointer-events: none;
  }
  .nav-menu::after {
    content: '';
    position: absolute;
    width: 280px; height: 280px;
    background: var(--green);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    bottom: -100px; right: -80px;
    pointer-events: none;
  }
  .nav-pill { display: none; }
  .nav-menu li {
    width: 100%;
    max-width: 360px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-menu.open li {
    opacity: 1;
    transform: translateY(0);
  }
  .nav-menu.open li:nth-child(1) { transition-delay: 0.15s; }
  .nav-menu.open li:nth-child(2) { transition-delay: 0.22s; }
  .nav-menu.open li:nth-child(3) { transition-delay: 0.29s; }
  .nav-menu.open li:nth-child(4) { transition-delay: 0.36s; }
  .nav-menu.open li:nth-child(5) { transition-delay: 0.43s; }
  .nav-menu.open li:nth-child(6) { transition-delay: 0.55s; }
  .nav-menu a {
    font-family: var(--serif);
    font-size: 1.9rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -0.01em;
    padding: 12px 24px;
    color: var(--navy);
    border-radius: 18px;
    display: block;
    width: 100%;
    transition: background 0.25s ease, transform 0.3s ease;
  }
  .nav-menu a[data-emoji]::before {
    font-size: 1.6rem;
    width: 0;
    margin-right: 0;
    transform: scale(0) rotate(0);
  }
  .nav-menu a:hover[data-emoji]::before,
  .nav-menu a:focus[data-emoji]::before {
    width: 40px;
    margin-right: 8px;
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  .nav-menu a:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.02);
  }
  .nav-cta {
    background: linear-gradient(135deg, var(--periwinkle-deep), var(--pink-deep));
    padding: 16px 32px !important;
    font-size: 14px !important;
    margin-top: 12px;
    box-shadow: 0 16px 40px rgba(165, 178, 240, 0.4);
  }
}

/* ============== BUTTONS ============== */
.btn {
  display: inline-block;
  padding: 16px 36px;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  transition: all 0.25s ease;
  text-align: center;
}
.btn-primary {
  background: var(--navy);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--periwinkle-deep);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(165, 178, 240, 0.45);
}
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-ghost:hover {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 10px 25px rgba(20, 33, 61, 0.18);
}
.btn-accent {
  background: var(--periwinkle);
  color: var(--navy);
}
.btn-accent:hover {
  background: var(--periwinkle-deep);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(111, 128, 216, 0.35);
}

/* ============== SECTIONS ============== */
section { padding: 100px 0; }
.section-tight { padding: 60px 0; }

.section-pink { background: var(--pink-bg); }
.section-peri { background: var(--peri-bg); }
.section-green { background: var(--green-bg); }
.section-cloud { background: var(--cloud); }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--periwinkle-deep);
  margin-bottom: 18px;
}
.eyebrow-pink { color: var(--pink-deep); }
.eyebrow-green { color: var(--green-deep); }

.section-title {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
}
.section-title p {
  font-size: 1.1rem;
  color: var(--muted);
  margin-top: 16px;
}

/* ============== HERO ============== */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background: var(--white);
  overflow: hidden;
  padding: 80px 0;
}
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  z-index: 0;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  animation: blobDrift 14s ease-in-out infinite;
}
.hero::before {
  width: 480px; height: 480px;
  background: var(--pink);
  top: -140px; right: -120px;
  opacity: 0.78;
  transform: translate(var(--blob-x, 0), var(--blob-y, 0));
}
.hero::after {
  width: 440px; height: 440px;
  background: var(--periwinkle);
  bottom: -160px; left: -140px;
  opacity: 0.62;
  animation-delay: -7s;
  transform: translate(var(--blob-x-neg, 0), var(--blob-y-neg, 0));
}
@keyframes blobDrift {
  0%, 100% { filter: blur(60px); }
  50% { filter: blur(75px); }
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-text .eyebrow { color: var(--periwinkle-deep); }
.hero-text h1 {
  margin-bottom: 24px;
}
/* hero h1 em styling now handled by the global h1/h2/h3 em pill rule */
.hero-text p.lead {
  font-size: 1.2rem;
  color: var(--muted);
  margin-bottom: 32px;
  max-width: 540px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-rating {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--muted);
  flex-wrap: wrap;
  line-height: 1.45;
}
.hero-rating .stars { font-size: 17px; }
/* Star rating — renders as 5 inline SVG star elements (injected by main.js).
   Each star has a fixed pixel size so it can't be stretched by its container. */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--periwinkle-deep);
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
  font-size: 0;       /* hide the original ★ text content if not yet replaced */
}
.stars svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: currentColor;
  flex-shrink: 0;
}
.hero-rating .stars svg     { width: 16px; height: 16px; }
.journey-rating .stars svg  { width: 14px; height: 14px; }

.hero-image {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 18px;
  background: var(--white);
  padding: 4px;          /* subtle edge, not a polaroid frame */
  box-shadow:
    0 30px 60px rgba(17, 24, 51, 0.14),
    0 6px 14px rgba(17, 24, 51, 0.06);
  overflow: hidden;       /* image stays clipped within rounded corners */
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
/* Soft darkening over the lower portion of the photo for legibility behind the badge */
.hero-image::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, transparent 65%, rgba(17, 24, 51, 0.22) 100%);
  pointer-events: none;
}

.hero-badge {
  position: absolute;
  bottom: -22px;
  left: -18px;
  background: var(--white);
  padding: 20px 26px;
  border-radius: 14px;
  box-shadow:
    0 16px 36px rgba(17, 24, 51, 0.16),
    0 4px 10px rgba(17, 24, 51, 0.06);
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  z-index: 3;
}
.hero-badge::before {
  content: '';
  width: 10px; height: 40px;
  background: var(--green);
  border-radius: 6px;
}
.hero-badge strong {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--navy);
  display: block;
  line-height: 1;
}
.hero-badge span { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 900px) {
  .hero { min-height: auto; padding: 60px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-image { aspect-ratio: 4/3; }
}

/* ============== BENTO STATS — 2x2 pastel cards with visualizations ============== */
.bento {
  background: var(--white);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  --sky: #c7e8e2;
  --sky-deep: #5fb5a8;
  --sky-bg: #effaf7;
}
.bento::before {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  background: var(--periwinkle);
  opacity: 0.18;
  filter: blur(90px);
  border-radius: 50%;
  top: -150px; right: -100px;
  pointer-events: none;
}
.bento .container { position: relative; }
.bento-intro {
  text-align: center;
  margin-bottom: 56px;
}
.bento-intro h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  margin-top: 12px;
}
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  perspective: 1400px;
}
.bento-card {
  position: relative;
  padding: 38px 36px 32px;
  border-radius: 26px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  --bento-tilt: 0deg;
  transform: rotate(var(--bento-tilt));
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease;
  box-shadow: 0 18px 40px rgba(20, 33, 61, 0.06);
}
.bento-card:nth-child(1) { --bento-tilt: -1deg; }
.bento-card:nth-child(2) { --bento-tilt:  1deg; }
.bento-card:nth-child(3) { --bento-tilt:  1deg; }
.bento-card:nth-child(4) { --bento-tilt: -1deg; }
.bento-card:hover {
  transform: rotate(0) translateY(-6px) scale(1.01);
  box-shadow: 0 32px 70px rgba(20, 33, 61, 0.14);
}
.bento-pink  { background: var(--pink-bg); }
.bento-green { background: var(--green-bg); }
.bento-peri  { background: var(--peri-bg); }
.bento-sky   { background: var(--sky-bg); }
.bento-pink  .bento-num,
.bento-green .bento-num,
.bento-peri  .bento-num,
.bento-sky   .bento-num { color: var(--navy); }

.bento-corner {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  font-size: 18px;
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.08);
  z-index: 2;
}

.bento-num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.8vw, 3.8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--navy);
}
.bento-label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--navy);
  margin: 0 0 26px;
  max-width: 60%;
}

.bento-viz {
  margin-top: auto;
  position: relative;
  pointer-events: none;
}

/* === Card 1: Week calendar visualization === */
.viz-week {
  background: var(--white);
  border-radius: 14px;
  padding: 14px 12px;
  box-shadow: 0 10px 24px rgba(217, 156, 238, 0.18);
}
.viz-week-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}
.viz-week-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.viz-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  background: #faf6fc;
  position: relative;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  padding: 5px 6px;
}
.viz-cell .viz-date {
  display: block;
  line-height: 1;
}
.viz-cell.booked { background: var(--pink); }
.viz-cell.highlight { background: var(--pink-deep); color: var(--white); }
.viz-cell .viz-pill {
  position: absolute;
  left: 4px; right: 4px; bottom: 5px;
  background: var(--white);
  border-radius: 100px;
  font-size: 8px;
  text-align: center;
  padding: 2px 0;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--pink-deep);
}
.viz-cell .viz-avatars {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.viz-cell .viz-avatars i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--pink-deep);
  display: block;
}
.viz-cell .viz-avatars i + i { margin-left: -5px; background: var(--pink); }

/* === Card 2: Booking tags visualization === */
.viz-tags {
  display: grid;
  gap: 10px;
}
.viz-tag {
  background: var(--white);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 20px rgba(149, 205, 118, 0.18);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.viz-tag-1 { transform: translateX(-4px) rotate(-1.2deg); }
.viz-tag-2 { transform: rotate(0.8deg); }
.viz-tag-3 { transform: translateX(6px) rotate(-0.4deg); }
.bento-card:hover .viz-tag { transform: rotate(0) translateX(0); }
.viz-tag-couple { display: flex; flex-shrink: 0; }
.viz-tag-couple i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--white);
  display: block;
}
.viz-tag-couple i + i { margin-left: -10px; background: var(--green-deep); }
.viz-tag-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.viz-tag-text strong {
  font-size: 13px;
  color: var(--navy);
  font-weight: 600;
}
.viz-tag-text em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.viz-tag-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: var(--green-bg);
  padding: 4px 9px;
  border-radius: 100px;
}

/* === Card 3: Revenue growth chart === */
.viz-growth {
  background: var(--periwinkle-deep);
  border-radius: 14px;
  padding: 16px 18px;
  height: 110px;
  position: relative;
  overflow: hidden;
}
.viz-growth svg { width: 100%; height: 100%; display: block; }
.viz-sparkle {
  position: absolute;
  color: var(--white);
  font-size: 14px;
  pointer-events: none;
  animation: sparklePulse 2.4s ease-in-out infinite;
}
.viz-sparkle-1 { top: 22%; left: 30%; animation-delay: 0s; }
.viz-sparkle-2 { top: 12%; left: 60%; animation-delay: 0.6s; font-size: 10px; }
.viz-sparkle-3 { top: 50%; left: 75%; animation-delay: 1.2s; font-size: 12px; }
@keyframes sparklePulse {
  0%, 100% { opacity: 0.3; transform: scale(0.7) rotate(0); }
  50%      { opacity: 1;   transform: scale(1.2) rotate(120deg); }
}

/* === Card 4: Before/After bars === */
.viz-bars {
  background: var(--white);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 10px 24px rgba(95, 181, 168, 0.18);
}
.viz-legend {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}
.viz-legend .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.viz-legend .dot-before { background: var(--sky); }
.viz-legend .dot-after  { background: var(--sky-deep); }
.viz-bar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: end;
  height: 70px;
}
.viz-bar-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  align-items: end;
  height: 100%;
  position: relative;
}
.viz-bar-pair .bar {
  height: var(--h, 50%);
  border-radius: 4px 4px 0 0;
  transform-origin: bottom center;
  animation: barRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
.viz-bar-pair .bar.before { background: var(--sky); }
.viz-bar-pair .bar.after  { background: var(--sky-deep); }
.viz-bar-pair em {
  position: absolute;
  left: 0; right: 0;
  bottom: -16px;
  text-align: center;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
@keyframes barRise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ===== Card 1 (calendar) — STORY: empty week, bookings arrive one by one =====
   Cycle is 8s total. All four "booked" moments fire in sequence (1s apart),
   then everything holds until 85%, then resets cleanly before the next loop. */
.viz-cell.booked,
.viz-cell.highlight {
  /* default UNBOOKED state — the keyframes animate to "booked" then back */
  background: #faf6fc !important;
  color: var(--navy) !important;
  box-shadow: none;
}
.viz-cell .viz-pill,
.viz-cell .viz-avatars i {
  opacity: 0;
  transform: scale(0.4);
}
/* Each "booked" cell gets its own keyframe with its own arrival moment */
.viz-week-row .viz-cell:nth-child(2).booked { animation: cellBook1 8s ease-in-out infinite; }
.viz-week-row .viz-cell:nth-child(4).booked { animation: cellBook2 8s ease-in-out infinite; }
.viz-week-row .viz-cell:nth-child(6).booked { animation: cellBook3 8s ease-in-out infinite; }
.viz-cell.highlight                         { animation: cellHighlight 8s ease-in-out infinite; }

.viz-week-row .viz-cell:nth-child(2).booked .viz-pill { animation: pillBook1 8s ease-in-out infinite; }
.viz-week-row .viz-cell:nth-child(4).booked .viz-pill { animation: pillBook2 8s ease-in-out infinite; }
.viz-week-row .viz-cell:nth-child(6).booked .viz-pill { animation: pillBook3 8s ease-in-out infinite; }

.viz-cell.highlight .viz-avatars i                   { animation: avatarBook 8s ease-in-out infinite; }
.viz-cell.highlight .viz-avatars i:nth-child(2)      { animation: avatarBook 8s 0.12s ease-in-out infinite; }

/* Cell #1 books at ~10% (0.8s into cycle) */
@keyframes cellBook1 {
  0%, 7%, 88%, 100% { background: #faf6fc !important; }
  12%, 85%          { background: var(--pink) !important; }
}
@keyframes pillBook1 {
  0%, 8%, 88%, 100% { opacity: 0; transform: scale(0.3) translateY(6px); }
  12%               { opacity: 1; transform: scale(1.2) translateY(0); }
  16%, 85%          { opacity: 1; transform: scale(1) translateY(0); }
}

/* Cell #2 books at ~22% (1.8s in) */
@keyframes cellBook2 {
  0%, 19%, 88%, 100% { background: #faf6fc !important; }
  24%, 85%           { background: var(--pink) !important; }
}
@keyframes pillBook2 {
  0%, 20%, 88%, 100% { opacity: 0; transform: scale(0.3) translateY(6px); }
  24%                { opacity: 1; transform: scale(1.2) translateY(0); }
  28%, 85%           { opacity: 1; transform: scale(1) translateY(0); }
}

/* Cell #3 books at ~34% (2.8s in) */
@keyframes cellBook3 {
  0%, 31%, 88%, 100% { background: #faf6fc !important; }
  36%, 85%           { background: var(--pink) !important; }
}
@keyframes pillBook3 {
  0%, 32%, 88%, 100% { opacity: 0; transform: scale(0.3) translateY(6px); }
  36%                { opacity: 1; transform: scale(1.2) translateY(0); }
  40%, 85%           { opacity: 1; transform: scale(1) translateY(0); }
}

/* Highlight (the couple's wedding day) lands at ~46% (3.8s in) — the big one */
@keyframes cellHighlight {
  0%, 43%, 88%, 100% {
    background: #faf6fc !important;
    color: var(--navy) !important;
    box-shadow: none;
  }
  48%, 85% {
    background: var(--pink-deep) !important;
    color: var(--white) !important;
    box-shadow: 0 0 22px rgba(217, 156, 238, 0.55),
                inset 0 0 14px rgba(255, 255, 255, 0.18);
  }
}
@keyframes avatarBook {
  0%, 44%, 88%, 100% { opacity: 0; transform: scale(0); }
  48%                { opacity: 1; transform: scale(1.3); }
  52%, 85%           { opacity: 1; transform: scale(1); }
}

/* "NEW" badge floats above the highlight cell when it activates */
.viz-cell.highlight::after {
  content: 'JUST BOOKED';
  position: absolute;
  top: -16px;
  right: -8px;
  background: var(--white);
  color: var(--pink-deep);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 100px;
  box-shadow: 0 6px 16px rgba(217, 156, 238, 0.45);
  opacity: 0;
  transform: scale(0) translateY(8px);
  animation: justBookedPing 8s ease-in-out infinite;
  white-space: nowrap;
  z-index: 4;
}
@keyframes justBookedPing {
  0%, 45%, 80%, 100% { opacity: 0; transform: scale(0) translateY(8px); }
  50%                { opacity: 1; transform: scale(1) translateY(0); }
  55%, 72%           { opacity: 1; transform: scale(1) translateY(0); }
  78%                { opacity: 0; transform: scale(0.8) translateY(-4px); }
}

/* ===== Card 2 (booking tags) — STORY: pending → booked, toggling on in sequence =====
   Same 8s cycle. Each tag starts dim/grey ("pending"), then flips ON
   (saturates, scales, badge turns green) at its assigned moment. */
.viz-tag {
  opacity: 0.4;
  filter: saturate(0.15);
  scale: 0.97;
  will-change: opacity, scale, filter;
}
.viz-tag-1 { transform: translateX(-4px) rotate(-1.2deg); animation: tagToggle1 8s ease-in-out infinite; }
.viz-tag-2 { transform: rotate(0.8deg);                   animation: tagToggle2 8s ease-in-out infinite; }
.viz-tag-3 { transform: translateX(6px) rotate(-0.4deg);  animation: tagToggle3 8s ease-in-out infinite; }

/* Tag 1 toggles on at ~10% (0.8s) */
@keyframes tagToggle1 {
  0%, 7%, 88%, 100% { opacity: 0.4; scale: 0.97; filter: saturate(0.15); }
  11%               { opacity: 1; scale: 1.05; filter: saturate(1.1); }
  16%, 85%          { opacity: 1; scale: 1;    filter: saturate(1); }
}
/* Tag 2 toggles on at ~26% (2.1s) */
@keyframes tagToggle2 {
  0%, 23%, 88%, 100% { opacity: 0.4; scale: 0.97; filter: saturate(0.15); }
  27%                { opacity: 1; scale: 1.05; filter: saturate(1.1); }
  32%, 85%           { opacity: 1; scale: 1;    filter: saturate(1); }
}
/* Tag 3 toggles on at ~42% (3.4s) */
@keyframes tagToggle3 {
  0%, 39%, 88%, 100% { opacity: 0.4; scale: 0.97; filter: saturate(0.15); }
  43%                { opacity: 1; scale: 1.05; filter: saturate(1.1); }
  48%, 85%           { opacity: 1; scale: 1;    filter: saturate(1); }
}

/* The "Booked" badge starts as a grey "Pending"-looking pill, then flips green */
.viz-tag-badge {
  background: #ebeef0;
  color: #95a0aa;
  position: relative;
  overflow: hidden;
}
.viz-tag-badge::before {
  /* A tiny status dot inside the badge — left when off, right when on */
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}
.viz-tag-1 .viz-tag-badge { animation: badgeFlip1 8s ease-in-out infinite; }
.viz-tag-2 .viz-tag-badge { animation: badgeFlip2 8s ease-in-out infinite; }
.viz-tag-3 .viz-tag-badge { animation: badgeFlip3 8s ease-in-out infinite; }
@keyframes badgeFlip1 {
  0%, 8%, 88%, 100% {
    background: #ebeef0;
    color: #95a0aa;
    box-shadow: none;
  }
  13%, 85% {
    background: var(--green-bg);
    color: var(--green-deep);
    box-shadow: 0 0 12px 1px rgba(149, 205, 118, 0.35);
  }
}
@keyframes badgeFlip2 {
  0%, 24%, 88%, 100% {
    background: #ebeef0;
    color: #95a0aa;
    box-shadow: none;
  }
  29%, 85% {
    background: var(--green-bg);
    color: var(--green-deep);
    box-shadow: 0 0 12px 1px rgba(149, 205, 118, 0.35);
  }
}
@keyframes badgeFlip3 {
  0%, 40%, 88%, 100% {
    background: #ebeef0;
    color: #95a0aa;
    box-shadow: none;
  }
  45%, 85% {
    background: var(--green-bg);
    color: var(--green-deep);
    box-shadow: 0 0 12px 1px rgba(149, 205, 118, 0.35);
  }
}

/* When the card is hovered, pause the story so the viewer can read */
.bento-card:hover .viz-cell,
.bento-card:hover .viz-cell .viz-pill,
.bento-card:hover .viz-cell.highlight::after,
.bento-card:hover .viz-cell .viz-avatars i,
.bento-card:hover .viz-tag,
.bento-card:hover .viz-tag-badge {
  animation-play-state: paused;
}

/* ===== Card 3 (growth) — marching highlight + pulsing peak ===== */
.viz-growth svg path[stroke] {
  stroke-dasharray: 40 320;
  animation: dashMarch 3.5s linear infinite;
}
@keyframes dashMarch {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -360; }
}
.viz-growth svg circle:nth-of-type(3) {
  /* The endpoint (×75 ROAS marker) */
  transform-origin: 230px 8px;
  transform-box: fill-box;
  animation: peakPulse 2.4s ease-in-out infinite;
}
@keyframes peakPulse {
  0%, 100% {
    r: 5;
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  50% {
    r: 7;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
  }
}
/* Travelling dot — a small circle that runs along the curve */
.viz-growth::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  top: 16px;
  left: 16px;
  offset-path: path('M 0 60 Q 40 50, 60 30 T 120 10 T 220 -12');
  offset-distance: 0%;
  animation: travelDot 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}
@keyframes travelDot {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ===== Card 4 (bars) — shimmer sweep + after-bar pulse ===== */
.viz-bar-pair .bar.after {
  animation:
    barRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both,
    afterBreathe 3.6s ease-in-out 1.2s infinite;
}
@keyframes afterBreathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.92); }
}
.viz-bar-pair:nth-child(1) .bar.after { animation-delay: 0s, 1.2s; }
.viz-bar-pair:nth-child(2) .bar.after { animation-delay: 0.08s, 1.4s; }
.viz-bar-pair:nth-child(3) .bar.after { animation-delay: 0.16s, 1.6s; }
.viz-bar-pair:nth-child(4) .bar.after { animation-delay: 0.24s, 1.8s; }
.viz-bar-pair:nth-child(5) .bar.after { animation-delay: 0.32s, 2.0s; }
.viz-bar-pair:nth-child(6) .bar.after { animation-delay: 0.40s, 2.2s; }
/* Shimmer sweep across the chart area */
.viz-bars {
  position: relative;
  overflow: hidden;
}
.viz-bars::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  left: -30%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.65) 50%,
    transparent);
  animation: barShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes barShimmer {
  0%, 60%, 100% { left: -30%; }
  80%           { left: 130%; }
}
/* A pulsing dot on the legend's "After" colour to draw attention */
.viz-legend .dot-after {
  animation: legendPing 2.2s ease-in-out infinite;
}
@keyframes legendPing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 181, 168, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(95, 181, 168, 0.25); }
}

/* When a bento card is hovered, slow its inner animations slightly so it feels grounded */
.bento-card:hover .viz-tag,
.bento-card:hover .viz-cell,
.bento-card:hover .viz-cell .viz-pill {
  animation-duration: 5s;
}

@media (prefers-reduced-motion: reduce) {
  .viz-cell, .viz-cell .viz-pill, .viz-cell.highlight, .viz-cell .viz-avatars i,
  .viz-cell.highlight::after,
  .viz-tag, .viz-tag-badge, .viz-tag-couple::after,
  .viz-growth svg path[stroke], .viz-growth svg circle:nth-of-type(3), .viz-growth::after,
  .viz-bar-pair .bar.after, .viz-bars::after, .viz-legend .dot-after {
    animation: none !important;
  }
}

@media (max-width: 800px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card { min-height: 280px; }
  .bento-label { max-width: 80%; }
}

/* ============== STATS BAR (legacy, kept for any pages still using it) ============== */
.stats {
  background: var(--navy);
  color: var(--white);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: '';
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: var(--periwinkle);
  opacity: 0.18;
  filter: blur(80px);
  top: -100px; right: -80px;
}
.stats .container { position: relative; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.stats-grid > div:nth-child(1) .stat-num { color: var(--pink); }
.stats-grid > div:nth-child(2) .stat-num { color: var(--periwinkle); }
.stats-grid > div:nth-child(3) .stat-num { color: var(--green); }
.stats-grid > div:nth-child(4) .stat-num { color: var(--pink); }
.stat-label {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 700px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}

/* ============== COUPLE JOURNEY — animated arc ============== */
.journey {
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}
.journey .container { position: relative; }

/* The track holds the SVG path + positioned avatars */
.journey-track {
  position: relative;
  width: 100%;
  height: clamp(260px, 26vw, 320px);
  margin: 0 auto 60px;
  max-width: 1100px;
}
.journey-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Marching dashed-stroke highlight */
.journey-stroke {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(165, 178, 240, 0.55));
  animation: journeyDraw 7s linear infinite;
}
@keyframes journeyDraw {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* A glowing dot that travels the path */
.journey-pulse {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  box-shadow:
    0 0 0 4px rgba(240, 179, 255, 0.45),
    0 0 22px rgba(240, 179, 255, 0.9);
  top: 0;
  left: 0;
  offset-path: path('M 50 230 Q 250 40, 550 100 T 1050 230');
  offset-distance: 0%;
  animation: journeyTravel 7s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes journeyTravel {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Each stage along the path */
.journey-step {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
}
.journey-step em {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.js-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--off-white);
  border: 2px solid var(--white);
  box-shadow: 0 8px 20px rgba(17, 24, 51, 0.1);
  display: grid;
  place-items: center;
  color: var(--navy);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  animation: avatarActivate 7s ease-out infinite;
  animation-delay: 0.35s;
}
.js-avatar svg {
  width: 26px;
  height: 26px;
  color: var(--navy);
  /* Stroke colour follows currentColor on the svg */
}
/* Ripple that pings out of each stage as the travelling dot reaches it */
.js-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--periwinkle-deep);
  opacity: 0;
  animation: stepPing 7s ease-out infinite;
  animation-delay: inherit;
  pointer-events: none;
}
.js-pink-soft::after, .js-pink::after { border-color: var(--pink-deep); }
.js-peri::after  { border-color: var(--periwinkle-deep); }
.js-green::after { border-color: var(--green-deep); }
.js-aqua::after  { border-color: var(--aqua-deep); }
@keyframes avatarActivate {
  0%   { transform: scale(1) translateY(0); }
  3.5% { transform: scale(1.16) translateY(-6px); }
  12%  { transform: scale(1) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes stepPing {
  0%   { opacity: 0.55; transform: scale(0.92); }
  14%  { opacity: 0;    transform: scale(1.9); }
  100% { opacity: 0;    transform: scale(0.92); }
}
/* Each stage activates in turn, timed to the dot's position along the path */
.jstep-1 .js-avatar { animation-delay: 0.35s; }
.jstep-2 .js-avatar { animation-delay: 1.25s; }
.jstep-3 .js-avatar { animation-delay: 2.30s; }
.jstep-5 .js-avatar { animation-delay: 4.75s; }
.jstep-6 .js-avatar { animation-delay: 5.80s; }
.jstep-7 .js-avatar { animation-delay: 6.45s; }

/* Avatar colour states — saturation increases as the couple progresses */
.js-avatar.js-pink-soft { background: var(--pink-bg); filter: grayscale(0.1); }
.js-avatar.js-pink      { background: var(--pink); filter: none; box-shadow: 0 10px 24px rgba(208, 147, 232, 0.45); }
.js-avatar.js-peri      { background: var(--periwinkle); filter: none; box-shadow: 0 10px 24px rgba(111, 128, 216, 0.45); }
.js-avatar.js-green     { background: var(--green); filter: none; box-shadow: 0 10px 24px rgba(136, 200, 105, 0.45); }
.js-avatar.js-aqua      { background: var(--aqua); filter: none; box-shadow: 0 10px 24px rgba(95, 181, 181, 0.45); }

/* THE HUB — brand logo at the apex */
.journey-hub {
  position: absolute;
  left: 50%;
  top: 14%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
}
.journey-hub-inner {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--white);
  box-shadow:
    0 0 0 8px rgba(240, 179, 255, 0.25),
    0 20px 50px rgba(208, 147, 232, 0.4),
    0 8px 20px rgba(17, 24, 51, 0.08);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  animation: hubFloat 5s ease-in-out infinite;
}
.journey-hub-inner img {
  width: 90px;
  height: auto;
}
@keyframes hubFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.journey-hub-glow {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pink) 0%, transparent 70%);
  opacity: 0.7;
  filter: blur(20px);
  z-index: 0;
  animation: hubPulse 4s ease-in-out infinite;
}
@keyframes hubPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 0.9; }
}
.journey-hub-label {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  font-style: normal;
}

/* Decorative connector rings around the hub */
.journey-hub-inner::before,
.journey-hub-inner::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px dashed var(--pink);
  border-radius: 50%;
  opacity: 0.35;
  animation: ringSpin 22s linear infinite;
  pointer-events: none;
}
.journey-hub-inner::after {
  inset: -22px;
  border-color: var(--periwinkle);
  border-style: dotted;
  opacity: 0.3;
  animation-duration: 32s;
  animation-direction: reverse;
}
@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

/* Intro text block under the track */
.journey-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.journey-intro .eyebrow { margin-bottom: 16px; }
.journey-intro h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 22px;
}
.journey-intro p {
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 32px;
}
/* CTA + rating — stacked, breathing-room layout */
.journey-cta {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
.journey-rating {
  margin: 22px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 12px;
  background: var(--off-white);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px;
  color: var(--muted);
  box-shadow: 0 6px 16px rgba(17, 24, 51, 0.04);
}
/* Force the rating onto its own line below the button */
.journey-intro > .journey-rating {
  display: flex;
  width: max-content;
  max-width: 100%;
}
.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--periwinkle-deep);
}
.rating-stars svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.rating-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1;
}
.rating-text strong {
  color: var(--navy);
  font-weight: 700;
  margin-right: 2px;
}
/* Legacy .journey-stars kept for backwards compat in case anything still uses it */
.journey-stars {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}

/* Responsive — collapse to a vertical stack on small screens */
@media (max-width: 800px) {
  .journey-track { height: 480px; }
  .journey-svg { display: none; }
  .journey-pulse { display: none; }
  .journey-step,
  .journey-hub {
    position: static;
    transform: none;
    display: inline-block;
  }
  .journey-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    place-items: center;
  }
  .journey-hub-inner { width: 110px; height: 110px; }
  .journey-hub-inner img { width: 70px; }
  .journey-hub-inner::before,
  .journey-hub-inner::after { display: none; }
  /* Stages stack on mobile, so the dot-synced activation does not apply */
  .js-avatar { animation: none; }
  .js-avatar::after { display: none; }
}
@media (max-width: 480px) {
  .journey-track { grid-template-columns: 1fr; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-stroke, .journey-pulse, .js-avatar, .js-avatar::after,
  .journey-hub-inner, .journey-hub-glow,
  .journey-hub-inner::before, .journey-hub-inner::after {
    animation: none !important;
  }
  .journey-stroke { stroke-dashoffset: 0; opacity: 0.8; }
}

/* ============== LOGO MARQUEE ============== */
.logo-strip {
  background: var(--off-white);
  padding: 60px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.logo-strip h4 {
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 30px;
}
.logo-marquee {
  display: flex;
  gap: 60px;
  overflow: hidden;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-track {
  display: flex;
  gap: 60px;
  align-items: center;
  animation: scroll 38s linear infinite;
  flex-shrink: 0;
}
.logo-track img {
  height: 56px;
  width: auto;
  opacity: 0.7;
  filter: grayscale(0.3);
  transition: all 0.3s;
}
.logo-track img:hover { opacity: 1; filter: none; }
@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* ============== FEATURE / CARDS ============== */
.features {
  background: var(--white);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.feature-card {
  background: var(--white);
  padding: 40px 32px;
  border-radius: 14px;
  border: 1px solid var(--line);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--periwinkle);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.feature-card:nth-child(1)::before { background: var(--pink); }
.feature-card:nth-child(2)::before { background: var(--periwinkle); }
.feature-card:nth-child(3)::before { background: var(--green); }
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
  border-color: transparent;
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  font-size: 22px;
  color: var(--navy);
}
.feature-card:nth-child(1) .feature-icon { background: var(--pink-bg); color: var(--pink-deep); }
.feature-card:nth-child(2) .feature-icon { background: var(--peri-bg); color: var(--periwinkle-deep); }
.feature-card:nth-child(3) .feature-icon { background: var(--green-bg); color: var(--green-deep); }
.feature-card h3 { margin-bottom: 12px; }
.feature-card p { color: var(--muted); margin: 0; }

@media (max-width: 800px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* 4-column variant (used on the services grid with 8 cards) */
.feature-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature-grid-4 .feature-card { padding: 32px 26px; }
.feature-grid-4 .feature-card h3 { font-size: 1.25rem; }
.feature-grid-4 .feature-card p { font-size: 14.5px; }
.feature-grid-4 .feature-card:nth-child(1)::before { background: var(--pink); }
.feature-grid-4 .feature-card:nth-child(2)::before { background: var(--periwinkle); }
.feature-grid-4 .feature-card:nth-child(3)::before { background: var(--green); }
.feature-grid-4 .feature-card:nth-child(4)::before { background: #c7e8e2; }
.feature-grid-4 .feature-card:nth-child(5)::before { background: var(--pink); }
.feature-grid-4 .feature-card:nth-child(6)::before { background: var(--periwinkle); }
.feature-grid-4 .feature-card:nth-child(7)::before { background: var(--green); }
.feature-grid-4 .feature-card:nth-child(8)::before { background: #c7e8e2; }
.feature-grid-4 .feature-card:nth-child(1) .feature-icon,
.feature-grid-4 .feature-card:nth-child(5) .feature-icon { background: var(--pink-bg); color: var(--pink-deep); }
.feature-grid-4 .feature-card:nth-child(2) .feature-icon,
.feature-grid-4 .feature-card:nth-child(6) .feature-icon { background: var(--peri-bg); color: var(--periwinkle-deep); }
.feature-grid-4 .feature-card:nth-child(3) .feature-icon,
.feature-grid-4 .feature-card:nth-child(7) .feature-icon { background: var(--green-bg); color: var(--green-deep); }
.feature-grid-4 .feature-card:nth-child(4) .feature-icon,
.feature-grid-4 .feature-card:nth-child(8) .feature-icon { background: #effaf7; color: #5fb5a8; }
@media (max-width: 1100px) { .feature-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .feature-grid-4 { grid-template-columns: 1fr; } }

/* ============== VENUEFLOW CRM SHOWCASE ============== */
.venueflow {
  background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
  position: relative;
  overflow: hidden;
  padding: 110px 0;
}
.venueflow::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  background: var(--pink);
  opacity: 0.18;
  filter: blur(110px);
  border-radius: 50%;
  top: -140px; left: -120px;
  pointer-events: none;
}
.venueflow::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  background: var(--periwinkle);
  opacity: 0.2;
  filter: blur(110px);
  border-radius: 50%;
  bottom: -140px; right: -120px;
  pointer-events: none;
}
.venueflow .container { position: relative; }
.vf-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.vf-text h2 { margin: 12px 0 20px; font-size: clamp(2rem, 3.4vw, 2.8rem); }
.vf-text .vf-lead { font-size: 1.05rem; color: var(--muted); margin-bottom: 32px; }
.vf-features {
  list-style: none;
  display: grid;
  gap: 22px;
  margin: 0 0 32px;
}
.vf-features li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}
.vf-feat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.vf-feat-pink  { background: var(--pink-bg); }
.vf-feat-peri  { background: var(--peri-bg); }
.vf-feat-green { background: var(--green-bg); }
.vf-feat-sky   { background: #effaf7; }
.vf-features strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 4px;
  font-weight: 500;
}
.vf-features p {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* ===== Dashboard mockup ===== */
.vf-mockup {
  position: relative;
  perspective: 1400px;
}
.vf-glow {
  position: absolute;
  inset: 20px;
  background: linear-gradient(135deg, var(--pink), var(--periwinkle), var(--green));
  filter: blur(50px);
  opacity: 0.45;
  border-radius: 30px;
  z-index: 0;
}
.vf-window {
  position: relative;
  background: var(--white);
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px rgba(20, 33, 61, 0.18),
              0 12px 30px rgba(20, 33, 61, 0.08);
  overflow: hidden;
  transform: rotateY(-3deg) rotateX(2deg);
  transform-origin: center center;
  z-index: 1;
  animation: vfWindowFloat 7s ease-in-out infinite;
}
@keyframes vfWindowFloat {
  0%, 100% { transform: rotateY(-3deg) rotateX(2deg) translateY(0); }
  50%      { transform: rotateY(-3deg) rotateX(2deg) translateY(-6px); }
}
.vf-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--off-white);
  border-bottom: 1px solid var(--line);
}
.vf-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #f6cdcc;
}
.vf-dot:nth-child(2) { background: #ffe7a8; }
.vf-dot:nth-child(3) { background: #c7e9c0; }
.vf-titlebar em {
  font-style: normal;
  margin-left: 14px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.vf-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--line);
}
.vf-tabs button {
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.vf-tabs button.active {
  color: var(--navy);
  background: var(--white);
}
.vf-tabs button.active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--periwinkle));
  border-radius: 2px;
}
.vf-badge {
  background: var(--pink-deep);
  color: var(--white);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 100px;
  font-weight: 700;
  animation: vfBadgePulse 2.4s ease-in-out infinite;
}
@keyframes vfBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 156, 238, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(217, 156, 238, 0.3); }
}
.vf-body {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--white);
}

/* Stats row */
.vf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.vf-stats > div {
  padding: 12px 14px;
  background: var(--off-white);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.vf-stats strong {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--navy);
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.vf-stats span {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vf-stats > div:nth-child(1) strong { color: var(--pink-deep); }
.vf-stats > div:nth-child(2) strong { color: var(--periwinkle-deep); }
.vf-stats > div:nth-child(3) strong { color: var(--green-deep); }

/* Section headers in the dashboard */
.vf-section h5 {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

/* Unified inbox */
.vf-inbox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  min-height: 240px;
}
.vf-message {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  background: var(--off-white);
  border-radius: 10px;
  border: 1px solid var(--line);
  align-items: center;
  font-size: 12px;
}
.vf-message strong {
  display: block;
  color: var(--navy);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
}
.vf-message em {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.vf-msg-time {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.vf-channel {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  flex-shrink: 0;
}
.vf-channel.sms { background: linear-gradient(135deg, var(--pink-deep), var(--pink)); }
.vf-channel.wa  { background: linear-gradient(135deg, #25d366, #128c7e); }
.vf-channel.ig  { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.vf-channel.em  { background: linear-gradient(135deg, var(--periwinkle-deep), var(--periwinkle)); }

/* New message slides in from top */
.vf-msg-1 {
  animation: vfMessageArrive 8s ease-in-out infinite;
}
@keyframes vfMessageArrive {
  0%, 4%    { transform: translateY(-12px) scale(0.95); opacity: 0; }
  10%       { transform: translateY(0) scale(1.02); opacity: 1; }
  14%, 92%  { transform: translateY(0) scale(1); opacity: 1; }
  96%, 100% { transform: translateY(-12px) scale(0.95); opacity: 0; }
}
/* Other messages just exist with subtle hover-like states */
.vf-msg-1 strong, .vf-msg-1 em {
  animation: vfMessageHighlight 8s ease-in-out infinite;
}
@keyframes vfMessageHighlight {
  0%, 5%, 25%, 100% { color: inherit; }
  10%, 20%          { color: var(--pink-deep); }
}
.vf-msg-1 {
  border-left: 3px solid var(--pink);
}

/* Pipeline */
.vf-pipe-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.vf-pipe-col {
  background: var(--off-white);
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 8px 6px;
  min-height: 90px;
}
.vf-pipe-col h6 {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vf-pipe-col h6 i {
  font-style: normal;
  background: var(--white);
  color: var(--navy);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 100px;
  font-weight: 700;
}
.vf-pcard {
  background: var(--white);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--navy);
  box-shadow: 0 2px 6px rgba(20, 33, 61, 0.06);
  border: 1px solid var(--line);
}
.vf-pcard span {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--periwinkle), var(--pink));
  flex-shrink: 0;
}
.vf-pcard em {
  font-style: normal;
  font-weight: 500;
}
.vf-pcard-won {
  background: linear-gradient(135deg, var(--green-bg), var(--white));
  border-color: var(--green-deep);
}
.vf-pcard-won span { background: linear-gradient(135deg, var(--green-deep), var(--green)); }
/* The "moving" card pulses to suggest movement between stages */
.vf-pcard-move {
  animation: vfCardMove 6s ease-in-out infinite;
  position: relative;
}
@keyframes vfCardMove {
  0%, 50%, 100% {
    transform: translateX(0) scale(1);
    box-shadow: 0 2px 6px rgba(20, 33, 61, 0.06);
  }
  10% { transform: translateX(0) scale(1.04); box-shadow: 0 8px 20px rgba(165, 178, 240, 0.4); }
  20% { transform: translateX(40px) scale(1.04); box-shadow: 0 8px 20px rgba(149, 205, 118, 0.4); }
  30% { transform: translateX(40px) scale(1); box-shadow: 0 8px 20px rgba(149, 205, 118, 0.2); }
  40% { transform: translateX(0) scale(1); box-shadow: 0 2px 6px rgba(20, 33, 61, 0.06); }
}

/* Auto-reply toast at the bottom of the dashboard */
.vf-toast {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--green-bg), var(--white));
  border: 1px solid var(--green-deep);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--navy);
  align-items: center;
}
.vf-toast strong { font-weight: 600; }
.vf-toast em { font-style: normal; color: var(--muted); }
.vf-toast-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green-deep);
  position: relative;
  box-shadow: 0 0 0 0 rgba(149, 205, 118, 0.4);
  animation: vfToastDot 1.8s ease-in-out infinite;
}
@keyframes vfToastDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(149, 205, 118, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(149, 205, 118, 0); }
}

/* Floating notification bubbles around the window */
.vf-float {
  position: absolute;
  background: var(--white);
  border-radius: 100px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--navy);
  box-shadow: 0 14px 32px rgba(20, 33, 61, 0.14);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  z-index: 3;
  white-space: nowrap;
}
.vf-float span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
}
.vf-float-1 {
  top: -16px;
  left: -28px;
  animation: vfFloat1 7s ease-in-out infinite;
}
.vf-float-1 span { background: var(--pink-bg); }
.vf-float-2 {
  bottom: 40px;
  right: -36px;
  animation: vfFloat2 8s ease-in-out 0.8s infinite;
}
.vf-float-2 span { background: #fff7d6; }
.vf-float-3 {
  top: 38%;
  right: -28px;
  animation: vfFloat3 9s ease-in-out 1.4s infinite;
}
.vf-float-3 span { background: var(--peri-bg); }
@keyframes vfFloat1 {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0; }
  6%       { transform: translateY(0) scale(1.05); opacity: 1; }
  12%, 88% { transform: translateY(-4px) scale(1); opacity: 1; }
  94%      { transform: translateY(-10px) scale(0.95); opacity: 0; }
}
@keyframes vfFloat2 {
  0%, 100% { transform: translateY(0) scale(0.95); opacity: 0; }
  8%       { transform: translateY(0) scale(1.05); opacity: 1; }
  14%, 88% { transform: translateY(4px) scale(1); opacity: 1; }
  94%      { transform: translateY(12px) scale(0.95); opacity: 0; }
}
@keyframes vfFloat3 {
  0%, 100% { transform: translateX(0) scale(0.95); opacity: 0; }
  10%      { transform: translateX(0) scale(1.05); opacity: 1; }
  16%, 88% { transform: translateX(-3px) scale(1); opacity: 1; }
  94%      { transform: translateX(10px) scale(0.95); opacity: 0; }
}

@media (max-width: 1000px) {
  .vf-grid { grid-template-columns: 1fr; gap: 48px; }
  .vf-mockup { transform: scale(0.92); transform-origin: top left; }
  .vf-float-1 { left: 8px; }
  .vf-float-2 { right: 8px; }
  .vf-float-3 { display: none; }
}
@media (max-width: 600px) {
  .vf-window { transform: none; animation: none; }
  .vf-mockup { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-window, .vf-msg-1, .vf-msg-1 strong, .vf-msg-1 em,
  .vf-pcard-move, .vf-toast-dot,
  .vf-float-1, .vf-float-2, .vf-float-3,
  .vf-badge {
    animation: none !important;
  }
}

/* ============== SPLIT SECTION ============== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split-image {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  aspect-ratio: 5/6;
  position: relative;
}
.split-image img { width: 100%; height: 100%; object-fit: cover; }
/* Founder portrait sits high in the frame; anchor toward the top so his head isn't cropped */
.split-image img[src*="founder-kai"] { object-position: center 12%; }
.split-image::before {
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  border: 8px solid var(--pink);
  border-radius: 16px;
  top: 18px; left: 18px;
  z-index: -1;
}
.split-text .eyebrow { color: var(--periwinkle-deep); }
.split h2 { margin-bottom: 22px; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-image::before { display: none; }
}

/* ============== TESTIMONIALS ============== */
.testimonials {
  background: var(--off-white);
  position: relative;
  overflow: hidden;
}
.testimonials::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  background: var(--green);
  opacity: 0.3;
  filter: blur(70px);
  border-radius: 50%;
  top: 10%; left: -100px;
}
.testimonials::after {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  background: var(--pink);
  opacity: 0.35;
  filter: blur(70px);
  border-radius: 50%;
  bottom: 5%; right: -80px;
}
.testimonials .container { position: relative; }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial-card {
  background: var(--white);
  padding: 36px;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
}
.testimonial-card::before {
  content: '“';
  position: absolute;
  top: 12px; right: 22px;
  font-family: var(--serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--periwinkle);
  opacity: 0.35;
}
.testimonial-card:nth-child(3n+1)::before { color: var(--pink); opacity: 0.6; }
.testimonial-card:nth-child(3n+2)::before { color: var(--periwinkle); opacity: 0.5; }
.testimonial-card:nth-child(3n)::before { color: var(--green-deep); opacity: 0.5; }
.testimonial-card .stars { margin-bottom: 16px; }
.testimonial-card blockquote {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--navy);
  margin-bottom: 24px;
  line-height: 1.45;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.testimonial-author strong {
  display: block;
  font-size: 15px;
  color: var(--navy);
}
.testimonial-author span {
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 900px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* ============== POLAROID GALLERY ============== */
.polaroid-strip {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px 0;
}
.polaroid {
  background: var(--white);
  padding: 14px 14px 26px;
  box-shadow: var(--shadow);
  width: 200px;
  transform: rotate(-2deg);
  transition: all 0.3s;
  border-radius: 4px;
}
.polaroid:nth-child(even) { transform: rotate(2deg) translateY(10px); }
.polaroid:nth-child(3n) { transform: rotate(-1deg) translateY(-8px); }
.polaroid:hover { transform: scale(1.05) rotate(0); z-index: 2; }
.polaroid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

/* ============== FAQ ============== */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-question {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 28px 0;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--periwinkle-deep); }
.faq-question::after {
  content: '+';
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--peri-bg);
  font-size: 1.4rem;
  color: var(--periwinkle-deep);
  font-weight: 300;
  transition: all 0.3s;
  flex-shrink: 0;
}
.faq-item.open .faq-question::after {
  content: '−';
  background: var(--periwinkle);
  color: var(--white);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  color: var(--muted);
}
.faq-answer-inner { padding: 0 0 28px; }
.faq-item.open .faq-answer { max-height: 500px; }

/* ============== CTA SECTION ============== */
.cta-block {
  position: relative;
  padding: 120px 0;
  text-align: center;
  color: var(--white);
  background: var(--navy);
  overflow: hidden;
}
.cta-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/wedding-castle.png') center/cover;
  opacity: 0.2;
}
.cta-block::after {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: var(--periwinkle);
  opacity: 0.25;
  filter: blur(90px);
  top: -120px; right: -120px;
  z-index: 0;
}
.cta-block .container { position: relative; z-index: 1; }
.cta-block h2 {
  color: var(--white);
  margin-bottom: 20px;
}
.cta-block h2 em {
  font-style: italic;
  color: var(--pink);
}
.cta-block p {
  font-size: 1.15rem;
  opacity: 0.88;
  max-width: 640px;
  margin: 0 auto 36px;
}

/* ============== FOOTER ============== */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding: 80px 0 30px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  height: 4px; left: 0; right: 0; top: 0;
  background: linear-gradient(90deg, var(--pink), var(--periwinkle), var(--green));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}
.footer-grid h4 {
  color: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.footer-logo img {
  width: 274px;
  height: auto;
  max-width: 100%;
  filter: brightness(0) invert(1);
  margin-bottom: 20px;
}
.footer-grid ul { list-style: none; }
.footer-grid ul li { margin-bottom: 12px; }
.footer-grid a { color: rgba(255, 255, 255, 0.75); font-size: 15px; overflow-wrap: anywhere; }
.footer-grid a:hover { color: var(--periwinkle); }
.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 44px; }
}

/* ============== PAGE HEADERS — solid colour-block treatment ============== */
.page-header {
  background:
    radial-gradient(ellipse at 88% 110%, var(--periwinkle) 0%, transparent 55%),
    radial-gradient(ellipse at 5% -5%, var(--pink) 0%, transparent 50%),
    var(--white);
  padding: 130px 0 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  /* Solid pastel "badge" decoration on left */
  content: '';
  position: absolute;
  width: 160px; height: 160px;
  background: var(--pink);
  border-radius: 50%;
  top: -40px; left: -60px;
  z-index: 0;
  box-shadow: 60px 60px 0 -20px var(--green);
}
.page-header::after {
  /* Solid pastel "badge" decoration on right */
  content: '';
  position: absolute;
  width: 140px; height: 140px;
  background: var(--aqua);
  border-radius: 50%;
  bottom: -50px; right: -50px;
  z-index: 0;
  box-shadow: -70px -50px 0 -10px var(--periwinkle);
}
.page-header .container { position: relative; z-index: 1; }
.page-header h1 {
  margin-bottom: 18px;
}
/* page-header pill keeps the global pastel-pill style (navy text), but sits
   straight rather than rotated, so inner-page headings read clean */
.page-header h1 em {
  transform: none;
}
.page-header p {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto;
}

/* ============== PROCESS PHASES ============== */
.phase {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 60px;
  padding: 60px 0;
  border-bottom: 1px solid var(--line);
}
.phase:last-child { border-bottom: 0; }
.phase-marker {
  font-family: var(--serif);
}
.phase-week {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--periwinkle-deep);
  background: var(--peri-bg);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.phase:nth-child(2) .phase-week { color: var(--pink-deep); background: var(--pink-bg); }
.phase:nth-child(3) .phase-week { color: var(--green-deep); background: var(--green-bg); }
.phase:nth-child(4) .phase-week { color: var(--periwinkle-deep); background: var(--peri-bg); }
.phase:nth-child(5) .phase-week { color: var(--pink-deep); background: var(--pink-bg); }
.phase-num {
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 300;
  color: var(--periwinkle);
}
.phase:nth-child(2) .phase-num { color: var(--pink-deep); }
.phase:nth-child(3) .phase-num { color: var(--green-deep); }
.phase:nth-child(4) .phase-num { color: var(--periwinkle); }
.phase:nth-child(5) .phase-num { color: var(--pink-deep); }
.phase-body h3 { margin-bottom: 14px; font-size: 1.8rem; }
.phase-body p { color: var(--muted); max-width: 640px; }
.phase-body ul {
  list-style: none;
  margin-top: 18px;
}
.phase-body li {
  padding: 6px 0 6px 28px;
  position: relative;
  color: var(--muted);
}
.phase-body li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--periwinkle-deep);
  font-weight: 600;
}
@media (max-width: 800px) {
  .phase { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
}

/* ============== CASE STUDIES PAGE — bento + filters ============== */
/* Aggregate stat strip above the grid */
.cs-stat-strip {
  background: var(--white);
  padding: 36px 0 8px;
}
.cs-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cs-stat {
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--pink-bg);
  border: 1px solid rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}
.cs-stat-peri  { background: var(--peri-bg); }
.cs-stat-green { background: var(--green-bg); }
.cs-stat-aqua  { background: var(--aqua-bg); }
.cs-stat strong {
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
}
.cs-stat span {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
@media (max-width: 800px) { .cs-stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* Section wrapper */
.cs-section {
  padding: 50px 0 100px;
}

/* Filter pills */
.cs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}
.cs-chip {
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--line);
  border-radius: 100px;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cs-chip span {
  background: var(--off-white);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  transition: all 0.25s;
}
.cs-chip:hover {
  border-color: var(--periwinkle);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(165, 178, 240, 0.2);
}
.cs-chip.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  box-shadow: 0 12px 28px rgba(17, 24, 51, 0.25);
}
.cs-chip.active span {
  background: var(--pink);
  color: var(--navy);
}

/* Editorial 3-column grid — uniform cards, one featured spanning 2 */
.cs-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cs-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
  box-shadow: 0 4px 14px rgba(17, 24, 51, 0.04);
}
.cs-card-image {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--off-white);
}
.cs-card-image::before { content: none; }
.cs-card-image::after  { content: none; }
.cs-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Wrap the img in a clipped frame using its container's aspect ratio */
.cs-card { isolation: isolate; }
.cs-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Category tag — sits as a clean eyebrow at the top of the body */
.cs-tag {
  display: inline-block;
  background: var(--off-white);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  align-self: flex-start;
}
.cs-pink  .cs-tag { background: var(--pink-bg);  color: var(--pink-deep);  border-color: var(--pink); }
.cs-peri  .cs-tag { background: var(--peri-bg);  color: var(--periwinkle-deep); border-color: var(--periwinkle); }
.cs-green .cs-tag { background: var(--green-bg); color: var(--green-deep); border-color: var(--green); }
.cs-aqua  .cs-tag { background: var(--aqua-bg);  color: var(--aqua-deep);  border-color: var(--aqua); }
.cs-navy  .cs-tag { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* KPI — inline pill in the body, no rotation, no float */
.cs-kpi {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  background: var(--pink-bg);
  border: 1px solid var(--pink);
  border-radius: 12px;
  margin-bottom: 16px;
  align-self: flex-start;
}
.cs-kpi strong {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
}
.cs-kpi span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.cs-peri  .cs-kpi { background: var(--peri-bg);  border-color: var(--periwinkle); }
.cs-green .cs-kpi { background: var(--green-bg); border-color: var(--green); }
.cs-aqua  .cs-kpi { background: var(--aqua-bg);  border-color: var(--aqua); }
.cs-navy  .cs-kpi { background: var(--navy);    border-color: var(--navy); }
.cs-navy  .cs-kpi strong { color: var(--white); }
.cs-navy  .cs-kpi span   { color: rgba(255, 255, 255, 0.7); }

/* Body */
.cs-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cs-body h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.cs-body p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.cs-cta {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  transition: gap 0.3s ease, color 0.2s ease;
}

/* Featured card — spans 2 columns with horizontal layout */
.cs-feat {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
}
.cs-feat img {
  height: 100%;
  aspect-ratio: auto;
}
.cs-feat .cs-body {
  padding: 36px 40px;
  justify-content: center;
}
.cs-feat .cs-body h3 { font-size: 1.7rem; margin-bottom: 12px; }
.cs-feat .cs-body p  { font-size: 15px; -webkit-line-clamp: 4; }
.cs-feat .cs-kpi    { padding: 12px 18px; }
.cs-feat .cs-kpi strong { font-size: 1.3rem; }

/* Other variants now no-op — kept as backwards-compat */
.cs-feat-wide, .cs-wide, .cs-med { grid-column: span 1; }

/* Hover */
.cs-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 50px rgba(17, 24, 51, 0.12);
  border-color: transparent;
}
.cs-card:hover img { transform: scale(1.04); }
.cs-card:hover .cs-cta { gap: 12px; color: var(--periwinkle-deep); }

/* Filter hide state */
.cs-card.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  filter: blur(2px);
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media (max-width: 1000px) {
  .cs-bento { grid-template-columns: repeat(2, 1fr); }
  .cs-feat { grid-column: span 2; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .cs-bento { grid-template-columns: 1fr; }
  .cs-feat { grid-column: 1; grid-template-columns: 1fr; }
  .cs-feat .cs-body { padding: 26px; }
}

/* Empty state */
.cs-empty {
  text-align: center;
  padding: 80px 24px;
  background: var(--off-white);
  border-radius: 24px;
  border: 2px dashed var(--line);
  margin-top: 40px;
}
.cs-empty-emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 16px;
}
.cs-empty p {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 22px;
}

/* Reveal animation on load (uses the existing data-reveal system + a per-card stagger) */
.cs-card[data-reveal] {
  --reveal-delay: calc(var(--cs-index, 0) * 80ms);
}
/* Bento entrance: each card rises + fades in, staggered by column.
   Uses an animation (not the transition-reveal) so the hover lift stays snappy. */
#csBento .cs-card[data-reveal] { opacity: 0; }
#csBento .cs-card[data-reveal].is-revealed {
  opacity: 1;
  animation: csCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms) backwards;
}
@keyframes csCardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #csBento .cs-card[data-reveal],
  #csBento .cs-card[data-reveal].is-revealed { animation: none; opacity: 1; }
}

/* Responsive */
@media (max-width: 1000px) {
  .cs-bento { grid-template-columns: repeat(4, 1fr); }
  .cs-feat       { grid-column: span 4; grid-row: span 2; min-height: 520px; }
  .cs-feat-wide  { grid-column: span 4; }
  .cs-wide       { grid-column: span 4; }
  .cs-med        { grid-column: span 2; }
}
@media (max-width: 700px) {
  .cs-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; gap: 14px; }
  .cs-feat, .cs-feat-wide, .cs-wide { grid-column: 1 / -1; min-height: 320px; }
  .cs-feat { grid-row: auto; min-height: 380px; }
  .cs-kpi { transform: rotate(2deg); }
}
@media (max-width: 480px) {
  .cs-bento { grid-template-columns: 1fr; }
  .cs-med { grid-column: 1; }
}

/* ============== CASE STUDY CARDS (legacy — original card grid) ============== */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.case-card {
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
}
.case-card-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}
.case-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s;
}
.case-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(20, 33, 61, 0.35));
}
.case-card:hover .case-card-image img { transform: scale(1.06); }
.case-card-body { padding: 30px; flex-grow: 1; display: flex; flex-direction: column; }
.case-card .eyebrow { margin-bottom: 12px; }
.case-card:nth-child(3n+1) .eyebrow { color: var(--pink-deep); }
.case-card:nth-child(3n+2) .eyebrow { color: var(--periwinkle-deep); }
.case-card:nth-child(3n) .eyebrow { color: var(--green-deep); }
.case-card h3 { font-size: 1.5rem; margin-bottom: 12px; }
.case-card p { color: var(--muted); flex-grow: 1; }
.case-card-link {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--periwinkle-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.case-card-link::after { content: '→'; transition: transform 0.3s; }
.case-card:hover .case-card-link::after { transform: translateX(4px); }

@media (max-width: 800px) { .case-grid { grid-template-columns: 1fr; } }

/* ============== TEAM — tilted polaroid cards ============== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 36px;
  padding: 20px 8px 80px;
  perspective: 1200px;
  transition: filter 0.4s ease;
}
.team-grid:has(.team-member:hover) {
  /* Subtle saturation lift when one is being focused */
  filter: saturate(1.05);
}
.team-member {
  text-align: center;
  padding: 0;
  position: relative;
  cursor: default;
  /* Each card gets its own gentle tilt */
  --tilt: 0deg;
  --accent: var(--periwinkle);
  --accent-deep: var(--periwinkle-deep);
  --accent-shadow: rgba(165, 178, 240, 0.45);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Color rotation: pink → periwinkle → green */
.team-member:nth-child(3n+1) {
  --accent: var(--pink);
  --accent-deep: var(--pink-deep);
  --accent-shadow: rgba(217, 156, 238, 0.5);
}
.team-member:nth-child(3n+2) {
  --accent: var(--periwinkle);
  --accent-deep: var(--periwinkle-deep);
  --accent-shadow: rgba(165, 178, 240, 0.5);
}
.team-member:nth-child(3n) {
  --accent: var(--green);
  --accent-deep: var(--green-deep);
  --accent-shadow: rgba(149, 205, 118, 0.5);
}
/* Alternating tilt for visual interest */
.team-member:nth-child(1) { --tilt: -2.5deg; }
.team-member:nth-child(2) { --tilt:  1.5deg; }
.team-member:nth-child(3) { --tilt: -1deg;   }
.team-member:nth-child(4) { --tilt:  2deg;   }
.team-member:nth-child(5) { --tilt: -2deg;   }
.team-member:nth-child(6) { --tilt:  1deg;   }
.team-member:nth-child(7) { --tilt: -1.5deg; }
.team-member:nth-child(8) { --tilt:  2.5deg; }
.team-member:nth-child(9) { --tilt: -1.5deg; }

.team-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 260px;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 4rem;
  color: var(--accent-deep);
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(20, 33, 61, 0.10);
  transform: rotate(var(--tilt));
  transform-origin: center bottom;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease;
  will-change: transform;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Letter-fallback background when no photo */
.team-photo:not(:has(img)) {
  background: linear-gradient(135deg, var(--accent) 0%, var(--white) 80%);
}

/* Decorative washi-tape strip at top of each card */
.team-photo::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 64px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.6;
  transform: translateX(-50%) rotate(calc(var(--tilt) * -2));
  z-index: 3;
  box-shadow: 0 2px 6px rgba(20, 33, 61, 0.08);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s ease;
}

/* Name / role under the photo */
.team-member h4 {
  margin-bottom: 4px;
  font-size: 1.3rem;
  color: var(--navy);
  transition: color 0.25s ease;
}
.team-member span {
  font-size: 12.5px;
  color: var(--muted);
  display: block;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ===== HOVER: straighten, lift, glow ===== */
.team-member:hover {
  z-index: 20;
}
.team-member:hover .team-photo {
  transform: rotate(0deg) translateY(-14px) scale(1.05);
  box-shadow:
    0 32px 70px var(--accent-shadow),
    0 12px 24px rgba(20, 33, 61, 0.10);
}
.team-member:hover .team-photo img {
  transform: scale(1.04);
}
.team-member:hover .team-photo::before {
  opacity: 0.9;
  transform: translateX(-50%) rotate(0deg);
}
.team-member:hover h4 {
  color: var(--accent-deep);
}

/* ===== SIBLING DIM ===== */
.team-grid:has(.team-member:hover) .team-member:not(:hover) {
  opacity: 0.4;
  transform: scale(0.97);
}

/* ===== IDLE FLOAT: very gentle ===== */
@keyframes teamFloat {
  0%, 100% { transform: rotate(var(--tilt)) translateY(0); }
  50%      { transform: rotate(var(--tilt)) translateY(-4px); }
}
.team-photo {
  animation: teamFloat 6s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
.team-member:nth-child(1) .team-photo { --float-delay: 0s; }
.team-member:nth-child(2) .team-photo { --float-delay: 0.6s; }
.team-member:nth-child(3) .team-photo { --float-delay: 1.2s; }
.team-member:nth-child(4) .team-photo { --float-delay: 1.8s; }
.team-member:nth-child(5) .team-photo { --float-delay: 0.3s; }
.team-member:nth-child(6) .team-photo { --float-delay: 0.9s; }
.team-member:nth-child(7) .team-photo { --float-delay: 1.5s; }
.team-member:nth-child(8) .team-photo { --float-delay: 0.7s; }
.team-member:nth-child(9) .team-photo { --float-delay: 1.4s; }
.team-member:hover .team-photo {
  animation: none;
}

/* Bio — slides up from inside the photo on hover (caption-style) */
.team-bio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px 24px 28px;
  background: rgba(15, 24, 47, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--white);
  z-index: 4;
  transform: translateY(100%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 18px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.team-bio p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: #ffffff;
  font-weight: 400;
  letter-spacing: 0.005em;
  position: relative;
  z-index: 1;
}
/* Top accent handle — a coloured pill marking the panel */
.team-bio::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 4px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent-shadow);
}
/* Sparkle accent — top right */
.team-bio::after {
  content: '✦';
  position: absolute;
  top: 28px;
  right: 22px;
  font-size: 14px;
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-shadow);
  z-index: 2;
}
.team-member:hover .team-bio {
  transform: translateY(0);
  pointer-events: auto;
}
/* Fallback when backdrop-filter isn't supported — make the bg fully opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .team-bio { background: rgba(15, 24, 47, 1); }
}

/* On touch devices: show the bio peeking from the bottom, tap to expand fully */
@media (hover: none) {
  .team-bio {
    transform: translateY(60%);
    justify-content: flex-end;
    padding-bottom: 22px;
  }
  .team-bio p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .team-photo:active .team-bio,
  .team-photo:focus-within .team-bio {
    transform: translateY(0);
    justify-content: center;
    padding-bottom: 28px;
  }
  .team-photo:active .team-bio p,
  .team-photo:focus-within .team-bio p {
    -webkit-line-clamp: unset;
    display: block;
  }
}

@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .team-grid { grid-template-columns: 1fr; } }

/* ============== TIMELINE ============== */
.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 90px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--pink), var(--periwinkle), var(--green));
  opacity: 0.6;
}
.timeline-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 40px;
  padding: 24px 0;
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 84px;
  top: 32px;
  width: 14px;
  height: 14px;
  background: var(--periwinkle);
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 1px var(--periwinkle);
}
.timeline-item:nth-child(3n+1)::before { background: var(--pink-deep); box-shadow: 0 0 0 1px var(--pink-deep); }
.timeline-item:nth-child(3n+2)::before { background: var(--periwinkle); box-shadow: 0 0 0 1px var(--periwinkle); }
.timeline-item:nth-child(3n)::before { background: var(--green-deep); box-shadow: 0 0 0 1px var(--green-deep); }
.timeline-year {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--navy);
  font-weight: 500;
}
.timeline-content h4 {
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--periwinkle-deep);
}
.timeline-item:nth-child(3n+1) .timeline-content h4 { color: var(--pink-deep); }
.timeline-item:nth-child(3n+2) .timeline-content h4 { color: var(--periwinkle-deep); }
.timeline-item:nth-child(3n) .timeline-content h4 { color: var(--green-deep); }
.timeline-content p { color: var(--muted); margin: 0; }

@media (max-width: 700px) {
  .timeline::before { left: 30px; }
  .timeline-item { grid-template-columns: 50px 1fr; gap: 20px; }
  .timeline-item::before { left: 24px; }
}

/* ============== FORMS ============== */
.form-card {
  background: var(--white);
  padding: 50px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.form-group { margin-bottom: 22px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  transition: all 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 0;
  border-color: var(--periwinkle);
  box-shadow: 0 0 0 4px rgba(165, 178, 240, 0.18);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } .form-card { padding: 30px 24px; } }

/* Big choice cards (Apply page) */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 900px;
  margin: 40px auto 0;
}
.choice-card {
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 50px 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}
.choice-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pink-bg);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 0;
}
.choice-card:nth-child(2)::before { background: var(--peri-bg); }
.choice-card > * { position: relative; z-index: 1; }
.choice-card:hover {
  border-color: var(--pink);
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
}
.choice-card:nth-child(2):hover { border-color: var(--periwinkle); }
.choice-card:hover::before { opacity: 1; }
.choice-card .choice-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
}
.choice-card h3 { margin-bottom: 12px; }
.choice-card p { color: var(--muted); margin: 0; }
@media (max-width: 700px) { .choice-grid { grid-template-columns: 1fr; } }

/* ============== QUALIFIER (lead survey — playful interactive flow) ============== */
.qualifier-shell {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
  z-index: 1;
}

/* Circular SVG progress ring */
.qualifier-progress {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 32px;
  display: grid;
  place-items: center;
}
.qualifier-progress .ring {
  position: absolute;
  inset: 0;
  transform: rotate(0);
}
.qualifier-progress .ring-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 4;
}
.qualifier-progress .ring-fill {
  fill: none;
  stroke: url(#progressGradient);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Use periwinkle-deep solid since most browsers won't have the gradient defined */
.qualifier-progress .ring-fill { stroke: var(--periwinkle-deep); }
.qualifier-progress .ring-text {
  display: grid;
  place-items: center;
  line-height: 1;
  text-align: center;
  z-index: 1;
}
.qualifier-progress .ring-text strong {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--navy);
  display: block;
  line-height: 1;
}
.qualifier-progress .ring-text span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
  display: block;
}

/* Reaction toast — appears briefly between steps */
.qreaction {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.85);
  background: linear-gradient(135deg, var(--periwinkle), var(--pink));
  color: var(--navy);
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 14px 36px rgba(165, 178, 240, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}
.qreaction.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Floating background shapes — sit behind the card */
.qshapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.qshape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.45;
  filter: blur(50px);
  animation: qshapeDrift var(--drift, 16s) ease-in-out var(--drift-delay, 0s) infinite;
}
@keyframes qshapeDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(20px, -30px) scale(1.05); }
  66%      { transform: translate(-25px, 20px) scale(0.95); }
}

/* Step container — slide transitions */
.qstep {
  display: none;
  position: relative;
  z-index: 1;
}
.qstep.active {
  display: block;
  animation: qstepIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes qstepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qstep.enter-right {
  animation: qslideInRight 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.qstep.enter-left {
  animation: qslideInLeft 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.qstep.exit-left {
  animation: qslideOutLeft 0.28s cubic-bezier(0.55, 0, 0.7, 0.2) both;
}
.qstep.exit-right {
  animation: qslideOutRight 0.28s cubic-bezier(0.55, 0, 0.7, 0.2) both;
}
@keyframes qslideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes qslideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes qslideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-30px); }
}
@keyframes qslideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(30px); }
}

/* Big emoji header for each step */
.qstep-emoji {
  font-size: 3.2rem;
  line-height: 1;
  text-align: center;
  margin-bottom: 18px;
  display: block;
  animation: emojiBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes emojiBounce {
  0%   { transform: scale(0) rotate(-25deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.qstep .step-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--periwinkle-deep);
  margin-bottom: 14px;
  display: block;
  text-align: center;
}
.qstep h2 {
  margin-bottom: 14px;
  text-align: center;
}
.qstep .helper {
  color: var(--muted);
  margin-bottom: 32px;
  text-align: center;
  font-size: 15px;
}

/* Option list — custom radio styling with bounce */
.option-list { display: grid; gap: 12px; }
.option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease,
              background 0.2s ease,
              box-shadow 0.25s ease;
  font-size: 15.5px;
  position: relative;
  overflow: hidden;
}
.option::before {
  /* Soft pastel hover wash */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--pink-bg), var(--peri-bg));
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 0;
}
.option > * { position: relative; z-index: 1; }
.option:hover {
  border-color: var(--periwinkle);
  transform: translateX(4px);
}
.option:hover::before { opacity: 1; }
.option input {
  accent-color: var(--periwinkle-deep);
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.option.selected {
  border-color: var(--periwinkle-deep);
  background: linear-gradient(135deg, var(--pink-bg), var(--peri-bg));
  box-shadow: 0 0 0 4px rgba(165, 178, 240, 0.22),
              0 12px 28px rgba(165, 178, 240, 0.25);
  animation: optionPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes optionPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Particle burst on option select */
.option-sparks {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9999;
}
.option-sparks span {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: sparkOut 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes sparkOut {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* Input shake on validation error */
.input-shake {
  animation: shakeX 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  border-color: #e85a5a !important;
  box-shadow: 0 0 0 4px rgba(232, 90, 90, 0.15) !important;
}
@keyframes shakeX {
  10%, 90%   { transform: translateX(-2px); }
  20%, 80%   { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60%   { transform: translateX(8px); }
}

/* Confetti burst on completion */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: 35%;
  border-radius: 2px;
  opacity: 0.95;
  animation: confettiFall var(--dur) cubic-bezier(0.22, 1, 0.36, 1) var(--delay) forwards;
}
@keyframes confettiFall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* Nav buttons */
.qualifier-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 36px;
  gap: 16px;
}
.qualifier-nav .btn { padding: 14px 28px; }

.qresult {
  text-align: center;
  padding: 30px 0;
}
.qresult-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--green-bg);
  border: 1px solid var(--green-deep);
  border-radius: 100px;
  color: var(--green-deep);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.qresult-badge.medium {
  background: var(--peri-bg);
  border-color: var(--periwinkle-deep);
  color: var(--periwinkle-deep);
}
.qresult-badge.low {
  background: var(--pink-bg);
  border-color: var(--pink-deep);
  color: var(--pink-deep);
}
.qresult h2 { margin-bottom: 16px; }
.qresult p.summary { font-size: 1.15rem; color: var(--muted); max-width: 540px; margin: 0 auto 32px; }
.qresult-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 36px 0;
  text-align: center;
}
.qresult-stat {
  padding: 22px 14px;
  border-radius: 12px;
  background: var(--off-white);
}
.qresult-stats > div:nth-child(1) { background: var(--pink-bg); }
.qresult-stats > div:nth-child(2) { background: var(--peri-bg); }
.qresult-stats > div:nth-child(3) { background: var(--green-bg); }
.qresult-stat strong {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--navy);
  display: block;
}
.qresult-stat span { font-size: 13px; color: var(--muted); }

/* Utility */
.text-center { text-align: center; }
.mt-32 { margin-top: 32px; }

/* ===================================================
   MOTION LAYER — added on top of the static styles
   =================================================== */

/* ============== SCROLL REVEAL ============== */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: scale(0.92); }
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* ============== HERO WORD STAGGER ============== */
.hero-text h1 .word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s ease;
  transition-delay: var(--word-delay, 0ms);
}
.hero-text h1.is-revealed .word-reveal {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* When em is wrapped as a single word-reveal unit, the existing em gradient
   styling already applies — no override needed. */

/* ============== SPARKLES ============== */
.sparkle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.sparkle {
  position: absolute;
  display: inline-block;
  width: var(--sparkle-size, 12px);
  height: var(--sparkle-size, 12px);
  animation: sparkleFloat var(--sparkle-dur, 6s) ease-in-out infinite;
  animation-delay: var(--sparkle-delay, 0s);
  filter: drop-shadow(0 0 8px currentColor);
}
.sparkle svg { width: 100%; height: 100%; display: block; }
@keyframes sparkleFloat {
  0%, 100% { transform: translateY(0) scale(0.85) rotate(0deg); opacity: 0.5; }
  50%      { transform: translateY(-22px) scale(1.1) rotate(180deg); opacity: 1; }
}

/* ============== SCROLL PROGRESS BAR ============== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--pink), var(--periwinkle), var(--green));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 200;
  pointer-events: none;
}

/* ============== HEADER SHRINK / GLASS ============== */
.site-header { transition: all 0.3s ease; }
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 30px rgba(20, 33, 61, 0.06);
}
.site-header.scrolled .nav { padding: 12px 24px; }
.site-header.scrolled .nav-logo img { height: 32px; }

/* ============== CARDS — TILT BASE ============== */
.card-tilt {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease;
  will-change: transform;
}
/* Disable the static hover translate on cards that now use tilt */
.feature-card.card-tilt:hover,
.case-card.card-tilt:hover,
.choice-card.card-tilt:hover { transform: none; }

/* ============== BUTTONS — MAGNETIC ============== */
.btn-magnetic {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease !important;
  will-change: transform;
}

/* Subtle ripple-pulse on primary CTAs */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  z-index: 0;
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary > * { position: relative; z-index: 1; }

/* ============== HERO BADGE FLOAT ============== */
.hero-badge {
  animation: badgeFloat 5s ease-in-out infinite;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.hero-badge.bobble { animation: badgeBobble 0.45s ease; }
@keyframes badgeBobble {
  0%   { transform: translateY(-10px) scale(1); }
  40%  { transform: translateY(-18px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

/* ============== POLAROID SCROLL SWAY ============== */
.polaroid {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.polaroid:nth-child(odd)  { transform: rotate(calc(-2deg + var(--sway, 0deg))); }
.polaroid:nth-child(even) { transform: rotate(calc(2deg  + var(--sway, 0deg))) translateY(10px); }
.polaroid:nth-child(3n)   { transform: rotate(calc(-1deg + var(--sway, 0deg))) translateY(-8px); }
.polaroid:hover           { transform: scale(1.06) rotate(0) !important; z-index: 2; }

/* ============== VENUE-OWNED WEBSITES — browser-mockup preview ============== */
.ownership {
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.ownership::before {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  background: var(--green);
  opacity: 0.22;
  filter: blur(100px);
  border-radius: 50%;
  top: -120px; right: -100px;
  pointer-events: none;
}
.ownership::after {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  background: var(--pink);
  opacity: 0.18;
  filter: blur(100px);
  border-radius: 50%;
  bottom: -120px; left: -80px;
  pointer-events: none;
}
.ownership .container { position: relative; }

.ow-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: center;
}

/* Left: text + ownership list + CTA */
.ow-text h2 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  margin: 12px 0 20px;
}
.ow-text > p {
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 28px;
}
.ow-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 12px;
}
.ow-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--navy);
  font-weight: 500;
}
.ow-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  position: relative;
}
.ow-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--green-deep);
  border-bottom: 2px solid var(--green-deep);
  transform: translate(0, -1px) rotate(-45deg);
}
.ow-list li:nth-child(2) .ow-dot { background: var(--periwinkle); }
.ow-list li:nth-child(2) .ow-dot::after { border-color: var(--periwinkle-deep); }
.ow-list li:nth-child(3) .ow-dot { background: var(--pink); }
.ow-list li:nth-child(3) .ow-dot::after { border-color: var(--pink-deep); }
.ow-list li:nth-child(4) .ow-dot { background: var(--aqua); }
.ow-list li:nth-child(4) .ow-dot::after { border-color: var(--aqua-deep); }

/* Right: browser mockup */
.ow-mockup {
  position: relative;
  perspective: 1400px;
}
.ow-window {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow:
    0 40px 80px rgba(17, 24, 51, 0.16),
    0 12px 24px rgba(17, 24, 51, 0.06);
  overflow: hidden;
  transform: rotate(-1.5deg);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.ow-mockup:hover .ow-window {
  transform: rotate(0deg);
}

/* Browser chrome */
.ow-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--off-white);
  border-bottom: 1px solid var(--line);
}
.ow-dots { display: flex; gap: 6px; }
.ow-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f6cdcc;
}
.ow-dots span:nth-child(2) { background: #ffe7a8; }
.ow-dots span:nth-child(3) { background: #c7e9c0; }
.ow-url {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  margin-left: auto;
}
.ow-url svg { width: 12px; height: 12px; color: var(--green-deep); }
.ow-url span { font-family: var(--body); }

/* Mock venue website page */
.ow-page {
  background: var(--white);
}
.ow-page-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.ow-page-logo {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--navy);
  margin-right: auto;
}
.ow-page-link {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.ow-page-cta {
  background: var(--navy);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}

/* Hero of the mock venue site — full-bleed image, no side gaps */
.ow-hero {
  position: relative;
  height: 280px;
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.ow-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
}
.ow-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(17, 24, 51, 0.7) 0%, rgba(17, 24, 51, 0.2) 55%, transparent 100%),
    linear-gradient(180deg, transparent 50%, rgba(17, 24, 51, 0.5) 100%);
  z-index: 1;
}
.ow-hero-text {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
  color: var(--white);
  z-index: 2;
}
/* Decorative "next tour" floating chip on the mockup hero */
.ow-hero::after {
  content: 'Next tour · Sat 2pm';
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(17, 24, 51, 0.15);
}
.ow-eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 8px;
}
.ow-hero-text h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.ow-hero-text p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 14px;
}
.ow-hero-btn {
  background: var(--white);
  color: var(--navy);
  border: 0;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
}

/* Stat strip beneath the mock hero */
.ow-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 16px 22px;
  border-top: 1px solid var(--line);
}
.ow-strip > div { text-align: center; }
.ow-strip strong {
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--navy);
  line-height: 1;
}
.ow-strip span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* Floating annotation tags */
.ow-tag {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 14px 8px 10px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 14px 28px rgba(17, 24, 51, 0.12);
  z-index: 3;
  white-space: nowrap;
}
.ow-tag strong {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  color: var(--navy);
  line-height: 1.1;
}
.ow-tag em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.ow-tag-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
/* Position + colour per tag */
.ow-tag-1 { top: 14px; left: -32px; animation: owFloat 6s ease-in-out infinite; }
.ow-tag-1 .ow-tag-dot { background: var(--green-deep); box-shadow: 0 0 0 4px var(--green-bg); }
.ow-tag-2 { bottom: 110px; right: -36px; animation: owFloat 7s ease-in-out 1s infinite; }
.ow-tag-2 .ow-tag-dot { background: var(--pink-deep); box-shadow: 0 0 0 4px var(--pink-bg); }
.ow-tag-3 { bottom: 18px; left: -28px; animation: owFloat 8s ease-in-out 0.5s infinite; }
.ow-tag-3 .ow-tag-dot { background: var(--periwinkle-deep); box-shadow: 0 0 0 4px var(--peri-bg); }
@keyframes owFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Responsive */
@media (max-width: 1000px) {
  .ow-grid { grid-template-columns: 1fr; gap: 56px; }
  .ow-mockup { max-width: 560px; margin: 0 auto; }
  .ow-tag-1, .ow-tag-3 { left: 8px; }
  .ow-tag-2 { right: 8px; }
}
@media (max-width: 600px) {
  .ow-window { transform: rotate(0); }
  .ow-tag { display: none; }
  .ow-hero-text h3 { font-size: 1.3rem; }
}

/* ============== STARS — TWINKLE (twinkle now applied to the injected SVGs) ============== */
.stars svg {
  animation: starTwinkle 3s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 4px var(--periwinkle)); }
}

/* ============== FAQ — soft slide on open ============== */
.faq-item .faq-answer-inner {
  transform: translateY(-6px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.faq-item.open .faq-answer-inner {
  transform: translateY(0);
  opacity: 1;
}

/* ============== PROCESS — phase number glow on reveal ============== */
.phase.is-revealed .phase-num {
  animation: numPop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes numPop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* ============== CTA BLOCK — slow zoom on bg ============== */
.cta-block::before {
  animation: ctaZoom 18s ease-in-out infinite alternate;
}
@keyframes ctaZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* ============== CASE CARD — image ken-burns on hover ============== */
.case-card-image img { transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.case-card:hover .case-card-image img { transform: scale(1.08); }

/* ============== QUALIFIER — option pulse on selection ============== */
.option.selected {
  animation: optionPulse 0.45s ease;
}
@keyframes optionPulse {
  0%   { box-shadow: 0 0 0 0 rgba(165, 178, 240, 0.5); }
  100% { box-shadow: 0 0 0 12px rgba(165, 178, 240, 0); }
}

/* ============== SPLIT IMAGE — soft float ============== */
.split-image {
  animation: splitFloat 7s ease-in-out infinite;
}
@keyframes splitFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ============== PAGE HEADER — gentle gradient drift ============== */
.page-header::before {
  animation: blobDrift 16s ease-in-out infinite;
}
.page-header::after {
  animation: blobDrift 16s ease-in-out infinite reverse;
  animation-delay: -8s;
}

/* ============== LAYERED HERO PARALLAX ============== */
/* Uses the `translate` CSS property so it composes cleanly with the
   `transform`-based cursor tracking already applied to the blobs. */
.hero-image {
  translate: 0 var(--parallax-image-y, 0);
  scale: var(--parallax-image-scale, 1);
  transition: translate 0.05s linear, scale 0.05s linear;
}
.hero-badge {
  translate: 0 var(--parallax-badge-y, 0);
  /* badgeFloat animation still applies via transform */
}
.hero-text {
  translate: 0 var(--parallax-text-y, 0);
  transition: translate 0.05s linear;
}
.hero::before {
  translate: 0 var(--parallax-blob1-y, 0);
  transition: translate 0.05s linear, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero::after {
  translate: 0 var(--parallax-blob2-y, 0);
  transition: translate 0.05s linear, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scroll cue — sits at the very bottom edge of the hero, away from the
   £4M+ badge that overlaps the image's bottom-left corner */
.scroll-cue {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--periwinkle-deep);
  opacity: var(--cue-opacity, 0.7);
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
/* Hide the scroll cue on narrow viewports where it overlaps the badge */
@media (max-width: 900px) {
  .scroll-cue { display: none; }
}
.scroll-cue .cue-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--periwinkle-deep), transparent);
  animation: cueDrop 2.4s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes cueDrop {
  0%   { transform: scaleY(0.2); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.2) translateY(20px); opacity: 0; }
}

/* ============== PAGE TRANSITION — smooth gradient wipe ============== */
/* Enter overlay is a CSS pseudo-element so it covers from the very first
   painted frame (no flash of the page before it is covered). The leave
   overlay is injected by JS on internal link clicks. Both share the same
   gradient + easing, so the wipe reads as one continuous upward motion. */
.page-wipe,
body::after {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, var(--pink) 0%, var(--periwinkle) 48%, var(--green) 100%);
  pointer-events: none;
  will-change: clip-path;
}
body::after {                 /* enter: full cover, then slides up and out the top */
  content: '';
  animation: ptReveal 0.62s cubic-bezier(0.76, 0, 0.24, 1) both;
}
.page-wipe {                  /* leave: rises from the bottom to a full cover */
  animation: ptCover 0.5s cubic-bezier(0.76, 0, 0.24, 1) both;
}
@keyframes ptReveal {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 100% 0); }
}
@keyframes ptCover {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  .page-wipe, .scroll-cue { display: none !important; }
  body::after { display: none !important; }
}


/* ---- Case study video embed (responsive YouTube) ---- */
.cs-video{position:relative;width:100%;max-width:760px;margin:8px auto 36px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--navy);box-shadow:0 18px 44px rgba(17,24,51,0.18);}
.cs-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.cs-video.is-short{max-width:340px;aspect-ratio:9/16;}
@media (max-width:520px){.cs-video.is-short{max-width:260px;}}

/* ============================================================= */
/*  Case study cards — clean redesign (scoped to #csBento)        */
/* ============================================================= */
#csBento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:22px;}
#csBento .cs-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;box-shadow:0 4px 16px rgba(17,24,51,0.05);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .3s ease;}
#csBento .cs-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(17,24,51,0.13);border-color:transparent;}
#csBento .cs-card.is-hidden{display:none;}

#csBento .cs-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--off-white);}
#csBento .cs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1);}
#csBento .cs-card:hover .cs-media img{transform:scale(1.05);}

#csBento .cs-tag{position:absolute;top:13px;left:13px;z-index:2;margin:0;display:inline-block;background:rgba(255,255,255,0.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--navy);font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:6px 12px;border-radius:100px;border:none;box-shadow:0 2px 8px rgba(17,24,51,0.13);}
#csBento .cs-pink  .cs-tag{color:var(--pink-deep);}
#csBento .cs-peri  .cs-tag{color:var(--periwinkle-deep);}
#csBento .cs-green .cs-tag{color:var(--green-deep);}
#csBento .cs-aqua  .cs-tag{color:var(--aqua-deep);}
#csBento .cs-navy  .cs-tag{color:var(--navy);}

#csBento .cs-body{display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px;flex:1;}
#csBento .cs-body h3{font-family:var(--sans);font-size:1.18rem;font-weight:700;color:var(--navy);line-height:1.25;margin:0;letter-spacing:-0.01em;}
#csBento .cs-result{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:-1px 0 1px;}
#csBento .cs-result strong{font-family:var(--sans);font-weight:800;font-size:1.4rem;line-height:1;letter-spacing:-0.02em;color:var(--navy);}
#csBento .cs-result span{font-size:12px;color:var(--muted);font-weight:500;}
#csBento .cs-pink  .cs-result strong{color:var(--pink-deep);}
#csBento .cs-peri  .cs-result strong{color:var(--periwinkle-deep);}
#csBento .cs-green .cs-result strong{color:var(--green-deep);}
#csBento .cs-aqua  .cs-result strong{color:var(--aqua-deep);}
#csBento .cs-navy  .cs-result strong{color:var(--navy);}
#csBento .cs-blurb{font-family:var(--body);font-size:0.88rem;line-height:1.55;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#csBento .cs-cta{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--navy);transition:gap .3s ease,color .3s ease;}
#csBento .cs-card:hover .cs-cta{gap:11px;color:var(--periwinkle-deep);}

@media (max-width:1000px){ #csBento{grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ #csBento{grid-template-columns:1fr;gap:18px;} }

/* ============== ABOUT PAGE — engaging stat cards ============== */
.about-stats{padding:64px 0;background:var(--white);}
.about-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.about-stat{position:relative;overflow:hidden;padding:26px 26px 24px;border-radius:20px;background:var(--pink-bg);border:1px solid rgba(17,24,51,0.05);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;}
.about-stat::after{content:"";position:absolute;top:-46px;right:-46px;width:132px;height:132px;border-radius:50%;background:rgba(255,255,255,0.45);}
.about-stat:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(17,24,51,0.10);}
.about-stat>*{position:relative;z-index:1;}
.as-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,0.72);margin-bottom:16px;}
.as-ic svg{width:23px;height:23px;}
.about-stat strong{display:block;font-family:var(--sans);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.5rem);letter-spacing:-0.02em;line-height:1;margin-bottom:8px;color:var(--navy);}
.as-label{font-size:12.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.as-pink{background:var(--pink-bg);}  .as-pink .as-ic{color:var(--pink-deep);}        .as-pink strong{color:var(--pink-deep);}
.as-peri{background:var(--peri-bg);}  .as-peri .as-ic{color:var(--periwinkle-deep);}  .as-peri strong{color:var(--periwinkle-deep);}
.as-green{background:var(--green-bg);} .as-green .as-ic{color:var(--green-deep);}       .as-green strong{color:#5fa83f;}
.as-aqua{background:var(--aqua-bg);}  .as-aqua .as-ic{color:var(--aqua-deep);}         .as-aqua strong{color:var(--aqua-deep);}
@media (max-width:820px){.about-stats-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.about-stats-grid{grid-template-columns:1fr;}}

/* ============== COOKIE CONSENT BANNER ============== */
.cookie-banner{position:fixed;left:24px;right:24px;bottom:24px;z-index:9999;max-width:560px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;background:var(--navy);color:#fff;padding:18px 22px;border-radius:16px;box-shadow:0 22px 54px rgba(17,24,51,0.38);opacity:0;transform:translateY(22px);transition:opacity .4s ease,transform .45s cubic-bezier(.22,1,.36,1);}
.cookie-banner.is-in{opacity:1;transform:none;}
.cookie-banner p{margin:0;flex:1 1 240px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,0.86);}
.cookie-banner a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.cookie-actions{display:flex;gap:10px;flex:0 0 auto;}
.cookie-btn{font-family:var(--sans);font-size:13px;font-weight:600;padding:9px 20px;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.cookie-accept{background:#fff;color:var(--navy);}
.cookie-accept:hover{background:var(--periwinkle);}
.cookie-decline{background:transparent;color:rgba(255,255,255,0.82);border-color:rgba(255,255,255,0.28);}
.cookie-decline:hover{color:#fff;border-color:rgba(255,255,255,0.6);}
@media (max-width:600px){
  .cookie-banner{display:block;left:0;right:0;bottom:0;max-width:none;margin:0;border-radius:16px 16px 0 0;padding:16px 18px calc(16px + env(safe-area-inset-bottom, 0px));box-shadow:0 -10px 40px rgba(17,24,51,0.28);}
  .cookie-banner p{margin:0 0 13px;}
  .cookie-actions{display:flex;width:100%;gap:10px;}
  .cookie-btn{flex:1;padding:12px 18px;}
}


/* ============ line-icon graphics (replaced emoji) ============ */
.feature-icon svg.ico { width: 28px; height: 28px; }
.feature-icon .fi-num { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1; }
.bento-corner svg.ico { width: 22px; height: 22px; }
.bento-pink  .bento-corner { color: var(--pink-deep); }
.bento-green .bento-corner { color: var(--green-deep); }
.bento-peri  .bento-corner { color: var(--periwinkle-deep); }
.bento-sky   .bento-corner { color: #57b0a2; }
.vf-feat-icon svg.ico { width: 24px; height: 24px; }
.vf-feat-pink  { color: var(--pink-deep); }
.vf-feat-peri  { color: var(--periwinkle-deep); }
.vf-feat-green { color: var(--green-deep); }
.vf-feat-sky   { color: #57b0a2; }
.vf-float svg.ico { width: 14px; height: 14px; vertical-align: -2.5px; margin-right: 2px; }
.vf-float-1 svg.ico { color: var(--periwinkle-deep); }
.vf-float-2 svg.ico { color: #e0a43b; }
.vf-float-3 svg.ico { color: var(--green-deep); }
.bell svg.ico { width: 18px; height: 18px; vertical-align: -3.5px; }

/* ============ HERO — VenueFlow product visual (replaces couple photo) ============ */
.hero-app{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  box-shadow:0 30px 60px rgba(17,24,51,.14), 0 6px 14px rgba(17,24,51,.06);
  translate:0 var(--parallax-image-y, 0);
  transition:translate .05s linear;
}
.ha-bar{display:flex;align-items:center;gap:7px;padding:0 2px 14px;border-bottom:1px solid var(--line);}
.ha-bar > span{width:10px;height:10px;border-radius:50%;background:#e2e0ee;}
.ha-bar em{margin-left:8px;font-style:normal;font-weight:600;font-size:13.5px;color:var(--navy);}
.ha-live{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:var(--green-deep);background:var(--green-bg);padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;}
.ha-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green-deep);animation:haPulse 1.7s ease-in-out infinite;}
@keyframes haPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.ha-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 0;}
.ha-stats > div{background:var(--off-white);border:1px solid var(--line);border-radius:12px;padding:12px;}
.ha-stats strong{font-family:var(--serif);font-size:1.5rem;color:var(--navy);display:block;line-height:1;}
.ha-stats small{font-size:11px;color:var(--muted);display:block;margin-top:7px;}
.ha-feed-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:2px 0 2px;}
.ha-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line);}
.ha-feed-head + .ha-row{border-top:none;}
.ha-ava{width:32px;height:32px;border-radius:50%;background:var(--peri-bg);color:var(--periwinkle-deep);font-size:11px;font-weight:600;display:grid;place-items:center;flex-shrink:0;}
.ha-row:nth-child(3) .ha-ava{background:var(--pink-bg);color:var(--pink-deep);}
.ha-row:nth-child(4) .ha-ava{background:var(--green-bg);color:var(--green-deep);}
.ha-row-t{flex:1;min-width:0;}
.ha-row-t strong{display:block;font-size:13px;color:var(--navy);font-weight:600;line-height:1.2;}
.ha-row-t em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.ha-pill{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:20px;flex-shrink:0;}
.ha-pill-pink{background:var(--pink-bg);color:var(--pink-deep);}
.ha-pill-peri{background:var(--peri-bg);color:var(--periwinkle-deep);}
.ha-pill-green{background:var(--green-bg);color:var(--green-deep);}
.hero-chip{
  position:absolute;top:-18px;right:-14px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--line);border-radius:30px;
  padding:9px 15px;font-size:12px;font-weight:600;color:var(--navy);
  box-shadow:0 14px 30px rgba(17,24,51,.13);
  animation:badgeFloat 6s ease-in-out infinite;
}
.hero-chip svg{width:15px;height:15px;color:var(--green-deep);}
@media (max-width:900px){ .hero-chip{ right:8px; } }
.hero-app{ padding-bottom:22px; }
.hero-badge{ bottom:-44px; left:-12px; }
.hero-app{ padding-bottom:34px; }
.hero-badge{ bottom:-52px; left:-10px; padding:13px 20px; gap:12px; animation:badgeFloatSm 6s ease-in-out infinite; }
.hero-badge::before{ height:34px; }
.hero-badge strong{ font-size:1.6rem; }
@keyframes badgeFloatSm{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ============ CASE STUDY DETAIL v2 ============ */
.cs2-stats-wrap{ padding: 50px 0 6px; }
.cs2-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cs2-stat{ border-radius:18px; padding:24px 22px; }
.cs2-stat strong{ display:block; font-family:var(--sans); font-weight:700; font-size:clamp(1.6rem,2.6vw,2.3rem); color:var(--navy); line-height:1; letter-spacing:-0.02em; }
.cs2-stat span{ display:block; margin-top:10px; font-size:13px; line-height:1.4; color:var(--navy); opacity:.65; }
.cs2-stat--pink{ background:var(--pink-bg); } .cs2-stat--peri{ background:var(--peri-bg); }
.cs2-stat--green{ background:var(--green-bg); } .cs2-stat--sky{ background:#edf8f5; }
@media(max-width:720px){ .cs2-stats{ grid-template-columns:repeat(2,1fr); } }

.cs2-figure-wrap{ padding:34px 0 6px; }
.cs2-figure{ margin:0; border-radius:22px; overflow:hidden; aspect-ratio:16/9; box-shadow:0 30px 60px rgba(17,24,51,.14), 0 6px 14px rgba(17,24,51,.06); }
.cs2-figure img{ width:100%; height:100%; object-fit:cover; display:block; }

.cs2-body{ padding:44px 0 6px; }
.cs2-block{ margin-bottom:46px; }
.cs2-block:last-child{ margin-bottom:0; }
.cs2-tag{ display:flex; align-items:center; gap:14px; font-family:var(--sans); font-weight:700; font-size:1.35rem; color:var(--navy); margin-bottom:14px; letter-spacing:-0.01em; }
.cs2-tag i{ flex:0 0 auto; font-style:normal; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--peri-bg); color:var(--periwinkle-deep); font-size:15px; font-weight:700; }
.cs2-intro{ font-size:1.1rem; color:var(--ink); line-height:1.7; margin:0 0 18px; }
.cs2-list{ list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.cs2-list li{ position:relative; padding-left:30px; color:var(--muted); line-height:1.65; }
.cs2-list li::before{ content:''; position:absolute; left:4px; top:9px; width:9px; height:9px; border-radius:50%; background:var(--periwinkle); }
.cs2-block--results .cs2-tag i{ background:var(--green-bg); color:var(--green-deep); }
.cs2-block--results .cs2-list li{ padding-left:32px; }
.cs2-block--results .cs2-list li::before{ left:2px; top:2px; width:19px; height:19px; border-radius:0; background:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363a132' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>"); background-size:contain; background-repeat:no-repeat; }

.cs2-quote{ margin:46px 0; padding:40px 40px 32px; background:var(--off-white); border-radius:20px; position:relative; }
.cs2-quote::before{ content:'\201C'; position:absolute; top:14px; left:24px; font-family:var(--sans); font-weight:700; font-size:5.5rem; line-height:1; color:var(--periwinkle); opacity:.5; pointer-events:none; }
.cs2-quote blockquote{ margin:0 0 16px; position:relative; font-family:var(--sans); font-weight:500; font-style:italic; font-size:1.4rem; line-height:1.5; color:var(--navy); }
.cs2-quote figcaption{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--periwinkle-deep); }

.cs2-takeaway{ margin:42px 0 4px; padding:28px 34px; border-radius:18px; background:var(--peri-bg); border-left:4px solid var(--periwinkle-deep); }
.cs2-takeaway-label{ display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--periwinkle-deep); margin-bottom:8px; }
.cs2-takeaway p{ margin:0; font-size:1.18rem; line-height:1.6; color:var(--navy); }

.cs2-videoband{ padding:48px 0 8px; text-align:center; }
.cs2-videoband .eyebrow{ color:var(--periwinkle-deep); }
.cs2-videoband h2{ margin:8px auto 24px; max-width:640px; }
.cs2-videoband .cs-video{ margin-left:auto; margin-right:auto; }

.cs2-back-wrap{ padding:52px 0 76px; text-align:center; }

/* video in a sticky right-hand column (video case studies) */
.cs2-split{ padding:44px 0 6px; }
.cs2-split-grid{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:54px; align-items:start; }
.cs2-split-main{ min-width:0; }
.cs2-side-sticky{ position:sticky; top:100px; }
.cs2-side-sticky .eyebrow{ display:block; color:var(--periwinkle-deep); }
.cs2-side-title{ font-size:1.35rem; line-height:1.25; margin:8px 0 18px; color:var(--navy); }
.cs2-side-sticky .cs-video{ margin:0; max-width:100%; }
.cs2-side-sticky .cs-video.is-short{ max-width:320px; }
@media(max-width:920px){
  .cs2-split-grid{ grid-template-columns:1fr; gap:32px; }
  .cs2-side-sticky{ position:static; }
  .cs2-side-sticky .cs-video.is-short{ margin-left:auto; margin-right:auto; }
}


/* team hover bio — fit long bios without clipping */
.team-bio { justify-content: safe center; overflow-y: auto; padding: 26px 22px 22px; }
.team-bio p { font-size: 12.5px; line-height: 1.45; }
.team-member:hover .team-bio { pointer-events: auto; }
.team-bio::-webkit-scrollbar { width: 4px; }
.team-bio::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }