@font-face {
  font-family: "Florentia ExtraLight";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    local("Florentia ExtraLight"),
    url("../fonts/Florentia-Extralight-trial.woff2") format("woff2"),
    url("../fonts/Florentia-Extralight-trial.woff") format("woff");
}

@font-face {
  font-family: "Florentia ExtraLight";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    local("Florentia ExtraLight"),
    url("../fonts/Florentia-Extralight-trial.woff2") format("woff2"),
    url("../fonts/Florentia-Extralight-trial.woff") format("woff");
}

@font-face {
  font-family: "Florentia Medium";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    local("Florentia Medium"),
    url("../fonts/Florentia-Medium-trial.woff2") format("woff2"),
    url("../fonts/Florentia-Medium-trial.woff") format("woff");
}

@font-face {
  font-family: "Florentia Medium";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    local("Florentia Medium"),
    url("../fonts/Florentia-Medium-trial.woff2") format("woff2"),
    url("../fonts/Florentia-Medium-trial.woff") format("woff");
}

@font-face {
  font-family: "Florentia Bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Florentia Bold"),
    url("../fonts/Florentia-Bold-trial.woff2") format("woff2"),
    url("../fonts/Florentia-Bold-trial.woff") format("woff");
}
@font-face {
  font-family: "Florentia Bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Florentia Bold"),
    url("../fonts/Florentia-Bold-trial.woff2") format("woff2"),
    url("../fonts/Florentia-Bold-trial.woff") format("woff");
}

:root {
  --color-background: #fcfaf6; /* Soft milk ivory background */
  --color-primary: #c2185b; /* Traditional deep Banarasi saree red */
  --color-primary-hover: #d6336c; /* Deeper crimson red hover */
  --color-secondary: #e59d39; /* Warm marigold / gold jewelry accent */
  --color-cta: #346739; /* Rich banana-leaf green */
  --color-cta-hover: #254f22; /* Deeper green hover */

  --color-text-main: #162418; /* Soft charcoal with a hint of warm undertone */
  --color-text-light: #6e6666; /* Soft warm dark grey */
  --color-text-white: #ffffff;

  --color-card-bg: rgba(252, 250, 246, 0.75);
  --color-border: rgba(209, 154, 77, 0.2);

  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-card: 16px;
  --radius-standard: 12px;
  --radius-micro: 10px;
  --radius-button: 14px;
  --radius-pill: 9999px;

  --max-width: 1380px;
}

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

html,
body {
  overflow-x: clip; /* Using clip instead of hidden to prevent horizontal scroll without breaking position: sticky */
  max-width: 100%;
}

body {
  background-color: var(--color-background);
  color: var(--color-text-main);
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo svg {
  height: 28px;
  width: auto;
  display: block;
  color: #ffffff;
}

.navbar.scrolled .logo svg {
  height: 28px;
  width: auto;
  display: block;
  color: var(--color-text-main);
}

h1,
h2,
h3 {
  font-family: "Florentia Medium", serif;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Typography Scale */
h1 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
}
h2 {
  font-size: clamp(32px, 4vw, 40px);
  line-height: 1.2;
}
h3 {
  font-size: clamp(20px, 3vw, 24px);
  line-height: 1.3;
}
p {
  font-size: 16px;
  line-height: 1.7;
}
.caption {
  font-size: 13px;
  line-height: 1.5;
}

/* Blob animation */
@keyframes float-blob {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(40px, -20px) scale(1.1);
    opacity: 0.8;
  }
}

/* Blob Scene — fixed overlay that clips blobs so they never overflow the viewport */
.blob-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.cta-blob {
  position: absolute;
  width: 700px;
  height: 700px;
  background-color: rgba(166, 50, 52, 0.07); /* Banarasi red tint */
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  animation: float-blob 18s ease-in-out infinite;
}

.cta-blob.top-right {
  top: -20%;
  right: -10%;
}

.cta-blob.center {
  top: 30%;
  left: 20%;
  background-color: rgba(209, 154, 77, 0.06); /* Marigold gold tint */
  animation-delay: -5s;
}

.cta-blob.bottom-left {
  bottom: -20%;
  left: -10%;
  background-color: rgba(61, 92, 67, 0.06); /* Banana leaf green tint */
  animation-delay: -10s;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: padding 0.3s ease;
  padding: 24px 0 70px 0;
  background: linear-gradient(
    to bottom,
    rgba(252, 250, 246, 1) 40%,
    rgba(252, 250, 246, 0) 100%
  );
}

.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fcfaf6;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.navbar.scrolled {
  padding: 16px 0;
}

.navbar.scrolled::before {
  opacity: 1;
}

.nav-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo styles consolidated above */

.nav-center {
  display: flex;
  gap: 32px;
}

.nav-link {
  text-decoration: none;
  color: var(--color-text-main);
  font-size: 15px;
  font-weight: 400;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.login-link {
  text-decoration: none;
  color: var(--color-text-main);
  font-size: 15px;
  font-weight: 500;
}
.testimonial-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.testimonial-image-thumb-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.65;
    object-fit: cover;
    overflow: hidden;
    border-radius: var(--radius-micro);
    cursor: pointer;
    border: 1px solid var(--color-border);
}

.testimonial-image-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Base CTA Button */
.primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-primary);
  color: #faf8f4;
  border-radius: 999px;
  padding: 5px 5px 5px 24px;
  height: 50px;
  font-family: "Florentia Medium", serif;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  border: none;
  outline: none;
  cursor: pointer;
  transition:
    background 280ms ease,
    box-shadow 280ms ease;
}

.primary-btn .btn-text {
  position: relative;
  top: 2px;
  flex: 1;
  text-align: center;
}

.primary-btn .icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #faf8f440;
  background: transparent;
  color: #faf8f4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 280ms ease,
    color 280ms ease;
}

.primary-btn .icon-wrap svg path {
  transition: transform 280ms ease;
}

.primary-btn:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 6px 20px rgba(194, 24, 91, 0.2);
}

.primary-btn:hover .icon-wrap {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Secondary Ghost Partner Login Button */
.partner-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-text-main);
  border: 1px solid rgba(22, 36, 24, 0.25);
  border-radius: 999px;
  padding: 0 22px;
  height: 50px;
  font-family: "Florentia Medium", serif;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: all 280ms ease;
  vertical-align: middle;
}

.partner-login-btn:hover {
  background: rgba(22, 36, 24, 0.04);
  border-color: var(--color-text-main);
  color: var(--color-text-main);
}


.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  z-index: 101;
  padding: 8px;
}
.navbar.scrolled .mobile-toggle {
  color: var(--color-text-main);
}

/* Icons inside mobile toggle — CSS-only show/hide, no inline styles needed */
.icon-close {
  display: none;
}

.mobile-toggle.active .icon-hamburger {
  display: none;
}

.mobile-toggle.active .icon-close {
  display: block;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(253, 251, 247, 0.98);
  backdrop-filter: blur(20px);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  clip-path: circle(0px at calc(100% - 45px) 45px);
  visibility: hidden;
  transition:
    clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.5s;
}

.mobile-menu.open {
  clip-path: circle(150% at calc(100% - 45px) 45px);
  visibility: visible;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.mobile-menu .nav-link {
  font-size: 24px;
  font-weight: 500;
}

.mobile-divider {
  width: 90%;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  margin: 16px 0;
}

/* Hero Section */
.hero {
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 5;
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

/* <picture> is only a wrapper for choosing the file (includes/media.php); it
   must not become a layout box of its own, so it is taken out of the flow and
   the <img> keeps behaving exactly as it did when it was a direct child. */
.hero-media picture,
.ab-hero picture {
  display: contents;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Same left-weighted dark scrim as the marketing-page heroes (.ab-hero),
   carried a little heavier because the hero image is bright. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(28, 12, 20, 0.88) 0%,
      rgba(28, 12, 20, 0.7) 42%,
      rgba(28, 12, 20, 0.34) 100%
    ),
    rgba(28, 12, 20, 0.18);
  z-index: 2;
  pointer-events: none;
}

.hero-container {
  max-width: var(--max-width);
  padding: 150px clamp(20px, 4vw, 48px) 90px;
  margin-inline: auto;
  width: 100%;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: flex-start;
}

.hero-content {
  max-width: 820px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.eyebrow-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(166, 50, 52, 0.08);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 24px;
}

.hero-headline {
  display: block;
  margin: 0 0 24px;
  font-weight: 500;
  font-family: "Florentia Medium", serif;
  font-size: clamp(38px, 5.2vw, 66px);
  line-height: 1.08;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
  text-align: left;
  width: 100%;
}

/* Uppercase, letterspaced lead-in — matches .ab-hero-sub. */
.hero-paragraph {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 40px;
  max-width: 560px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(12px, 1.15vw, 14px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
}

/* Search Bar */
.hero-search {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 24px;
  margin-bottom: 48px;
  border: 1px solid rgba(197, 168, 128, 0.35);
  width: 100%;
  max-width: 600px;
  box-shadow: 0 12px 36px rgba(22, 36, 24, 0.05);
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.hero-search:focus-within {
  box-shadow: 0 16px 48px rgba(209, 154, 77, 0.12);
  border-color: rgba(209, 154, 77, 0.5);
}

.search-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

/* Custom Dropdown */
.custom-dropdown {
  position: relative;
  cursor: pointer;
  width: 100%;
}

.dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #a0a0a0;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  padding-right: 16px;
  user-select: none;
}

.dropdown-header.selected {
  color: var(--color-text-main);
}

.dropdown-arrow {
  transition: transform 0.3s ease;
  color: #a0a0a0;
}

.custom-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

/* Date Field Wrapper and Icon Styles */
.date-field-wrapper {
  position: relative;
  cursor: pointer;
}

.date-field-wrapper .calendar-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0a0a0;
  pointer-events: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.date-field-wrapper:hover .calendar-icon {
  color: var(--color-primary);
  transform: translateY(-50%) scale(1.05);
}

.hero-date-calendar {
  position: fixed;
  z-index: 200;
  width: min(320px, calc(100vw - 24px));
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(22, 36, 24, 0.14);
  border: 1px solid rgba(197, 168, 128, 0.28);
  padding: 14px 14px 10px;
  font-family: "Poppins", sans-serif;
  color: var(--color-text-main);
}

.hero-date-calendar[hidden] {
  display: none;
}

.hero-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.hero-cal-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero-cal-nav {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-cal-nav:hover {
  background: rgba(209, 154, 77, 0.12);
}

.hero-cal-weekdays,
.hero-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.hero-cal-weekdays span {
  font-size: 11px;
  font-weight: 600;
  color: #a0a0a0;
  text-align: center;
  padding: 6px 0;
}

.hero-cal-day {
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-main);
  cursor: pointer;
}

.hero-cal-day:hover:not(:disabled):not(.is-empty) {
  background: rgba(209, 154, 77, 0.12);
}

.hero-cal-day.is-empty {
  cursor: default;
}

.hero-cal-day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1px rgba(166, 50, 52, 0.35);
}

.hero-cal-day.is-selected {
  background: var(--color-primary);
  color: #ffffff;
}

.hero-cal-day:disabled {
  color: #c8c8c8;
  cursor: not-allowed;
}

.hero-cal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #f0f0f0;
}

.hero-cal-footer button {
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 4px;
}

.hero-cal-footer button:hover {
  text-decoration: underline;
}

.dropdown-options {
  position: absolute;
  top: calc(100% + 20px);
  left: -24px;
  right: -24px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
  list-style: none;
  padding: 8px;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 20;
}

.custom-dropdown.open .dropdown-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-options li {
  padding: 6px 16px;
  font-size: 14px;
  color: var(--color-text-light);
  font-family: "Poppins", sans-serif;
  border-radius: 8px;
  transition:
    background 0.2s,
    color 0.2s;
}

.dropdown-options li:hover {
  background: var(--color-background);
  color: var(--color-primary);
}

.search-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-main);
  margin-bottom: 2px;
}

.search-field input {
  border: none;
  outline: none;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-main);
  background: transparent;
  width: 100%;
  cursor: pointer;
}

.search-field input[type="date"]:invalid {
  color: #a0a0a0;
}

.search-field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s;
  padding-right: 12px;
}

.search-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.8;
}

.search-field input::placeholder {
  color: #a0a0a0;
}

.search-divider {
  width: 1px;
  height: 32px;
  background: #eaeaea;
  margin: 0 24px;
}

.search-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
  flex-shrink: 0;
}

.search-btn:hover {
  background: var(--color-primary-hover);
}

/* Social Proof */
.social-proof {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.avatar-stack {
  display: flex;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-background);
  background-color: #e0e0e0;
  margin-left: -12px;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease, margin-left 0.25s ease, box-shadow 0.25s ease;
}

/* Fan the stack apart slightly, then lift the hovered face above its neighbours. */
.avatar-stack:hover .avatar:not(:first-child) {
  margin-left: -6px;
}

.avatar:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .avatar,
  .avatar-stack:hover .avatar:not(:first-child) {
    transition: none;
  }
  .avatar:hover {
    transform: none;
  }
}

.avatar:first-child {
  margin-left: 0;
  background-image: url("https://i.pravatar.cc/100?img=1");
}
.avatar:nth-child(2) {
  background-image: url("https://i.pravatar.cc/100?img=2");
}
.avatar:nth-child(3) {
  background-image: url("https://i.pravatar.cc/100?img=3");
}
.avatar:nth-child(4) {
  background-image: url("https://i.pravatar.cc/100?img=4");
}

.trust-statement {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* Categories Section */
.categories {
  padding: 100px 0 50px 0;
  background-color: var(--color-background);
  position: relative;
  z-index: 5;
}

.categories-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
}

.categories-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 600px;
  margin-inline: auto;
}

.categories-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 12px;
}

.categories-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(32px, 4vw, 42px);
  color: var(--color-text-main);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.categories-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 1.7;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 160px));
  gap: 32px;
  width: 100%;
  justify-content: center;
  justify-items: center;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
}

.category-image-wrap {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  position: relative;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Circular halo line growing from behind the image */
.category-image-wrap::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1.5px solid var(--color-secondary);
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  transform: scale(0.7);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}

.category-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(209, 154, 77, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
  position: relative;
  z-index: 2; /* In front of the background halo */
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s,
    box-shadow 0.4s;
}

.category-card:hover .category-image-wrap::before {
  opacity: 1;
  transform: scale(1);
}

.category-card:hover .category-image-wrap img {
  transform: scale(1.04);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
  border-color: rgba(209, 154, 77, 0.35);
}

.category-card:hover .category-name {
  color: var(--color-primary);
}

.category-name {
  font-family: "Florentia ExtraLight", serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--color-text-main);
  transition: color 0.3s ease;
}

/* Featured Vendors Section */
.vendors {
  padding: 120px 0 80px 0;
  background: linear-gradient(180deg, #fdfcfa 0%, #ffeae5 50%, #f5ebe0 100%);
  position: relative;
  z-index: 5;
  overflow: hidden;
}

/* Premium tactile cardstock paper texture overlay */
.vendors::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22noise%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.75%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23noise%29%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0.08; /* Increased opacity for clear visibility on all displays */
  pointer-events: none;
  z-index: 1;
}

.vendors-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.vendors-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 600px;
  margin-inline: auto;
}

.vendors-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 12px;
}

.vendors-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(32px, 4vw, 42px);
  color: var(--color-text-main);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.vendors-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 1.7;
}

.vendors-slider-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.vendors-grid-wrapper {
  overflow-x: auto;
  scroll-behavior: smooth;
  width: 100%;
  display: block;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  padding: 10px 0;
}

.vendors-grid-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.vendors-grid {
  display: flex;
  gap: 25px;
  width: max-content;
  align-items: stretch; /* Forces equal height for all card slides */
}

.vendor-card {
  width: 295px;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(209, 154, 77, 0.08);
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vendor-card:hover {
  box-shadow: 0 20px 40px rgba(209, 154, 77, 0.06);
  border-color: rgba(209, 154, 77, 0.2);
}

.vendor-image-wrap {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.vendor-image-wrap img {
  width: 100%;
  height: 100%;
  aspect-ratio: 280 / 190;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vendor-card:hover .vendor-image-wrap img {
  transform: scale(1.05);
}

/* Slider Navigation Arrows */
.slider-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(22, 36, 24, 0.12); /* Higher contrast border */
  box-shadow: 0 8px 24px rgba(22, 36, 24, 0.08); /* Deeper, softer shadow */
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  position: absolute;
}

.slider-arrow svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.slider-arrow:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 12px 28px rgba(194, 24, 91, 0.22);
  transform: scale(1.08);
}

.prev-arrow:hover svg {
  transform: translateX(-3px);
}

.next-arrow:hover svg {
  transform: translateX(3px);
}

.prev-arrow {
  left: -23px;
}

.next-arrow {
  right: -23px;
}

@media (min-width: 769px) {
  .vendors-slider-container {
    max-width: calc(100% - 140px);
    margin-inline: auto;
  }
  .prev-arrow {
    left: -66px; /* 46px width + 20px gap = 66px */
  }
  .next-arrow {
    right: -66px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   VENDOR BADGES — one component, used on cards and on vendor profiles.
   Each badge sets --badge-accent; the icon carries the colour and the
   label stays in ink, so a row of badges reads as one family rather
   than as a row of differently coloured pills.
   ══════════════════════════════════════════════════════════════════════ */

.vendor-badge,
.profile-badge-pill {
  --badge-accent: var(--color-primary);
}

.vendor-badge[data-badge="verified"],
.profile-badge-pill[data-badge="verified"] { --badge-accent: #0f9d63; }

.vendor-badge[data-badge="top_rated"],
.profile-badge-pill[data-badge="top_rated"] { --badge-accent: #d9880a; }

.vendor-badge[data-badge="most_popular"],
.profile-badge-pill[data-badge="most_popular"] { --badge-accent: #c2185b; }

.vendor-badge[data-badge="featured"],
.profile-badge-pill[data-badge="featured"] { --badge-accent: #7c5cbf; }

/* Shared icon sizing — badge SVGs come from the admin panel at assorted
   sizes, so the box is pinned here rather than trusted to the markup. */
.vendor-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--badge-accent);
}

.vendor-badge-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

/* ── On a card, over the photograph ─────────────────────────────────── */
.vendor-badges-container {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
}

.vendor-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 10px rgba(22, 36, 24, 0.14);
  font-family: "Poppins", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--color-text-main);
  white-space: nowrap;
  pointer-events: auto;
}

.vendor-badge .vendor-badge-icon {
  width: 12px;
  height: 12px;
}

.vendor-badge-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Roll-up chip when a vendor has more badges than the card can show. */
.vendor-badge--more {
  padding: 5px 8px;
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
}

/* ── On the vendor's own profile, against a light background ────────── */
.profile-badges-section {
  margin-bottom: 24px;
  position: relative;
  z-index: 10;
}

.profile-badges-heading {
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 10px;
}

.profile-badges-row-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-main);
  background: color-mix(in srgb, var(--badge-accent) 7%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--badge-accent) 22%, transparent);
  cursor: help;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.profile-badge-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(22, 36, 24, 0.08);
}

