/* ---------- Tokens ---------- */
    :root {
      --we-maroon: #8e1238;
      --we-maroon-deep: #6d0b2a;
      --we-gold: #d9a441;
      --we-gold-light: #f3d58b;
      --we-gold-dark: #b07a1e;
      --we-cream: #fbf4e6;
      --we-ink: #7a1230;
      --we-split: 62%;               /* where maroon ends and cream starts */
      --we-card-w: 300px;
    }

    /* ---------- Section ---------- */
    .we-hero {
      position: relative;
      overflow: hidden;
      padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
      background: linear-gradient(to bottom,
                  var(--we-maroon) 0,
                  var(--we-maroon) var(--we-split),
                  #fffaf0 var(--we-split),
                  #fffaf0 100%);
    }

    /* faint mandala texture on the maroon area */
    .we-hero::before {
      content: "";
      position: absolute;
      inset: 0 0 calc(100% - var(--we-split)) 0;
      background:
        repeating-radial-gradient(circle at 12% 30%, transparent 0 14px, rgba(243, 213, 139, .07) 14px 15px),
        repeating-radial-gradient(circle at 92% 70%, transparent 0 14px, rgba(243, 213, 139, .06) 14px 15px);
      pointer-events: none;
    }

    /* lotus ornament, bottom-right */
    .we-lotus {
      position: absolute;
      right: -40px;
      bottom: -40px;
      width: clamp(120px, 18vw, 220px);
      opacity: .35;
      pointer-events: none;
    }

    .we-hero .container { position: relative; z-index: 1; }

    /* ---------- Heading ---------- */
    .we-title {
      font-family: "Cinzel Decorative", serif;
      font-weight: 700;
      font-size: clamp(1.5rem, 3.6vw, 2.25rem);
      text-align: center;
      margin: 0 0 clamp(1.5rem, 4vw, 2.75rem);
      letter-spacing: .04em;
      background: linear-gradient(180deg, var(--we-gold-light), var(--we-gold) 60%, var(--we-gold-dark));
      -webkit-background-clip: text;
              background-clip: text;
      color: transparent;
    }

    /* ---------- Track: grid on desktop, slider on mobile ---------- */
    .we-track {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: clamp(1.25rem, 4vw, 3rem);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .we-track > li { flex: 0 1 var(--we-card-w); display: flex; }

    @media (max-width: 767.98px) {
      .we-track {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1.5rem;
        padding: .25rem 1.5rem 1rem;
        margin-inline: -12px;               /* bleed past container padding */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .we-track::-webkit-scrollbar { display: none; }
      .we-track > li { flex: 0 0 78%; max-width: 320px; scroll-snap-align: center; }
    }

    .we-track:focus-visible { outline: 3px solid var(--we-gold-light); outline-offset: 4px; }

    /* ---------- Card ---------- */
    .we-card {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 7px;
      border-radius: 22px;
      background: linear-gradient(145deg, var(--we-gold-light), var(--we-gold) 45%, var(--we-gold-dark));
      box-shadow: 0 14px 30px rgba(60, 5, 20, .35);
    }

    .we-card__inner {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--we-cream);
      border-radius: 16px;
      border: 1px solid rgba(176, 122, 30, .6);
      overflow: hidden;
    }

    /* framed image with a second inset gold line */
    .we-card__media {
      position: relative;
      margin: 8px 8px 0;
      border-radius: 12px 12px 0 0;
      overflow: hidden;
      aspect-ratio: 4 / 4.4;
      background: var(--we-maroon-deep);
    }
    .we-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .we-card__media::after {
      content: "";
      position: absolute;
      inset: 5px;
      border: 1.5px solid rgba(243, 213, 139, .85);
      border-radius: 9px 9px 0 0;
      pointer-events: none;
    }

    .we-card__body {
      flex: 1;
      padding: 1rem 1.1rem 1.35rem;
      text-align: center;
    }
    .we-card__title {
      font-family: "Cormorant Garamond", serif;
      font-weight: 700;
      font-size: 1.4rem;
      line-height: 1.15;
      color: var(--we-ink);
      margin: 0 0 .4rem;
    }
    .we-card__text {
      font-family: "Cormorant Garamond", serif;
      font-weight: 600;
      font-size: 1.02rem;
      line-height: 1.4;
      color: #6b4a3a;
      margin: 0;
    }

    /* ---------- Dots (mobile only) ---------- */
    .we-dots { display: none; justify-content: center; gap: .5rem; margin-top: .5rem; }
    .we-dots button {
      width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
      background: rgba(122, 18, 48, .3);
      transition: width .2s, background-color .2s;
    }
    .we-dots button[aria-current="true"] { width: 24px; border-radius: 6px; background: var(--we-maroon); }
    .we-dots button:focus-visible { outline: 2px solid var(--we-maroon); outline-offset: 3px; }
    @media (max-width: 767.98px) { .we-dots { display: flex; } }

    /* Larger screens: slightly bigger cards */
    @media (min-width: 992px) { :root { --we-card-w: 320px; } }

    @media (prefers-reduced-motion: reduce) {
      .we-track { scroll-behavior: auto; }
      .we-dots button { transition: none; }
    }