/* ==========================================================================
   Sri Sai Fireworks Industries — brand tokens + base system
   ========================================================================== */

:root {
  /* Brand palette (from logo) */
  --color-primary:   #2A1A5E;
  --color-primary-2: #1a0f44;
  --color-teal:      #16A6A1;
  --color-orange:    #F26B1F;
  --color-magenta:   #D81B7A;
  --color-gold:      #D4AF37;
  --color-bg:        #FFF9F2;
  --color-surface:   #FFFFFF;
  --color-text:      #1A1033;
  --color-text-soft: #4a3f6b;
  --color-muted:     #8a82a1;
  --color-border:    #e8e1d4;

  --gradient-festive: linear-gradient(135deg, #F26B1F 0%, #D81B7A 55%, #D4AF37 100%);
  --gradient-primary: linear-gradient(135deg, #2A1A5E 0%, #1a0f44 100%);
  --gradient-soft:    radial-gradient(120% 120% at 0% 0%, rgba(22,166,161,.12) 0%, rgba(42,26,94,0) 60%);

  /* Type scale */
  --font-display: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sans:    "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero:  clamp(2.4rem, 5.2vw + 1rem, 5.2rem);
  --fs-h1:    clamp(2.0rem, 3.2vw + 1rem, 3.25rem);
  --fs-h2:    clamp(1.6rem, 2.2vw + .8rem, 2.25rem);
  --fs-h3:    clamp(1.25rem, 1.2vw + .8rem, 1.5rem);
  --fs-lead:  clamp(1.05rem, .4vw + 1rem, 1.2rem);
  --fs-body:  1rem;
  --fs-small: .875rem;

  /* Radius + shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26,16,51,.06), 0 1px 3px rgba(26,16,51,.05);
  --shadow-md: 0 8px 24px rgba(26,16,51,.08), 0 2px 6px rgba(26,16,51,.05);
  --shadow-lg: 0 30px 60px -20px rgba(42,26,94,.35);

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 640ms;

  --container-max: 1280px;
  --header-height: 76px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100vw;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-magenta); }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-primary); margin: 0 0 .6em; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 1em; }

/* ---------- Layout ---------- */
.container { width: min(100% - 2rem, var(--container-max)); margin-inline: auto; }
.section   { padding: clamp(3rem, 7vw, 6rem) 0; position: relative; }
.section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.section--hero  { padding: clamp(6rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 6rem); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: .95rem;
  letter-spacing: .01em;
  cursor: pointer; border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-primary-2); color: #fff; box-shadow: var(--shadow-md); }
.btn--festive { background-image: var(--gradient-festive); color: #fff; box-shadow: 0 10px 25px -8px rgba(216,27,122,.55); }
.btn--festive:hover { filter: brightness(1.05); color: #fff; }
.btn--ghost { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.btn--ghost:hover { background: var(--color-primary); color: #fff; }
.btn--whatsapp { background: #25d366; color: #fff; box-shadow: 0 8px 18px -6px rgba(37,211,102,.6); }
.btn--whatsapp:hover { background: #1ebe5b; color: #fff; }

/* ---------- Top utility bar (above the header) ---------- */
.topbar {
  background: linear-gradient(135deg, #2A1A5E 0%, #4A2A8F 55%, #6E3FBF 100%);
  color: #fff;
  font-size: .82rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 1.5rem;
  min-height: 38px;
  flex-wrap: nowrap;
}
.topbar__left  { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; min-width: 0; }
.topbar__right { display: flex; align-items: center; gap: 1.1rem; flex-wrap: nowrap; }
.topbar__tag {
  display: inline-flex; align-items: center;
  padding: .15rem .6rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  font-weight: 600;
  letter-spacing: .02em;
  font-size: .76rem;
  white-space: nowrap;
}
.topbar__link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: rgba(255, 255, 255, .92);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.topbar__link:hover { color: #fff; }
.topbar__link-icon { width: 14px; height: 14px; opacity: .85; flex-shrink: 0; }
.topbar__link--mute { opacity: .8; }
.topbar__link-short { display: none; }   /* full label by default */

.topbar__phone {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: .15rem .65rem .15rem .15rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  white-space: nowrap;
  transition: background .2s;
}
.topbar__phone:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.topbar__phone-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F26B1F, #D81B7A);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -3px rgba(216, 27, 122, .55);
  flex-shrink: 0;
}
.topbar__phone-icon svg { width: 13px; height: 13px; }

/* Vertical hairline between the phone CTA and the secondary text links */
.topbar__sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, .2);
  display: inline-block;
}

/* ---------- Topbar "SALE OPEN" attention pill (price list live) ----------
   Centered between the PESO tag and the phone/track/contact links.
   Pulses with a soft glow + the leading dot blinks to catch the eye.        */
.topbar__sale {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .85rem .25rem .7rem;
  border-radius: 99px;
  color: #fff;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  box-shadow: 0 0 0 0 rgba(242, 107, 31, .55);
  animation: topbarSalePulse 2.2s ease-out infinite;
  transition: transform .2s ease;
  margin: 0 auto;
}
.topbar__sale:hover {
  color: #fff;
  transform: translateY(-1px) scale(1.02);
}
.topbar__sale strong {
  font-weight: 800;
  letter-spacing: .04em;
}
.topbar__sale-sep { opacity: .55; margin: 0 .15rem; }
.topbar__sale-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .8);
  animation: topbarSaleDotBlink 1.1s ease-out infinite;
  flex-shrink: 0;
}
.topbar__sale-arrow {
  opacity: .9;
  transition: transform .25s ease;
}
.topbar__sale:hover .topbar__sale-arrow { transform: translateX(3px); }

/* Closed-state — same slot, but muted (no pulse). */
.topbar__sale--closed {
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .85);
  font-weight: 500;
  animation: none;
  box-shadow: none;
  padding: .2rem .7rem;
}
.topbar__sale--closed:hover {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  transform: none;
}

@keyframes topbarSalePulse {
  0%   { box-shadow: 0 0 0 0   rgba(242, 107, 31, .55); }
  60%  { box-shadow: 0 0 0 10px rgba(242, 107, 31, 0); }
  100% { box-shadow: 0 0 0 0   rgba(242, 107, 31, 0); }
}
@keyframes topbarSaleDotBlink {
  0%, 100% { opacity: 1; transform: scale(1);   box-shadow: 0 0 0 0 rgba(255, 255, 255, .9); }
  50%      { opacity: .35; transform: scale(.85); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .topbar__sale, .topbar__sale-dot { animation: none; }
}

/* Tablet — keep visible, compress text */
@media (max-width: 980px) {
  .topbar__sale {
    margin: 0;            /* topbar__left is hidden → no auto-centering */
    font-size: .72rem;
    padding: .22rem .7rem .22rem .55rem;
  }
}

/* Phone — compact pill ("SALE OPEN" only, hide year/sep). Still visible & pulsing. */
@media (max-width: 720px) {
  .topbar__sale {
    order: -1;            /* push it before the phone pill so it's the first thing seen */
    margin-right: auto;
    font-size: .7rem;
    padding: .2rem .6rem .2rem .5rem;
    gap: .35rem;
  }
  .topbar__sale-sep,
  .topbar__sale-year { display: none; }
  .topbar__sale-arrow { display: none; }
  .topbar__sale--closed { font-size: .7rem; }
}

/* Tablet — hide the long brand tag on the left, keep one row */
@media (max-width: 980px) {
  .topbar__left { display: none; }
  .topbar__right { width: 100%; justify-content: flex-end; }
  .topbar__link--mute { display: none; }
}

/* Phone — single row: phone pill (primary), then "·" separator, then Track + Contact */
@media (max-width: 720px) {
  .topbar { font-size: .76rem; }
  /* Edge-to-edge on mobile — container's default max-width + auto margin
     leaves a 1rem gap on each side, so override here for a flush bar. */
  .topbar__inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: .4rem 1rem;
    gap: .5rem;
    min-height: 34px;
  }
  .topbar__right {
    width: 100%;
    gap: .5rem;
    justify-content: space-between;
  }
  .topbar__phone {
    margin-right: auto;     /* push phone CTA to the left edge */
    padding: .15rem .65rem .15rem .15rem;
    gap: .4rem;
  }
  .topbar__phone-icon { width: 22px; height: 22px; }
  .topbar__phone-icon svg { width: 12px; height: 12px; }
  .topbar__phone-number { font-weight: 700; letter-spacing: -.005em; }
  .topbar__sep { display: inline-block; }
  .topbar__link { gap: .25rem; }
  .topbar__link-icon { width: 12px; height: 12px; }
}

/* Very narrow phone — keep all text labels visible; just tighten gaps */
@media (max-width: 420px) {
  .topbar { font-size: .7rem; }
  .topbar__inner { padding: .35rem .55rem; }
  .topbar__right { gap: .4rem; }
  .topbar__phone-number { font-size: .72rem; }
  .topbar__sep { display: none; } /* drop the separator to save space */
  .topbar__link span { display: inline; }
}
/* Ultra narrow phone (≤350px) — fall back to icon-only for Track + Contact */
@media (max-width: 350px) {
  .topbar__link span { display: none; }
  .topbar__link {
    padding: .2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
  }
  .topbar__link-icon { width: 14px; height: 14px; }
}

/* ---------- Header — flat white bar with full-width wave PNG hanging below ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  height: auto; min-height: 88px;
  display: flex; align-items: center;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  overflow: visible;
  padding: .5rem 1.5rem;
  isolation: isolate;
}
.site-header .container { z-index: 2; }   /* logo + nav above the wave */
/* Full-width wave hanging off the bottom of the header (inline SVG) */

.site-header::after { display: none; }
.site-header .container {
  display: flex; align-items: center; gap: 1.5rem;
  overflow: visible; position: relative;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.site-header.is-scrolled .container { box-shadow: none; }
/* Logo sits flush in the rounded pill */
.brand {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  background: transparent;
  font-family: var(--font-display); font-weight: 700; color: var(--color-primary);
  filter: none; clip-path: none;
}


.brand::after  {
  content: "";
  position: absolute;
    left: 58px;
    right: 0px;
    top: 20px;
    height: 130px;
/*  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path fill='%23ffffff' d='M0,128L120,149.3C240,171,480,213,720,202.7C960,192,1200,128,1320,96L1440,64L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z'/></svg>") center top / 100% 100% no-repeat;*/
  pointer-events: none;
  z-index: -1;
  margin-top: 0px;
}


.brand {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 5;
  margin-bottom: -5px;          /* plate hangs below header */
}
/* Logo sits flush in the header, no plate */
.brand__plate {
  position: relative;
  display: inline-block;
  background: transparent;
  padding: 0;
  filter: none;
  -webkit-mask: none;
          mask: none;
}
.brand__logo {
  height: 56px; width: auto; max-width: 200px;
  display: block;
  position: relative;
  z-index: 2;
}
.brand__mark { width: 40px; height: 40px; display: grid; place-items: center; }
.brand__text { font-size: 1.25rem; letter-spacing: .02em; }
.brand__text span { background: var(--gradient-festive); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand__logo--footer {
  /* Logo has dark text on transparent — invert wordmark brightness on dark footer */
  filter: brightness(0) invert(1);
  opacity: .95;
}

.nav { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
.nav a { color: var(--color-text); font-weight: 500; font-size: .95rem; padding: .5rem .25rem; position: relative; }
.nav a.is-active,
.nav a:hover { color: var(--color-primary); }
.nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 3px;
  background-image: var(--gradient-festive);
}
.nav__cta { display: inline-flex; gap: .5rem; align-items: center; margin-left: .5rem; }

/* Header CTAs */
.header-whatsapp {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.25rem; border-radius: 999px;
  background: #25D366; color: #fff !important;
  font-weight: 600; font-size: .95rem;
  box-shadow: 0 8px 16px -4px rgba(37,211,102,.55);
  transition: transform .2s var(--ease-out), background .2s;
}
.header-whatsapp:hover { background: #1ebe5b; transform: translateY(-1px); }
.header-phone {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 0 .25rem 0 0;
  color: var(--color-text) !important;
  font-weight: 600; font-size: .95rem;
  text-decoration: none;
}
.header-phone__icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #D81B7A, #B0145F);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 14px -4px rgba(216,27,122,.5);
}
.header-phone:hover { color: var(--color-magenta) !important; }

/* Nav inside the wavy header */
.site-header .nav { gap: 1.4rem; margin-left: auto; }
.site-header .nav > a {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-text);
  padding: .5rem .25rem;
}
.site-header .nav > a:hover { color: var(--color-magenta); }
.site-header .nav a.is-active { color: var(--color-magenta); }
.site-header .nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px; border-radius: 3px;
  background-image: var(--gradient-festive);
}
.nav-caret {
  display: inline-block; width: 0; height: 0; margin-left: .25rem;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; vertical-align: middle;
}

.enquiry-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .75rem; font-size: .85rem; font-weight: 600;
  border-radius: var(--radius-pill);
  color: var(--color-primary); border: 1px solid rgba(42,26,94,.18); background: #fff;
  transition: background var(--dur-fast) var(--ease-out);
}
.enquiry-pill:hover { background: var(--color-primary); color: #fff; }
.enquiry-pill .count { background: var(--gradient-festive); color: #fff; border-radius: var(--radius-pill); padding: 0 .5rem; font-size: .75rem; min-width: 1.2rem; text-align: center; }

/* mobile toggle */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-primary); margin: 4px 0; border-radius: 2px; }

@media (max-width: 960px) {
  /* Flat, full-width, fully opaque header on mobile — no floating pill, no
     gap at the top, so dark hero content can't bleed through while scrolling. */
  .site-header {
    padding: 0;
    top: 0;
    min-height: 60px;
    background: #fff;
    border-bottom: 1px solid rgba(42, 26, 94, .08);
    box-shadow: 0 2px 8px -4px rgba(20, 12, 60, .15);
    width: 100%;
  }
  /* Container normally has a 1rem horizontal margin (it's a centred max-width
     box). On mobile we want the white bar to stretch edge-to-edge, with the
     padding moved INSIDE the container so logo + tools sit comfortably. */
  .site-header .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: .5rem 1rem;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    gap: .5rem;
  }
  .site-header.is-scrolled .container {
    box-shadow: none;
  }
  .brand__logo { height: 40px; max-width: 140px; }
  .nav-toggle { display: block; padding: .35rem; }
  .nav-toggle span { width: 20px; }
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    padding: 1rem 1.25rem;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    border-radius: 0 0 16px 16px;
    margin-top: 0;
    box-shadow: 0 16px 32px -12px rgba(26, 16, 51, .22);
    border-top: 1px solid rgba(42, 26, 94, .08);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .75rem 0; border-bottom: 1px solid rgba(42, 26, 94, .06); }
  .nav__cta { margin-top: .5rem; flex-wrap: wrap; }
  .header-phone { display: none; }
}

/* ---------- Hero (applies to every .section--hero site-wide) ---------- */
.section--hero,
.hero { position: relative; overflow: hidden; isolation: isolate; }

/* Base mesh — vivid morphing gradient behind every hero */
.section--hero::before,
.hero::before {
  content: ""; position: absolute; inset: -10%; z-index: -3;
  background:
    radial-gradient(55% 55% at 10% 20%,  rgba(242,107,31,.55) 0%, transparent 65%),
    radial-gradient(50% 50% at 90% 15%,  rgba(22,166,161,.55) 0%, transparent 65%),
    radial-gradient(60% 60% at 85% 90%,  rgba(216,27,122,.60) 0%, transparent 65%),
    radial-gradient(55% 55% at 15% 90%,  rgba(212,175,55,.55) 0%, transparent 65%),
    radial-gradient(40% 40% at 50% 50%,  rgba(255,255,255,.40) 0%, transparent 70%),
    linear-gradient(135deg, #fff2dc 0%, #ffe8cf 50%, #fff7ea 100%);
  background-size: 180% 180%;
  animation: heroMesh 16s ease-in-out infinite alternate;
  pointer-events: none;
  filter: saturate(1.2);
}

/* Inner page heroes (About / Products / Blog / etc) get a banner photo background */
.section--hero:not(.hero--banner) {
  color: #fff;
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.section--hero:not(.hero--banner)::before {
  background:
    linear-gradient(180deg, rgba(20, 8, 46, .25) 0%, rgba(20, 8, 46, .55) 100%),
    url('/assets/images/page-hero-bg.png') top / cover no-repeat;
  filter: none;
  animation: none;
}
.section--hero:not(.hero--banner) .hero__eyebrow {
  color: #F2A100;
}
.section--hero:not(.hero--banner) .hero__title,
.section--hero:not(.hero--banner) h1 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.section--hero:not(.hero--banner) .hero__title em {
  background-image: linear-gradient(90deg, #FFD37A 0%, #F26B1F 50%, #FF7CB3 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.section--hero:not(.hero--banner) .hero__lede,
.section--hero:not(.hero--banner) p {
  color: rgba(255, 255, 255, .85);
}

/* ============================================================
   HOME HERO — full-width banner slider
   ============================================================ */
.hero--banner {
  min-height: clamp(520px, 78vh, 760px);
  padding: 0;
  display: flex; align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero--banner::before,
.hero--banner::after { display: none; }   /* slider has its own background */

.hero-slides {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease-out), transform 9s ease-out;
}
.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
  animation: kenBurns 14s ease-out forwards;
}
@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

.hero__grid--banner {
  position: relative; z-index: 2;
  grid-template-columns: 1fr;
  padding: clamp(5rem, 10vw, 8rem) 0;
}
.hero__grid--banner .hero__copy { max-width: 760px; }

.hero-text {
  position: relative;
  display: none;
}
.hero-text.is-active {
  display: block;
  animation: heroTextIn .9s var(--ease-out) both;
}
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero--banner .hero__eyebrow {
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero__title--banner {
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.hero__title--banner em {
  font-style: normal;
  background-image: linear-gradient(90deg, #FFD37A 0%, #F26B1F 25%, #FF7CB3 55%, #FFD37A 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradientShift 9s ease-in-out infinite;
}
.hero__lede--banner {
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  font-size: clamp(1.05rem, .4vw + 1rem, 1.25rem);
  max-width: 60ch;
}

.btn--ghost-light {
  border-color: rgba(255,255,255,.85);
  color: #fff;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: #fff; color: var(--color-primary); }

/* Dots */
.hero-dots {
  position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: inline-flex; gap: .6rem;
}
.hero-dot {
  width: 36px; height: 4px; border-radius: 4px; border: 0;
  background: rgba(255,255,255,.35); cursor: pointer;
  transition: background .3s, width .3s;
  padding: 0;
}
.hero-dot:hover { background: rgba(255,255,255,.6); }
.hero-dot.is-active {
  background: var(--gradient-festive);
  background-size: 200% 100%;
  animation: headerStrip 4s linear infinite;
  width: 56px;
}

/* Arrows */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  font-size: 1.8rem; line-height: 1;
  cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  transition: background .25s, transform .25s;
}
.hero-arrow:hover { background: rgba(255,255,255,.3); transform: translateY(-50%) scale(1.08); }
.hero-arrow--prev { left: 1.25rem; }
.hero-arrow--next { right: 1.25rem; }

@media (max-width: 720px) {
  .hero-arrow { display: none; }
  .hero--banner { min-height: 60vh; }
}
@keyframes heroMesh {
  0%   { background-position: 0% 0%,   100% 0%, 100% 100%, 0% 100%, 50% 50%, 0 0; }
  50%  { background-position: 100% 30%, 0% 60%, 30% 0%,   70% 10%, 40% 60%, 0 0; }
  100% { background-position: 60% 100%, 30% 30%, 0% 70%,  100% 50%, 60% 40%, 0 0; }
}

/* Brand orbs — bigger, brighter, always moving */
.section--hero::after,
.hero::after {
  content: ""; position: absolute; inset: -25%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(340px 340px at 15% 25%,  rgba(242,107,31,1),   transparent 70%),
    radial-gradient(400px 400px at 85% 15%,  rgba(22,166,161,.95), transparent 70%),
    radial-gradient(380px 380px at 75% 85%,  rgba(216,27,122,1),   transparent 70%),
    radial-gradient(300px 300px at 10% 80%,  rgba(212,175,55,.9),  transparent 70%),
    radial-gradient(250px 250px at 55% 50%,  rgba(42,26,94,.55),   transparent 70%);
  filter: blur(52px) saturate(1.3);
  animation: orbDrift 12s ease-in-out infinite alternate;
  opacity: .85;
  mix-blend-mode: screen;
}

@keyframes orbDrift {
  0%   { transform: translate3d(0, 0, 0)       rotate(0deg)   scale(1); }
  20%  { transform: translate3d(4%, -5%, 0)    rotate(6deg)   scale(1.15); }
  40%  { transform: translate3d(-3%, -3%, 0)   rotate(-4deg)  scale(.92); }
  60%  { transform: translate3d(-5%, 4%, 0)    rotate(-8deg)  scale(1.1);  }
  80%  { transform: translate3d(2%, 5%, 0)     rotate(4deg)   scale(1.05); }
  100% { transform: translate3d(-2%, -2%, 0)   rotate(-2deg)  scale(1);    }
}

/* Floating decorative shapes host (injected by JS) */
.hero-shapes {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.hero-shape {
  position: absolute; will-change: transform, opacity;
}
.hero-shape--circle { border-radius: 50%; }
.hero-shape--ring   { border-radius: 50%; background: transparent !important; border: 2px solid currentColor; }
.hero-shape--star {
  background: none !important;
  color: currentColor;
  display: inline-block;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Confetti rain overlay (CSS-only, brand colors) */
.confetti-rain {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.confetti-rain span {
  position: absolute; top: -10%;
  width: 8px; height: 14px; border-radius: 2px;
  opacity: 0;
  animation: confettiFall linear infinite;
}
@keyframes confettiFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg);        opacity: 0; }
  10%  { opacity: .9; }
  100% { transform: translate3d(40px, 110vh, 0) rotate(540deg); opacity: 0; }
}

/* Stronger base wash (replaces the earlier subtle one visually) */
.section--hero,
.hero { background: linear-gradient(180deg, #fff2dc 0%, #fff7ea 60%, var(--color-bg) 100%); }

/* The sparkle canvas slot */
.section--hero > canvas.hero-sparkles,
.hero > canvas.hero-sparkles {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: -1;
}

/* Eyebrow pulse (continuous "alive" feel) */
.hero__eyebrow {
  position: relative;
  animation: eyebrowPulse 3.2s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,27,122,.35); }
  50%      { box-shadow: 0 0 0 10px rgba(216,27,122, 0); }
}
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 600;
  color: var(--color-magenta);
  padding: .4rem .75rem; background: rgba(216,27,122,.08); border-radius: var(--radius-pill);
}
.hero__title { font-size: var(--fs-hero); letter-spacing: -.02em; margin-bottom: 1rem; }
.hero__title em { font-style: normal; background-image: var(--gradient-festive); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lede { font-size: var(--fs-lead); color: var(--color-text-soft); max-width: 55ch; margin-bottom: 1.5rem; }
.hero__ctas { display: inline-flex; flex-wrap: wrap; gap: .75rem; }
.hero__visual { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: var(--gradient-primary); box-shadow: var(--shadow-lg); overflow: hidden; }
.hero__visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,.12), transparent 60%); }
.hero__visual svg { position: absolute; inset: 10%; width: 80%; height: 80%; }

@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } .hero__visual { aspect-ratio: 4/3; } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.stat { background: #fff; border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.stat__num { font-family: var(--font-display); font-size: 2.4rem; color: var(--color-primary); line-height: 1; }
.stat__label { font-size: .85rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .12em; margin-top: .5rem; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Cards ---------- */
.card { background: #fff; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__body { padding: 1.25rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary); color: #d6cfe9; padding: 4rem 0 2rem; margin-top: 4rem; }
.site-footer--v2 { background: linear-gradient(180deg, #1a0f44 0%, #0f0728 100%); padding-top: 3.5rem; margin-top: 0; }
.site-footer--v2 .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.site-footer--v2 h4 { color: #fff; font-size: .85rem; letter-spacing: .14em; margin-bottom: 1rem; }
.site-footer--v2 ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; font-size: .9rem; }
.site-footer--v2 ul a { color: rgba(255,255,255,.75); }
.site-footer--v2 ul a:hover { color: #fff; }
.footer-contact li { display: flex; align-items: center; gap: .55rem; }
.footer-contact__icon {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.06); flex-shrink: 0; font-size: .85rem;
}
.footer-social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer-social__item {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: #fff !important;
  font-size: .9rem; font-weight: 700;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.footer-social__item:hover { transform: translateY(-3px); box-shadow: 0 8px 16px -6px rgba(0,0,0,.4); }
@media (max-width: 820px){ .site-footer--v2 .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .site-footer--v2 .footer-grid { grid-template-columns: 1fr; } }
.site-footer a { color: #fff; opacity: .85; }
.site-footer a:hover { opacity: 1; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
.footer-grid h4 { color: #fff; font-family: var(--font-sans); font-size: 1rem; text-transform: uppercase; letter-spacing: .14em; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .95rem; }
.footer-bottom { margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .85rem; opacity: .75; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Floating WhatsApp ---------- */
.fab-whatsapp {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 12px 24px -8px rgba(37,211,102,.6);
  transition: transform var(--dur-fast) var(--ease-out);
}
.fab-whatsapp:hover { transform: scale(1.08); color: #fff; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.text-gradient,
.hero__title em {
  background-image: linear-gradient(90deg, #F26B1F 0%, #D81B7A 25%, #D4AF37 50%, #D81B7A 75%, #F26B1F 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientShift 9s ease-in-out infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.section__eyebrow { display: inline-block; font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; color: var(--color-teal); font-weight: 600; margin-bottom: .75rem; }
.visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }

/* Header: compact + shadowed when scrolled + animated brand underline */
.site-header {
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), height var(--dur) var(--ease-out);
  position: sticky;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #F26B1F 0%, #D81B7A 25%, #D4AF37 50%, #16A6A1 75%, #F26B1F 100%);
  background-size: 200% 100%;
  animation: headerStrip 8s linear infinite;
  opacity: .85;
}
@keyframes headerStrip {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
.site-header.is-scrolled {
  background: rgba(255,249,242,.92);
  box-shadow: 0 8px 24px -16px rgba(26,16,51,.25);
}

/* Button ripple on festive CTA */
.btn--festive { position: relative; overflow: hidden; isolation: isolate; }
.btn--festive::after {
  content: ""; position: absolute; inset: -2px;
  background: radial-gradient(120% 120% at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35) 0%, transparent 45%);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
  pointer-events: none; z-index: -1;
}
.btn--festive:hover::after { opacity: 1; }

/* Hero visual: ensure layered above the canvas sparkles */
.hero__visual { position: relative; z-index: 1; }
.hero__copy  { position: relative; z-index: 1; }

/* Card tilt prep */
.card {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
  transform-style: preserve-3d;
}

/* Section reveal fallback (no-JS / no-GSAP): show content normally */
.no-js .section h2,
.no-js .section__eyebrow,
.no-js .card,
.no-js .stat { opacity: 1 !important; transform: none !important; }

/* ============================================================
   HOME PAGE — REDESIGN (Sri Sai Fireworks Industries)
   ============================================================ */

/* HOME HERO */
.home-hero {
  position: relative;
  min-height: clamp(560px, 86vh, 560px);
  color: #fff;
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.home-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center right;
  animation: kenBurns 18s ease-out infinite alternate;
}

/* Full-width band that hosts the centered banner — uses bg.png artwork */
.home-hero-band {
  width: 100%;
  background-color: rgb(1, 1, 46);
  background-image: url('/assets/images/banner/bg.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 20px 0 0;
}

/* Image-only slider — constrained to container width (1200px max) inside the band */
.home-hero--image {
  position: relative;
  width: min(100% - 2rem, var(--container-max));
  margin: 0 auto;
  padding: 0;
  background: transparent;
  overflow: hidden;
  line-height: 0;
}

/* ============================================================
   SPLIT HERO — copy left, banner image right (reference layout)
   ============================================================ */
.home-hero--split {
  position: relative;
  padding: 0;
  color: #fff;
  background: transparent;
}
.home-hero-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  align-items: stretch;
  min-height: 0;
}
@media (max-width: 900px) {
  .home-hero-split { grid-template-columns: 1fr; }
}

.home-hero-split__copy {
  max-width: 480px;
  padding: 0;
  align-self: center;
}
.home-hero-split__eyebrow {
  display: inline-block;
  color: #F2A100;
  letter-spacing: .18em;
  font-weight: 700;
  font-size: .8rem;
  margin-bottom: 1rem;
}
.home-hero-split__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw + 1rem, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: #fff;
}
.home-hero-split__title-grad {
  background: linear-gradient(90deg, #F26B1F 0%, #D81B7A 50%, #6E3FBF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradientShift 6s ease-in-out infinite;
  display: inline-block;
}
.home-hero-split__lede {
  color: rgba(255,255,255,.78);
  font-size: 1.2rem;
  line-height: 1.55;
  margin: 1.25rem 0 1.25rem;
  max-width: 46ch;
}
.home-hero-split__ctas {
  display: inline-flex; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* CTA buttons in the screenshot style */
.hero-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-weight: 700; font-size: .95rem;
  text-decoration: none;
  transition: transform .2s var(--ease-out), box-shadow .25s var(--ease-out), filter .2s;
}
.hero-btn:hover { transform: translateY(-2px); }
.hero-btn--orange {
  background: linear-gradient(135deg, #F26B1F 0%, #E14E0E 100%);
  color: #fff !important;
  box-shadow: 0 12px 22px -8px rgba(242,107,31,.55);
}
.hero-btn--orange:hover { filter: brightness(1.05); }
.hero-btn--whatsapp {
  background: #25D366;
  color: #fff !important;
  box-shadow: 0 12px 22px -8px rgba(37,211,102,.55);
}
.hero-btn--whatsapp:hover { background: #1ebe5b; }

/* Trust row — dark glass card with 3D icon images (matches reference) */
.home-hero-split__trust {
  list-style: none; padding: 1rem .5rem; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
  background: linear-gradient(135deg, rgba(20, 12, 62, .55) 0%, rgba(8, 4, 38, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55);
}
.home-hero-split__trust li {
  display: flex; align-items: center; gap: .65rem;
  padding: .25rem;
}
.home-hero-split__trust-ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: transparent;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
}
.home-hero-split__trust-ico img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.home-hero-split__trust strong {
  display: block; font-size: .85rem; color: #fff; line-height: 1.25;
}
.home-hero-split__trust span {
  display: block; font-size: .70rem; color: rgba(255, 255, 255, .65); line-height: 1.25;
}
@media (max-width: 600px) {
  .home-hero-split__trust { grid-template-columns: 1fr; }
}

/* Right column — banner fills column, matches left height */
.home-hero-split__visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
  overflow: hidden;
}
.home-hero-split__img {
  width: 100%;
  height: 100%;
  max-height: 580px;
  object-fit: initial;
  object-position: center;
  display: block;
}
@media (max-width: 900px) {
  .home-hero-split__img { max-height: none; height: auto; object-fit: contain; }
}
.home-hero-split__dots { display: none; }
.home-hero--image .home-hero__slides {
  position: relative;
  width: 100%;
}
.home-hero--image .home-hero__img {
  display: block;
  width: 100%;          /* full width, edge to edge */
  height: auto;         /* natural aspect ratio — no stretch, no crop */
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
}
.home-hero--image .home-hero__img.is-active {
  position: relative;   /* the active image dictates the container's height */
  opacity: 1;
}
.home-hero--image .home-hero__dots,
.home-hero--image .home-hero__arrow { z-index: 3; }

/* Slider variant */
.home-hero--slider .home-hero__slides {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.home-hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center right;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s var(--ease-out);
}
.home-hero__slide.is-active {
  opacity: 1;
  animation: kenBurns 12s ease-out forwards;
}
.home-hero--slider .home-hero__inner { position: relative; z-index: 1; }

.home-hero__text { display: none; }
.home-hero__text.is-active {
  display: block;
  animation: heroTextIn .9s var(--ease-out) both;
}

.home-hero__dots {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: inline-flex; gap: .5rem;
}
.home-hero__dot {
  width: 32px; height: 4px; border-radius: 4px; border: 0; padding: 0;
  background: rgba(255,255,255,.35); cursor: pointer;
  transition: background .25s, width .25s;
}
.home-hero__dot:hover { background: rgba(255,255,255,.55); }
.home-hero__dot.is-active {
  background: var(--gradient-festive);
  background-size: 200% 100%;
  animation: headerStrip 4s linear infinite;
  width: 52px;
}

.home-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .25s, transform .25s;
}
.home-hero__arrow:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.08); }
.home-hero__arrow--prev { left: 1.25rem; }
.home-hero__arrow--next { right: 1.25rem; }
@media (max-width: 720px) {
  .home-hero__arrow { display: none; }
}
.home-hero__inner { position: relative; z-index: 1; padding: clamp(3rem, 6vw, 5rem) 0; }
.home-hero__copy { max-width: 580px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: #FFD37A; font-weight: 600; font-size: .82rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.home-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw + 1rem, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 1rem;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.home-hero__title-grad {
  background: linear-gradient(90deg, #FFB347 0%, #F26B1F 35%, #FFB347 70%, #F26B1F 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientShift 6s ease-in-out infinite;
  display: inline-block;
}
.home-hero__lede { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 46ch; margin-bottom: 1.5rem; }
.home-hero__ctas { display: inline-flex; gap: .75rem; flex-wrap: wrap; }

.trust-row {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; grid-template-columns: repeat(4, auto); gap: 1.5rem;
}
.trust-row li {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .85rem; color: #fff; line-height: 1.3;
}
.trust-row__icon {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  font-size: 1.1rem;
}
@media (max-width: 720px){
  .trust-row { grid-template-columns: 1fr 1fr; }
  .home-hero { min-height: 70vh; }
  .home-hero__bg { background-position: center; }
}

/* STATS BAR — deep navy glass with image icons (matches reference) */
.stats-bar {
  background:
    linear-gradient(135deg, rgba(20, 12, 62, .72) 0%, rgba(8, 4, 38, .72) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  padding: 1.5rem 2rem;
  margin: 1.5rem auto 0;
  position: relative; z-index: 2;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .7);
  width: min(100% - 2rem, var(--container-max));
}
.stats-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stats-bar__cell { display: flex; align-items: center; gap: 1rem; color: #fff; }
.stats-bar__cell + .stats-bar__cell { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 1.5rem; }

/* 3D icon image (no background pill — icons already have depth + colour) */
.stats-bar__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center; flex-shrink: 0;
  background: transparent;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45));
}
.stats-bar__icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.stats-bar__num {
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 700; line-height: 1;
  color: #fff;
}
.stats-bar__num::after { content: '+'; color: #F2A100; margin-left: 2px; }
.stats-bar__label {
  font-size: .85rem; color: rgba(255, 255, 255, .75);
  margin-top: .3rem;
}
@media (max-width: 820px) {
  .stats-bar { padding: 1.1rem .9rem; }
  .stats-bar__grid {
    grid-template-columns: 1fr 1fr;
    gap: .65rem .5rem;
  }
  /* Stack icon → number → label vertically per cell so two columns fit
     on narrow phones without truncation. */
  .stats-bar__cell {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
    padding: .65rem .35rem;
    background: rgba(255, 255, 255, .04);
    border-radius: 12px;
    min-width: 0;
  }
  .stats-bar__cell + .stats-bar__cell { border-left: 0; padding-left: .35rem; }
  .stats-bar__icon { width: 44px; height: 44px; }
  .stats-bar__num { font-size: 1.4rem; }
  .stats-bar__label {
    font-size: .72rem;
    line-height: 1.2;
    margin-top: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 380px) {
  .stats-bar__num   { font-size: 1.25rem; }
  .stats-bar__label { font-size: .68rem; }
  .stats-bar__icon  { width: 38px; height: 38px; }
}

/* SECTION HEADERS — centered title pair (eyebrow + h2) */
.section--cats .container.text-center,
.section--products .container.text-center,
.section--why .container.text-center,
.section--test .container.text-center {
  text-align: center;
  margin-bottom: 1.5rem;
}
.section-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 2vw + 1rem, 2.2rem);
  color: var(--color-primary);
  margin: .35rem auto 0;
  line-height: 1.2;
}
.eyebrow--decorated {
  display: inline-block;
  color: var(--color-magenta);
  letter-spacing: .2em;
  font-weight: 700;
  font-size: .78rem;
}
.section--cats, .section--products, .section--test { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--cats { background: #ffffff; }
.cats-foot {
  display: flex; justify-content: center;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, #ececf2);
}
.cats-foot__link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--color-text, #1f1c2e); font-weight: 600;
  text-decoration: none; font-size: .95rem;
  transition: color .2s, transform .2s;
}
.cats-foot__link:hover { color: var(--color-primary, #6E3FBF); transform: translateX(2px); }
.section--products { background: #fdf3e0; }

/* CATEGORY 4-COLUMN BLOCKS — numbered card with corner product image */
.cats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 980px){ .cats-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .cats-grid { grid-template-columns: 1fr; } }

.cat-block {
  position: relative;
  border-radius: 22px;
  padding: 1.6rem 1.5rem;
         /* near-square card matches reference */
  display: flex; flex-direction: column;
  text-decoration: none;
 
  color: #fff !important;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.35);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  isolation: isolate;
}
.cat-block:hover {
  box-shadow: 0 22px 40px -14px rgba(0,0,0,.4);
}
.cat-block__num {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 500;
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
  z-index: 2;
  margin: 0 0 .9rem;
  line-height: 1;
}
.cat-block__content {
  position: relative;
  z-index: 2;
  max-width: 58%;
  display: flex; flex-direction: column;
  flex: 1;
}
.cat-block h3 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 .55rem;
  line-height: 1.15;
}
.cat-block p {
  color: rgba(255,255,255,.92);
  font-size: .82rem;
  line-height: 1.45;
  margin: 0 0 auto;
}
.cat-block__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 600; font-size: .82rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  color: #fff;
  align-self: flex-start;
  margin-top: 1rem;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .25s;
}
.cat-block:hover .cat-block__cta { background: rgba(255,255,255,.34); }
.cat-block__img {
  position: absolute;
bottom: 19px;
    right: 0px;
    width: 58%;
    height: 100%;
  object-fit: contain;
  object-position: bottom right;
  z-index: 1;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.4));
  transition: transform .4s var(--ease-out);
  pointer-events: none;
}
.cat-block:hover .cat-block__img { transform: scale(1.08) rotate(-3deg); }

/* Mobile tuning — keep the card readable on narrow phones */
@media (max-width: 520px) {
  .cat-block {
    padding: 1.25rem 1.1rem;
    min-height: 200px;
  }
  .cat-block__content { max-width: 62%; }
  .cat-block h3 { font-size: 1.2rem; }
  .cat-block p { font-size: .78rem; }
  .cat-block__img {
    width: 50%;
    height: 90%;
    bottom: 8px;
    right: -10px;
  }
}

/* PRODUCT GRID */
.products-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 1200px){ .products-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .products-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   PRODUCT CARD — used everywhere (catalogue, related strip, popular strip)
   Redesigned: dual CTA (primary "+ Add to enquiry" + secondary view-icon).
   ============================================================ */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(42, 26, 94, .06);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px -20px rgba(20, 12, 60, .35);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .25s;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(20, 12, 60, .35);
  border-color: rgba(216, 27, 122, .15);
}

/* Badge — clean pill top-left */
.product-card__badge {
  position: absolute;
  top: .85rem;
  left: .85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: .3rem .65rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 100%);
  box-shadow: 0 6px 14px -6px rgba(216, 27, 122, .55);
}
.product-card__badge--teal   { background: linear-gradient(135deg, #1FBFB9 0%, #16A6A1 100%); box-shadow: 0 6px 14px -6px rgba(22, 166, 161, .5); }
.product-card__badge--amber  { background: linear-gradient(135deg, #FFB347 0%, #F26B1F 100%); box-shadow: 0 6px 14px -6px rgba(242, 107, 31, .55); }
.product-card__badge--orange { background: linear-gradient(135deg, #F58A3A 0%, #F26B1F 100%); }
.product-card__badge--pink   { background: linear-gradient(135deg, #E63A93 0%, #D81B7A 100%); }

/* Image area — square, soft gradient backdrop, subtle hover zoom */
.product-card__img {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(135deg, #fff7ec 0%, #fde8ef 100%);
  border-bottom: 1px solid rgba(42, 26, 94, .04);
  text-decoration: none;
}
.product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .45s var(--ease-out);
}
.product-card:hover .product-card__img img { transform: scale(1.04); }
.product-card__placeholder { width: 55%; height: 55%; }
.product-card__placeholder svg { width: 100%; height: 100%; }

/* Body */
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem 1.05rem 1.05rem;
}
.product-card__name {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  color: #2A1A5E;
  letter-spacing: -.005em;
  /* Keep titles to 2 lines max so cards stay aligned */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.product-card__name a { color: inherit; text-decoration: none; transition: color .2s; }
.product-card__name a:hover { color: #D81B7A; }

/* Meta + price on one row */
.product-card__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0;
  margin: 0;
}
.product-card__meta {
  font-size: .78rem;
  color: #6b6486;
  font-weight: 500;
}
.product-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #2A1A5E;
}
.product-card__price-sale { color: #2A1A5E; }
.product-card__price-mrp  { color: #a09cb3; text-decoration: line-through; font-size: .8rem; font-weight: 600; }
.product-card__price--soft {
  font-size: .85rem;
  font-weight: 600;
  color: #6b6486;
  font-style: italic;
}

/* Actions — primary "Add to enquiry" + secondary view icon */
.product-card__actions {
  display: flex;
  gap: .45rem;
  align-items: stretch;
  margin-top: .15rem;
}
.product-card__add { flex: 1; margin: 0; display: flex; }
.product-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .65rem 1rem;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  background-size: 180% 100%;
  background-position: 0% 50%;
  box-shadow: 0 10px 22px -10px rgba(216, 27, 122, .55);
  transition: background-position .35s, transform .2s, box-shadow .25s;
}
.product-card__btn:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(110, 63, 191, .55);
  color: #fff;
}
.product-card__btn--primary { /* alias kept for backwards-compat */ }
.product-card__btn.is-loading { opacity: .7; cursor: progress; }
.product-card__btn svg { display: inline-block; }

.product-card__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  flex: 0 0 42px;
  border-radius: 999px;
  border: 1px solid rgba(42, 26, 94, .14);
  color: #2A1A5E;
  background: #fff;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.product-card__view:hover {
  background: rgba(216, 27, 122, .08);
  color: #D81B7A;
  border-color: rgba(216, 27, 122, .25);
  transform: translateY(-1px);
}

/* Mobile-tighten product card so the CTA fits on one line and the
   overall card stays compact (was getting tall on narrow phones) */
@media (max-width: 720px) {
  .product-card { border-radius: 14px; }
  .product-card__body {
    padding: .65rem .65rem .75rem;
    gap: .35rem;
  }
  .product-card__name {
    font-size: .85rem;
    line-height: 1.25;
    min-height: 2.5em;
  }
  .product-card__line {
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
  }
  .product-card__meta { font-size: .7rem; }
  .product-card__price { font-size: .92rem; }
  .product-card__actions { gap: .3rem; }
  .product-card__btn {
    padding: .5rem .55rem;
    font-size: .72rem;
    gap: .25rem;
  }
  .product-card__btn svg { width: 12px; height: 12px; }
  .product-card__btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .product-card__view {
    width: 32px;
    flex: 0 0 32px;
  }
  .product-card__badge {
    top: .55rem; left: .55rem;
    padding: .22rem .5rem;
    font-size: .6rem;
  }
}
/* On very narrow phones, swap the CTA label for the shorter "Enquire". */
@media (max-width: 420px) {
  .product-card__btn span { font-size: 0; }
  .product-card__btn span::after {
    content: 'Enquire';
    font-size: .72rem;
  }
}

.btn--pill-lg {
  padding: 1rem 2rem; background: var(--color-primary); color: #fff;
  border-radius: var(--radius-pill); font-weight: 700;
}

/* ============================================================
   CATALOGUE — products index/category listing
   ============================================================ */
.catalogue-section { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* Category filter — chip bar */
.catalogue-cats-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.catalogue-cats {
  display: flex;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 28px;
  box-shadow: 0 8px 24px -16px rgba(20, 12, 60, .18);
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
/* On narrow screens, switch to a horizontally-scrolling single row with the
   scrollbar visually hidden (still swipeable on touch). */
@media (max-width: 720px) {
  .catalogue-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    border-radius: 999px;
    scrollbar-width: none;
  }
  .catalogue-cats::-webkit-scrollbar { display: none; }
}

.catalogue-cats__chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text-soft, #4a4660);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  scroll-snap-align: start;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .15s ease,
    box-shadow .2s ease;
}
.catalogue-cats__chip:hover {
  background: #fdebf2;
  color: var(--color-primary, #2A1A5E);
  text-decoration: none;
  transform: translateY(-1px);
  border-color: #f3c2cb;
}
.catalogue-cats__chip.is-active {
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  background-size: 200% 100%;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -6px rgba(216, 27, 122, .55);
  animation: chipShimmer 8s ease-in-out infinite;
}
@keyframes chipShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.catalogue-cats__chip.is-active .catalogue-cats__icon { color: #fff; opacity: 1; }

.catalogue-cats__icon {
  display: inline-flex;
  width: 16px; height: 16px;
  flex: 0 0 auto;
  opacity: .75;
}
.catalogue-cats__icon svg { width: 100%; height: 100%; display: block; }
.catalogue-cats__chip:hover .catalogue-cats__icon { opacity: 1; }

.catalogue-cats__label { line-height: 1; }

.catalogue-cats__count {
  flex: 0 0 auto;
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-text-soft, #6b6486);
  white-space: nowrap;
  padding: .35rem .85rem;
  background: #fdebf2;
  color: #b8145f;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .catalogue-cats-wrap { flex-direction: column; align-items: stretch; gap: .5rem; }
  .catalogue-cats__count { align-self: flex-end; }
}

/* Mobile category dropdown — shown on phones in place of the chip strip */
.catalogue-cats-mobile { display: none; }

@media (max-width: 720px) {
  /* Hide the horizontal chip nav on mobile; show the native select */
  .catalogue-cats { display: none !important; }

  .catalogue-cats-mobile {
    display: block;
    position: relative;
    margin: clamp(1rem, 3vw, 1.5rem) 0;
  }
  .catalogue-cats-mobile__label {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6E3FBF;
    margin-bottom: .4rem;
  }
  .catalogue-cats-mobile__select {
    display: block;
    width: 100%;
    padding: .85rem 2.5rem .85rem 1rem;
    border: 1.5px solid rgba(216, 27, 122, .25);
    border-radius: 999px;
    background: #fff;
    color: #2A1A5E;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: none;
    box-shadow: 0 4px 14px -6px rgba(216, 27, 122, .25);
    transition: border-color .2s, box-shadow .2s;
  }
  .catalogue-cats-mobile__select:focus {
    outline: none;
    border-color: #D81B7A;
    box-shadow: 0 0 0 3px rgba(216, 27, 122, .15);
  }
  .catalogue-cats-mobile__caret {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    color: #D81B7A;
    pointer-events: none;
  }
}

/* Grid — denser, tighter cards */
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}
/* Lock 2 columns on phones (the auto-fill minmax was collapsing to 1 col
   below ~440px and producing huge cards). */
@media (max-width: 720px) {
  .catalogue-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .65rem;
  }
  .catalogue-grid > .product-card { min-width: 0; }
}
/* Allow a single-column fallback only on extremely narrow phones (<320px) */
@media (max-width: 320px) {
  .catalogue-grid { grid-template-columns: 1fr !important; }
}

/* Legacy overrides folded into the main .product-card block above.
   Kept only the catalogue-grid alignment helper here. */
.catalogue-grid .product-card__img { /* gradient now comes from the base style */ }

/* Empty state */
.catalogue-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md, 14px);
}
.catalogue-empty h3 { margin: 0 0 .5rem; color: var(--color-primary, #2A1A5E); font-size: 1.2rem; }
.catalogue-empty p { color: var(--color-text-soft, #666); margin: 0 0 1.25rem; }

/* ============================================================
   GALLERY — frontend page
   ============================================================ */
.gallery-hero {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  color: #fff;
  background:
    radial-gradient(60% 80% at 80% 15%, rgba(242,107,31,.25), transparent 65%),
    radial-gradient(55% 70% at 15% 85%, rgba(216,27,122,.20), transparent 65%),
    linear-gradient(135deg, #1c0a4a 0%, #2a0f5e 50%, #1c0a4a 100%);
  overflow: hidden;
}
.gallery-hero .hero__eyebrow {
  display: inline-flex; align-items: center;
  padding: .3rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #F2A100;
  text-transform: uppercase; letter-spacing: .18em;
  font-weight: 700; font-size: .72rem;
  margin-bottom: 1rem;
}
.gallery-hero .hero__title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  margin: 0 0 .75rem;
  color: #fff;
  font-weight: 800;
}
.gallery-hero .hero__lede {
  color: rgba(255,255,255,.8);
  font-size: 1.05rem;
  max-width: 60ch;
  margin: 0;
}

.gallery-section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Tabs — horizontal chip row, wraps on desktop, scrolls on mobile */
.gallery-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 28px;
  box-shadow: 0 8px 24px -16px rgba(20, 12, 60, .18);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 720px) {
  .gallery-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    border-radius: 999px;
    scrollbar-width: none;
  }
  .gallery-tabs::-webkit-scrollbar { display: none; }
}
.gallery-tabs__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  font-size: .85rem; font-weight: 600;
  color: var(--color-text-soft, #4a4660);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.gallery-tabs__chip:hover {
  background: #fdebf2; color: var(--color-primary, #2A1A5E);
  border-color: #f3c2cb; transform: translateY(-1px); text-decoration: none;
}
.gallery-tabs__chip.is-active {
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px -6px rgba(216, 27, 122, .55);
}
.gallery-tabs__count {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  color: inherit;
  font-size: .72rem;
  font-weight: 700;
}
.gallery-tabs__chip.is-active .gallery-tabs__count { background: rgba(255,255,255,.25); color: #fff; }

/* Masonry grid */
.gallery-grid {
  column-count: 4;
  column-gap: 1rem;
}
@media (max-width: 1100px) { .gallery-grid { column-count: 3; } }
@media (max-width: 780px)  { .gallery-grid { column-count: 2; } }
@media (max-width: 460px)  { .gallery-grid { column-count: 1; } }

.gallery-card {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff 0%, #fdebf2 100%);
  box-shadow: 0 10px 26px -14px rgba(20, 12, 60, .35);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  break-inside: avoid;
  transition: transform .2s ease, box-shadow .25s ease;
  text-align: left;
}
.gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -12px rgba(20, 12, 60, .45);
}
.gallery-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px 14px 0 0;
}
.gallery-card__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f0edfa, #fdebf2);
}
.gallery-card__caption {
  display: block;
  padding: .65rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text, #1A1033);
}
.gallery-card__chip {
  position: absolute;
  bottom: .65rem;
  right: .65rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: linear-gradient(135deg, #F26B1F, #D81B7A);
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(216,27,122,.5);
}

/* Play overlay on video cards */
.gallery-card.is-video::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,4,38,.6) 100%);
  pointer-events: none;
}
.gallery-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F26B1F, #D81B7A);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 16px 32px -8px rgba(216,27,122,.6), 0 0 0 6px rgba(255,255,255,.3);
  transition: transform .2s ease;
  pointer-events: none;
}
.gallery-card.is-video:hover .gallery-card__play { transform: translate(-50%, -50%) scale(1.1); }
.gallery-card__play svg { width: 22px; height: 22px; transform: translateX(2px); }

/* Cards beyond the initial batch start hidden and are revealed by the
   "Load more" button below the grid. */
.gallery-card.is-hidden { display: none; }

/* Load-more button — sits centered below the grid */
.gallery-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.gallery-loadmore {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: .92rem;
  color: #fff;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  background-size: 200% 100%;
  box-shadow: 0 14px 32px -10px rgba(216, 27, 122, .55);
  transition: transform .2s ease, box-shadow .25s ease, background-position .5s ease;
}
.gallery-loadmore:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -10px rgba(216, 27, 122, .8);
  background-position: 100% 50%;
}
.gallery-loadmore:active { transform: translateY(0); }
.gallery-loadmore__count {
  font-weight: 600;
  font-size: .78rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  letter-spacing: .04em;
}
.gallery-loadmore svg {
  width: 16px; height: 16px;
  animation: loadmoreBounce 2s ease-in-out infinite;
}
@keyframes loadmoreBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-loadmore svg { animation: none; }
}

/* Empty state */
.gallery-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: 14px;
}
.gallery-empty h3 { margin: 0 0 .5rem; color: var(--color-primary, #2A1A5E); }
.gallery-empty p  { color: var(--color-text-soft, #666); margin: 0; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
  color: #fff;
  background:
    radial-gradient(60% 80% at 80% 15%, rgba(242,107,31,.28), transparent 65%),
    radial-gradient(55% 70% at 15% 85%, rgba(216,27,122,.20), transparent 65%),
    linear-gradient(135deg, #1c0a4a 0%, #2a0f5e 50%, #1c0a4a 100%);
  overflow: hidden;
}
.contact-hero .hero__eyebrow {
  display: inline-flex; align-items: center;
  padding: .3rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #F2A100;
  text-transform: uppercase; letter-spacing: .18em;
  font-weight: 700; font-size: .72rem;
  margin-bottom: 1rem;
}
.contact-hero .hero__title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  margin: 0 0 .75rem;
  color: #fff;
  font-weight: 800;
}
.contact-hero .hero__lede {
  color: rgba(255,255,255,.8);
  font-size: 1.05rem;
  max-width: 60ch;
  margin: 0;
}

.contact-section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }

/* ===== Left column: info cards ===== */
.contact-info { display: grid; gap: 1rem; }

.contact-card {
  display: flex;
  gap: 1rem;
  padding: 1.4rem;
  background: linear-gradient(135deg, #fff 0%, #fff5f9 100%);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: 0 10px 28px -18px rgba(20, 12, 60, .35);
}
.contact-card__icon {
  width: 48px; height: 48px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #F26B1F, #D81B7A);
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(216, 27, 122, .55);
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card__body { min-width: 0; }
.contact-card__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text-soft, #6b6486);
}
.contact-card__title {
  margin: .25rem 0 .35rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary, #2A1A5E);
}
.contact-card__text {
  margin: 0;
  color: var(--color-text-soft, #4a4660);
  line-height: 1.55;
}
.contact-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .75rem;
  font-weight: 600;
  font-size: .88rem;
  color: var(--color-accent, #D81B7A);
  text-decoration: none;
}
.contact-card__cta:hover { color: var(--color-primary, #2A1A5E); text-decoration: underline; }
.contact-card__cta svg { width: 14px; height: 14px; }

/* Contact tiles — phone / whatsapp / email / hours */
.contact-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 540px) { .contact-tiles { grid-template-columns: 1fr; } }

.contact-tile {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 22px -16px rgba(20, 12, 60, .35);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.contact-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px -16px rgba(20, 12, 60, .45);
  border-color: var(--color-accent, #D81B7A);
  text-decoration: none;
}
.contact-tile__icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #fdebf2, #fef0e0);
  color: var(--color-primary, #2A1A5E);
}
.contact-tile__icon svg { width: 18px; height: 18px; }
.contact-tile__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-text-soft, #6b6486);
}
.contact-tile__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary, #2A1A5E);
  word-break: break-word;
  line-height: 1.3;
}
.contact-tile--whatsapp .contact-tile__icon { background: linear-gradient(135deg, #25D366, #1ebe5b); color: #fff; }
.contact-tile--phone .contact-tile__icon    { background: linear-gradient(135deg, #F26B1F, #D81B7A); color: #fff; }
.contact-tile--email .contact-tile__icon    { background: linear-gradient(135deg, #6E3FBF, #2A1A5E); color: #fff; }
.contact-tile--hours { grid-column: 1 / -1; }
.contact-tile--hours .contact-tile__icon    { background: linear-gradient(135deg, #D4AF37, #b08400); color: #fff; }

.contact-hours {
  list-style: none;
  padding: 0;
  margin: .35rem 0 0;
  display: grid;
  gap: .25rem;
  font-size: .88rem;
}
.contact-hours li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .35rem 0;
  border-bottom: 1px dashed var(--color-border);
  color: var(--color-text-soft, #4a4660);
}
.contact-hours li:last-child { border-bottom: 0; }
.contact-hours li > span:first-child { font-weight: 600; color: var(--color-text, #1A1033); }

/* ===== Right column: form card ===== */
.contact-form-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 18px 44px -22px rgba(20, 12, 60, .35);
  overflow: hidden;
}
.contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #F26B1F, #D81B7A, #6E3FBF);
}
.contact-form-card__head { margin-bottom: 1.25rem; }
.contact-form-card__eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-accent, #D81B7A);
}
.contact-form-card__title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(1.5rem, 2vw + .8rem, 2rem);
  margin: .3rem 0 .35rem;
  color: var(--color-primary, #2A1A5E);
}
.contact-form-card__sub {
  margin: 0;
  color: var(--color-text-soft, #4a4660);
  font-size: .92rem;
  line-height: 1.55;
}

/* Alerts above the form */
.contact-alert {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  font-size: .9rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.contact-alert--success { background: #e4f6f5; color: #0f7470; border-color: #b9e4e2; }
.contact-alert--error   { background: #fdebf2; color: #b8145f; border-color: #f3c2cb; }
.contact-alert svg { flex: 0 0 auto; margin-top: 1px; }

/* Form */
.contact-form { display: grid; gap: 1rem; }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 540px) { .contact-form__row { grid-template-columns: 1fr; } }

.contact-form__field { display: block; }
.contact-form__label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-soft, #6b6486);
  margin-bottom: .35rem;
}
.contact-form__label .req { color: var(--color-accent, #D81B7A); }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--color-text, #1A1033);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary, #2A1A5E);
  box-shadow: 0 0 0 3px rgba(42, 26, 94, .12);
}
.contact-form textarea { resize: vertical; min-height: 120px; line-height: 1.55; }

/* Honeypot — hidden from real users, visible to bots that ignore CSS */
.contact-form__hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}

.contact-form__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  background-size: 200% 100%;
  box-shadow: 0 14px 28px -10px rgba(216, 27, 122, .55);
  transition: transform .15s ease, box-shadow .25s ease, background-position .5s ease;
}
.contact-form__submit svg { width: 16px; height: 16px; }
.contact-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px -10px rgba(216, 27, 122, .8);
  background-position: 100% 50%;
}
.contact-form__hint {
  font-size: .78rem;
  color: var(--color-text-soft, #6b6486);
}

/* Map band — full-width strip at the bottom */
.contact-map-band {
  padding: clamp(2rem, 4vw, 3rem) 0;
  background: linear-gradient(180deg, transparent 0%, rgba(216,27,122,.04) 100%);
}
.contact-map-band__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.contact-map {
  position: relative;
  width: 100%;
  min-height: 420px;
  height: 420px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px -22px rgba(20, 12, 60, .45);
  background: #eaf3fb;
  z-index: 1;
}
/* Blue theme — tint the OSM tile layer */
.contact-map .leaflet-tile-pane {
  filter: hue-rotate(185deg) saturate(.55) brightness(.97) contrast(.95);
}
/* Keep our custom pin in full colour */
.contact-map .leaflet-marker-pane,
.contact-map .leaflet-popup-pane,
.contact-map .leaflet-overlay-pane,
.contact-map .leaflet-shadow-pane {
  filter: none;
}
.contact-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, .82);
  color: #2A1A5E;
  font-size: 11px;
}
.contact-map .leaflet-control-attribution a { color: #1d4ed8; }
.contact-map .leaflet-control-zoom a {
  background: #ffffff;
  color: #2A1A5E;
  border-color: rgba(42, 26, 94, .18);
  font-weight: 700;
}
.contact-map .leaflet-control-zoom a:hover {
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  color: #fff;
}

/* Custom branded pin */
.contact-map__icon { background: transparent; border: 0; }
.contact-map__pin {
  width: 36px;
  height: 48px;
  filter: drop-shadow(0 8px 14px rgba(216, 27, 122, .45));
  animation: contactMapPinDrop .55s cubic-bezier(.2, .9, .3, 1.25) both;
}
.contact-map__pin svg { width: 100%; height: 100%; display: block; }
@keyframes contactMapPinDrop {
  0%   { opacity: 0; transform: translateY(-18px) scale(.85); }
  100% { opacity: 1; transform: translateY(0)     scale(1);    }
}

/* Popup styling */
.contact-map .leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 18px 36px -16px rgba(20, 12, 60, .45);
  border: 1px solid rgba(216, 27, 122, .15);
}
.contact-map .leaflet-popup-content {
  margin: 12px 16px;
  font-size: .9rem;
  line-height: 1.45;
  color: #2A1A5E;
}
.contact-map .leaflet-popup-tip { box-shadow: 0 8px 18px -10px rgba(20, 12, 60, .35); }

/* Floating "Get directions" button */
.contact-map__directions {
  position: absolute;
  right: 28px;
  bottom: 22px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.05rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 55%, #6E3FBF 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow: 0 14px 30px -12px rgba(216, 27, 122, .55);
  transition: background-position .4s ease, transform .25s ease, box-shadow .25s ease;
}
.contact-map__directions:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(110, 63, 191, .55);
  color: #fff;
}
.contact-map__directions svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

@media (max-width: 720px) {
  .contact-map { min-height: 320px; height: 320px; }
  .contact-map__directions {
    right: 14px;
    bottom: 14px;
    padding: .6rem .9rem;
    font-size: .85rem;
  }
}

/* ============================================================
 * CMS Pages (privacy, terms, custom content pages)
 * ============================================================ */
.page-hero {
  padding: clamp(2.25rem, 6vw, 4.25rem) 0 clamp(1.25rem, 3vw, 2.25rem);
  background:
    radial-gradient(900px 320px at 12% 18%, rgba(216, 27, 122, .12), transparent 60%),
    radial-gradient(800px 260px at 88% 12%, rgba(110, 63, 191, .12), transparent 60%),
    linear-gradient(180deg, #fff7f1 0%, #fdf3f6 100%);
}
.page-hero__crumbs {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--color-text-soft, #6b6486);
  margin-bottom: .9rem;
}
.page-hero__crumbs a {
  color: #2A1A5E;
  text-decoration: none;
  font-weight: 600;
}
.page-hero__crumbs a:hover { color: #D81B7A; }
.page-hero__crumbs span[aria-hidden] { opacity: .55; }
.page-hero__title {
  margin: 0;
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  line-height: 1.15;
  color: #2A1A5E;
  letter-spacing: -.01em;
}
.page-hero__lede {
  margin: .85rem 0 0;
  max-width: 760px;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.55;
  color: #4a4660;
}

.page-cover {
  margin: 1.25rem auto 0;
  padding: 0 1rem;
}
.page-cover__img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  box-shadow: 0 20px 50px -22px rgba(20, 12, 60, .35);
}

.page-body-band {
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}
.page-body {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #2A1A5E;
}
.page-body__meta {
  max-width: 820px;
  margin: 1.75rem auto 0;
  padding-top: 1rem;
  border-top: 1px dashed rgba(42, 26, 94, .15);
  color: var(--color-text-soft, #6b6486);
  font-size: .85rem;
}

/* Reusable rich-text styling for any CMS-rendered HTML */
.prose h2 {
  margin: 2rem 0 .9rem;
  font-size: 1.5rem;
  color: #2A1A5E;
  letter-spacing: -.01em;
}
.prose h3 {
  margin: 1.6rem 0 .7rem;
  font-size: 1.18rem;
  color: #2A1A5E;
}
.prose p { margin: 0 0 1rem; }
.prose ul,
.prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.prose li { margin: .3rem 0; }
.prose a {
  color: #D81B7A;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.prose a:hover { color: #6E3FBF; }
.prose blockquote {
  margin: 1.25rem 0;
  padding: .85rem 1.1rem;
  border-left: 3px solid #D81B7A;
  background: rgba(216, 27, 122, .06);
  border-radius: 0 12px 12px 0;
  color: #2A1A5E;
  font-style: italic;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1rem 0;
}
.prose hr {
  border: 0;
  border-top: 1px dashed rgba(42, 26, 94, .2);
  margin: 1.75rem 0;
}
.prose code {
  background: rgba(110, 63, 191, .08);
  padding: .1rem .4rem;
  border-radius: 6px;
  font-size: .92em;
  color: #6E3FBF;
}

/* ============================================================
 * Checkout / Enquiry list  (one-page checkout)
 * ============================================================ */
.checkout-hero {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1rem, 2vw, 1.5rem);
  background:
    radial-gradient(900px 320px at 12% 18%, rgba(216,27,122,.10), transparent 60%),
    radial-gradient(800px 260px at 88% 12%, rgba(110,63,191,.10), transparent 60%),
    linear-gradient(180deg, #fff7f1 0%, #fdf3f6 100%);
}
.section--checkout { padding-top: 0; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.checkout-flash {
  padding: .85rem 1.1rem;
  border-radius: 12px;
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.checkout-flash--ok  { background: rgba(22,166,161,.12); color: #0f7873; border-left: 4px solid #16A6A1; }
.checkout-flash--err { background: rgba(216,27,122,.10); color: #9d164f; border-left: 4px solid #D81B7A; }

.checkout-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 980px) {
  .checkout-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CHECKOUT — left items card
   ============================================================ */
.checkout-cart {
  background: #fff;
  border: 1px solid #ece9f4;
  border-radius: 20px;
  box-shadow: 0 14px 36px -22px rgba(20, 12, 60, .25);
  overflow: hidden;
  align-self: start;
}
.checkout-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid #f0eef9;
}
.checkout-cart__eyebrow {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #6E3FBF;
  margin-bottom: .15rem;
}
.checkout-cart__head h2 {
  margin: 0;
  font-size: 1.1rem;
  color: #2A1A5E;
  font-weight: 800;
  letter-spacing: -.005em;
}
.checkout-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 .65rem;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(216, 27, 122, .08), rgba(110, 63, 191, .08));
  color: #2A1A5E;
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid rgba(110, 63, 191, .12);
}

.checkout-cart__list { list-style: none; margin: 0; padding: .5rem 0; }
.checkout-cart__row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  grid-template-areas: "thumb body stepper remove";
  gap: 1rem;
  align-items: center;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid #f4f3fa;
  transition: background .15s, opacity .25s, transform .25s;
}
.checkout-cart__row > .checkout-cart__thumb     { grid-area: thumb; }
.checkout-cart__row > .checkout-cart__body      { grid-area: body; min-width: 0; }
.checkout-cart__row > .checkout-cart__qty-form  { grid-area: stepper; }
.checkout-cart__row > .checkout-cart__remove    { grid-area: remove; }
.checkout-cart__row:last-child { border-bottom: 0; }
.checkout-cart__row:hover { background: #fafaff; }
.checkout-cart__row.is-removing { opacity: 0; transform: translateX(20px); }

/* Mobile: stack name on top, controls (stepper + remove) on a second row below.
   Thumb stays on the left and spans both rows. */
@media (max-width: 560px) {
  .checkout-cart__row {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "thumb body    body"
      "thumb stepper remove";
    column-gap: .75rem;
    row-gap: .6rem;
    padding: .85rem .9rem;
    align-items: start;
  }
  .checkout-cart__row > .checkout-cart__thumb {
    width: 56px; height: 56px;
    align-self: start;
  }
  .checkout-cart__row > .checkout-cart__qty-form  { grid-area: stepper; justify-self: start; }
  .checkout-cart__row > .checkout-cart__remove    { grid-area: remove;  justify-self: end; align-self: center; }
  .checkout-cart__name { font-size: .92rem; }
  .checkout-cart__meta-row { font-size: .78rem; gap: .4rem; }
  .checkout-cart__remove-btn {
    height: 30px;
    padding: 0 .55rem 0 .5rem;
    font-size: .72rem;
  }
  /* Always show "Remove" label on mobile (no hover to discover it) */
  .checkout-cart__remove-btn .checkout-cart__remove-label {
    max-width: 70px;
    opacity: 1;
    margin-left: .15rem;
  }
}

.checkout-cart__thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f2fb;
  border: 1px solid #ece9f4;
  text-decoration: none;
  transition: transform .2s, border-color .2s;
}
.checkout-cart__thumb:hover { transform: scale(1.04); border-color: rgba(110, 63, 191, .25); }
.checkout-cart__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.checkout-cart__thumb-fallback {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  color: rgba(110, 63, 191, .4);
}

.checkout-cart__body { min-width: 0; }
.checkout-cart__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #2A1A5E;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  margin-bottom: .25rem;
  transition: color .2s;
}
.checkout-cart__name:hover { color: #D81B7A; }
.checkout-cart__meta-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .82rem;
}
.checkout-cart__meta { color: #6b6486; font-weight: 500; }
.checkout-cart__meta + .checkout-cart__price::before {
  content: '·';
  color: #c8c2d4;
  margin-right: .55rem;
}
.checkout-cart__price { color: #2A1A5E; font-weight: 800; }
.checkout-cart__price--soft { color: #6E3FBF; font-style: italic; font-weight: 600; }

/* Stepper inside the checkout row — reuse drawer's stepbtn/stepvalue styles */
.checkout-cart__qty-form { margin: 0; }
.checkout-cart__stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(42, 26, 94, .15);
  border-radius: 999px;
  background: #faf9fd;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.checkout-cart__stepper:focus-within {
  border-color: #D81B7A;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(216, 27, 122, .12);
}

/* Clearer trash-can remove pill (matches drawer) */
.checkout-cart__remove { margin: 0; }
.checkout-cart__remove-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 32px;
  padding: 0 .65rem 0 .55rem;
  border-radius: 999px;
  background: #ffeef4;
  border: 1px solid rgba(216, 27, 122, .25);
  color: #C8102E;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s;
}
.checkout-cart__remove-btn svg { flex-shrink: 0; }
.checkout-cart__remove-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .25s ease, opacity .25s ease, margin-left .25s;
}
.checkout-cart__remove-btn:hover {
  background: linear-gradient(135deg, #D81B7A 0%, #C8102E 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 14px -6px rgba(200, 16, 46, .5);
}
.checkout-cart__remove-btn:hover .checkout-cart__remove-label {
  max-width: 70px;
  opacity: 1;
  margin-left: .15rem;
}
.checkout-cart__remove-btn:active { transform: scale(.96); }
@media (max-width: 640px) {
  .checkout-cart__remove-label { max-width: 70px; opacity: 1; margin-left: .15rem; }
}

.checkout-cart__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .85rem 1.25rem;
  background: #fafaff;
  border-top: 1px solid #f0eef9;
}
.checkout-cart__addmore {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 700;
  color: #6E3FBF;
  text-decoration: none;
  padding: .4rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(110, 63, 191, .25);
  transition: background .2s, color .2s;
}
.checkout-cart__addmore:hover { background: rgba(110, 63, 191, .08); color: #6E3FBF; }
.checkout-cart__clear {
  background: transparent;
  border: 0;
  font-size: .82rem;
  color: #8a83a3;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
  transition: color .15s;
}
.checkout-cart__clear:hover { color: #D81B7A; }

.checkout-cart__wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: 0 1.25rem 1.25rem;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid #25D366;
  color: #1ea552;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.checkout-cart__wa:hover {
  background: linear-gradient(135deg, #25D366 0%, #1ea552 100%);
  color: #fff;
  border-color: transparent;
}

/* ============================================================
   CHECKOUT — right form
   ============================================================ */
.checkout-form {
  background: #fff;
  border: 1px solid #ece9f4;
  border-radius: 20px;
  box-shadow: 0 14px 36px -22px rgba(20, 12, 60, .25);
  overflow: hidden;
  position: sticky;
  top: 100px;
}
.checkout-form__head {
  position: relative;
  padding: 1.6rem 1.6rem 1.4rem;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(255, 255, 255, .18), transparent 60%),
    radial-gradient(380px 200px at 0% 100%, rgba(255, 255, 255, .10), transparent 65%),
    linear-gradient(135deg, #3B82F6 0%, #1D4ED8 55%, #1E3A8A 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Decorative soft-light circle in the corner */
.checkout-form__head::after {
  content: '';
  position: absolute;
  inset: auto -40% -45% auto;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%);
  pointer-events: none;
}

.checkout-form__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .6rem;
  margin-bottom: .65rem;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.checkout-form__head h2 {
  margin: 0 0 .55rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.checkout-form__head p  {
  margin: 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, .92);
  max-width: 38ch;
  line-height: 1.5;
}

.checkout-form__body { padding: 1.5rem; position: relative; }

.checkout-form__section {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px dashed rgba(42, 26, 94, .12);
}
.checkout-form__section:last-of-type {
  padding-bottom: 0;
  margin-bottom: 1.25rem;
  border-bottom: 0;
}
.checkout-form__section-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .85rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6E3FBF;
}
.checkout-form__section-title svg {
  color: #D81B7A;
  flex-shrink: 0;
}

.checkout-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-bottom: .75rem;
}
.checkout-form__row--3 { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 540px) {
  .checkout-form__row, .checkout-form__row--3 { grid-template-columns: 1fr; }
}
.checkout-field {
  display: block;
  margin-bottom: .75rem;
}
.checkout-field > span {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-bottom: .3rem;
  font-size: .8rem;
  font-weight: 700;
  color: #2A1A5E;
}
.checkout-field > span em {
  color: #D81B7A;
  font-style: normal;
  font-weight: 800;
}
.checkout-field > span small {
  font-weight: 500;
  color: #8a83a3;
  font-size: .72rem;
  letter-spacing: 0;
}
.checkout-field input,
.checkout-field textarea {
  width: 100%;
  padding: .7rem .9rem;
  border-radius: 11px;
  border: 1.5px solid #ece9f4;
  background: #fbfaff;
  font-family: inherit;
  font-size: .94rem;
  color: #2A1A5E;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.checkout-field input::placeholder,
.checkout-field textarea::placeholder { color: #b9b3c7; }
.checkout-field input:focus,
.checkout-field textarea:focus {
  outline: none;
  border-color: #D81B7A;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(216, 27, 122, .12);
}
.checkout-field textarea { resize: vertical; min-height: 84px; }

/* jQuery Validate — invalid input + inline error message.
   Uses the brand magenta #D81B7A so errors stay on-brand with the form
   header gradient and the submit button. */
.checkout-field input.is-invalid,
.checkout-field textarea.is-invalid {
  border-color: #D81B7A;
  background: #fff5fa;
  box-shadow: 0 0 0 3px rgba(216, 27, 122, .12);
}
.checkout-field input.is-invalid:focus,
.checkout-field textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(216, 27, 122, .2);
}
.checkout-field .field-error {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: #D81B7A;
  line-height: 1.3;
  animation: field-error-in .25s ease;
}
.checkout-field .field-error::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D81B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.checkout-field--invalid > span {
  color: #D81B7A;
}
@keyframes field-error-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Submit button loading state (disabled while form posts) */
.checkout-submit.is-loading {
  opacity: .7;
  cursor: progress;
  pointer-events: none;
}

.checkout-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  margin-top: .35rem;
  padding: .95rem 1.1rem;
  border: 0;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 55%, #1E3A8A 100%);
  background-size: 180% 100%;
  background-position: 0% 50%;
  box-shadow: 0 14px 32px -10px rgba(29, 78, 216, .55);
  transition: background-position .35s, transform .2s, box-shadow .25s;
}
.checkout-submit:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 18px 38px -10px rgba(30, 58, 138, .55);
  color: #fff;
}
.checkout-submit:active { transform: scale(.98); }

.checkout-form__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: 1rem 0 0;
  font-size: .76rem;
  color: #8a83a3;
}
.checkout-form__legal svg { color: #16A6A1; flex-shrink: 0; }

.checkout-empty {
  background: #fff;
  border: 1px dashed rgba(42,26,94,.2);
  border-radius: 18px;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #4a4660;
}
.checkout-empty__icon {
  display: inline-flex;
  width: 64px; height: 64px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(216,27,122,.08), rgba(110,63,191,.08));
  color: #D81B7A;
  margin-bottom: .85rem;
}
.checkout-empty__icon svg { width: 32px; height: 32px; }
.checkout-empty h3 { margin: .25rem 0 .35rem; color: #2A1A5E; }
.checkout-empty__hint { margin-top: 1rem; color: #6b6486; font-size: .85rem; }

/* ============================================================
 * Thank-you page  (post-checkout)
 * ============================================================ */
.ty-band {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 6vw, 5rem);
  background:
    radial-gradient(800px 280px at 50% 10%, rgba(216,27,122,.10), transparent 70%),
    linear-gradient(180deg, #fffaf3 0%, #fdf3f6 100%);
}
.ty-wrap { max-width: 820px; }
.ty-card {
  background: #fff;
  border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 24px 60px -30px rgba(20,12,60,.4);
  border: 1px solid rgba(42,26,94,.06);
  position: relative;
  overflow: hidden;
}
.ty-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, #F26B1F 0%, #D81B7A 50%, #6E3FBF 100%);
}
.ty-card__check {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #16A6A1;
  background: rgba(22,166,161,.10);
  margin-bottom: 1rem;
  animation: ty-pop .55s cubic-bezier(.2,.9,.3,1.25) both;
}
@keyframes ty-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ty-card__check svg { width: 50px; height: 50px; }
.ty-card__eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #16A6A1;
  margin-bottom: .35rem;
}
.ty-card__title { margin: 0 0 1.35rem; font-size: clamp(1.4rem, 3vw, 1.85rem); line-height: 1.25; color: #2A1A5E; letter-spacing: -.01em; }

.ty-code {
  background: linear-gradient(135deg, rgba(216,27,122,.06) 0%, rgba(110,63,191,.06) 100%);
  border: 1px solid rgba(216,27,122,.2);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.ty-code__label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #6b6486;
  margin-bottom: .35rem;
}
.ty-code__value-row { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.ty-code__value {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 800;
  letter-spacing: .04em;
  color: #2A1A5E;
  background: #fff;
  padding: .35rem .85rem;
  border-radius: 10px;
  border: 1px dashed rgba(42,26,94,.2);
}
.ty-code__copy {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .85rem;
  border-radius: 99px;
  background: #fff;
  color: #D81B7A;
  border: 1px solid rgba(216,27,122,.25);
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ty-code__copy svg { width: 14px; height: 14px; }
.ty-code__copy:hover { background: #D81B7A; color: #fff; }
.ty-code__hint { margin: .75rem 0 0; font-size: .85rem; color: #4a4660; }
.ty-code__hint a { color: #D81B7A; font-weight: 600; }

.ty-actions {
  display: flex; flex-wrap: wrap; gap: .65rem;
  margin-bottom: 1.85rem;
}

.ty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.85rem; }
@media (max-width: 640px) { .ty-grid { grid-template-columns: 1fr; } }
.ty-grid h3 {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b6486;
}
.ty-list { list-style: none; padding: 0; margin: 0; }
.ty-list li {
  padding: .55rem 0;
  border-bottom: 1px dashed rgba(42,26,94,.1);
  color: #2A1A5E;
  display: flex; justify-content: space-between; gap: 1rem;
}
.ty-list li:last-child { border-bottom: 0; }
.ty-list li span { color: #6b6486; font-size: .88rem; }
.ty-addr { line-height: 1.55; color: #2A1A5E; }
.ty-addr a { color: #D81B7A; font-weight: 600; }

.ty-next { background: #faf9fd; border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.ty-next h3 { margin: 0 0 .65rem; color: #2A1A5E; font-size: 1rem; }
.ty-steps { margin: 0; padding-left: 1.2rem; color: #4a4660; }
.ty-steps li { margin: .35rem 0; line-height: 1.45; }
.ty-steps li strong { color: #2A1A5E; }
.ty-foot { font-size: .85rem; color: #6b6486; line-height: 1.55; }
.ty-foot code { background: rgba(216,27,122,.08); color: #D81B7A; padding: .1rem .4rem; border-radius: 6px; }
.ty-foot a { color: #D81B7A; font-weight: 600; }

/* ============================================================
 * Track-order page
 * ============================================================ */
.track-hero {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1rem, 2vw, 1.5rem);
  background:
    radial-gradient(800px 260px at 50% 0%, rgba(110,63,191,.12), transparent 70%),
    linear-gradient(180deg, #fff7f1 0%, #fdf3f6 100%);
}
.track-section { padding-top: 0; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.track-form {
  background: #fff;
  border: 1px solid rgba(42,26,94,.08);
  border-radius: 16px;
  padding: 1.1rem 1.25rem 1.15rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 12px 32px -22px rgba(20,12,60,.25);
  max-width: 720px;
}
.track-form__row { display: flex; gap: .65rem; align-items: end; }
.track-form__field { flex: 1; display: block; }
.track-form__field span {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: #2A1A5E;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.track-form__field input {
  width: 100%;
  padding: .7rem .95rem;
  border-radius: 10px;
  border: 1px solid rgba(42,26,94,.18);
  background: #faf9fd;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: .04em;
  color: #2A1A5E;
  text-transform: uppercase;
}
.track-form__field input:focus { outline: none; border-color: #D81B7A; box-shadow: 0 0 0 3px rgba(216,27,122,.15); background: #fff; }
.track-form__submit { white-space: nowrap; }
.track-form__hint { margin: .75rem 0 0; font-size: .8rem; color: #6b6486; }
.track-form__hint a { color: #D81B7A; font-weight: 600; }

.track-flash { padding: .85rem 1.1rem; border-radius: 12px; margin: 0 0 1.25rem; font-weight: 500; max-width: 720px; }
.track-flash--err { background: rgba(216,27,122,.10); color: #9d164f; border-left: 4px solid #D81B7A; }
.track-empty { color: #6b6486; font-size: .9rem; margin: 1rem 0; }
.track-empty code { background: rgba(110,63,191,.08); color: #6E3FBF; padding: .1rem .4rem; border-radius: 6px; }

.track-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem clamp(1rem, 2vw, 1.75rem);
  border: 1px solid rgba(42,26,94,.08);
  box-shadow: 0 18px 48px -28px rgba(20,12,60,.35);
  max-width: 980px;
}
.track-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #f0eef9;
}
.track-card__eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6b6486; }
.track-card__code { margin: .15rem 0 .25rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: clamp(1.15rem, 2.5vw, 1.45rem); color: #2A1A5E; letter-spacing: .04em; }
.track-card__meta { margin: 0; font-size: .85rem; color: #6b6486; }
.track-card__status {
  padding: .45rem .9rem;
  border-radius: 99px;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
  background: linear-gradient(135deg,#F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  color: #fff;
  white-space: nowrap;
}
.track-card__status--sky     { background: linear-gradient(135deg, #6dafff, #3d7fe3); }
.track-card__status--violet  { background: linear-gradient(135deg, #a07ce0, #6E3FBF); }
.track-card__status--amber   { background: linear-gradient(135deg, #f9b04a, #ec7e0f); }
.track-card__status--teal    { background: linear-gradient(135deg, #4ed1cd, #16A6A1); }
.track-card__status--orange  { background: linear-gradient(135deg, #ff9a45, #F26B1F); }
.track-card__status--magenta { background: linear-gradient(135deg, #ff5fa5, #D81B7A); }
.track-card__status--green   { background: linear-gradient(135deg, #5ec88c, #2c9854); }
.track-card__status--grey    { background: linear-gradient(135deg, #aab0bf, #6c7180); }
.track-card__status--red     { background: linear-gradient(135deg, #ff6b6b, #c8102e); }

.track-progress {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  position: relative;
}
.track-progress::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 7%; right: 7%;
  height: 3px;
  background: #ece9f4;
  z-index: 0;
  border-radius: 3px;
}
.track-progress__step { position: relative; text-align: center; z-index: 1; }
.track-progress__dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #ece9f4;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  margin-bottom: .35rem;
  transition: border-color .25s, background .25s, transform .25s;
}
.track-progress__dot svg { width: 14px; height: 14px; }
.track-progress__label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: #6b6486;
  line-height: 1.2;
}
.track-progress__step.is-done .track-progress__dot {
  background: linear-gradient(135deg, #5ec88c, #16A6A1);
  border-color: #16A6A1;
}
.track-progress__step.is-done .track-progress__label { color: #16A6A1; }
.track-progress__step.is-curr .track-progress__dot {
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  border-color: #D81B7A;
  transform: scale(1.12);
  box-shadow: 0 0 0 5px rgba(216,27,122,.18);
}
.track-progress__step.is-curr .track-progress__label { color: #2A1A5E; font-weight: 800; }
@media (max-width: 720px) {
  .track-progress { grid-template-columns: repeat(7, minmax(70px, 1fr)); overflow-x: auto; }
}

.track-cancelled {
  padding: 1rem 1.15rem; margin: 1rem 0;
  background: rgba(200,16,46,.07);
  border-left: 4px solid #c8102e;
  border-radius: 10px;
  color: #8a0e2e;
}
.track-cancelled a { color: #c8102e; font-weight: 600; }

.track-transport {
  margin: 1.5rem 0;
  background: linear-gradient(135deg, rgba(110,63,191,.05) 0%, rgba(216,27,122,.05) 100%);
  border: 1px solid rgba(110,63,191,.15);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
}
.track-transport header { display: flex; align-items: center; gap: .55rem; margin-bottom: .85rem; color: #6E3FBF; }
.track-transport header svg { width: 22px; height: 22px; }
.track-transport h3 { margin: 0; font-size: 1rem; color: #2A1A5E; }
.track-transport__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .85rem 1.25rem;
  margin: 0 0 .85rem;
}
.track-transport__grid div { margin: 0; }
.track-transport__grid dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b6486; margin-bottom: .15rem; }
.track-transport__grid dd { margin: 0; color: #2A1A5E; font-weight: 600; }
.track-transport__grid code { background: #fff; padding: .12rem .45rem; border-radius: 6px; color: #D81B7A; font-weight: 700; }

.track-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.5rem 0; }
@media (max-width: 720px) { .track-twocol { grid-template-columns: 1fr; } }
.track-items h3, .track-events h3 {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b6486;
}
.track-items ul { list-style: none; padding: 0; margin: 0; }
.track-items li {
  padding: .5rem 0;
  border-bottom: 1px dashed rgba(42,26,94,.1);
  display: flex; justify-content: space-between; gap: 1rem;
  color: #2A1A5E;
}
.track-items li:last-child { border-bottom: 0; }
.track-items li span { color: #6b6486; font-size: .85rem; }

.track-events ol { list-style: none; padding: 0; margin: 0; }
.track-events li {
  padding: .55rem 0 .55rem 1rem;
  position: relative;
  border-left: 2px solid rgba(216,27,122,.18);
  margin-left: .35rem;
}
.track-events li::before {
  content: '';
  position: absolute;
  left: -6px; top: .85rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #D81B7A;
}
.track-events li:first-child::before { background: linear-gradient(135deg, #F26B1F, #D81B7A); box-shadow: 0 0 0 4px rgba(216,27,122,.18); }
.track-events time { display: block; font-size: .72rem; color: #6b6486; margin-bottom: .15rem; }
.track-events strong { display: block; color: #2A1A5E; font-size: .92rem; }
.track-events span { color: #6b6486; font-size: .85rem; }

.track-card__foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #f0eef9;
  color: #6b6486;
  font-size: .88rem;
  line-height: 1.55;
}
.track-card__foot code { background: rgba(216,27,122,.08); color: #D81B7A; padding: .1rem .4rem; border-radius: 6px; font-weight: 700; }
.track-card__foot a { color: #D81B7A; font-weight: 600; }

/* Lightbox */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 4, 38, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem 3rem;
}
.gallery-lightbox.is-open { display: flex; }
.gallery-lightbox__stage {
  max-width: 1100px;
  max-height: 80vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox__stage img,
.gallery-lightbox__stage video,
.gallery-lightbox__stage iframe {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  background: #000;
}
.gallery-lightbox__stage iframe,
.gallery-lightbox__stage video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
.gallery-lightbox__caption {
  position: absolute;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .6rem 1.1rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #fff;
  font-size: .9rem;
  max-width: 80%;
  text-align: center;
  backdrop-filter: blur(6px);
}
.gallery-lightbox__caption:empty { display: none; }

.gallery-lightbox__close,
.gallery-lightbox__nav {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.gallery-lightbox__close { top: 1.25rem; right: 1.25rem; }
.gallery-lightbox__close:hover { background: rgba(255,255,255,.3); transform: rotate(90deg); }
.gallery-lightbox__nav--prev { top: 50%; left: 1.25rem; transform: translateY(-50%); }
.gallery-lightbox__nav--next { top: 50%; right: 1.25rem; transform: translateY(-50%); }
.gallery-lightbox__nav:hover {
  background: rgba(255,255,255,.3);
}
.gallery-lightbox__close svg,
.gallery-lightbox__nav svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .gallery-lightbox__nav { width: 36px; height: 36px; }
  .gallery-lightbox__close { top: 1rem; right: 1rem; width: 36px; height: 36px; }
}

/* ============================================================
   PRODUCT DETAIL — show.php
   ============================================================ */
.product-show {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background:
    radial-gradient(60% 80% at 80% 15%, rgba(242,107,31,.18), transparent 65%),
    radial-gradient(55% 70% at 15% 85%, rgba(216,27,122,.16), transparent 65%),
    linear-gradient(135deg, #1c0a4a 0%, #2a0f5e 50%, #1c0a4a 100%);
  color: #fff;
  overflow: hidden;
}
.product-show::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255,210,140,.6) 0, transparent 70%),
    radial-gradient(1.5px 1.5px at 78% 24%, rgba(255,160,200,.5) 0, transparent 70%),
    radial-gradient(2px 2px at 55% 64%, rgba(180,180,255,.4) 0, transparent 70%),
    radial-gradient(1.5px 1.5px at 25% 78%, rgba(255,220,140,.5) 0, transparent 70%);
  opacity: .55;
}
.product-show__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .product-show__grid { grid-template-columns: 1fr; }
}

/* Media wrapper — thumbs on the LEFT (vertical rail), main image on the right.
   Collapses to a horizontal thumb strip under the image on phones. */
.product-show__media-wrap {
  display: flex;
  flex-direction: row;
  gap: .9rem;
  max-width: 560px;
  margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 540px) {
  .product-show__media-wrap { flex-direction: column-reverse; max-width: 440px; }
}

/* Image frame — tight 4:5 portrait card that matches product packshots;
   object-fit: contain so the FULL image is shown without crop. */
.product-show__media {
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #fdebf2 100%);
  border-radius: 24px;
  padding: clamp(.75rem, 1.5vw, 1.25rem);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.08) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  width: 100%;
}

/* Vertical thumb rail — sits beside the main image on desktop */
.product-show__thumbs {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  overflow-y: auto;
  max-height: 100%;
  padding: .15rem;
  flex: 0 0 auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.product-show__thumbs::-webkit-scrollbar { width: 4px; }
.product-show__thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 4px; }
.product-show__thumbs::-webkit-scrollbar-track { background: transparent; }

/* On phones, switch to a horizontal scroll strip under the main image */
@media (max-width: 540px) {
  .product-show__thumbs {
    flex-direction: row;
    overflow-y: visible;
    overflow-x: auto;
    max-height: none;
  }
  .product-show__thumbs::-webkit-scrollbar { height: 4px; width: auto; }
}

.product-show__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 4px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff 0%, #fdebf2 100%);
  border: 2px solid rgba(255, 255, 255, .15);
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.product-show__thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}
.product-show__thumb:hover {
  transform: translateX(2px);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.4);
}
.product-show__thumb.is-active {
  border-color: #F26B1F;
  box-shadow: 0 0 0 2px rgba(242, 107, 31, .35), 0 8px 18px -6px rgba(242, 107, 31, .35);
}
@media (max-width: 540px) {
  .product-show__thumb:hover { transform: translateY(-2px); }
}

/* Make the main image card grow to fill remaining row space */
.product-show__media { flex: 1 1 auto; }
.product-show__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 20px 35px rgba(0,0,0,.18));
}
.product-show__placeholder { width: clamp(160px, 50%, 220px); aspect-ratio: 1 / 1; }
.product-show__placeholder svg { width: 100%; height: 100%; }

/* Play overlay on top of the image — visible only when a video URL is set */
.product-show__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 100%);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow:
    0 20px 40px -10px rgba(216, 27, 122, .65),
    0 0 0 8px rgba(255, 255, 255, .35);
  transition: transform .25s ease, box-shadow .25s ease;
  z-index: 2;
}
.product-show__play::after {
  /* Ripple/glow ring that pulses outward */
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .6);
  animation: playRipple 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes playRipple {
  0%   { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.45); opacity: 0; }
}
.product-show__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 28px 50px -10px rgba(216, 27, 122, .85),
              0 0 0 10px rgba(255, 255, 255, .45);
}
.product-show__play svg { width: 32px; height: 32px; transform: translateX(2px); }
@media (max-width: 600px) {
  .product-show__play { width: 64px; height: 64px; }
  .product-show__play svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-show__play::after { animation: none; }
}

/* Centered alignment between image card and copy column on wide screens */
@media (min-width: 901px) {
  .product-show__grid { align-items: start; }
  .product-show__media { position: sticky; top: 100px; align-self: start; }
}

/* Video lightbox modal */
.product-show__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 4, 38, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  animation: lbFade .25s ease-out;
}
.product-show__lightbox.is-open { display: flex; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.product-show__lightbox-stage {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.product-show__lightbox-stage iframe,
.product-show__lightbox-stage video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.product-show__lightbox-close {
  position: absolute;
  top: -3rem; right: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.product-show__lightbox-close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }
.product-show__lightbox-close svg { width: 18px; height: 18px; }

/* Copy column */
.product-show__copy { color: #fff; }
.product-show__crumbs {
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  margin-bottom: 1rem;
}
.product-show__crumbs a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  margin-right: .35rem;
}
.product-show__crumbs a:hover { color: #fff; text-decoration: underline; }
.product-show__crumbs span[aria-hidden] { color: rgba(255,255,255,.4); margin: 0 .35rem; }

.product-show__eyebrow {
  display: inline-flex; align-items: center;
  padding: .3rem .85rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #F2A100;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  font-size: .72rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.product-show__title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
  color: #fff;
  font-weight: 800;
}
.product-show__lede {
  color: rgba(255,255,255,.78);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 56ch;
}

/* Price row — soft glass capsule */
.product-show__price-row {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .85rem 1.25rem;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 1.5rem;
}
.product-show__price-sale {
  font-size: clamp(1.5rem, 2vw + .5rem, 1.9rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.product-show__price-mrp {
  color: rgba(255,255,255,.55);
  text-decoration: line-through;
  font-size: 1rem;
}
.product-show__price-off {
  background: #16A6A1;
  color: #fff;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.product-show__price-display { color: rgba(255,255,255,.85); font-size: 1.05rem; }
.product-show__price-onreq {
  color: #F2A100;
  font-weight: 700;
  font-size: 1.1rem;
  font-style: italic;
}

/* Specs list */
.product-show__specs {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .65rem .75rem;
}
.product-show__specs li {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: rgba(255,255,255,.78);
  font-size: .9rem;
}
.product-show__specs svg {
  width: 18px; height: 18px;
  color: #F2A100;
  flex: 0 0 auto;
}
.product-show__specs strong { color: #fff; font-weight: 600; }

/* CTAs */
.product-show__ctas {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
}
.product-show__cta-form { display: inline-flex; margin: 0; }
.product-show__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease, background .25s ease;
  white-space: nowrap;
}
.product-show__btn svg { width: 16px; height: 16px; }
.product-show__btn:hover { transform: translateY(-2px); }
.product-show__btn--primary {
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 100%);
  color: #fff;
  box-shadow: 0 14px 28px -8px rgba(216, 27, 122, .55);
}
.product-show__btn--primary:hover { color: #fff; box-shadow: 0 18px 36px -8px rgba(216, 27, 122, .8); filter: brightness(1.05); }
.product-show__btn--ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.2);
}
.product-show__btn--ghost:hover { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.4); }
.product-show__btn--whatsapp {
  background: #25D366;
  color: #fff;
  box-shadow: 0 14px 28px -8px rgba(37, 211, 102, .55);
}
.product-show__btn--whatsapp:hover { background: #1ebe5b; color: #fff; box-shadow: 0 18px 36px -8px rgba(37, 211, 102, .8); }

/* "Watch video" is a tertiary action — subtler than the primary CTAs so it
   doesn't compete for the click, but still discoverable via the play icon. */
.product-show__btn--video {
  background: transparent;
  color: rgba(255, 255, 255, .85);
  border-color: rgba(255, 255, 255, .25);
  padding: .7rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
}
.product-show__btn--video svg {
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #F26B1F, #D81B7A);
  color: #fff;
  border-radius: 50%;
  padding: 4px;
  box-sizing: content-box;
}
.product-show__btn--video:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .45);
}

/* Sections below the hero */
.product-show__videosection,
.product-show__descsection {
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.product-show__h2 {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(1.4rem, 2vw + .5rem, 1.9rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--color-primary, #2A1A5E);
  margin: 0 0 1.25rem;
}
.product-show__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.35);
}
.product-show__video iframe,
.product-show__video video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.product-show__desc {
  color: var(--color-text-soft, #555);
  font-size: 1rem;
  line-height: 1.7;
}
.product-show__desc p { margin: 0 0 1rem; }
.product-show__desc h3 { color: var(--color-primary, #2A1A5E); margin-top: 1.5rem; }
.product-show__desc ul { padding-left: 1.25rem; }
.product-show__desc img { max-width: 100%; height: auto; border-radius: 10px; margin: 1rem 0; }

/* WHY CHOOSE US — compact band: gold eyebrow + 4-col icon row */
.section--why {
  background: linear-gradient(135deg, #2A1A5E 0%, #1a0f44 60%, #120a30 100%);
  color: #fff;
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.why-band { position: relative; z-index: 1; }
.why-band__eyebrow {
  display: block;
  color: #F2A100;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8rem;
  text-align: center;
  margin: 0 0 1.1rem;
}
.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  position: relative; z-index: 1;
}
@media (max-width: 820px){ .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .why-grid { grid-template-columns: 1fr; } }
.why-cell {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-right: 1px solid rgba(255,255,255,.10);
  text-align: left;
}
.why-cell:last-child { border-right: 0; }
@media (max-width: 820px){
  .why-cell:nth-child(2n) { border-right: 0; }
  .why-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.10); }
}
@media (max-width: 480px){
  .why-cell { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; }
  .why-cell:last-child { border-bottom: 0 !important; }
}
.why-cell__icon {
  width: 60px; height: 60px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
.why-cell__copy { min-width: 0; }
.why-cell h3 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  line-height: 1.2;
}
.why-cell p {
  color: rgba(255,255,255,.7);
  font-size: .82rem;
  line-height: 1.4;
  margin: 0;
}

/* TESTIMONIAL SLIDER — quote-mark top-left, quote, stars, avatar+name (matches reference) */
.section--test { background: #ffffff; }
.test-slider { position: relative; margin-top: 1rem; padding: 0 2rem; }
.test-viewport { overflow: hidden; }
.test-track {
  display: flex; gap: 1.25rem;
  transition: transform .55s var(--ease-out);
  will-change: transform;
}
.test-slide {
  flex: 0 0 calc(25% - 0.94rem);
  background: #fff; border-radius: 14px;
  border: 1px solid #efeaf5;
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 8px 22px -12px rgba(110,63,191,.18);
  display: flex; flex-direction: column;
  position: relative;
}
@media (max-width: 1200px){ .test-slide { flex: 0 0 calc(33.333% - 0.84rem); } }
@media (max-width: 820px){  .test-slide { flex: 0 0 calc(50% - 0.625rem); } }
@media (max-width: 560px){  .test-slide { flex: 0 0 100%; } }

.test-slide__quote-mark {
  position: absolute; top: 1rem; left: 1.1rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f9d8ec 0%, #f5c8e3 60%, #efb6d6 100%);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 2.6rem; line-height: 1;
  color: #B81B6A;
  padding-top: .85rem;
  box-shadow: 0 6px 14px -8px rgba(216,27,122,.35);
}
.test-slide { padding-left: 4rem; padding-top: 1.4rem; }
.test-slide__quote {
  font-size: .88rem;
  color: #4a3f6b;
  line-height: 1.55;
  margin: 0 0 .75rem;
  flex: 1;
}
.test-slide__stars {
  color: #F2A100;
  font-size: .95rem;
  letter-spacing: .1em;
  margin: 0 0 1rem;
}
.test-slide__footer {
  display: flex; align-items: center; gap: .65rem;
  padding-top: .9rem;
  border-top: 1px solid #f0eaf6;
}
.test-slide__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #F26B1F, #D81B7A);
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: .95rem;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 10px -3px rgba(216,27,122,.4);
}
.test-slide__avatar--img { padding: 0; }
.test-slide__avatar--img,
.test-slide__avatar img { object-fit: cover; }
img.test-slide__avatar--img { width: 44px; height: 44px; }
.test-slide__who { min-width: 0; }
.test-slide__who strong {
  display: block;
  font-size: .88rem; font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.test-slide__who span {
  display: block;
  font-size: .75rem;
  color: var(--color-muted);
  margin-top: .15rem;
}

/* Arrows — hidden to match reference (dots only) */
.test-arrow { display: none; }
.test-slider { padding: 0; }

/* Dots */
.test-dots {
  display: flex; gap: .5rem; justify-content: center;
  margin-top: 1.5rem;
}
.test-dots button {
  width: 9px; height: 9px; border-radius: 50%;
  border: 0;
  background: #d6cfe9;
  cursor: pointer;
  padding: 0;
  transition: background .25s, transform .25s, width .25s;
}
.test-dots button.is-active {
  background: #D81B7A;
  width: 22px;
  border-radius: 6px;
}

.test-dots { display: flex; gap: .35rem; justify-content: center; margin-top: 1.25rem; }
.test-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0;
  background: var(--color-border); cursor: pointer; padding: 0;
  transition: background .25s, transform .25s;
}
.test-dots button.is-active { background: var(--color-primary); transform: scale(1.4); }

/* FROM OUR BLOG */
.section--blog { padding-top: clamp(2.5rem, 5vw, 4rem); }
.home-blog__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.home-blog__head .section__eyebrow {
  display: block; color: var(--color-secondary, #D81B7A);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  font-size: .8rem; margin-bottom: .5rem;
}
.home-blog__head .section-h2 { margin: 0; }
.home-blog__view-all {
  color: var(--color-primary, #6E3FBF);
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px; white-space: nowrap;
  transition: color .2s, transform .2s;
}
.home-blog__view-all:hover { transform: translateX(2px); }

.home-blog__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
@media (max-width: 980px) { .home-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .home-blog__grid { grid-template-columns: 1fr; } }

.home-blog-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 24px -16px rgba(20, 12, 60, .25);
  border: 1px solid var(--color-border, #ececf2);
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.home-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(20, 12, 60, .35);
}
.home-blog-card__media {
  position: relative; display: block;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: #f5f3fa;
}
.home-blog-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.home-blog-card:hover .home-blog-card__media img { transform: scale(1.04); }
.home-blog-card__chip {
  position: absolute; left: .85rem; bottom: .85rem;
  background: var(--color-primary, #6E3FBF); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  padding: .3rem .7rem; border-radius: var(--radius-pill, 999px);
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.25);
}
.home-blog-card__body { padding: 1rem 1.1rem 1.2rem; }
.home-blog-card__title {
  font-size: 1.05rem; line-height: 1.35; margin: 0 0 .55rem;
  font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-blog-card__title a { color: inherit; text-decoration: none; }
.home-blog-card__title a:hover { color: var(--color-primary, #6E3FBF); }
.home-blog-card__meta {
  margin: 0; color: var(--color-muted, #6b6e80);
  font-size: .82rem;
}
.home-blog-card__meta span { margin: 0 .35rem; opacity: .6; }

/* FINAL CTA BANNER */
.final-cta-banner {
  position: relative; isolation: isolate;
  text-align: center;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(7rem, 18vw, 12rem);
  border-radius: var(--radius-md);
  color: #fff; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(110,63,191,.5);
  min-height: clamp(180px, 22vw, 240px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.final-cta-banner h2 { color: #fff; font-size: clamp(1.4rem, 2vw + 1rem, 2.2rem); margin: 0 0 .5rem; line-height: 1.25; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.final-cta-banner p  { opacity: .95; margin: 0 0 1.5rem; max-width: 60ch; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.final-cta-banner__actions { display: inline-flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.final-cta-banner__bg {
  position: absolute; inset: 0; z-index: -1;
  background-image: url('../images/bottom-banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.final-cta-banner__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,26,94,.25) 0%, rgba(42,26,94,.15) 50%, rgba(242,107,31,.2) 100%);
}
@media (max-width: 720px) {
  .final-cta-banner { padding: 2rem 1.25rem; min-height: 0; }
  .final-cta-banner__bg { background-position: center; }
}

/* ============================================================
   END HOME REDESIGN
   ============================================================ */

/* legacy section bands kept for inner pages */

/* Scroll progress bar (fixed top) */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: rgba(42,26,94,.08); pointer-events: none;
}
.scroll-progress > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #F26B1F, #D81B7A, #D4AF37, #16A6A1);
  background-size: 200% 100%;
  animation: headerStrip 8s linear infinite;
  box-shadow: 0 0 12px rgba(216,27,122,.4);
  transition: width 60ms linear;
}

/* Marquee ticker */
.marquee {
  overflow: hidden;
  background: linear-gradient(90deg, #2A1A5E 0%, #1a0f44 100%);
  color: #fff;
  padding: .9rem 0;
  font-weight: 600;
  letter-spacing: .02em;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.marquee__track {
  display: inline-flex; gap: 1.5rem; white-space: nowrap;
  animation: marqueeSlide 32s linear infinite;
  will-change: transform;
}
.marquee__item { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; }
.marquee__emoji { font-size: 1.2rem; filter: grayscale(0) drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.marquee__dot {
  color: transparent;
  background-image: var(--gradient-festive);
  -webkit-background-clip: text; background-clip: text;
  font-size: 1rem; align-self: center;
}
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Coloured section bands */
.section--band,
.band--teal, .band--navy, .band--cream {
  position: relative; overflow: hidden;
}
.band--teal {
  background: linear-gradient(135deg, #16A6A1 0%, #0e8784 60%, #0a6361 100%);
  color: #fff;
}
.band--teal h2, .band--teal .stat__num { color: #fff !important; }
.band--navy {
  background: linear-gradient(135deg, #2A1A5E 0%, #1a0f44 60%, #120a30 100%);
  color: #e9e4f7;
}
.band--navy .section__eyebrow { color: #16A6A1 !important; }
.band--cream { background: linear-gradient(180deg, #fff1e0 0%, #fff8ec 100%); }

.band-orbs { position: absolute; inset: 0; pointer-events: none; opacity: .6; }
.band-orbs::before, .band-orbs::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px);
}
.band-orbs::before {
  width: 40vw; height: 40vw; top: -10vw; left: -10vw;
  background: radial-gradient(circle, rgba(216,27,122,.55), transparent 70%);
  animation: orbDrift 16s ease-in-out infinite alternate;
}
.band-orbs::after {
  width: 40vw; height: 40vw; bottom: -15vw; right: -10vw;
  background: radial-gradient(circle, rgba(22,166,161,.45), transparent 70%);
  animation: orbDrift 20s ease-in-out infinite alternate-reverse;
}

/* Stat on dark background */
.stat--on-dark {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}
.stat--on-dark .stat__num { color: #fff; }
.stat--on-dark .stat__label { color: rgba(255,255,255,.75); }

/* Wave dividers */
.wave-divider {
  position: relative;
  width: 100%; line-height: 0;
  margin-top: -1px;                 /* avoid hairline gaps */
  z-index: 0;
}
.wave-divider svg {
  width: 100%; height: clamp(50px, 8vw, 110px);
  display: block;
}

/* ============================================================
   PINNED HORIZONTAL CATEGORIES SCROLL
   ============================================================ */
.pinned-cats { overflow: hidden; padding-bottom: 4rem; }
.pinned-cats__track { height: 100vh; position: relative; margin-top: 2rem; }
.pinned-cats__rail {
  display: flex; gap: 1.5rem; padding: 2rem; height: 100%; align-items: center;
  width: max-content;
  will-change: transform;
}
.pinned-cats__hint {
  text-align: center; color: var(--color-muted);
  font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  margin-top: 1rem;
}
.cat-card {
  position: relative;
  flex: 0 0 clamp(280px, 36vw, 440px);
  height: clamp(360px, 56vh, 540px);
  border-radius: var(--radius-lg);
  padding: 2.2rem; text-decoration: none;
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cat-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 40px 80px -20px rgba(26,16,51,.5);
}
.cat-card__num {
  font-family: var(--font-display); font-size: 2.6rem; opacity: .5;
  font-weight: 500;
}
.cat-card__title { font-family: var(--font-display); font-size: 2rem; color: inherit; margin: .25rem 0 .75rem; }
.cat-card__desc  { opacity: .92; font-size: .95rem; margin: 0 0 1rem; }
.cat-card__cta   {
  display: inline-flex; gap: .3rem; font-weight: 700; font-size: .95rem;
  background: rgba(255,255,255,.2); padding: .5rem 1rem; border-radius: var(--radius-pill);
  align-self: flex-start; backdrop-filter: blur(4px);
}
.cat-card__shape { position: absolute; top: -40px; right: -40px; width: 240px; height: 240px; opacity: .8; }
.cat-card__shape svg { width: 100%; height: 100%; animation: spinSlow 28s linear infinite; }
@keyframes spinSlow { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Fallback when ScrollTrigger not ready: horizontal overflow scroll */
.pinned-cats:not(.is-pinned) .pinned-cats__track {
  height: auto; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; padding-bottom: 1rem;
}

/* ============================================================
   FEATURED PRODUCT CARDS — accent ribbons
   ============================================================ */
.card--accent { position: relative; border-top: 4px solid var(--accent, var(--color-primary)); }
.card__ribbon {
  position: absolute; top: 12px; right: 12px;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; padding: .3rem .6rem; border-radius: var(--radius-pill);
  font-weight: 700;
}

/* ============================================================
   TESTIMONIAL CARDS — glass on navy
   ============================================================ */
.test-card {
  margin: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  color: #e9e4f7;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.test-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-festive);
  background-size: 200% 100%;
  animation: headerStrip 6s linear infinite;
}
.test-card__stars { color: #D4AF37; font-size: 1rem; margin-bottom: .5rem; }
.test-card p { font-style: italic; line-height: 1.7; }
.test-card footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.test-card footer strong { color: #fff; }
.test-card footer span { display: block; color: rgba(255,255,255,.65); font-size: .85rem; }

/* ============================================================
   FINAL CTA (gradient card)
   ============================================================ */
.final-cta {
  position: relative; isolation: isolate;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 2rem;
  border-radius: var(--radius-lg);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(216,27,122,.45);
}
.final-cta h2 { color: #fff; font-size: clamp(1.8rem, 3vw + 1rem, 2.8rem); }
.final-cta p  { max-width: 56ch; margin-inline: auto; opacity: .9; }
.final-cta__actions {
  margin-top: 1.5rem; display: inline-flex; gap: .75rem; flex-wrap: wrap; justify-content: center;
}
.final-cta__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 30% 30%, rgba(242,107,31,.9) 0%, transparent 60%),
    radial-gradient(60% 80% at 70% 80%, rgba(216,27,122,.9) 0%, transparent 60%),
    radial-gradient(40% 60% at 80% 20%, rgba(212,175,55,.85) 0%, transparent 60%),
    linear-gradient(135deg, #2A1A5E 0%, #1a0f44 100%);
  background-size: 180% 180%, 180% 180%, 180% 180%, auto;
  animation: ctaMesh 12s ease-in-out infinite alternate;
}
@keyframes ctaMesh {
  0%   { background-position: 0% 0%, 100% 100%, 100% 0%, 0 0; }
  100% { background-position: 100% 50%, 0% 50%, 0% 100%, 0 0; }
}

/* Scale-in target for ScrollTrigger */
[data-scale-in] { transform: scale(.9); opacity: 0; transition: none; }
[data-scale-in].is-visible { transform: scale(1); opacity: 1; transition: transform .8s var(--ease-out), opacity .6s; }

/* Reduced-motion: kill continuous animations */
@media (prefers-reduced-motion: reduce) {
  .text-gradient, .hero__title em,
  .hero__eyebrow, .site-header::after,
  .section--hero::after, .hero::after {
    animation: none !important;
  }
}

/* Persistent breathing on hero visuals via a wrapper so GSAP transforms don't collide */
.hero__visual > * { animation: heroFloat 6s ease-in-out infinite; }
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* CTA festive button: continuous glow */
.btn--festive {
  box-shadow: 0 10px 25px -8px rgba(216,27,122,.55), 0 0 0 0 rgba(242,107,31,.35);
  animation: ctaGlow 3.4s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 10px 25px -8px rgba(216,27,122,.55), 0 0 0 0 rgba(242,107,31,.0); }
  50%      { box-shadow: 0 14px 30px -8px rgba(216,27,122,.65), 0 0 30px 6px rgba(242,107,31,.25); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Reference Header + Footer
   ============================================================ */
.site-header {
  --header-height: 66px;
  height: var(--header-height);
  background: #fff;
  border-top: 4px solid rgba(66, 140, 82, .35);
  border-bottom: 1px solid rgba(26, 16, 51, .08);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-top: 10px;
}
.site-header::after { display: none; }
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 34px -22px rgba(26, 16, 51, .42);
}
.site-header .container {
  width: min(100% - 5.25rem, 1320px);
  gap: 1.45rem;
}
.brand__logo {
  height: 100%;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.nav {
  gap: clamp(.85rem, 1.32vw, 1.55rem);
}
.nav a {
  color: #100a2d;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  padding: .72rem .06rem;
}
.nav a.is-active,
.nav a:hover {
  color: #2A1A5E;
}
.nav a.is-active::after {
  left: 0;
  right: 0;
  bottom: -.42rem;
  height: 3px;
  background: #e51b7b;
}
.nav-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .16rem;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
}
.nav__cta {
  align-items: center;
  gap: 1rem;
  margin-left: .5rem;
}
.header-whatsapp,
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  text-decoration: none;
}
.nav .header-whatsapp {
  min-height: 35px;
  padding: .56rem 1rem;
  border-radius: var(--radius-pill);
  background: #20c862;
  color: #fff;
  font-size: .76rem;
  box-shadow: 0 13px 24px -14px rgba(32, 200, 98, .85);
}
.nav .header-whatsapp:hover {
  background: #16b554;
  color: #fff;
}
.nav .header-whatsapp::after,
.nav .header-phone::after {
  display: none;
}
.nav .header-phone {
  color: #16102d;
  font-weight: 800;
  font-size: .78rem;
  padding: .28rem 0;
}
.header-phone__icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #d81b7a;
}

.site-footer {
  position: relative;
  margin-top: 0;
  padding: 2.15rem 0 1.1rem;
  color: rgba(255, 255, 255, .78);
  background:
    radial-gradient(80% 140% at 18% 0%, rgba(216, 27, 122, .14), transparent 54%),
    radial-gradient(65% 110% at 88% 12%, rgba(22, 166, 161, .12), transparent 58%),
    linear-gradient(135deg, #28105d 0%, #1a0a46 48%, #12052d 100%);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, .14) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 36%, rgba(255, 212, 122, .14) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 78%, rgba(255, 255, 255, .10) 0 1px, transparent 2px);
  background-size: 180px 180px, 240px 240px, 220px 220px;
  opacity: .7;
}
.site-footer .container {
  position: relative;
  z-index: 1;
  width: min(100% - 3rem, 1280px);
}
.site-footer--v2 .footer-grid,
.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr .82fr 1fr 1.03fr 1.25fr;
  gap: 0;
  align-items: start;
}
.footer-grid > div {
  min-height: 150px;
  padding: 0 2rem;
}
.footer-grid > div:first-child {
  padding-left: 0;
}
.footer-grid > div + div {
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.footer-brand__marks {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-brand__logo-link { display: inline-flex; align-items: center; }
.footer-brand__logo {
  height: 64px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, .25));
}
.footer-brand__seal {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 3px;
  box-shadow: 0 6px 16px -6px rgba(216, 27, 122, .55),
              0 0 0 2px rgba(255, 255, 255, .08);
  flex-shrink: 0;
}
.footer-brand p {
  margin: .9rem 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: .88rem;
  line-height: 1.65;
}
.site-footer--v2 h4,
.footer-grid h4 {
  margin: .15rem 0 1.05rem;
  color: #fff;
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .18em;
}
.site-footer--v2 ul,
.footer-grid ul {
  gap: .45rem;
  font-size: .88rem;
  line-height: 1.45;
}
.site-footer a,
.site-footer--v2 ul a {
  color: rgba(255, 255, 255, .82);
  opacity: 1;
}
.site-footer a:hover,
.site-footer--v2 ul a:hover {
  color: #fff;
}
.footer-contact li {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.footer-contact__icon {
  width: 24px;
  height: 24px;
  color: #f2a23a;
  background: transparent;
  font-size: 1rem;
}
.footer-contact__icon--whatsapp {
  color: #25D366;
}
.footer-social {
  display: flex;
  gap: .7rem;
  margin-top: 1.15rem;
}
.footer-social__item {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff !important;
  background: var(--social-color, rgba(255,255,255,.16));
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .65);
}
.footer-bottom {
  justify-content: center;
  margin-top: 1.9rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .68);
  font-size: .82rem;
  text-align: center;
  opacity: 1;
}

@media (max-width: 1180px) {
  .site-header {
    --header-height: 66px;
  }
  .site-header .container {
    width: min(100% - 3rem, 1280px);
    gap: 1.55rem;
  }
  .brand__logo {
    height: 43px;
    max-width: 158px;
  }
  .nav {
    gap: .88rem;
  }
  .nav a {
    font-size: .73rem;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border-radius: 12px;
    background: rgba(42, 26, 94, .06);
    position: relative;
    z-index: 5;
  }
  .nav {
    top: 100%;            /* Always sit directly below the (possibly-sticky) header */
    left: 0;
    right: 0;
    padding: .7rem 1rem 1rem;
    border: 1px solid rgba(42, 26, 94, .08);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 22px 42px -28px rgba(26, 16, 51, .5);
    z-index: 45;          /* sit above subsequent content but below the cart drawer */
  }
  .nav a {
    padding: .9rem 0;
  }
  .nav a.is-active::after {
    bottom: .35rem;
    right: auto;
    width: 42px;
  }
  .nav__cta {
    display: grid;
    gap: .65rem;
    margin: .65rem 0 0;
  }
  .nav .header-phone {
    display: inline-flex;
    justify-content: center;
    padding: .75rem 1rem;
    border: 1px solid rgba(42, 26, 94, .12);
    border-radius: var(--radius-pill);
  }
  .nav .header-whatsapp {
    justify-content: center;
  }
}

@media (max-width: 1040px) {
  .site-footer--v2 .footer-grid,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 0;
  }
  .footer-grid > div {
    min-height: 0;
    padding: 0 1.5rem;
  }
  .footer-grid > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 620px) {
  .site-header .container,
  .site-footer .container {
    width: min(100% - 1.4rem, 1280px);
  }
  .brand__logo {
    height: 42px;
    max-width: 154px;
  }
  .site-footer {
    padding-top: 2rem;
  }
  .site-footer--v2 .footer-grid,
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer-grid > div {
    padding: 0;
    border-left: 0 !important;
  }
  .footer-grid > div + div {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
}

/* ============================================================
   ABOUT HERO — breadcrumb + multi-color title over fireworks photo
   ============================================================ */
.about-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(320px, 38vw, 460px);
  display: flex; align-items: center;
  background: #fdfaff;
}
.about-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url('../images/bottom-banner.png');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
.about-hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .98) 0%,
    rgba(255, 255, 255, .92) 28%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, .15) 70%,
    rgba(255, 255, 255, 0) 100%);
}
.about-hero__inner {
  width: 100%;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  max-width: 1200px;
}
.about-hero__crumbs {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--color-muted, #6b6e80);
  font-size: .85rem;
  margin-bottom: 1.5rem;
}
.about-hero__crumbs a {
  color: inherit; text-decoration: none;
  transition: color .2s;
}
.about-hero__crumbs a:hover { color: var(--color-primary, #6E3FBF); }
.about-hero__crumbs-sep { opacity: .5; }
.about-hero__crumbs [aria-current="page"] {
  color: var(--color-text, #1f1c2e);
  font-weight: 600;
}
.about-hero__eyebrow {
  display: block;
  color: var(--color-secondary, #D81B7A);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: .85rem;
}
.about-hero__title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.2vw + .5rem, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #1c1442;
  margin: 0 0 1.2rem;
  letter-spacing: -.02em;
  max-width: 18ch;
}
.about-hero__title--orange { color: #F26B1F; }
.about-hero__title--pink { color: #D81B7A; }
.about-hero__lede {
  font-size: clamp(1rem, .5vw + .9rem, 1.15rem);
  color: #4a4660;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0;
}
.about-hero__hl {
  color: #F26B1F;
  font-weight: 700;
}
@media (max-width: 720px) {
  .about-hero { min-height: 0; }
  .about-hero__overlay {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .96) 0%,
      rgba(255, 255, 255, .88) 60%,
      rgba(255, 255, 255, .55) 100%);
  }
  .about-hero__title { max-width: none; }
}

/* ============================================================
   FOUNDER MESSAGE — dark hero + photo + quote + stats row
   ============================================================ */
.founder-block {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding: clamp(3rem, 6vw, 5rem) 0 0;
  overflow: hidden;
  background: #0d0828;
}
.founder-block__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url('../images/other-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.founder-block::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(13, 8, 40, .35) 0%, rgba(13, 8, 40, .55) 70%, rgba(13, 8, 40, .85) 100%),
    linear-gradient(90deg, rgba(13, 8, 40, .65) 0%, rgba(13, 8, 40, .25) 35%, rgba(13, 8, 40, .25) 65%, rgba(13, 8, 40, .65) 100%);
  pointer-events: none;
}
.founder-block__inner {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
}
@media (max-width: 980px) { .founder-block__inner { grid-template-columns: 1fr; } }

.founder-block__copy { min-width: 0; }
.founder-block__eyebrow {
  display: inline-block;
  color: #F26B1F;
  font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 1rem;
}
.founder-block__title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.6vw + .4rem, 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 1.25rem;
  color: #fff;
  letter-spacing: -.01em;
}
.founder-block__title-accent {
  background: linear-gradient(90deg, #F26B1F 0%, #E63A93 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.founder-block__lede {
  font-size: clamp(1.05rem, .6vw + .9rem, 1.35rem);
  color: rgba(255,255,255,.92);
  line-height: 1.45;
  margin: 0 0 1.5rem;
  font-weight: 400;
}
.founder-block__lede strong { font-weight: 700; }
.founder-block__hl { color: #F2C744; font-weight: 700; }

.founder-block__bio {
  color: rgba(255,255,255,.82);
  font-size: .98rem;
  line-height: 1.65;
  margin: 0 0 1rem;
  max-width: 56ch;
}
.founder-block__bio strong { color: #fff; font-weight: 700; }

.founder-block__sign {
  margin-top: 1.5rem;
}
.founder-block__signature {
  display: block;
  font-family: var(--font-display, "Playfair Display", serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 2vw + .5rem, 2.2rem);
  color: #F2C744;
  line-height: 1;
}
.founder-block__sign-role {
  display: block;
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  margin-top: .35rem;
}

/* media column */
.founder-block__media {
  position: relative;
  display: flex; justify-content: center;
}

/* combined card: photo on top, quote+seal below — one gold border */
.founder-card {
  position: relative;
  width: 100%; max-width: 440px;
  border-radius: 20px;
  border: 2px solid rgba(242, 199, 68, .65);
  padding: .8rem;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6),
              0 0 0 6px rgba(242, 199, 68, .08);
  display: flex; flex-direction: column; gap: .8rem;
}
.founder-card::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(242, 199, 68, .25);
  border-radius: 14px;
  pointer-events: none;
}

.founder-card__photo {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  
    
}
.founder-card__photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
.founder-card__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 8%;
  display: block;
}

/* quote bar */
.founder-card__quote {
  position: relative;
  margin: 0;
  padding: 1rem 1.1rem 1rem 2.8rem;
  background: linear-gradient(135deg, #2f1f6e 0%, #1f1454 100%);
  border: 1px solid rgba(242, 199, 68, .55);
  border-radius: 12px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 110px;
}
.founder-card__quote-mark {
  position: absolute; top: .6rem; left: .85rem;
  font-family: var(--font-display, serif);
  font-size: 2.2rem; line-height: 1;
  color: #F2C744;
}
.founder-card__quote-text { min-width: 0; }
.founder-card__quote-text p {
  margin: 0 0 .45rem;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(255,255,255,.95);
}
.founder-card__quote-text cite {
  display: block;
  font-style: normal;
  font-size: .78rem;
  font-weight: 700;
  color: #F2C744;
}

/* SINCE 2008 seal — inline at right of the quote bar */
.founder-card__since {
  position: relative;
  width: 86px; height: 86px;
  flex-shrink: 0;
  display: grid; place-items: center;
  text-align: center;
  color: #F2C744;
}
.founder-card__since-stars {
  position: absolute; top: 8px; left: 0; right: 0;
  font-size: .55rem; letter-spacing: .15em; line-height: 1;
}
.founder-card__since-text {
  position: absolute; top: 24px; left: 0; right: 0;
  font-size: .58rem; font-weight: 700; letter-spacing: .22em;
}
.founder-card__since-year {
  position: absolute; top: 34px; left: 0; right: 0;
  font-family: var(--font-display, serif);
  font-size: 1.4rem; font-weight: 700;
  color: #F2C744;
  line-height: 1;
}
/* laurel wreath drawn as two curved branches */
.founder-card__since-laurel {
  position: absolute; bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 26px;
}
.founder-card__since-laurel::before,
.founder-card__since-laurel::after {
  content: ""; position: absolute; bottom: 0;
  width: 30px; height: 26px;
  border: 2px solid #F2C744;
  border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.founder-card__since-laurel::before { left: 0; transform: rotate(-12deg); border-right: 0; }
.founder-card__since-laurel::after  { right: 0; transform: rotate(12deg);  border-left: 0; }

@media (max-width: 480px) {
  .founder-card__quote { grid-template-columns: 1fr; padding-right: 1.1rem; }
  .founder-card__since { justify-self: end; }
}

/* Stats row — overlaps the bottom of the dark band into white */
.founder-block__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(-2.5rem, -4vw, -1.5rem);
  padding-bottom: 0;
  z-index: 2;
}
@media (max-width: 980px) { .founder-block__stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .founder-block__stats { grid-template-columns: 1fr; } }

.founder-stat {
  background: #fff;
  border-radius: 14px;
  padding: 1.1rem 1.1rem 1.2rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .65rem;
  box-shadow: 0 18px 36px -16px rgba(20, 12, 60, .35);
  border: 1px solid #ececf2;
  color: #1c1442;
}
.founder-stat__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.founder-stat__icon svg { width: 22px; height: 22px; display: block; }
.founder-stat--purple .founder-stat__icon {
  background: rgba(110, 63, 191, .12);
  color: var(--color-primary, #6E3FBF);
}
.founder-stat--pink .founder-stat__icon {
  background: rgba(216, 27, 122, .12);
  color: var(--color-secondary, #D81B7A);
}
.founder-stat--orange .founder-stat__icon {
  background: rgba(242, 107, 31, .12);
  color: #F26B1F;
}
.founder-stat__copy { min-width: 0; }
.founder-stat__big {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 1.6vw + .4rem, 1.7rem);
  font-weight: 800;
  line-height: 1.1;
  color: #1c1442;
}
.founder-stat__title {
  display: block;
  font-size: .92rem; font-weight: 700;
  color: #1c1442;
  margin-top: .15rem;
}
.founder-stat__body {
  margin: .45rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--color-muted, #6b6e80);
}

/* Add bottom padding to the dark band so the stat cards can overlap into the next white section */
.founder-block { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }

/* ============================================================
   VALUES — "What We Stand For" four non-negotiables
   ============================================================ */
.values-section {
  position: relative;
  background: #ffffff;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 6vw, 5rem);
  overflow: hidden;
}
.values-section__deco {
  position: absolute; top: clamp(2rem, 4vw, 3.5rem);
  width: clamp(180px, 16vw, 240px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  opacity: .35;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, #000 50%, transparent 70%);
          mask: radial-gradient(circle at 50% 50%, #000 0%, #000 50%, transparent 70%);
}
.values-section__deco--left {
  left: clamp(.5rem, 4vw, 2.5rem);
  background:
    conic-gradient(from 0deg,
      rgba(216, 27, 122, .35) 0 2deg, transparent 2deg 22.5deg,
      rgba(216, 27, 122, .35) 22.5deg 24.5deg, transparent 24.5deg 45deg,
      rgba(216, 27, 122, .35) 45deg 47deg, transparent 47deg 67.5deg,
      rgba(216, 27, 122, .35) 67.5deg 69.5deg, transparent 69.5deg 90deg,
      rgba(216, 27, 122, .35) 90deg 92deg, transparent 92deg 112.5deg,
      rgba(216, 27, 122, .35) 112.5deg 114.5deg, transparent 114.5deg 135deg,
      rgba(216, 27, 122, .35) 135deg 137deg, transparent 137deg 157.5deg,
      rgba(216, 27, 122, .35) 157.5deg 159.5deg, transparent 159.5deg 180deg,
      rgba(216, 27, 122, .35) 180deg 182deg, transparent 182deg 202.5deg,
      rgba(216, 27, 122, .35) 202.5deg 204.5deg, transparent 204.5deg 225deg,
      rgba(216, 27, 122, .35) 225deg 227deg, transparent 227deg 247.5deg,
      rgba(216, 27, 122, .35) 247.5deg 249.5deg, transparent 249.5deg 270deg,
      rgba(216, 27, 122, .35) 270deg 272deg, transparent 272deg 292.5deg,
      rgba(216, 27, 122, .35) 292.5deg 294.5deg, transparent 294.5deg 315deg,
      rgba(216, 27, 122, .35) 315deg 317deg, transparent 317deg 337.5deg,
      rgba(216, 27, 122, .35) 337.5deg 339.5deg, transparent 339.5deg 360deg);
}
.values-section__deco--right {
  right: clamp(.5rem, 4vw, 2.5rem);
  background:
    conic-gradient(from 0deg,
      rgba(110, 63, 191, .3) 0 2deg, transparent 2deg 22.5deg,
      rgba(110, 63, 191, .3) 22.5deg 24.5deg, transparent 24.5deg 45deg,
      rgba(110, 63, 191, .3) 45deg 47deg, transparent 47deg 67.5deg,
      rgba(110, 63, 191, .3) 67.5deg 69.5deg, transparent 69.5deg 90deg,
      rgba(110, 63, 191, .3) 90deg 92deg, transparent 92deg 112.5deg,
      rgba(110, 63, 191, .3) 112.5deg 114.5deg, transparent 114.5deg 135deg,
      rgba(110, 63, 191, .3) 135deg 137deg, transparent 137deg 157.5deg,
      rgba(110, 63, 191, .3) 157.5deg 159.5deg, transparent 159.5deg 180deg,
      rgba(110, 63, 191, .3) 180deg 182deg, transparent 182deg 202.5deg,
      rgba(110, 63, 191, .3) 202.5deg 204.5deg, transparent 204.5deg 225deg,
      rgba(110, 63, 191, .3) 225deg 227deg, transparent 227deg 247.5deg,
      rgba(110, 63, 191, .3) 247.5deg 249.5deg, transparent 249.5deg 270deg,
      rgba(110, 63, 191, .3) 270deg 272deg, transparent 272deg 292.5deg,
      rgba(110, 63, 191, .3) 292.5deg 294.5deg, transparent 294.5deg 315deg,
      rgba(110, 63, 191, .3) 315deg 317deg, transparent 317deg 337.5deg,
      rgba(110, 63, 191, .3) 337.5deg 339.5deg, transparent 339.5deg 360deg);
}
@media (max-width: 720px) { .values-section__deco { display: none; } }

.values-section__inner { position: relative; z-index: 1; }

.values-section__head { text-align: center; margin: 0 auto 3rem; }
.values-section__eyebrow {
  display: inline-block;
  color: var(--color-secondary, #D81B7A);
  font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .82rem;
  margin: 0 0 1rem;
}
.values-section__title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.4vw + .6rem, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: #1c1442;
  margin: 0 0 1.5rem;
  letter-spacing: -.01em;
}
.values-section__title-accent {
  background: linear-gradient(90deg, #E63A93 0%, #F26B1F 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.values-section__divider {
  display: inline-flex; align-items: center; gap: .85rem;
  color: var(--color-secondary, #D81B7A);
}
.values-section__divider i {
  display: block;
  width: clamp(80px, 12vw, 140px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110, 63, 191, .35), transparent);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1100px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .values-grid { grid-template-columns: 1fr; } }

.value-card {
  --card-from: #F2A35A;
  --card-to:   #E84A77;
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 2rem 1.6rem;
  border: 1px solid #ececf2;
  box-shadow: 0 18px 40px -22px rgba(20, 12, 60, .25);
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s;
  isolation: isolate;
  min-height: 320px;
  display: flex; flex-direction: column;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 50px -22px rgba(20, 12, 60, .35);
}
.value-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--card-from), var(--card-to));
  border-radius: 0 0 18px 18px;
}
.value-card--orange { --card-from: #F2A35A; --card-to: #E84A77; }
.value-card--pink   { --card-from: #E63A93; --card-to: #B22A8E; }
.value-card--purple { --card-from: #7E4FCF; --card-to: #4A2A8E; }

.value-card__num {
  position: absolute; top: 1.1rem; right: 1.4rem;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.05rem;
  color: rgba(28, 20, 66, .14);
  letter-spacing: .02em;
}
.value-card__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--card-from) 0%, var(--card-to) 100%);
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: 1.6rem;
  box-shadow: 0 12px 24px -10px rgba(216, 58, 122, .45);
}
.value-card__icon svg { width: 28px; height: 28px; display: block; }

.value-card__title {
  margin: 0 0 .85rem;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 800;
  color: #1c1442;
  letter-spacing: -.005em;
}
.value-card__rule {
  display: block;
  width: 36px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--card-from), var(--card-to));
  margin: 0 0 1.1rem;
}
.value-card__body {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: #4a4660;
}

/* faint firework decoration tucked in the lower-right of each card */
.value-card__bg {
  position: absolute; right: -22px; bottom: -22px;
  width: 130px; height: 130px;
  z-index: -1;
  opacity: .9;
  background:
    conic-gradient(from 0deg,
      rgba(216, 27, 122, .10) 0 2deg, transparent 2deg 22.5deg,
      rgba(216, 27, 122, .10) 22.5deg 24.5deg, transparent 24.5deg 45deg,
      rgba(216, 27, 122, .10) 45deg 47deg, transparent 47deg 67.5deg,
      rgba(216, 27, 122, .10) 67.5deg 69.5deg, transparent 69.5deg 90deg,
      rgba(216, 27, 122, .10) 90deg 92deg, transparent 92deg 112.5deg,
      rgba(216, 27, 122, .10) 112.5deg 114.5deg, transparent 114.5deg 135deg,
      rgba(216, 27, 122, .10) 135deg 137deg, transparent 137deg 157.5deg,
      rgba(216, 27, 122, .10) 157.5deg 159.5deg, transparent 159.5deg 180deg,
      rgba(216, 27, 122, .10) 180deg 182deg, transparent 182deg 202.5deg,
      rgba(216, 27, 122, .10) 202.5deg 204.5deg, transparent 204.5deg 225deg,
      rgba(216, 27, 122, .10) 225deg 227deg, transparent 227deg 247.5deg,
      rgba(216, 27, 122, .10) 247.5deg 249.5deg, transparent 249.5deg 270deg,
      rgba(216, 27, 122, .10) 270deg 272deg, transparent 272deg 292.5deg,
      rgba(216, 27, 122, .10) 292.5deg 294.5deg, transparent 294.5deg 315deg,
      rgba(216, 27, 122, .10) 315deg 317deg, transparent 317deg 337.5deg,
      rgba(216, 27, 122, .10) 337.5deg 339.5deg, transparent 339.5deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, #000 50%, transparent 75%);
          mask: radial-gradient(circle at 50% 50%, #000 0%, #000 50%, transparent 75%);
}
.value-card--purple .value-card__bg,
.value-card--pink   .value-card__bg { filter: hue-rotate(0); }

/* ============================================================
   JOURNEY TIMELINE — dark vertical timeline with year markers
   ============================================================ */
.journey {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: #1a0e3a;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 6vw, 5rem);
  overflow: hidden;
}
.journey__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(45% 50% at 90% 8%, rgba(216, 27, 122, .35) 0%, transparent 60%),
    radial-gradient(35% 40% at 95% 95%, rgba(242, 107, 31, .3) 0%, transparent 60%),
    radial-gradient(50% 70% at 50% 50%, rgba(74, 40, 132, .25) 0%, transparent 70%),
    linear-gradient(180deg, #1a0e3a 0%, #14082e 100%);
}
/* faint star noise */
.journey::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 28% 42%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 65% 25%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 45% 80%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 88% 35%, rgba(255,255,255,.4), transparent 60%);
  pointer-events: none;
}
.journey__spark {
  position: absolute; pointer-events: none; opacity: .55;
  width: clamp(160px, 22vw, 320px); aspect-ratio: 1 / 1;
  background:
    conic-gradient(from 0deg,
      rgba(216, 27, 122, .8) 0 1.5deg, transparent 1.5deg 22.5deg,
      rgba(216, 27, 122, .8) 22.5deg 24deg, transparent 24deg 45deg,
      rgba(216, 27, 122, .8) 45deg 46.5deg, transparent 46.5deg 67.5deg,
      rgba(216, 27, 122, .8) 67.5deg 69deg, transparent 69deg 90deg,
      rgba(216, 27, 122, .8) 90deg 91.5deg, transparent 91.5deg 112.5deg,
      rgba(216, 27, 122, .8) 112.5deg 114deg, transparent 114deg 135deg,
      rgba(216, 27, 122, .8) 135deg 136.5deg, transparent 136.5deg 157.5deg,
      rgba(216, 27, 122, .8) 157.5deg 159deg, transparent 159deg 180deg,
      rgba(216, 27, 122, .8) 180deg 181.5deg, transparent 181.5deg 202.5deg,
      rgba(216, 27, 122, .8) 202.5deg 204deg, transparent 204deg 225deg,
      rgba(216, 27, 122, .8) 225deg 226.5deg, transparent 226.5deg 247.5deg,
      rgba(216, 27, 122, .8) 247.5deg 249deg, transparent 249deg 270deg,
      rgba(216, 27, 122, .8) 270deg 271.5deg, transparent 271.5deg 292.5deg,
      rgba(216, 27, 122, .8) 292.5deg 294deg, transparent 294deg 315deg,
      rgba(216, 27, 122, .8) 315deg 316.5deg, transparent 316.5deg 337.5deg,
      rgba(216, 27, 122, .8) 337.5deg 339deg, transparent 339deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, #000 30%, transparent 65%);
          mask: radial-gradient(circle at 50% 50%, #000 0%, #000 30%, transparent 65%);
}
.journey__spark--tr { top: -3rem; right: -4rem; }
.journey__spark--br {
  bottom: -4rem; right: -3rem; opacity: .4;
  background:
    conic-gradient(from 0deg,
      rgba(242, 107, 31, .85) 0 1.5deg, transparent 1.5deg 22.5deg,
      rgba(242, 107, 31, .85) 22.5deg 24deg, transparent 24deg 45deg,
      rgba(242, 107, 31, .85) 45deg 46.5deg, transparent 46.5deg 67.5deg,
      rgba(242, 107, 31, .85) 67.5deg 69deg, transparent 69deg 90deg,
      rgba(242, 107, 31, .85) 90deg 91.5deg, transparent 91.5deg 112.5deg,
      rgba(242, 107, 31, .85) 112.5deg 114deg, transparent 114deg 135deg,
      rgba(242, 107, 31, .85) 135deg 136.5deg, transparent 136.5deg 157.5deg,
      rgba(242, 107, 31, .85) 157.5deg 159deg, transparent 159deg 180deg,
      rgba(242, 107, 31, .85) 180deg 181.5deg, transparent 181.5deg 202.5deg,
      rgba(242, 107, 31, .85) 202.5deg 204deg, transparent 204deg 225deg,
      rgba(242, 107, 31, .85) 225deg 226.5deg, transparent 226.5deg 247.5deg,
      rgba(242, 107, 31, .85) 247.5deg 249deg, transparent 249deg 270deg,
      rgba(242, 107, 31, .85) 270deg 271.5deg, transparent 271.5deg 292.5deg,
      rgba(242, 107, 31, .85) 292.5deg 294deg, transparent 294deg 315deg,
      rgba(242, 107, 31, .85) 315deg 316.5deg, transparent 316.5deg 337.5deg,
      rgba(242, 107, 31, .85) 337.5deg 339deg, transparent 339deg 360deg);
}

.journey__inner { position: relative; z-index: 1; max-width: 880px; }

.journey__head { margin-bottom: 2.5rem; }
.journey__eyebrow {
  display: inline-block; padding-bottom: .35rem;
  color: #E63A93; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  font-size: .82rem;
  border-bottom: 1px solid rgba(216, 27, 122, .35);
  margin-bottom: 1.25rem;
}
.journey__title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.6vw + .5rem, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 1rem;
  letter-spacing: -.01em;
}
.journey__title-accent {
  background: linear-gradient(90deg, #E63A93 0%, #F26B1F 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 800;
}
.journey__lede {
  font-size: clamp(.95rem, .3vw + .9rem, 1.1rem);
  line-height: 1.6;
  color: rgba(255,255,255,.75);
  margin: 0;
}

/* the list itself */
.journey__list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
/* the vertical gradient line that runs through all items */
.journey__list::before {
  content: ""; position: absolute;
  left: 18px; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg,
    #E63A93 0%,
    #E63A93 18%,
    #E84A77 30%,
    #7E4FCF 48%,
    #F26B1F 66%,
    #F2A100 82%,
    #F2C744 100%);
  border-radius: 2px;
}

.journey-item {
  position: relative;
  padding: 0 0 1.6rem 56px;
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 1.25rem;
  --tone: #E63A93;
}
.journey-item--pink   { --tone: #E63A93; }
.journey-item--coral  { --tone: #E84A77; }
.journey-item--purple { --tone: #7E4FCF; }
.journey-item--orange { --tone: #F26B1F; }
.journey-item--amber  { --tone: #F2A100; }
.journey-item--gold   { --tone: #F2C744; }
.journey-item:last-child { padding-bottom: 0; }

/* dashed lead-in to the left of each dot */
.journey-item__lead {
  position: absolute; left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 1px;
  border-top: 1px dashed var(--tone);
  opacity: .65;
}
/* the dot on the timeline */
.journey-item__dot {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06),
              0 0 18px var(--tone);
}
.journey-item__year {
  font-family: var(--font-display, "Playfair Display", serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.6vw + .6rem, 1.8rem);
  color: var(--tone);
  letter-spacing: .02em;
  line-height: 1;
}

.journey-item__card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(135deg, rgba(36, 18, 78, .85) 0%, rgba(26, 14, 58, .85) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.journey-item__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--tone);
  color: var(--tone);
  display: grid; place-items: center;
  flex-shrink: 0;
  background: rgba(0, 0, 0, .15);
  box-shadow: 0 0 24px -8px var(--tone) inset;
}
.journey-item__icon svg { width: 28px; height: 28px; }
.journey-item__copy { min-width: 0; }
.journey-item__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  margin: 0 0 .35rem;
  line-height: 1.25;
}
.journey-item__body {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
}

/* bottom CTA card */
.journey__cta {
  position: relative;
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(36, 18, 78, .9), rgba(26, 14, 58, .9));
  border: 1px solid rgba(242, 107, 31, .55);
  border-radius: 16px;
  box-shadow: 0 0 32px -8px rgba(242, 107, 31, .35);
  overflow: hidden;
  isolation: isolate;
}
.journey__cta-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid #E63A93;
  color: #E63A93;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.journey__cta-icon svg { width: 22px; height: 22px; }
.journey__cta-title {
  margin: 0 0 .25rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
}
.journey__cta-highlight {
  background: linear-gradient(90deg, #F26B1F 0%, #F2A100 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.journey__cta-body {
  margin: 0;
  font-size: .9rem;
  color: rgba(255,255,255,.7);
}
.journey__cta-spark {
  position: absolute; right: -1.5rem; bottom: -1.5rem;
  width: 130px; height: 130px;
  z-index: -1;
  background:
    conic-gradient(from 0deg,
      rgba(242, 107, 31, .8) 0 1.5deg, transparent 1.5deg 22.5deg,
      rgba(242, 107, 31, .8) 22.5deg 24deg, transparent 24deg 45deg,
      rgba(242, 107, 31, .8) 45deg 46.5deg, transparent 46.5deg 67.5deg,
      rgba(242, 107, 31, .8) 67.5deg 69deg, transparent 69deg 90deg,
      rgba(242, 107, 31, .8) 90deg 91.5deg, transparent 91.5deg 112.5deg,
      rgba(242, 107, 31, .8) 112.5deg 114deg, transparent 114deg 135deg,
      rgba(242, 107, 31, .8) 135deg 136.5deg, transparent 136.5deg 157.5deg,
      rgba(242, 107, 31, .8) 157.5deg 159deg, transparent 159deg 180deg,
      rgba(242, 107, 31, .8) 180deg 181.5deg, transparent 181.5deg 202.5deg,
      rgba(242, 107, 31, .8) 202.5deg 204deg, transparent 204deg 225deg,
      rgba(242, 107, 31, .8) 225deg 226.5deg, transparent 226.5deg 247.5deg,
      rgba(242, 107, 31, .8) 247.5deg 249deg, transparent 249deg 270deg,
      rgba(242, 107, 31, .8) 270deg 271.5deg, transparent 271.5deg 292.5deg,
      rgba(242, 107, 31, .8) 292.5deg 294deg, transparent 294deg 315deg,
      rgba(242, 107, 31, .8) 315deg 316.5deg, transparent 316.5deg 337.5deg,
      rgba(242, 107, 31, .8) 337.5deg 339deg, transparent 339deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, #000 30%, transparent 65%);
          mask: radial-gradient(circle at 50% 50%, #000 0%, #000 30%, transparent 65%);
  opacity: .55;
}

/* mobile */
@media (max-width: 600px) {
  .journey-item {
    grid-template-columns: 70px 1fr;
    padding-left: 50px;
  }
  .journey-item__icon { width: 50px; height: 50px; }
  .journey-item__icon svg { width: 22px; height: 22px; }
  .journey-item__card { padding: .9rem 1rem; }
  .journey-item__title { font-size: 1rem; }
  .journey-item__body { font-size: .82rem; }
  .journey__list::before { left: 14px; }
  .journey-item__dot { left: 8px; width: 12px; height: 12px; }
  .journey-item__lead { display: none; }
}

/* ============================================================
   BRAND MARK — wordmark logo + REGD seal showcase
   ============================================================ */
.brand-mark {
  position: relative;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(110, 63, 191, .07) 0%, transparent 70%),
    linear-gradient(180deg, #fffaf3 0%, #fff 100%);
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
}
.brand-mark__deco {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: clamp(140px, 14vw, 200px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  opacity: .25;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, #000 50%, transparent 70%);
          mask: radial-gradient(circle at 50% 50%, #000 0%, #000 50%, transparent 70%);
}
.brand-mark__deco--left {
  left: -3rem;
  background:
    conic-gradient(from 0deg,
      rgba(216, 27, 122, .35) 0 1.5deg, transparent 1.5deg 22.5deg,
      rgba(216, 27, 122, .35) 22.5deg 24deg, transparent 24deg 45deg,
      rgba(216, 27, 122, .35) 45deg 46.5deg, transparent 46.5deg 67.5deg,
      rgba(216, 27, 122, .35) 67.5deg 69deg, transparent 69deg 90deg,
      rgba(216, 27, 122, .35) 90deg 91.5deg, transparent 91.5deg 112.5deg,
      rgba(216, 27, 122, .35) 112.5deg 114deg, transparent 114deg 135deg,
      rgba(216, 27, 122, .35) 135deg 136.5deg, transparent 136.5deg 157.5deg,
      rgba(216, 27, 122, .35) 157.5deg 159deg, transparent 159deg 180deg,
      rgba(216, 27, 122, .35) 180deg 181.5deg, transparent 181.5deg 202.5deg,
      rgba(216, 27, 122, .35) 202.5deg 204deg, transparent 204deg 225deg,
      rgba(216, 27, 122, .35) 225deg 226.5deg, transparent 226.5deg 247.5deg,
      rgba(216, 27, 122, .35) 247.5deg 249deg, transparent 249deg 270deg,
      rgba(216, 27, 122, .35) 270deg 271.5deg, transparent 271.5deg 292.5deg,
      rgba(216, 27, 122, .35) 292.5deg 294deg, transparent 294deg 315deg,
      rgba(216, 27, 122, .35) 315deg 316.5deg, transparent 316.5deg 337.5deg,
      rgba(216, 27, 122, .35) 337.5deg 339deg, transparent 339deg 360deg);
}
.brand-mark__deco--right {
  right: -3rem;
  background:
    conic-gradient(from 0deg,
      rgba(242, 107, 31, .35) 0 1.5deg, transparent 1.5deg 22.5deg,
      rgba(242, 107, 31, .35) 22.5deg 24deg, transparent 24deg 45deg,
      rgba(242, 107, 31, .35) 45deg 46.5deg, transparent 46.5deg 67.5deg,
      rgba(242, 107, 31, .35) 67.5deg 69deg, transparent 69deg 90deg,
      rgba(242, 107, 31, .35) 90deg 91.5deg, transparent 91.5deg 112.5deg,
      rgba(242, 107, 31, .35) 112.5deg 114deg, transparent 114deg 135deg,
      rgba(242, 107, 31, .35) 135deg 136.5deg, transparent 136.5deg 157.5deg,
      rgba(242, 107, 31, .35) 157.5deg 159deg, transparent 159deg 180deg,
      rgba(242, 107, 31, .35) 180deg 181.5deg, transparent 181.5deg 202.5deg,
      rgba(242, 107, 31, .35) 202.5deg 204deg, transparent 204deg 225deg,
      rgba(242, 107, 31, .35) 225deg 226.5deg, transparent 226.5deg 247.5deg,
      rgba(242, 107, 31, .35) 247.5deg 249deg, transparent 249deg 270deg,
      rgba(242, 107, 31, .35) 270deg 271.5deg, transparent 271.5deg 292.5deg,
      rgba(242, 107, 31, .35) 292.5deg 294deg, transparent 294deg 315deg,
      rgba(242, 107, 31, .35) 315deg 316.5deg, transparent 316.5deg 337.5deg,
      rgba(242, 107, 31, .35) 337.5deg 339deg, transparent 339deg 360deg);
}
@media (max-width: 720px) { .brand-mark__deco { display: none; } }

.brand-mark__inner { position: relative; z-index: 1; max-width: 980px; }

.brand-mark__head { text-align: center; margin: 0 auto 2.5rem; max-width: 720px; }
.brand-mark__eyebrow {
  display: inline-block;
  color: var(--color-secondary, #D81B7A);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .8rem;
  margin: 0 0 1rem;
}
.brand-mark__title {
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 2.6vw + .6rem, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  color: #1c1442;
  margin: 0 0 .85rem;
  letter-spacing: -.01em;
}
.brand-mark__title-accent {
  background: linear-gradient(90deg, #E63A93 0%, #F26B1F 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.brand-mark__lede {
  margin: 0;
  color: #4a4660;
  font-size: 1rem;
  line-height: 1.6;
}

.brand-mark__row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 22px 50px -28px rgba(20, 12, 60, .25);
}

.brand-mark__logo {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  text-align: center;
  flex: 0 1 auto;
}
.brand-mark__logo img {
  display: block;
  max-width: 220px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.brand-mark__logo figcaption {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  color: #1c1442;
  letter-spacing: .02em;
}

.brand-mark__divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent 0%, rgba(110, 63, 191, .25) 50%, transparent 100%);
  min-height: 120px;
}
@media (max-width: 720px) {
  .brand-mark__divider { width: 60%; height: 1px; min-height: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(110, 63, 191, .25) 50%, transparent 100%); }
}

.brand-mark__seal {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  text-align: center;
  flex: 0 1 auto;
}
.brand-mark__seal img {
  display: block;
  width: clamp(120px, 14vw, 170px);
  height: clamp(120px, 14vw, 170px);
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 18px 36px -16px rgba(216, 27, 122, .45);
  background: #fff;
}
.brand-mark__seal figcaption {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1rem;
  color: #c8102e;
  letter-spacing: .12em;
}
.brand-mark__seal figcaption span {
  color: var(--color-muted, #6b6e80);
  font-weight: 700;
  letter-spacing: .2em;
  font-size: .8rem;
  margin-left: .3rem;
}

/* ============================================================
   SAFETY GUIDES — do/don't cards + warning panel
   ============================================================ */
.safety-section {
  background: #fffaf3;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 6vw, 5rem);
}
.safety-section__inner { max-width: 1080px; }

.safety-section__customer {
  display: flex; justify-content: flex-start;
  margin: 0 0 1.75rem;
}
.safety-section__customer-pill {
  display: inline-block;
  background: linear-gradient(180deg, #F58A3A 0%, #F26B1F 100%);
  color: #fff;
  padding: .55rem 1.25rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  box-shadow: 0 8px 16px -10px rgba(242, 107, 31, .55);
}

.safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 760px) { .safety-grid { grid-template-columns: 1fr; } }

.safety-card {
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 14px;
  padding: 0 1.5rem 1.4rem;
  box-shadow: 0 14px 30px -22px rgba(20, 12, 60, .25);
  overflow: hidden;
}
.safety-card__head {
  margin: 0 -1.5rem 1.25rem;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid #ececf2;
}
.safety-card__badge {
  display: inline-block;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .12em;
  padding: .35rem 1rem;
  border-radius: 4px;
  color: #fff;
}
.safety-card__badge--do   { background: linear-gradient(180deg, #F26B1F 0%, #d8551a 100%); }
.safety-card__badge--dont { background: linear-gradient(180deg, #E63A5C 0%, #C8102E 100%); }

.safety-list {
  list-style: decimal;
  padding-left: 1.4rem;
  margin: 0;
  color: #2b2545;
}
.safety-list li {
  padding: .35rem 0;
  font-size: .95rem;
  line-height: 1.6;
}
.safety-list li::marker {
  color: var(--color-primary, #6E3FBF);
  font-weight: 700;
}

.safety-warning {
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 14px;
  padding: 0 0 1.5rem;
  overflow: hidden;
  box-shadow: 0 14px 30px -22px rgba(20, 12, 60, .25);
}
.safety-warning__head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .75rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(90deg, rgba(216, 27, 58, .06) 0%, rgba(255, 255, 255, 0) 60%);
  border-bottom: 1px solid #ececf2;
}
.safety-warning__badge {
  background: linear-gradient(180deg, #E63A5C 0%, #C8102E 100%);
  color: #fff; font-weight: 800;
  letter-spacing: .14em; font-size: .82rem;
  padding: .35rem .9rem;
  border-radius: 4px;
}
.safety-warning__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.2rem;
  color: #C8102E;
  letter-spacing: .02em;
}
.safety-warning__lede {
  margin: 1.25rem 1.5rem 0;
  color: #4a4660;
  line-height: 1.65;
  font-size: .95rem;
}

.safety-steps {
  list-style: none;
  padding: 0;
  margin: 1.5rem 1.5rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 1100px) { .safety-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .safety-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .safety-steps { grid-template-columns: 1fr; } }

.safety-steps__item {
  position: relative;
  padding: 1rem 1rem 1.1rem;
  border-radius: 12px;
  background: #fffaf3;
  border: 1px solid rgba(242, 107, 31, .25);
  display: flex; flex-direction: column; gap: .35rem;
}
.safety-steps__num {
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  background: linear-gradient(135deg, #F26B1F, #C8102E);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.safety-steps__title {
  font-family: var(--font-sans);
  font-size: .95rem;
  color: #C8102E;
  font-weight: 800;
  letter-spacing: .02em;
}
.safety-steps__body {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: #4a4660;
}

.safety-warning__foot {
  margin: 1rem 1.5rem 0;
  font-size: .9rem;
  line-height: 1.6;
  color: #4a4660;
  padding-top: 1rem;
  border-top: 1px dashed rgba(216, 27, 58, .25);
}
.safety-warning__foot strong { color: #C8102E; }

/* ============================================================
   WHERE TO BUY — interactive India dealer map
   ============================================================ */
.wtb {
  background: #fffaf3;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3.5rem, 6vw, 5rem);
}
.wtb__inner { max-width: 1200px; }
.wtb__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 880px) { .wtb__grid { grid-template-columns: 1fr; } }

/* MAP */
.wtb-map { position: relative; width: 100%; }
.wtb-map__frame {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #ececf2;
  box-shadow: 0 18px 40px -22px rgba(20, 12, 60, .25);
  overflow: hidden;
  padding: 1rem;
}
.wtb-map__canvas {
  width: 100%;
  aspect-ratio: 5 / 6;
  min-height: 460px;
  position: relative;
}
.wtb-map__canvas .jvm-container,
.wtb-map__canvas .jvm-map { width: 100%; height: 100%; }
.wtb-map__canvas svg { display: block; width: 100%; height: 100%; }
/* state-code labels rendered inside each region */
.wtb-map__canvas .jvm-region-label,
.wtb-map__canvas text {
  fill: #ffffff;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .04em;
  paint-order: stroke;
  stroke: rgba(20, 12, 60, .55);
  stroke-width: 2px;
  stroke-linejoin: round;
  pointer-events: none;
}
@media (max-width: 540px) { .wtb-map__canvas { aspect-ratio: 4 / 5; min-height: 360px; } }
/* jsVectorMap zoom controls — match brand */
.jvm-zoom-btn {
  background: var(--color-primary, #6E3FBF) !important;
  color: #fff !important;
}
.wtb-map__credit {
  margin: .65rem 0 0;
  font-size: .75rem;
  color: rgba(20, 12, 60, .45);
}
.wtb-map__credit a { color: var(--color-primary, #6E3FBF); text-decoration: none; }
.wtb-map__credit a:hover { text-decoration: underline; }

.wtb-map__legend {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1rem;
  margin-top: .85rem;
  font-size: .8rem;
  color: var(--color-muted, #6b6e80);
}
.wtb-map__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.wtb-dot {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  background: #b9bdc7;
}
.wtb-dot--served { background: #1F3A93; }
.wtb-dot--active { background: #F2C744; }
.wtb-dot--grey   { background: #b9bdc7; }

/* State picker grid */
.wtb-states {
  display: flex; flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 14px;
}

/* Pins (state code buttons) */
.wtb-pin {
  appearance: none; -webkit-appearance: none;
  background: #b9bdc7;
  color: #fff;
  font: 700 .72rem/1 var(--font-sans);
  letter-spacing: .04em;
  border: 0;
  padding: .45rem .7rem;
  border-radius: 999px;
  cursor: default;
  box-shadow: 0 3px 6px -2px rgba(20, 12, 60, .2);
  transition: transform .2s, background .2s, box-shadow .2s, color .2s;
  flex-shrink: 0;
}
.wtb-pin.is-served {
  background: #1F3A93;
  cursor: pointer;
  box-shadow: 0 4px 10px -3px rgba(31, 58, 147, .55);
}
.wtb-pin.has-dealers:hover,
.wtb-pin.has-dealers:focus-visible {
  transform: translateY(-2px);
  outline: 0;
}
.wtb-pin.is-active {
  background: #F2C744;
  color: #2b2545;
  box-shadow: 0 6px 14px -4px rgba(242, 199, 68, .65),
              0 0 0 3px rgba(242, 199, 68, .25);
}
.wtb-pin.is-grey { opacity: .85; }
@media (max-width: 540px) {
  .wtb-pin { padding: .35rem .55rem; font-size: .65rem; }
}

/* PANEL */
.wtb-panel {
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 18px;
  padding: 1.6rem 1.8rem 1.8rem;
  box-shadow: 0 18px 40px -22px rgba(20, 12, 60, .25);
  min-height: 320px;
}
.wtb-panel__head { margin-bottom: 1.4rem; }
.wtb-panel__eyebrow {
  display: block;
  color: var(--color-secondary, #D81B7A);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .75rem;
  margin-bottom: .35rem;
}
.wtb-panel__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.4rem, 1.6vw + .6rem, 1.8rem);
  color: #1c1442;
  margin: 0 0 .35rem;
  letter-spacing: -.005em;
}
.wtb-panel__hint {
  margin: 0;
  color: var(--color-muted, #6b6e80);
  font-size: .85rem;
}

.wtb-panel__list { display: grid; gap: 1.2rem; }
.dealer-card {
  padding: 1rem 1.2rem;
  border: 1px solid #ececf2;
  border-radius: 12px;
  background: #fffaf3;
}
.dealer-card__name {
  margin: 0 0 .55rem;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.05rem;
  color: #C8102E;
  display: flex; align-items: center; gap: .4rem;
  line-height: 1.3;
}
.dealer-card__pin { font-size: 1rem; }
.dealer-card__addr {
  margin: 0 0 .65rem;
  font-size: .9rem; line-height: 1.55;
  color: #2b2545;
}
.dealer-card__contact {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .25rem;
  font-size: .88rem; color: #2b2545;
}
.dealer-card__contact strong {
  color: var(--color-muted, #6b6e80);
  font-weight: 600;
  margin-right: .35rem;
}
.dealer-card__contact a {
  color: var(--color-primary, #6E3FBF);
  text-decoration: none;
  font-weight: 600;
}
.dealer-card__contact a:hover { text-decoration: underline; }

.wtb-empty {
  background: #faf6ff;
  border: 1px dashed rgba(110, 63, 191, .35);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  color: #4a4660;
  font-size: .9rem;
  line-height: 1.6;
}
.wtb-empty p { margin: 0 0 .5rem; }
.wtb-empty p:last-child { margin: 0; }
.btn--sm { padding: .45rem 1rem; font-size: .85rem; border-radius: 999px; }

/* ============================================================
   HOME — HERO 5-SLIDE FULL-BLEED SLIDER
   ============================================================ */
.home-hero-slider {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 78vh, 720px);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Background layer — per-slide gradient with slow drift, no banner image so foreground stays clean */
.home-hero-slider__bgs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.home-hero-slider__bg {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1);
  will-change: opacity;
}
.home-hero-slider__bg.is-active { opacity: 1; }

/* Theme gradients — each slide a distinct mood */
.home-hero-slider__bg--orange {
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(242,107,31,.55), transparent 65%),
    radial-gradient(50% 70% at 10% 80%, rgba(216,27,122,.35), transparent 65%),
    linear-gradient(135deg, #1c0a4a 0%, #2a0f5e 50%, #1c0a4a 100%);
}
.home-hero-slider__bg--magenta {
  background:
    radial-gradient(55% 75% at 85% 30%, rgba(216,27,122,.60), transparent 65%),
    radial-gradient(50% 65% at 15% 75%, rgba(110,63,191,.40), transparent 65%),
    linear-gradient(135deg, #1a0840 0%, #310f5e 50%, #1a0840 100%);
}
.home-hero-slider__bg--gold {
  background:
    radial-gradient(55% 70% at 80% 25%, rgba(212,175,55,.45), transparent 65%),
    radial-gradient(60% 80% at 20% 70%, rgba(242,107,31,.40), transparent 65%),
    linear-gradient(135deg, #1b0d3f 0%, #2c1349 50%, #1b0d3f 100%);
}
.home-hero-slider__bg--teal {
  background:
    radial-gradient(50% 70% at 75% 25%, rgba(22,166,161,.45), transparent 65%),
    radial-gradient(50% 65% at 15% 80%, rgba(42,26,94,.55), transparent 65%),
    linear-gradient(135deg, #0c1f3f 0%, #14254a 50%, #0c1f3f 100%);
}
.home-hero-slider__bg--purple {
  background:
    radial-gradient(55% 75% at 80% 25%, rgba(110,63,191,.55), transparent 65%),
    radial-gradient(55% 70% at 15% 80%, rgba(216,27,122,.30), transparent 65%),
    linear-gradient(135deg, #170a45 0%, #28115c 50%, #170a45 100%);
}

/* Animated sparkle layer on top of the gradient */
.home-hero-slider__sparkles {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255,210,140,.6) 0, transparent 70%),
    radial-gradient(1.5px 1.5px at 78% 24%, rgba(255,160,200,.5) 0, transparent 70%),
    radial-gradient(2px 2px at 55% 64%, rgba(180,180,255,.4) 0, transparent 70%),
    radial-gradient(1.5px 1.5px at 25% 78%, rgba(255,220,140,.5) 0, transparent 70%),
    radial-gradient(2px 2px at 88% 70%, rgba(255,150,210,.4) 0, transparent 70%),
    radial-gradient(1.5px 1.5px at 40% 32%, rgba(200,220,255,.4) 0, transparent 70%);
  animation: heroSparkles 6s ease-in-out infinite alternate;
  opacity: .7;
}
@keyframes heroSparkles {
  0%   { opacity: .25; transform: translate3d(0,0,0); }
  50%  { opacity: .75; transform: translate3d(0,-4px,0); }
  100% { opacity: .35; transform: translate3d(0,2px,0); }
}

/* Slide stage — two columns: static copy + card stage */
.home-hero-slider__inner {
  position: relative;
  z-index: 2;
  min-height: clamp(560px, 78vh, 720px);
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: 2rem 1rem 3.5rem;
}

/* On-load entrance for the (static) left copy */
.home-hero-slider__copy,
.home-hero-slide__copy { max-width: 540px; }
.home-hero-slider__copy { animation: heroSlideIn .9s cubic-bezier(.22,.61,.36,1) .1s both; }

@keyframes heroSlideIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroVisualIn {
  from { opacity: 0; transform: translateX(60px) scale(.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Card stage — fixed-aspect rounded card area on the right; leaves room
   on the right for the next card to peek out from behind. */
.home-hero-cardstage {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5;
  justify-self: end;
  margin-left: auto;
  margin-right: clamp(3.5rem, 9vw, 7rem); /* room for two peek cards on the right */
  overflow: visible;
}
@media (max-width: 1100px) {
  .home-hero-cardstage { justify-self: center; max-width: 380px; margin-right: 3rem; }
}
@media (max-width: 640px) {
  .home-hero-cardstage { margin-right: 1.5rem; }
  .home-hero-slide.home-hero-card.is-peek-2 { display: none; } /* drop the second peek on tight screens */
}

/* Card — absolute stack inside the stage. Non-active cards are hidden by
   default; the next slide gets .is-peek so it pokes out from behind. */
.home-hero-slide.home-hero-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #1c0a4a 0%, #2a0f5e 50%, #1c0a4a 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: scale(.92) translate(-6%, 0);
  transform-origin: center center;
  transition:
    opacity   .65s cubic-bezier(.22, .61, .36, 1),
    transform .65s cubic-bezier(.22, .61, .36, 1),
    filter    .65s cubic-bezier(.22, .61, .36, 1);
  will-change: transform, opacity;
}

/* Foreground (active) card */
.home-hero-slide.home-hero-card.is-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  z-index: 3;
  cursor: grab;
  /* Allow vertical page scroll while the active card listens for horizontal swipes */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.home-hero-slide.home-hero-card.is-active:active { cursor: grabbing; }
.home-hero-slide.home-hero-card.is-active img { pointer-events: none; }

/* Next-up card — visible peek behind the active one on the right edge */
.home-hero-slide.home-hero-card.is-peek {
  opacity: 1;
  pointer-events: none;
  z-index: 2;
  transform: scale(.92) translate(8%, 2.5%);
  filter: brightness(.6) saturate(.85);
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.55);
}

/* Second peek — sits further back, more shrunk, dimmer */
.home-hero-slide.home-hero-card.is-peek-2 {
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  transform: scale(.84) translate(16%, 5%);
  filter: brightness(.4) saturate(.7);
  box-shadow: 0 18px 50px -22px rgba(0,0,0,.5);
}

/* Leaving — outgoing active card swipes off to the left with a tilt, like
   the top of a card deck being flicked away. */
.home-hero-slide.home-hero-card.is-leaving {
  opacity: 0;
  z-index: 4;                /* on top while it flies away */
  pointer-events: none;
  transform: translate(-38%, -4%) scale(.82) rotate(-9deg);
  filter: brightness(.5) saturate(.8);
  transition:
    opacity   .65s cubic-bezier(.55, .05, .68, .53),
    transform .65s cubic-bezier(.55, .05, .68, .53),
    filter    .65s cubic-bezier(.55, .05, .68, .53);
}

/* Card image — fills the entire card */
.home-hero-card__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.home-hero-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
}
/* Dark gradient overlay so the title text always reads cleanly */
.home-hero-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(8,4,38,0)    0%,
    rgba(8,4,38,0)    45%,
    rgba(8,4,38,.45) 65%,
    rgba(8,4,38,.85) 85%,
    rgba(8,4,38,.95) 100%);
  pointer-events: none;
}
.home-hero-slide.home-hero-card.is-active .home-hero-card__media img {
  animation: heroCardKen 12s ease-out forwards;
}
@keyframes heroCardKen {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}

/* Card body — sits inside the card at the bottom, over the dark fade */
.home-hero-card__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 1.5rem 1.5rem 1.6rem;
  color: #fff;
}
.home-hero-card__title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(1.7rem, 2.4vw + .8rem, 2.3rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  font-weight: 800;
  margin: 0 0 .4rem;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.home-hero-card__meta {
  color: rgba(255,255,255,.78);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .02em;
  margin: 0 0 .7rem;
}
.home-hero-card__badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: .35rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, rgba(242,107,31,.4), rgba(216,27,122,.35));
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Active-card animation cascade — title, meta, badge slide up */
.home-hero-slide.home-hero-card.is-active .home-hero-card__title  { animation: heroSlideIn .7s cubic-bezier(.22,.61,.36,1) .25s both; }
.home-hero-slide.home-hero-card.is-active .home-hero-card__meta   { animation: heroSlideIn .7s cubic-bezier(.22,.61,.36,1) .35s both; }
.home-hero-slide.home-hero-card.is-active .home-hero-card__badge  { animation: heroSlideIn .7s cubic-bezier(.22,.61,.36,1) .45s both; }

/* Copy column (static) */
.home-hero-slide__eyebrow {
  display: inline-block;
  font-family: var(--font-display, "Playfair Display", serif);
  color: #F2A100;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .82rem;
  margin-bottom: .9rem;
  position: relative;
  padding-left: 38px;
}
.home-hero-slide__eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 28px; height: 2px; background: linear-gradient(90deg, #F2A100, transparent);
  transform: translateY(-50%);
}
.home-hero-slide__title {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: clamp(2.4rem, 4.2vw + .8rem, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
  color: #fff;
  font-weight: 800;
}
.home-hero-slide__title .line { display: block; }
.home-hero-slide__title-grad {
  background: linear-gradient(90deg, #F26B1F 0%, #D81B7A 50%, #6E3FBF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradientShift 6s ease-in-out infinite;
}
.home-hero-slide__lede {
  color: rgba(255,255,255,.82);
  font-size: 1.1rem;
  line-height: 1.55;
  margin: 0 0 1.4rem;
  max-width: 46ch;
}
.home-hero-slide__ctas {
  display: inline-flex; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.home-hero-slide__trust {
  list-style: none; padding: .85rem .9rem; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem;
  background: linear-gradient(135deg, rgba(20, 12, 62, .55) 0%, rgba(8, 4, 38, .55) 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55);
  max-width: 520px;
}
.home-hero-slide__trust li { display: flex; align-items: center; gap: .55rem; padding: .15rem; }
.home-hero-slide__trust-ico {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
}
.home-hero-slide__trust-ico img { width: 100%; height: 100%; object-fit: contain; }
.home-hero-slide__trust strong { display: block; font-size: .82rem; color: #fff; line-height: 1.2; }
.home-hero-slide__trust span   { display: block; font-size: .68rem; color: rgba(255,255,255,.65); line-height: 1.25; }

/* Visual column — continuous decorative animations */
.home-hero-slide__visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
/* Pulsing colored glow halo behind the product */
.home-hero-slide__visual::before {
  content: "";
  position: absolute;
  inset: 8% 8%;
  z-index: 0;
  background: radial-gradient(closest-side,
    var(--visual-glow, rgba(242,107,31,.55)) 0%,
    transparent 70%);
  filter: blur(38px);
  animation: heroVisualGlow 4.5s ease-in-out infinite alternate;
  pointer-events: none;
}
/* Slow rotating ring of accent particles around the product */
.home-hero-slide__visual::after {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 0;
  border-radius: 50%;
  background-image:
    radial-gradient(2.5px 2.5px at 50% 4%,  #fff,                 transparent 70%),
    radial-gradient(2px   2px   at 92% 28%, #F2A100,              transparent 70%),
    radial-gradient(2.5px 2.5px at 92% 72%, #D81B7A,              transparent 70%),
    radial-gradient(2px   2px   at 50% 96%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(2.5px 2.5px at 8%  72%, #16A6A1,              transparent 70%),
    radial-gradient(2px   2px   at 8%  28%, #D4AF37,              transparent 70%);
  animation: heroOrbit 22s linear infinite;
  opacity: .65;
  pointer-events: none;
}
.home-hero-slide__visual img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: clamp(380px, 60vh, 560px);
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
  will-change: transform;
}
/* Only animate float on the active slide so non-active sit still */
.home-hero-slide.is-active .home-hero-slide__visual img {
  animation: heroVisualFloat 6s ease-in-out 1.4s infinite;
}
@keyframes heroVisualFloat {
  0%   { transform: translateY(0)     rotate(-0.6deg); }
  50%  { transform: translateY(-14px) rotate( 0.6deg); }
  100% { transform: translateY(0)     rotate(-0.6deg); }
}
@keyframes heroVisualGlow {
  0%   { opacity: .35; transform: scale(.92); }
  50%  { opacity: .85; transform: scale(1.08); }
  100% { opacity: .45; transform: scale(.95); }
}
@keyframes heroOrbit {
  to { transform: rotate(360deg); }
}

/* Per-slide glow tint — matches the slide's gradient theme */
.home-hero-slide:nth-child(1) .home-hero-slide__visual { --visual-glow: rgba(242,107,31,.55); }
.home-hero-slide:nth-child(2) .home-hero-slide__visual { --visual-glow: rgba(216,27,122,.55); }
.home-hero-slide:nth-child(3) .home-hero-slide__visual { --visual-glow: rgba(212,175,55,.55); }
.home-hero-slide:nth-child(4) .home-hero-slide__visual { --visual-glow: rgba(22,166,161,.55); }
.home-hero-slide:nth-child(5) .home-hero-slide__visual { --visual-glow: rgba(110,63,191,.55); }

/* Dot navigation — sits below the card stack on the right column */
.home-hero-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem;
  background: rgba(8, 4, 38, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.home-hero-slider__dot {
  position: relative;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.home-hero-slider__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background .2s ease, transform .2s ease, width .25s ease;
}
.home-hero-slider__dot:hover::before { background: #fff; transform: scale(1.25); }
.home-hero-slider__dot.is-active::before {
  width: 28px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #F26B1F, #D81B7A);
  box-shadow: 0 4px 14px -2px rgba(216, 27, 122, .55);
}
.home-hero-slider__dot-fill { display: none; }

/* Slide counter — replaces the dot row, sits bottom-right */
.home-hero-slider__counter {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: 1.5rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-display, "Playfair Display", serif);
  color: #fff;
  letter-spacing: .04em;
  font-weight: 600;
  user-select: none;
}
.home-hero-slider__counter-current,
.home-hero-slider__counter-total {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.home-hero-slider__counter-current { color: #fff; }
.home-hero-slider__counter-total   { color: rgba(255,255,255,.55); font-size: .85rem; }
.home-hero-slider__counter-bar {
  display: inline-block;
  width: 80px;
  height: 2px;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.home-hero-slider__counter-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #F26B1F, #D81B7A);
  width: 0%;
  transition: width .35s ease;
}
@media (max-width: 600px) {
  .home-hero-slider__counter { right: 1rem; bottom: 1rem; }
  .home-hero-slider__counter-bar { width: 50px; }
}

/* Responsive */
@media (max-width: 980px) {
  .home-hero-slider { min-height: auto; padding: 1.5rem 0 2rem; }
  .home-hero-slider__inner {
    min-height: auto;
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.5rem 1rem 1rem;
    gap: 1.25rem;
  }
  .home-hero-slider__copy,
  .home-hero-slide__copy { max-width: 100%; margin: 0 auto; }
  .home-hero-slide__eyebrow { padding-left: 0; }
  .home-hero-slide__eyebrow::before { display: none; }
  .home-hero-slide__ctas { justify-content: center; }
  .home-hero-slide__trust { grid-template-columns: 1fr; text-align: left; }
  .home-hero-cardstage { aspect-ratio: 5 / 6; max-width: 420px; margin: 0 auto; }
  .home-hero-slider__dots { bottom: .85rem; gap: .45rem; padding: .45rem .7rem; }
}
@media (max-width: 600px) {
  .home-hero-slide__title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .home-hero-card__actions { right: .85rem; bottom: calc(1rem + 76px); }
  .home-hero-card__action { width: 44px; height: 44px; }
  .home-hero-card__body { padding: 1.1rem 1.1rem 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-slider__bg,
  .home-hero-slider__bg.is-active,
  .home-hero-slider__sparkles,
  .home-hero-slide.is-active *,
  .home-hero-slide__visual::before,
  .home-hero-slide__visual::after,
  .home-hero-slide.is-active .home-hero-slide__visual img {
    animation: none !important;
    transition: opacity .3s ease !important;
  }
}

/* Header right-side tools — wraps the cart + hamburger so cart stays visible on mobile */
.site-header__tools {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-left: auto;
}
@media (min-width: 901px) {
  .site-header__tools { order: 3; margin-left: .75rem; }
  .site-header__tools .nav-toggle { display: none; }
}
@media (max-width: 900px) {
  .site-header .nav { margin-left: 0; }
  .site-header__tools { margin-left: auto; gap: .55rem; }
  /* Cart is already in the mobile bottom nav — hide the header copy
     so the right side of the header only shows the hamburger. */
  .site-header__tools .header-cart { display: none; }
  .nav-toggle { padding: .4rem; }
  .nav-toggle span { width: 20px; }
}

/* ============================================================
 * Header cart icon button + count badge
 * ============================================================ */
.header-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 55%, #6E3FBF 100%);
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(216, 27, 122, .55);
  transition: transform .2s, box-shadow .25s;
}
.header-cart:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(216, 27, 122, .6); }
.header-cart svg { display: block; }
.header-cart__count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 99px;
  background: #2A1A5E;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
.header-cart__count[hidden] { display: none; }
.header-cart__count.is-bump { animation: cart-bump .42s cubic-bezier(.2,.9,.3,1.25); }
@keyframes cart-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); background: #F26B1F; }
  100% { transform: scale(1); }
}

/* ============================================================
 * Cart slide-out drawer
 * ============================================================ */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.cart-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
}
.cart-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 12, 60, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.cart-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.05);
  box-shadow: -20px 0 50px -20px rgba(20, 12, 60, .45);
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }
body.has-drawer-open { overflow: hidden; }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.05rem 1.25rem;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 55%, #6E3FBF 100%);
  color: #fff;
  position: relative;
}
.cart-drawer__head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 6px;
  background: linear-gradient(180deg, rgba(20, 12, 60, .08), transparent);
  pointer-events: none;
}
.cart-drawer__head-lead { min-width: 0; }
.cart-drawer__eyebrow {
  display: block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: .15rem;
}
.cart-drawer__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.cart-drawer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}
.cart-drawer__close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
}
.cart-drawer__close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  background: #f7f6fb;
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 63, 191, .25) transparent;
}
.cart-drawer__body::-webkit-scrollbar { width: 6px; }
.cart-drawer__body::-webkit-scrollbar-thumb { background: rgba(110, 63, 191, .25); border-radius: 6px; }

.cart-drawer__empty { text-align: center; padding: 3rem 1.5rem 2.5rem; color: #4a4660; }
.cart-drawer__empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(216, 27, 122, .1), rgba(110, 63, 191, .1));
  color: #D81B7A;
  margin-bottom: 1rem;
}
.cart-drawer__empty h3 { margin: .25rem 0 .35rem; color: #2A1A5E; font-size: 1.05rem; }
.cart-drawer__empty p  { color: #6b6486; font-size: .9rem; margin-bottom: 1.25rem; }

.cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: .25rem 0 0;
}
.cart-drawer__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: .85rem;
  align-items: stretch;
  padding: .9rem 1.1rem;
  margin: .5rem .75rem;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #ece9f4;
  box-shadow: 0 2px 8px -4px rgba(20, 12, 60, .08);
  transition: opacity .25s, transform .25s, background .15s, box-shadow .2s, border-color .2s;
}
.cart-drawer__item:hover {
  border-color: rgba(216, 27, 122, .2);
  box-shadow: 0 6px 16px -6px rgba(216, 27, 122, .15);
}
.cart-drawer__item.is-removing { opacity: 0; transform: translateX(20px); }

.cart-drawer__thumb {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f2fb;
  border: 1px solid #ece9f4;
  text-decoration: none;
  transition: transform .2s, border-color .2s;
  flex-shrink: 0;
}
.cart-drawer__thumb:hover {
  transform: scale(1.04);
  border-color: rgba(110, 63, 191, .25);
}
.cart-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-drawer__thumb-fallback {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  color: rgba(110, 63, 191, .35);
}

.cart-drawer__body-col { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.cart-drawer__row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.cart-drawer__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #2A1A5E;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: color .2s;
  min-width: 0;
}
.cart-drawer__name:hover { color: #D81B7A; }

.cart-drawer__meta-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .15rem;
}
.cart-drawer__meta {
  font-size: .74rem;
  color: #6b6486;
  font-weight: 500;
}
.cart-drawer__meta + .cart-drawer__price::before {
  content: '·';
  color: #c8c2d4;
  margin-right: .55rem;
}
.cart-drawer__price {
  font-size: .82rem;
  color: #2A1A5E;
  font-weight: 800;
}
.cart-drawer__price--soft {
  color: #6E3FBF;
  font-weight: 600;
  font-style: italic;
  font-size: .78rem;
}

.cart-drawer__qty-form { margin: .15rem 0 0; }
/* +/− stepper */
.cart-drawer__stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(42, 26, 94, .15);
  border-radius: 999px;
  background: #faf9fd;
  overflow: hidden;
  width: fit-content;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.cart-drawer__stepper:focus-within {
  border-color: #D81B7A;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(216, 27, 122, .12);
}
.cart-drawer__stepbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  color: #2A1A5E;
  cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
}
.cart-drawer__stepbtn:hover:not(:disabled) {
  background: rgba(216, 27, 122, .12);
  color: #D81B7A;
}
.cart-drawer__stepbtn:active { transform: scale(.92); }
.cart-drawer__stepbtn:disabled {
  color: #c0bcce;
  cursor: not-allowed;
}
.cart-drawer__stepvalue {
  width: 42px;
  text-align: center;
  border: 0;
  background: transparent;
  font-size: .92rem;
  font-weight: 700;
  color: #2A1A5E;
  -moz-appearance: textfield;
}
.cart-drawer__stepvalue::-webkit-outer-spin-button,
.cart-drawer__stepvalue::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-drawer__stepvalue:focus { outline: none; }
.cart-drawer__remove-form { margin: 0; flex-shrink: 0; }
.cart-drawer__remove {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 30px;
  padding: 0 .55rem 0 .5rem;
  border-radius: 999px;
  background: #ffeef4;
  border: 1px solid rgba(216, 27, 122, .25);
  color: #C8102E;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background .2s, color .2s, border-color .2s, padding .25s;
}
.cart-drawer__remove svg { flex-shrink: 0; }
.cart-drawer__remove-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .25s ease, opacity .25s ease, margin-left .25s;
}
.cart-drawer__remove:hover {
  background: linear-gradient(135deg, #D81B7A 0%, #C8102E 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 14px -6px rgba(200, 16, 46, .5);
}
.cart-drawer__remove:hover .cart-drawer__remove-label {
  max-width: 70px;
  opacity: 1;
  margin-left: .15rem;
}
.cart-drawer__remove:active { transform: scale(.96); }
@media (max-width: 480px) {
  /* On mobile, always show the label so the action is obvious */
  .cart-drawer__remove-label { max-width: 70px; opacity: 1; margin-left: .15rem; }
}

.cart-drawer__notice {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: .85rem 1.1rem 0;
  padding: .65rem .85rem;
  background: linear-gradient(135deg, rgba(22, 166, 161, .08) 0%, rgba(110, 63, 191, .06) 100%);
  border: 1px dashed rgba(22, 166, 161, .3);
  border-radius: 12px;
  font-size: .8rem;
  color: #2A1A5E;
  line-height: 1.4;
}
.cart-drawer__notice svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #16A6A1;
}

.cart-drawer__foot {
  background: #fff;
  border-top: 1px solid #f0eef9;
  padding: .9rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  box-shadow: 0 -10px 30px -20px rgba(20, 12, 60, .25);
}
.cart-drawer__foot[hidden] { display: none; }

.cart-drawer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .15rem;
}
.cart-drawer__summary > div:first-child {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.cart-drawer__summary-label {
  font-size: .78rem;
  color: #6b6486;
  font-weight: 500;
}
.cart-drawer__summary-value {
  font-size: 1.05rem;
  color: #2A1A5E;
  font-weight: 800;
}
.cart-drawer__summary-note {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: #16A6A1;
  font-weight: 700;
  padding: .25rem .55rem;
  background: rgba(22, 166, 161, .1);
  border-radius: 999px;
}

.cart-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  background-size: 180% 100%;
  background-position: 0% 50%;
  box-shadow: 0 12px 26px -10px rgba(216, 27, 122, .55);
  transition: background-position .35s, transform .2s, box-shadow .25s;
}
.cart-drawer__cta:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -10px rgba(110, 63, 191, .55);
  color: #fff;
}

.cart-drawer__foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.cart-drawer__wa {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 700;
  color: #25D366;
  text-decoration: none;
  padding: .35rem .65rem;
  border-radius: 999px;
  transition: background .15s;
}
.cart-drawer__wa:hover {
  background: rgba(37, 211, 102, .1);
  color: #1ea552;
}
.cart-drawer__clear {
  background: transparent;
  border: 0;
  font-size: .8rem;
  color: #8a83a3;
  cursor: pointer;
  padding: .35rem .55rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color .15s;
}
.cart-drawer__clear:hover { color: #D81B7A; }

/* ============================================================
 * Toast notifications
 * ============================================================ */
.toast-host {
  position: fixed;
  z-index: 1200;
  top: 80px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  max-width: 360px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .7rem .85rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 38px -16px rgba(20, 12, 60, .45);
  border-left: 4px solid #16A6A1;
  color: #2A1A5E;
  font-size: .9rem;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .25s, transform .25s;
}
.toast.is-in  { opacity: 1; transform: translateX(0); }
.toast.is-out { opacity: 0; transform: translateX(20px); }
.toast--error  { border-left-color: #D81B7A; }
.toast--error  .toast__icon { color: #D81B7A; }
.toast__icon {
  flex: 0 0 22px;
  margin-top: 1px;
  color: #16A6A1;
}
.toast__msg { flex: 1; line-height: 1.4; }
.toast__close {
  background: transparent;
  border: 0;
  color: #6b6486;
  cursor: pointer;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.toast__close:hover { background: #f4f4f8; color: #2A1A5E; }

@media (max-width: 640px) {
  .toast-host { top: 70px; right: 12px; left: 12px; max-width: none; }
}

/* ============================================================
 * Product strip — "Related" / "Frequently bought" on the show page
 * ============================================================ */
.product-strip-band {
  padding: clamp(2rem, 4vw, 3.25rem) 0;
}
.product-strip-band--alt {
  background: linear-gradient(180deg, #fdf3f6 0%, #fff7f1 100%);
}
.product-strip__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.product-strip__eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #D81B7A;
  margin-bottom: .25rem;
}
.product-strip__title {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  color: #2A1A5E;
  letter-spacing: -.01em;
}
.product-strip__more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(216, 27, 122, .2);
  color: #D81B7A;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: background .2s, color .2s, transform .2s;
}
.product-strip__more:hover {
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  color: #fff;
  transform: translateY(-1px);
}

/* Horizontal scroll-snap row of product cards */
.product-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1rem;
  padding: .35rem .15rem 1rem;
  margin: 0 -.15rem;
  scrollbar-color: rgba(216, 27, 122, .35) transparent;
  scrollbar-width: thin;
}
.product-strip > .product-card {
  scroll-snap-align: start;
  min-width: 0;
}
.product-strip::-webkit-scrollbar { height: 6px; }
.product-strip::-webkit-scrollbar-thumb {
  background: rgba(216, 27, 122, .35);
  border-radius: 6px;
}
.product-strip::-webkit-scrollbar-thumb:hover { background: rgba(216, 27, 122, .55); }

@media (min-width: 1024px) {
  .product-strip { grid-auto-columns: minmax(260px, 1fr); gap: 1.25rem; }
}
@media (max-width: 640px) {
  .product-strip { grid-auto-columns: 78%; }
}

/* ============================================================
 * PRODUCT DETAIL PAGE — mobile (compact + side gaps)
 * ============================================================ */
@media (max-width: 900px) {
  /* Keep the .container's natural side margin (1rem each side) but let
     grid children shrink without pushing past it. min-width: 0 is the key. */
  .product-show {
    padding: 1.25rem 0 1.5rem;
    overflow-x: hidden;
  }
  .product-show__grid {
    gap: 1rem;
    min-width: 0;
  }
  .product-show__grid > * {
    min-width: 0;
    max-width: 100%;
  }
  .product-show__copy {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .product-show__media-wrap {
    max-width: 100%;
    margin: 0 auto;
    min-width: 0;
  }
  /* Compact the product image — 4:5 was eating ~80% of viewport height.
     1:1 with reduced padding shows much more content above the fold. */
  .product-show__media {
    aspect-ratio: 1 / 1;
    padding: 1rem;
    border-radius: 18px;
  }
  /* Thumb strip: enable horizontal scroll, hide the leftover scrollbar */
  .product-show__thumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-show__thumbs::-webkit-scrollbar { display: none; }
  .product-show__thumb { flex: 0 0 64px; height: 64px; }
}

@media (max-width: 720px) {
  .product-show__title {
    font-size: clamp(1.45rem, 5.5vw, 1.8rem);
    margin-bottom: .65rem;
  }
  .product-show__lede {
    font-size: .9rem;
    line-height: 1.5;
    max-width: 100%;
    margin-bottom: .9rem;
  }
  .product-show__crumbs { font-size: .76rem; margin-bottom: .6rem; }
  .product-show__eyebrow { font-size: .66rem; padding: .25rem .7rem; margin-bottom: .6rem; }
  .product-show__price-row { padding: .55rem .85rem; }
  .product-show__specs { gap: .35rem .85rem; margin: .85rem 0 .85rem; }
  .product-show__specs li { font-size: .82rem; }

  /* CTAs — stack vertically but compact so all 4 fit in a single screen */
  .product-show__ctas {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .85rem;
  }
  .product-show__cta-form { display: flex; width: 100%; margin: 0; }
  .product-show__btn {
    width: 100%;
    justify-content: center;
    padding: .7rem .95rem;
    font-size: .88rem;
    gap: .4rem;
    box-sizing: border-box;
  }
  .product-show__btn svg { width: 14px; height: 14px; flex-shrink: 0; }
  .product-show__btn--video {
    padding: .6rem .95rem;
    font-size: .82rem;
  }

  /* Section bands & strip below the hero */
  .product-strip-band { padding: 1.25rem 0 1.5rem; }
  .product-strip__head {
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .85rem;
  }
  .product-strip__title { font-size: 1.1rem; }
  .product-strip__more {
    padding: .35rem .7rem;
    font-size: .75rem;
  }
  .product-strip {
    grid-auto-columns: 46%;
    gap: .7rem;
    padding: .25rem .1rem .85rem;
    scroll-padding-left: 1rem;
  }

  /* "About this product" description band */
  .product-show__descsection { padding: 1.25rem 0 1.5rem; }
  .product-show__h2 { font-size: 1.2rem; margin-bottom: .65rem; }
  .product-show__desc { font-size: .9rem; line-height: 1.55; }
}
@media (max-width: 420px) {
  /* Smaller phones — give each strip card a touch more width */
  .product-strip { grid-auto-columns: 64%; }
  .product-show__media { padding: .75rem; }
  .product-show__thumb { flex: 0 0 56px; height: 56px; }
}

/* Spinner-style "is-loading" hint for add-to-cart buttons */
.product-card__btn.is-loading,
button.is-loading {
  opacity: .7;
  cursor: progress;
  pointer-events: none;
}

/* ============================================================
 * PRICE LIST PAGE (/price-list)
 * ============================================================ */
.pricelist-hero {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  background:
    radial-gradient(700px 320px at 18% 20%, rgba(242,107,31,.16), transparent 65%),
    radial-gradient(620px 280px at 82% 80%, rgba(110,63,191,.18), transparent 65%),
    linear-gradient(135deg, #1c0a4a 0%, #2a0f5e 50%, #1c0a4a 100%);
  color: #fff;
}
.pricelist-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 820px) { .pricelist-hero__inner { grid-template-columns: 1fr; } }
.pricelist-hero__copy { min-width: 0; }
.pricelist-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .9);
  padding: .35rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  margin-bottom: 1rem;
}
.pricelist-hero__dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.pricelist-hero__dot--open    { background: #5ec88c; box-shadow: 0 0 0 4px rgba(94,200,140,.25); }
.pricelist-hero__dot--closed  { background: #ff6b6b; box-shadow: 0 0 0 4px rgba(255,107,107,.25); }
.pricelist-hero__title {
  margin: 0 0 .85rem; color: #fff;
  font-family: var(--font-display, serif);
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  line-height: 1.1; letter-spacing: -.01em; font-weight: 800;
}
.pricelist-hero__lede {
  margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.55;
  color: rgba(255, 255, 255, .82); max-width: 52ch;
}
.pricelist-hero__actions {
  display: inline-flex; flex-wrap: wrap; gap: .6rem;
}
.pricelist-hero__visual { display: flex; justify-content: center; }
.pricelist-cover {
  position: relative; display: inline-block;
  max-width: 360px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.55);
  transition: transform .3s ease;
}
.pricelist-cover:hover { transform: translateY(-4px); }
.pricelist-cover img { width: 100%; height: auto; display: block; }
.pricelist-cover.is-locked { cursor: not-allowed; }
.pricelist-cover.is-locked img { filter: brightness(.55) saturate(.6); }
.pricelist-cover__lock {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff;
}
.pricelist-cover__lock svg { width: 44px; height: 44px; }

.pricelist-body { padding: clamp(2rem, 4vw, 3rem) 0; }
.pricelist-note h2 { color: #2A1A5E; margin-top: 0; }

/* Hero trust pills */
.pricelist-hero__trust {
  list-style: none; padding: 0; margin: 1.25rem 0 0;
  display: inline-flex; flex-wrap: wrap; gap: .55rem;
}
.pricelist-hero__trust li {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  font-size: .82rem; font-weight: 600;
  color: rgba(255, 255, 255, .9);
}
.pricelist-hero__trust svg { color: #5ec88c; flex-shrink: 0; }

/* PDF placeholder cover (when admin hasn't uploaded a cover image) */
.pricelist-cover--placeholder {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
  width: 280px; height: 360px;
  background:
    linear-gradient(135deg, rgba(216, 27, 122, .12), rgba(110, 63, 191, .12)),
    linear-gradient(180deg, #faf9fd 0%, #ece9f4 100%);
  border: 1px dashed rgba(216, 27, 122, .35);
  color: #2A1A5E;
  padding: 2rem;
  text-align: center;
}
.pricelist-cover__pdf-icon {
  position: relative; color: #D81B7A;
}
.pricelist-cover__pdf-label {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-size: .65rem; font-weight: 800; letter-spacing: .14em;
  background: linear-gradient(135deg, #D81B7A, #6E3FBF);
  color: #fff; padding: .12rem .45rem; border-radius: 4px;
}
.pricelist-cover__year {
  font-family: var(--font-display, serif);
  font-size: 1.5rem; font-weight: 800; color: #2A1A5E;
}
.pricelist-cover__caption {
  font-size: .85rem; color: #6b6486; line-height: 1.4;
  max-width: 200px;
}

/* Section header pattern shared across all pricelist sections */
.pricelist-section__head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.pricelist-section__head--center { text-align: center; }
.pricelist-section__eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #D81B7A;
  margin-bottom: .35rem;
}
.pricelist-section__title {
  margin: 0;
  font-family: var(--font-display, serif);
  font-size: clamp(1.4rem, 2.5vw + .5rem, 2rem);
  font-weight: 800; line-height: 1.2;
  color: #2A1A5E; letter-spacing: -.01em;
}

/* "What's inside" feature grid */
.pricelist-inside { padding: clamp(2rem, 5vw, 4rem) 0; background: #faf9fd; }
.pricelist-feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.pricelist-feat {
  background: #fff;
  border: 1px solid rgba(42, 26, 94, .08);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pricelist-feat:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 27, 122, .25);
  box-shadow: 0 16px 32px -20px rgba(20, 12, 60, .35);
}
.pricelist-feat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  color: #fff;
  margin-bottom: 1rem;
  box-shadow: 0 10px 22px -10px rgba(216, 27, 122, .5);
}
.pricelist-feat h3 {
  margin: 0 0 .4rem;
  font-size: 1.02rem; font-weight: 800; color: #2A1A5E;
  letter-spacing: -.005em;
}
.pricelist-feat p {
  margin: 0;
  font-size: .88rem; color: #6b6486; line-height: 1.55;
}

.pricelist-note {
  max-width: 820px;
  margin: 2rem auto 0;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(42, 26, 94, .08);
}
.pricelist-note h2 { color: #2A1A5E; margin-top: 0; }

/* "How to order" steps */
.pricelist-howto { padding: clamp(2rem, 5vw, 4rem) 0; }
.pricelist-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  counter-reset: step;
}
.pricelist-step {
  position: relative;
  padding: 1.85rem 1.25rem 1.25rem;
  background: linear-gradient(135deg, #fff 0%, #faf9fd 100%);
  border-radius: 18px;
  border: 1px solid rgba(42, 26, 94, .08);
  transition: transform .25s, box-shadow .25s;
}
.pricelist-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -20px rgba(20, 12, 60, .3);
}
.pricelist-step__num {
  position: absolute;
  top: -16px; left: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
  color: #fff;
  font-family: var(--font-display, serif);
  font-size: 1.15rem; font-weight: 800;
  box-shadow: 0 10px 22px -10px rgba(216, 27, 122, .55);
}
.pricelist-step h3 {
  margin: 0 0 .35rem;
  font-size: 1rem; font-weight: 800; color: #2A1A5E;
}
.pricelist-step p {
  margin: 0;
  font-size: .85rem; color: #6b6486; line-height: 1.5;
}

/* Closed-state band (full-width, centred) */
.pricelist-closed-band { padding: clamp(2rem, 5vw, 4rem) 0; background: #faf9fd; }
.pricelist-closed {
  max-width: 720px; margin: 0 auto;
  text-align: center;
  background: #fff;
  padding: 2.5rem 2rem;
  border-radius: 22px;
  border: 1px dashed rgba(216, 27, 122, .25);
  box-shadow: 0 18px 40px -22px rgba(20, 12, 60, .3);
}
.pricelist-closed__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(216, 27, 122, .1);
  color: #C8102E;
  margin-bottom: 1rem;
}
.pricelist-closed h2 { color: #C8102E; margin: 0 0 .75rem; }
.pricelist-closed p, .pricelist-closed .prose { color: #4a4660; line-height: 1.6; }
.pricelist-closed__actions {
  display: inline-flex; gap: .6rem; flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Final CTA — gradient band */
.pricelist-cta { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.pricelist-cta__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 24px;
  background:
    radial-gradient(700px 320px at 20% 20%, rgba(242, 107, 31, .25), transparent 65%),
    radial-gradient(620px 280px at 80% 80%, rgba(110, 63, 191, .3), transparent 65%),
    linear-gradient(135deg, #2a0f5e 0%, #1c0a4a 50%, #1a0840 100%);
  color: #fff;
  box-shadow: 0 30px 60px -30px rgba(20, 12, 60, .55);
}
.pricelist-cta__eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #F2A100; margin-bottom: .35rem;
}
.pricelist-cta__inner h2 {
  margin: 0 0 .65rem;
  color: #fff;
  font-family: var(--font-display, serif);
  font-size: clamp(1.45rem, 2.5vw + .5rem, 2rem);
  font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
}
.pricelist-cta__inner p {
  margin: 0;
  font-size: .95rem; line-height: 1.55;
  color: rgba(255, 255, 255, .82); max-width: 50ch;
}
.pricelist-cta__actions {
  display: flex; gap: .65rem; flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 820px) {
  .pricelist-cta__inner { grid-template-columns: 1fr; }
  .pricelist-cta__actions { justify-content: flex-start; }
}

/* ============================================================
 * Mobile bottom navigation — app-style quick access
 * Hidden on desktop, fixed at the bottom on <= 900px screens.
 * ============================================================ */
.mbn { display: none; }

@media (max-width: 900px) {
  .mbn {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1050;
    align-items: stretch;
    gap: 0;
    padding: .25rem .4rem calc(.25rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(42, 26, 94, .08);
    box-shadow: 0 -10px 28px -16px rgba(20, 12, 60, .28);
  }
  .mbn__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 54px;
    padding: .35rem .2rem .25rem;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: #6b6486;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    transition: color .2s, background .2s, transform .15s;
    position: relative;
    min-width: 0;
    overflow: hidden;
  }
  .mbn__tab:active { transform: scale(.94); }
  .mbn__tab.is-active {
    color: #2A1A5E;
    background: linear-gradient(135deg, rgba(216, 27, 122, .08) 0%, rgba(110, 63, 191, .08) 100%);
  }
  .mbn__tab.is-active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #F26B1F 0%, #D81B7A 50%, #6E3FBF 100%);
  }
  .mbn__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
  }
  .mbn__icon svg { width: 100%; height: 100%; display: block; }
  .mbn__label {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* Cart tab — elevated pill with the brand gradient. Width is constrained
     to a fraction of its grid cell so it doesn't grow into other tabs. */
  .mbn__tab--cart {
    margin: -.5rem 0 0;
    justify-self: center;
    width: 78%;
    background: linear-gradient(135deg, #F26B1F 0%, #D81B7A 60%, #6E3FBF 100%);
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 24px -10px rgba(216, 27, 122, .55);
    min-height: 60px;
  }
  .mbn__tab--cart.is-active { background: linear-gradient(135deg, #D81B7A 0%, #6E3FBF 100%); color: #fff; }
  .mbn__tab--cart.is-active::after { display: none; }
  .mbn__tab--cart .mbn__label { color: #fff; }
  .mbn__count {
    position: absolute;
    top: -6px; right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: #fff;
    color: #D81B7A;
    font-size: .65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #D81B7A;
  }
  .mbn__count[hidden] { display: none; }
  .mbn__count.is-bump { animation: cart-bump .42s cubic-bezier(.2, .9, .3, 1.25); }

  /* WhatsApp tab — brand green */
  .mbn__tab--wa { color: #1ea552; }
  .mbn__tab--wa.is-active { color: #1ea552; }

  /* Push the page content above the fixed bar so nothing hides behind it. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* Hide the legacy floating WhatsApp FAB — its slot is now the bottom nav. */
  .fab-whatsapp { display: none !important; }

  /* Nudge the cart drawer up so its bottom CTA isn't covered by the bar. */
  .cart-drawer__panel { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
/* Tiny phones — shrink labels & icons a touch more so nothing clips */
@media (max-width: 380px) {
  .mbn { padding: .2rem .25rem calc(.2rem + env(safe-area-inset-bottom)); }
  .mbn__label { font-size: .62rem; }
  .mbn__icon { width: 20px; height: 20px; }
  .mbn__tab { padding: .3rem .15rem .25rem; }
  .mbn__tab--cart { width: 88%; }
}

/* ============================================================
 * BLOG — listing page (index, category, tag, search)
 * Hero + search, category chips, featured card, grid, pager.
 * ============================================================ */
.section--blog-hero {
  padding: clamp(2.25rem, 6vw, 4.5rem) 0 clamp(1.5rem, 4vw, 2.75rem);
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(720px 280px at 8% 18%, rgba(216, 27, 122, .12), transparent 60%),
    radial-gradient(640px 240px at 92% 12%, rgba(110, 63, 191, .10), transparent 60%),
    linear-gradient(180deg, #fff7f1 0%, #fdf3f6 100%);
}
.section--blog-hero .hero__eyebrow {
  display: inline-block;
  background: var(--gradient-festive);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
  margin-bottom: .5rem;
}
.blog-hero__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.01em;
  max-width: 22ch;
}
.blog-hero__lede {
  margin: .75rem 0 0;
  max-width: 60ch;
  color: #4a4660;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.55;
}

/* Search bar — pill with embedded icon + button */
.blog-search {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: 1.5rem;
  max-width: 560px;
  background: #fff;
  border: 1px solid rgba(42, 26, 94, .12);
  border-radius: var(--radius-pill);
  padding: .3rem .3rem .3rem 1rem;
  box-shadow: 0 14px 30px -22px rgba(20, 12, 60, .35);
  transition: box-shadow .25s, border-color .25s;
}
.blog-search:focus-within {
  border-color: rgba(216, 27, 122, .35);
  box-shadow: 0 20px 36px -22px rgba(216, 27, 122, .35);
}
.blog-search__icon {
  color: var(--color-primary);
  opacity: .6;
  display: inline-flex;
  flex-shrink: 0;
}
.blog-search__input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: .65rem .6rem;
  font: inherit;
  color: var(--color-primary);
  min-width: 0;
}
.blog-search__input::placeholder { color: #9089a5; }
.blog-search__btn {
  flex-shrink: 0;
  padding: .6rem 1.2rem;
  font-size: .9rem;
}

@media (max-width: 540px) {
  .blog-search { padding: .25rem .25rem .25rem .75rem; }
  .blog-search__btn { padding: .55rem .9rem; font-size: .85rem; }
}

/* Listing band */
.section--blog-list {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Category chips */
.blog-cats {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
  padding-bottom: .5rem;
}
.blog-cats__chip {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.05rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(42, 26, 94, .15);
  background: #fff;
  color: var(--color-primary);
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  white-space: nowrap;
}
.blog-cats__chip:hover {
  background: rgba(216, 27, 122, .08);
  border-color: rgba(216, 27, 122, .3);
  color: var(--color-magenta);
  transform: translateY(-1px);
}
.blog-cats__chip.is-active {
  background: var(--gradient-festive);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px -12px rgba(216, 27, 122, .5);
}

/* Search result info row */
.blog-search-result {
  background: #fff;
  border: 1px dashed rgba(42, 26, 94, .18);
  border-radius: var(--radius-md);
  padding: .85rem 1.1rem;
  color: var(--color-text-soft);
  margin: 0 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .92rem;
}
.blog-search-result__clear {
  font-weight: 600;
  color: var(--color-magenta);
}
.blog-search-result__clear:hover { color: var(--color-orange); }

/* Empty state */
.blog-empty {
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) 1rem;
  background: #fff;
  border: 1px dashed rgba(42, 26, 94, .15);
  border-radius: var(--radius-lg);
  color: var(--color-text-soft);
}
.blog-empty svg { color: rgba(42, 26, 94, .35); margin-bottom: .75rem; }
.blog-empty h2 { font-size: 1.4rem; margin: 0 0 .4rem; }
.blog-empty p { margin: 0 auto 1.25rem; max-width: 44ch; }

/* Featured card (page 1 only) */
.blog-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(42, 26, 94, .08);
  box-shadow: 0 24px 50px -28px rgba(20, 12, 60, .3);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.blog-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 60px -28px rgba(20, 12, 60, .4);
  color: inherit;
}
.blog-featured__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f5f3fa;
  overflow: hidden;
}
.blog-featured__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.blog-featured:hover .blog-featured__media img { transform: scale(1.05); }
.blog-featured__badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--gradient-festive);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem .85rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 22px -8px rgba(216, 27, 122, .55);
}
.blog-featured__body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .85rem;
}
.blog-featured__cat {
  display: inline-block;
  width: fit-content;
  color: var(--color-magenta);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.blog-featured__title {
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1.2;
  margin: 0;
  color: var(--color-primary);
  letter-spacing: -.005em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-featured__excerpt {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 1rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-featured__meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin: 0;
  color: var(--color-muted);
  font-size: .85rem;
}
.blog-featured__meta svg { vertical-align: middle; }
.blog-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  margin-top: .5rem;
  font-weight: 700;
  color: var(--color-magenta);
  letter-spacing: .01em;
}
.blog-featured__cta svg { transition: transform .25s var(--ease-out); }
.blog-featured:hover .blog-featured__cta svg { transform: translateX(3px); }

@media (max-width: 820px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured__media { aspect-ratio: 16 / 9; }
}

/* Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(42, 26, 94, .08);
  box-shadow: 0 10px 26px -18px rgba(20, 12, 60, .3);
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s;
  min-width: 0;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 27, 122, .2);
  box-shadow: 0 22px 40px -22px rgba(20, 12, 60, .4);
}
.blog-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f5f3fa;
}
.blog-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__chip {
  position: absolute;
  left: .75rem; bottom: .75rem;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px);
  color: var(--color-primary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px -6px rgba(20, 12, 60, .25);
}
.blog-card__body {
  padding: 1.1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}
.blog-card__title {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0;
  font-weight: 700;
  color: var(--color-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a:hover { color: var(--color-magenta); }
.blog-card__excerpt {
  margin: 0;
  color: var(--color-text-soft);
  font-size: .92rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: .65rem;
  border-top: 1px dashed rgba(42, 26, 94, .12);
}
.blog-card__meta {
  color: var(--color-muted);
  font-size: .8rem;
}
.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--color-magenta);
  font-weight: 700;
  font-size: .85rem;
  white-space: nowrap;
}
.blog-card__more svg { transition: transform .25s var(--ease-out); }
.blog-card__more:hover { color: var(--color-orange); }
.blog-card__more:hover svg { transform: translateX(3px); }

/* Pager (frontend) */
.blog-pager {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}
.blog-pager__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: center;
}
.blog-pager__nav a,
.blog-pager__nav > span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1rem;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid rgba(42, 26, 94, .15);
  color: var(--color-primary);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.blog-pager__nav a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
}
.blog-pager__nav.is-disabled > span {
  opacity: .4;
  cursor: not-allowed;
}
.blog-pager__pages > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: center;
}
.blog-pager__pages li a,
.blog-pager__pages li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .65rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(42, 26, 94, .12);
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  font-size: .92rem;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.blog-pager__pages li a:hover {
  background: rgba(216, 27, 122, .08);
  border-color: rgba(216, 27, 122, .3);
  color: var(--color-magenta);
}
.blog-pager__pages li.is-active > span {
  background: var(--gradient-festive);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px -10px rgba(216, 27, 122, .55);
}
.blog-pager__info {
  margin: 0;
  color: var(--color-muted);
  font-size: .85rem;
}
.blog-pager__info strong { color: var(--color-primary); }

@media (max-width: 540px) {
  .blog-pager__nav a,
  .blog-pager__nav > span { padding: .5rem .8rem; font-size: .82rem; }
  .blog-pager__nav a span,
  .blog-pager__nav > span > span { display: none; }
  .blog-pager__pages li a,
  .blog-pager__pages li > span { min-width: 36px; height: 36px; font-size: .85rem; }
}

/* ============================================================
 * BLOG — single post (show)
 * Article hero, cover, prose, related posts.
 * ============================================================ */
.blog-post-hero {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.25rem, 3vw, 2rem);
  background:
    radial-gradient(620px 240px at 12% 20%, rgba(216, 27, 122, .10), transparent 60%),
    radial-gradient(560px 220px at 90% 8%, rgba(110, 63, 191, .10), transparent 60%),
    linear-gradient(180deg, #fff7f1 0%, #fdf3f6 100%);
}
.blog-post-hero .container { max-width: 820px; }
.blog-post-hero__cat {
  display: inline-block;
  background: var(--gradient-festive);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
  margin-bottom: .6rem;
}
.blog-post-hero__title {
  margin: 0;
  font-size: clamp(1.9rem, 3.5vw, 2.85rem);
  line-height: 1.18;
  color: var(--color-primary);
  letter-spacing: -.01em;
}
.blog-post-hero__meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 1.1rem 0 0;
  color: var(--color-muted);
  font-size: .9rem;
}
.blog-post-hero__meta svg { vertical-align: middle; }
.blog-post-hero__meta .dot { opacity: .5; }

.blog-post-cover {
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  max-width: 980px;
  padding: 0 1rem;
}
.blog-post-cover img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: 0 24px 50px -28px rgba(20, 12, 60, .35);
}

.blog-post-body {
  padding: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.blog-post-body .container { max-width: 760px; }
.blog-post-prose {
  font-size: 1.06rem;
  line-height: 1.78;
  color: #3b3458;
}
.blog-post-prose h2 {
  margin: 2rem 0 .8rem;
  font-size: 1.55rem;
  color: var(--color-primary);
}
.blog-post-prose h3 {
  margin: 1.6rem 0 .7rem;
  font-size: 1.2rem;
  color: var(--color-primary);
}
.blog-post-prose p { margin: 0 0 1.1rem; }
.blog-post-prose a { color: var(--color-magenta); border-bottom: 1px dashed rgba(216, 27, 122, .4); }
.blog-post-prose a:hover { color: var(--color-orange); border-color: currentColor; }
.blog-post-prose img {
  max-width: 100%; height: auto;
  border-radius: var(--radius-md);
  margin: 1rem 0;
}
.blog-post-prose blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--color-magenta);
  background: rgba(216, 27, 122, .06);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-primary);
  font-style: italic;
}
.blog-post-prose ul, .blog-post-prose ol { margin: 0 0 1.1rem 1.2rem; padding: 0; }
.blog-post-prose li { margin: 0 0 .4rem; }
.blog-post-prose code {
  background: rgba(42, 26, 94, .08);
  padding: .15rem .4rem;
  border-radius: 6px;
  font-size: .92em;
}

.blog-post-cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: var(--radius-lg);
  background-image: var(--gradient-primary);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blog-post-cta::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(216, 27, 122, .35), transparent 65%);
  pointer-events: none;
}
.blog-post-cta h2 { color: #fff; margin: 0 0 .5rem; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.blog-post-cta p { color: rgba(255, 255, 255, .82); margin: 0 auto 1.25rem; max-width: 52ch; }

/* Related posts */
.blog-related {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(180deg, #fff 0%, #faf6ff 100%);
}
.blog-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.blog-related__head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
}
.blog-related__head .blog-related__eyebrow {
  display: block;
  color: var(--color-magenta);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .76rem;
  margin-bottom: .35rem;
}