.profile-badge-pill .vendor-badge-icon {
  width: 14px;
  height: 14px;
}

/* Older browsers without color-mix still get a readable tinted pill. */
@supports not (background: color-mix(in srgb, red 50%, white)) {
  .profile-badge-pill {
    background: rgba(252, 250, 246, 0.9);
    border-color: var(--color-border);
  }
}

@media (max-width: 480px) {
  .vendor-badge { font-size: 10px; padding: 4px 8px; }
  .vendor-badge .vendor-badge-icon { width: 11px; height: 11px; }
}

.vendor-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
}

.vendor-card:hover .vendor-hover-overlay {
  opacity: 1;
}

.vendor-profile-btn {
  background: var(--color-primary);
  color: #ffffff;
  text-decoration: none;
  padding: 4px 4px 4px 18px; /* Room for custom circular icon-wrap */
  height: 40px;
  border-radius: var(--radius-pill);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transform: translateY(10px);
  transition:
    background 0.3s,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.vendor-profile-btn .icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition:
    background 0.3s,
    transform 0.3s;
}

.vendor-profile-btn .icon-wrap svg path {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vendor-profile-btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(0) scale(1.04);
}

.vendor-profile-btn:hover .icon-wrap {
  background: rgba(255, 255, 255, 0.25);
}

.vendor-profile-btn:hover .icon-wrap svg path {
  transform: translateX(2px);
}

.vendor-card:hover .vendor-profile-btn {
  transform: translateY(0);
}

.vendor-details {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: #faede98a;
}

.vendor-main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.vendor-name {
  font-family: "Florentia ExtraLight", serif;
  font-size: 16px;
  color: var(--color-text-main);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.vendor-rating {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fcf5f3;
  padding: 6px 12px;
  border-top-left-radius: 12px; /* Rounded top-left corner only */
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 11px; /* Slightly smaller for tab badge */
  font-weight: 600;
  color: var(--color-text-main);
  z-index: 3;
  box-shadow: -2px -2px 10px rgba(0, 0, 0, 0.03); /* Subtle offset shadow */
}

.vendor-rating svg {
  fill: #f59e0b;
  stroke: none;
  display: block;
}

.vendor-category-img-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fcf5f3;
  padding: 4px 10px;
  border-top-right-radius: 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  display: flex;
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--color-text-main);
  z-index: 3;
  box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.03);
}

.vendor-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  color: var(--color-text-light);
  margin-bottom: 18px;
}

.vendor-location svg {
  color: var(--color-primary);
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.vendor-divider {
  border: none;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin-top: auto; /* Push divider and pricing elements to the absolute bottom */
  margin-bottom: 16px;
  width: 100%;
}

.vendor-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vendor-price-wrap {
  display: flex;
  flex-direction: column;
}

.vendor-price-label {
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--color-text-light);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.vendor-price {
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-main);
}

/* Responsive */
@media (max-width: 1200px) {
  .categories {
    padding: 80px 0 70px 0;
  }
  .categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 160px));
    gap: 40px 24px;
    justify-content: center;
  }
  .category-image-wrap {
    max-width: 130px;
  }

  .vendors {
    padding: 80px 0 70px 0;
  }
}

@media (max-width: 992px) {
  .hero-container {
    padding-block: 130px 72px;
  }
  .slider-arrow {
    width: 32px;
    height: 32px;
  }
  .slider-arrow svg {
    width: 14px;
    height: 14px;
  }
  .prev-arrow {
    left: -16px;
  }
  .next-arrow {
    right: -16px;
  }
  .testimonials-slider-controls .slider-arrow-btn {
    width: 32px;
    height: 32px;
  }
  .testimonials-slider-controls .slider-arrow-btn svg {
    width: 14px;
    height: 14px;
  }

  .hero {
    min-height: min(82vh, 700px);
  }

  .hero-container {
    padding-inline: 20px;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .hero-headline {
    display: block;
    font-size: clamp(28px, 7vw, 42px);
    line-height: 1.15;
    width: 100%;
    text-align: center;
  }

  .hero-paragraph {
    max-width: 440px;
    margin-inline: auto;
    text-align: center;
  }

  .hero-search {
    margin-inline: auto;
  }

  .nav-center,
  .nav-right {
    display: none;
  }
  .nav-right{
    margin-left: auto;
    margin-right: 20px;
  }

  .mobile-toggle {
    display: block;
  }

  /* Social Proof */
  .social-proof {
    justify-content: center;
  }

  .categories-header {
    margin-bottom: 50px;
  }
  .mobile-menu-links .primary-btn{
    margin-top: 30px !important;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: min(80vh, 640px);
  }
  .hero-container {
    padding-block: 160px 64px;
  }
  .categories {
    padding: 60px 0 0px 0;
  }
  .categories-header {
    margin-bottom: 40px;
  }

  .vendors {
    padding: 60px 0 0px 0;
  }
  .vendors-header {
    margin-bottom: 40px;
  }
  .slider-arrow {
    display: flex;
    width: 30px;
    height: 30px;
  }
  .slider-arrow svg {
    width: 14px;
    height: 14px;
  }
  .prev-arrow {
    left: 5px;
  }
  .next-arrow {
    right: 5px;
  }
  .testimonials-slider-controls .slider-arrow-btn {
    width: 30px;
    height: 30px;
  }
  .testimonials-slider-controls .slider-arrow-btn svg {
    width: 14px;
    height: 14px;
  }
  .vendors-grid {
    gap: 20px;
  }
  .vendor-card {
    width: 260px;
  }
  .categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 160px));
    gap: 24px 16px;
    justify-content: center;
  }
  .category-image-wrap {
    max-width: 100px;
    margin-bottom: 12px;
  }
  .category-name {
    font-size: 16px;
  }
  .category-count {
    font-size: 12px;
  }

  .hero-headline {
    margin-bottom: 10px;
  }
  .hero-search {
    flex-direction: column;
    border-radius: var(--radius-lg);
    padding: 16px;
    align-items: stretch;
  }
  .search-divider {
    width: 100%;
    height: 1px;
    margin: 12px 0;
  }
  .search-btn {
    width: 100%;
    border-radius: var(--radius-standard);
    margin-top: 16px;
  }

  .hero-paragraph,
  .hero-search {
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
.nav-right{
  display: none !important;
}
}

@media (min-width: 993px) {
  .cta-blob {
    width: 1000px;
    height: 1000px;
    filter: blur(150px);
    background-color: rgba(
      166,
      50,
      52,
      0.14
    ); /* Visually engaging Banarasi red */
  }
  .cta-blob.center {
    background-color: rgba(
      209,
      154,
      77,
      0.11
    ); /* Visually engaging marigold gold */
  }
  .cta-blob.bottom-left {
    background-color: rgba(
      61,
      92,
      67,
      0.1
    ); /* Visually engaging banana leaf green */
  }
}

/* Discover Section */
.discover-section {
  padding: 100px 0 120px 0;
  background: linear-gradient(180deg, #f5ebe0 0%, #faede98a 50%, #ffffff 100%);
  position: relative;
  z-index: 5;
  overflow: hidden;
}

/* Premium tactile cardstock paper texture overlay */
.discover-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22noise%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.75%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23noise%29%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0.08; /* Consistent with Featured Vendors texture visibility */
  pointer-events: none;
  z-index: 1;
}

.discover-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.discover-header {
  text-align: center;
  margin-bottom: 50px;
  max-width: 650px;
  margin-inline: auto;
}

.discover-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 12px;
}

.discover-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(32px, 4vw, 42px);
  color: var(--color-text-main);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.discover-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* Tab Container and Buttons */
.tab-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 50px;
}

.tab-btn {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-main);
  background: #ffffff;
  border: 1px solid rgba(22, 36, 24, 0.12); /* High contrast border standard */
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(22, 36, 24, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(166, 50, 52, 0.12);
}

.tab-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(166, 50, 52, 0.22);
}

/* Tab Panels */
.tab-panels {
  position: relative;
  width: 100%;
  /* overflow is toggled to hidden by JS only during the height transition;
     keeping it visible at rest prevents card hover-lift shadows from being
     clipped along the top/bottom edges of the grid. */
}

.tab-panel {
  display: none;
  width: 100%;
}

.tab-panel.active {
  display: block;
}

.discover-card {
  width: 100% !important; /* Stretch cards inside grid cells */
  flex-shrink: 1 !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Discover Grid & Card Sizing */
.discover-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  width: 100%;
}

/* Responsive Design for Discover Grid */
@media (max-width: 1200px) {
  .discover-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
}

@media (max-width: 992px) {
  .discover-section {
    padding: 80px 0 0 0;
  }
  .discover-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .tab-container {
    margin-bottom: 40px;
    gap: 8px;
  }
  .tab-btn {
    font-size: 13px;
    padding: 8px 20px;
  }
}

@media (max-width: 576px) {
  .discover-section {
    padding: 60px 0 0 0;
  }
  .discover-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .tab-btn {
    font-size: 12px;
    padding: 6px 16px;
  }
}

/* How Milanzo Works Section */
.process-section {
  padding: 60px 0 100px 0;
  background: linear-gradient(180deg, #ffffff 0%, #faf5ef 50%, #ffeae5 100%);
  position: relative;
  z-index: 5;
  overflow: hidden;
}


/* Premium tactile cardstock paper texture overlay */
.process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22noise%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.75%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23noise%29%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

.process-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.process-grid-container {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

/* Left Sticky Column */
.process-left {
  flex: 1 1 42%;
  position: sticky;
  top: 140px;
  align-self: start;
}

.process-left .process-header {
  text-align: left;
  margin-bottom: 40px;
}

.process-left .process-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 12px;
}

.process-left .process-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(32px, 4vw, 42px);
  color: var(--color-text-main);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.process-left .process-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* Vertical progress indicator */
.process-progress-steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 50px;
  position: relative;
  padding-left: 24px;
}

.process-progress-steps::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: rgba(209, 154, 77, 0.15);
}

.process-progress-indicator-line {
  position: absolute;
  left: 0;
  width: 2px;
  height: 38px; /* Height of one indicator block */
  background: var(--color-primary);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(166, 50, 52, 0.45);
  transform-origin: top;
}

.progress-step-indicator {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0.35;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
  transform: translateX(0);
}

.progress-step-indicator.active {
  opacity: 1;
  transform: translateX(4px);
}

.progress-step-indicator:hover {
  opacity: 0.8;
}

.progress-step-indicator .indicator-num {
  font-family: "Florentia Medium", serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1;
}

.progress-step-indicator .indicator-label {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-main);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.process-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-preview-img.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.process-preview-wrap:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 20px 40px rgba(166, 50, 52, 0.12);
}

/* Right Cards Column - Compact Redesign */
.process-right {
  flex: 1 1 58%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.process-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.process-card-item {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(209, 154, 77, 0.1);
  border-radius: var(--radius-xl);
  padding: 22px 28px; /* Tighter padding for compact look */
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: default;
  opacity: 0.45;
  transform: scale(0.98);
}

.process-card-item.active {
  background: #ffffff;
  border-color: rgba(209, 154, 77, 0.3);
  box-shadow: 0 15px 35px rgba(209, 154, 77, 0.06);
  opacity: 1;
  transform: scale(1.01) translateX(8px); /* Shorter slide animation */
}

.process-card-header {
  display: flex;
  align-items: center;
  gap: 16px; /* Tighter gap */
  margin-bottom: 12px;
}

.process-card-icon {
  width: 48px; /* Compact icon wrap */
  height: 48px;
  border-radius: 50%;
  background: #fdf5f3;
  border: 1px solid rgba(209, 154, 77, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-card-icon svg {
  width: 18px; /* Smaller icon */
  height: 18px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-card-item.active .process-card-icon {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 6px 16px rgba(166, 50, 52, 0.22);
}

.process-card-item.active .process-card-icon svg {
  transform: scale(1.1) rotate(5deg);
}

.process-card-title {
  font-family: "Florentia ExtraLight", serif;
  font-size: 18px; /* Slightly smaller header */
  font-weight: 600;
  color: var(--color-text-main);
  letter-spacing: 0.02em;
  position: relative;
}

.process-card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1.5px;
  background: var(--color-primary);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-card-item.active .process-card-title::after {
  width: 30px;
}

.process-card-body {
  padding-left: 64px; /* Tighter left align match */
}

.process-card-body p {
  font-family: "Poppins", sans-serif;
  font-size: 16px; /* Slightly smaller description text */
  color: var(--color-text-light);
  line-height: 1.65;
  margin: 0;
}

.process-cta-wrap.desktop-only {
  display: inline-flex;
  margin-top: 40px;
  padding-left: 24px;
  text-align: left;
}

.process-cta-wrap.mobile-only {
  display: none;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .process-section {
    padding: 45px 0 70px 0;
  }

  .process-grid-container {
    flex-direction: column;
    gap: 50px;
  }

  .process-left {
    position: relative;
    top: 0;
    width: 100%;
  }

  .process-left .process-header {
    text-align: center;
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: 0;
  }

  .process-left .process-title {
    text-align: center;
  }

  .process-left .process-subtitle {
    text-align: center;
  }

  .process-progress-steps {
    display: none; /* Hide progress tracker on mobile/tablets */
  }

  .process-preview-wrap {
    margin: 30px auto 0 auto;
    max-width: 400px;
  }

  .process-right {
    width: 100%;
    gap: 0px;
  }

  .process-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 1; /* Always active/readable on mobile */
    transform: none !important;
    background: #ffffff;
    border-color: rgba(209, 154, 77, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    padding: 30px 24px;
  }

  .process-card-header {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    width: 100%;
  }

  .process-card-icon {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    margin-bottom: 4px;
  }

  .process-card-title::after {
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
  }

  .process-card-body {
    padding-left: 0;
    margin-top: 8px;
  }

  .process-cta-wrap.desktop-only {
    display: none;
  }

  .process-cta-wrap.mobile-only {
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin-top: 30px;
  }
}

@media (max-width: 576px) {
  .process-section {
    padding: 30px 0 60px 0;
  }

  .process-card-item {
    padding: 25px 25px;
  }

  .process-card-header {
    gap: 15px;
  }

  .process-card-icon {
    width: 48px;
    height: 48px;
  }

  .process-card-icon svg {
    width: 18px;
    height: 18px;
  }

  .process-card-title {
    font-size: 19px;
  }
}

/* Why Choose Milanzo Section */
.why-milanzo-section {
  padding: 80px 0 120px 0;
  background: linear-gradient(180deg, #ffeae5 0%, #faf5ef 50%, #ffffff 100%);
  position: relative;
  z-index: 5;
  overflow: hidden;
}

.why-milanzo-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22noise%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.75%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23noise%29%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

.why-milanzo-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.why-milanzo-header {
  text-align: center;
  margin-bottom: 70px;
  max-width: 650px;
  margin-inline: auto;
}

.why-milanzo-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 12px;
}

.why-milanzo-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(32px, 4vw, 42px);
  color: var(--color-text-main);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.why-milanzo-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* Feature Grid */
.why-milanzo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 100px;
}

.why-milanzo-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(209, 154, 77, 0.12);
  border-radius: var(--radius-xl);
  padding: 40px 35px;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.why-milanzo-card:hover {
  background: #ffffff;
  border-color: rgba(209, 154, 77, 0.35);
  box-shadow: 0 20px 45px rgba(209, 154, 77, 0.08);
  transform: translateY(-6px);
}

.card-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fdf5f3;
  border: 1px solid rgba(209, 154, 77, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 24px;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-milanzo-card:hover .card-icon-wrap {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 6px 16px rgba(166, 50, 52, 0.2);
  transform: scale(1.05) rotate(4deg);
}

.why-milanzo-card .card-title {
  font-family: "Florentia ExtraLight", serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-main);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.why-milanzo-card .card-desc {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  color: var(--color-text-light);
  line-height: 1.65;
  margin: 0;
}

/* Stats Counter Container */
.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: #ffffff;
  border: 1px solid rgba(209, 154, 77, 0.15);
  border-radius: var(--radius-xl);
  padding: 50px 30px;
  box-shadow: 0 15px 40px rgba(209, 154, 77, 0.05);
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60px;
  background: rgba(209, 154, 77, 0.15);
}

.stat-num-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--color-primary);
  font-family: "Florentia Medium", serif;
  line-height: 1;
}

.stat-num {
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.stat-suffix {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  margin-left: 2px;
}

.stat-label {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  font-weight: 600;
}

/* Vendor CTA Section */
.vendor-cta-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #faf8f4 0%, #f5e7c8 100%);
  z-index: 5;
  border-bottom: 1px solid rgba(209, 154, 77, 0.15);
}

.vendor-cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22noise%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.75%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23noise%29%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

.vendor-cta-blobs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.vendor-cta-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.45;
  width: 500px;
  height: 500px;
}

.vendor-cta-blob.top-left {
  background-color: rgba(166, 50, 52, 0.1);
  top: -250px;
  left: -150px;
}

.vendor-cta-blob.bottom-right {
  background-color: rgba(209, 154, 77, 0.12);
  bottom: -250px;
  right: -150px;
}

.vendor-cta-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.vendor-cta-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vendor-cta-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 12px;
}

.vendor-cta-content .vendor-cta-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(32px, 4vw, 42px);
  color: var(--color-text-main);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.vendor-cta-content .vendor-cta-desc {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: 30px;
  max-width: 600px;
}

/* Benefits Checklist */
.vendor-cta-content .benefits-checklist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(15px, 3vw, 30px);
  margin-bottom: 40px;
}

.vendor-cta-content .benefits-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text-main);
}

.vendor-cta-content .benefits-checklist li svg {
  color: var(--color-primary);
  flex-shrink: 0;
}


/* Creator Benefits Grid */
.creator-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.vendor-benefit-card {
  background: #ffffff;
  border: 1px solid rgba(209, 154, 77, 0.12);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 10px 25px rgba(209, 154, 77, 0.04);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  text-align: left;
}

.vendor-benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(166, 50, 52, 0.08);
  border-color: var(--color-primary);
}

.vendor-benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fdf5f3;
  border: 1px solid rgba(209, 154, 77, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 16px;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.vendor-benefit-card:hover .vendor-benefit-icon {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 6px 16px rgba(166, 50, 52, 0.2);
  transform: scale(1.05) rotate(4deg);
}

.vendor-benefit-card .vendor-benefit-title {
  font-family: "Florentia ExtraLight", serif;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--color-text-main);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.vendor-benefit-card .vendor-benefit-desc {
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
}

/* Retired .primary-btn.dark-btn color overrides to unify with signature pink primary-btn */
/* Responsive for Vendor CTA */
@media (max-width: 768px) {
  .vendor-cta-content .benefits-checklist {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-inline: auto;
    width: fit-content;
  }
}

@media (max-width: 576px) {
  .creator-benefits-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .vendor-benefit-card {
    padding: 20px;
  }
}

/* Footer Section */
.footer-section {
  background-color: #111111;
  color: rgba(255, 255, 255, 0.8);
  padding: 100px 0 40px 0;
  position: relative;
  z-index: 5;
}

.footer-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
  gap: 60px;
  margin-bottom: 70px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 20px;
}
.footer-logo svg {
  height: 32px;
  width: auto;
  display: block;
  color: #ffffff;
}

.footer-tagline {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 30px;
}

.newsletter-label {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  display: block;
  margin-bottom: 12px;
}

.newsletter-input-wrap {
  display: flex;
  align-items: center;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 8px;
  transition: border-color 0.3s;
  max-width: 320px;
}

.newsletter-input-wrap:focus-within {
  border-color: var(--color-primary);
}

.newsletter-input-wrap input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  flex-grow: 1;
  padding: 4px 0;
}

.newsletter-input-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.newsletter-input-wrap button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition:
    color 0.3s,
    transform 0.3s;
}

.newsletter-input-wrap button:hover {
  color: var(--color-primary);
  transform: translateX(3px);
}

.footer-heading {
  font-family: "Florentia ExtraLight", serif;
  font-weight: 600;
  font-size: 17px;
  color: #ffffff;
  margin-bottom: 24px;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: all 0.3s;
  display: inline-block;
}

.footer-links a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.footer-socials {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s;
}

.footer-socials a:hover {
  color: #ffffff;
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(166, 50, 52, 0.3);
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1.5px solid rgba(255, 255, 255, 0.08);
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.copyright {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  transition: color 0.3s;
}

.footer-legal a:hover {
  color: #ffffff;
}

/* Responsive Styles for New Sections */
@media (max-width: 1200px) {
  .footer-grid {
    gap: 40px;
  }
}

@media (max-width: 992px) {
  .why-milanzo-section {
    padding: 60px 0 80px 0;
  }

  .why-milanzo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 70px;
  }

  .why-milanzo-card {
    padding: 35px 30px;
  }

  .stats-container {
    grid-template-columns: repeat(2, 1fr);
    padding: 40px 20px;
    gap: 30px 20px;
  }

  .stat-item:not(:last-child)::after {
    display: none; /* Hide delimiters on stacked grids */
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 30px;
  }
}

@media (max-width: 768px) {
  .vendor-cta-section {
    padding: 80px 0;
  }
}

@media (max-width: 576px) {
  .why-milanzo-section {
    padding: 40px 0 60px 0;
  }

  .why-milanzo-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 50px;
  }

  .stats-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-col {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-socials {
    justify-content: center;
  }

  .footer-links {
    align-items: center;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .footer-legal {
    justify-content: center;
  }
}
/* Testimonials Section */
.testimonials-section {
  padding: 120px 0;
  background: #ffffff;
  position: relative;
  z-index: 5;
  overflow: hidden;
}

.testimonials-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
}

.testimonials-header {
  text-align: center;
  margin-bottom: 70px;
  max-width: 650px;
  margin-inline: auto;
}

.testimonials-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 12px;
}

.testimonials-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(32px, 4vw, 42px);
  color: var(--color-text-main);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.testimonials-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* Hybrid Slider / Grid -> Now full Slider */
.testimonials-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1240px; /* Wider to show 3 cards side-by-side */
  margin: 0 auto;
  padding: 15px 70px; /* Added 70px left/right padding to make room for absolute arrows */
}

.testimonials-slider-container {
  width: 100%;
  overflow: hidden;
  padding: 10px 0; /* Add top/bottom padding to prevent box-shadow from clipping on hover/slide */
}

.testimonials-slider-track {
  display: flex;
  width: 100%;
  gap: 20px; /* Reduced from 30px */
}

.testimonial-card-slide {
  flex: 0 0 calc((100% - 40px) / 3);
  width: calc((100% - 40px) / 3);
  box-sizing: border-box;
  padding: 10px;
  display: block;
  opacity: 0.5;
  transform: scale(0.96);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.testimonial-card-slide.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1);
}

.testimonial-card {
  background: #fdfcf9;
  border: 1px solid rgba(209, 154, 77, 0.12);
  border-radius: var(--radius-xl);
  padding: 40px 35px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-card-slide:hover .testimonial-card {
  background: #ffffff;
  border-color: rgba(209, 154, 77, 0.3);
  box-shadow: 0 16px 36px rgba(209, 154, 77, 0.06);
}

.card-quote-mark {
  font-size: 60px;
  font-family: "Georgia", serif;
  color: var(--color-secondary);
  line-height: 0.1;
  margin-bottom: 20px;
}

.card-quote-text {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-light);
  margin-bottom: 25px;
}

.card-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(209, 154, 77, 0.15);
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-family: "Florentia ExtraLight", serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-main);
}

.author-handle {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  color: var(--color-text-light);
}

/* Slider Controls */
.testimonials-slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.testimonials-slider-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.testimonials-slider-dot {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: rgba(22, 36, 24, 0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonials-slider-dot.active {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
}

.testimonials-slider-controls .slider-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(22, 36, 24, 0.12);
  color: var(--color-text-main);
  box-shadow: 0 4px 12px rgba(22, 36, 24, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.prev-card-slide {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.next-card-slide {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.testimonials-slider-controls .slider-arrow-btn:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 6px 16px rgba(166, 50, 52, 0.16);
  transform: translateY(-50%) scale(1.08);
}

/* Mobile & Tablet Slider Mode Updates */
@media (max-width: 992px) {
  .testimonials-section {
    padding: 90px 0 60px 0;
  }

  .testimonials-slider-wrapper {
    max-width: 600px;
    padding: 15px 55px;
  }

  .testimonial-card-slide {
    flex: 0 0 100%;
    width: 100%;
  }
}

@media (max-width: 576px) {
  .testimonials-section {
    padding: 60px 0 30px 0;
  }

  .testimonials-slider-wrapper {
    padding: 15px 45px;
  }

  .prev-card-slide {
    left: 5px;
  }

  .next-card-slide {
    right: 5px;
  }

  .testimonial-card {
    padding: 30px 24px;
  }
}

/* Discover Section Bottom CTA (Integrated Wedding Concierge) */
.discover-cta-wrap {
  margin-top: 100px;
  padding-top: 80px;
  border-top: 1px solid rgba(209, 154, 77, 0.12); /* Subtle divider separator */
  position: relative;
  z-index: 2;
}

.concierge-container {
  max-width: 900px;
  margin: 0 auto;
}

.concierge-header {
  text-align: center;
  margin-bottom: 40px;
}

.concierge-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 12px;
  display: block;
}

.concierge-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(28px, 4vw, 36px);
  color: var(--color-text-main);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.concierge-desc {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.concierge-card {
  background: rgba(253, 251, 247, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(209, 154, 77, 0.12);
  border-radius: 24px;
  padding: 45px 40px;
  box-shadow:
    0 30px 60px -15px rgba(166, 50, 52, 0.03),
    0 10px 30px -10px rgba(209, 154, 77, 0.02);
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.concierge-card:hover {
  border-color: rgba(209, 154, 77, 0.22);
  box-shadow:
    0 40px 80px -15px rgba(166, 50, 52, 0.05),
    0 15px 40px -10px rgba(209, 154, 77, 0.03);
}

.concierge-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 30px;
  align-items: flex-end;
}

.form-group {
  flex: 1 1 25%;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.form-label {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  font-weight: 600;
}

.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select-wrapper::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-text-main);
  pointer-events: none;
  opacity: 0.7;
}

.custom-select {
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-main);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(209, 154, 77, 0.25);
  padding: 8px 24px 8px 0;
  border-radius: 0;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.3s ease;
}

.custom-select:focus {
  border-bottom-color: var(--color-primary);
}

.form-submit {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-center;
}

/* Loader Styles */
.concierge-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  text-align: center;
}

.loader-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}

.loader-ripple div {
  position: absolute;
  border: 3.5px solid var(--color-primary);
  opacity: 1;
  border-radius: 50%;
  animation: loader-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.loader-ripple div:nth-child(2) {
  animation-delay: -0.75s;
}

@keyframes loader-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  4.9% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 0;
  }
  5% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 56px;
    height: 56px;
    opacity: 0;
  }
}

.loader-text {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text-light);
}

/* Success results state */
.concierge-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 0;
  animation: ctaFadeIn 0.5s ease-out;
}

.results-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-secondary);
  margin-bottom: 12px;
}

.results-badge svg {
  color: var(--color-secondary);
}

.results-badge h3 {
  font-family: "Florentia Medium", serif;
  font-size: 22px;
  margin: 0;
  color: var(--color-text-main);
}

.results-desc {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-light);
  margin-bottom: 24px;
}

.results-desc strong {
  color: var(--color-primary);
  font-weight: 600;
}

.results-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.reset-btn {
  background: transparent;
  border: none;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-light);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.3s ease;
}

.reset-btn:hover {
  color: var(--color-primary);
}

@keyframes ctaFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive updates for Integrated CTA */
@media (max-width: 992px) {
  .concierge-form {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .form-group {
    width: 100%;
  }

  .form-submit {
    margin-top: 10px;
  }

  .form-submit .primary-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .discover-cta-wrap {
    margin-top: 60px;
    padding-top: 60px;
  }

  .concierge-card {
    padding: 30px 24px;
    border-radius: 20px;
  }

  .results-actions {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .results-actions .primary-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Service Providers Archive Page Styles
   ========================================================================== */

.archive-hero {
  padding: 150px 0 50px 0;
  text-align: center;
  background: linear-gradient(180deg, #f5ebe0 0%, #faede98a 60%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.archive-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22noise%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.75%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23noise%29%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}

.archive-hero-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.archive-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 12px;
  display: block;
}

.archive-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(36px, 5vw, 52px);
  color: var(--color-text-main);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.archive-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: var(--color-text-light);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Layout Container */
.archive-layout-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
  display: flex;
  gap: 40px;
  padding-top: 80px; /* Added generous top spacing */
  padding-bottom: 120px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

/* Sidebar / Filters */
.archive-sidebar {
  flex: 0 0 280px;
  position: -webkit-sticky; /* Vendor prefix for Safari support */
  position: sticky;
  top: 120px; /* Comfortable sticking gap below header */
  align-self: flex-start; /* Crucial constraint to prevent flex item stretching and ensure sticky works */
  background: rgba(253, 251, 247, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(209, 154, 77, 0.12);
  border-radius: var(--radius-xl);
  padding: 30px 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-sidebar:hover {
  border-color: rgba(209, 154, 77, 0.22);
}

.filter-widget {
  margin-bottom: 28px;
  border-bottom: 1.5px solid rgba(209, 154, 77, 0.08);
  padding-bottom: 24px;
}

.filter-widget:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.filter-widget-title {
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 15px;
  display: block;
}

/* Search Box styling */
.search-box-wrapper {
  position: relative;
  width: 100%;
}

.search-input {
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-main);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(209, 154, 77, 0.25);
  padding: 8px 30px 8px 0;
  border-radius: 0;
  outline: none;
  transition: border-color 0.3s ease;
}

.search-input::placeholder {
  color: rgba(28, 28, 28, 0.4);
}

.search-input:focus {
  border-bottom-color: var(--color-primary);
}

.search-box-wrapper svg {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light);
  opacity: 0.6;
  pointer-events: none;
}

/* Filter List Options */
.filter-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  color: var(--color-text-light);
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease;
}

.filter-checkbox-label:hover {
  color: var(--color-primary);
}

.filter-checkbox-label input {
  display: none; /* Hide standard checkbox */
}

/* Custom Checkbox Design */
.custom-checkbox-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(209, 154, 77, 0.3);
  border-radius: 5px;
  position: relative;
  background: transparent;
  transition: all 0.3s ease;
}

.filter-checkbox-label input:checked + .custom-checkbox-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.filter-checkbox-label input:checked + .custom-checkbox-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Custom Radio Design */
.custom-radio-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(209, 154, 77, 0.3);
  border-radius: 50%;
  position: relative;
  background: transparent;
  transition: all 0.3s ease;
}

.filter-checkbox-label input:checked + .custom-radio-box {
  border-color: var(--color-primary);
}

.filter-checkbox-label input:checked + .custom-radio-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Main Archive Content */
.archive-main {
  flex: 1;
}

/* Toolbar */
.archive-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(209, 154, 77, 0.1);
}

.results-count {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: var(--color-text-light);
  font-weight: 500;
}

.results-count span {
  color: var(--color-primary);
  font-weight: 600;
}

.view-toggles {
  display: flex;
  gap: 8px;
  background: rgba(209, 154, 77, 0.06);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(209, 154, 77, 0.1);
}

.toggle-btn {
  background: transparent;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toggle-btn:hover {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.8);
}

.toggle-btn.active {
  color: var(--color-primary);
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(209, 154, 77, 0.08);
}

/* Archive Grid View */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-grid .vendor-card {
  width: 100%; /* Force grid sizing */
}

/* Archive List View - Override vendor-card styles */
.archive-grid.list-view {
  grid-template-columns: 1fr;
  gap: 30px;
}

.archive-grid.list-view .vendor-card {
  flex-direction: row;
  width: 100%;
  height: 240px;
}

.archive-grid.list-view .vendor-card .vendor-image-wrap {
  width: 320px;
  height: 100%;
  flex-shrink: 0;
}

.archive-grid.list-view .vendor-card .vendor-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
}

.archive-grid.list-view .vendor-card .vendor-divider {
  margin: 15px 0;
}

.archive-grid.list-view .vendor-card .vendor-footer-row {
  margin-top: 0;
}

/* Infinite Loader Styling */
.infinite-loader-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0 20px;
  width: 100%;
  grid-column: 1 / -1;
}

.infinite-loader-wrapper.hidden {
  display: none;
}

/* Mobile Filter Toggles - Hidden on Desktop */
.filter-mobile-toggle-btn {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(209, 154, 77, 0.06);
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(209, 154, 77, 0.15);
  color: var(--color-text-main);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-mobile-toggle-btn:hover {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--color-primary);
}

.sidebar-close-btn {
  display: none;
}

.filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 28, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 190;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.filter-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Responsive updates for Archive Page */
@media (max-width: 1200px) {
  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .archive-grid.list-view .vendor-card .vendor-image-wrap {
    width: 250px;
  }
  .testimonials-header {
    margin-bottom: 50px;
  }
  /* Content centres on narrow screens, so the scrim evens out too. */
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(28, 12, 20, 0.6) 0%,
      rgba(28, 12, 20, 0.68) 55%,
      rgba(28, 12, 20, 0.78) 100%
    );
  }
}

@media (max-width: 992px) {
  .archive-layout-container {
    flex-direction: column;
    gap: 30px;
    padding-top: 40px; /* Reduced padding on mobile */
    z-index: auto; /* Reset z-index to auto so the sidebar drawer (z-index: 200) sits above the filter overlay (z-index: 190) */
  }

  .filter-mobile-toggle-btn {
    display: inline-flex; /* Show toggle button on mobile */
  }

  .archive-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 320px;
    height: 100vh;
    z-index: 200;
    background: #fcfaf6;
    padding: 70px 24px 40px;
    box-shadow: 15px 0 42px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
    border-radius: 0;
    border: none;
    border-right: 1px solid rgba(209, 154, 77, 0.12);
    transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    align-self: stretch;
  }

  .archive-sidebar.active {
    left: 0; /* Slide in */
  }

  .sidebar-close-btn {
    display: block; /* Show close button on mobile */
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--color-text-main);
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10;
    padding: 5px;
  }

  .sidebar-close-btn:hover {
    color: var(--color-primary);
  }
}

@media (max-width: 768px) {
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(28, 12, 20, 0.64) 0%,
      rgba(28, 12, 20, 0.72) 55%,
      rgba(28, 12, 20, 0.82) 100%
    );
  }
  .testimonials-header {
    margin-bottom: 40px;
  }
  .archive-hero {
    padding: 120px 0 40px 0;
  }

  .archive-grid {
    grid-template-columns: 1fr;
  }

  .archive-grid.list-view .vendor-card {
    flex-direction: column;
    height: auto;
  }

  .archive-grid.list-view .vendor-card .vendor-image-wrap {
    width: 100%;
    height: 200px;
  }
}

/* ==========================================================================
   Service Provider Profile Page Styles
   ========================================================================== */

/* Profile Hero Banner */
.profile-hero {
  position: relative;
  height: clamp(520px, 78vh, 720px);
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--color-text-white);
  padding-top: 100px;
  padding-bottom: 80px;
}

.profile-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform-origin: center;
  z-index: 1;
}

/* Same left-weighted dark scrim as the marketing-page heroes (.ab-hero),
   with a touch of bottom weight so the meta row stays legible. */
.profile-hero-overlay {
  position: absolute;
  inset: 0;
    background: rgba(0, 0, 0, 0.52);
  /* background:
    linear-gradient(
      180deg,
      rgba(28, 12, 20, 0) 40%,
      rgba(28, 12, 20, 0.45) 100%
    ),
    linear-gradient(
      100deg,
      rgba(28, 12, 20, 0.78) 0%,
      rgba(28, 12, 20, 0.55) 45%,
      rgba(28, 12, 20, 0.25) 100%
    ); */
  z-index: 2;
}

 .profile-page .profile-hero-overlay {
  position: absolute;
  inset: 0;
  background: #000000b8;
  z-index: 2;
}
.profile-hero-content {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
  width: 100%;
  position: relative;
  z-index: 3;
}

.profile-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  margin-bottom: 20px;
  opacity: 0.8;
}

.profile-breadcrumbs a {
  color: var(--color-text-white);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.profile-breadcrumbs a:hover {
  opacity: 1;
  color: var(--color-secondary);
}

.profile-breadcrumbs .breadcrumb-arrow {
  opacity: 0.5;
}

.profile-breadcrumbs .breadcrumb-current {
  font-weight: 500;
  color: var(--color-secondary);
}

.profile-header-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-category-tag {
  background: rgba(229, 157, 57, 0.15);
  border: 1px solid rgba(229, 157, 57, 0.3);
  color: var(--color-secondary);
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.profile-verified-badge {
  background: rgba(52, 103, 57, 0.25);
  border: 1px solid rgba(52, 103, 57, 0.4);
  color: #8ce99a;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Anchors the tooltip below; all other pill styling lives with the shared
   badge component further up this file. */
.profile-badge-pill {
  position: relative;
}

/* Tooltip container pseudo elements */
.profile-badge-pill::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 135%;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  background: rgba(43, 39, 35, 0.98);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  width: 220px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  z-index: 99;
  pointer-events: none;
}

.profile-badge-pill::before {
  content: "";
  position: absolute;
  top: 120%;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent rgba(43, 39, 35, 0.98) transparent;
  opacity: 0;
  visibility: hidden;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 99;
  pointer-events: none;
}

.profile-badge-pill:hover::after,
.profile-badge-pill:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}


.profile-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.12;
  margin: 0;
  color: var(--color-text-white);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.profile-meta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.profile-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  opacity: 0.9;
}

.profile-meta-item svg {
  color: var(--color-secondary);
}

/* Layout Container */
.profile-content-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
  padding-top: 60px;
  padding-bottom: 120px;
}

.profile-layout-grid {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 48px;
  align-items: flex-start;
}

/* A grid item's automatic minimum size is its min-content width, so a wide
   child — the reviews carousel track, which is as wide as every slide laid end
   to end — pushes the 8fr column past the grid and drags the whole layout with
   it. The track is meant to be clipped by .pt-slider-viewport, never to size
   anything. min-width: 0 lets the column honour its 8fr share. */
.profile-details-column {
  min-width: 0;
}

/* Profile Card Blocks */
.profile-card-block {
  background: rgba(253, 251, 247, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(209, 154, 77, 0.12);
  border-radius: var(--radius-xl);
  padding: 40px;
  margin-bottom: 40px;
  transition: border-color 0.4s ease;
}

.profile-card-block:hover {
  border-color: rgba(209, 154, 77, 0.22);
}

.profile-section-title {
  font-family: "Florentia Medium", serif;
  font-size: 24px;
  color: var(--color-text-main);
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 10px;
}

.profile-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 1.5px;
  background: var(--color-secondary);
}

/* About Block Details */
.profile-tagline {
  font-family: "Florentia ExtraLight", serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--color-primary);
  line-height: 1.4;
  margin-bottom: 20px;
  border-left: 2px solid var(--color-secondary);
  padding-left: 16px;
}

.profile-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 18px;
}
.profile-skill-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(194, 24, 91, 0.07);
  border: 1px solid rgba(194, 24, 91, 0.14);
  color: var(--color-primary);
  font-size: 12.5px;
  font-weight: 600;
}

.profile-bio {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: 35px;
}

/* Bios are authored in the dashboard's rich-text editor, so the block holds
   real markup now. Restrict the styling to the tags milanzo_safe_bio() allows
   — anything else has already been stripped server-side. */
.profile-bio > :first-child { margin-top: 0; }
.profile-bio > :last-child { margin-bottom: 0; }

.profile-bio p {
  font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.65;
  margin: 0 0 20px;
}

.profile-bio ul,
.profile-bio ol {
  margin: 0 0 14px;
  padding-left: 20px;
}

.profile-bio li {
  margin-bottom: 6px;
}

.profile-bio strong,
.profile-bio b {
  font-weight: 600;
  color: var(--color-text-main);
}

.profile-bio a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profile-bio a:hover {
  opacity: 0.8;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  border-top: 1px solid rgba(209, 154, 77, 0.1);
  padding-top: 30px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(209, 154, 77, 0.04);
  border: 1px solid rgba(209, 154, 77, 0.08);
  border-radius: var(--radius-standard);
  padding: 16px 12px;
  transition: all 0.3s ease;
}

.stat-box:hover {
  background: rgba(209, 154, 77, 0.08);
  border-color: rgba(209, 154, 77, 0.18);
  transform: translateY(-2px);
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(194, 24, 91, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.stat-label {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  margin-bottom: 4px;
}

.stat-value {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-main);
}

/* Gallery Block */
.gallery-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(209, 154, 77, 0.1);
  padding-bottom: 15px;
}

.gallery-header-row .profile-section-title {
  margin-bottom: 0;
  padding-bottom: 0;
}

.gallery-header-row .profile-section-title::after {
  display: none;
}

.gallery-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(209, 154, 77, 0.04);
  padding: 4px;
  border-radius: var(--radius-micro);
  border: 1px solid rgba(209, 154, 77, 0.08);
}

.gallery-tab-btn {
  background: transparent;
  border: none;
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-light);
  padding: 6px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-tab-btn:hover {
  color: var(--color-primary);
}

.gallery-tab-btn.active {
  background: #ffffff;
  color: var(--color-primary);
  box-shadow: 0 4px 10px rgba(209, 154, 77, 0.06);
}

.profile-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-standard);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  background: #e9ecef;
}

.gallery-item:nth-child(5n + 1) {
  grid-column: span 2;
  aspect-ratio: 8 / 3;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(22, 36, 24, 0) 40%,
    rgba(22, 36, 24, 0.85) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.05);
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-cat {
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  font-weight: 600;
  margin-bottom: 4px;
}

.gallery-item-title {
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-white);
  margin: 0;
}

.gallery-item-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover .gallery-item-icon {
  transform: scale(1);
  opacity: 1;
}

/* Video tiles carry a persistent play badge — the thumbnail alone reads as a
   photo, so nothing told the visitor there was anything to click. */
.gallery-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(22, 36, 24, 0.62);
  border: 1.5px solid var(--color-secondary);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px; /* optical centring of the triangle */
  pointer-events: none;
  z-index: 2;
  backdrop-filter: blur(2px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease;
}

.gallery-item.is-video:hover .gallery-play-badge,
.gallery-item.is-video:focus-visible .gallery-play-badge {
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(22, 36, 24, 0.8);
}

.gallery-item.is-video::after {
  content: "Video";
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-white);
  background: rgba(22, 36, 24, 0.72);
  padding: 3px 8px;
  border-radius: 999px;
  pointer-events: none;
}

.gallery-item:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-play-badge { transition: none; }
}

.empty-gallery {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  color: var(--color-text-light);
}

/* Packages Block */
.section-desc {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: var(--color-text-light);
  margin-bottom: 30px;
}

/* ── Services accordion (profile pricing) ───────────────────
   One panel per service the creator offers. Panels are plain
   [hidden] toggles rather than height animations, so a panel
   opened by a jump link or by find-in-page is always measurable. */
.services-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-item {
  border: 1px solid rgba(209, 154, 77, 0.16);
  border-radius: var(--radius-card);
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-item.is-open {
  border-color: rgba(209, 154, 77, 0.32);
  box-shadow: 0 10px 30px rgba(209, 154, 77, 0.07);
}

.service-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.service-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--color-text-main);
}

.service-toggle:hover .service-name {
  color: var(--color-secondary);
}

.service-toggle:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: -2px;
}

.service-toggle-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.service-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}

.service-meta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.service-chevron {
  flex-shrink: 0;
  color: var(--color-secondary);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-item.is-open .service-chevron {
  transform: rotate(180deg);
}

.service-panel {
  padding: 0 24px 24px;
}

.service-desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-light);
}

/* The blurb is rich text written in the partner dashboard, so it can hold
   paragraphs, lists and emphasis rather than a single line. */
.service-desc > :first-child { margin-top: 0; }
.service-desc > :last-child { margin-bottom: 0; }
.service-desc p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 20px;
}
.service-desc ul,
.service-desc ol { margin: 0 0 10px; padding-left: 20px; }
.service-desc li { margin-bottom: 4px; }
.service-desc strong, .service-desc b { color: var(--color-text-main); font-weight: 600; }
.service-desc a { color: var(--color-secondary); text-decoration: underline; }

.services-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 26px 16px;
  font-size: 13.5px;
  color: var(--color-text-light);
}

@media (prefers-reduced-motion: reduce) {
  .service-chevron { transition: none; }
}

.packages-list-container {
  display: grid;
  /* flow to fit — an odd package count no longer leaves a large empty cell */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.package-card {
  background: #ffffff;
  border: 1px solid rgba(209, 154, 77, 0.12);
  border-radius: var(--radius-card);
  padding: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

.package-card:hover {
  border-color: rgba(209, 154, 77, 0.3);
  box-shadow: 0 16px 40px rgba(209, 154, 77, 0.08);
  transform: translateY(-4px);
}

.package-card.popular-card {
  border: 2px solid var(--color-secondary);
  box-shadow: 0 15px 35px rgba(209, 154, 77, 0.1);
}

.popular-tag {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--color-secondary);
  color: var(--color-text-white);
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
}

/* Actual HTML classes used in profile.php packages */
.package-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(209, 154, 77, 0.1);
}

.package-name {
  font-family: "Florentia Medium", serif;
  font-size: 19px;
  color: var(--color-text-main);
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.package-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.package-price {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

.package-period {
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  color: var(--color-text-light);
  font-weight: 400;
}

.package-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.package-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: var(--color-text-light);
  line-height: 1.45;
}

.package-features li svg,
.package-features li .pkg-feat-icon {
  color: var(--color-cta);
  margin-top: 1px;
  flex-shrink: 0;
  stroke: var(--color-cta);
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.package-card:hover .pkg-feat-icon {
  opacity: 1;
  transform: scale(1.06);
}

/* Select Package button within package card */
.select-package-btn {
  width: 100% !important;
  margin-top: auto;
  justify-content: center;
}

/* Legacy pkg-* class aliases */
.pkg-header { margin-bottom: 20px; }
.pkg-name { font-family: "Florentia Medium", serif; font-size: 19px; color: var(--color-text-main); margin-bottom: 10px; }
.pkg-price-wrap { display: flex; align-items: baseline; gap: 5px; }
.pkg-price { font-family: "Poppins", sans-serif; font-size: 22px; font-weight: 700; color: var(--color-primary); }
.pkg-period { font-family: "Poppins", sans-serif; font-size: 13px; color: var(--color-text-light); }
.pkg-features-list { list-style: none; padding: 0; margin: 0 0 30px 0; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.pkg-feature-item { display: flex; align-items: flex-start; gap: 10px; font-family: "Poppins", sans-serif; font-size: 13.5px; color: var(--color-text-light); line-height: 1.4; }
.pkg-feature-item svg { color: var(--color-cta); margin-top: 2px; flex-shrink: 0; }
.pkg-select-btn { width: 100%; padding: 12px 20px; border-radius: var(--radius-standard); font-family: "Poppins", sans-serif; font-size: 13.5px; font-weight: 600; text-align: center; cursor: pointer; transition: all 0.3s ease; }
.package-card.popular-card .pkg-select-btn { background: var(--color-primary); color: var(--color-text-white); border-color: var(--color-primary); }
.package-card.popular-card .pkg-select-btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* Testimonials Block */
.testimonials-empty {
  text-align: center;
  padding: 40px;
  color: var(--color-text-light);
  background: rgba(209, 154, 77, 0.02);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  margin-bottom: 24px;
}

/* Profile reviews slider */
.pt-slider {
  position: relative;
  margin-bottom: 24px;
}

.pt-slider-viewport {
  overflow: hidden;
  padding: 4px;
  margin: -4px;
}

.pt-slider-track {
  display: flex;
  gap: 20px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* One slide is a *column* of up to two reviews, so the carousel is two rows
   deep and advances a column at a time. Two columns visible on desktop = four
   reviews on screen. */
.pt-slider-col {
  flex: 0 0 calc((100% - 20px) / 2);
  width: calc((100% - 20px) / 2);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The track stretches every column to the tallest, so the two rows line up
   across columns instead of stair-stepping. Basis stays `auto`: with `0` the
   cards size from nothing, the column collapses, and the content spills out
   over the card below it. */
.pt-slider-col > .testimonial-card {
  flex: 1 1 auto;
}

/* A trailing odd review leaves its column half full — keep that card at its
   natural height rather than stretching it over both rows. `height: auto`
   overrides the older `.testimonial-card { height: 100% }` rule, which is what
   made a lone card fill the whole column. */
.pt-slider-col > .testimonial-card:only-child {
  flex: 0 0 auto;
  height: auto;
  align-self: stretch;
}

.pt-slider-track > .testimonial-card {
  flex: 0 0 calc((100% - 20px) / 2);
  width: calc((100% - 20px) / 2);
  box-sizing: border-box;
}

/* ── Review summary badge ────────────────────────────────────────────────
   Average and total for the reviews actually shown in this section. */
.testimonials-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  /* The title's own 24px gap moves to the row, so the badge sits on the
     heading's baseline and the cards still clear the underline. */
  margin-bottom: 28px;
}

.testimonials-head .profile-section-title {
  margin-bottom: 0;
}

.review-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(209, 154, 77, 0.09);
  border: 1px solid rgba(209, 154, 77, 0.22);
  font-family: "Poppins", sans-serif;
  white-space: nowrap;
}

.rsb-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  line-height: 1;
}

.rsb-divider {
  width: 1px;
  height: 13px;
  background: rgba(209, 154, 77, 0.32);
}

.rsb-count {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-light);
  line-height: 1;
}

.pt-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.pt-slider-controls[hidden] {
  display: none;
}

.pt-slider-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pt-slider-dot {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: rgba(22, 36, 24, 0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pt-slider-dot.active {
  width: 28px;
  background: var(--color-primary);
}

.pt-slider-arrow {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(22, 36, 24, 0.12);
  color: var(--color-text-main);
  box-shadow: 0 4px 12px rgba(22, 36, 24, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pt-slider-arrow:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 6px 16px rgba(166, 50, 52, 0.16);
}

.pt-slider-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.pt-slider-arrow:disabled:hover {
  background: #ffffff;
  color: var(--color-text-main);
  border-color: rgba(22, 36, 24, 0.12);
}

.testimonial-card {
  background: #ffffff;
  border: 1px solid rgba(209, 154, 77, 0.12);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

.testimonial-card:hover {
  border-color: rgba(209, 154, 77, 0.25);
  box-shadow: 0 8px 28px rgba(209, 154, 77, 0.07);
  transform: translateY(-2px);
}

/* Actual HTML classes used in profile.php testimonials */
.testimonial-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(209, 154, 77, 0.08);
}

.testimonial-header .testimonial-author {
  border-top: none;
  padding-top: 0;
}

.testimonial-header .testimonial-author strong {
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-main);
  display: block;
  margin-bottom: 2px;
}

.testimonial-header .testimonial-author span {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  color: var(--color-secondary);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.testimonial-rating {
  display: flex;
  gap: 2px;
  align-items: center;
  color: var(--color-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

.testimonial-comment {
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.65;
  color: var(--color-text-light);
  margin: 0;
  flex-grow: 1;
  position: relative;
  padding-left: 14px;
}

.testimonial-comment::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -4px;
  font-family: Georgia, serif;
  font-size: 28px;
  line-height: 1;
  color: rgba(209, 154, 77, 0.25);
  font-style: normal;
}

/* Legacy class aliases */
.testimonial-rating-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.testimonial-stars {
  color: var(--color-secondary);
  display: flex;
  gap: 2px;
}

.testimonial-date {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  color: var(--color-text-light);
}

.testimonial-quote {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0 0 20px 0;
  flex-grow: 1;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(209, 154, 77, 0.08);
  padding-top: 15px;
}

.author-name {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-main);
}

.author-label {
  font-family: "Poppins", sans-serif;
  font-size: 10.5px;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-top: 2px;
}

/* Sticky Booking Sidebar */
.profile-sidebar-column {
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
}

.sticky-booking-card {
  background: rgba(253, 251, 247, 0.85);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(209, 154, 77, 0.12);
  border-radius: var(--radius-xl);
  padding: 20px 18px; /* Shrunk padding */
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.booking-card-header {
  margin-bottom: 12px; /* Shrunk margin */
}

.booking-title {
  font-family: "Florentia Medium", serif;
  font-size: 20px; /* Slightly smaller */
  color: var(--color-text-main);
  margin-bottom: 4px; /* Shrunk margin */
}

.booking-desc {
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  color: var(--color-text-light);
  line-height: 1.35;
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Shrunk gap */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Shrunk gap */
}

/* Compact Sidebar Inputs */
.sticky-booking-card .form-input,
.sticky-booking-card .form-select,
.sticky-booking-card .form-textarea {
  padding: 8px 12px;
  font-size: 12.5px;
}

/* Compact Sidebar Total display */
.sticky-booking-card .booking-total-display {
  padding: 10px 14px;
  margin-top: 10px;
}

/* Compact Sidebar Submit Button - full-width premium pill */
.sticky-booking-card .booking-submit-btn {
  width: 100%;
  height: 48px;
  padding: 4px 6px 4px 20px;
  margin-top: 8px;
  border-radius: 999px;
  justify-content: space-between;
  font-size: 14px;
}

.sticky-booking-card .booking-submit-btn .btn-text {
  flex: 1;
  text-align: center;
  padding-right: 0;
}

.sticky-booking-card .booking-submit-btn .icon-wrap {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.sticky-booking-card .booking-footer-shield {
  margin-top: 10px;
  padding-top: 8px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.form-label {
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-main);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(209, 154, 77, 0.2);
  border-radius: var(--radius-micro);
  padding: 10px 14px;
  color: var(--color-text-main);
  outline: none;
  transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(194, 24, 91, 0.04);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E6666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 35px;
}

.booking-submit-btn {
  width: 100%;
  padding: 4px 6px 4px 20px;
  margin-top: 10px;
  justify-content: space-between;
  border-radius: 999px;
  height: 50px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.booking-footer-shield {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(209, 154, 77, 0.08);
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  color: var(--color-text-light);
}

.booking-footer-shield svg {
  color: var(--color-secondary);
}

/* Booking Success State */
.booking-success-message {
  text-align: center;
  padding: 20px 0;
}

.success-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(52, 103, 57, 0.08);
  color: var(--color-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.booking-success-message h4 {
  font-family: "Florentia Medium", serif;
  font-size: 18px;
  color: var(--color-text-main);
  margin-bottom: 10px;
}

.booking-success-message p {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: var(--color-text-light);
  line-height: 1.6;
}

.hidden {
  display: none !important;
}

/* Fullscreen Lightbox Modal */
.lightbox-modal {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 65%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-modal .lightbox-content {
  transform: scale(0.96) translateY(12px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.lightbox-modal.active .lightbox-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.lightbox-close-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  background: transparent;
  border: none;
  color: var(--color-text-white);
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1010;
  padding: 10px;
}

.lightbox-close-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1010;
}

.lightbox-nav-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.lightbox-nav-btn.prev {
  left: 40px;
}

.lightbox-nav-btn.next {
  right: 40px;
}

.lightbox-content {
  max-width: 80%;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  z-index: 1005;
}

.lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--radius-standard);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.lightbox-caption {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.05em;
  font-weight: 500;
  text-align: center;
}

/* ==========================================================================
   Responsive Adaptations for Profile Page
   ========================================================================== */
@media (max-width: 1024px) {
  .profile-layout-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .profile-sidebar-column {
    position: static;
    width: 100%;
  }

  .sticky-booking-card {
    position: static;
  }
}

@media (max-width: 768px) {
  .profile-hero {
    height: auto;
    padding-top: 100px;
    padding-bottom: 60px;
  }

  /* The header is fixed and transparent over the hero, so nudge the first
     row clear of it rather than padding the whole section. */
  .profile-breadcrumbs {
    margin-top: 24px;
  }

  .profile-meta-row {
    gap: 16px;
  }

  .profile-card-block {
    padding:30pxclass="mobile-toggle" 24px;
    margin-bottom: 24px;
  }

  .profile-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .profile-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item:nth-child(5n + 1) {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }

  .packages-list-container {
    grid-template-columns: 1fr;
  }

  .pt-slider-track > .testimonial-card,
  .pt-slider-col {
    flex-basis: 100%;
    width: 100%;
  }

  .testimonials-head {
    align-items: flex-start;
  }

  .lightbox-nav-btn {
    width: 40px;
    height: 40px;
  }

  .lightbox-nav-btn.prev {
    left: 10px;
  }

  .lightbox-nav-btn.next {
    right: 10px;
  }

  .lightbox-content {
    max-width: 90%;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

/* FAQ Accordion Styling */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Every rule below is scoped to .faq-accordion so the component can be reused
   on the profile, help and partner pages without leaking into other styles. */
.faq-accordion .faq-item {
  border: 1px solid rgba(209, 154, 77, 0.16);
  border-radius: var(--radius-standard);
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-accordion .faq-item:hover {
  border-color: rgba(209, 154, 77, 0.32);
}

.faq-accordion .faq-item.active {
  border-color: var(--color-primary);
  box-shadow: 0 4px 15px rgba(194, 24, 91, 0.05);
}

.faq-accordion .faq-trigger {
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  gap: 16px;
  font: inherit;
}

.faq-accordion .faq-question {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-main);
  transition: color 0.3s ease;
}

.faq-accordion .faq-trigger:hover .faq-question,
.faq-accordion .faq-item.active .faq-question {
  color: var(--color-primary);
}

.faq-accordion .faq-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-standard);
}

.faq-accordion .faq-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(209, 154, 77, 0.08);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.faq-accordion .faq-item.active .faq-icon-wrap {
  transform: rotate(180deg);
  background: rgba(194, 24, 91, 0.08);
  color: var(--color-primary);
}

/* The open height is set inline by the accordion script from the answer's own
   scrollHeight, so an answer of any length opens fully and nothing is clipped.
   These rules are the closed default and the no-JS fallback. */
.faq-accordion .faq-answer-wrapper {
  display: none;
}

/* Opening is a display change, not a height transition, so an answer can
   never be left half-open if a transition is interrupted. The fade below is
   decorative only — the answer is fully laid out before it plays. */
.faq-accordion .faq-item.active > .faq-answer-wrapper {
  display: block;
  animation: faqAnswerIn 0.28s ease both;
}

@keyframes faqAnswerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.faq-accordion .faq-answer-inner {
  overflow: hidden;
}

/* Without JS every answer stays readable rather than permanently collapsed. */
.no-js .faq-accordion .faq-answer-wrapper {
  display: block;
}

.faq-accordion .faq-answer {
  margin: 0 18px;
  padding: 14px 0 18px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-light);
  border-top: 1px solid rgba(209, 154, 77, 0.12);
}

.faq-accordion .faq-answer p {
  margin: 0;
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .faq-accordion .faq-icon-wrap { transition: none; }
  .faq-accordion .faq-item.active > .faq-answer-wrapper { animation: none; }
}

/* Cinematic Hero Carousel & Ken Burns Effect */
.profile-hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-carousel-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  transform: scale(1);
}

.hero-carousel-slide.active {
  opacity: 1;
}

/* Save / Share Action Buttons inside Hero */
.profile-actions-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
}

.profile-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-text-white);
  padding: 8px 18px;
  border-radius: var(--radius-standard);
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-action-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.profile-action-btn.saved {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-white);
  box-shadow: 0 4px 15px rgba(194, 24, 91, 0.25);
}

.profile-action-btn.saved svg {
  fill: currentColor;
}

/* Live pricing estimated total in sidebar */
.booking-total-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(209, 154, 77, 0.05);
  border: 1px solid rgba(209, 154, 77, 0.12);
  padding: 14px 20px;
  border-radius: var(--radius-micro);
  margin-top: 15px;
}

.total-label {
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
}

.total-price {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}

/* Tailored add-ons panel styling */
.addons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(209, 154, 77, 0.15);
  border-radius: var(--radius-micro);
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.addon-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  color: var(--color-text-light);
  user-select: none;
  transition: color 0.2s ease;
  padding: 4px 0;
}

.addon-checkbox-label:hover {
  color: var(--color-text-main);
}

.addon-checkbox-label input {
  display: none;
}

.addon-checkbox-label input:checked + .custom-checkbox-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.addon-checkbox-label input:checked + .custom-checkbox-box::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 7px;
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.addon-name {
  flex-grow: 1;
}

.addon-price {
  font-weight: 600;
  color: var(--color-primary);
}

/* Toast alert notification popup */
.milanzo-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #fcfaf6;
  border: 1px solid var(--color-primary);
  color: var(--color-text-main);
  box-shadow: 0 15px 35px rgba(194, 24, 91, 0.1);
  padding: 14px 24px;
  border-radius: var(--radius-standard);
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1100;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.milanzo-toast.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.milanzo-toast svg {
  color: var(--color-cta);
}

/* ==========================================================================
   Milanzo Authentication Split Page Styles
   ========================================================================== */
.auth-page {
  background-color: var(--color-background);
  overflow: hidden;
  height: 100vh;
}

.auth-split-layout {
  display: grid;
  grid-template-columns: 6fr 4fr;
  width: 100%;
  height: 100vh;
}

/* Hero Side Carousel */
.auth-hero-side {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-text-white);
  padding: clamp(40px, 5vw, 80px);
  overflow: hidden;
}

.auth-hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.auth-carousel-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  transform: scale(1.03);
}

.auth-carousel-slide.active {
  opacity: 1;
  animation: authKenBurns 8s ease forwards;
}

@keyframes authKenBurns {
  0% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1.06);
  }
}

.auth-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(22, 36, 24, 0.1) 0%,
    rgba(22, 36, 24, 0.8) 100%
  );
  z-index: 2;
}

.auth-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.auth-logo-wrap {
  margin-top: 10px;
}

.auth-brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.auth-brand-logo svg {
  height: 32px;
  width: auto;
  display: block;
  color: var(--color-text-white);
}

.auth-quote-box {
  max-width: 500px;
  margin-bottom: 20px;
}

.auth-quote {
  font-family: "Florentia ExtraLight", serif;
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.35;
  color: var(--color-text-white);
  margin-bottom: 12px;
  border-left: 2px solid var(--color-secondary);
  padding-left: 18px;
}

.auth-cite {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-secondary);
  font-weight: 600;
  display: block;
}

.auth-carousel-indicators {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.indicator-dot {
  width: 20px;
  height: 2.5px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: var(--radius-pill);
}

.indicator-dot.active {
  background: var(--color-secondary);
  width: 36px;
}

/* Form Side Panel */
.auth-form-side {
  position: relative;
  height: 100vh;
  background-color: var(--color-background);
  /* extra top padding keeps the form clear of the absolute "Back to Home" link */
  padding: 92px 40px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.back-home-link {
  position: absolute;
  top: 40px;
  left: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.back-home-link:hover {
  color: var(--color-primary);
}

.auth-form-wrapper {
  width: 100%;
  max-width: 380px;
}

/* Role Selector Toggle Tabs */
.role-selector-wrap {
  display: flex;
  background: rgba(209, 154, 77, 0.05);
  border: 1px solid rgba(209, 154, 77, 0.12);
  padding: 4px;
  border-radius: var(--radius-micro);
  margin-bottom: 35px;
}

.role-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-light);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.role-tab:hover {
  color: var(--color-primary);
}

.role-tab.active {
  background: #ffffff;
  color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(209, 154, 77, 0.06);
}

/* Form Slider Blocks */
.auth-card-slider {
  position: relative;
  min-height: 480px;
  width: 100%;
}

.auth-form-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  display: none;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.auth-form-block.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  display: block;
  transform: translateY(0);
}

.auth-form-header {
  margin-bottom: 30px;
}

.auth-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(24px, 3vw, 30px);
  color: var(--color-text-main);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.auth-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  color: var(--color-text-light);
  line-height: 1.5;
}
.auth-subtitle a{
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}
.auth-subtitle a:hover {
  text-decoration: underline;
  color: var(--color-primary-dark);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Input Fields (Floating Labels) */
.input-group {
  position: relative;
  width: 100%;
}

.auth-input,
.auth-select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(209, 154, 77, 0.25);
  padding: 10px 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: var(--color-text-main);
  outline: none;
  border-radius: 0;
  transition: border-color 0.3s ease;
}

.auth-input:focus,
.auth-select:focus {
  border-bottom-color: var(--color-primary);
}

.auth-label {
  position: absolute;
  left: 0;
  top: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  color: var(--color-text-light);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Label floating states */
.auth-input:focus ~ .auth-label,
.auth-input:valid ~ .auth-label,
.auth-select:focus ~ .auth-label,
.auth-select:valid ~ .auth-label,
.auth-input[type="date"] ~ .auth-label,
.auth-input:not(:placeholder-shown) ~ .auth-label {
  top: -9px;
  font-size: 11px;
  color: var(--color-primary);
  font-weight: 600;
}

/* Custom Select Dropdowns */
.auth-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E6666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

/* Form Options Row */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  color: var(--color-text-light);
  cursor: pointer;
  user-select: none;
}

.remember-me input {
  display: none;
}

.remember-me input:checked + .custom-checkbox-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.remember-me input:checked + .custom-checkbox-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.terms-text a,
.forgot-password {
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.terms-text a:hover,
.forgot-password:hover {
  text-decoration: underline;
}

.auth-submit-btn {
  width: 100%;
  padding: 14px;
  margin-top: 10px;
  justify-content: center;
  border-radius: 999px;
}

/* Social Logins Divider */
.social-divider {
  position: relative;
  text-align: center;
  margin: 28px 0;
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.social-divider::before,
.social-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: rgba(209, 154, 77, 0.12);
}

.social-divider::before {
  left: 0;
}
.social-divider::after {
  right: 0;
}

/* Social Buttons */
.social-btn-row {
  display: flex;
  gap: 12px;
}

.social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(209, 154, 77, 0.15);
  padding: 12px;
  border-radius: var(--radius-micro);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-main);
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-btn:hover {
  background: rgba(209, 154, 77, 0.03);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.social-btn svg {
  flex-shrink: 0;
}

.google-btn svg {
  color: #db4437;
}

.facebook-btn svg {
  color: #4267b2;
}

/* Auth Switch Block */
.auth-switch-text {
  text-align: center;
  margin-top: 28px;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  color: var(--color-text-light);
}

.auth-switch-btn {
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 4px;
  padding: 0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.auth-switch-btn:hover {
  text-decoration: underline;
}

/* Responsive auth layout */
@media (max-width: 1024px) {
  /* Drop the locked full-viewport / inner-scroll model on mobile: with the hero
     hidden the form is the whole page, so let it flow in normal document scroll.
     The previous height:100vh + overflow-y:auto + justify-content:center clipped
     the top of any form taller than the screen (couldn't scroll up to it). */
  .auth-page {
    height: auto;
    overflow: visible;
  }

  .auth-split-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }

  .auth-hero-side {
    display: none; /* Hide slideshow hero on mobile viewports */
  }

  .auth-form-side {
    /* clear the absolute "Back to Home" link with an intentional gap */
    padding: 88px 24px 60px;
    height: auto;
    min-height: 100vh;
    justify-content: flex-start;
    overflow-y: visible;
  }

  .back-home-link {
    top: 24px;
    left: 24px;
  }
}

/* ==========================================================================
   Milanzo Onboarding Wizard Styles
   ========================================================================== */
.onboard-page {
  background-color: var(--color-background);
  overflow: hidden;
  height: 100vh;
}

.onboard-split-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  width: 100%;
  height: 100vh;
}

/* Preview Side Panel styling */
.onboard-preview-side {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
}

.preview-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  filter: brightness(0.7);
  transition:
    filter 1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.65s ease;
}

.preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(22, 36, 24, 0.45) 0%,
    rgba(22, 36, 24, 0.85) 100%
  );
  z-index: 2;
}

.preview-content-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.preview-badge {
  font-family: "Poppins", sans-serif;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-secondary);
  font-weight: 600;
  margin-bottom: -10px;
}

/* Moodboard glass styling */
.moodboard-preview {
  width: 100%;
  opacity: 0;
  pointer-events: none;
  display: none;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.moodboard-preview.active {
  opacity: 1;
  pointer-events: auto;
  display: block;
  transform: translateY(0);
}

.moodboard-glass-card {
  background: rgba(253, 251, 247, 0.08);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: 40px 30px;
  width: 100%;
  text-align: center;
  color: var(--color-text-white);
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.2);
}

.moodboard-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-bottom: 10px;
}

.moodboard-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(28px, 3.5vw, 36px);
  margin: 0 0 15px 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.moodboard-divider {
  width: 50px;
  height: 1.5px;
  background: var(--color-secondary);
  margin: 0 auto 15px auto;
}

.moodboard-date {
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  opacity: 0.9;
  margin-bottom: 6px;
  font-weight: 500;
}

.moodboard-tagline {
  font-family: "Florentia ExtraLight", serif;
  font-style: italic;
  font-size: 17.5px;
  color: var(--color-secondary);
  margin: 0 0 30px 0;
}

.moodboard-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 15px;
}

.mini-grid-item {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-standard);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.mini-grid-item:hover {
  transform: scale(1.05);
}

/* Storefront Card Preview styling */
.vendor-preview {
  width: 100%;
  opacity: 0;
  pointer-events: none;
  display: none;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vendor-preview.active {
  opacity: 1;
  pointer-events: auto;
  display: block;
  transform: translateY(0);
}

.preview-vendor-card {
  background: #fcfaf6;
  border: 1px solid rgba(209, 154, 77, 0.15);
  border-radius: var(--radius-xl);
  overflow: hidden;
  width: 100%;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.preview-vendor-image {
  height: 190px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.pv-badge-verified {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(52, 103, 57, 0.95);
  border: 1px solid rgba(140, 233, 154, 0.3);
  color: #8ce99a;
  padding: 4px 12px;
  font-family: "Poppins", sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pv-content {
  padding: 24px;
}

.pv-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.pv-category {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  font-weight: 600;
}

.pv-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-secondary);
}

.pv-name {
  font-family: "Florentia Medium", serif;
  font-size: 23px;
  color: var(--color-text-main);
  margin: 0 0 6px 0;
  line-height: 1.2;
}

.pv-tagline {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-light);
  margin: 0 0 20px 0;
  line-height: 1.45;
}

.pv-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(209, 154, 77, 0.08);
  padding-top: 16px;
}

.pv-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  color: var(--color-text-light);
}

.pv-meta svg {
  color: var(--color-secondary);
}

.pv-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.pv-price-label {
  font-family: "Poppins", sans-serif;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

.pv-price-val {
  font-family: "Poppins", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-primary);
}

/* Form Side Panel styling */
.onboard-form-side {
  position: relative;
  height: 100vh;
  background-color: var(--color-background);
  /* extra top padding keeps the wizard clear of the absolute "Quit Setup" link */
  padding: 92px clamp(40px, 8vw, 80px) 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.onboard-quit-link {
  position: absolute;
  top: 40px;
  right: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.3s ease;
  z-index: 10;
}

.onboard-quit-link:hover {
  color: var(--color-primary);
}

.onboard-card-wrapper {
  width: 100%;
  max-width: 480px;
}

/* Onboarding Step Tracking Dots */
.step-timeline-container {
  position: relative;
  width: 100%;
  margin-bottom: 45px;
  transition: opacity 0.4s ease;
}

.step-timeline-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(209, 154, 77, 0.12);
  transform: translateY(-50%);
  z-index: 1;
}

.step-timeline-fill {
  height: 100%;
  background: var(--color-secondary);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-timeline-dots {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.timeline-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fcfaf6;
  border: 1.5px solid rgba(209, 154, 77, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-light);
  transition: all 0.35s ease;
}

.timeline-dot.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 5px rgba(194, 24, 91, 0.08);
}

.timeline-dot.completed {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #ffffff;
}

/* Step Block Layouts */
.onboard-wizard-slider {
  position: relative;
  width: 100%;
}

.onboard-step-block {
  display: none;
  opacity: 0;
  transform: translateY(15px);
  width: 100%;
}

.onboard-step-block.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.onboard-step-header {
  margin-bottom: 35px;
}

.onboard-step-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(25px, 3.5vw, 30px);
  color: var(--color-text-main);
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.onboard-step-desc {
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* Step 0 Cards grid */
.role-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
}

.role-card {
  background: #ffffff;
  border: 1px solid rgba(209, 154, 77, 0.12);
  padding: 35px 20px;
  border-radius: var(--radius-card);
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.role-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(194, 24, 91, 0.04);
}

.role-card-icon {
  color: var(--color-primary);
  margin-bottom: 18px;
  transition: transform 0.4s ease;
}

.role-card:hover .role-card-icon {
  transform: scale(1.1);
}

.role-card-title {
  font-family: "Florentia Medium", serif;
  font-size: 16.5px;
  color: var(--color-text-main);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.role-card-desc {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  color: var(--color-text-light);
  line-height: 1.45;
  flex-grow: 1;
  margin: 0 0 20px 0;
}

.role-card-btn {
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  border-bottom: 1.5px solid rgba(194, 24, 91, 0.15);
  padding-bottom: 2px;
  transition: all 0.3s ease;
}

.role-card:hover .role-card-btn {
  border-bottom-color: var(--color-primary);
  letter-spacing: 0.08em;
}

/* Fields layout inside steps */
.onboard-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.onboard-inline-action {
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 5;
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.onboard-inline-status {
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 5;
  color: var(--color-cta);
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}

.onboard-fields-grid .input-group {
  grid-column: span 1;
}

.onboard-fields-grid .input-group:nth-child(n + 3) {
  grid-column: span 1;
}

.onboard-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}

.onboard-navigation .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-text-main);
  color: #faf8f4;
  border-radius: 999px;
  padding: 5px 24px 5px 5px;
  height: 50px;
  font-family: "Florentia Medium", serif;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  border: none;
  outline: none;
  cursor: pointer;
  transition:
    background 280ms ease,
    box-shadow 280ms ease;
    max-width: max-content;
    min-width: 130px;
}
.step-eyebrow{
  margin-bottom: 15px;
  display: block;
}

.onboard-navigation .back-btn .btn-text {
  position: relative;
  top: 2px;
}

.onboard-navigation .back-btn .icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #faf8f440;
  background: transparent;
  color: #faf8f4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 280ms ease,
    color 280ms ease;
}

.onboard-navigation .back-btn .icon-wrap svg path {
  transition: transform 280ms ease;
}

.onboard-navigation .back-btn:hover {
  background: #2b392d;
  box-shadow: 0 6px 20px rgba(22, 36, 24, 0.15);
}

.onboard-navigation .back-btn:hover .icon-wrap {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Aesthetic theme selector step */
.theme-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.theme-card {
  border: 1px solid rgba(209, 154, 77, 0.15);
  border-radius: var(--radius-standard);
  overflow: hidden;
  cursor: pointer;
  background: #ffffff;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.theme-card.active {
  border-color: var(--color-primary);
  box-shadow: 0 10px 25px rgba(194, 24, 91, 0.04);
  background: rgba(194, 24, 91, 0.01);
}

.theme-card-img {
  height: 95px;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.theme-card:hover .theme-card-img {
  transform: scale(1.04);
}

.theme-card-info {
  padding: 12px;
}

.theme-card-info h4 {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 0 0 4px 0;
}

.theme-card-info p {
  font-family: "Poppins", sans-serif;
  font-size: 10.5px;
  color: var(--color-text-light);
  line-height: 1.35;
  margin: 0;
}

/* Step 3 Categories Checklist */
.categories-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onboard-checkbox-item {
  cursor: pointer;
}

.onboard-checkbox-item input {
  display: none;
}

.check-box-display {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid rgba(209, 154, 77, 0.12);
  padding: 16px 20px;
  border-radius: var(--radius-standard);
  position: relative;
  transition: all 0.3s ease;
}

.onboard-checkbox-item:hover .check-box-display {
  border-color: rgba(209, 154, 77, 0.22);
  background: rgba(209, 154, 77, 0.01);
}

.onboard-checkbox-item input:checked + .check-box-display {
  border-color: var(--color-primary);
  background: rgba(194, 24, 91, 0.02);
}

.check-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(209, 154, 77, 0.04);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.onboard-checkbox-item input:checked + .check-box-display .check-icon-wrap {
  background: rgba(194, 24, 91, 0.08);
}

.check-label-wrap {
  flex-grow: 1;
}

.check-label-wrap h5 {
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 0 0 2px 0;
}

.check-label-wrap p {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  color: var(--color-text-light);
  margin: 0;
}

.checkbox-indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(209, 154, 77, 0.3);
  position: relative;
  transition: all 0.3s ease;
}

.onboard-checkbox-item input:checked + .check-box-display .checkbox-indicator {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.onboard-checkbox-item
  input:checked
  + .check-box-display
  .checkbox-indicator::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Step 4 Range inputs and sliders */
.range-sliders-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.onboard-slider-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slider-label-row {
  display: flex;
  justify-content: space-between;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: var(--color-text-light);
}

.slider-label-row strong {
  color: var(--color-primary);
  font-weight: 600;
}

.onboard-range-input {
  appearance: none;
  width: 100%;
  height: 3px;
  background: rgba(209, 154, 77, 0.15);
  outline: none;
  border-radius: 2px;
}

.onboard-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(194, 24, 91, 0.2);
  transition: transform 0.15s ease;
}

.onboard-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.onboard-range-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(194, 24, 91, 0.2);
}

.onboard-range-input:focus-visible {
  outline: none;
}
.onboard-range-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(194, 24, 91, 0.25);
}
.onboard-range-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(194, 24, 91, 0.25);
}

/* min / max scale under the slider */
.slider-scale-row {
  display: flex;
  justify-content: space-between;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-light);
  opacity: 0.75;
  margin-top: -4px;
}


/* Vendor story upload drag block */
.vd-upload-box {
  border: 1.5px dashed rgba(209, 154, 77, 0.25);
  border-radius: var(--radius-standard);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background: transparent;
  transition: all 0.3s ease;
}

.vd-upload-box:hover {
  border-color: var(--color-primary);
  background: rgba(209, 154, 77, 0.01);
}

.vd-upload-box h5 {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 0 0 4px 0;
}

.vd-upload-box p {
  font-family: "Poppins", sans-serif;
  font-size: 10.5px;
  color: var(--color-text-light);
  margin: 0;
}

/* Vendor Verification List card */
.vd-verif-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #ffffff;
  border: 1px solid rgba(209, 154, 77, 0.12);
  padding: 24px;
  border-radius: var(--radius-card);
}

.verif-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.verif-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(209, 154, 77, 0.2);
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}

.verif-check.active {
  background: #346739;
  border-color: #346739;
}

.verif-check.active::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.verif-text strong {
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  color: var(--color-text-main);
  display: block;
  margin-bottom: 2px;
}

.verif-text p {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  color: var(--color-text-light);
  margin: 0;
  line-height: 1.4;
}

/* Fullscreen completion overlay */
.onboard-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(252, 250, 246, 0.98);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.onboard-loader-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.onboard-loader-content {
  text-align: center;
  max-width: 340px;
}

.onboard-loader-ring {
  width: 50px;
  height: 50px;
  border: 2.5px solid rgba(209, 154, 77, 0.15);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  margin: 0 auto 24px auto;
  animation: spin 1s linear infinite;
}

.onboard-loader-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}
.onboard-loader-brand svg {
  height: 28px;
  width: auto;
  display: block;
  color: var(--color-primary);
}

.onboard-loader-status {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: var(--color-text-light);
  margin: 0;
  font-style: italic;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Onboarding Responsive Breakpoints */
@media (max-width: 1024px) {
  /* Same fix as auth: the wizard steps are tall, so on mobile let the page
     scroll normally instead of trapping content in a clipped 100vh box. */
  .onboard-page {
    height: auto;
    overflow: visible;
  }

  .onboard-split-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }

  .onboard-preview-side {
    display: none;
  }

  .onboard-form-side {
    /* clear the absolute "Quit Setup" link with an intentional gap */
    padding: 88px 24px 60px;
    height: auto;
    min-height: 100vh;
    justify-content: flex-start;
    overflow-y: visible;
  }

  .onboard-quit-link {
    top: 24px;
    right: 24px;
  }

  .onboard-card-wrapper {
    max-width: 100%;
  }
}

/* Custom Review Lightbox Modal */
.review-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.review-lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 36, 24, 0.45);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.lightbox-container {
  position: relative;
  z-index: 10;
  max-width: 960px;
  width: 90%;
  background: var(--color-background);
  border: 1px solid rgba(209, 154, 77, 0.25);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(22, 36, 24, 0.18);
  transform: scale(0.96) translateY(10px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.review-lightbox-modal.active .lightbox-container {
  transform: scale(1) translateY(0);
}

.lightbox-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(209, 154, 77, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-main);
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.lightbox-close-btn:hover {
  background: var(--color-primary);
  color: var(--color-text-white);
  border-color: var(--color-primary);
  transform: rotate(90deg);
}

.lightbox-content {
  display: flex;
  min-height: 480px;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

.lightbox-left {
  flex: 1.2;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fffdfc;
}

.lightbox-rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.lightbox-stars {
  display: flex;
  gap: 4px;
  color: var(--color-secondary);
}

.lightbox-date {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: var(--color-text-light);
  font-weight: 500;
}

.lightbox-quote {
  font-family: "Florentia Medium", serif;
  font-size: clamp(20px, 3vw, 24px);
  line-height: 1.45;
  color: var(--color-text-main);
  margin-bottom: 30px;
  position: relative;
  font-style: italic;
  font-weight: 500;
}

.lightbox-author-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px dashed var(--color-border);
  padding-top: 20px;
}

.lightbox-author-name {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
}

.lightbox-author-label {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.lightbox-right {
  flex: 1;
  background: #151015;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.lightbox-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  
  .lightbox-left {
    padding: 30px 24px;
  }

  .lightbox-right {
    height: 260px;
    flex: none;
  }
  
  .lightbox-close-btn {
    top: 15px;
    right: 15px;
  }
  
  .lightbox-quote {
    font-size: 18px;
    margin-bottom: 20px;
  }
}

/* Badge SVG sizing is handled by .vendor-badge-icon in the badge component. */

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE ADDITIONS — 880px · 480px · 360px
   Covers all gaps not addressed by existing breakpoints
   ========================================================================== */

/* ── 880px — Large Tablet / Small Laptop ──────────────────────────────── */
@media (max-width: 880px) {
  /* Hero */
  /* Vendor CTA section */
  .vendor-cta-section {
    padding: 70px 0;
  }

  /* Archive layout */
  .archive-layout-container {
    padding-bottom: 80px;
  }

  /* Discover */
  .discover-section {
    padding: 70px 0 0 0;
  }
  .discover-cta-wrap {
    margin-top: 50px;
    padding-top: 50px;
  }

  /* Process */
  .process-section {
    padding: 40px 0 60px 0;
  }

  /* Testimonials */
  .testimonials-section {
    padding: 70px 0 50px 0;
  }

  /* Footer */
  .footer-section {
    padding: 80px 0 40px 0;
  }
}

/* ── 480px — Mobile ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Vendor card in scroll slider */
  .vendor-card {
    width: 240px;
  }

  /* Archive hero */
  .archive-hero {
    padding: 100px 0 30px 0;
  }

  /* Profile hero */
  .profile-title {
    font-size: clamp(24px, 6vw, 36px);
  }
  .profile-meta-row {
    gap: 10px;
  }
  .profile-meta-item {
    font-size: 12px;
  }
  .profile-actions-row {
    gap: 8px;
  }
  .profile-action-btn {
    padding: 6px 12px;
    font-size: 11.5px;
  }

  /* Profile content */
  .profile-content-container {
    padding-top: 30px;
    padding-bottom: 60px;
  }
  .profile-card-block {
    padding: 30px 20px;
    margin-bottom: 20px;
  }
  .profile-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery — single column at 480px */
  .profile-gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item:nth-child(5n + 1) {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }

  /* Packages */
  .packages-list-container {
    grid-template-columns: 1fr;
  }
  .service-toggle { padding: 16px 18px; }
  .service-panel  { padding: 0 18px 18px; }
  .service-name   { font-size: 15.5px; }

  /* Concierge card */
  .concierge-card {
    padding: 24px 16px;
  }
  .discover-cta-wrap {
    margin-top: 40px;
    padding-top: 40px;
  }

  /* Testimonials slider */
  .testimonials-slider-wrapper {
    padding: 12px 38px;
  }
  .prev-card-slide {
    left: 2px;
  }
  .next-card-slide {
    right: 2px;
  }

  /* Auth */
  .auth-form-side {
    padding: 80px 16px 50px;
  }
  .back-home-link {
    top: 16px;
    left: 16px;
  }
  .auth-form-wrapper {
    max-width: 100%;
  }

  /* Onboarding — role cards go single column */
  .role-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .role-card {
    padding: 24px 16px;
    flex-direction: row;
    text-align: left;
    align-items: center;
  }
  .role-card-icon {
    margin-bottom: 0;
    margin-right: 0;
    flex-shrink: 0;
  }
  .role-card .role-card-title,
  .role-card .role-card-desc {
    text-align: left;
  }

  /* Onboarding form fields single column */
  .onboard-fields-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Theme cards 1 col */
  .theme-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Vendor benefit cards */
  .creator-benefits-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Vendor CTA */
  .vendor-cta-section {
    padding: 60px 0;
  }

  /* Why milanzo grid */
  .why-milanzo-card {
    padding: 28px 20px;
  }

  /* Process card mobile */
  .process-card-item {
    padding: 24px 16px;
  }
}

/* ── 360px — Small Mobile ─────────────────────────────────────────────── */
@media (max-width: 360px) {
  /* Vendor card even smaller */
  .vendor-card {
    width: 210px;
  }

  /* Hero headline minimum readable size */
  .hero-headline {
    font-size: clamp(24px, 8vw, 32px);
  }

  /* Search bar */
  .hero-search {
    padding: 12px;
  }

  /* Categories grid tighter */
  .categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
    gap: 16px 10px;
  }
  .category-image-wrap {
    max-width: 80px;
  }
  .category-name {
    font-size: 13px;
  }

  /* Stats container */
  .stats-container {
    padding: 28px 12px;
    gap: 24px;
  }
  .stat-num {
    font-size: clamp(28px, 7vw, 40px);
  }

  /* Testimonials slider very tight */
  .testimonials-slider-wrapper {
    padding: 10px 30px;
  }
  .prev-card-slide {
    left: 0;
  }
  .next-card-slide {
    right: 0;
  }
  .testimonial-card {
    padding: 24px 16px;
  }

  /* Process card */
  .process-card-item {
    padding: 20px 14px;
  }

  /* Concierge card */
  .concierge-card {
    padding: 20px 12px;
    border-radius: 16px;
  }

  /* Profile card block */
  .profile-card-block {
    padding: 30px 16px;
  }
  /* Footer newsletter */
  .newsletter-input-wrap {
    max-width: 100%;
  }

  /* Auth form side */
  .auth-form-side {
    padding: 72px 12px 44px;
  }

  /* Why milanzo card */
  .why-milanzo-card {
    padding: 24px 16px;
  }

  /* Vendor benefit card */
  .vendor-benefit-card {
    padding: 16px;
  }

  /* Process section */
  .process-card-body p {
    font-size: 14px;
  }

  /* FAQ */
  .faq-trigger {
    padding: 16px 0;
  }
  .faq-answer {
    padding: 0 16px 16px 16px;
  }

  /* Lightbox */
  .lightbox-close-btn {
    top: 12px;
    right: 12px;
  }

  /* Onboarding */
  .onboard-form-side {
    padding: 80px 12px 50px;
  }
  .onboard-card-wrapper {
    max-width: 100%;
  }
  .onboard-navigation {
    flex-direction: column;
    gap: 12px;
  }
  .onboard-navigation .back-btn,
  .onboard-navigation .primary-btn {
    width: 100%;
    justify-content: center;
  }

  /* Discover grid */
  .discover-grid {
    gap: 16px;
  }
}

/* ── 1440px+ Large Desktop: comfortable spacing ─────────────────────── */
@media (min-width: 1440px) {
  /* Ensure max-width containers have breathing room */
  .hero-container,
  .categories-container,
  .vendors-container,
  .discover-container,
  .process-container,
  .why-milanzo-container,
  .vendor-cta-container,
  .testimonials-container,
  .footer-container,
  .archive-hero-container,
  .archive-layout-container,
  .profile-hero-content,
  .profile-content-container {
    max-width: var(--max-width);
    padding-inline: clamp(48px, 5vw, 80px);
  }
}

/* ==========================================================================
   OTP Email Verification Modal
   ========================================================================== */

/* Backdrop */
.otp-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 10, 8, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.otp-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Card */
.otp-modal-card {
  position: relative;
  background: #fff9f5;
  border: 1px solid rgba(209, 154, 77, 0.18);
  border-radius: 20px;
  padding: 44px 40px 36px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 4px 6px rgba(139, 90, 43, 0.04),
    0 20px 60px rgba(139, 90, 43, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.otp-modal-backdrop.active .otp-modal-card {
  transform: translateY(0) scale(1);
}

/* Close button */
.otp-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(209, 154, 77, 0.2);
  background: transparent;
  color: var(--color-text-light, #8b7355);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.otp-modal-close:hover {
  background: rgba(209, 154, 77, 0.1);
  color: var(--color-primary, #d19a4d);
  border-color: var(--color-primary, #d19a4d);
}

/* Icon */
.otp-modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(209, 154, 77, 0.12), rgba(209, 154, 77, 0.04));
  border: 1px solid rgba(209, 154, 77, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--color-primary, #d19a4d);
}

/* Title & description */
.otp-modal-title {
  font-family: 'Florentia Medium', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-main, #1a1612);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.otp-modal-desc {
  font-size: 13.5px;
  color: var(--color-text-light, #7a6e62);
  line-height: 1.6;
  margin: 0 0 28px;
}

.otp-modal-desc strong {
  color: var(--color-primary, #d19a4d);
  font-weight: 600;
}

/* OTP digit inputs row */
.otp-digits-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}

.otp-digit-input {
  width: 46px;
  height: 54px;
  border-radius: 10px;
  border: 1.5px solid rgba(209, 154, 77, 0.3);
  background: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-main, #1a1612);
  text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  caret-color: var(--color-primary, #d19a4d);
  appearance: textfield;
}

.otp-digit-input::-webkit-outer-spin-button,
.otp-digit-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.otp-digit-input:focus {
  border-color: var(--color-primary, #d19a4d);
  box-shadow: 0 0 0 3px rgba(209, 154, 77, 0.15);
  background: #fffdf8;
}

.otp-digit-input.otp-filled {
  border-color: var(--color-primary, #d19a4d);
  background: rgba(209, 154, 77, 0.05);
}

.otp-digit-input.otp-error {
  border-color: #e05252;
  background: rgba(224, 82, 82, 0.04);
  animation: otp-shake 0.35s ease;
}

.otp-digit-sep {
  font-size: 18px;
  color: rgba(209, 154, 77, 0.4);
  user-select: none;
  padding: 0 2px;
}

@keyframes otp-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

/* Verify button */
.otp-modal-verify-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 20px;
}

/* Footer */
.otp-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12.5px;
}

.otp-timer-text {
  color: var(--color-text-light, #7a6e62);
}

.otp-resend-btn {
  background: transparent;
  border: none;
  color: var(--color-primary, #d19a4d);
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.otp-resend-btn:hover {
  color: var(--color-primary-dark, #b07f35);
}

/* Mobile */
@media (max-width: 480px) {
  .otp-modal-card {
    padding: 36px 24px 28px;
  }

  .otp-digit-input {
    width: 40px;
    height: 48px;
    font-size: 20px;
    border-radius: 8px;
  }

  .otp-digits-row {
    gap: 6px;
  }
}



/* ==========================================================================
   Milanzo unified feedback system  (assets/js/milanzo-feedback.js)
   Global toasts + inline "where the action happened" messages + button spinner
   ========================================================================== */

@keyframes mz-spin-kf { to { transform: rotate(360deg); } }

.mz-spin {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: mz-spin-kf 0.6s linear infinite;
  vertical-align: -0.15em;
  flex: none;
}

/* hide any legacy single-purpose toast node once the new system is loaded */
.mz-legacy-hidden { display: none !important; }

/* ---- Global toast stack ---- */
.mz-toast-host {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.mz-toast {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--color-text-main, #162418);
  border: 1px solid rgba(22, 36, 24, 0.1);
  border-left: 4px solid var(--color-text-light, #6e6666);
  box-shadow: 0 12px 30px rgba(22, 36, 24, 0.14);
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.mz-toast.is-visible { opacity: 1; transform: translateY(0); }
.mz-toast.is-leaving { opacity: 0; transform: translateX(24px); }
.mz-toast__icon { flex: none; display: inline-flex; margin-top: 1px; }
.mz-toast__msg { flex: 1; }
.mz-toast__body { flex: 1; min-width: 0; }
.mz-toast__title {
  margin: 0;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--color-text-main, #162418);
  overflow-wrap: anywhere;
}
.mz-toast__desc {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-light, #6e6666);
  overflow-wrap: anywhere;
}
.mz-toast__close {
  flex: none;
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-light, #6e6666);
  opacity: 0.55;
  padding: 0 2px;
  margin: -2px -2px 0 0;
}
.mz-toast__close:hover { opacity: 1; }
.mz-toast__close:focus-visible {
  outline: 2px solid var(--color-primary, #c2185b);
  outline-offset: 2px;
  border-radius: 4px;
}
.mz-toast__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
  background: currentColor;
  opacity: 0.35;
  animation: mz-toast-progress 4500ms linear forwards;
}
.mz-toast__progress.is-paused { animation-play-state: paused; }
@keyframes mz-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes mz-toast-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(0) scale(1.03); }
}
.mz-toast.mz-pulse { animation: mz-toast-pulse 0.4s ease-out 1; }

.mz-toast--success { border-left-color: var(--color-cta, #346739); }
.mz-toast--success .mz-toast__icon,
.mz-toast--success .mz-toast__progress { color: var(--color-cta, #346739); }
.mz-toast--error { border-left-color: var(--color-primary, #c2185b); }
.mz-toast--error .mz-toast__icon,
.mz-toast--error .mz-toast__progress { color: var(--color-primary, #c2185b); }
.mz-toast--warning { border-left-color: var(--color-secondary, #e59d39); }
.mz-toast--warning .mz-toast__icon,
.mz-toast--warning .mz-toast__progress { color: var(--color-secondary, #e59d39); }
.mz-toast--loading { border-left-color: var(--color-secondary, #e59d39); }
.mz-toast--loading .mz-toast__icon,
.mz-toast--loading .mz-toast__progress { color: var(--color-secondary, #e59d39); }
.mz-toast--info { border-left-color: var(--color-text-light, #6e6666); }
.mz-toast--info .mz-toast__icon,
.mz-toast--info .mz-toast__progress { color: var(--color-text-light, #6e6666); }

/* ---- Inline contextual feedback ---- */
.mz-feedback {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid transparent;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease, max-height 0.22s ease,
    margin 0.22s ease, padding 0.22s ease;
}
.mz-feedback.is-visible {
  max-height: 240px;
  opacity: 1;
  transform: translateY(0);
}
.mz-feedback__icon { flex: none; display: inline-flex; margin-top: 1px; }
.mz-feedback__msg { flex: 1; }
.mz-feedback__close {
  flex: none;
  background: none;
  border: 0;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  padding: 0 2px;
}
.mz-feedback__close:hover { opacity: 1; }

.mz-feedback--success {
  background: #eef7ef;
  border-color: rgba(52, 103, 57, 0.28);
  color: #22572a;
}
.mz-feedback--error {
  background: #fdecec;
  border-color: rgba(194, 24, 91, 0.28);
  color: #9a1f45;
}
.mz-feedback--warning {
  background: #fdf4e6;
  border-color: rgba(229, 157, 57, 0.35);
  color: #8a5a12;
}
.mz-feedback--loading,
.mz-feedback--info {
  background: #f4f2ef;
  border-color: rgba(22, 36, 24, 0.14);
  color: var(--color-text-main, #162418);
}
.mz-feedback--loading .mz-feedback__close { display: none; }

/* Field error now lives inside .input-group; keep it snug under the control */
.input-group > .mz-field-error { margin-top: 6px; }
.onboard-fields-grid .input-group > .mz-field-error { margin-top: 4px; }

/* OTP modal inline message slot */
.otp-modal-msg:empty { display: none; }
.otp-modal-msg .mz-feedback { margin: 4px 0 14px; text-align: left; }

/* ---- Inline field-level errors ---- */
.mz-field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 5px 0 0;
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-primary, #c2185b);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-2px);
  transition: opacity 0.18s ease, transform 0.18s ease, max-height 0.18s ease,
    margin 0.18s ease;
}
.mz-field-error.is-visible {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
}
.mz-field-error--ok { color: var(--color-cta, #346739); }
.mz-field-error__mark { flex: none; display: inline-flex; margin-top: 1px; }

/* Invalid / valid control states — floating-label auth inputs + boxed inputs */
.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--color-primary, #c2185b) !important;
}
.input-group .auth-input.is-invalid ~ .input-line,
.input-group input.is-invalid ~ .input-line { background: var(--color-primary, #c2185b); }
.input-group .auth-input.is-invalid ~ .auth-label,
.input-group input.is-invalid ~ .auth-label { color: var(--color-primary, #c2185b); }
.auth-input.is-invalid:focus,
input.is-invalid:focus,
textarea.is-invalid:focus {
  outline: none;
  box-shadow: 0 3px 0 0 rgba(194, 24, 91, 0.16);
}
.is-valid.auth-input ~ .input-line,
.input-group input.is-valid ~ .input-line { background: var(--color-cta, #346739); }

/* ---- Button loading / done state (works with .primary-btn and friends) ---- */
button.is-loading,
.is-loading {
  cursor: progress !important;
}
.is-loading .btn-text,
.is-done .btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mz-done-check { font-weight: 700; }

@media (max-width: 560px) {
  .mz-toast-host {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    align-items: stretch;
  }
  .mz-toast { font-size: 13px; }
  .mz-toast__title { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .mz-spin { animation-duration: 1.2s; }
  .mz-toast, .mz-feedback, .mz-field-error { transition-duration: 0.01ms; }
  .mz-toast.is-leaving { transform: none; }
  .mz-toast.mz-pulse { animation: none; }
  .mz-toast__progress { animation: none; opacity: 0; }
}

/* OTP modal — attention pulse when it opens (makes the transition unmistakable) */
@keyframes mz-otp-pulse {
  0%   { box-shadow: 0 4px 6px rgba(139,90,43,0.04), 0 20px 60px rgba(139,90,43,0.14), 0 0 0 0 rgba(194,24,91,0.45); }
  100% { box-shadow: 0 4px 6px rgba(139,90,43,0.04), 0 20px 60px rgba(139,90,43,0.14), 0 0 0 14px rgba(194,24,91,0); }
}
.otp-modal-card--pulse { animation: mz-otp-pulse 0.7s ease-out 1; }

.onboard-inline-action:disabled { opacity: 0.6; cursor: progress; }
.onboard-inline-action .mz-spin { width: 0.85em; height: 0.85em; margin-right: 5px; }

@media (prefers-reduced-motion: reduce) {
  .otp-modal-card--pulse { animation: none; }
}

/* ==========================================================================
   Content Pages — About Us / Contact Us
   ========================================================================== */

.content-page {
  position: relative;
  z-index: 2;
  padding: 72px 0 96px;
}

.content-wrap {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
  margin-bottom: 64px;
}

.content-wrap:last-child {
  margin-bottom: 0;
}

.content-heading {
  font-family: "Florentia Medium", serif;
  font-size: clamp(24px, 3.4vw, 34px);
  color: var(--color-text-main);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 20px;
}

.content-prose p {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-light);
  margin-bottom: 16px;
}

.content-prose p:last-child {
  margin-bottom: 0;
}

/* Value cards (About) */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.value-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  backdrop-filter: blur(6px);
}

.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-micro);
  background: rgba(194, 24, 91, 0.08);
  color: var(--color-primary);
  margin-bottom: 16px;
}

.value-card h3 {
  font-family: "Florentia Medium", serif;
  font-size: 19px;
  color: var(--color-text-main);
  margin-bottom: 8px;
}

.value-card p {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-light);
}

/* Shared CTA block */
.content-cta {
  text-align: center;
  background: linear-gradient(180deg, #f5ebe0 0%, #ffffff 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 48px 32px;
}

.content-cta p {
  font-family: "Poppins", sans-serif;
  color: var(--color-text-light);
  margin: 0 auto 24px;
  max-width: 460px;
}

.content-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(22, 36, 24, 0.25);
  background: transparent;
  color: var(--color-text-main);
  font-family: "Florentia Medium", serif;
  font-size: 16px;
  text-decoration: none;
  transition: all 260ms ease;
}

.ghost-btn:hover {
  background: rgba(22, 36, 24, 0.05);
  border-color: var(--color-text-main);
}

/* Contact layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: start;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 22px;
}

.info-card .value-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.info-card h3 {
  font-family: "Florentia Medium", serif;
  font-size: 16px;
  color: var(--color-text-main);
  margin-bottom: 4px;
}

.info-card p,
.info-card a {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-light);
  text-decoration: none;
}

.info-card a:hover {
  color: var(--color-primary);
}

/* Contact form */
.contact-form {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  backdrop-filter: blur(6px);
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-field {
  margin-bottom: 18px;
}

.contact-field label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-main);
  margin-bottom: 7px;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-main);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-standard);
  padding: 13px 15px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.contact-field textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.12);
}

.contact-form .primary-btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.contact-form-status {
  display: none;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--radius-standard);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  background: rgba(52, 103, 57, 0.1);
  color: var(--color-cta);
}

.contact-form-status.is-visible {
  display: block;
}

@media (max-width: 900px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .content-page {
    padding: 48px 0 72px;
  }
  .content-wrap {
    margin-bottom: 48px;
  }
  .contact-form,
  .content-cta {
    padding: 26px 20px;
  }
  .contact-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ==========================================================================
   Help Center / Success Stories
   ========================================================================== */

.content-wrap--wide {
  max-width: var(--max-width);
}

.content-lead {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: 24px;
  max-width: 620px;
}

/* Support cards (Help Center) */
.help-support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.support-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.support-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(22, 36, 24, 0.08);
}

.support-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-micro);
  background: rgba(194, 24, 91, 0.08);
  color: var(--color-primary);
  flex-shrink: 0;
}

.support-card--whatsapp .support-icon {
  background: rgba(37, 211, 102, 0.14);
  color: #1faa55;
}

.support-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.support-card-label {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: var(--color-text-light);
}

.support-card-value {
  font-family: "Florentia Medium", serif;
  font-size: 17px;
  color: var(--color-text-main);
}

/* FAQ accordion */
/* Legacy <details> FAQ styles removed — every FAQ now uses .faq-accordion. */

/* Success Stories — hero rating summary + review grid, nothing else. */
.stories-hero .archive-subtitle {
  max-width: 620px;
  margin-inline: auto;
}

.stories-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
}

.stories-rating-stars {
  display: flex;
  gap: 4px;
  color: var(--color-secondary);
}

.stories-rating-score {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-main);
  margin: 6px 0 0;
}

.stories-rating-score strong {
  font-family: "Florentia Bold", serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--color-primary);
  vertical-align: -2px;
  margin-right: 4px;
}

.stories-rating-count {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0;
}

/* The grid is the whole page body — give it room to breathe on its own. */
.stories-page {
  padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 9vw, 120px);
}

.stories-wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 24px;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.story-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-card-bg);
  backdrop-filter: blur(6px);
}

/* Author block pins to the bottom so equal-height cards stay aligned. */
.story-card .story-author {
  margin-top: auto;
}

.story-card[hidden] {
  display: none;
}

.stories-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.story-stars {
  display: flex;
  gap: 3px;
  color: var(--color-secondary);
  margin-bottom: 12px;
}

.story-quote {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-main);
  margin: 0 0 22px;
}

.story-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.story-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.story-author-name {
  font-family: "Florentia Medium", serif;
  font-size: 14.5px;
  color: var(--color-text-main);
}

.story-author-meta {
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  color: var(--color-text-light);
}

.story-author-meta a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.stories-empty {
  text-align: center;
  font-family: "Poppins", sans-serif;
  color: var(--color-text-light);
  padding: 40px 0;
}

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

@media (max-width: 900px) {
  .help-support-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .stories-grid { grid-template-columns: 1fr; gap: 18px; }
  .stories-wrap { padding-inline: 18px; }
  .stories-rating { margin-top: 24px; }
}

/* ==========================================================================
   Content Pages — align to profile-page card styling
   ========================================================================== */

.content-page .content-wrap {
  background: rgba(253, 251, 247, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(209, 154, 77, 0.12);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: 40px;
  transition: border-color 0.4s ease;
}

.content-page .content-wrap:hover {
  border-color: rgba(209, 154, 77, 0.22);
}

.content-page .content-wrap:last-child {
  margin-bottom: 0;
}

.content-heading {
  font-family: "Florentia Medium", serif;
  font-size: 24px;
  color: var(--color-text-main);
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 10px;
  letter-spacing: 0;
  line-height: 1.25;
}

.content-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 1.5px;
  background: var(--color-secondary);
}

/* CTA block keeps its own tint but matches the card frame */
.content-page .content-cta {
  background: linear-gradient(180deg, rgba(245, 235, 224, 0.7) 0%, rgba(253, 251, 247, 0.65) 100%);
  text-align: center;
}

.content-page .content-cta .content-heading::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Inner cards sit on the glass panel — lighten them so they don't double up */
.value-card,
.support-card,
.contact-form,
.info-card,
.story-card {
  background: rgba(255, 255, 255, 0.55);
}

.contact-form {
  border-radius: var(--radius-card);
  padding: clamp(20px, 3vw, 28px);
}

/* FAQ — pill rows like profile FAQ */
@media (max-width: 640px) {
  .content-page .content-wrap {
    padding: 22px 18px;
    margin-bottom: 28px;
  }
}

/* ==========================================================================
   Marketing pages (about / contact / help) —
   photographic hero + home-page style full-width sections
   ========================================================================== */

.ab-body { background: #ffffff; }

/* ── Hero: full-bleed photograph, navbar rides over it ─────────────────── */
.ab-navbar:not(.scrolled) {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
}

.ab-navbar:not(.scrolled) .nav-link,
.ab-navbar:not(.scrolled) .nav-link:hover { color: #ffffff; }

/* .ab-navbar:not(.scrolled) .logo svg { filter: brightness(0) invert(1); } */

.ab-hero {
  position: relative;
  isolation: isolate;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ab-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: -2;
}

.ab-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(28, 12, 20, 0.78) 0%,
    rgba(28, 12, 20, 0.55) 45%,
    rgba(28, 12, 20, 0.25) 100%
  );
}

.ab-hero-inner {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 160px clamp(20px, 4vw, 48px) 90px;
}

.ab-hero-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(38px, 6.4vw, 78px);
  line-height: 1.08;
  color: #ffffff;
  margin: 0 0 28px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.ab-hero-sub {
  font-family: "Poppins", sans-serif;
  font-size: clamp(12px, 1.15vw, 14px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin: 0;
}

/* ── Section shell, matching the home page's bands ─────────────────────── */
.ab-section {
  position: relative;
  z-index: 5;
  padding: clamp(64px, 8vw, 110px) 0;
  background: #ffffff;
}

/* Alternating warm band, same family as the home page's section washes. */
.ab-section--tint {
  background: linear-gradient(180deg, #ffeae5 0%, #faf5ef 55%, #ffffff 100%);
}

.ab-container {
  max-width: var(--max-width);
  padding-inline: clamp(20px, 4vw, 48px);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

/* Centred section header — eyebrow / title / subtitle, as on the home page. */
.ab-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.ab-eyebrow {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.ab-title {
  font-family: "Florentia Medium", serif;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-main);
  margin: 0 0 20px;
}

.ab-subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0;
}

/* Forms, FAQ and support cards keep a readable measure inside the wide band. */
.ab-narrow {
  max-width: 900px;
  margin-inline: auto;
}

.ab-narrow--form {
  max-width: 720px;
}

/* ── Split band: copy beside an image, no card frame ───────────────────── */
.ab-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.ab-split--reverse .ab-split-media { order: -1; }

.ab-split-copy p {
  font-family: "Poppins", sans-serif;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--color-text-light);
  margin: 0 0 18px;
}

.ab-split-copy p:last-of-type { margin-bottom: 0; }

.ab-split-media {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(209, 154, 77, 0.12);
}

.ab-split-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.ab-inline-cta {
  margin-top: 28px;
  display: inline-flex;
}

/* ── Facts row under the story copy ───────────────────────────────────── */
.ab-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 28px;
  margin: 32px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(209, 154, 77, 0.2);
}

.ab-facts > div { display: flex; flex-direction: column; gap: 5px; }

.ab-facts dt {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.ab-facts dd {
  font-family: "Florentia Medium", serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-text-main);
  margin: 0;
}

/* ── Comparison table — hairline rules, no card frame ─────────────────── */
.ab-compare {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  border-collapse: collapse;
}

.ab-compare thead td,
.ab-compare thead th {
  padding: 0 16px 16px;
  border-bottom: 2px solid rgba(209, 154, 77, 0.35);
}

.ab-compare-us,
.ab-compare-them {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.ab-compare-us { color: var(--color-primary); }
.ab-compare-them { color: var(--color-text-light); }

.ab-compare tbody th {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: var(--color-text-main);
  padding: 17px 16px;
  border-bottom: 1px solid rgba(209, 154, 77, 0.16);
}

.ab-compare tbody td {
  width: 110px;
  padding: 17px 0;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid rgba(209, 154, 77, 0.16);
}

/* Soft brand wash carries the eye down the Milanzo column. */
.ab-compare thead th:first-of-type,
.ab-compare tbody td.ab-yes { background: rgba(194, 24, 91, 0.035); }

.ab-compare tbody td::before { display: inline-block; font-size: 18px; line-height: 1; }
.ab-compare tbody td.ab-yes::before { content: "\2713"; color: #10b981; font-weight: 700; }
.ab-compare tbody td.ab-no::before { content: "\2715"; color: #d0a3b2; }

/* ── Vision / mission / values accordion — rules, not boxes ───────────── */
.ab-accordion {
  max-width: 860px;
  margin-inline: auto;
  border-top: 1px solid rgba(209, 154, 77, 0.2);
}

.ab-acc-item { border-bottom: 1px solid rgba(209, 154, 77, 0.2); }

.ab-acc-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
  font-family: "Florentia Medium", serif;
  font-size: clamp(19px, 2.2vw, 24px);
  color: var(--color-text-main);
  transition: color 0.2s ease;
}

.ab-acc-item > summary:hover { color: var(--color-primary); }
.ab-acc-item > summary::-webkit-details-marker { display: none; }

.ab-acc-item > summary::after {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) center/100% 2px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) center/2px 100% no-repeat;
  transition: transform 0.25s ease;
}

/* The plus rotates into a cross when the panel opens. */
.ab-acc-item[open] > summary::after { transform: rotate(45deg); }

.ab-acc-body { padding: 0 4px 26px; }

.ab-acc-body p {
  font-family: "Poppins", sans-serif;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--color-text-light);
  margin: 0;
  max-width: 720px;
}

.ab-values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
}

.ab-values li {
  position: relative;
  padding-left: 20px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-light);
}

.ab-values li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary);
}

.ab-values strong {
  font-family: "Florentia Medium", serif;
  font-weight: 400;
  color: var(--color-text-main);
}

/* ── Stats — the home-page counter, unboxed ───────────────────────────── */
.ab-stats-section { background: linear-gradient(180deg, #ffffff 0%, #faf5ef 100%); }

/* Strip the home page's white card so the numbers sit on the band itself. */
.stats-container.ab-stats {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.stats-container.ab-stats[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.stats-container.ab-stats[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

/* ── Closing CTA — home's gradient band, centred ──────────────────────── */
.ab-cta-section { border-bottom: none; }

.ab-cta-content {
  text-align: center;
  margin-inline: auto;
}

.ab-cta-content .vendor-cta-desc { margin-inline: auto; }

.ab-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 0px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ab-hero { min-height: 0; }
  .ab-hero-inner { padding: 140px clamp(20px, 5vw, 32px) 72px; }

  .ab-split { grid-template-columns: 1fr; gap: 32px; }
  /* Image leads each split on narrow screens. */
  .ab-split-media { order: -1; }
  .ab-split-media img { min-height: 260px; }

  .ab-values { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ab-compare tbody td { width: 64px; }
  .ab-compare tbody th { font-size: 14px; padding: 14px 10px 14px 0; }
  .ab-compare thead td, .ab-compare thead th { padding: 0 6px 14px; }
  .ab-facts { grid-template-columns: 1fr; }
  .ab-cta-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 560px) {
  .stats-container.ab-stats,
  .stats-container.ab-stats[data-count="3"] { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .stats-container.ab-stats .stat-item:nth-child(even)::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   404 — NOT FOUND
   One section, and only one. It reuses the marketing hero shell, so the
   only new pieces are the numeral and the requested-path line.
   ══════════════════════════════════════════════════════════════════════ */

/* This section IS the page, so it is sized generously — but not to a full
   viewport. The copy here is four short lines; at 100svh it sat marooned
   in the top third with a dead half-screen under it. */
.nf-hero {
  min-height: min(82vh, 720px);
}

/* The decor photograph behind this hero is busier than the marketing ones,
   so the scrim is carried further across to keep the copy legible. */
.nf-hero::after {
  background: linear-gradient(
    100deg,
    rgba(28, 12, 20, 0.88) 0%,
    rgba(28, 12, 20, 0.72) 50%,
    rgba(28, 12, 20, 0.42) 100%
  );
}

/* The section centres its content with flexbox, so what these two values
   do is offset that centre. The navbar is fixed and covers roughly the
   top 90px, so top-minus-bottom is kept at ~90: the copy then sits
   optically centred in the space actually left to it, at any height. */
.nf-hero .ab-hero-inner {
  padding-top: 130px;
  padding-bottom: 40px;
}

.nf-hero .ab-hero-title {
  margin-bottom: 18px;
}

.nf-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 30px;
}

/* Ghost button sits on the dark scrim here, so invert its palette. */
.nf-ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

.nf-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

@media (max-width: 560px) {
  .nf-actions { gap: 10px; }
  .nf-actions .primary-btn,
  .nf-actions .nf-ghost { width: 100%; }
  /* The navbar is shorter on a phone, so the offset that centres the copy
     under it shrinks to match. */
  .nf-hero .ab-hero-inner { padding-top: 112px; padding-bottom: 36px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LEGAL PAGES — privacy policy, terms of use
   Marketing hero on top, then a sticky contents rail beside a single
   readable column. No card frames, matching the other content bands.
   ══════════════════════════════════════════════════════════════════════ */

.legal-hero {
  min-height: min(62vh, 520px);
}

.legal-hero .ab-hero-inner {
  padding-top: 150px;
  padding-bottom: 70px;
}

.legal-updated {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 22px 0 0;
}

.legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* Contents rail */
.legal-toc {
  position: sticky;
  top: 110px;
}

.legal-toc-title {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 16px;
}

.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--color-border);
}

.legal-toc li a {
  display: block;
  padding: 7px 0 7px 18px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-family: "Poppins", sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease;
}

.legal-toc li a:hover {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}

/* Document body */
.legal-doc {
  max-width: 760px;
}

.legal-lead {
  font-family: "Poppins", sans-serif;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--color-text-main);
  margin: 0 0 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.legal-doc h2 {
  font-family: "Florentia Medium", serif;
  font-size: clamp(23px, 2.6vw, 29px);
  line-height: 1.25;
  color: var(--color-text-main);
  margin: 52px 0 18px;
  scroll-margin-top: 110px;
}

.legal-doc h2:first-of-type {
  margin-top: 0;
}

.legal-doc h3 {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-main);
  margin: 30px 0 12px;
}

.legal-doc p {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-light);
  margin: 0 0 18px;
}

.legal-doc ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.legal-doc li {
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-light);
  padding-left: 24px;
  margin-bottom: 12px;
}

.legal-doc li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary);
}

.legal-doc li strong {
  color: var(--color-text-main);
  font-weight: 600;
}

.legal-doc a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 24, 91, 0.3);
  transition: border-color 200ms ease;
}

.legal-doc a:hover {
  border-bottom-color: var(--color-primary);
}

.legal-contact li::before {
  background: var(--color-primary);
}

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc {
    position: static;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
  }
  .legal-toc ol {
    columns: 2;
    column-gap: 26px;
    border-left: none;
  }
  .legal-toc li a { padding-left: 0; border-left: none; }
}

@media (max-width: 560px) {
  .legal-toc ol { columns: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   SITEMAP
   ══════════════════════════════════════════════════════════════════════ */

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}

.sitemap-heading {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.sitemap-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sitemap-links li {
  margin-bottom: 10px;
}

.sitemap-links a {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 200ms ease;
}

.sitemap-links a:hover {
  color: var(--color-primary);
}

/* Vendor listing, grouped by category */
.sitemap-cat {
  margin-bottom: 44px;
}

.sitemap-cat:last-child {
  margin-bottom: 0;
}

.sitemap-cat-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Florentia Medium", serif;
  font-size: 23px;
  font-weight: 500;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.sitemap-cat-title a {
  color: var(--color-text-main);
  text-decoration: none;
  transition: color 200ms ease;
}

.sitemap-cat-title a:hover {
  color: var(--color-primary);
}

.sitemap-count {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(194, 24, 91, 0.08);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
}

.sitemap-links--wide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 30px;
}

.sitemap-links--wide a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}

.sitemap-meta {
  font-size: 12px;
  color: var(--color-text-light);
  opacity: 0.7;
}

.sitemap-empty {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  color: var(--color-text-light);
  text-align: center;
}

.sitemap-empty a {
  color: var(--color-primary);
  text-decoration: none;
}

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

@media (max-width: 620px) {
  .sitemap-grid { grid-template-columns: 1fr; }
  .sitemap-links--wide { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   FOR PARTNERS — the vendor-facing landing page
   Same bands as the couple-facing marketing pages; only the proof bar,
   benefit grid and numbered steps are new.
   ══════════════════════════════════════════════════════════════════════ */

.pt-hero-eyebrow {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 6px 14px;
  margin-bottom: 22px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
}

.pt-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 34px;
}

/* Ghost button on the dark hero scrim. */
.pt-ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

.pt-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

/* Proof bar directly under the hero. */
.pt-proof {
  background: var(--color-text-main);
  padding: clamp(32px, 4vw, 46px) 0;
}

.pt-proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
}

.pt-proof-grid > div {
  text-align: center;
}

.pt-proof-grid dt {
  font-family: "Florentia Medium", serif;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 8px;
}

.pt-proof-grid dd {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

/* Benefit grid — flat, no card frames. */
.pt-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 4vw, 48px);
}

.pt-benefit h3 {
  font-family: "Florentia Medium", serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--color-text-main);
  margin: 18px 0 10px;
}

.pt-benefit p {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-text-light);
  margin: 0;
}

/* Numbered steps. */
.pt-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 48px);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.pt-steps li {
  padding-top: 26px;
  border-top: 2px solid var(--color-border);
}

.pt-step-num {
  display: block;
  font-family: "Florentia Medium", serif;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 14px;
}

.pt-steps h3 {
  font-family: "Florentia Medium", serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text-main);
  margin: 0 0 10px;
}

.pt-steps p {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-text-light);
  margin: 0;
}

.vendor-cta-desc a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .pt-benefits { grid-template-columns: repeat(2, 1fr); }
  .pt-steps { grid-template-columns: 1fr; }
  .pt-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
}

@media (max-width: 560px) {
  .pt-benefits { grid-template-columns: 1fr; }
  .pt-hero-actions { gap: 10px; }
  .pt-hero-actions .primary-btn,
  .pt-hero-actions .pt-ghost { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   ANCHOR TARGETS
   The navbar is fixed, so a section jumped to via #hash would otherwise
   sit underneath it. Matches .legal-doc h2's own scroll-margin-top.
   ══════════════════════════════════════════════════════════════════════ */
#categories,
#process-section,
#vendors,
#discover-section,
#testimonials-section,
#why-milanzo-section,
#why,
#how,
#faq {
  scroll-margin-top: 96px;
}

/* ══════════════════════════════════════════════════════════════════════
   CURRENT PAGE
   Marks where the visitor is, in the navbar, the mobile menu and the
   footer. Applied by milanzoNavAttrs() alongside aria-current="page",
   so the state is announced to screen readers as well as shown.
   ══════════════════════════════════════════════════════════════════════ */

/* Scoped to .navbar so it outranks ".ab-navbar:not(.scrolled) .nav-link",
   which would otherwise win on every page with a photographic hero. */
.navbar .nav-link.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

/* An underline rather than colour alone, so the state does not depend on
   distinguishing pink from near-black. */
.nav-center .nav-link {
  position: relative;
  padding-bottom: 4px;
}

.nav-center .nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
}

/* Over a photographic hero the navbar is transparent with white text, so
   the marker switches to white to stay legible. */
.navbar.ab-navbar:not(.scrolled) .nav-link.is-active {
  color: #ffffff;
  font-weight: 600;
}

.ab-navbar:not(.scrolled) .nav-center .nav-link.is-active::after {
  background: #ffffff;
}

/* Mobile menu sits on its own panel — colour alone reads clearly there. */
.mobile-menu-links .nav-link.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

/* The nav CTA is already a filled button; a ring is enough to say "here". */
.primary-btn.is-active {
  box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.22);
}

/* Footer, on the dark ground. */
.footer-links a.is-active,
.footer-legal a.is-active {
  color: #ffffff;
  font-weight: 600;
}

.footer-links a.is-active {
  position: relative;
  padding-left: 12px;
}

.footer-links a.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* The hover nudge would fight the marker dot. */
.footer-links a.is-active:hover {
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════════
   LONG REVIEWS — five-line clamp + "Read more" dialog
   Shared by the vendor profile, the home slider and Success Stories.
   The clamp lives here rather than in JS so a long review is never shown
   in full and then snapped shut, and stays clamped without JavaScript.
   ══════════════════════════════════════════════════════════════════════ */

[data-review-clamp] {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Long single-word URLs in a review would otherwise widen the card. */
  overflow-wrap: anywhere;
  /* The profile card is a flex column and gives its comment flex-grow: 1,
     which stretches the clamped box past five lines and quietly defeats the
     clamp — it rendered eight. Both guards are kept: flex-grow stops the
     stretch, and the 5lh cap holds the line count even if some other card
     sizes its text differently. */
  flex-grow: 0;
  max-height: calc(5lh);
}

/* Inserted by review-clamp.js, and only when the text really does overflow —
   a four-line review never gets one. */
/* A review that is followed by "Read more" must not also keep the bottom
   margin it carries as the card's last text block — that margin then opens a
   gap ABOVE the button while leaving almost nothing below it. The spacing
   belongs to the button, which owns both sides of itself. */
[data-review-clamp]:has(+ .review-more-btn) {
  margin-bottom: 0;
}

.review-more-btn {
  display: inline-block;
  /* Every card that shows a review is a flex column, so a plain inline-block
     button becomes a stretched flex item — full card width, text centred, its
     focus ring crowding the author row below. Hug the text instead. */
  align-self: flex-start;
  margin-top: 0px;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.review-more-btn:hover { opacity: 0.75; }
.review-more-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; }

/* ── The dialog ─────────────────────────────────────────────────────── */
.review-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.review-modal.is-open { display: flex; }

.review-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 14, 20, 0.6);
  backdrop-filter: blur(3px);
}

.review-modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(80vh, 640px);
  overflow-y: auto;
  padding: 30px clamp(22px, 4vw, 34px);
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(22, 36, 24, 0.22);
}

.review-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-main);
  cursor: pointer;
}

.review-modal-close:hover { background: rgba(0, 0, 0, 0.1); }

.review-modal-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  padding-right: 34px;
}

.review-modal-head strong {
  font-family: "Florentia Medium", serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text-main);
}

.review-modal-meta {
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  color: var(--color-text-light);
}

.review-modal-stars {
  display: inline-flex;
  gap: 2px;
  margin-top: 4px;
  color: var(--color-secondary);
}

/* The whole point of the dialog: the review, unclamped. white-space
   pre-line keeps the couple's own paragraph breaks. */
.review-modal-body {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-text-main);
  white-space: pre-line;
}

/* Stop the page behind the dialog from scrolling with it. */
body.review-modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .review-modal { padding: 14px; }
  .review-modal-panel { padding: 26px 20px; max-height: 86vh; }
}

/* ── Review cards: stack from the top ────────────────────────────────────
   `.testimonial-card` is declared twice in this file — once for the home
   slider, once for the vendor profile — and the home rule's
   `justify-content: space-between` is unscoped, so it applies to the profile
   cards too. On any card taller than its text (which is most of them, since
   they are equal-height in a row) that floated a short review in the vertical
   middle with dead space above it.

   Both are corrected here rather than by rewriting the original rule: making
   that selector more specific would also let its background, padding and
   radius win over the profile rule that currently overrides them, silently
   restyling every card on the home page. */
.testimonial-card-slide .testimonial-card,
.pt-slider-col .testimonial-card {
  justify-content: flex-start;
}

/* The home card is the only one with an author row inside it; letting that
   claim the slack keeps the avatars aligned across the three cards. */
.testimonial-card-slide .card-author {
  margin-top: auto;
}