@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;0,900;1,600;1,700&display=swap');

/* ===================================================
   FreshRhythm - Design Tokens
   Black Cherry (#7A1030) & Cream Vanilla (#FFF8E9) Editorial Identity
   =================================================== */
:root {
  --bg: #FFF8E9;
  --bg-soft: #F8EEDA;
  --surface: #FFFFFF;
  --text: #2A1015;
  --muted: #6E4A50;
  --line: #E9DDC8;
  --brand: #7A1030;
  --brand-strong: #1F070D;
  --on-strong: #FFF8E9;
  --shadow-sm: 0 4px 14px rgba(31, 7, 13, 0.06);
  --shadow: 0 18px 46px rgba(31, 7, 13, 0.14);
  --shadow-lg: 0 28px 64px rgba(31, 7, 13, 0.22);
  --polaroid-bg: #FFFFFF;
  --polaroid-border: #F0E5CE;
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 9999px;
  --transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: clip;
  transition: background 0.35s ease, color 0.35s ease;
}

body.menu-open {
  overflow: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

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

.container {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
}

.skip {
  position: fixed;
  top: -80px;
  inset-inline-start: 16px;
  background: var(--brand-strong);
  color: var(--on-strong);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 99999;
  font-weight: 800;
  transition: top 0.2s ease;
}
.skip:focus {
  top: 16px;
}

/* ===================================================
   Header & Navigation (Symmetrical Desktop Alignment)
   =================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

header.scrolled {
  background: color-mix(in srgb, var(--bg) 98%, transparent);
  box-shadow: var(--shadow-sm);
}

.nav {
  /* 3-column grid (equal 1fr side columns) keeps the logo and the right-side
     action cluster at perfectly equal distance from the page edges, and
     keeps the center menu mathematically centered regardless of how wide
     the logo or action cluster are. */
  min-height: 82px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
}

/* Desktop & Laptop (>=1024px): the nav breaks out of the boxed 1200px
   .container and goes edge-to-edge, so the brand sits near the true left
   corner and the action cluster near the true right corner of the window
   instead of being boxed up close to the center menu. */
@media (min-width: 1024px) {
  header .nav.container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(24px, 4vw, 64px);
  }
}

/* Brand Logo (Left Side) */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.4px;
  flex-shrink: 0;
  justify-self: start;
}

.brand i,
.brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-strong);
  color: var(--on-strong);
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.brand:hover i,
.brand:hover .brand-icon {
  transform: rotate(-8deg) scale(1.06);
}

/* Center Desktop Navigation */
.desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  justify-self: center;
}

.navlink,
.dropbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}

.navlink:after,
.dropbtn:after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.navlink:hover:after,
.navlink.active:after,
.dropbtn:hover:after,
.dropbtn.active:after {
  transform: scaleX(1);
}

.navlink:hover,
.dropbtn:hover,
.navlink.active,
.dropbtn.active {
  color: var(--brand);
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  /* top:100% (no gap) + padding-top so the hoverable area is continuous
     from the nav link straight into the menu — a gap here used to let the
     menu close mid-mouse-travel before a click on a menu item registered. */
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 195px;
  padding: 14px 8px 8px;
  margin-top: -6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1001;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
  background: var(--bg-soft);
  color: var(--brand);
}

/* Right Side Actions (Desktop) */
.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
  justify-self: end;
}

.icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 15px;
  transition: all var(--transition);
}

.icon:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.login {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--brand);
  border: 1px solid var(--brand);
  background: transparent;
  transition: all var(--transition);
}

.login:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  transform: translateY(-2px);
}

.subscribe {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 800;
  background: var(--brand-strong);
  color: var(--on-strong);
  border: 1px solid var(--brand-strong);
  box-shadow: 0 6px 18px rgba(31, 7, 13, 0.25);
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.subscribe:hover {
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(122, 16, 48, 0.35);
}

/* Mobile Header Controls (Right on mobile down to 320px) */
.mobile-controls {
  display: none;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  justify-self: end;
  grid-column: 3;
}

/* ===================================================
   Full-Screen Mobile Menu Overlay with Close Button
   =================================================== */
.menu-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
  overflow-y: auto;
}

.menu-fullscreen.open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.menu-fullscreen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.menu-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.menu-close-btn:hover {
  transform: rotate(90deg);
  color: var(--brand);
  border-color: var(--brand);
}

.menu-nav-links {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.menu-nav-links a,
.menu-drop-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 800;
  text-align: start;
  transition: color var(--transition), padding-inline-start var(--transition);
}

.menu-nav-links a:hover,
.menu-drop-btn:hover,
.menu-nav-links a.active {
  color: var(--brand);
  padding-inline-start: 10px;
}

.menu-drop-btn i {
  font-size: 15px;
  transition: transform 0.3s ease;
}

.menu-drop-btn.open i {
  transform: rotate(180deg);
}

.menu-sub-links {
  display: none;
  flex-direction: column;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  margin: 8px 0;
}

.menu-sub-links.open {
  display: flex;
}

.menu-sub-links a {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.menu-sub-links a:last-child {
  border-bottom: none;
}

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.menu-actions .btn {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 16px;
}

/* ===================================================
   Typography & General Styles
   =================================================== */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}

p {
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-size: 15.5px;
  font-weight: 800;
  border: 1px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.btn i {
  transition: transform 0.25s ease;
}

.btn:hover i {
  transform: translateX(4px);
}

html[dir="rtl"] .btn:hover i {
  transform: translateX(-4px);
}

.primary {
  background: var(--brand-strong);
  color: var(--on-strong);
  border-color: var(--brand-strong);
  box-shadow: 0 8px 24px rgba(31, 7, 13, 0.22);
}

.primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(122, 16, 48, 0.32);
}

.secondary {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}

.secondary:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  transform: translateY(-3px);
}

section {
  padding: 100px 0;
  position: relative;
  min-height: 400px;
}

.alt {
  background: var(--bg-soft);
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.section-head.text-start {
  text-align: start;
  margin-inline: 0;
}

.tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand);
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: clamp(34px, 4.5vw, 50px);
  margin-bottom: 16px;
}

.section-head p {
  font-size: 17.5px;
  color: var(--muted);
  line-height: 1.7;
}

/* ===================================================
   1. HERO SECTION (Asymmetric Split & Polaroid Stack)
   Inspired by Reference Template 2 & 1
   =================================================== */
.hero {
  min-height: calc(100vh - 82px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 60px 0 90px;
}

.hero-editorial-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 50px;
  align-items: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(122, 16, 48, 0.12);
  font-size: 14px;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 28px;
  transition: all var(--transition);
  cursor: default;
}

.hero-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(122, 16, 48, 0.18);
  border-color: var(--brand);
}

.hero-pill .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2E7D32;
  box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.2);
  animation: pulseDot 2.5s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.6); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(46, 125, 50, 0); }
  100% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

.hero h1 {
  font-size: clamp(46px, 5.8vw, 72px);
  letter-spacing: -1.2px;
  line-height: 1.06;
  margin-bottom: 22px;
}

.hero h1 span.italic-accent {
  font-style: italic;
  color: var(--brand);
}

.hero-lead {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 34px;
}

.hero-btns {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero-btns .btn {
  position: relative;
  overflow: hidden;
}

.hero-btns .btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.hero-btns .btn:hover::before {
  width: 300px;
  height: 300px;
}

.hero-perks {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  position: relative;
}

.hero-perks::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: 0.3;
}

.hero-perk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  transition: transform var(--transition);
  cursor: default;
}

.hero-perk-item:hover {
  transform: translateX(4px);
}

html[dir="rtl"] .hero-perk-item:hover {
  transform: translateX(-4px);
}

.hero-perk-item i {
  color: var(--brand);
  font-size: 16px;
  animation: perkIconPulse 3s ease-in-out infinite;
}

.hero-perk-item:nth-child(2) i {
  animation-delay: 1s;
}

.hero-perk-item:nth-child(3) i {
  animation-delay: 2s;
}

@keyframes perkIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Polaroid Photo Stack (Inspired by Template 2) */
.polaroid-stage {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.polaroid-stack {
  position: relative;
  width: min(380px, 90%);
  height: 420px;
}

.polaroid-card {
  position: absolute;
  background: var(--polaroid-bg);
  border: 1px solid var(--polaroid-border);
  padding: 14px 14px 28px 14px;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
  cursor: pointer;
}

.polaroid-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

.polaroid-caption {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 700;
  color: var(--text);
  margin-top: 12px;
  text-align: center;
}

.polaroid-1 {
  width: 270px;
  top: 10px;
  inset-inline-start: 10px;
  transform: rotate(-7deg);
  z-index: 1;
  animation: polaroidFloat1 7s ease-in-out infinite alternate;
}

.polaroid-2 {
  width: 280px;
  top: 45px;
  inset-inline-end: 15px;
  transform: rotate(6deg);
  z-index: 2;
  animation: polaroidFloat2 8s ease-in-out infinite alternate;
}

.polaroid-3 {
  width: 290px;
  bottom: 10px;
  inset-inline-start: 50px;
  transform: rotate(-2deg);
  z-index: 3;
}

.polaroid-card:hover {
  transform: translateY(-12px) scale(1.05) rotate(0deg) !important;
  z-index: 10;
  box-shadow: 0 32px 70px rgba(31, 7, 13, 0.3);
}

@keyframes polaroidFloat1 {
  0% { transform: rotate(-7deg) translateY(0); }
  100% { transform: rotate(-5deg) translateY(-10px); }
}

@keyframes polaroidFloat2 {
  0% { transform: rotate(6deg) translateY(0); }
  100% { transform: rotate(8deg) translateY(-12px); }
}

.hero-float-badge {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  z-index: 11;
  background: var(--brand-strong);
  color: var(--on-strong);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 800;
  animation: floatBadge 5s ease-in-out infinite;
}

@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ===================================================
   2. WHY FRESHRHYTHM (Arched Frame & Overlap Card)
   Inspired by Reference Template 1
   =================================================== */
.arch-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.arch-media-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.arch-frame {
  width: min(420px, 95%);
  aspect-ratio: 4 / 5;
  border-radius: 200px 200px 24px 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--surface);
  position: relative;
}

.arch-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.arch-media-wrap:hover .arch-frame img {
  transform: scale(1.06);
}

.arch-overlap-card {
  position: absolute;
  bottom: -20px;
  inset-inline-end: -15px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 22px 28px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 4;
}

.arch-overlap-card strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 4px;
}

.arch-overlap-card span {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}

.editorial-rows {
  display: flex;
  flex-direction: column;
}

.editorial-row {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  transition: transform var(--transition);
}

.editorial-row:first-child {
  padding-top: 0;
}

.editorial-row:last-child {
  border-bottom: none;
}

.editorial-row:hover {
  transform: translateX(6px);
}

html[dir="rtl"] .editorial-row:hover {
  transform: translateX(-6px);
}

.editorial-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  color: var(--brand);
  flex-shrink: 0;
  width: 44px;
}

.editorial-row h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.editorial-row p {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.65;
}

/* ===================================================
   3. CHOOSE YOUR BOX (Editorial Arched Cards)
   =================================================== */
.plans-editorial-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.plan-editorial-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: visible;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
  position: relative;
}

.plan-editorial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--surface);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 0 8px var(--bg);
}

.plan-editorial-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand);
}

.plan-arch-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
  position: relative;
  z-index: 1;
  -webkit-mask-image: radial-gradient(circle 56px at 56px 56px, transparent 56px, black 57px);
  mask-image: radial-gradient(circle 56px at 56px 56px, transparent 56px, black 57px);
  display: block;
}

.plan-editorial-card:hover .plan-arch-photo {
  transform: scale(1.06);
}

.plan-editorial-body {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.plan-editorial-body h3 {
  font-size: 21px;
  margin-bottom: 8px;
}

.plan-editorial-body p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 1;
}

.plan-meta-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.plan-tag {
  font-size: 15px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text);
}

.plan-editorial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.plan-price-tag {
  font-size: 15px;
  color: var(--muted);
}

.plan-price-tag strong {
  font-size: 20px;
  color: var(--brand);
  font-family: 'Playfair Display', Georgia, serif;
}

/* ===================================================
   4. HOW IT WORKS (Typographic #01-#04 Grid)
   Inspired by Reference Template 3
   =================================================== */
.numbered-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.number-card {
  padding: 44px 30px;
  border-inline-end: 1px solid var(--line);
  position: relative;
  transition: background var(--transition), transform var(--transition);
}

.number-card:last-child {
  border-inline-end: none;
}

.number-card:hover {
  background: var(--bg-soft);
}

.num-tag {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 44px;
  font-style: italic;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 20px;
}

.number-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.number-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
}

/* ===================================================
   5. MORE THAN GROCERIES (PRESERVED INTACT)
   Kept Exactly As Requested
   =================================================== */
.custom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.mini-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.mini-photo {
  width: 82%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow);
  border: 4px solid var(--surface);
  transition: transform var(--transition);
}

.mini-item:hover .mini-photo {
  transform: translateY(-4px) scale(1.04);
}

.mini-item span {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}

.checks {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  margin: 14px 0;
  color: var(--text);
}

.checks i {
  color: var(--brand);
  font-size: 18px;
  flex-shrink: 0;
}

/* ===================================================
   6. UNBOXING GALLERY (Editorial Bento Collage)
   =================================================== */
.bento-editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 150px;
  gap: 18px;
}

.bento-photo-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.bento-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.bento-photo-card:hover img {
  transform: scale(1.08);
}

.bento-label {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 7, 13, 0.85) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  color: var(--on-strong);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bento-photo-card:hover .bento-label {
  opacity: 1;
}

.bento-card-1 { grid-column: span 5; grid-row: span 3; }
.bento-card-2 { grid-column: span 4; grid-row: span 2; }
.bento-card-3 { grid-column: span 3; grid-row: span 2; }
.bento-card-4 { grid-column: span 4; grid-row: span 2; }
.bento-card-5 { grid-column: span 3; grid-row: span 2; }
.bento-card-6 { grid-column: span 5; grid-row: span 1; }
.bento-card-7 { grid-column: span 7; grid-row: span 1; }

/* ===================================================
   7. OUR STORY & LIVE STATS
   =================================================== */
.story-editorial-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.stats-delicate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 36px 0;
}

.stat-item {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.stat-item strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 38px;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-item span {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.story-arch-photo {
  width: 100%;
  aspect-ratio: 4 / 4.8;
  object-fit: cover;
  border-radius: 180px 24px 24px 24px;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--surface);
}

html[dir="rtl"] .story-arch-photo {
  border-radius: 24px 180px 24px 24px;
}

/* ===================================================
   8. TESTIMONIAL (Centered Editorial Card)
   Inspired by Reference Template 3
   =================================================== */
.quote-band {
  background: var(--brand-strong);
  color: var(--on-strong);
  padding: 100px 0;
}

.quote-editorial-card {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}

.quote-editorial-card .stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  color: #E5A84B;
  font-size: 18px;
  margin-bottom: 24px;
}

.quote-editorial-card blockquote {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 3.2vw, 36px);
  font-style: italic;
  line-height: 1.4;
  margin: 0 0 32px;
}

.quote-subscriber {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.quote-subscriber img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid color-mix(in srgb, var(--on-strong) 35%, transparent);
}

.quote-subscriber-text {
  text-align: start;
}

.quote-subscriber-text strong {
  display: block;
  font-size: 17px;
  color: var(--on-strong);
}

.quote-subscriber-text span {
  font-size: 14px;
  opacity: 0.75;
}

/* ===================================================
   9. CTA BANNER (Deep Wine Luxury Block)
   =================================================== */
.cta-editorial-box {
  background: var(--brand-strong);
  color: var(--on-strong);
  border-radius: var(--radius-lg);
  padding: 80px 40px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.cta-editorial-box h2 {
  color: var(--on-strong);
  font-size: clamp(34px, 4.5vw, 52px);
  margin-bottom: 18px;
}

.cta-editorial-box p {
  font-size: 18px;
  opacity: 0.85;
  max-width: 560px;
  margin: 0 auto 34px;
  line-height: 1.7;
}

.cta-editorial-box .btn {
  background: var(--on-strong);
  color: var(--brand-strong);
  border-color: var(--on-strong);
}

.cta-editorial-box .btn:hover {
  background: var(--bg-soft);
  transform: translateY(-3px);
}

/* ===================================================
   Footer (Black Cherry high-contrast, unified across all pages)
   =================================================== */
footer {
  background: var(--brand-strong);
  color: var(--on-strong);
  padding: 70px 0 30px;
  border-top: 1px solid color-mix(in srgb, var(--on-strong) 15%, transparent);
}

.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 50px;
}

.foot-col h4 {
  color: var(--on-strong);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 20px;
}

.foot-col p,
.foot-desc {
  font-size: 15px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--on-strong) 80%, transparent);
  max-width: 320px;
  margin-top: 14px;
}

.foot-col a {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: color-mix(in srgb, var(--on-strong) 80%, transparent);
  margin-bottom: 12px;
}

.foot-col a:hover {
  color: var(--on-strong);
  transform: translateX(4px);
}

html[dir="rtl"] .foot-col a:hover {
  transform: translateX(-4px);
}

/* Footer link list (used with <ul class="foot-links"><li><a>) */
.foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot-links li {
  margin: 0;
}

.foot-links a {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: color-mix(in srgb, var(--on-strong) 80%, transparent);
  margin-bottom: 12px;
  transition: color var(--transition), transform var(--transition);
}

.foot-links a:hover {
  color: var(--on-strong);
  transform: translateX(4px);
}

html[dir="rtl"] .foot-links a:hover {
  transform: translateX(-4px);
}

/* Social icon row */
.foot-socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.foot-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--on-strong) 25%, transparent);
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--on-strong);
  transition: all var(--transition);
}

.foot-socials a:hover {
  background: var(--on-strong);
  color: var(--brand-strong);
  transform: translateY(-3px);
}

/* Newsletter form */
.foot-newsletter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  border: 1px solid color-mix(in srgb, var(--on-strong) 25%, transparent);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 16px;
  background: color-mix(in srgb, var(--on-strong) 8%, transparent);
}

.foot-newsletter input[type="email"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--on-strong);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 0;
}

.foot-newsletter input[type="email"]::placeholder {
  color: color-mix(in srgb, var(--on-strong) 60%, transparent);
}

.foot-newsletter:has(input:invalid:not(:placeholder-shown)) {
  border-color: #FF5A5A;
}

.foot-newsletter input[type="email"]:invalid:not(:placeholder-shown) {
  color: #FF9E9E;
}

.foot-newsletter button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--on-strong);
  color: var(--brand-strong);
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: all var(--transition);
}

.foot-newsletter button:hover {
  background: var(--brand);
  color: var(--on-strong);
  transform: scale(1.06);
}

.foot-bottom {
  padding-top: 30px;
  border-top: 1px solid color-mix(in srgb, var(--on-strong) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: color-mix(in srgb, var(--on-strong) 70%, transparent);
  flex-wrap: wrap;
  gap: 16px;
}

/* Legal link row inside foot-bottom */
.foot-legal {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.foot-legal a {
  font-size: 15px;
  font-weight: 600;
  color: color-mix(in srgb, var(--on-strong) 70%, transparent);
  transition: color var(--transition);
}

.foot-legal a:hover {
  color: var(--on-strong);
}

/* Back to Top */
.top {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-strong);
  color: var(--on-strong);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all var(--transition);
  z-index: 900;
}

.top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.top:hover {
  background: var(--brand);
  transform: translateY(-4px);
}

/* ===================================================
   Full Rich Scroll Animations
   =================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-delay="1"] { transition-delay: 0.12s; }
[data-reveal-delay="2"] { transition-delay: 0.24s; }
[data-reveal-delay="3"] { transition-delay: 0.36s; }
[data-reveal-delay="4"] { transition-delay: 0.48s; }
[data-reveal-delay="5"] { transition-delay: 0.6s; }
[data-reveal-delay="6"] { transition-delay: 0.72s; }
[data-reveal-delay="7"] { transition-delay: 0.84s; }

/* ===================================================
   PLANS PAGE STYLES
   =================================================== */

/* SECTION 1: Plans Hero (Layered Grocery Composition) */
.plans-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 80px 0 100px;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-soft) 50%, var(--bg) 100%);
}

.plans-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(122, 16, 48, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.plans-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="1" fill="%237A1030" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%237A1030" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%237A1030" opacity="0.15"/><circle cx="10" cy="60" r="0.8" fill="%237A1030" opacity="0.1"/><circle cx="90" cy="40" r="0.6" fill="%237A1030" opacity="0.12"/></svg>');
  background-size: 150px 150px;
  animation: particleFloat 20s linear infinite;
  pointer-events: none;
}

@keyframes particleFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-150px); }
}

.plans-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.plans-hero-content {
  position: relative;
  z-index: 3;
}

.plans-hero h1 {
  font-size: clamp(52px, 7vw, 82px);
  letter-spacing: -1.5px;
  line-height: 1.02;
  margin-bottom: 28px;
  font-weight: 800;
  text-shadow: 0 2px 20px rgba(122, 16, 48, 0.1);
}

.plans-hero h1 span.italic-accent {
  font-style: italic;
  color: var(--brand);
  position: relative;
  display: inline-block;
}

.plans-hero h1 span.italic-accent::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), transparent);
  border-radius: 2px;
  animation: underlineExpand 2s ease-out infinite;
}

@keyframes underlineExpand {
  0%, 100% { transform: scaleX(0.3); opacity: 0.5; }
  50% { transform: scaleX(1); opacity: 1; }
}

.hero-grocery-composition {
  position: relative;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-main-box {
  position: relative;
  width: 350px;
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(122, 16, 48, 0.25), 0 0 0 1px rgba(122, 16, 48, 0.1);
  z-index: 3;
  animation: mainBoxFloat 8s ease-in-out infinite;
  cursor: pointer;
}

.hero-main-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  z-index: 2;
  pointer-events: none;
}

.hero-main-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--bg-soft);
  min-height: 100%;
}

.hero-main-box::after {
  content: '📦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  opacity: 0.3;
  z-index: 1;
}

.hero-main-box img {
  position: relative;
  z-index: 2;
}

.hero-main-box:hover img {
  transform: scale(1.08);
}

.hero-main-box:hover {
  animation-play-state: paused;
  transform: translateY(-20px) rotate(0deg) scale(1.02);
  box-shadow: 0 40px 100px rgba(122, 16, 48, 0.35), 0 0 0 1px rgba(122, 16, 48, 0.2);
}

@keyframes mainBoxFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-20px) rotate(3deg); }
}

.hero-box-badge {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-strong);
  color: var(--on-strong);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

.floating-produce {
  position: absolute;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(122, 16, 48, 0.2), 0 0 0 2px rgba(255,255,255,0.5);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
  cursor: pointer;
}

.floating-produce::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  z-index: 2;
  pointer-events: none;
}

.floating-produce img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  background: var(--bg-soft);
  min-height: 100%;
}

.floating-produce::after {
  content: '🥬';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  opacity: 0.6;
  z-index: 1;
}

.floating-produce img {
  position: relative;
  z-index: 2;
}

.produce-1 {
  width: 140px;
  height: 140px;
  top: 5%;
  left: 0%;
  animation: floatProduce1 10s ease-in-out infinite;
  z-index: 1;
}

.produce-2 {
  width: 120px;
  height: 120px;
  top: 55%;
  right: 0%;
  animation: floatProduce2 9s ease-in-out infinite;
  z-index: 4;
}

.produce-3 {
  width: 110px;
  height: 110px;
  bottom: 10%;
  left: 10%;
  animation: floatProduce3 11s ease-in-out infinite;
  z-index: 2;
}

@keyframes floatProduce1 {
  0%, 100% { transform: translateY(0) rotate(-8deg) scale(1); }
  50% { transform: translateY(-30px) rotate(8deg) scale(1.05); }
}

@keyframes floatProduce2 {
  0%, 100% { transform: translateY(0) rotate(10deg) scale(1); }
  50% { transform: translateY(-25px) rotate(-10deg) scale(1.03); }
}

@keyframes floatProduce3 {
  0%, 100% { transform: translateY(0) rotate(5deg) scale(1); }
  50% { transform: translateY(-28px) rotate(-5deg) scale(1.04); }
}

.floating-produce:hover {
  transform: scale(1.15) translateY(-10px) !important;
  z-index: 10;
  box-shadow: 0 25px 60px rgba(122, 16, 48, 0.35), 0 0 0 3px rgba(122, 16, 48, 0.3);
}

.floating-produce:hover img {
  transform: scale(1.1);
}

.hero-leaf {
  position: absolute;
  color: var(--brand);
  opacity: 0.2;
  font-size: 50px;
  animation: leafFloat 15s ease-in-out infinite;
  filter: blur(0.5px);
}

.leaf-1 {
  top: 15%;
  right: 20%;
  animation-delay: 0s;
  font-size: 60px;
}

.leaf-2 {
  bottom: 25%;
  left: 8%;
  animation-delay: 5s;
  font-size: 45px;
}

.leaf-3 {
  top: 65%;
  right: 12%;
  animation-delay: 10s;
  font-size: 55px;
}

@keyframes leafFloat {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.2; }
  25% { transform: translateY(-20px) rotate(45deg) scale(1.1); opacity: 0.3; }
  50% { transform: translateY(-40px) rotate(90deg) scale(1); opacity: 0.25; }
  75% { transform: translateY(-20px) rotate(135deg) scale(1.05); opacity: 0.3; }
}

/* SECTION 2: Box Type Selector (Horizontal Timeline) */
.box-selector-container {
  max-width: 1000px;
  margin: 0 auto;
}

.box-timeline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
  padding: 0 20px;
}

.box-timeline::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--line);
  transform: translateY(-50%);
  z-index: 0;
}

.timeline-item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all var(--transition);
}

.timeline-dot {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--muted);
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}

.timeline-item span {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  transition: color var(--transition);
}

.timeline-item:hover .timeline-dot {
  border-color: var(--brand);
  color: var(--brand);
  transform: scale(1.1);
}

.timeline-item.active .timeline-dot {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-strong);
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(122, 16, 48, 0.15);
}

.timeline-item.active span {
  color: var(--brand);
  font-weight: 800;
}

.box-display-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.box-visual-wrapper {
  position: relative;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-main-image {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.box-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.box-main-image:hover img {
  transform: scale(1.05);
}

.box-floating-badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: var(--brand-strong);
  color: var(--on-strong);
  padding: 16px 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  text-align: right;
}

.badge-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 4px;
}

.badge-price {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.box-details-panel h3 {
  font-size: 28px;
  margin-bottom: 16px;
  color: var(--brand);
}

.box-details-panel > p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.box-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

.box-spec {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  transition: transform var(--transition);
}

.box-spec:hover {
  transform: translateY(-3px);
}

.box-spec i {
  font-size: 20px;
  color: var(--brand);
  width: 24px;
}

.box-spec div {
  display: flex;
  flex-direction: column;
}

.spec-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}

.spec-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.box-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.feature-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
}

.feature-tag i {
  color: var(--brand);
}

/* SECTION 3: Plan Comparison (Stacked Crates) */
.plans-comparison-stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
  margin-top: 40px;
  min-height: auto;
}

.plan-crate {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  position: relative;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  min-height: auto;
}

.plan-crate:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-lg);
}

.plan-crate-1 {
  height: auto;
  min-height: 420px;
}

.plan-crate-2 {
  height: auto;
  min-height: 480px;
  z-index: 2;
  border: 2px solid var(--brand);
}

.plan-crate-3 {
  height: auto;
  min-height: 440px;
}

.popular-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: var(--on-strong);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

.crate-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.crate-label {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 8px;
}

.crate-tag {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.crate-pricing {
  text-align: center;
  margin-bottom: 28px;
}

.price-currency {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  vertical-align: top;
}

.price-amount {
  font-size: 48px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
}

.price-period {
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
}

.crate-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.crate-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.crate-feature i {
  color: var(--brand);
  font-size: 16px;
  width: 20px;
}

.crate-feature.disabled {
  color: var(--muted);
  opacity: 0.6;
}

.crate-feature.disabled i {
  color: var(--muted);
}

.plan-crate .btn {
  width: 100%;
  justify-content: center;
}

/* ===================================================
   PLANS — WHAT'S INSIDE EACH PLAN
   Editorial mosaic redesign: no heavy outer box, layered
   imagery, staggered reveals, and readable captions.
   =================================================== */
.plans-contents-section {
  position: relative;
  overflow: clip;
}

.plans-contents-head {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin-inline: auto;
}

.plans-contents-head h2 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  margin-bottom: 14px;
}

.plans-contents-head p {
  font-size: 16px;
  line-height: 1.65;
}

.contents-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr .82fr .82fr;
  grid-template-rows: 250px 210px 180px;
  grid-template-areas:
    "hero c1 c2"
    "hero c3 c4"
    "c5  c6 c7";
  gap: 14px;
  margin-top: 42px;
  overflow: visible;
}

.contents-mosaic::before {
  content: '';
  position: absolute;
  inset: -24px -18px;
  z-index: -1;
  background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 35%),
              radial-gradient(circle at 84% 70%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 32%);
  pointer-events: none;
}

.mosaic-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  isolation: isolate;
  background: var(--surface, #fff);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--brand-strong) 10%, transparent);
  transform: translateZ(0);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}

.mosaic-tile:nth-child(1) { grid-area: hero; }
.mosaic-tile:nth-child(2) { grid-area: c1; }
.mosaic-tile:nth-child(3) { grid-area: c2; }
.mosaic-tile:nth-child(4) { grid-area: c3; }
.mosaic-tile:nth-child(5) { grid-area: c4; }
.mosaic-tile:nth-child(6) { grid-area: c5; }
.mosaic-tile:nth-child(7) { grid-area: c6; }

.mosaic-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform .8s cubic-bezier(.16,1,.3,1), filter .7s ease;
}

.mosaic-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(31,7,13,.02) 28%, rgba(31,7,13,.86) 100%);
}

.mosaic-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-140%);
  opacity: 0;
}

.mosaic-tile.is-visible::after {
  animation: plansMosaicSweep 1.05s ease-out .15s forwards;
}

@keyframes plansMosaicSweep {
  to { transform: translateX(140%); opacity: 0; }
}

.mosaic-tile:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 50px color-mix(in srgb, var(--brand-strong) 18%, transparent);
}

.mosaic-tile:hover img {
  transform: scale(1.14);
  filter: saturate(1.06) contrast(1.02);
}

.mosaic-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 18px 20px;
  color: #fff;
}

.mosaic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 86%, #fff 14%);
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  font-size: 15px;
  margin-bottom: 8px;
  position: relative;
}

.mosaic-icon::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  animation: plansMosaicPing 2.8s ease-out infinite;
}

@keyframes plansMosaicPing {
  0% { transform: scale(.85); opacity: .65; }
  80%,100% { transform: scale(1.32); opacity: 0; }
}

.mosaic-caption h4 {
  font-size: 19px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 5px;
  letter-spacing: -.25px;
}

.mosaic-caption p {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255,248,233,.9);
  margin: 0;
  max-height: 90px;
  opacity: 1;
}

.mosaic-hero .mosaic-caption {
  padding: 26px 28px;
}

.mosaic-hero .mosaic-caption h4 {
  font-size: clamp(24px, 2.3vw, 34px);
}

.mosaic-hero .mosaic-icon {
  width: 42px;
  height: 42px;
  font-size: 17px;
}

/* Strong readable light/dark treatment */
html[data-theme="dark"] .mosaic-tile {
  background: var(--surface);
  box-shadow: 0 20px 46px rgba(0,0,0,.42);
}

html[data-theme="dark"] .mosaic-caption {
  color: #fff;
}

html[data-theme="dark"] .mosaic-caption p {
  color: rgba(255,255,255,.92);
}

html[data-theme="dark"] .plans-contents-head p {
  color: var(--muted);
}

@media (max-width: 1023px) {
  .contents-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 300px 210px 210px 190px;
    grid-template-areas:
      "hero hero"
      "hero hero"
      "c1 c2"
      "c3 c4"
      "c5 c6";
  }
}

@media (max-width: 640px) {
  .plans-contents-head p { font-size: 15px; }

  .contents-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "hero"
      "c1"
      "c2"
      "c3"
      "c4"
      "c5"
      "c6";
    grid-auto-rows: 220px;
    gap: 12px;
  }

  .mosaic-hero { min-height: 300px; }
  .mosaic-caption { padding: 17px 18px; }
  .mosaic-caption h4 { font-size: 18px; }
  .mosaic-caption p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .mosaic-tile img,
  .mosaic-icon::after,
  .mosaic-tile::after { animation: none !important; transition: none !important; }
}

.winding-path-container {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 0;
  min-height: auto;
}

.path-svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

.path-line {
  stroke-dasharray: 10, 5;
  animation: pathDash 20s linear infinite;
}

@keyframes pathDash {
  to { stroke-dashoffset: -1000; }
}

.path-stops {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 60px;
  min-height: auto;
}

.path-stop {
  text-align: center;
  position: relative;
}

.stop-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-strong);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
  transition: transform var(--transition);
  min-width: 70px;
  min-height: 70px;
}

.path-stop:hover .stop-circle {
  transform: scale(1.1);
}

.stop-number {
  font-size: 20px;
  font-weight: 800;
}

.stop-content h4 {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 12px;
}

.stop-content p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.stop-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.stop-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.stop-badge i {
  color: var(--brand);
  font-size: 14px;
}

.path-walker {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  color: var(--brand);
  opacity: 0.3;
  animation: walkerMove 15s ease-in-out infinite;
}

@keyframes walkerMove {
  0%, 100% { transform: translateX(-50%) translateX(-200px); }
  50% { transform: translateX(-50%) translateX(200px); }
}

/* SECTION 6: Testimonials (Editorial Layout) */
.testimonials-editorial {
  margin-top: 40px;
  min-height: 400px;
}

.testimonial-featured {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  margin-bottom: 40px;
  align-items: center;
}

.testimonial-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--brand);
  flex-shrink: 0;
}

.testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-content {
  flex: 1;
}

.testimonial-content .stars {
  margin-bottom: 20px;
}

.testimonial-content .stars i {
  color: #FFB800;
  font-size: 18px;
}

.testimonial-content blockquote {
  font-size: 18px;
  font-style: italic;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 20px 0;
  font-family: 'Playfair Display', Georgia, serif;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.testimonial-author strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand);
}

.testimonial-author span {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: all var(--transition);
  min-height: 280px;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.testimonial-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.testimonial-card-header img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
  min-width: 50px;
  min-height: 50px;
}

.testimonial-card-header img[src=""] {
  display: none;
}

.testimonial-card-header img:not([src]) {
  display: none;
}

.testimonial-card-header div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.testimonial-card-header strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.testimonial-card-header span {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.testimonial-card p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 16px;
}

.testimonial-card .stars {
  display: flex;
  gap: 4px;
}

.testimonial-card .stars i {
  color: #FFB800;
  font-size: 14px;
}

/* SECTION 7: Premium CTA */
.cta-premium-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  background: var(--brand-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.cta-visual {
  position: relative;
  height: 100%;
  min-height: 400px;
}

.cta-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-overlay {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background: var(--brand);
  color: var(--on-strong);
  padding: 20px 28px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.cta-stat strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.cta-stat span {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.9;
}

.cta-content {
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--on-strong);
}

.cta-content .tagline {
  color: var(--on-strong);
  margin-bottom: 20px;
}

.cta-content h2 {
  font-size: clamp(32px, 4vw, 42px);
  color: var(--on-strong);
  margin-bottom: 20px;
  line-height: 1.2;
}

.cta-content > p {
  font-size: 17px;
  color: color-mix(in srgb, var(--on-strong) 80%, transparent);
  line-height: 1.7;
  margin-bottom: 32px;
}

.cta-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.cta-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--on-strong);
}

.cta-feature i {
  color: #4CAF50;
  font-size: 18px;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-buttons .btn {
  flex: 1;
  min-width: 200px;
  justify-content: center;
}

.cta-buttons .primary {
  background: var(--on-strong);
  color: var(--brand-strong);
  border-color: var(--on-strong);
}

.cta-buttons .primary:hover {
  background: var(--bg);
  color: var(--brand-strong);
  border-color: var(--bg);
}

.cta-buttons .secondary {
  background: transparent;
  color: var(--on-strong);
  border-color: var(--on-strong);
}

.cta-buttons .secondary:hover {
  background: color-mix(in srgb, var(--on-strong) 15%, transparent);
}

/* Add smooth transitions for text content updates */
#boxTitle, #boxDescription, #boxImage {
  transition: opacity 0.3s ease;
}

/* Debug: Ensure sections are visible */
[data-reveal] {
  min-height: auto;
}

.section-head {
  min-height: auto;
}

.container {
  min-height: auto;
}

/* Ensure section content is visible */
section {
  min-height: auto;
}

.plans-hero {
  min-height: 60vh;
}

.box-selector-container {
  min-height: auto;
}

.basket-composition-stage {
  min-height: auto;
}

.winding-path-container {
  min-height: auto;
}

.testimonials-editorial {
  min-height: auto;
}

.cta-premium-block {
  min-height: auto;
}

/* Fallback for missing images */
img {
  background-color: var(--bg-soft);
  min-height: 100px;
  display: block;
}

img[src=""], img:not([src]) {
  display: none;
}

/* ===================================================
   HOW IT WORKS PAGE - Premium Visual Journey Styles
   =================================================== */

/* SECTION 1: Hero Banner - Cinematic Design */
.hiw-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 100px 0 80px;
}

.hiw-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hiw-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: brightness(0.85);
}

.hiw-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(122, 16, 48, 0.4) 0%, rgba(31, 7, 13, 0.6) 100%);
  z-index: 1;
}

/* Add floating particles to hero */
.hiw-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="1" fill="%23FFF8E9" opacity="0.3"/><circle cx="75" cy="75" r="1" fill="%23FFF8E9" opacity="0.2"/><circle cx="50" cy="10" r="0.5" fill="%23FFF8E9" opacity="0.25"/><circle cx="10" cy="60" r="0.8" fill="%23FFF8E9" opacity="0.2"/><circle cx="90" cy="40" r="0.6" fill="%23FFF8E9" opacity="0.3"/></svg>');
  background-size: 200px 200px;
  animation: particleFloat 25s linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes particleFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-200px); }
}

.hiw-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hiw-hero-eyebrow {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--on-strong);
  margin-bottom: 24px;
  opacity: 0.9;
}

.hiw-hero-title {
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1.1;
  color: var(--on-strong);
  margin-bottom: 24px;
  font-weight: 800;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hiw-hero-text {
  font-size: 18px;
  color: rgba(255, 248, 233, 0.9);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 540px;
}

.hiw-hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.hiw-hero-btns .btn {
  background: var(--on-strong);
  color: var(--brand-strong);
  border-color: var(--on-strong);
}

.hiw-hero-btns .btn:hover {
  background: var(--bg);
  color: var(--brand-strong);
  border-color: var(--bg);
}

.hiw-hero-btns .secondary {
  background: transparent;
  color: var(--on-strong);
  border-color: var(--on-strong);
}

.hiw-hero-btns .secondary:hover {
  background: rgba(255, 248, 233, 0.15);
}

.hiw-hero-number {
  position: absolute;
  bottom: 40px;
  right: 60px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 180px;
  font-weight: 900;
  color: rgba(255, 248, 233, 0.15);
  line-height: 1;
  z-index: 1;
}

.hiw-curved-line {
  position: absolute;
  bottom: 80px;
  right: 80px;
  width: 200px;
  height: 200px;
  border: 3px solid rgba(255, 248, 233, 0.2);
  border-radius: 50%;
  z-index: 1;
  animation: curvedLinePulse 4s ease-in-out infinite;
}

@keyframes curvedLinePulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.2; }
  50% { transform: scale(1.05) rotate(5deg); opacity: 0.3; }
}

/* SECTION 2: Journey at a Glance */
.hiw-journey {
  padding: 80px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.hiw-journey-path {
  position: relative;
  height: 100px;
  margin-bottom: 60px;
}

.journey-line {
  width: 100%;
  height: 100%;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2s ease-out forwards;
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

.journey-dots {
  position: absolute;
  inset: 0;
}

.hiw-journey-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
}

.journey-stage {
  text-align: center;
  padding: 30px 20px;
  position: relative;
  transition: transform var(--transition);
  animation: stageFloat 4s ease-in-out infinite;
}

.journey-stage:nth-child(2) { animation-delay: 0.5s; }
.journey-stage:nth-child(3) { animation-delay: 1s; }
.journey-stage:nth-child(4) { animation-delay: 1.5s; }
.journey-stage:nth-child(5) { animation-delay: 2s; }

@keyframes stageFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.journey-stage:hover {
  transform: translateY(-8px);
  animation-play-state: paused;
}

.stage-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--brand);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  font-size: 20px;
  color: var(--brand);
  box-shadow: var(--shadow-sm);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.stage-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0;
  transition: all 0.4s ease;
}

.journey-stage:hover .stage-icon {
  background: var(--brand);
  color: var(--on-strong);
  transform: scale(1.15) translateY(-4px);
  box-shadow: 0 12px 30px rgba(122, 16, 48, 0.3);
}

.journey-stage:hover .stage-icon::after {
  opacity: 0.3;
  transform: scale(1.2);
}

.journey-stage {
  animation: stageFloat 4s ease-in-out infinite;
}

.journey-stage:nth-child(2) { animation-delay: 0.5s; }
.journey-stage:nth-child(3) { animation-delay: 1s; }
.journey-stage:nth-child(4) { animation-delay: 1.5s; }
.journey-stage:nth-child(5) { animation-delay: 2s; }

@keyframes stageFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.stage-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 12px;
  font-family: 'Playfair Display', Georgia, serif;
}

.stage-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* SECTION 3: Step One - Choose Your Box */
.hiw-step-1 {
  padding: 80px 0;
  background: var(--bg-soft);
}

.hiw-step-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hiw-step-image {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-basket-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: basketFloat 6s ease-in-out infinite;
  transition: transform 0.4s ease;
}

.step-basket-image:hover {
  animation-play-state: paused;
  transform: scale(1.02);
}

@keyframes basketFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  25% { transform: translateY(-10px) rotate(-1deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
  75% { transform: translateY(-10px) rotate(1deg); }
}

.floating-ingredient {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(122, 16, 48, 0.2);
  border: 3px solid var(--surface);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  cursor: pointer;
}

.floating-ingredient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.floating-ingredient:hover {
  transform: scale(1.15) translateY(-10px) !important;
  box-shadow: 0 20px 40px rgba(122, 16, 48, 0.35);
  z-index: 20;
}

.floating-ingredient:hover img {
  transform: scale(1.1);
}

.ingredient-1 {
  top: 10%;
  right: -20px;
  animation: floatIngredient1 6s ease-in-out infinite;
}

.ingredient-2 {
  bottom: 15%;
  left: -30px;
  animation: floatIngredient2 7s ease-in-out infinite;
}

@keyframes floatIngredient1 {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  25% { transform: translateY(-15px) rotate(-4deg); }
  50% { transform: translateY(-25px) rotate(8deg); }
  75% { transform: translateY(-15px) rotate(4deg); }
}

@keyframes floatIngredient2 {
  0%, 100% { transform: translateY(0) rotate(10deg); }
  25% { transform: translateY(-18px) rotate(5deg); }
  50% { transform: translateY(-30px) rotate(-10deg); }
  75% { transform: translateY(-18px) rotate(-5deg); }
}

.hiw-step-content {
  position: relative;
}

.step-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 80px;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 20px;
  opacity: 0.3;
}

.step-heading {
  font-size: clamp(32px, 4vw, 42px);
  margin-bottom: 20px;
  color: var(--text);
}

.step-description {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 40px;
}

.box-types {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.box-type {
  position: relative;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: all var(--transition);
}

.box-type:last-child {
  border-bottom: none;
}

.box-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  transition: color var(--transition);
  position: relative;
  display: inline-block;
}

.box-type:hover .box-name {
  color: var(--brand);
}

.box-type::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand);
  transition: width 0.3s ease;
}

.box-type:hover::after {
  width: 100%;
}

.box-preview {
  position: absolute;
  right: -160px;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(122, 16, 48, 0.25);
  z-index: 10;
  border: 3px solid var(--surface);
}

.box-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.box-type:hover .box-preview {
  opacity: 1;
  visibility: visible;
  right: -180px;
  transform: translateY(-50%) scale(1.05);
}

.box-type:hover .box-preview img {
  transform: scale(1.1);
}

/* SECTION 4: Step Two - Set Your Rhythm */
.hiw-step-2 {
  padding: 80px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Add floating particles to rhythm section */
.hiw-step-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 30%, rgba(122, 16, 48, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(122, 16, 48, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.rhythm-calendar {
  position: relative;
  margin-bottom: 60px;
}

.week-days {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  margin-bottom: 40px;
}

.day-item {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--brand);
  text-align: center;
  position: relative;
}

.day-item::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 50%;
  opacity: 0.5;
}

.rhythm-curve {
  width: 100%;
  height: 200px;
  margin-bottom: 40px;
}

.rhythm-dot {
  animation: rhythmPulse 2s ease-in-out infinite;
  cursor: pointer;
  transition: fill 0.3s ease;
}

.rhythm-dot:hover {
  fill: var(--brand-strong);
  animation-play-state: paused;
}

.rhythm-dot:nth-child(2) { animation-delay: 0.5s; }
.rhythm-dot:nth-child(3) { animation-delay: 1s; }
.rhythm-dot:nth-child(4) { animation-delay: 1.5s; }

@keyframes rhythmPulse {
  0%, 100% { r: 8; opacity: 1; }
  50% { r: 14; opacity: 0.7; }
}

.rhythm-patterns {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.rhythm-pattern {
  text-align: center;
  padding: 20px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  animation: rhythmPatternFloat 5s ease-in-out infinite;
}

.rhythm-pattern:nth-child(2) { animation-delay: 1s; }
.rhythm-pattern:nth-child(3) { animation-delay: 2s; }

@keyframes rhythmPatternFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.rhythm-pattern:hover {
  border-color: var(--brand);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 30px rgba(122, 16, 48, 0.2);
  animation-play-state: paused;
}

.rhythm-pattern h4 {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 8px;
}

.rhythm-pattern p {
  font-size: 14px;
  color: var(--muted);
}

.rhythm-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.hiw-step-3 {
  padding: 80px 0;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}

.hiw-step-3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(122, 16, 48, 0.04) 0%, transparent 40%),
              radial-gradient(circle at 70% 50%, rgba(122, 16, 48, 0.04) 0%, transparent 40%);
  pointer-events: none;
}

.customize-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 40px;
}

.flow-stage {
  text-align: center;
  position: relative;
}

.flow-label {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand);
  margin-bottom: 20px;
}

.flow-image {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  position: relative;
}

.flow-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
}

.flow-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.flow-stage:hover .flow-image img {
  transform: scale(1.08);
}

.flow-stage:hover .flow-image {
  box-shadow: 0 20px 50px rgba(122, 16, 48, 0.25);
  transform: translateY(-8px);
}

.flow-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.flow-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.flow-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(122, 16, 48, 0.1), transparent);
  transition: left 0.5s ease;
}

.flow-action:hover::before {
  left: 100%;
}

.flow-action:hover {
  border-color: var(--brand);
  transform: translateX(4px);
  box-shadow: 0 8px 20px rgba(122, 16, 48, 0.15);
}

html[dir="rtl"] .flow-action:hover {
  transform: translateX(-4px);
}

.action-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-strong);
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}

.action-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.flow-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.flow-label-center {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.flow-arrows {
  display: flex;
  gap: 20px;
  font-size: 24px;
  color: var(--brand);
}

.customize-text {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

/* SECTION 6: Step Four - Delivery Day */
.hiw-step-4 {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 0;
}

.hiw-delivery-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.delivery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.delivery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(122, 16, 48, 0.5) 0%, rgba(31, 7, 13, 0.7) 100%);
  z-index: 1;
}

.hiw-delivery-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.delivery-journey {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.delivery-step {
  display: flex;
  align-items: center;
  gap: 20px;
  animation: deliveryStepFloat 3s ease-in-out infinite;
}

.delivery-step:nth-child(2) { animation-delay: 0.5s; }
.delivery-step:nth-child(3) { animation-delay: 1s; }
.delivery-step:nth-child(4) { animation-delay: 1.5s; }

@keyframes deliveryStepFloat {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

.step-label {
  font-size: 18px;
  font-weight: 800;
  color: var(--on-strong);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 24px;
  background: rgba(255, 248, 233, 0.15);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 248, 233, 0.2);
  transition: all 0.3s ease;
}

.step-label:hover {
  background: rgba(255, 248, 233, 0.25);
  transform: scale(1.05);
}

.step-arrow {
  color: var(--on-strong);
  font-size: 20px;
  opacity: 0.7;
  animation: arrowBounce 2s ease-in-out infinite;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.delivery-text {
  text-align: center;
}

/* SECTION 7: When Life Changes */
.hiw-life-changes {
  padding: 80px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.hiw-life-changes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 40% 60%, rgba(122, 16, 48, 0.04) 0%, transparent 45%),
              radial-gradient(circle at 60% 40%, rgba(122, 16, 48, 0.04) 0%, transparent 45%);
  pointer-events: none;
}

.life-changes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.life-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: lifeImageFloat 8s ease-in-out infinite;
}

.life-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
}

.life-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.life-image:hover img {
  transform: scale(1.08);
}

.life-image:hover {
  animation-play-state: paused;
  box-shadow: 0 30px 70px rgba(122, 16, 48, 0.3);
}

@keyframes lifeImageFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
}

.life-content {
  position: relative;
}

.life-heading {
  font-size: clamp(36px, 5vw, 48px);
  margin-bottom: 40px;
  color: var(--text);
  line-height: 1.2;
}

.life-actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.life-action {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  position: relative;
  transition: transform 0.3s ease;
}

.life-action:hover {
  transform: translateX(8px);
}

.action-line {
  width: 60px;
  height: 2px;
  background: var(--brand);
  position: relative;
  transition: width 0.3s ease, background 0.3s ease;
}

.action-line::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 50%;
  animation: actionDotPulse 2s ease-in-out infinite;
}

@keyframes actionDotPulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
  50% { transform: translateY(-50%) scale(1.3); opacity: 0.7; }
}

.action-text {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  transition: color var(--transition);
}

.life-action:hover .action-text {
  color: var(--brand);
}

.life-action:hover .action-line {
  width: 80px;
  background: var(--brand);
}

.life-description {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 40px;
}

/* SECTION 8: Final CTA */
.hiw-finale {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 0;
}

.hiw-finale-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.finale-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

.finale-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(122, 16, 48, 0.6) 0%, rgba(31, 7, 13, 0.8) 100%);
  z-index: 1;
}

.hiw-finale-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.finale-text {
  margin-bottom: 60px;
}

.finale-heading {
  font-size: clamp(42px, 6vw, 64px);
  color: var(--on-strong);
  margin-bottom: 24px;
  line-height: 1.1;
  font-weight: 800;
}

.finale-description {
  font-size: 18px;
  color: rgba(255, 248, 233, 0.9);
  line-height: 1.7;
  margin-bottom: 40px;
}

.finale-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.finale-btns .btn {
  background: var(--on-strong);
  color: var(--brand-strong);
  border-color: var(--on-strong);
}

.finale-btns .btn:hover {
  background: var(--bg);
  color: var(--brand-strong);
  border-color: var(--bg);
}

.finale-btns .secondary {
  background: transparent;
  color: var(--on-strong);
  border-color: var(--on-strong);
}

.finale-btns .secondary:hover {
  background: rgba(255, 248, 233, 0.15);
}

.circular-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border: 2px solid rgba(255, 248, 233, 0.2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 40px;
  color: rgba(255, 248, 233, 0.3);
  animation: circularRotate 20s linear infinite;
  z-index: 1;
}

@keyframes circularRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.finale-footer-links {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 248, 233, 0.2);
}

.finale-footer-links a {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 248, 233, 0.8);
  transition: color var(--transition);
}

.finale-footer-links a:hover {
  color: var(--on-strong);
}

/* Responsive Design for How It Works Page */
@media (max-width: 1024px) {
  .hiw-journey-stages {
    grid-template-columns: repeat(3, 1fr);
  }

  .journey-stage:nth-child(4),
  .journey-stage:nth-child(5) {
    grid-column: span 1;
  }

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

  .hiw-step-image {
    height: 350px;
  }

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

  .flow-center {
    order: -1;
  }

  .flow-arrows {
    transform: rotate(90deg);
  }

  .hiw-delivery-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .delivery-journey {
    flex-direction: column;
    align-items: center;
  }

  .life-changes-grid {
    grid-template-columns: 1fr;
  }

  .rhythm-patterns {
    flex-wrap: wrap;
  }

  .box-preview {
    display: none;
  }
}

@media (max-width: 768px) {
  .hiw-hero {
    padding: 100px 0 80px;
    min-height: 70vh;
  }
  
  .hiw-hero-number {
    font-size: 120px;
    bottom: 20px;
    right: 20px;
  }
  
  .hiw-curved-line {
    width: 150px;
    height: 150px;
    bottom: 40px;
    right: 40px;
  }
  
  .hiw-journey-stages {
    grid-template-columns: 1fr;
  }
  
  .journey-line {
    display: none;
  }
  
  .week-days {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .day-item {
    font-size: 18px;
  }
  
  .rhythm-curve {
    height: 150px;
  }
  
  .box-preview {
    display: none;
  }
  
  .flow-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .life-actions {
    gap: 16px;
  }
  
  .life-action {
    padding: 12px 0;
  }
  
  .action-text {
    font-size: 16px;
  }
  
  .finale-footer-links {
    gap: 16px;
  }
  
  .circular-arrow {
    width: 200px;
    height: 200px;
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .hiw-hero-title {
    font-size: 36px;
  }
  
  .hiw-hero-btns {
    flex-direction: column;
  }
  
  .hiw-hero-btns .btn {
    width: 100%;
    justify-content: center;
  }
  
  .stage-icon {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
  
  .step-number {
    font-size: 60px;
  }
  
  .box-types {
    gap: 12px;
  }
  
  .box-name {
    font-size: 18px;
  }
  
  .rhythm-patterns {
    flex-direction: column;
    gap: 16px;
  }
  
  .flow-image {
    height: 200px;
  }
  
  .finale-heading {
    font-size: 32px;
  }
  
  .finale-btns {
    flex-direction: column;
  }
  
  .finale-btns .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .hiw-hero-image,
  .step-basket-image,
  .floating-ingredient,
  .rhythm-dot,
  .circular-arrow,
  .journey-line,
  .hiw-curved-line {
    animation: none;
  }
  
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  
  .journey-line {
    stroke-dashoffset: 0;
  }
}

/* RTL Adjustments for How It Works Page */
html[dir="rtl"] .hiw-hero-number {
  right: auto;
  left: 60px;
}

html[dir="rtl"] .hiw-curved-line {
  right: auto;
  left: 80px;
}

html[dir="rtl"] .box-preview {
  right: auto;
  left: -180px;
}

html[dir="rtl"] .box-type:hover .box-preview {
  right: auto;
  left: -200px;
}

html[dir="rtl"] .action-line::after {
  right: auto;
  left: -4px;
}

html[dir="rtl"] .flow-arrows {
  transform: scaleX(-1);
}

html[dir="rtl"] .delivery-journey {
  flex-direction: column;
}

html[dir="rtl"] .flow-arrows {
  transform: rotate(90deg) scaleX(-1);
}

/* Dark Mode for How It Works Page */
html[data-theme="dark"] .hiw-hero-overlay {
  background: linear-gradient(135deg, rgba(200, 31, 68, 0.5) 0%, rgba(23, 10, 13, 0.8) 100%);
}

html[data-theme="dark"] .hiw-hero-eyebrow,
html[data-theme="dark"] .hiw-hero-title,
html[data-theme="dark"] .hiw-hero-text {
  color: var(--on-strong);
}

html[data-theme="dark"] .hiw-hero-btns .btn {
  background: var(--on-strong);
  color: var(--brand-strong);
}

html[data-theme="dark"] .hiw-hero-btns .secondary {
  color: var(--on-strong);
  border-color: var(--on-strong);
}

html[data-theme="dark"] .hiw-hero-number {
  color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .hiw-curved-line {
  border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .stage-icon {
  background: var(--surface);
  border-color: var(--brand);
}

html[data-theme="dark"] .stage-icon:hover {
  background: var(--brand);
  color: var(--on-strong);
}

html[data-theme="dark"] .step-basket-image {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .floating-ingredient {
  border-color: var(--surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .box-type {
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .rhythm-pattern {
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="dark"] .rhythm-pattern:hover {
  border-color: var(--brand);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .flow-action {
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="dark"] .flow-action:hover {
  border-color: var(--brand);
}

html[data-theme="dark"] .flow-image {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .delivery-overlay {
  background: linear-gradient(135deg, rgba(200, 31, 68, 0.6) 0%, rgba(23, 10, 13, 0.85) 100%);
}

html[data-theme="dark"] .step-label {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .life-image {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .action-line {
  background: var(--brand);
}

html[data-theme="dark"] .finale-overlay {
  background: linear-gradient(135deg, rgba(200, 31, 68, 0.7) 0%, rgba(23, 10, 13, 0.9) 100%);
}

html[data-theme="dark"] .finale-footer-links {
  border-top-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .finale-footer-links a {
  color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .circular-arrow {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.25);
}

/* ===================================================
   FAQ PAGE - Premium Interactive Help Center
   6 Unique Sections with Distinct Layouts & Animations
   =================================================== */

/* SECTION 1: FAQ Hero Banner - Layered Grocery Composition */
.faq-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 0 60px;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-soft) 50%, var(--bg) 100%);
}

.faq-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.faq-hero-parallax {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(122, 16, 48, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.faq-hero-overlay {
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="1" fill="%237A1030" opacity="0.08"/><circle cx="75" cy="75" r="1" fill="%237A1030" opacity="0.06"/><circle cx="50" cy="10" r="0.5" fill="%237A1030" opacity="0.1"/><circle cx="10" cy="60" r="0.8" fill="%237A1030" opacity="0.07"/><circle cx="90" cy="40" r="0.6" fill="%237A1030" opacity="0.09"/></svg>');
  background-size: 180px 180px;
  animation: heroParticleFloat 25s linear infinite;
  pointer-events: none;
}

@keyframes heroParticleFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-180px); }
}

.faq-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.faq-hero-text-wrapper {
  position: relative;
}

.faq-eyebrow {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand);
  margin-bottom: 20px;
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: eyebrowReveal 0.8s ease-out 0.3s forwards;
}

@keyframes eyebrowReveal {
  to { opacity: 1; transform: translateY(0); }
}

.faq-hero-title {
  font-size: clamp(42px, 5.5vw, 64px);
  line-height: 1.08;
  font-weight: 800;
  margin-bottom: 24px;
  color: var(--text);
  letter-spacing: -1px;
}

.faq-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotateX(90deg);
}

.faq-hero-subtitle {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 480px;
  opacity: 0;
  transform: translateY(20px);
  animation: subtitleReveal 0.8s ease-out 0.6s forwards;
}

@keyframes subtitleReveal {
  to { opacity: 1; transform: translateY(0); }
}

.faq-search-wrapper {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  animation: searchReveal 0.8s ease-out 0.9s forwards;
}

@keyframes searchReveal {
  to { opacity: 1; transform: translateY(0); }
}

.faq-search-container {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 8px 8px 8px 20px;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  max-width: 500px;
}

.faq-search-container:focus-within {
  border-color: var(--brand);
  box-shadow: 0 8px 30px rgba(122, 16, 48, 0.2);
  transform: translateY(-2px);
}

.faq-search-icon {
  font-size: 18px;
  color: var(--muted);
  margin-right: 12px;
  transition: color var(--transition);
}

.faq-search-container:focus-within .faq-search-icon {
  color: var(--brand);
}

.faq-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  font-family: inherit;
  padding: 12px 0;
}

.faq-search-input::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.faq-search-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--on-strong);
  border: none;
  display: grid;
  place-items: center;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.faq-search-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.faq-search-btn:hover::before {
  transform: translateX(100%);
}

.faq-search-btn:hover {
  background: var(--brand-strong);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 24px rgba(122, 16, 48, 0.3);
}

.faq-hero-visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-veg {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 3px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  transition: transform var(--transition);
  cursor: pointer;
}

.veg-inner {
  font-size: 32px;
  animation: vegBounce 3s ease-in-out infinite;
}

@keyframes vegBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.veg-1 {
  top: 10%;
  left: 10%;
  animation: floatVeg1 8s ease-in-out infinite;
}

.veg-2 {
  top: 50%;
  right: 15%;
  animation: floatVeg2 9s ease-in-out infinite;
}

.veg-3 {
  bottom: 15%;
  left: 30%;
  animation: floatVeg3 10s ease-in-out infinite;
}

@keyframes floatVeg1 {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-30px) rotate(10deg); }
}

@keyframes floatVeg2 {
  0%, 100% { transform: translateY(0) rotate(15deg); }
  50% { transform: translateY(-25px) rotate(-15deg); }
}

@keyframes floatVeg3 {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.floating-veg:hover {
  transform: scale(1.15) translateY(-10px) !important;
  z-index: 10;
  border-color: var(--brand);
  box-shadow: 0 12px 30px rgba(122, 16, 48, 0.25);
}

.faq-hero-deco-line {
  position: absolute;
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
}

.faq-hero-deco-circle {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid var(--brand);
  border-radius: 50%;
  top: 30%;
  right: 20%;
  opacity: 0.15;
  animation: decoCirclePulse 4s ease-in-out infinite;
}

@keyframes decoCirclePulse {
  0%, 100% { transform: scale(1); opacity: 0.15; }
  50% { transform: scale(1.05); opacity: 0.25; }
}

/* SECTION 2: FAQ Category Navigation - Editorial Timeline */
.faq-categories {
  padding: 60px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.category-nav-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.category-path-svg {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 100px;
  z-index: 0;
  pointer-events: none;
  color: var(--line);
}

.category-path-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawCategoryPath 2s ease-out forwards;
}

@keyframes drawCategoryPath {
  to { stroke-dashoffset: 0; }
}

.category-nav-strip {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 20px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-nav-strip::-webkit-scrollbar {
  display: none;
}

.category-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
  min-width: 100px;
  text-align: center;
}

.category-btn::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  transition: all 0.4s ease;
  pointer-events: none;
}

.category-btn:hover::before {
  border-color: var(--brand);
  opacity: 0.3;
}

.category-btn.active::before {
  border-color: var(--brand);
  opacity: 0.5;
}

.category-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--muted);
  transition: all var(--transition);
  position: relative;
}

.category-btn:hover .category-icon {
  border-color: var(--brand);
  color: var(--brand);
  transform: scale(1.1);
}

.category-btn.active .category-icon {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-strong);
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(122, 16, 48, 0.15);
}

.category-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  transition: all var(--transition);
}

.category-btn:hover .category-text {
  color: var(--brand);
}

.category-btn.active .category-text {
  color: var(--brand);
  font-weight: 800;
}

.category-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--brand);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.category-btn.active .category-indicator {
  width: 30px;
}

/* Desktop horizontal scroll lock */
@media (min-width: 1024px) {
  .category-nav-strip {
    overflow-x: hidden;
    justify-content: space-between;
  }
}

/* Mobile touch scroll */
@media (max-width: 1023px) {
  .category-nav-strip {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 8px;
    padding: 20px 16px;
  }
  
  .category-btn {
    min-width: 90px;
    padding: 12px 16px;
  }
  
  .category-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .category-text {
    font-size: 11px;
  }
  
  .category-path-svg {
    display: none;
  }
}

/* SECTION 3: FAQ Questions - Editorial Accordion */
.faq-questions {
  padding: 80px 0;
  background: var(--bg-soft);
  position: relative;
}

.faq-editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: start;
}

.faq-visual-panel {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.faq-number-display {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 120px;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
  opacity: 0.15;
  transition: all 0.5s ease;
}

.faq-category-label {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand);
  transition: all 0.3s ease;
}

.faq-illustration-wrapper {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-illustration {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--line);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.faq-illustration:hover {
  transform: scale(1.1) rotateY(10deg) rotateX(5deg);
  border-color: var(--brand);
  box-shadow: 0 12px 30px rgba(122, 16, 48, 0.2);
}

.illustration-veg {
  font-size: 48px;
  transition: transform 0.3s ease;
}

.faq-illustration:hover .illustration-veg {
  transform: scale(1.2) rotate(10deg);
}

.illustration-bg {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 16, 48, 0.1) 0%, transparent 70%);
  animation: illustrationPulse 3s ease-in-out infinite;
}

@keyframes illustrationPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.faq-supporting-text {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 280px;
  transition: all 0.3s ease;
}

.faq-questions-panel {
  position: relative;
}

.faq-questions-header {
  margin-bottom: 40px;
}

.faq-questions-header h2 {
  font-size: clamp(32px, 4vw, 42px);
  margin-bottom: 12px;
  color: var(--text);
}

.faq-questions-header p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid var(--line);
  transition: all var(--transition);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item.hidden {
  display: none;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
  gap: 20px;
  transition: all var(--transition);
}

.faq-q-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
  transition: color var(--transition);
}

.faq-item.active .faq-q-text {
  color: var(--brand);
}

.faq-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all var(--transition);
}

.faq-icon {
  font-size: 14px;
  color: var(--muted);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active .faq-icon-wrapper {
  background: var(--brand);
}

.faq-item.active .faq-icon {
  color: var(--on-strong);
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  opacity: 1;
}

.faq-answer-inner {
  padding: 0 0 24px;
}

.faq-answer-inner p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

.faq-item.search-error {
  animation: faqShake 0.5s ease;
}

@keyframes faqShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.no-results {
  text-align: center;
  padding: 40px 20px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.no-results h3 {
  font-size: 20px;
  color: var(--text);
  margin-bottom: 12px;
}

.no-results p {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 20px;
}

/* SECTION 4: FAQ Search Section - Immersive Search Experience */
.faq-search-section {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 100px 0;
  background: var(--brand-strong);
}

.faq-search-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.kinetic-text-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.kinetic-text {
  position: absolute;
  top: 20%;
  left: 0;
  display: flex;
  animation: kineticScroll 30s linear infinite;
  white-space: nowrap;
}

@keyframes kineticScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.kinetic-phrase {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 80px;
  font-weight: 900;
  color: rgba(255, 248, 233, 0.05);
  margin: 0 40px;
  text-transform: uppercase;
}

.blob-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 233, 0.1) 0%, transparent 70%);
  filter: blur(40px);
  animation: blobMorph 15s ease-in-out infinite;
}

.blob-1 {
  width: 400px;
  height: 400px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.blob-2 {
  width: 300px;
  height: 300px;
  bottom: 20%;
  right: 15%;
  animation-delay: 5s;
}

.blob-3 {
  width: 350px;
  height: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 10s;
}

@keyframes blobMorph {
  0%, 100% { transform: scale(1) translate(0, 0); }
  25% { transform: scale(1.1) translate(20px, -20px); }
  50% { transform: scale(0.9) translate(-20px, 20px); }
  75% { transform: scale(1.05) translate(10px, 10px); }
}

.particle-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.faq-search-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.faq-search-header h2 {
  font-size: clamp(36px, 5vw, 52px);
  color: var(--on-strong);
  margin-bottom: 16px;
  line-height: 1.1;
}

.faq-search-header p {
  font-size: 18px;
  color: rgba(255, 248, 233, 0.8);
  margin-bottom: 40px;
  line-height: 1.6;
}

.faq-search-large-wrapper {
  position: relative;
  margin-bottom: 40px;
}

.faq-search-large {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 248, 233, 0.1);
  border: 2px solid rgba(255, 248, 233, 0.2);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  backdrop-filter: blur(10px);
  transition: all var(--transition);
}

.faq-search-large:focus-within {
  border-color: rgba(255, 248, 233, 0.4);
  background: rgba(255, 248, 233, 0.15);
  box-shadow: 0 0 30px rgba(255, 248, 233, 0.1);
}

.faq-search-large-icon {
  font-size: 20px;
  color: rgba(255, 248, 233, 0.6);
  margin-right: 16px;
}

.faq-search-large-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  color: var(--on-strong);
  outline: none;
  font-family: inherit;
  padding: 12px 0;
}

.faq-search-large-input::placeholder {
  color: rgba(255, 248, 233, 0.5);
}

.faq-search-large-btn {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--on-strong);
  color: var(--brand-strong);
  border: none;
  display: grid;
  place-items: center;
  font-size: 18px;
  cursor: pointer;
  transition: all var(--transition);
}

.faq-search-large-btn:hover {
  background: var(--bg);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 24px rgba(255, 248, 233, 0.2);
}

.faq-stat-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
}

.stat-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 64px;
  font-weight: 900;
  color: var(--on-strong);
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 248, 233, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.faq-keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.keyword-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 248, 233, 0.1);
  border: 1px solid rgba(255, 248, 233, 0.2);
  border-radius: var(--radius-pill);
  color: var(--on-strong);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  backdrop-filter: blur(5px);
}

.keyword-btn:hover {
  background: rgba(255, 248, 233, 0.2);
  border-color: rgba(255, 248, 233, 0.4);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 248, 233, 0.15);
}

.keyword-icon {
  font-size: 18px;
}

.faq-journey {
  padding: 100px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.journey-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.journey-visual-side {
  position: relative;
  height: 600px;
}

.journey-sticky-wrapper {
  position: sticky;
  top: 100px;
  height: 100%;
}

.journey-box-visual {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-box-main {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.box-3d-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: boxRotate3D 20s linear infinite;
}

@keyframes boxRotate3D {
  0% { transform: rotateX(-20deg) rotateY(0deg); }
  100% { transform: rotateX(-20deg) rotateY(360deg); }
}

.box-face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: var(--surface);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  backface-visibility: visible;
  transition: all 0.5s ease;
}

.box-front {
  transform: translateZ(100px);
  background: var(--brand);
  color: var(--on-strong);
}

.box-back {
  transform: rotateY(180deg) translateZ(100px);
}

.box-right {
  transform: rotateY(90deg) translateZ(100px);
}

.box-left {
  transform: rotateY(-90deg) translateZ(100px);
}

.box-top {
  transform: rotateX(90deg) translateZ(100px);
}

.box-bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

.box-front-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.box-emoji {
  font-size: 48px;
}

.box-label {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.box-stripe {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 4px;
  background: rgba(255, 248, 233, 0.3);
  border-radius: 2px;
}

.journey-svg-path {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.journey-line-draw {
  stroke: var(--brand);
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0.3;
}

.journey-content-side {
  position: relative;
}

.journey-stages {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 40px 0;
}

.journey-stage {
  position: relative;
  padding-left: 60px;
  opacity: 0.3;
  transform: translateX(-20px);
  transition: all 0.5s ease;
}

.journey-stage.active {
  opacity: 1;
  transform: translateX(0);
}

.stage-number {
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 48px;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
  opacity: 0.3;
  transition: all 0.3s ease;
}

.journey-stage.active .stage-number {
  opacity: 0.6;
  transform: scale(1.1);
}

.stage-content h3 {
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--text);
  transition: color 0.3s ease;
}

.journey-stage.active .stage-content h3 {
  color: var(--brand);
}

.stage-content p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
}

/* SECTION 6: FAQ CTA - Premium Support Section (redesigned) */
.faq-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: var(--bg-soft);
}

.faq-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;
  pointer-events: none;
  overflow: hidden;
}

.faq-cta-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.28;
  animation: ctaBlobDrift 12s ease-in-out infinite;
}

.faq-cta-blob.blob-a {
  width: 420px;
  height: 420px;
  background: var(--brand);
  top: -160px;
  left: -140px;
}

.faq-cta-blob.blob-b {
  width: 340px;
  height: 340px;
  background: #C89543;
  bottom: -150px;
  right: -120px;
  animation-delay: -6s;
}

@keyframes ctaBlobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.08); }
}

.faq-cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
}

/* ---------- Text column ---------- */
.faq-cta-text {
  text-align: left;
}

.faq-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 20px;
}

.faq-cta-eyebrow i {
  font-size: 13px;
}

.faq-cta-heading {
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.08;
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--text);
}

.cta-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

.faq-cta-subtitle {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 460px;
}

.faq-cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.faq-cta-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-cta-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.faq-cta-meta-item i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-size: 12px;
}

/* Scroll-reveal (JS toggles .in) */
.faq-cta-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-cta-reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.faq-cta-text > .faq-cta-reveal:nth-child(1) { transition-delay: 0s; }
.faq-cta-text > .faq-cta-reveal:nth-child(2) { transition-delay: 0.05s; }
.faq-cta-buttons.faq-cta-reveal { transition-delay: 0.15s; }
.faq-cta-meta.faq-cta-reveal { transition-delay: 0.25s; }

/* ---------- Visual column ---------- */
.faq-cta-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-delay: 0.1s;
}

.cta-package-visual {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.package-container {
  position: relative;
  width: 220px;
  height: 220px;
  z-index: 2;
}

.package-box {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: packageFloat 6s ease-in-out infinite;
}

@keyframes packageFloat {
  0%, 100% { transform: translateY(0) rotateY(-10deg); }
  50% { transform: translateY(-20px) rotateY(10deg); }
}

.package-front {
  position: absolute;
  inset: 0;
  background: var(--brand);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateZ(50px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.package-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--on-strong);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.package-stripe {
  width: 80%;
  height: 8px;
  background: rgba(255, 248, 233, 0.3);
  border-radius: 4px;
}

.package-open {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, var(--brand) 0%, rgba(122, 16, 48, 0.8) 100%);
  transform-origin: top;
  transform: rotateX(-30deg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  animation: packageOpen 4s ease-in-out infinite;
}

@keyframes packageOpen {
  0%, 100% { transform: rotateX(-30deg); }
  50% { transform: rotateX(-50deg); }
}

.cta-floating-items {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.floating-item {
  position: absolute;
  font-size: 30px;
  animation: itemFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 8px 14px rgba(31, 7, 13, 0.18));
}

.item-1 { top: 4%; left: 4%; animation-delay: 0s; }
.item-2 { top: 12%; right: 2%; animation-delay: 1s; }
.item-3 { bottom: 16%; left: 0%; animation-delay: 2s; }
.item-4 { bottom: 2%; right: 8%; animation-delay: 3s; }

@keyframes itemFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(10deg); }
}

.cta-support-visual {
  position: absolute;
  bottom: -6px;
  right: 6%;
  z-index: 4;
}

.support-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brand);
  display: grid;
  place-items: center;
  font-size: 28px;
  color: var(--brand);
  box-shadow: var(--shadow);
  animation: supportPulse 3s ease-in-out infinite;
}

@keyframes supportPulse {
  0%, 100% { transform: scale(1); box-shadow: var(--shadow); }
  50% { transform: scale(1.1); box-shadow: 0 12px 30px rgba(122, 16, 48, 0.3); }
}

.cta-connection-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  z-index: 1;
}

.connection-line {
  stroke: var(--brand);
  stroke-width: 1;
  fill: none;
}

/* ---------- Buttons ---------- */
.faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 800;
  border: 2px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.faq-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.faq-cta-btn:hover::before {
  transform: translateX(100%);
}

.faq-cta-btn.primary {
  background: var(--brand-strong);
  color: var(--on-strong);
  border-color: var(--brand-strong);
  box-shadow: var(--shadow);
}

.faq-cta-btn.primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(122, 16, 48, 0.3);
}

.faq-cta-btn.secondary {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}

.faq-cta-btn.secondary:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  transform: translateY(-4px);
}

.faq-cta-btn i {
  transition: transform 0.3s ease;
}

.faq-cta-btn:hover i {
  transform: translateX(4px);
}

html[dir="rtl"] .faq-cta-btn:hover i {
  transform: translateX(-4px);
}

html[dir="rtl"] .faq-cta-text {
  text-align: right;
}

/* Responsive Design for FAQ Page */
@media (max-width: 1023px) {
  .faq-hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .faq-hero-text-wrapper {
    order: 2;
  }
  
  .faq-hero-visual {
    order: 1;
    height: 300px;
  }
  
  .faq-search-container {
    margin: 0 auto;
  }
  
  .faq-hero-subtitle {
    margin-inline: auto;
  }
  
  .faq-editorial-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .faq-visual-panel {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
  }
  
  .faq-number-display {
    font-size: 80px;
  }
  
  .faq-illustration-wrapper {
    height: 120px;
  }
  
  .faq-illustration {
    width: 80px;
    height: 80px;
  }
  
  .illustration-veg {
    font-size: 32px;
  }
  
  .faq-supporting-text {
    display: none;
  }
  
  .journey-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .journey-visual-side {
    height: 300px;
    order: -1;
  }
  
  .journey-box-main {
    width: 150px;
    height: 150px;
  }
  
  .box-face {
    width: 150px;
    height: 150px;
  }
  
  .box-front {
    transform: translateZ(75px);
  }
  
  .box-back {
    transform: rotateY(180deg) translateZ(75px);
  }
  
  .box-right {
    transform: rotateY(90deg) translateZ(75px);
  }
  
  .box-left {
    transform: rotateY(-90deg) translateZ(75px);
  }
  
  .box-top {
    transform: rotateX(90deg) translateZ(75px);
  }
  
  .box-bottom {
    transform: rotateX(-90deg) translateZ(75px);
  }
  
  .journey-stages {
    gap: 40px;
  }
  
  .faq-cta-inner {
    grid-template-columns: 1fr;
    gap: 56px;
    text-align: center;
  }
  
  .faq-cta-text {
    text-align: center;
    order: 1;
  }
  
  .faq-cta-subtitle {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  
  .faq-cta-buttons {
    justify-content: center;
  }
  
  .faq-cta-meta {
    align-items: center;
  }
  
  .faq-cta-visual {
    order: 0;
  }
  
  .package-container {
    width: 200px;
    height: 200px;
  }
  
  .faq-cta-buttons {
    flex-direction: column;
  }
  
  .faq-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .faq-hero {
    min-height: 50vh;
    padding: 60px 0 40px;
  }
  
  .faq-hero-title {
    font-size: 32px;
  }
  
  .faq-hero-subtitle {
    font-size: 16px;
  }
  
  .floating-veg {
    width: 60px;
    height: 60px;
  }
  
  .veg-inner {
    font-size: 24px;
  }
  
  .faq-visual-panel {
    flex-direction: column;
  }
  
  .faq-number-display {
    font-size: 60px;
  }
  
  .faq-questions-header h2 {
    font-size: 28px;
  }
  
  .faq-q-text {
    font-size: 16px;
  }
  
  .faq-answer-inner p {
    font-size: 15px;
  }
  
  .kinetic-phrase {
    font-size: 48px;
  }
  
  .faq-search-header h2 {
    font-size: 28px;
  }
  
  .stat-number {
    font-size: 48px;
  }
  
  .keyword-cloud {
    gap: 8px;
  }
  
  .keyword-btn {
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .journey-stage {
    padding-left: 50px;
  }
  
  .stage-number {
    font-size: 36px;
  }
  
  .stage-content h3 {
    font-size: 22px;
  }
  
  .faq-cta {
    padding: 80px 0;
  }
  
  .faq-cta-heading {
    font-size: 32px;
  }
  
  .cta-package-visual {
    max-width: 260px;
  }
  
  .package-container {
    width: 160px;
    height: 160px;
  }
  
  .support-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
}

/* RTL Support for FAQ Page */
html[dir="rtl"] .faq-hero-content {
  direction: rtl;
}

html[dir="rtl"] .faq-search-container {
  padding: 8px 20px 8px 8px;
}

html[dir="rtl"] .faq-search-icon {
  margin-right: 0;
  margin-left: 12px;
}

html[dir="rtl"] .category-nav-strip {
  direction: rtl;
}

html[dir="rtl"] .faq-editorial-grid {
  direction: rtl;
}

html[dir="rtl"] .faq-visual-panel {
  order: 2;
}

html[dir="rtl"] .faq-questions-panel {
  order: 1;
}

html[dir="rtl"] .faq-question {
  direction: rtl;
}

html[dir="rtl"] .journey-container {
  direction: rtl;
}

html[dir="rtl"] .journey-visual-side {
  order: 2;
}

html[dir="rtl"] .journey-content-side {
  order: 1;
}

html[dir="rtl"] .journey-stage {
  padding-left: 0;
  padding-right: 60px;
}

html[dir="rtl"] .stage-number {
  left: auto;
  right: 0;
}

html[dir="rtl"] .kinetic-text {
  direction: rtl;
}

/* Dark Mode for FAQ Page */
html[data-theme="dark"] .faq-hero {
  background: linear-gradient(135deg, #1a0a0d 0%, #2d151a 50%, #1a0a0d 100%);
}

html[data-theme="dark"] .faq-hero-overlay {
  opacity: 0.5;
}

html[data-theme="dark"] .faq-search-container {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .faq-search-container:focus-within {
  border-color: var(--brand);
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .faq-search-input {
  color: var(--on-strong);
}

html[data-theme="dark"] .faq-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .floating-veg {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .category-path-svg {
  color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .category-icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .category-icon {
  color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .category-text {
  color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .faq-questions {
  background: #1a0a0d;
}

html[data-theme="dark"] .faq-illustration {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .faq-q-text {
  color: var(--on-strong);
}

html[data-theme="dark"] .faq-answer-inner p {
  color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .faq-search-section {
  background: #0d0507;
}

html[data-theme="dark"] .kinetic-phrase {
  color: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .blob {
  background: radial-gradient(circle, rgba(122, 16, 48, 0.15) 0%, transparent 70%);
}

html[data-theme="dark"] .faq-search-large {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .faq-search-large:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .faq-search-large-icon {
  color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .faq-search-large-input {
  color: var(--on-strong);
}

html[data-theme="dark"] .faq-search-large-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

html[data-theme="dark"] .faq-search-large-btn {
  background: var(--on-strong);
}

html[data-theme="dark"] .keyword-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .keyword-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .faq-journey {
  background: #1a0a0d;
}

html[data-theme="dark"] .box-face {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .box-front {
  background: var(--brand);
}

html[data-theme="dark"] .journey-line-draw {
  stroke: var(--brand);
  opacity: 0.5;
}

html[data-theme="dark"] .stage-content h3 {
  color: var(--on-strong);
}

html[data-theme="dark"] .stage-content p {
  color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .faq-cta {
  background: #1a0a0d;
}

html[data-theme="dark"] .package-front {
  background: var(--brand);
}

html[data-theme="dark"] .support-icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--brand);
}

html[data-theme="dark"] .connection-line {
  stroke: var(--brand);
}

html[data-theme="dark"] .faq-cta-heading {
  color: var(--on-strong);
}

html[data-theme="dark"] .faq-cta-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .faq-cta-eyebrow {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .faq-cta-meta-item {
  color: var(--on-strong);
}

html[data-theme="dark"] .faq-cta-meta-item i {
  background: rgba(255, 255, 255, 0.08);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .faq-hero-overlay,
  .kinetic-text,
  .blob,
  .floating-veg,
  .faq-illustration,
  .package-box,
  .package-open,
  .support-icon,
  .floating-item,
  .faq-cta-blob,
  .box-3d-container,
  .illustration-bg,
  .deco-circle-pulse,
  .hero-particle-float,
  .category-path-line,
  .journey-line-draw {
    animation: none;
  }
  
  .faq-char,
  .cta-char,
  .faq-cta-reveal {
    opacity: 1;
    transform: none;
  }
  
  .faq-eyebrow,
  .faq-hero-subtitle,
  .faq-search-wrapper {
    opacity: 1;
    transform: none;
  }
  
  .faq-item {
    transition: none;
  }
  
  .faq-answer {
    transition: none;
  }
  
  .faq-item.active .faq-answer {
    max-height: none;
  }
}

/* Add placeholder backgrounds for visual elements */
.hero-main-box, .floating-produce, .category-image, .testimonial-image, .testimonial-card-header img, .cta-visual {
  position: relative;
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%);
}

.hero-main-box::after {
  content: '📦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  opacity: 0.3;
  z-index: 1;
}

.floating-produce::after {
  content: '🥬';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  opacity: 0.4;
  z-index: 1;
}

.category-image::after {
  content: '🥗';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  opacity: 0.4;
  z-index: 1;
}

.testimonial-image::after, .testimonial-card-header img::after {
  content: '👤';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  opacity: 0.4;
  z-index: 1;
}

.cta-visual::after {
  content: '🌱';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  opacity: 0.3;
  z-index: 1;
}

.hero-main-box img, .floating-produce img, .category-image img, .testimonial-image img, .testimonial-card-header img, .cta-visual img {
  position: relative;
  z-index: 2;
}

/* Responsive Design for Plans Page */
@media (max-width: 1023px) {
  .plans-hero {
    min-height: 50vh;
    padding: 60px 0 80px;
  }

  .plans-hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hero-grocery-composition {
    height: 400px;
  }

  .hero-main-box {
    width: 300px;
    height: 360px;
  }

  .produce-1 {
    width: 100px;
    height: 100px;
  }

  .produce-2 {
    width: 90px;
    height: 90px;
  }

  .produce-3 {
    width: 80px;
    height: 80px;
  }

  .box-display-stage {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .box-visual-wrapper {
    height: 280px;
  }

  .plans-comparison-stage {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .plan-crate-1, .plan-crate-2, .plan-crate-3 {
    height: auto;
    min-height: auto;
  }

  .basket-composition-stage {
    height: auto;
    padding: 40px 0;
  }

  .central-basket {
    width: 240px;
    height: 280px;
    margin: 0 auto 30px;
  }

  .category-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .category-node {
    width: 100%;
    margin: 0 auto 20px;
  }

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

  .path-svg {
    display: none;
  }

  .testimonial-featured {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .testimonial-image {
    margin: 0 auto 20px;
  }

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

  .cta-premium-block {
    grid-template-columns: 1fr;
  }

  .cta-visual {
    min-height: 250px;
  }

  .cta-content {
    padding: 30px;
  }

  .box-timeline {
    flex-wrap: wrap;
    gap: 16px;
  }

  .box-timeline::before {
    display: none;
  }

  .timeline-item {
    flex: 1 1 calc(50% - 8px);
    min-width: 120px;
  }
}

@media (max-width: 767px) {
  .plans-hero h1 {
    font-size: 36px;
  }

  .hero-lead {
    font-size: 16px;
  }

  .box-specs-grid {
    grid-template-columns: 1fr;
  }

  .hero-btns, .cta-buttons {
    flex-direction: column;
  }

  .hero-btns .btn, .cta-buttons .btn {
    width: 100%;
  }

  .path-walker {
    display: none;
  }

  .testimonial-content blockquote {
    font-size: 16px;
  }

  .cta-content h2 {
    font-size: 28px;
  }
}

/* ===================================================
   Responsive Breakpoints
   - Large Devices (>=1024px) = Full Desktop View
   - Tablet & Mobile (<=1023px) = Mobile Controls & Fullscreen Menu
   - Mobile (320px - 767px) = Compact elements, zero clipping
   =================================================== */

/* Large Devices (1024px - 1280px): content-grid density tweak, and the
   nav below is trimmed down (spacing/sizes only, still full desktop links)
   just enough to keep everything on one line without wrapping/overflow. */
@media (min-width: 1024px) and (max-width: 1280px) {
  .plans-editorial-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* Laptop-compact nav (1024px - 1279px): the full desktop menu + actions
   cluster doesn't fit at 1024px at full desktop sizing, so trim spacing/
   sizes here just enough to keep everything on one line without overflow. */
@media (min-width: 1024px) and (max-width: 1279px) {
  header .nav.container {
    padding-inline: 16px;
    gap: 8px;
  }

  .desktop {
    gap: 0;
  }

  .navlink,
  .dropbtn {
    padding: 8px 8px;
    font-size: 13.5px;
  }

  .actions {
    gap: 6px;
  }

  .icon {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .login {
    padding: 8px 12px;
    font-size: 13px;
  }

  .subscribe {
    padding: 8px 14px;
    font-size: 13px;
  }
}

@media (max-width: 1023px) {
  .desktop,
  .actions {
    display: none !important;
  }

  .mobile-controls {
    display: flex;
  }

  .nav {
    min-height: 72px;
    padding-block: 12px;
  }

  .hero-editorial-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 45px;
  }

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

  .hero-btns {
    justify-content: center;
  }

  .hero-perks {
    justify-content: center;
  }

  .polaroid-stage {
    order: -1;
  }

  .arch-showcase-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .arch-overlap-card {
    inset-inline-end: 10px;
    bottom: -15px;
  }

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

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

  .number-card {
    border-bottom: 1px solid var(--line);
  }

  .number-card:nth-child(2) {
    border-inline-end: none;
  }

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

  .bento-editorial {
    grid-template-columns: repeat(6, 1fr);
  }

  .bento-card-1 { grid-column: span 6; grid-row: span 2; }
  .bento-card-2 { grid-column: span 3; grid-row: span 2; }
  .bento-card-3 { grid-column: span 3; grid-row: span 2; }
  .bento-card-4 { grid-column: span 3; grid-row: span 2; }
  .bento-card-5 { grid-column: span 3; grid-row: span 2; }
  .bento-card-6 { grid-column: span 3; grid-row: span 1; }
  .bento-card-7 { grid-column: span 3; grid-row: span 1; }

  .story-editorial-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

/* Mobile Screens (320px - 767px, per spec) */
@media (max-width: 767px) {
  .container {
    width: calc(100% - 24px);
  }

  .nav {
    min-height: 68px;
    gap: 8px;
    padding-block: 10px;
  }

  .brand {
    font-size: 16px;
    gap: 8px;
  }

  .brand i,
  .brand-icon {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .mobile-controls {
    gap: 5px;
  }

  .mobile-controls .icon {
    width: 35px;
    height: 35px;
    font-size: 13px;
  }

  section {
    padding: 65px 0;
  }

  .hero {
    min-height: auto;
    padding: 24px 0 50px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .polaroid-stack {
    width: 100%;
    height: 340px;
  }

  .polaroid-1 {
    width: 200px;
    top: 5px;
  }

  .polaroid-2 {
    width: 210px;
    top: 30px;
    inset-inline-end: 0;
  }

  .polaroid-3 {
    width: 220px;
    bottom: 5px;
    inset-inline-start: 20px;
  }

  .hero-float-badge {
    padding: 10px 16px;
    font-size: 15px;
  }

  .arch-frame {
    border-radius: 120px 120px 20px 20px;
  }

  .arch-overlap-card {
    position: static;
    margin-top: 16px;
    width: 100%;
  }

  .plans-editorial-grid {
    grid-template-columns: 1fr;
  }

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

  .number-card {
    border-inline-end: none;
    padding: 30px 20px;
  }

  .stats-delicate-grid {
    grid-template-columns: 1fr;
  }

  .bento-editorial {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 110px;
  }

  .bento-card-1 { grid-column: span 2; grid-row: span 2; }
  .bento-card-2 { grid-column: span 1; grid-row: span 1; }
  .bento-card-3 { grid-column: span 1; grid-row: span 1; }
  .bento-card-4 { grid-column: span 1; grid-row: span 1; }
  .bento-card-5 { grid-column: span 1; grid-row: span 1; }
  .bento-card-6 { grid-column: span 1; grid-row: span 1; }
  .bento-card-7 { grid-column: span 1; grid-row: span 1; }

  .cta-editorial-box {
    padding: 44px 18px;
  }

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

  .foot-bottom {
    flex-direction: column;
    text-align: center;
  }

  .foot-legal {
    justify-content: center;
  }

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

  .foot-newsletter {
    max-width: 100%;
  }
}

/* ===================================================
   FreshRhythm - Home Page 2 (Pantry Edition) Custom Layouts
   Directly Inspired by User Uploaded Reference Templates
   =================================================== */

/* 1. Hero: Split Contrast Block (Inspired by Template 5 & 2) */
.hero-split-contrast {
  min-height: calc(100vh - 82px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 40px 0 70px;
}

.hero-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.hero-split-left {
  position: relative;
  z-index: 2;
}

.hero-split-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-wine-frame {
  position: relative;
  background: var(--brand-strong);
  padding: 32px;
  border-radius: 44px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
}

.hero-centerpiece-img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 28px;
  border: 3px solid rgba(255, 248, 233, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
  display: block;
}

.hero-floating-snapshot {
  position: absolute;
  bottom: -18px;
  inset-inline-start: -24px;
  background: #FFFFFF;
  padding: 10px 10px 22px 10px;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  transform: rotate(-6deg);
  border: 1px solid var(--polaroid-border);
  transition: transform var(--transition);
  z-index: 4;
}

.hero-floating-snapshot:hover {
  transform: rotate(0deg) scale(1.05);
}

.hero-floating-snapshot img {
  width: 130px;
  height: 110px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.hero-floating-snapshot span {
  display: block;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  margin-top: 6px;
  color: var(--brand-strong);
  font-family: 'Playfair Display', serif;
}

/* 2. The Iconic Moodboard & Member Passport (Inspired by Template 1 & 4) */
.moodboard-canvas {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 44px;
  padding: 44px;
  margin: 30px 0;
  box-shadow: var(--shadow-sm);
}

.moodboard-top-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 32px;
}

.moodboard-top-block h2.moodboard-title {
  font-size: clamp(38px, 4.5vw, 56px);
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1.05;
  color: var(--brand-strong);
  margin: 0;
}

.moodboard-manifesto {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.moodboard-manifesto p:not(:last-child) {
  margin-bottom: 14px;
}

.moodboard-banner-photo {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 28px;
  display: block;
  margin-bottom: 32px;
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
}

.moodboard-bottom-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: stretch;
}

.moodboard-inset-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.moodboard-inset-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 22px;
  margin-bottom: 18px;
}

.moodboard-thumbnail-strip {
  display: flex;
  align-items: center;
  gap: 14px;
}

.moodboard-thumb-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: 0 4px 10px rgba(31, 7, 13, 0.12);
  transition: transform var(--transition);
}

.moodboard-thumb-circle:hover {
  transform: scale(1.15);
}

.moodboard-thumb-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-strong);
  line-height: 1.3;
}

/* Passport Widget (Dark Wine Member Card from Template 1 & 4) */
.passport-widget {
  background: var(--brand-strong);
  color: #FFF8E9;
  border-radius: 32px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.passport-widget::after {
  content: "";
  position: absolute;
  top: -30px;
  inset-inline-end: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 248, 233, 0.05);
  pointer-events: none;
}

.passport-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.passport-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.passport-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: #FFF8E9;
  margin: 0 0 6px;
}

.passport-body p {
  color: rgba(255, 248, 233, 0.75);
  font-size: 15px;
  margin: 0 0 20px;
}

.passport-stats-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 248, 233, 0.15);
  border-bottom: 1px solid rgba(255, 248, 233, 0.15);
  margin-bottom: 20px;
}

.passport-stat-item strong {
  display: block;
  font-size: 20px;
  color: #FFF8E9;
}

.passport-stat-item span {
  font-size: 15px;
  color: rgba(255, 248, 233, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.passport-actions {
  display: flex;
  gap: 10px;
}

.passport-btn {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255, 248, 233, 0.15);
  color: #FFF8E9;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: background var(--transition);
}

.passport-btn:hover {
  background: rgba(255, 248, 233, 0.3);
}

.passport-btn.primary {
  background: var(--bg);
  color: var(--brand-strong);
}

.passport-btn.primary:hover {
  background: #FFFFFF;
}

/* 3. Four-Corner Floating Polaroids Section (Directly from Template 2) */
.polaroid-corner-canvas {
  background: var(--brand);
  color: #FFF8E9;
  border-radius: 40px;
  position: relative;
  overflow: hidden;
  padding: 100px 30px;
  text-align: center;
  margin: 40px 0;
  box-shadow: var(--shadow);
}

.polaroid-corner-center {
  position: relative;
  z-index: 5;
  max-width: 520px;
  margin: 0 auto;
}

.polaroid-corner-canvas .section-tag {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 248, 233, 0.85);
  margin-bottom: 20px;
}

.polaroid-corner-canvas h2 {
  font-size: clamp(38px, 5.5vw, 64px);
  font-family: 'Playfair Display', serif;
  color: #FFF8E9;
  line-height: 1.08;
  margin: 0 auto 24px;
}

.polaroid-corner-canvas h2 span.script-accent {
  font-style: italic;
  font-weight: 400;
  display: block;
}

.polaroid-corner-canvas p {
  color: rgba(255, 248, 233, 0.8);
  font-size: 16.5px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.btn-pill-cream {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFF8E9;
  color: var(--brand-strong);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  transition: transform var(--transition), box-shadow var(--transition);
}

.btn-pill-cream:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
  color: var(--brand);
}

/* 4 Corner Polaroids */
.corner-polaroids-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.corner-polaroid {
  position: absolute;
  background: #FFFFFF;
  padding: 10px 10px 26px 10px;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  z-index: 2;
  width: 170px;
  text-align: center;
  pointer-events: auto;
}

.corner-polaroid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

.corner-polaroid span {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: #1F070D;
  margin-top: 8px;
}

.corner-polaroid-tl {
  top: 40px;
  inset-inline-start: 45px;
  transform: rotate(-7deg);
  animation: floatCornerTL 6s ease-in-out infinite;
}

.corner-polaroid-tr {
  top: 45px;
  inset-inline-end: 45px;
  transform: rotate(6deg);
  animation: floatCornerTR 7s ease-in-out infinite 0.8s;
}

.corner-polaroid-bl {
  bottom: 40px;
  inset-inline-start: 50px;
  transform: rotate(-5deg);
  animation: floatCornerBL 6.5s ease-in-out infinite 1.4s;
}

.corner-polaroid-br {
  bottom: 45px;
  inset-inline-end: 50px;
  transform: rotate(7deg);
  animation: floatCornerBR 7.5s ease-in-out infinite 2s;
}

.corner-polaroid:hover {
  transform: scale(1.12) rotate(0deg) !important;
  z-index: 10;
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.5);
}

@keyframes floatCornerTL {
  0%, 100% { transform: translateY(0) rotate(-7deg); }
  50% { transform: translateY(-10px) rotate(-5deg); }
}

@keyframes floatCornerTR {
  0%, 100% { transform: translateY(0) rotate(6deg); }
  50% { transform: translateY(-12px) rotate(8deg); }
}

@keyframes floatCornerBL {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-8px) rotate(-3deg); }
}

@keyframes floatCornerBR {
  0%, 100% { transform: translateY(0) rotate(7deg); }
  50% { transform: translateY(-11px) rotate(5deg); }
}

/* 4. Curated Pantry Collections (Asymmetric Arch Silhouettes) */
.arch-pantry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

.arch-pantry-card {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.arch-pantry-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.arch-silhouette-1 {
  border-radius: 160px 160px 24px 24px;
}

.arch-silhouette-2 {
  border-radius: 28px 28px 160px 160px;
}

.arch-silhouette-3 {
  border-radius: 120px 28px 120px 28px;
}

.arch-pantry-photo {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.arch-pantry-content {
  padding: 26px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.arch-pantry-tag {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--brand);
  background: var(--bg-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
  align-self: flex-start;
}

.arch-pantry-content h3 {
  font-size: 20px;
  margin: 0 0 8px;
}

.arch-pantry-content p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 16px;
}

.arch-pantry-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.arch-pantry-price {
  font-size: 14px;
  color: var(--muted);
}

.arch-pantry-price strong {
  font-size: 19px;
  color: var(--brand-strong);
}

/* 5. Typographic #01-#04 Transparency & FAQ (Inspired by Template 3 - Top) */
.faq-typographic-section {
  padding: 70px 0;
}

.faq-typographic-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.faq-typographic-sidebar h2 {
  font-size: clamp(36px, 4.2vw, 54px);
  font-family: 'Playfair Display', serif;
  line-height: 1.08;
  color: var(--brand-strong);
  margin-bottom: 24px;
}

.faq-typographic-photo {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}

.faq-hairline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.faq-hairline-item {
  padding: 24px 20px;
  border-bottom: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  transition: background var(--transition);
}

.faq-hairline-item:nth-child(2n) {
  border-inline-end: none;
}

.faq-hairline-item:hover {
  background: var(--bg-soft);
}

.faq-num-tag {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 8px;
}

.faq-hairline-item h3 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--text);
}

.faq-hairline-item p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* 6. Atmospheric Canvas + Centered Frosted Overlay (Inspired by Template 3 - Center) */
.frosted-stage-section {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  margin: 40px 0;
  padding: 100px 24px;
  background: linear-gradient(rgba(36, 17, 24, 0.72), rgba(36, 17, 24, 0.72)), url('../images/why-groceries.jpg') center/cover no-repeat;
  box-shadow: var(--shadow);
}

.frosted-overlay-card {
  position: relative;
  z-index: 2;
  max-width: 580px;
  margin: 0 auto;
  background: rgba(255, 248, 233, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 36px;
  padding: 48px 36px;
  text-align: center;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
}

.frosted-nested-photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 20px;
  border: 4px solid #FFF8E9;
  box-shadow: var(--shadow-sm);
  margin: 0 auto 22px;
  display: block;
}

.frosted-eyebrow {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}

.frosted-overlay-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 3.8vw, 42px);
  line-height: 1.15;
  color: var(--brand-strong);
  margin: 0 0 16px;
}

.frosted-overlay-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 440px;
  margin: 0 auto 26px;
}

/* 7. Zero-Waste Refill Journey (Fluid Timeline Flow) */
.refill-journey-section {
  padding: 70px 0;
}

.refill-flow-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin: 40px 0;
}

.refill-flow-step {
  position: relative;
  text-align: center;
  padding: 28px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.refill-flow-step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.refill-step-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-strong);
  color: #FFF8E9;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  margin: 0 auto 16px;
}

.refill-flow-step h3 {
  font-size: 17px;
  margin: 0 0 8px;
}

.refill-flow-step p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.refill-metrics-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 28px;
  text-align: center;
  margin-top: 30px;
}

.refill-metric-val {
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  font-weight: 800;
  color: var(--brand-strong);
}

.refill-metric-lbl {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 4px;
}

/* 8. Velvet Wine Photo Ribbon & Finale CTA (Template 3 Bottom & Template 4) */
.photo-ribbon-section {
  background: var(--brand-strong);
  color: #FFF8E9;
  border-radius: 40px;
  padding: 70px 28px;
  margin: 40px 0;
  text-align: center;
  box-shadow: var(--shadow);
}

.ribbon-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 248, 233, 0.15);
  padding-bottom: 24px;
  margin-bottom: 36px;
}

.ribbon-brand-mark {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFF8E9;
}

.ribbon-socials {
  display: flex;
  gap: 14px;
}

.ribbon-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 248, 233, 0.12);
  color: #FFF8E9;
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: background var(--transition);
}

.ribbon-socials a:hover {
  background: #FFF8E9;
  color: var(--brand-strong);
}

.ribbon-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.ribbon-strip-item {
  border-radius: 20px;
  overflow: hidden;
  height: 160px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition);
}

.ribbon-strip-item:hover {
  transform: scale(1.06);
}

.ribbon-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-ribbon-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.8vw, 56px);
  color: #FFF8E9;
  margin: 0 0 16px;
  line-height: 1.1;
}

.photo-ribbon-section p {
  color: rgba(255, 248, 233, 0.8);
  font-size: 17px;
  max-width: 580px;
  margin: 0 auto 30px;
  line-height: 1.6;
}

.photo-ribbon-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ===================================================
   Home Page 2 Responsive Rules (Tablets & 320px Mobile)
   =================================================== */
@media (max-width: 1099px) {
  .polaroid-corner-canvas {
    padding: 60px 24px;
  }

  .corner-polaroids-group {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 36px;
  }

  .corner-polaroid {
    position: static;
    width: 100%;
    margin: 0 auto;
  }

  .corner-polaroid img {
    height: 120px;
  }

  .corner-polaroid-tl { transform: rotate(-3deg); animation: none; }
  .corner-polaroid-tr { transform: rotate(3deg); animation: none; }
  .corner-polaroid-bl { transform: rotate(-2deg); animation: none; }
  .corner-polaroid-br { transform: rotate(3deg); animation: none; }
}

@media (max-width: 1023px) {
  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .hero-split-left .hero-lead {
    margin-inline: auto;
  }

  .hero-btns,
  .hero-perks {
    justify-content: center;
  }

  .hero-centerpiece-img {
    height: 380px;
  }

  .moodboard-top-block {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .moodboard-bottom-split {
    grid-template-columns: 1fr;
  }

  .corner-polaroids-group {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .arch-pantry-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .faq-typographic-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .faq-typographic-photo {
    height: 260px;
  }

  .refill-flow-track {
    grid-template-columns: 1fr 1fr;
  }

  .ribbon-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .ribbon-strip-item:nth-child(n+4) {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero-split-contrast {
    padding: 20px 0 40px;
  }

  .hero-wine-frame {
    padding: 18px;
    border-radius: 28px;
  }

  .hero-centerpiece-img {
    height: 300px;
    border-radius: 20px;
  }

  .hero-floating-snapshot {
    display: none;
  }

  .moodboard-canvas {
    padding: 24px 18px;
    border-radius: 28px;
  }

  .moodboard-banner-photo {
    height: 200px;
    border-radius: 20px;
  }

  .moodboard-inset-card {
    padding: 16px;
    border-radius: 22px;
  }

  .passport-widget {
    padding: 20px;
    border-radius: 24px;
  }

  .passport-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .passport-brand {
    font-size: 13px;
  }

  .passport-head .plan-tag {
    white-space: nowrap;
    font-size: 13px;
  }

  .passport-stats-row {
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .passport-stat-item {
    flex: 1 1 auto;
    min-width: 0;
  }

  .passport-stat-item span {
    font-size: 13px;
    letter-spacing: 0.2px;
  }

  .moodboard-thumbnail-strip {
    flex-wrap: wrap;
  }

  .moodboard-thumb-label {
    flex-basis: 100%;
    margin-top: 8px;
  }

  .polaroid-corner-canvas {
    padding: 44px 16px;
    border-radius: 28px;
  }

  .corner-polaroids-group {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .corner-polaroid {
    padding: 8px 8px 18px 8px;
  }

  .corner-polaroid img {
    height: 100px;
  }

  .faq-hairline-grid {
    grid-template-columns: 1fr;
  }

  .faq-hairline-item {
    border-inline-end: none;
  }

  .frosted-stage-section {
    padding: 50px 14px;
    border-radius: 26px;
  }

  .frosted-overlay-card {
    padding: 30px 18px;
    border-radius: 24px;
  }

  .refill-flow-track {
    grid-template-columns: 1fr;
  }

  .refill-metrics-banner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .photo-ribbon-section {
    padding: 44px 16px;
    border-radius: 26px;
  }

  .ribbon-head {
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
  }

  .ribbon-brand-mark {
    font-size: 19px;
    letter-spacing: 1px;
  }

  .ribbon-socials {
    flex-wrap: wrap;
    gap: 10px;
  }

  .ribbon-socials a {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .photo-ribbon-btns .btn,
  .photo-ribbon-btns .btn-pill-cream {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

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

  .ribbon-strip-item:nth-child(n+3) {
    display: none;
  }
}

/* ===================================================
   FreshRhythm - About Us Page Custom Layouts & Animations
   Directly Inspired by User Uploaded Reference Templates
   =================================================== */

/* 1. Hero: Asymmetric Split with 3 Cascading Polaroids (Template 2) */
/* Full-Width Panoramic Banner Hero */
.about-banner-section {
  position: relative;
  height: 50vh;
  min-height: 480px;
  max-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 48px 0;
}

.about-banner-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.about-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: bannerSlowZoom 16s ease-in-out infinite alternate;
}

@keyframes bannerSlowZoom {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.1) translateY(-1.5%); }
}

.about-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 7, 13, 0.5) 0%, rgba(31, 7, 13, 0.7) 62%, rgba(31, 7, 13, 0.9) 100%);
}

/* Slow drifting warm glow for a living, non-static backdrop */
.about-banner-glow {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(38% 45% at 18% 25%, rgba(240, 200, 105, 0.20), transparent 70%),
    radial-gradient(32% 40% at 82% 78%, rgba(122, 16, 48, 0.35), transparent 70%);
  animation: bannerGlowDrift 12s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

@keyframes bannerGlowDrift {
  0%   { transform: translate(-3%, -2%) scale(1); opacity: 0.75; }
  100% { transform: translate(3%, 2%) scale(1.08); opacity: 1; }
}

/* Floating ambient particles drifting upward through the banner */
.about-banner-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.about-banner-particles .particle {
  position: absolute;
  bottom: -40px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(240, 200, 105, 0.55);
  box-shadow: 0 0 10px 2px rgba(240, 200, 105, 0.35);
  animation: particleFloat linear infinite;
}

.particle.p1 { left: 8%;  width: 5px;  height: 5px;  animation-duration: 11s; animation-delay: 0s; }
.particle.p2 { left: 24%; width: 8px;  height: 8px;  animation-duration: 15s; animation-delay: 2s; opacity: 0.7; }
.particle.p3 { left: 47%; width: 4px;  height: 4px;  animation-duration: 9s;  animation-delay: 4s; }
.particle.p4 { left: 68%; width: 6px;  height: 6px;  animation-duration: 13s; animation-delay: 1s; }
.particle.p5 { left: 88%; width: 5px;  height: 5px;  animation-duration: 17s; animation-delay: 3s; }

@keyframes particleFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(-160px) translateX(12px); }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-320px) translateX(-8px); opacity: 0; }
}

.about-banner-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.about-banner-content h1 {
  font-size: clamp(36px, 4.6vw, 56px);
  letter-spacing: -1.2px;
  line-height: 1.08;
  margin-bottom: 18px;
  color: var(--on-strong);
}

.about-banner-content h1 span.italic-accent {
  position: relative;
  font-style: italic;
  color: #F0C869;
  white-space: nowrap;
}

/* Underline that draws itself in after the headline reveals */
.about-banner-content h1 span.italic-accent i {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(240, 200, 105, 0), #F0C869 55%, rgba(240, 200, 105, 0));
  transform: scaleX(0);
  transform-origin: left;
  animation: underlineDraw 0.9s 1.05s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes underlineDraw {
  to { transform: scaleX(1); }
}

.about-banner-content .hero-lead {
  color: rgba(255, 248, 233, 0.86);
  max-width: 560px;
}

.about-banner-content .hero-perks {
  border-top-color: rgba(255, 248, 233, 0.25);
}

.about-banner-content .hero-perk-item {
  color: var(--on-strong);
  transition: transform 0.25s ease;
}

.about-banner-content .hero-perk-item:hover {
  transform: translateY(-2px);
}

.about-banner-content .hero-perk-item i {
  color: #F0C869;
  animation: perkPulse 2.4s ease-in-out infinite;
}

.about-banner-content .hero-perk-item:nth-child(2) i { animation-delay: 0.25s; }
.about-banner-content .hero-perk-item:nth-child(3) i { animation-delay: 0.5s; }

@keyframes perkPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.75; }
}

.about-banner-content .secondary {
  color: var(--on-strong);
  border-color: rgba(255, 248, 233, 0.65);
}

.about-banner-content .secondary:hover {
  background: color-mix(in srgb, var(--on-strong) 15%, transparent);
  border-color: var(--on-strong);
}

.about-banner-content .primary {
  position: relative;
  overflow: hidden;
}

.about-banner-content .primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
}

.about-banner-content .primary:hover::after {
  transform: translateX(120%);
  transition: transform 0.7s ease;
}

/* Scroll cue at the base of the compact banner */
.about-banner-scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 248, 233, 0.75);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
}

.about-banner-scroll-cue i {
  animation: scrollCueBounce 1.8s ease-in-out infinite;
}

.about-banner-scroll-cue:hover {
  color: var(--on-strong);
}

@keyframes scrollCueBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .about-banner-media img,
  .about-banner-glow,
  .about-banner-particles .particle,
  .about-banner-content h1 span.italic-accent i,
  .about-banner-content .hero-perk-item i,
  .about-banner-scroll-cue i {
    animation: none;
  }
}

/* ===================================================
   Plans Page: Full-Width Panoramic Banner Hero
   (Same photo-banner treatment as About Us, with plans-
   specific content: cadence rotator instead of an underline,
   different copy, different backdrop image.)
   =================================================== */
.plans-banner-section {
  position: relative;
  height: 50vh;
  min-height: 480px;
  max-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 48px 0;
}

.plans-banner-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.plans-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: bannerSlowZoom 16s ease-in-out infinite alternate;
}

.plans-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 7, 13, 0.55) 0%, rgba(31, 7, 13, 0.74) 62%, rgba(31, 7, 13, 0.92) 100%);
}

.plans-banner-glow {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(38% 45% at 82% 22%, rgba(240, 200, 105, 0.20), transparent 70%),
    radial-gradient(32% 40% at 15% 80%, rgba(122, 16, 48, 0.35), transparent 70%);
  animation: bannerGlowDrift 12s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.plans-banner-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.plans-banner-particles .particle {
  position: absolute;
  bottom: -40px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(240, 200, 105, 0.55);
  box-shadow: 0 0 10px 2px rgba(240, 200, 105, 0.35);
  animation: particleFloat linear infinite;
}

.plans-banner-particles .particle.p1 { left: 10%; width: 5px; height: 5px; animation-duration: 12s; animation-delay: 0.5s; }
.plans-banner-particles .particle.p2 { left: 30%; width: 8px; height: 8px; animation-duration: 16s; animation-delay: 2.5s; opacity: 0.7; }
.plans-banner-particles .particle.p3 { left: 52%; width: 4px; height: 4px; animation-duration: 10s; animation-delay: 4.5s; }
.plans-banner-particles .particle.p4 { left: 72%; width: 6px; height: 6px; animation-duration: 14s; animation-delay: 1.5s; }
.plans-banner-particles .particle.p5 { left: 90%; width: 5px; height: 5px; animation-duration: 18s; animation-delay: 3.5s; }

.plans-banner-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.plans-banner-content h1 {
  font-size: clamp(36px, 4.6vw, 56px);
  letter-spacing: -1.2px;
  line-height: 1.08;
  margin-bottom: 18px;
  color: var(--on-strong);
}

.plans-banner-content h1 span.italic-accent {
  position: relative;
  font-style: italic;
  color: #F0C869;
  white-space: nowrap;
}

.plans-banner-content h1 span.italic-accent i {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(240, 200, 105, 0), #F0C869 55%, rgba(240, 200, 105, 0));
  transform: scaleX(0);
  transform-origin: left;
  animation: underlineDraw 0.9s 1.05s cubic-bezier(.4, 0, .2, 1) forwards;
}

.plans-banner-content .hero-lead {
  color: rgba(255, 248, 233, 0.86);
  max-width: 560px;
}

/* Delivery cadence chip with a pure-CSS rotating word */
.plans-banner-cadence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 22px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 248, 233, 0.1);
  border: 1px solid rgba(255, 248, 233, 0.28);
  color: rgba(255, 248, 233, 0.8);
  font-size: 14px;
  font-weight: 700;
}

.cadence-rotator {
  position: relative;
  display: inline-block;
  height: 1.3em;
  min-width: 92px;
  vertical-align: bottom;
  text-align: left;
}

.cadence-rotator span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  color: #F0C869;
  opacity: 0;
  transform: translateY(6px);
  animation: cadenceFade 8s infinite;
}

.cadence-rotator span:nth-child(1) { animation-delay: 0s; }
.cadence-rotator span:nth-child(2) { animation-delay: 2s; }
.cadence-rotator span:nth-child(3) { animation-delay: 4s; }
.cadence-rotator span:nth-child(4) { animation-delay: 6s; }

@keyframes cadenceFade {
  0%, 3%   { opacity: 0; transform: translateY(6px); }
  8%, 19%  { opacity: 1; transform: translateY(0); }
  25%, 100% { opacity: 0; transform: translateY(-6px); }
}

.plans-banner-content .hero-perks {
  border-top-color: rgba(255, 248, 233, 0.25);
}

.plans-banner-content .hero-perk-item {
  color: var(--on-strong);
  transition: transform 0.25s ease;
}

.plans-banner-content .hero-perk-item:hover {
  transform: translateY(-2px);
}

.plans-banner-content .hero-perk-item i {
  color: #F0C869;
  animation: perkPulse 2.4s ease-in-out infinite;
}

.plans-banner-content .hero-perk-item:nth-child(2) i { animation-delay: 0.25s; }
.plans-banner-content .hero-perk-item:nth-child(3) i { animation-delay: 0.5s; }

.plans-banner-content .secondary {
  color: var(--on-strong);
  border-color: rgba(255, 248, 233, 0.65);
}

.plans-banner-content .secondary:hover {
  background: color-mix(in srgb, var(--on-strong) 15%, transparent);
  border-color: var(--on-strong);
}

.plans-banner-content .primary {
  position: relative;
  overflow: hidden;
}

.plans-banner-content .primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
}

.plans-banner-content .primary:hover::after {
  transform: translateX(120%);
  transition: transform 0.7s ease;
}

.plans-banner-scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 248, 233, 0.75);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
}

.plans-banner-scroll-cue i {
  animation: scrollCueBounce 1.8s ease-in-out infinite;
}

.plans-banner-scroll-cue:hover {
  color: var(--on-strong);
}

@media (max-width: 1023px) {
  .plans-banner-content {
    text-align: center;
    margin-inline: auto;
  }

  .plans-banner-content .hero-lead {
    margin-inline: auto;
  }

  .plans-banner-cadence {
    margin-inline: auto;
  }

  .plans-banner-content .hero-btns,
  .plans-banner-content .hero-perks {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .plans-banner-section {
    height: auto;
    min-height: 60vh;
    padding: 60px 0 44px;
  }

  .plans-banner-content .hero-perks {
    gap: 14px;
  }

  .plans-banner-scroll-cue {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plans-banner-media img,
  .plans-banner-glow,
  .plans-banner-particles .particle,
  .plans-banner-content h1 span.italic-accent i,
  .plans-banner-content .hero-perk-item i,
  .plans-banner-scroll-cue i,
  .cadence-rotator span {
    animation: none;
  }

  .cadence-rotator span:first-child {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Arched Manifesto & 3 Gold-Bordered Pillars (Template 1) */
.arched-manifesto-card {
  background: var(--bg-soft);
  border-radius: 44px;
  padding: 48px;
  margin: 30px 0;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.manifesto-top-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 44px;
}

.manifesto-arch-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 180px 180px 24px 24px;
  box-shadow: var(--shadow);
  border: 4px solid var(--surface);
  display: block;
}

.manifesto-text-content h2 {
  font-size: clamp(34px, 4.2vw, 48px);
  margin: 12px 0 20px;
  line-height: 1.12;
}

.manifesto-text-content p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

.manifesto-quote-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
}

.pillar-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.pillar-card-gold {
  background: var(--surface);
  border: 1.5px solid #C5A059;
  border-radius: 28px;
  padding: 30px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pillar-card-gold:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(197, 160, 89, 0.25);
  border-color: var(--brand);
}

.pillar-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(197, 160, 89, 0.15);
  color: #8C6D23;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 18px;
}

.pillar-card-gold h3 {
  font-size: 20px;
  margin: 0 0 10px;
}

.pillar-card-gold p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ===================================================
   MANIFESTO SECTION — SCROLL ANIMATION SUPPORT
   Purely additive: initial/hover states for the GSAP
   animation added in index.js. Does not change any
   existing layout, spacing, color, or typography above.
   =================================================== */
#manifesto .arched-manifesto-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#manifesto .arched-manifesto-card::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 20%, rgba(197, 160, 89, 0.10), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(122, 16, 48, 0.07), transparent 50%);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translateY(var(--mf-bg-y, 0px));
}
#manifesto .manifesto-top-split,
#manifesto .pillar-grid-3 {
  position: relative;
  z-index: 1;
}
#manifesto .manifesto-arch-img {
  will-change: transform, filter, clip-path;
}

/* Heading word-mask spans (injected by JS at runtime) */
#manifesto .mf-h-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
#manifesto .mf-h-word-inner {
  display: inline-block;
  will-change: transform;
}

/* Quote pill light sweep (sweep span injected by JS) */
#manifesto .manifesto-quote-pill {
  position: relative;
  overflow: hidden;
}
#manifesto .manifesto-quote-pill .mf-pill-sweep {
  position: absolute;
  top: 0;
  left: -140%;
  width: 55%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.6), transparent);
  pointer-events: none;
}

/* Pillar card hover — additive icon motion + soft glow (existing hover kept as-is) */
#manifesto .pillar-card-icon {
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
#manifesto .pillar-card-gold:hover .pillar-card-icon {
  transform: scale(1.15) rotate(8deg);
}
#manifesto .pillar-card-gold {
  position: relative;
}
#manifesto .pillar-card-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 rgba(197, 160, 89, 0);
  transition: box-shadow .4s ease;
  pointer-events: none;
}
#manifesto .pillar-card-gold:hover::after {
  box-shadow: 0 0 34px rgba(197, 160, 89, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  #manifesto .mf-h-word-inner { transform: none !important; }
}

/* 3. Split-Tone Founder's Story (Template 3) */
.split-tone-section {
  margin: 40px 0;
  border-radius: 44px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.split-tone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.split-dark-block {
  background: var(--brand-strong);
  color: #FFF8E9;
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.split-dark-block h2 {
  color: #FFF8E9;
  font-size: clamp(34px, 4.2vw, 48px);
  margin: 14px 0 20px;
  line-height: 1.1;
}

.split-dark-block h2 span.italic-accent {
  font-style: italic;
  font-weight: 400;
  color: #E85C78;
}

.split-dark-block p {
  color: rgba(255, 248, 233, 0.85);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.split-light-block {
  padding: 56px 44px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.split-light-block h3 {
  font-size: 28px;
  margin: 0 0 14px;
  line-height: 1.2;
}

.split-light-block p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 22px;
}

.founder-signature-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.founder-avatar-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg-soft);
}

.founder-signature-name {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-strong);
}

.founder-signature-role {
  font-size: 15px;
  color: var(--muted);
}

/* 4. The Grower Collective Moodboard & Passport (Template 4) */
.grower-moodboard {
  background: var(--bg-soft);
  border-radius: 44px;
  padding: 44px;
  margin: 30px 0;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.grower-banner-wrapper {
  position: relative;
  margin-bottom: 32px;
}

.grower-banner-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 30px;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-sm);
  display: block;
}

.grower-float-badge {
  position: absolute;
  bottom: 20px;
  inset-inline-end: 20px;
  background: rgba(31, 7, 13, 0.85);
  color: #FFF8E9;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 800;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 248, 233, 0.3);
  box-shadow: var(--shadow);
}

.grower-circle-thumb {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: 0 4px 12px rgba(31, 7, 13, 0.15);
  transition: transform var(--transition);
}

.grower-circle-thumb:hover {
  transform: scale(1.18);
}

/* 5. Typographic #01-#04 Sustainability Hairline Grid */
.sustainability-hairline-section {
  padding: 70px 0;
}

.sustainability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sustainability-item {
  padding: 36px 24px;
  border-inline-end: 1px solid var(--line);
  transition: background var(--transition);
}

.sustainability-item:last-child {
  border-inline-end: none;
}

.sustainability-item:hover {
  background: var(--bg-soft);
}

.sustainability-num {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-style: italic;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 12px;
}

.sustainability-item h3 {
  font-size: 18px;
  margin: 0 0 10px;
}

.sustainability-item p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* 6. Connected Milestone Timeline (2021-2026) */
.milestone-timeline-section {
  padding: 70px 0;
}

.milestone-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 40px 0;
  position: relative;
}

.milestone-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.milestone-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.milestone-year-badge {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
  background: var(--bg-soft);
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
  align-self: center;
}

.milestone-card h3 {
  font-size: 17px;
  margin: 0 0 8px;
}

.milestone-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* 7. Community Finale Ribbon CTA */
.about-finale-section {
  background: var(--brand-strong);
  color: #FFF8E9;
  border-radius: 40px;
  padding: 70px 28px;
  margin: 40px 0;
  text-align: center;
  box-shadow: var(--shadow);
}

.about-finale-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.8vw, 56px);
  color: #FFF8E9;
  margin: 0 0 16px;
  line-height: 1.1;
}

.about-finale-section p {
  color: rgba(255, 248, 233, 0.8);
  font-size: 17px;
  max-width: 600px;
  margin: 0 auto 30px;
  line-height: 1.6;
}

/* ===================================================
   About Us Responsive Rules (Tablets & 320px Mobile)
   =================================================== */
@media (max-width: 1023px) {
  .about-banner-content {
    text-align: center;
    margin-inline: auto;
  }

  .about-banner-content .hero-lead {
    margin-inline: auto;
  }

  .about-banner-content .hero-btns,
  .about-banner-content .hero-perks {
    justify-content: center;
  }

  .manifesto-top-split {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .manifesto-arch-img {
    height: 300px;
    margin: 0 auto;
  }

  .pillar-grid-3 {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .split-tone-grid {
    grid-template-columns: 1fr;
  }

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

  .sustainability-item:nth-child(2n) {
    border-inline-end: none;
  }

  .sustainability-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .milestone-track {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .about-banner-section {
    height: auto;
    min-height: 60vh;
    padding: 60px 0 44px;
  }

  .about-banner-content .hero-perks {
    gap: 14px;
  }

  .about-banner-scroll-cue {
    display: none;
  }

  .arched-manifesto-card {
    padding: 24px 18px;
    border-radius: 28px;
  }

  .manifesto-arch-img {
    height: 240px;
    border-radius: 120px 120px 20px 20px;
  }

  .split-dark-block,
  .split-light-block {
    padding: 32px 20px;
  }

  .grower-moodboard {
    padding: 24px 18px;
    border-radius: 28px;
  }

  .grower-banner-img {
    height: 200px;
    border-radius: 20px;
  }

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

  .sustainability-item {
    border-inline-end: none;
    border-bottom: 1px solid var(--line);
    padding: 24px 16px;
  }

  .milestone-track {
    grid-template-columns: 1fr;
  }

  .about-finale-section {
    padding: 44px 16px;
    border-radius: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================
   FRESHRHYTHM HOW-IT-WORKS — VISUAL REFINEMENT OVERRIDES
   Scoped to .page-how-it-works so other pages remain untouched.
   ========================================================== */

.page-how-it-works {
  --hiw-cream: #fff8e9;
  --hiw-cream-2: #f5ead4;
  --hiw-ink: #2a1015;
  --hiw-brand: #7a1030;
  --hiw-gold: #c89543;
  --hiw-green: #536f52;
}

/* ---------- Section 1: true full-view hero ---------- */
.page-how-it-works .hiw-hero {
  min-height: calc(100svh - 82px);
  height: max(680px, calc(100svh - 82px));
  padding: 0;
  display: flex;
  align-items: stretch;
  isolation: isolate;
  background: #eadcc5;
}

.page-how-it-works .hiw-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.page-how-it-works .hiw-hero-image {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.08) contrast(.98);
  transform: scale(1.05);
  animation: hiwHeroDrift 12s ease-in-out infinite alternate;
  will-change: transform;
}

.page-how-it-works .hiw-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,248,233,.97) 0%, rgba(255,248,233,.88) 30%, rgba(255,248,233,.34) 54%, rgba(31,7,13,.05) 76%, rgba(31,7,13,.12) 100%);
  z-index: 1;
}

.page-how-it-works .hiw-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 71% 22%, rgba(255,255,255,.4) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 75%, rgba(122,16,48,.16) 0 2px, transparent 3px);
  background-size: 180px 180px, 240px 240px, 210px 210px;
  animation: hiwParticleDrift 16s linear infinite;
  pointer-events: none;
}

.page-how-it-works .hiw-hero-content {
  width: min(1200px, calc(100% - 48px));
  min-height: 100%;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  padding-block: clamp(70px, 9vh, 110px);
}

.page-how-it-works .hiw-hero-copy {
  width: min(700px, 64%);
  position: relative;
  z-index: 7;
}

.page-how-it-works .hiw-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2.6px;
}

.page-how-it-works .eyebrow-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 7px rgba(122,16,48,.10);
  animation: hiwPulse 2s ease-in-out infinite;
}

.page-how-it-works .hiw-hero-title {
  max-width: 720px;
  font-size: clamp(48px, 6vw, 86px);
  line-height: .98;
  letter-spacing: -2.4px;
  color: var(--text);
  margin-bottom: 25px;
  text-wrap: balance;
}

.page-how-it-works .hiw-hero-title span {
  color: var(--brand);
  display: inline-block;
  position: relative;
}

.page-how-it-works .hiw-hero-title span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 10%;
  bottom: -7px;
  height: 3px;
  background: var(--brand);
  transform-origin: left;
  animation: hiwUnderline 3.5s ease-in-out infinite;
}

.page-how-it-works .hiw-hero-text {
  max-width: 610px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.75;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 30px;
}

.page-how-it-works .hiw-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.page-how-it-works .hiw-hero-btns .btn {
  min-height: 52px;
}

.page-how-it-works .hiw-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 30px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.page-how-it-works .hiw-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-how-it-works .hiw-hero-meta i {
  color: var(--brand);
}

.page-how-it-works .hiw-hero-number {
  right: 12px;
  bottom: 28px;
  font-size: clamp(140px, 18vw, 250px);
  line-height: .72;
  color: rgba(122,16,48,.10);
  z-index: 3;
  pointer-events: none;
}

.page-how-it-works .hiw-curved-line {
  right: 6%;
  bottom: 14%;
  width: clamp(180px, 20vw, 300px);
  height: clamp(180px, 20vw, 300px);
  border: 1px solid rgba(122,16,48,.25);
  z-index: 3;
}

.page-how-it-works .hiw-hero-route {
  position: absolute;
  width: 42vw;
  max-width: 620px;
  height: 180px;
  right: 8%;
  top: 48%;
  border-top: 1px solid rgba(122,16,48,.34);
  border-radius: 50%;
  transform: rotate(-11deg);
  z-index: 3;
  pointer-events: none;
}

.page-how-it-works .hiw-hero-route::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  right: 12%;
  top: -6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 8px rgba(122,16,48,.10);
  animation: hiwRouteDot 4s ease-in-out infinite;
}

.page-how-it-works .hiw-hero-orb {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  filter: blur(.2px);
}

.page-how-it-works .orb-one {
  width: 180px;
  height: 180px;
  right: 18%;
  top: 11%;
  border: 1px solid rgba(255,255,255,.55);
  animation: hiwOrb 9s ease-in-out infinite;
}

.page-how-it-works .orb-two {
  width: 90px;
  height: 90px;
  right: 7%;
  bottom: 12%;
  border: 1px solid rgba(122,16,48,.25);
  animation: hiwOrb 7s ease-in-out infinite reverse;
}

.page-how-it-works .hiw-hero-leaf {
  position: absolute;
  z-index: 4;
  color: rgba(83,111,82,.7);
  font-size: 28px;
  pointer-events: none;
  animation: hiwLeafFloat 5s ease-in-out infinite;
}

.page-how-it-works .leaf-one { right: 43%; top: 18%; transform: rotate(-25deg); }
.page-how-it-works .leaf-two { right: 11%; bottom: 28%; transform: rotate(25deg); animation-delay: 1.2s; }

.page-how-it-works .hiw-hero-spark,
.page-how-it-works .visual-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 8px rgba(122,16,48,.08);
  animation: hiwSpark 2.6s ease-in-out infinite;
  pointer-events: none;
}

.page-how-it-works .spark-one { right: 34%; top: 29%; }
.page-how-it-works .spark-two { right: 17%; top: 67%; animation-delay: .9s; }

.page-how-it-works .hiw-hero-scroll-line {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 22px;
  width: 1px;
  height: 45px;
  background: rgba(122,16,48,.25);
  overflow: hidden;
}

.page-how-it-works .hiw-hero-scroll-line span {
  display: block;
  width: 100%;
  height: 50%;
  background: var(--brand);
  animation: hiwScrollLine 1.8s ease-in-out infinite;
}

/* ---------- Section 2: cleaner journey ---------- */
.page-how-it-works .hiw-journey {
  padding: clamp(60px, 8vw, 100px) 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(122,16,48,.06), transparent 30%),
    var(--bg);
}

.page-how-it-works .hiw-journey-stages {
  gap: 8px;
}

.page-how-it-works .journey-stage {
  padding: 20px 14px;
}

.page-how-it-works .stage-icon {
  background: transparent;
  box-shadow: none;
}

.page-how-it-works .journey-stage:hover .stage-icon {
  background: var(--brand);
}

/* ---------- Section 3: interactive box selector ---------- */
.page-how-it-works .hiw-step-1 {
  padding: clamp(72px, 8vw, 110px) 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(200,149,67,.10), transparent 28%),
    radial-gradient(circle at 85% 70%, rgba(83,111,82,.09), transparent 30%),
    var(--bg-soft);
  overflow: hidden;
}

.page-how-it-works .hiw-box-choice {
  display: grid;
  grid-template-columns: minmax(320px,.85fr) minmax(420px,1.15fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: center;
}

.page-how-it-works .hiw-box-copy {
  position: relative;
  z-index: 5;
}

.page-how-it-works .hiw-kicker {
  margin: -8px 0 18px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
}

.page-how-it-works .hiw-box-copy .step-number {
  margin-bottom: 6px;
  font-size: clamp(72px, 8vw, 110px);
  opacity: .22;
}

.page-how-it-works .hiw-box-copy .step-heading {
  max-width: 520px;
}

.page-how-it-works .hiw-box-copy .step-description {
  max-width: 560px;
  margin-bottom: 25px;
}

.page-how-it-works .box-types {
  gap: 0;
  margin: 0 0 28px;
}

.page-how-it-works .box-type {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  background: transparent;
  color: var(--text);
  text-align: start;
  cursor: pointer;
  border-radius: 0;
}

.page-how-it-works .box-type:last-child {
  border-bottom: 0;
}

.page-how-it-works .box-type:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 5px;
}

.page-how-it-works .box-index {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
  opacity: .7;
}

.page-how-it-works .box-name {
  font-size: clamp(18px, 2vw, 24px);
  color: var(--text);
  letter-spacing: .3px;
  transition: transform .35s ease, color .35s ease;
}

.page-how-it-works .box-arrow {
  color: var(--brand);
  opacity: .35;
  transition: transform .35s ease, opacity .35s ease;
}

.page-how-it-works .box-type::after {
  height: 3px;
  bottom: -1px;
  left: 0;
  right: auto;
  width: 0;
}

.page-how-it-works .box-type:hover .box-name,
.page-how-it-works .box-type.active .box-name {
  color: var(--brand);
  transform: translateX(6px);
}

.page-how-it-works .box-type:hover .box-arrow,
.page-how-it-works .box-type.active .box-arrow {
  opacity: 1;
  transform: translateX(5px);
}

.page-how-it-works .hiw-box-visual {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.page-how-it-works .hiw-box-image-frame {
  position: relative;
  z-index: 4;
  width: min(100%, 610px);
  height: clamp(360px, 42vw, 540px);
  overflow: hidden;
  border-radius: 48% 52% 45% 55% / 42% 40% 60% 58%;
  box-shadow: 0 28px 70px rgba(31,7,13,.20);
  transform: rotate(1deg);
  transition: border-radius .8s ease, transform .6s cubic-bezier(.16,1,.3,1);
}

.page-how-it-works .hiw-box-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.20), transparent 35%, rgba(122,16,48,.10));
  pointer-events: none;
}

.page-how-it-works #hiwBoxVisual {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  transition: opacity .25s ease, transform .7s cubic-bezier(.16,1,.3,1);
}

.page-how-it-works .hiw-box-visual:hover .hiw-box-image-frame {
  transform: rotate(-1deg) scale(1.018);
  border-radius: 52% 48% 55% 45% / 38% 48% 52% 62%;
}

.page-how-it-works .visual-ring {
  position: absolute;
  border: 1px solid rgba(122,16,48,.22);
  border-radius: 50%;
  pointer-events: none;
}

.page-how-it-works .ring-a {
  width: 92%;
  height: 92%;
  animation: hiwRing 18s linear infinite;
}

.page-how-it-works .ring-b {
  width: 72%;
  height: 72%;
  border-color: rgba(83,111,82,.25);
  animation: hiwRing 13s linear infinite reverse;
}

.page-how-it-works .visual-glow {
  position: absolute;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,149,67,.18), transparent 68%);
  filter: blur(12px);
  animation: hiwGlow 5s ease-in-out infinite;
}

.page-how-it-works .hiw-box-caption {
  position: absolute;
  z-index: 6;
  left: 4%;
  bottom: 5%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--on-strong);
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
  pointer-events: none;
}

.page-how-it-works .hiw-box-caption span:first-child {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
}

.page-how-it-works .hiw-box-caption span:last-child {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.page-how-it-works .hiw-box-note {
  position: absolute;
  z-index: 7;
  right: 0;
  top: 12%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 1px;
}

.page-how-it-works .hiw-box-note i {
  color: var(--brand);
  font-size: 18px;
}

.page-how-it-works .visual-spark {
  z-index: 8;
}

.page-how-it-works .spark-a { top: 18%; left: 7%; }
.page-how-it-works .spark-b { bottom: 17%; right: 10%; animation-delay: 1s; }

/* ---------- Section 5: fix the 4-item grid wrap ---------- */
.page-how-it-works .hiw-step-3 {
  padding: clamp(72px, 8vw, 110px) 0;
  background:
    radial-gradient(circle at 25% 45%, rgba(200,149,67,.10), transparent 26%),
    radial-gradient(circle at 78% 55%, rgba(83,111,82,.10), transparent 28%),
    var(--bg-soft);
}

.page-how-it-works .customize-flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(135px,180px) minmax(120px,160px) minmax(0,1fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: center;
  margin-bottom: 52px;
}

.page-how-it-works .flow-stage {
  min-width: 0;
}

.page-how-it-works .flow-image {
  height: clamp(260px, 25vw, 340px);
  border-radius: 45% 55% 50% 50% / 52% 42% 58% 48%;
  box-shadow: 0 24px 55px rgba(31,7,13,.15);
  transform: rotate(-1.2deg);
}

.page-how-it-works .flow-end .flow-image {
  border-radius: 55% 45% 42% 58% / 44% 54% 46% 56%;
  transform: rotate(1.2deg);
}

.page-how-it-works .flow-stage:hover .flow-image {
  transform: translateY(-9px) rotate(0deg) scale(1.015);
}

.page-how-it-works .flow-label {
  letter-spacing: 2px;
  margin-bottom: 13px;
}

.page-how-it-works .flow-actions {
  gap: 9px;
  align-items: stretch;
}

.page-how-it-works .flow-action {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 9px 0;
  box-shadow: none;
  color: var(--text);
  overflow: visible;
}

.page-how-it-works .flow-action::before {
  display: none;
}

.page-how-it-works .flow-action:hover {
  border: 0;
  box-shadow: none;
  transform: translateX(6px);
}

.page-how-it-works .action-icon {
  width: 34px;
  height: 34px;
}

.page-how-it-works .flow-center {
  gap: 12px;
  position: relative;
}

.page-how-it-works .flow-label-center {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  letter-spacing: 2px;
}

.page-how-it-works .flow-arrows {
  font-size: 26px;
  gap: 15px;
  animation: hiwArrowPulse 2.2s ease-in-out infinite;
}

.page-how-it-works .customize-text {
  max-width: 760px;
}

.page-how-it-works .customize-text .step-number {
  margin-bottom: 8px;
}

/* ---------- Section 4 rhythm: no cards ---------- */
.page-how-it-works .rhythm-patterns {
  gap: clamp(24px, 5vw, 70px);
}

.page-how-it-works .rhythm-pattern {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 4px;
  box-shadow: none;
  border-bottom: 2px solid var(--line);
}

.page-how-it-works .rhythm-pattern:hover {
  border-color: var(--brand);
  box-shadow: none;
  transform: translateY(-5px);
}

/* ---------- Section 6 delivery: lighter and more editorial ---------- */
.page-how-it-works .hiw-step-4 {
  min-height: 68vh;
  padding: 90px 0;
}

.page-how-it-works .delivery-image {
  filter: brightness(.82) saturate(1.06);
  transform: scale(1.06);
}

.page-how-it-works .delivery-overlay {
  background: linear-gradient(90deg, rgba(31,7,13,.54), rgba(122,16,48,.24) 55%, rgba(31,7,13,.18));
}

.page-how-it-works .step-label {
  padding: 4px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}

.page-how-it-works .delivery-step {
  position: relative;
}

.page-how-it-works .delivery-step::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--on-strong);
  box-shadow: 0 0 0 7px rgba(255,248,233,.12);
}

.page-how-it-works .delivery-step::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 31px;
  width: 1px;
  height: 32px;
  background: rgba(255,248,233,.45);
}

.page-how-it-works .delivery-step:last-child::after {
  display: none;
}

/* ---------- Section 7 image + actions ---------- */
.page-how-it-works .life-image {
  border-radius: 48% 52% 42% 58% / 50% 42% 58% 50%;
  box-shadow: 0 26px 60px rgba(31,7,13,.16);
}

.page-how-it-works .life-action {
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
}

.page-how-it-works .life-action:last-child {
  border-bottom: 0;
}

/* ---------- Section 8 lighter image treatment ---------- */
.page-how-it-works .hiw-finale {
  min-height: 62vh;
}

.page-how-it-works .finale-image {
  filter: brightness(.74) saturate(1.08);
  transform: scale(1.06);
  animation: hiwFinaleDrift 14s ease-in-out infinite alternate;
}

.page-how-it-works .finale-overlay {
  background: linear-gradient(120deg, rgba(31,7,13,.66), rgba(122,16,48,.38) 58%, rgba(31,7,13,.30));
}

/* ---------- General animation polish ---------- */
@keyframes hiwHeroDrift {
  0% { transform: scale(1.05) translate3d(0,0,0); }
  100% { transform: scale(1.10) translate3d(-1.5%, -1%, 0); }
}
@keyframes hiwFinaleDrift {
  0% { transform: scale(1.06) translate3d(0,0,0); }
  100% { transform: scale(1.11) translate3d(-1%, -1.5%, 0); }
}
@keyframes hiwParticleDrift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-45px,25px,0); }
}
@keyframes hiwPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 7px rgba(122,16,48,.10); }
  50% { transform: scale(1.25); box-shadow: 0 0 0 11px rgba(122,16,48,.04); }
}
@keyframes hiwUnderline {
  0%,100% { transform: scaleX(.72); opacity: .55; }
  50% { transform: scaleX(1); opacity: 1; }
}
@keyframes hiwRouteDot {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(-180px,38px); }
}
@keyframes hiwOrb {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(12px,-15px,0) rotate(7deg); }
}
@keyframes hiwLeafFloat {
  0%,100% { margin-top: 0; }
  50% { margin-top: -14px; }
}
@keyframes hiwSpark {
  0%,100% { transform: scale(.7); opacity: .45; }
  50% { transform: scale(1.35); opacity: 1; }
}
@keyframes hiwScrollLine {
  0% { transform: translateY(-100%); }
  50%,100% { transform: translateY(210%); }
}
@keyframes hiwRing {
  to { transform: rotate(360deg); }
}
@keyframes hiwGlow {
  0%,100% { transform: scale(.9); opacity: .5; }
  50% { transform: scale(1.08); opacity: .85; }
}
@keyframes hiwArrowPulse {
  0%,100% { transform: translateX(0); opacity: .65; }
  50% { transform: translateX(8px); opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) and (min-width: 1025px) {
  .page-how-it-works .hiw-hero-copy { width: 62%; }
  .page-how-it-works .hiw-hero-title { font-size: clamp(44px, 5vw, 66px); }
  .page-how-it-works .hiw-box-choice { gap: 45px; }
  .page-how-it-works .hiw-box-visual { min-height: 500px; }
  .page-how-it-works .customize-flow { grid-template-columns: minmax(0,1fr) 130px 110px minmax(0,1fr); gap: 14px; }
  .page-how-it-works .flow-image { height: 270px; }
}

@media (max-width: 1024px) {
  .page-how-it-works .hiw-hero {
    min-height: calc(100svh - 72px);
    height: auto;
  }
  .page-how-it-works .hiw-hero-content {
    padding-block: 90px 80px;
  }
  .page-how-it-works .hiw-hero-copy { width: min(720px, 78%); }
  .page-how-it-works .hiw-hero-title { font-size: clamp(44px, 7vw, 70px); }
  .page-how-it-works .hiw-hero-overlay {
    background: linear-gradient(90deg, rgba(255,248,233,.96), rgba(255,248,233,.78) 48%, rgba(255,248,233,.25));
  }
  .page-how-it-works .hiw-box-choice {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .page-how-it-works .hiw-box-copy { max-width: 760px; }
  .page-how-it-works .hiw-box-visual { min-height: 470px; }
  .page-how-it-works .hiw-box-image-frame { width: min(100%, 650px); }
  .page-how-it-works .hiw-box-note { right: 3%; }
  .page-how-it-works .customize-flow {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .page-how-it-works .flow-center { order: -1; }
  .page-how-it-works .flow-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .page-how-it-works .flow-stage .flow-image { height: 300px; }
  .page-how-it-works .delivery-journey { align-items: flex-start; }
}

@media (max-width: 768px) {
  .page-how-it-works .hiw-hero {
    min-height: 720px;
  }
  .page-how-it-works .hiw-hero-content {
    align-items: flex-end;
    padding-block: 72px 70px;
  }
  .page-how-it-works .hiw-hero-copy {
    width: 100%;
    max-width: 100%;
  }
  .page-how-it-works .hiw-hero-title {
    font-size: clamp(38px, 10vw, 58px);
    letter-spacing: -1.4px;
  }
  .page-how-it-works .hiw-hero-text {
    max-width: 600px;
    font-size: 16px;
  }
  .page-how-it-works .hiw-hero-meta {
    gap: 10px 16px;
    font-size: 12px;
  }
  .page-how-it-works .hiw-hero-number {
    right: 14px;
    bottom: 15px;
    font-size: 115px;
  }
  .page-how-it-works .hiw-curved-line,
  .page-how-it-works .hiw-hero-route {
    opacity: .45;
  }
  .page-how-it-works .hiw-hero-route {
    width: 70vw;
    right: -15%;
    top: 37%;
  }
  .page-how-it-works .hiw-hero-overlay {
    background: linear-gradient(180deg, rgba(255,248,233,.22) 0%, rgba(255,248,233,.70) 48%, rgba(255,248,233,.96) 72%, rgba(255,248,233,.99));
  }
  .page-how-it-works .hiw-hero-image {
    object-position: 62% center;
  }
  .page-how-it-works .hiw-hero-scroll-line { display: none; }

  .page-how-it-works .hiw-box-visual {
    min-height: 390px;
  }
  .page-how-it-works .hiw-box-image-frame {
    height: 360px;
  }
  .page-how-it-works .hiw-box-note {
    right: 0;
    font-size: 10px;
  }
  .page-how-it-works .ring-a { width: 95%; height: 95%; }
  .page-how-it-works .ring-b { width: 78%; height: 78%; }

  .page-how-it-works .flow-stage .flow-image {
    height: 250px;
  }
  .page-how-it-works .flow-actions {
    gap: 6px 18px;
  }
  .page-how-it-works .flow-action {
    min-width: 120px;
  }

  .page-how-it-works .hiw-step-4 {
    min-height: 600px;
  }
  .page-how-it-works .hiw-delivery-content {
    gap: 35px;
  }
}

@media (max-width: 480px) {
  .page-how-it-works .hiw-hero {
    min-height: 680px;
  }
  .page-how-it-works .hiw-hero-content {
    width: min(100% - 32px, 1200px);
    padding-block: 60px;
  }
  .page-how-it-works .hiw-hero-title {
    font-size: 37px;
  }
  .page-how-it-works .hiw-hero-btns {
    flex-direction: column;
    align-items: stretch;
  }
  .page-how-it-works .hiw-hero-btns .btn {
    width: 100%;
    justify-content: center;
  }
  .page-how-it-works .hiw-hero-meta {
    flex-direction: column;
    gap: 8px;
  }
  .page-how-it-works .hiw-box-image-frame {
    height: 290px;
  }
  .page-how-it-works .hiw-box-visual {
    min-height: 320px;
  }
  .page-how-it-works .hiw-box-note {
    writing-mode: horizontal-tb;
    top: auto;
    right: auto;
    left: 4%;
    bottom: -4px;
  }
  .page-how-it-works .hiw-box-copy .step-number {
    font-size: 68px;
  }
  .page-how-it-works .box-type {
    grid-template-columns: 30px 1fr auto;
    min-height: 56px;
  }
  .page-how-it-works .box-name {
    font-size: 17px;
  }
  .page-how-it-works .flow-stage .flow-image {
    height: 215px;
  }
  .page-how-it-works .flow-actions {
    justify-content: flex-start;
  }
  .page-how-it-works .flow-action {
    min-width: 105px;
  }
  .page-how-it-works .finale-heading {
    font-size: 34px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-how-it-works .hiw-hero-image,
  .page-how-it-works .hiw-hero-bg::after,
  .page-how-it-works .hiw-hero-route::after,
  .page-how-it-works .hiw-hero-orb,
  .page-how-it-works .hiw-hero-leaf,
  .page-how-it-works .hiw-hero-spark,
  .page-how-it-works .hiw-hero-scroll-line span,
  .page-how-it-works .visual-ring,
  .page-how-it-works .visual-glow,
  .page-how-it-works .flow-arrows,
  .page-how-it-works .finale-image {
    animation: none !important;
  }
}

/* =========================================================
   HOW IT WORKS — FINAL POLISH OVERRIDES
   User-requested: true viewport hero, new editorial shapes,
   sample-inspired customize section, brighter delivery section,
   stronger motion and responsive safety.
   ========================================================= */

/* ---------- 01. TRUE VIEWPORT HERO ---------- */
.page-how-it-works .hiw-hero {
  min-height: calc(100svh - 82px);
  height: calc(100svh - 82px);
  padding: 0;
  display: flex;
  align-items: stretch;
  isolation: isolate;
  background: var(--bg);
}

.page-how-it-works .hiw-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.page-how-it-works .hiw-hero-image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: brightness(.86) saturate(1.08);
  animation: hiwHeroCinematic 14s ease-in-out infinite alternate;
  transform-origin: center;
}

.page-how-it-works .hiw-hero-overlay {
  background:
    linear-gradient(90deg,
      rgba(31,7,13,.84) 0%,
      rgba(31,7,13,.62) 34%,
      rgba(31,7,13,.18) 66%,
      rgba(31,7,13,.05) 100%);
}

.page-how-it-works .hiw-hero-content {
  width: min(1200px, calc(100% - 48px));
  max-width: none;
  min-height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  padding-block: 72px;
}

.page-how-it-works .hiw-hero-copy {
  width: min(680px, 62%);
  position: relative;
  z-index: 8;
}

.page-how-it-works .hiw-hero-title {
  font-size: clamp(48px, 5.6vw, 78px);
  line-height: .98;
  letter-spacing: -2px;
  margin-bottom: 26px;
  text-wrap: balance;
}

.page-how-it-works .hiw-hero-title span {
  color: #FFF8E9;
  position: relative;
}

.page-how-it-works .hiw-hero-title span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 10%;
  bottom: -9px;
  height: 2px;
  background: var(--brand);
  transform-origin: left;
  animation: hiwUnderline 3s ease-in-out infinite;
}

.page-how-it-works .hiw-hero-text {
  max-width: 560px;
  font-size: 18px;
  color: #FFF8E9;
  text-shadow: 0 2px 14px rgba(0,0,0,.3);
}

.page-how-it-works .hiw-hero-btns {
  margin-bottom: 28px;
}

.page-how-it-works .hiw-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  color: #FFF8E9;
  font-size: 13px;
  font-weight: 800;
}

.page-how-it-works .hiw-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-how-it-works .hiw-hero-meta i {
  color: #F2C86B;
}

.page-how-it-works .hiw-hero-number {
  right: 2%;
  bottom: 2%;
  font-size: clamp(150px, 20vw, 300px);
  color: rgba(255,248,233,.10);
}

.page-how-it-works .hiw-curved-line {
  right: 8%;
  bottom: 12%;
  width: clamp(170px, 20vw, 300px);
  height: clamp(170px, 20vw, 300px);
  border-color: rgba(255,248,233,.22);
}

@keyframes hiwHeroCinematic {
  0% { transform: scale(1.035) translate3d(0,0,0); }
  50% { transform: scale(1.07) translate3d(-.8%,-.4%,0); }
  100% { transform: scale(1.045) translate3d(.6%,-.9%,0); }
}

/* ---------- 02. CHOOSE YOUR BOX — NEW IMAGE SHAPE + RELIABLE HOVER ---------- */
.page-how-it-works .hiw-step-1 {
  position: relative;
  overflow: hidden;
}

.page-how-it-works .hiw-box-image-frame {
  width: min(100%, 610px);
  height: clamp(390px, 43vw, 550px);
  border-radius: 24% 76% 18% 82% / 15% 24% 76% 85%;
  transform: rotate(-2deg);
  clip-path: polygon(7% 0, 100% 0, 94% 88%, 76% 100%, 8% 96%, 0 18%);
  box-shadow: 0 30px 70px rgba(31,7,13,.20);
}

.page-how-it-works .hiw-box-visual:hover .hiw-box-image-frame {
  transform: rotate(1deg) scale(1.025);
  border-radius: 12% 88% 28% 72% / 24% 16% 84% 76%;
  clip-path: polygon(0 6%, 94% 0, 100% 80%, 82% 100%, 5% 94%);
}

.page-how-it-works #hiwBoxVisual {
  cursor: pointer;
  will-change: opacity, transform;
}

.page-how-it-works .hiw-box-image-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.20), transparent 35%, rgba(122,16,48,.08));
  mix-blend-mode: screen;
}

.page-how-it-works .hiw-box-caption {
  left: 7%;
  bottom: 7%;
}

.page-how-it-works .hiw-box-note {
  right: -4px;
  top: 9%;
}

/* Give the selector a stronger interactive cue without making cards. */
.page-how-it-works .box-type {
  position: relative;
}

.page-how-it-works .box-type.active::after,
.page-how-it-works .box-type:hover::after {
  width: 82%;
}

.page-how-it-works .box-type.active .box-index {
  opacity: 1;
}

.page-how-it-works .box-type:hover .box-name,
.page-how-it-works .box-type.active .box-name {
  transform: translateX(8px);
}

/* ---------- 03. SAMPLE-INSPIRED CUSTOMIZE SECTION ---------- */
.page-how-it-works .hiw-customize-editorial {
  padding: 0;
  min-height: min(760px, 92vh);
  background: var(--bg-soft);
  overflow: hidden;
}

.page-how-it-works .customize-editorial-wrap {
  width: 100%;
  min-height: min(760px, 92vh);
  display: grid;
  grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr);
}

.page-how-it-works .customize-editorial-panel {
  position: relative;
  isolation: isolate;
  padding: clamp(55px, 7vw, 100px) clamp(28px, 6vw, 90px);
  background:
    radial-gradient(circle at 15% 15%, rgba(232,92,120,.20), transparent 28%),
    linear-gradient(145deg, var(--brand) 0%, #591024 100%);
  color: #FFF8E9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.page-how-it-works .customize-editorial-panel::before {
  content: "03";
  position: absolute;
  right: -18px;
  bottom: -54px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(220px, 30vw, 430px);
  line-height: .8;
  color: rgba(255,248,233,.07);
  pointer-events: none;
  z-index: -1;
}

.page-how-it-works .customize-step-no {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(80px, 9vw, 130px);
  line-height: .75;
  color: rgba(255,248,233,.35);
  margin-bottom: 25px;
}

.page-how-it-works .customize-kicker {
  color: #F7D98D;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2.4px;
  margin-bottom: 18px;
}

.page-how-it-works .customize-editorial-panel h2 {
  color: #FFF8E9;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: .98;
  letter-spacing: -1.5px;
  max-width: 620px;
  margin-bottom: 22px;
}

.page-how-it-works .customize-lead {
  color: rgba(255,248,233,.88);
  max-width: 540px;
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 28px;
}

.page-how-it-works .customize-action-list {
  max-width: 560px;
  margin-bottom: 34px;
}

.page-how-it-works .customize-action-list > div {
  display: grid;
  grid-template-columns: 34px 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,248,233,.20);
  transition: transform .35s ease, border-color .35s ease;
}

.page-how-it-works .customize-action-list > div:hover {
  transform: translateX(9px);
  border-color: #F7D98D;
}

.page-how-it-works .customize-action-list span {
  font-size: 21px;
  color: #F7D98D;
  font-weight: 800;
}

.page-how-it-works .customize-action-list strong {
  color: #FFF8E9;
  font-size: 13px;
  letter-spacing: 1.4px;
}

.page-how-it-works .customize-action-list em {
  color: rgba(255,248,233,.68);
  font-style: normal;
  font-size: 13px;
}

.page-how-it-works .customize-light-btn {
  width: fit-content;
  background: #FFF8E9;
  color: #4A0D1D;
  border-color: #FFF8E9;
}

.page-how-it-works .customize-light-btn:hover {
  background: #F7D98D;
  border-color: #F7D98D;
  color: #3A0815;
}

.page-how-it-works .customize-editorial-visual {
  position: relative;
  min-height: min(760px, 92vh);
  background:
    radial-gradient(circle at 70% 25%, rgba(214,166,58,.15), transparent 26%),
    radial-gradient(circle at 30% 80%, rgba(83,111,82,.12), transparent 30%),
    var(--bg);
  overflow: hidden;
  isolation: isolate;
}

.page-how-it-works .customize-image-main {
  position: absolute;
  width: 64%;
  height: 74%;
  right: 10%;
  top: 13%;
  overflow: hidden;
  clip-path: polygon(10% 0, 100% 8%, 92% 100%, 0 91%);
  transform: rotate(2deg);
  box-shadow: 0 28px 65px rgba(31,7,13,.22);
  animation: customizeMainFloat 7s ease-in-out infinite;
}

.page-how-it-works .customize-image-main img,
.page-how-it-works .customize-polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-how-it-works .customize-image-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, transparent 35%, rgba(31,7,13,.20));
  pointer-events: none;
}

.page-how-it-works .image-word {
  position: absolute;
  right: 7%;
  bottom: 6%;
  color: #FFF8E9;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(40px, 6vw, 82px);
  font-style: italic;
  line-height: 1;
  text-shadow: 0 4px 20px rgba(0,0,0,.3);
}

.page-how-it-works .customize-polaroid {
  position: absolute;
  z-index: 4;
  width: clamp(150px, 18vw, 235px);
  aspect-ratio: .84;
  padding: 9px 9px 34px;
  background: #FFF8E9;
  box-shadow: 0 22px 50px rgba(31,7,13,.22);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}

.page-how-it-works .customize-polaroid img {
  height: 100%;
}

.page-how-it-works .customize-polaroid span {
  position: absolute;
  left: 12px;
  bottom: 8px;
  color: #4A0D1D;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.3px;
}

.page-how-it-works .customize-polaroid-a {
  left: 8%;
  top: 15%;
  transform: rotate(-8deg);
}

.page-how-it-works .customize-polaroid-b {
  left: 17%;
  bottom: 11%;
  transform: rotate(7deg);
}

.page-how-it-works .customize-polaroid-a:hover {
  transform: rotate(-3deg) translateY(-12px) scale(1.04);
}

.page-how-it-works .customize-polaroid-b:hover {
  transform: rotate(2deg) translateY(-12px) scale(1.04);
}

.page-how-it-works .customize-adjust {
  position: absolute;
  z-index: 6;
  left: 43%;
  top: 48%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--brand);
  animation: adjustFloat 3s ease-in-out infinite;
}

.page-how-it-works .customize-adjust small {
  display: block;
  font-weight: 900;
  letter-spacing: 3px;
  margin-bottom: 8px;
}

.page-how-it-works .customize-adjust div {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 26px;
}

.page-how-it-works .customize-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.page-how-it-works .orbit-one {
  width: 74%;
  aspect-ratio: 1;
  left: 12%;
  top: 12%;
  animation: hiwRing 24s linear infinite;
}

.page-how-it-works .orbit-two {
  width: 45%;
  aspect-ratio: 1;
  right: 6%;
  bottom: 5%;
  border-style: dashed;
  animation: hiwRing 16s linear infinite reverse;
}

.page-how-it-works .customize-spark {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 12%, transparent);
  animation: hiwSpark 2.5s ease-in-out infinite;
}

.page-how-it-works .spark-left { left: 7%; top: 50%; }
.page-how-it-works .spark-right { right: 8%; top: 24%; animation-delay: .8s; }

@keyframes customizeMainFloat {
  0%,100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-13px); }
}
@keyframes adjustFloat {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50% { transform: translate(-50%,-56%) scale(1.06); }
}

/* ---------- 04. SECTION 6 DELIVERY: NO BLACK OVERLAY ---------- */
.page-how-it-works .hiw-delivery-editorial {
  min-height: min(760px, 92vh);
  padding: 0;
  background: var(--bg);
  overflow: hidden;
}

.page-how-it-works .delivery-editorial-wrap {
  min-height: min(760px, 92vh);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: stretch;
}

.page-how-it-works .delivery-editorial-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(55px, 7vw, 100px) clamp(28px, 6vw, 90px);
  background:
    radial-gradient(circle at 20% 25%, rgba(200,149,67,.15), transparent 30%),
    var(--bg-soft);
  color: var(--text);
}

.page-how-it-works .delivery-step-no {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(78px, 9vw, 130px);
  line-height: .75;
  color: color-mix(in srgb, var(--brand) 28%, transparent);
  margin-bottom: 24px;
}

.page-how-it-works .delivery-kicker {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2.3px;
  margin-bottom: 16px;
}

.page-how-it-works .delivery-editorial-copy h2 {
  color: var(--text);
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1;
  letter-spacing: -1.5px;
  margin-bottom: 22px;
}

.page-how-it-works .delivery-lead {
  color: var(--muted);
  max-width: 520px;
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 28px;
}

.page-how-it-works .delivery-road {
  margin-bottom: 30px;
  max-width: 560px;
}

.page-how-it-works .delivery-road > div {
  display: grid;
  grid-template-columns: 42px 145px 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  transition: transform .35s ease, color .35s ease;
}

.page-how-it-works .delivery-road > div:hover {
  transform: translateX(8px);
  color: var(--brand);
}

.page-how-it-works .delivery-road span {
  color: var(--brand);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
}

.page-how-it-works .delivery-road strong {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 1.2px;
}

.page-how-it-works .delivery-road small {
  color: var(--muted);
  font-size: 12px;
}

.page-how-it-works .delivery-editorial-visual {
  position: relative;
  min-height: min(760px, 92vh);
  overflow: hidden;
  background: var(--bg-soft);
}

.page-how-it-works .delivery-photo {
  position: absolute;
  inset: 8% 7% 8% 5%;
  overflow: hidden;
  clip-path: polygon(5% 0, 100% 7%, 96% 95%, 7% 100%, 0 12%);
  box-shadow: 0 28px 65px rgba(31,7,13,.20);
}

.page-how-it-works .delivery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: deliveryImageFloat 10s ease-in-out infinite alternate;
}

.page-how-it-works .delivery-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.16), transparent 40%);
}

.page-how-it-works .delivery-photo-small {
  position: absolute;
  width: clamp(150px, 21vw, 270px);
  aspect-ratio: 1;
  right: 3%;
  bottom: 7%;
  padding: 8px;
  background: var(--surface);
  box-shadow: 0 20px 48px rgba(31,7,13,.20);
  transform: rotate(6deg);
  z-index: 4;
  animation: deliverySmallFloat 6s ease-in-out infinite;
}

.page-how-it-works .delivery-photo-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-how-it-works .delivery-stamp {
  position: absolute;
  z-index: 5;
  left: 8%;
  bottom: 12%;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--brand);
  color: #FFF8E9;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 15px 34px rgba(122,16,48,.28);
  animation: stampPulse 4s ease-in-out infinite;
}

.page-how-it-works .delivery-stamp i {
  font-size: 22px;
}

.page-how-it-works .delivery-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.page-how-it-works .delivery-orbit.orbit-a {
  width: 55%;
  aspect-ratio: 1;
  right: -10%;
  top: 2%;
  animation: hiwRing 22s linear infinite;
}

.page-how-it-works .delivery-orbit.orbit-b {
  width: 28%;
  aspect-ratio: 1;
  left: 2%;
  top: 13%;
  border-style: dashed;
  animation: hiwRing 15s linear infinite reverse;
}

@keyframes deliveryImageFloat {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to { transform: scale(1.10) translate3d(-1.5%,-1%,0); }
}
@keyframes deliverySmallFloat {
  0%,100% { transform: rotate(6deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-12px); }
}
@keyframes stampPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ---------- Header safety at laptop widths ---------- */
@media (min-width:1024px) and (max-width:1280px) {
  header .nav.container {
    padding-inline: 16px;
  }
  .brand {
    font-size: 17px;
    gap: 7px;
  }
  .brand i,
  .brand-icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .desktop {
    gap: 0;
  }
  .navlink,
  .dropbtn {
    padding-inline: 5px;
    font-size: 12px;
    gap: 3px;
  }
  .actions {
    gap: 4px;
  }
  .actions .icon {
    width: 34px;
    height: 34px;
  }
  .login {
    padding: 8px 10px;
    font-size: 12px;
  }
  .subscribe {
    padding: 9px 11px;
    font-size: 12px;
  }
}

/* ---------- Responsive editorial compositions ---------- */
@media (max-width: 1023px) {
  .page-how-it-works .hiw-hero {
    min-height: calc(100svh - 72px);
    height: auto;
  }

  .page-how-it-works .hiw-hero-content {
    width: min(100% - 40px, 900px);
    padding-block: 80px 70px;
  }

  .page-how-it-works .hiw-hero-copy {
    width: min(760px, 100%);
  }

  .page-how-it-works .hiw-customize-editorial,
  .page-how-it-works .customize-editorial-wrap,
  .page-how-it-works .delivery-editorial-wrap,
  .page-how-it-works .hiw-delivery-editorial {
    min-height: auto;
  }

  .page-how-it-works .customize-editorial-wrap,
  .page-how-it-works .delivery-editorial-wrap {
    grid-template-columns: 1fr;
  }

  .page-how-it-works .customize-editorial-panel {
    min-height: 560px;
  }

  .page-how-it-works .customize-editorial-visual {
    min-height: 650px;
  }

  .page-how-it-works .customize-image-main {
    width: 70%;
    height: 72%;
    right: 7%;
  }

  .page-how-it-works .customize-polaroid-a {
    left: 6%;
    top: 12%;
  }

  .page-how-it-works .customize-polaroid-b {
    left: 12%;
    bottom: 8%;
  }

  .page-how-it-works .delivery-editorial-copy {
    min-height: 580px;
  }

  .page-how-it-works .delivery-editorial-visual {
    min-height: 620px;
  }
}

@media (max-width: 767px) {
  .page-how-it-works .hiw-hero {
    min-height: calc(100svh - 72px);
  }

  .page-how-it-works .hiw-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(31,7,13,.22) 0%,
      rgba(31,7,13,.45) 38%,
      rgba(31,7,13,.88) 76%,
      rgba(31,7,13,.94) 100%
    );
  }

  .page-how-it-works .hiw-hero-content {
    width: min(100% - 32px, 700px);
    padding-block: 55px 48px;
    align-items: flex-end;
  }

  .page-how-it-works .hiw-hero-title {
    font-size: clamp(38px, 10vw, 54px);
    letter-spacing: -1.2px;
  }

  .page-how-it-works .hiw-hero-text {
    font-size: 15px;
    line-height: 1.6;
  }

  .page-how-it-works .hiw-hero-meta {
    font-size: 11px;
    gap: 8px 14px;
  }

  .page-how-it-works .hiw-hero-number {
    font-size: 120px;
    right: 5px;
    bottom: 3px;
  }

  .page-how-it-works .hiw-box-image-frame {
    height: 330px;
    clip-path: polygon(7% 0, 100% 4%, 92% 91%, 73% 100%, 7% 94%, 0 16%);
  }

  .page-how-it-works .hiw-box-note {
    right: 2%;
  }

  .page-how-it-works .customize-editorial-panel {
    padding: 55px 24px;
    min-height: 590px;
  }

  .page-how-it-works .customize-editorial-panel h2,
  .page-how-it-works .delivery-editorial-copy h2 {
    font-size: clamp(36px, 11vw, 50px);
  }

  .page-how-it-works .customize-action-list > div {
    grid-template-columns: 30px 90px 1fr;
  }

  .page-how-it-works .customize-action-list em {
    font-size: 11px;
  }

  .page-how-it-works .customize-editorial-visual {
    min-height: 560px;
  }

  .page-how-it-works .customize-image-main {
    width: 78%;
    height: 64%;
    right: 5%;
    top: 14%;
  }

  .page-how-it-works .customize-polaroid {
    width: 145px;
  }

  .page-how-it-works .customize-polaroid-a {
    left: 2%;
    top: 12%;
  }

  .page-how-it-works .customize-polaroid-b {
    left: 7%;
    bottom: 7%;
  }

  .page-how-it-works .customize-adjust {
    left: 48%;
    top: 51%;
  }

  .page-how-it-works .delivery-editorial-copy {
    padding: 55px 24px;
    min-height: 590px;
  }

  .page-how-it-works .delivery-road > div {
    grid-template-columns: 34px 112px 1fr;
  }

  .page-how-it-works .delivery-road small {
    font-size: 11px;
  }

  .page-how-it-works .delivery-editorial-visual {
    min-height: 560px;
  }

  .page-how-it-works .delivery-photo {
    inset: 7% 4% 9% 4%;
  }

  .page-how-it-works .delivery-photo-small {
    width: 150px;
  }

  .page-how-it-works .delivery-stamp {
    width: 92px;
    height: 92px;
    left: 5%;
    bottom: 11%;
  }

  .page-how-it-works .delivery-stamp i {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-how-it-works .hiw-hero-image,
  .page-how-it-works .customize-image-main,
  .page-how-it-works .customize-polaroid,
  .page-how-it-works .customize-adjust,
  .page-how-it-works .delivery-photo img,
  .page-how-it-works .delivery-photo-small,
  .page-how-it-works .delivery-stamp {
    animation: none !important;
  }
}

/* Reliable image swap state for the interactive Step 1 selector */
.page-how-it-works #hiwBoxVisual.is-swapping {
  opacity: 0 !important;
  transform: scale(.97) !important;
}

/* ============================================================
   FreshRhythm Dashboard System — rebuilt layout
   ============================================================ */
body.dashboard-page{background:radial-gradient(circle at 8% 8%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 30%),var(--bg);overflow-x:hidden}
body.dashboard-page>footer{display:none!important}
body.dashboard-page main{padding:0!important;max-width:none!important}
body.dashboard-page header{z-index:5000}
.dashboard-shell{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:calc(100vh - 82px);align-items:stretch}
.dashboard-sidebar{position:sticky;top:82px;height:calc(100vh - 82px);overflow-y:auto;background:var(--surface);border-inline-end:1px solid var(--line);padding:22px 16px 28px;z-index:2000;scrollbar-width:thin}
.dashboard-brand-mini{display:flex;align-items:center;gap:10px;padding:0 9px 20px;color:var(--text);font-size:19px;font-weight:950;letter-spacing:-.02em}
.dashboard-logo-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--brand-strong);color:var(--on-strong);box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 18%,transparent);flex:none}
.dashboard-profile{display:flex;align-items:center;gap:11px;padding:13px 11px;margin-bottom:20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:17px}
.dashboard-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;font-weight:950;flex:none;position:relative;box-shadow:0 8px 18px color-mix(in srgb,var(--brand) 18%,transparent)}
.dashboard-avatar:after{content:"";position:absolute;right:-1px;bottom:0;width:11px;height:11px;background:#3aa86c;border:2px solid var(--surface);border-radius:50%}
.profile-copy{min-width:0}.dashboard-profile strong{display:block;color:var(--text);font-size:14px;font-weight:900}.dashboard-profile small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.dashboard-profile em{display:flex;align-items:center;gap:5px;margin-top:5px;color:#3aa86c;font-style:normal;font-size:10px;font-weight:900}.dashboard-profile em span{width:6px;height:6px;border-radius:50%;background:#3aa86c;animation:dashPulse 1.8s infinite}
.dashboard-nav-title{margin:19px 10px 8px;color:var(--muted);font-size:10px;font-weight:950;letter-spacing:.15em;text-transform:uppercase}
.dashboard-nav{display:grid;gap:4px}.dashboard-nav button,.dashboard-side-action{width:100%;min-height:44px;display:flex;align-items:center;gap:11px;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:13px;font-weight:850;text-align:start;cursor:pointer;position:relative;transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease}
.dashboard-nav button i,.dashboard-side-action i{width:20px;text-align:center;font-size:14px;flex:none}.dashboard-nav button:hover,.dashboard-side-action:hover{background:var(--bg-soft);color:var(--brand);transform:translateX(3px)}.dashboard-nav button.active{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}.dashboard-nav button.active i{animation:dashIconBounce 1.8s ease-in-out infinite}
.dashboard-sidebar-bottom{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}.dashboard-side-action.logout{color:#b33b4f}.dashboard-side-action.logout:hover{background:color-mix(in srgb,#b33b4f 8%,transparent);color:#b33b4f}
.dashboard-main{min-width:0;padding:0 30px 56px}.dashboard-topbar{position:sticky;top:0;z-index:1500;min-height:70px;margin:0 -30px;padding:12px 30px;display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:box-shadow .3s ease,border-color .3s ease,background .3s ease}.dashboard-topbar.scrolled{border-bottom-color:var(--line);box-shadow:0 10px 28px rgba(30,15,20,.06)}.dashboard-topbar-left{min-width:48px;display:flex;align-items:center}.dashboard-top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:9px}.dashboard-top-icon{width:42px;height:42px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;display:grid;place-items:center;cursor:pointer;transition:transform .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}.dashboard-top-icon:hover{transform:translateY(-2px) scale(1.03);border-color:var(--brand);color:var(--brand);box-shadow:var(--shadow-sm)}.dashboard-logout-top:hover{color:#b33b4f;border-color:#b33b4f}.dashboard-mobile-menu{display:none}
.dashboard-content{padding-top:24px;display:grid;gap:18px}.dashboard-content>section{min-width:0}
.dashboard-reveal{opacity:1;transform:none}.dashboard-reveal.in{animation:dashReveal .65s cubic-bezier(.16,1,.3,1) both}.dash-jump{animation:dashJump .55s cubic-bezier(.16,1,.3,1) both}
.dashboard-hero,.dashboard-admin-welcome{position:relative;min-height:300px;display:grid;grid-template-columns:minmax(0,1fr) 390px;align-items:center;gap:28px;padding:34px 38px;border:1px solid var(--line);border-radius:25px;overflow:hidden;background:linear-gradient(115deg,color-mix(in srgb,var(--brand) 14%,var(--surface)),var(--surface) 64%);box-shadow:var(--shadow-sm)}.dashboard-hero:before,.dashboard-admin-welcome:before{content:"";position:absolute;inset:auto -90px -110px auto;width:330px;height:330px;border-radius:50%;background:color-mix(in srgb,var(--brand) 10%,transparent);pointer-events:none}.dashboard-hero:after,.dashboard-admin-welcome:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.16),transparent 55%);transform:translateX(-120%);animation:dashShimmer 6s infinite;pointer-events:none}.hero-copy,.hero-visual{position:relative;z-index:1}.dashboard-kicker,.panel-label{display:block;color:var(--brand);font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.hero-copy h1,.dashboard-admin-welcome h1{margin:8px 0 12px;color:var(--text);font-size:clamp(30px,4vw,48px);line-height:1.03;font-weight:950;letter-spacing:-.035em}.hero-copy p,.dashboard-admin-welcome p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75;font-weight:600}.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.hero-note{display:flex;align-items:center;gap:8px;margin-top:17px;color:var(--text);font-size:11px;font-weight:800}.hero-note i{color:#3aa86c}.hero-visual{min-height:225px;display:grid;place-items:center}.hero-visual img{width:250px;height:195px;object-fit:cover;border-radius:22px;box-shadow:0 25px 55px rgba(46,20,26,.22);transform:rotate(3deg);transition:transform .55s cubic-bezier(.16,1,.3,1);animation:dashHeroFloat 5s ease-in-out infinite}.dashboard-hero:hover .hero-visual img{transform:rotate(0) translateY(-8px) scale(1.04)}.hero-ring{position:absolute;width:290px;height:210px;border:1px dashed color-mix(in srgb,var(--brand) 35%,transparent);border-radius:50%;animation:dashSpin 18s linear infinite}.hero-chip{position:absolute;display:flex;align-items:center;gap:6px;padding:9px 11px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:10px;font-weight:900;color:var(--text);animation:dashFloat 4s ease-in-out infinite}.hero-chip i{color:var(--brand)}.chip-one{top:10px;right:15px}.chip-two{bottom:5px;left:18px;animation-delay:-1.4s}.dashboard-btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);font-size:12px;font-weight:900;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,color .25s ease,background .25s ease}.dashboard-btn:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--brand);box-shadow:var(--shadow-sm)}.dashboard-btn.primary{background:var(--brand-strong);border-color:var(--brand-strong);color:var(--on-strong)}.dashboard-btn.primary:hover{background:var(--brand);color:#fff}.dashboard-btn.light{background:color-mix(in srgb,var(--surface) 75%,transparent)}.dashboard-btn.danger{color:#b33b4f;border-color:color-mix(in srgb,#b33b4f 28%,var(--line))}.dashboard-btn.small{min-height:34px;padding:7px 10px;font-size:11px}.dashboard-btn.full{width:100%}
.dashboard-stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dashboard-metric{position:relative;min-height:124px;padding:17px;border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.dashboard-metric:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 25%,var(--line))}.metric-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.stat-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--brand) 11%,transparent);color:var(--brand)}.metric-trend{font-size:10px;font-weight:950;color:#3a9560}.dashboard-metric strong{display:block;margin-top:12px;color:var(--text);font-size:24px;line-height:1;font-weight:950}.dashboard-metric>span:last-child{display:block;margin-top:6px;color:var(--muted);font-size:11px;font-weight:800}
.dashboard-overview-grid,.dashboard-customize-grid,.dashboard-history-grid,.admin-main-grid,.admin-two-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);gap:18px}.dashboard-panel{position:relative;min-width:0;padding:23px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}.dashboard-panel:before{content:"";position:absolute;inset:auto -55px -70px auto;width:180px;height:180px;border-radius:50%;background:color-mix(in srgb,var(--brand) 5%,transparent);pointer-events:none}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:17px}.panel-head h2,.dashboard-panel h2{margin:5px 0 0;color:var(--text);font-size:20px;line-height:1.25;font-weight:950;letter-spacing:-.02em}.panel-head p,.dashboard-panel>p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.6;font-weight:600}.panel-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.subscription-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;align-items:center}.subscription-image{height:205px;overflow:hidden;border-radius:17px}.subscription-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}.subscription-panel:hover .subscription-image img{transform:scale(1.07)}.subscription-copy h2{margin:0;font-size:25px}.subscription-copy p{margin:7px 0 13px;color:var(--muted);font-size:13px;line-height:1.65}.inline-stats{display:flex;gap:7px;flex-wrap:wrap}.inline-stats span{display:inline-flex;align-items:center;gap:5px;padding:7px 8px;border-radius:9px;background:var(--bg-soft);color:var(--text);font-size:10px;font-weight:850}.inline-stats i{color:var(--brand)}.subscription-price{display:flex;align-items:baseline;gap:5px;margin:17px 0}.subscription-price strong{font-size:27px;color:var(--text)}.subscription-price span{color:var(--muted);font-size:11px}.subscription-price b{margin-inline-start:auto;color:#3a9560;background:color-mix(in srgb,#3a9560 10%,transparent);padding:6px 9px;border-radius:8px;font-size:10px}.date-circle{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--brand);font-size:18px;font-weight:950}.date-circle small{font-size:8px;margin-top:-14px;letter-spacing:.1em}.dashboard-progress{height:8px;margin-top:18px;border-radius:99px;background:var(--bg-soft);overflow:hidden}.dashboard-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand-strong),var(--brand));transform-origin:left;animation:dashProgress 1.1s ease both}.progress-meta{display:flex;justify-content:space-between;margin-top:7px;color:var(--muted);font-size:10px;font-weight:850}.progress-meta strong{color:var(--brand)}.dashboard-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:19px 0}.dashboard-step{text-align:center;position:relative}.dashboard-step:not(:last-child):after{content:"";position:absolute;top:17px;left:61%;width:78%;height:2px;background:var(--line);z-index:0}.dashboard-step i{position:relative;z-index:1;width:34px;height:34px;margin:auto;display:grid;place-items:center;border-radius:50%;border:2px solid var(--line);background:var(--surface);color:var(--muted);font-size:12px}.dashboard-step.done i{background:color-mix(in srgb,#3a9560 13%,transparent);border-color:#3a9560;color:#3a9560}.dashboard-step.active i{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 7px color-mix(in srgb,var(--brand) 10%,transparent);animation:dashPulseSoft 2s infinite}.dashboard-step strong{display:block;margin-top:7px;color:var(--text);font-size:9px;font-weight:900}.dashboard-step small{display:block;margin-top:2px;color:var(--muted);font-size:8px}
.dashboard-box-selector{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.dashboard-box-option{min-width:0;display:flex;flex-direction:column;gap:8px;padding:9px;text-align:start;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--text);cursor:pointer;position:relative;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease}.dashboard-box-option:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}.dashboard-box-option.active{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--surface));box-shadow:0 12px 28px color-mix(in srgb,var(--brand) 10%,transparent)}.dashboard-box-option .box-image{height:115px;display:block;overflow:hidden;border-radius:11px}.dashboard-box-option img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.dashboard-box-option:hover img{transform:scale(1.08)}.dashboard-box-option strong{font-size:11px;font-weight:950}.dashboard-box-option small{color:var(--muted);font-size:9px}.dashboard-box-option>i{position:absolute;top:17px;right:17px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:#fff;font-size:10px;opacity:0;transform:scale(.7);transition:.25s ease}.dashboard-box-option.active>i{opacity:1;transform:scale(1)}
.total-pill{display:flex;align-items:center;gap:5px;padding:8px 10px;border-radius:11px;background:var(--bg-soft);white-space:nowrap}.total-pill strong{font-size:18px;color:var(--brand)}.total-pill span{color:var(--muted);font-size:9px}.total-pill b{margin-inline-start:5px;color:var(--text);font-size:11px}.dashboard-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.dashboard-product{min-width:0;display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.dashboard-product:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 25%,var(--line));box-shadow:var(--shadow-sm)}.product-image{width:60px;height:60px;border-radius:11px;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.dashboard-product:hover img{transform:scale(1.1)}.product-copy{min-width:0}.product-copy strong{display:block;color:var(--text);font-size:11px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-copy small{display:block;margin-top:4px;color:var(--muted);font-size:9px}.dashboard-qty{grid-column:1/-1;display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:5px;padding-top:7px;border-top:1px solid var(--line)}.dashboard-qty button{height:30px;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft);color:var(--text);font-weight:950;cursor:pointer;transition:.2s}.dashboard-qty button:hover{background:var(--brand);color:#fff;border-color:var(--brand)}.dashboard-qty b{text-align:center;font-size:11px}.pause-calendar{padding:13px;border-radius:14px;background:var(--bg-soft);border:1px solid var(--line);margin-top:14px}.calendar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.calendar-top strong{font-size:12px}.dashboard-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.dashboard-calendar span{min-height:27px;display:grid;place-items:center;color:var(--muted);font-size:9px;font-weight:800}.dashboard-calendar .cal-week{color:var(--brand);font-size:8px}.dashboard-calendar .cal-day{border-radius:7px}.dashboard-calendar .cal-day:hover{background:var(--surface);color:var(--brand)}.dashboard-calendar .selected{background:var(--brand);color:#fff}.dashboard-calendar .paused{text-decoration:line-through;color:#b33b4f}.pause-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.dashboard-invoice-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.dashboard-invoice-row:last-child{border-bottom:0}.dashboard-invoice-row strong{display:block;color:var(--text);font-size:12px}.dashboard-invoice-row small{display:block;margin-top:3px;color:var(--muted);font-size:10px}.invoice-right{display:flex;align-items:center;gap:10px}.invoice-right>strong{font-size:12px}.history-list>div{display:grid;grid-template-columns:70px 1fr 80px 75px;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}.history-list>div:last-child{border-bottom:0}.history-list span,.history-list em{color:var(--muted);font-size:10px;font-style:normal}.history-list strong{font-size:11px}.history-list b{justify-self:end;color:#3a9560;background:color-mix(in srgb,#3a9560 10%,transparent);padding:5px 8px;border-radius:7px;font-size:9px}.dashboard-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.dashboard-form label{color:var(--muted);font-size:10px;font-weight:900}.dashboard-form input,.dashboard-form select{width:100%;height:44px;margin-top:6px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;outline:0}.dashboard-form input:focus,.dashboard-form select:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)}.dashboard-form .wide{grid-column:1/-1}
.dashboard-admin-welcome{min-height:145px;grid-template-columns:1fr auto;padding:28px 30px}.dashboard-admin-welcome h1{font-size:32px}.admin-live{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:10px;background:color-mix(in srgb,#3a9560 9%,transparent);color:#3a9560;font-size:10px;font-weight:900}.admin-live span{width:7px;height:7px;border-radius:50%;background:#3a9560;animation:dashPulse 1.6s infinite}.dashboard-admin-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}.dashboard-admin-metrics .dashboard-metric{min-height:132px}.dashboard-admin-metrics .dashboard-metric strong{font-size:22px}.dashboard-admin-metrics .metric-trend{font-size:9px}.dashboard-chart svg{width:100%;height:210px;overflow:visible}.chart-grid{stroke:var(--line);stroke-width:1}.chart-line{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:800;stroke-dashoffset:800;animation:dashChart 1.7s .2s ease forwards}.chart-area{fill:color-mix(in srgb,var(--brand) 9%,transparent)}.dashboard-chart circle{fill:var(--brand);stroke:var(--surface);stroke-width:4}.chart-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:9px}.chart-growth{padding:7px 9px;border-radius:8px;background:color-mix(in srgb,#3a9560 10%,transparent);color:#3a9560;font-size:10px;font-weight:950}.chart-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.chart-summary div{padding:10px;border-radius:10px;background:var(--bg-soft)}.chart-summary small{display:block;color:var(--muted);font-size:9px}.chart-summary strong{display:block;margin-top:4px;color:var(--text);font-size:13px}.ops-list{display:grid;gap:2px}.ops-list div{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:11px 0;border-bottom:1px solid var(--line)}.ops-list div:last-child{border-bottom:0}.ops-list span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--brand)}.ops-list strong{font-size:10px}.ops-list b{font-size:11px}.ops-list b.warning{color:#b47b17}.dashboard-pipeline{display:grid;grid-template-columns:repeat(5,1fr);position:relative;gap:8px;padding:5px 0}.dashboard-pipeline:before{content:"";position:absolute;top:23px;left:8%;right:8%;height:2px;background:var(--line)}.dashboard-pipe{text-align:center;position:relative;z-index:1}.dashboard-pipe i{width:38px;height:38px;margin:auto;display:grid;place-items:center;border-radius:50%;background:var(--surface);border:2px solid var(--line);color:var(--muted)}.dashboard-pipe.active i{background:var(--brand);border-color:var(--brand);color:#fff;animation:dashPulseSoft 2s infinite}.dashboard-pipe strong{display:block;margin-top:8px;color:var(--text);font-size:10px}.dashboard-pipe small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.table-search{height:40px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}.table-search i{color:var(--muted)}.table-search input{width:170px;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:11px}.dashboard-table-wrap{width:100%;overflow-x:auto}.dashboard-table{width:100%;min-width:700px;border-collapse:collapse}.dashboard-table th{padding:10px;text-align:start;color:var(--muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--line)}.dashboard-table td{padding:12px 10px;color:var(--text);font-size:10.5px;border-bottom:1px solid var(--line)}.dashboard-table tbody tr{transition:background .2s ease}.dashboard-table tbody tr:hover{background:var(--bg-soft)}.table-person{display:flex;align-items:center;gap:8px}.table-avatar{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);font-size:9px;font-weight:950}.dashboard-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:7px;font-size:8px;font-weight:950}.dashboard-badge.green{background:color-mix(in srgb,#3a9560 11%,transparent);color:#3a9560}.dashboard-badge.amber{background:color-mix(in srgb,#b47b17 12%,transparent);color:#a66d0e}.dashboard-badge.red{background:color-mix(in srgb,#b33b4f 11%,transparent);color:#b33b4f}.route-summary{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;align-items:end;gap:5px 9px;padding:13px;border-radius:12px;background:var(--bg-soft);margin-bottom:5px}.route-summary strong{font-size:18px;color:var(--text)}.route-summary span{color:var(--muted);font-size:9px}.warning-text{color:#b47b17!important}.stock-list{display:grid;gap:13px}.stock-list>div{display:grid;grid-template-columns:90px 1fr 35px;align-items:center;gap:9px}.stock-list span{font-size:10px;font-weight:850}.stock-list>div>div{height:7px;border-radius:99px;background:var(--bg-soft);overflow:hidden}.stock-list i{display:block;height:100%;border-radius:inherit;background:var(--brand);animation:dashProgress 1s ease both}.stock-list b{font-size:9px;text-align:end;color:var(--muted)}.admin-product{grid-template-columns:65px 1fr auto}.admin-product .product-image{width:65px;height:65px}.admin-product .dashboard-btn{grid-column:3;grid-row:1}.admin-product .product-copy{grid-column:2}.admin-product .dashboard-btn:hover{transform:translateY(-2px)}
.dashboard-drawer-backdrop{position:fixed;inset:0;z-index:6000;background:rgba(15,7,10,.5);opacity:0;visibility:hidden;transition:.3s ease}.dashboard-drawer-backdrop.open{opacity:1;visibility:visible}.dashboard-drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(430px,92vw);z-index:6001;padding:25px;background:var(--surface);border-inline-start:1px solid var(--line);box-shadow:-18px 0 45px rgba(30,15,20,.16);overflow:auto;transform:translateX(105%);transition:.42s cubic-bezier(.16,1,.3,1)}.dashboard-drawer.open{transform:translateX(0)}html[dir="rtl"] .dashboard-drawer{inset-inline-end:auto;inset-inline-start:0;transform:translateX(-105%);border-inline-start:0;border-inline-end:1px solid var(--line)}html[dir="rtl"] .dashboard-drawer.open{transform:translateX(0)}.dashboard-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dashboard-drawer-head h2{margin:0}.dashboard-close{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);cursor:pointer}.drawer-person{display:flex;align-items:center;gap:12px;padding:13px;border-radius:13px;background:var(--bg-soft);margin-bottom:15px}.drawer-person strong{display:block;font-size:12px}.drawer-person small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.dashboard-mini-list{display:grid;gap:0;margin-bottom:18px}.dashboard-mini-list>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.dashboard-mini-list strong,.dashboard-mini-list span{font-size:11px}.dashboard-mini-list span{color:var(--muted)}
.dashboard-toast{position:fixed;right:22px;bottom:22px;z-index:7000;max-width:min(360px,calc(100vw - 44px));padding:12px 15px;border-radius:12px;background:var(--brand-strong);color:#fff;box-shadow:var(--shadow-lg);font-size:11px;font-weight:900;opacity:0;transform:translateY(15px);pointer-events:none;transition:.3s ease}.dashboard-toast.show{opacity:1;transform:translateY(0)}
@keyframes dashReveal{from{opacity:.15;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes dashJump{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 25%,transparent)}100%{box-shadow:0 0 0 14px transparent}}@keyframes dashFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes dashHeroFloat{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(0) translateY(-7px)}}@keyframes dashSpin{to{transform:rotate(360deg)}}@keyframes dashProgress{from{transform:scaleX(0)}}@keyframes dashChart{to{stroke-dashoffset:0}}@keyframes dashPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.65}}@keyframes dashPulseSoft{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 18%,transparent)}50%{box-shadow:0 0 0 8px transparent}}@keyframes dashIconBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}@keyframes dashShimmer{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
@media (max-width:1180px){.dashboard-shell{grid-template-columns:248px minmax(0,1fr)}.dashboard-main{padding-inline:22px}.dashboard-topbar{margin-inline:-22px;padding-inline:22px}.dashboard-stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-box-selector{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-products{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-admin-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-overview-grid,.dashboard-customize-grid,.dashboard-history-grid,.admin-main-grid,.admin-two-grid{grid-template-columns:1fr}.dashboard-hero{grid-template-columns:1fr 300px}}
@media (max-width:1023px){.dashboard-shell{display:block;min-height:calc(100vh - 82px)}.dashboard-sidebar{position:fixed;inset-block:0;inset-inline-start:0;top:0;width:min(310px,86vw);height:100vh;padding:24px 16px;transform:translateX(-105%);transition:transform .42s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-lg);z-index:6500}.dashboard-sidebar.open{transform:translateX(0)}html[dir="rtl"] .dashboard-sidebar{inset-inline-start:auto;inset-inline-end:0;transform:translateX(105%)}html[dir="rtl"] .dashboard-sidebar.open{transform:translateX(0)}.dashboard-mobile-overlay{position:fixed;inset:0;z-index:6400;background:rgba(15,7,10,.48);opacity:0;visibility:hidden;transition:.3s}.dashboard-mobile-overlay.open{opacity:1;visibility:visible}.dashboard-brand-mini span,.dashboard-profile .profile-copy,.dashboard-nav-title,.dashboard-nav button span,.dashboard-side-action span{display:block}.dashboard-nav button,.dashboard-side-action{justify-content:flex-start}.dashboard-main{padding:0 20px 45px}.dashboard-topbar{margin:0 -20px;padding:12px 20px}.dashboard-mobile-menu{display:grid}.dashboard-hero{grid-template-columns:1fr 250px}.dashboard-admin-welcome{grid-template-columns:1fr}.admin-live{justify-self:start}.dashboard-products{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-box-selector{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.dashboard-main{padding:0 14px 38px}.dashboard-topbar{margin:0 -14px;padding:11px 14px;min-height:62px}.dashboard-top-icon{width:38px;height:38px}.dashboard-top-actions{gap:6px}.dashboard-content{padding-top:17px;gap:14px}.dashboard-hero{grid-template-columns:1fr;min-height:0;padding:24px 20px}.hero-copy h1,.dashboard-admin-welcome h1{font-size:31px}.hero-visual{min-height:180px}.hero-visual img{width:205px;height:160px}.hero-ring{width:235px;height:175px}.chip-one{right:4px}.chip-two{left:2px}.dashboard-stat-strip,.dashboard-admin-metrics{grid-template-columns:1fr 1fr;gap:9px}.dashboard-metric{min-height:110px;padding:14px}.dashboard-metric strong{font-size:20px}.dashboard-panel{padding:18px;border-radius:17px}.panel-head{display:block}.panel-head>.dashboard-btn,.panel-head>.chart-growth,.panel-actions{margin-top:11px}.subscription-layout{grid-template-columns:1fr;gap:14px}.subscription-image{height:185px}.dashboard-timeline{grid-template-columns:1fr;gap:9px}.dashboard-step{text-align:start;display:grid;grid-template-columns:34px 1fr;column-gap:8px;align-items:center}.dashboard-step:not(:last-child):after{left:16px;top:32px;width:2px;height:20px}.dashboard-step i{margin:0}.dashboard-step strong{margin:0}.dashboard-step small{grid-column:2}.dashboard-box-selector{grid-template-columns:1fr 1fr}.dashboard-box-option .box-image{height:105px}.dashboard-products{grid-template-columns:1fr}.dashboard-product{grid-template-columns:58px minmax(0,1fr)}.dashboard-product .product-image{width:58px;height:58px}.history-list>div{grid-template-columns:58px 1fr auto}.history-list em{display:none}.history-list b{grid-column:3}.dashboard-form{grid-template-columns:1fr}.dashboard-form .wide{grid-column:auto}.dashboard-admin-welcome{min-height:0;padding:23px 20px}.chart-summary{grid-template-columns:1fr}.route-summary{grid-template-columns:auto 1fr auto 1fr auto 1fr}.dashboard-table{min-width:650px}.table-search input{width:135px}.panel-actions{align-items:stretch}.admin-product{grid-template-columns:58px 1fr}.admin-product .product-image{width:58px;height:58px}.admin-product .dashboard-btn{grid-column:1/-1;grid-row:auto;width:100%}.dashboard-drawer{width:min(390px,94vw);padding:20px}.dashboard-toast{right:14px;bottom:14px}.dashboard-sidebar{width:min(300px,88vw)}}
html[dir="rtl"] .dashboard-nav button:hover,html[dir="rtl"] .dashboard-side-action:hover{transform:translateX(-3px)}
html[dir="rtl"] .dashboard-step:not(:last-child):after{left:auto;right:61%;}html[dir="rtl"] .dashboard-progress span{transform-origin:right}
@media (max-width:767px){html[dir="rtl"] .dashboard-step:not(:last-child):after{left:auto;right:16px}.dashboard-drawer-open{overflow:hidden}}
@media (prefers-reduced-motion:reduce){.dashboard-page *,.dashboard-page *:before,.dashboard-page *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.dashboard-reveal{opacity:1!important;transform:none!important}}

/* ============================================================
   DASHBOARD LAYOUT FIX — sidebar + content grid
   The mobile overlay must never become a desktop grid column.
   ============================================================ */
body.dashboard-page .dashboard-shell{
  display:grid !important;
  grid-template-columns:272px minmax(0,1fr) !important;
  grid-template-rows:1fr !important;
  align-items:stretch !important;
  min-height:calc(100vh - 82px) !important;
  position:relative;
}
body.dashboard-page .dashboard-sidebar{
  grid-column:1 !important;
  grid-row:1 !important;
  position:sticky !important;
  top:82px !important;
  align-self:start !important;
  height:calc(100vh - 82px) !important;
  min-height:0 !important;
}
body.dashboard-page .dashboard-main{
  grid-column:2 !important;
  grid-row:1 !important;
  display:block !important;
  position:relative !important;
  min-width:0 !important;
  min-height:calc(100vh - 82px) !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.dashboard-page .dashboard-mobile-overlay{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  z-index:6400 !important;
}
body.dashboard-page .dashboard-topbar{
  width:auto !important;
  min-width:0 !important;
}
body.dashboard-page .dashboard-content{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.dashboard-page .dashboard-content > section,
body.dashboard-page .dashboard-content > article{
  visibility:visible !important;
  opacity:1 !important;
}

/* Desktop: empty left side, controls only on the right */
@media (min-width:1024px){
  body.dashboard-page .dashboard-topbar-left{
    min-width:1px !important;
    width:1px !important;
  }
  body.dashboard-page .dashboard-mobile-menu{
    display:none !important;
  }
  body.dashboard-page .dashboard-top-actions{
    margin-inline-start:auto !important;
  }
}

/* Tablet + mobile: sidebar becomes the only off-canvas navigation */
@media (max-width:1023px){
  body.dashboard-page .dashboard-shell{
    display:block !important;
    min-height:calc(100vh - 82px) !important;
  }
  body.dashboard-page .dashboard-sidebar{
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    inset-inline-start:0 !important;
    width:min(310px,86vw) !important;
    height:100vh !important;
    z-index:6500 !important;
  }
  body.dashboard-page .dashboard-main{
    display:block !important;
    width:100% !important;
    min-height:calc(100vh - 82px) !important;
  }
  body.dashboard-page .dashboard-mobile-overlay{
    display:block !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease,visibility .3s ease;
  }
  body.dashboard-page .dashboard-mobile-overlay.open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  body.dashboard-page .dashboard-topbar{
    display:flex !important;
    justify-content:space-between !important;
  }
  body.dashboard-page .dashboard-topbar-left{
    min-width:42px !important;
    width:auto !important;
  }
  body.dashboard-page .dashboard-mobile-menu{
    display:grid !important;
  }
}

/* RTL: sidebar moves to the right and drawer direction follows it */
@media (max-width:1023px){
  html[dir="rtl"] body.dashboard-page .dashboard-sidebar{
    inset-inline-start:auto !important;
    inset-inline-end:0 !important;
    transform:translateX(105%) !important;
  }
  html[dir="rtl"] body.dashboard-page .dashboard-sidebar.open{
    transform:translateX(0) !important;
  }
}

/* ============================================================
   FreshRhythm DASHBOARD FINAL STRUCTURE OVERRIDES
   - Dashboard pages have NO global website navbar.
   - Desktop/laptop: sticky full-height sidebar.
   - Dashboard topbar has an empty left area and controls on right.
   - Tablet/mobile: hamburger opens the complete sidebar.
   - Only real/implemented sidebar destinations are shown.
   - Dashboard typography is never smaller than 15px.
   ============================================================ */

body.dashboard-page{
  overflow-x:hidden !important;
  min-width:0 !important;
}
body.dashboard-page > header,
body.dashboard-page header{
  display:none !important;
}
body.dashboard-page main{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
body.dashboard-page .dashboard-shell{
  display:grid !important;
  grid-template-columns:280px minmax(0,1fr) !important;
  min-height:100vh !important;
  height:auto !important;
  align-items:stretch !important;
  position:relative !important;
}
body.dashboard-page .dashboard-sidebar{
  position:sticky !important;
  top:0 !important;
  height:100vh !important;
  max-height:100vh !important;
  align-self:start !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  z-index:6500 !important;
  box-sizing:border-box !important;
  padding:24px 17px 30px !important;
}
body.dashboard-page .dashboard-main{
  grid-column:2 !important;
  min-width:0 !important;
  width:auto !important;
  min-height:100vh !important;
  padding:0 30px 60px !important;
}
body.dashboard-page .dashboard-topbar{
  position:sticky !important;
  top:0 !important;
  z-index:6400 !important;
  min-height:72px !important;
  margin:0 -30px !important;
  padding:12px 30px !important;
  box-sizing:border-box !important;
  justify-content:space-between !important;
}
body.dashboard-page .dashboard-topbar-left{
  flex:1 1 auto !important;
  min-width:1px !important;
  width:auto !important;
}
body.dashboard-page .dashboard-top-actions{
  margin-inline-start:auto !important;
  flex:0 0 auto !important;
  gap:10px !important;
}
body.dashboard-page .dashboard-mobile-menu{
  display:none !important;
}
body.dashboard-page .dashboard-content{
  width:100% !important;
  max-width:none !important;
  padding-top:22px !important;
  display:grid !important;
  gap:24px !important;
  box-sizing:border-box !important;
}
body.dashboard-page .dashboard-content > section,
body.dashboard-page .dashboard-content > article{
  margin:0 !important;
  min-width:0 !important;
}

/* Sidebar: logo -> profile -> actual menus only */
body.dashboard-page .dashboard-brand-mini{
  padding:0 9px 22px !important;
  margin:0 !important;
}
body.dashboard-page .dashboard-profile{
  margin:0 0 22px !important;
}
body.dashboard-page .dashboard-nav-title{
  margin:20px 10px 9px !important;
}
body.dashboard-page .dashboard-nav{
  gap:5px !important;
}
body.dashboard-page .dashboard-nav button{
  min-height:48px !important;
  padding:11px 13px !important;
}
body.dashboard-page .dashboard-sidebar-bottom{
  display:none !important;
}

/* Dashboard typography: 15px minimum for readable content */
body.dashboard-page .dashboard-sidebar,
body.dashboard-page .dashboard-content,
body.dashboard-page .dashboard-content p,
body.dashboard-page .dashboard-content span,
body.dashboard-page .dashboard-content small,
body.dashboard-page .dashboard-content label,
body.dashboard-page .dashboard-content button,
body.dashboard-page .dashboard-content input,
body.dashboard-page .dashboard-content select,
body.dashboard-page .dashboard-content td,
body.dashboard-page .dashboard-content th{
  font-size:15px !important;
}
body.dashboard-page .dashboard-profile strong{font-size:15px !important}
body.dashboard-page .dashboard-profile small{font-size:15px !important}
body.dashboard-page .dashboard-profile em{font-size:15px !important}
body.dashboard-page .dashboard-nav-title{font-size:15px !important}
body.dashboard-page .dashboard-nav button{font-size:15px !important}
body.dashboard-page .dashboard-kicker,
body.dashboard-page .panel-label{font-size:15px !important}
body.dashboard-page .hero-copy p,
body.dashboard-page .dashboard-admin-welcome p,
body.dashboard-page .panel-head p,
body.dashboard-page .dashboard-panel > p{font-size:15px !important;line-height:1.65 !important}
body.dashboard-page .hero-note{font-size:15px !important}
body.dashboard-page .dashboard-metric > span:last-child{font-size:15px !important}
body.dashboard-page .metric-trend{font-size:15px !important}
body.dashboard-page .dashboard-box-option strong{font-size:15px !important}
body.dashboard-page .dashboard-box-option small{font-size:15px !important}
body.dashboard-page .dashboard-product .product-copy strong{font-size:15px !important}
body.dashboard-page .dashboard-product .product-copy small{font-size:15px !important}
body.dashboard-page .dashboard-btn{font-size:15px !important}
body.dashboard-page .dashboard-btn.small{font-size:15px !important}
body.dashboard-page .dashboard-table th,
body.dashboard-page .dashboard-table td{font-size:15px !important}
body.dashboard-page .dashboard-badge{font-size:15px !important}
body.dashboard-page .dashboard-step strong,
body.dashboard-page .dashboard-step small{font-size:15px !important}
body.dashboard-page .dashboard-form label{font-size:15px !important}
body.dashboard-page .dashboard-form input,
body.dashboard-page .dashboard-form select{font-size:15px !important}
body.dashboard-page .table-search input{font-size:15px !important}
body.dashboard-page .stock-list span,
body.dashboard-page .stock-list b{font-size:15px !important}
body.dashboard-page .route-summary span{font-size:15px !important}
body.dashboard-page .progress-meta{font-size:15px !important}
body.dashboard-page .chart-labels{font-size:15px !important}
body.dashboard-page .chart-summary small{font-size:15px !important}
body.dashboard-page .chart-summary strong{font-size:18px !important}
body.dashboard-page .ops-list strong,
body.dashboard-page .ops-list b{font-size:15px !important}
body.dashboard-page .dashboard-pipe strong,
body.dashboard-page .dashboard-pipe small{font-size:15px !important}
body.dashboard-page .history-list span,
body.dashboard-page .history-list em,
body.dashboard-page .history-list strong,
body.dashboard-page .history-list b{font-size:15px !important}
body.dashboard-page .dashboard-invoice-row strong,
body.dashboard-page .dashboard-invoice-row small{font-size:15px !important}
body.dashboard-page .total-pill span,
body.dashboard-page .total-pill b{font-size:15px !important}

/* More consistent spacing; prevent cramped/uneven dashboard rows */
body.dashboard-page .dashboard-stat-strip,
body.dashboard-page .dashboard-admin-metrics{
  gap:16px !important;
}
body.dashboard-page .dashboard-overview-grid,
body.dashboard-page .dashboard-customize-grid,
body.dashboard-page .dashboard-history-grid,
body.dashboard-page .admin-main-grid,
body.dashboard-page .admin-two-grid{
  gap:24px !important;
}
body.dashboard-page .dashboard-panel{
  padding:26px !important;
  margin:0 !important;
}
body.dashboard-page .panel-head{
  margin-bottom:20px !important;
  gap:18px !important;
}
body.dashboard-page .dashboard-products{
  gap:14px !important;
}
body.dashboard-page .dashboard-box-selector{
  gap:14px !important;
}
body.dashboard-page .dashboard-form{
  gap:17px !important;
}
body.dashboard-page .dashboard-top-icon{
  width:44px !important;
  height:44px !important;
}

/* Hero stays filled but avoids excessive vertical whitespace */
body.dashboard-page .dashboard-hero,
body.dashboard-page .dashboard-admin-welcome{
  min-height:270px !important;
}
body.dashboard-page .dashboard-content .dashboard-stat-strip{
  margin:0 !important;
}
body.dashboard-page .dashboard-content .dashboard-admin-metrics{
  margin:0 !important;
}

/* Keep the desktop sidebar sticky; main content is the scrolling surface */
@media (min-width:1024px){
  body.dashboard-page .dashboard-sidebar{
    position:sticky !important;
    top:0 !important;
  }
  body.dashboard-page .dashboard-main{
    overflow:visible !important;
  }
}

/* Tablet/mobile: hamburger + right-side controls, complete off-canvas sidebar */
@media (max-width:1023px){
  body.dashboard-page .dashboard-shell{
    display:block !important;
    min-height:100vh !important;
  }
  body.dashboard-page .dashboard-sidebar{
    position:fixed !important;
    top:0 !important;
    bottom:0 !important;
    inset-inline-start:0 !important;
    inset-inline-end:auto !important;
    width:min(320px,88vw) !important;
    height:100vh !important;
    max-height:100vh !important;
    z-index:7000 !important;
    transform:translateX(-105%) !important;
    transition:transform .4s cubic-bezier(.16,1,.3,1) !important;
  }
  body.dashboard-page .dashboard-sidebar.open{
    transform:translateX(0) !important;
  }
  html[dir="rtl"] body.dashboard-page .dashboard-sidebar{
    inset-inline-start:auto !important;
    inset-inline-end:0 !important;
    transform:translateX(105%) !important;
  }
  html[dir="rtl"] body.dashboard-page .dashboard-sidebar.open{
    transform:translateX(0) !important;
  }
  body.dashboard-page .dashboard-main{
    width:100% !important;
    min-height:100vh !important;
    padding:0 22px 45px !important;
  }
  body.dashboard-page .dashboard-topbar{
    margin:0 -22px !important;
    padding:12px 22px !important;
    min-height:68px !important;
  }
  body.dashboard-page .dashboard-topbar-left{
    flex:0 0 auto !important;
    width:44px !important;
    min-width:44px !important;
  }
  body.dashboard-page .dashboard-mobile-menu{
    display:grid !important;
  }
  body.dashboard-page .dashboard-top-actions{
    margin-inline-start:auto !important;
  }
  body.dashboard-page .dashboard-content{
    padding-top:20px !important;
    gap:18px !important;
  }
}
@media (max-width:767px){
  body.dashboard-page .dashboard-main{
    padding:0 14px 38px !important;
  }
  body.dashboard-page .dashboard-topbar{
    margin:0 -14px !important;
    padding:10px 14px !important;
    min-height:64px !important;
  }
  body.dashboard-page .dashboard-top-actions{
    gap:7px !important;
  }
  body.dashboard-page .dashboard-top-icon{
    width:40px !important;
    height:40px !important;
  }
  body.dashboard-page .dashboard-content{
    gap:16px !important;
  }
  body.dashboard-page .dashboard-panel{
    padding:20px !important;
  }
  body.dashboard-page .dashboard-hero,
  body.dashboard-page .dashboard-admin-welcome{
    min-height:0 !important;
    padding:24px 20px !important;
  }
  body.dashboard-page .dashboard-stat-strip,
  body.dashboard-page .dashboard-admin-metrics{
    gap:10px !important;
  }
  body.dashboard-page .dashboard-overview-grid,
  body.dashboard-page .dashboard-customize-grid,
  body.dashboard-page .dashboard-history-grid,
  body.dashboard-page .admin-main-grid,
  body.dashboard-page .admin-two-grid{
    gap:16px !important;
  }
}
@media (prefers-reduced-motion:reduce){
  body.dashboard-page .dashboard-sidebar,
  body.dashboard-page .dashboard-topbar,
  body.dashboard-page *{
    transition:none !important;
  }
}

/* ============================================================
   DASHBOARD POLISH FIX — compact spacing + reliable RTL + mobile close
   ============================================================ */
body.dashboard-page{
  overflow-x:hidden !important;
  text-rendering:optimizeLegibility;
}
body.dashboard-page .dashboard-content{
  grid-auto-rows:max-content !important;
  align-content:start !important;
  row-gap:14px !important;
  column-gap:14px !important;
}
body.dashboard-page .dashboard-content > section,
body.dashboard-page .dashboard-content > article{
  align-self:start !important;
}
body.dashboard-page .dashboard-stat-strip,
body.dashboard-page .dashboard-admin-metrics{
  gap:12px !important;
  align-content:start !important;
}
body.dashboard-page .dashboard-overview-grid,
body.dashboard-page .dashboard-customize-grid,
body.dashboard-page .dashboard-history-grid,
body.dashboard-page .admin-main-grid,
body.dashboard-page .admin-two-grid{
  gap:14px !important;
  align-content:start !important;
}
body.dashboard-page .dashboard-panel{
  margin:0 !important;
}
body.dashboard-page .dashboard-hero,
body.dashboard-page .dashboard-admin-welcome{
  margin:0 !important;
}
body.dashboard-page .dashboard-nav-title{
  margin-top:16px !important;
}
body.dashboard-page .dashboard-sidebar-close{
  display:none;
}

/* RTL must move the full dashboard shell, sidebar and internal flow cleanly. */
html[dir="rtl"] body.dashboard-page{
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-shell{
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-sidebar{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:stretch !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-main{
  grid-column:2 !important;
  grid-row:1 !important;
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-topbar{
  direction:ltr !important; /* controls remain on the right edge */
}
html[dir="rtl"] body.dashboard-page .dashboard-top-actions{
  margin-left:0 !important;
  margin-right:auto !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-content{
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-panel,
html[dir="rtl"] body.dashboard-page .dashboard-hero,
html[dir="rtl"] body.dashboard-page .dashboard-admin-welcome{
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .panel-head,
html[dir="rtl"] body.dashboard-page .metric-top,
html[dir="rtl"] body.dashboard-page .invoice-right,
html[dir="rtl"] body.dashboard-page .subscription-price,
html[dir="rtl"] body.dashboard-page .progress-meta{
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-table{
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-sidebar{
  text-align:right !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-brand-mini,
html[dir="rtl"] body.dashboard-page .dashboard-profile,
html[dir="rtl"] body.dashboard-page .dashboard-nav button{
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-nav button{
  justify-content:flex-start !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-nav button i{
  order:2;
  margin-inline-start:0;
  margin-inline-end:0;
}
html[dir="rtl"] body.dashboard-page .dashboard-nav button span{
  order:1;
}

/* Tablet/mobile: hamburger + explicit cancel button inside the sidebar. */
@media (max-width:1023px){
  body.dashboard-page .dashboard-sidebar{
    display:block !important;
    transform:translateX(-105%) !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:transform .38s cubic-bezier(.16,1,.3,1),visibility .38s ease !important;
  }
  body.dashboard-page .dashboard-sidebar.open{
    transform:translateX(0) !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  html[dir="rtl"] body.dashboard-page .dashboard-sidebar{
    transform:translateX(105%) !important;
    inset-inline-start:auto !important;
    inset-inline-end:0 !important;
  }
  html[dir="rtl"] body.dashboard-page .dashboard-sidebar.open{
    transform:translateX(0) !important;
  }
  body.dashboard-page .dashboard-sidebar-close{
    display:grid !important;
    position:absolute !important;
    top:16px !important;
    inset-inline-end:14px !important;
    width:40px !important;
    height:40px !important;
    place-items:center !important;
    border:1px solid var(--line) !important;
    border-radius:11px !important;
    background:var(--surface) !important;
    color:var(--text) !important;
    cursor:pointer !important;
    z-index:2 !important;
    box-shadow:var(--shadow-sm) !important;
  }
  body.dashboard-page .dashboard-brand-mini{
    padding-inline-end:55px !important;
  }
  body.dashboard-page .dashboard-content{
    row-gap:14px !important;
  }
}
@media (max-width:767px){
  body.dashboard-page .dashboard-content{
    row-gap:12px !important;
  }
  body.dashboard-page .dashboard-stat-strip,
  body.dashboard-page .dashboard-admin-metrics{
    gap:9px !important;
  }
  body.dashboard-page .dashboard-overview-grid,
  body.dashboard-page .dashboard-customize-grid,
  body.dashboard-page .dashboard-history-grid,
  body.dashboard-page .admin-main-grid,
  body.dashboard-page .admin-two-grid{
    gap:12px !important;
  }
}

/* Keep the dashboard page itself as the only scroll surface on desktop. */
@media (min-width:1024px){
  body.dashboard-page .dashboard-shell{
    min-height:100vh !important;
    grid-template-rows:auto !important;
  }
  body.dashboard-page .dashboard-sidebar{
    position:sticky !important;
    top:0 !important;
    height:100vh !important;
  }
}

/* Reduced motion remains accessible. */
@media (prefers-reduced-motion:reduce){
  body.dashboard-page .dashboard-sidebar,
  body.dashboard-page .dashboard-sidebar-close,
  body.dashboard-page .dashboard-mobile-overlay{
    transition:none !important;
  }
}

/* Controls stay pinned to the right edge even when the content direction is RTL. */
body.dashboard-page .dashboard-topbar{
  position:sticky !important;
  isolation:isolate;
}
body.dashboard-page .dashboard-top-actions{
  position:absolute !important;
  right:30px !important;
  left:auto !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
}
body.dashboard-page .dashboard-topbar-left{
  width:100% !important;
  min-width:0 !important;
}
@media (max-width:1023px){
  body.dashboard-page .dashboard-top-actions{
    right:22px !important;
  }
  body.dashboard-page .dashboard-topbar-left{
    width:44px !important;
  }
}
@media (max-width:767px){
  body.dashboard-page .dashboard-top-actions{
    right:14px !important;
  }
}
html[dir="rtl"] body.dashboard-page .dashboard-top-actions{
  right:30px !important;
  left:auto !important;
}
@media (max-width:1023px){
  html[dir="rtl"] body.dashboard-page .dashboard-top-actions{right:22px !important;}
}
@media (max-width:767px){
  html[dir="rtl"] body.dashboard-page .dashboard-top-actions{right:14px !important;}
}

/* ============================================================
   FreshRhythm Dashboard — FINAL STRUCTURE / SPACING / RTL
   ============================================================ */

/* Dashboard pages must not inherit the public-site header/footer spacing. */
body.dashboard-page{
  overflow-x:hidden !important;
  margin:0 !important;
}
body.dashboard-page > header,
body.dashboard-page > footer,
body.dashboard-page > .top{
  display:none !important;
}

/* Remove the generic public-site section padding that was creating
   the very large gaps between dashboard blocks. */
body.dashboard-page main{
  padding:0 !important;
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
}
body.dashboard-page .dashboard-content{
  display:grid !important;
  grid-auto-rows:max-content !important;
  align-content:start !important;
  gap:16px !important;
  padding:16px 0 30px !important;
}
body.dashboard-page .dashboard-content > section{
  min-height:0 !important;
  margin:0 !important;
  align-self:start !important;
}
body.dashboard-page .dashboard-content > section.dashboard-overview-grid,
body.dashboard-page .dashboard-content > section.dashboard-customize-grid,
body.dashboard-page .dashboard-content > section.dashboard-history-grid,
body.dashboard-page .dashboard-content > section.admin-main-grid,
body.dashboard-page .dashboard-content > section.admin-two-grid{
  padding:0 !important;
}
body.dashboard-page .dashboard-content > section.dashboard-stat-strip,
body.dashboard-page .dashboard-content > section.dashboard-admin-metrics{
  padding:0 !important;
}
body.dashboard-page .dashboard-content > section.dashboard-panel{
  padding:23px !important;
}
body.dashboard-page .dashboard-content > section.dashboard-hero,
body.dashboard-page .dashboard-content > section.dashboard-admin-welcome{
  padding:34px 38px !important;
}

/* Sidebar: fixed/sticky desktop structure. */
body.dashboard-page .dashboard-shell{
  display:grid !important;
  grid-template-columns:272px minmax(0,1fr) !important;
  min-height:100vh !important;
  align-items:stretch !important;
  direction:ltr !important;
}
body.dashboard-page .dashboard-sidebar{
  grid-column:1 !important;
  grid-row:1 !important;
  position:sticky !important;
  top:0 !important;
  height:100vh !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  z-index:2000 !important;
}
body.dashboard-page .dashboard-main{
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  direction:ltr !important;
}
body.dashboard-page .dashboard-brand-mini{
  text-decoration:none !important;
  color:var(--text) !important;
  cursor:pointer !important;
}
body.dashboard-page .dashboard-brand-mini:hover{
  color:var(--brand) !important;
}
body.dashboard-page .dashboard-brand-mini .dashboard-logo-mark{
  flex:none !important;
}

/* Topbar: intentionally empty on the left; controls always on the right. */
body.dashboard-page .dashboard-topbar{
  direction:ltr !important;
  min-height:70px !important;
}
body.dashboard-page .dashboard-topbar-left{
  width:100% !important;
  min-width:0 !important;
}
body.dashboard-page .dashboard-top-actions{
  position:absolute !important;
  right:30px !important;
  left:auto !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  direction:ltr !important;
}

/* ------------------------- TRUE RTL ------------------------- */
/* Do not rely on flex/grid direction alone. Explicitly place the
   sidebar on column 2 and the dashboard main on column 1. */
html[dir="rtl"] body.dashboard-page,
body.dashboard-page[dir="rtl"]{
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-shell,
body.dashboard-page[dir="rtl"] .dashboard-shell{
  direction:ltr !important;
  grid-template-columns:minmax(0,1fr) 272px !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-sidebar,
body.dashboard-page[dir="rtl"] .dashboard-sidebar{
  grid-column:2 !important;
  grid-row:1 !important;
  border-inline-end:0 !important;
  border-inline-start:1px solid var(--line) !important;
  direction:rtl !important;
  text-align:right !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-main,
body.dashboard-page[dir="rtl"] .dashboard-main{
  grid-column:1 !important;
  grid-row:1 !important;
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-content,
body.dashboard-page[dir="rtl"] .dashboard-content{
  direction:rtl !important;
  text-align:right !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-topbar,
body.dashboard-page[dir="rtl"] .dashboard-topbar{
  direction:ltr !important;
  text-align:left !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-topbar-left,
body.dashboard-page[dir="rtl"] .dashboard-topbar-left{
  direction:ltr !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-top-actions,
body.dashboard-page[dir="rtl"] .dashboard-top-actions{
  direction:ltr !important;
  right:30px !important;
  left:auto !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-brand-mini,
body.dashboard-page[dir="rtl"] .dashboard-brand-mini,
html[dir="rtl"] body.dashboard-page .dashboard-profile,
body.dashboard-page[dir="rtl"] .dashboard-profile{
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-nav button,
body.dashboard-page[dir="rtl"] .dashboard-nav button{
  direction:rtl !important;
  justify-content:flex-start !important;
  text-align:right !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-nav button i,
body.dashboard-page[dir="rtl"] .dashboard-nav button i{
  order:2 !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-nav button span,
body.dashboard-page[dir="rtl"] .dashboard-nav button span{
  order:1 !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-panel,
html[dir="rtl"] body.dashboard-page .dashboard-hero,
html[dir="rtl"] body.dashboard-page .dashboard-admin-welcome,
body.dashboard-page[dir="rtl"] .dashboard-panel,
body.dashboard-page[dir="rtl"] .dashboard-hero,
body.dashboard-page[dir="rtl"] .dashboard-admin-welcome{
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-table,
body.dashboard-page[dir="rtl"] .dashboard-table{
  direction:rtl !important;
}
html[dir="rtl"] body.dashboard-page .dashboard-progress span,
body.dashboard-page[dir="rtl"] .dashboard-progress span{
  transform-origin:right !important;
}

/* -------------------- TABLET / MOBILE -------------------- */
@media (max-width:1023px){
  body.dashboard-page .dashboard-shell,
  html[dir="rtl"] body.dashboard-page .dashboard-shell,
  body.dashboard-page[dir="rtl"] .dashboard-shell{
    display:block !important;
    min-height:100vh !important;
  }
  body.dashboard-page .dashboard-main{
    width:100% !important;
    box-sizing:border-box !important;
    padding:0 20px 35px !important;
  }
  body.dashboard-page .dashboard-topbar{
    margin:0 -20px !important;
    padding:12px 20px !important;
  }
  body.dashboard-page .dashboard-sidebar{
    position:fixed !important;
    inset-block:0 !important;
    inset-inline-start:0 !important;
    inset-inline-end:auto !important;
    top:0 !important;
    width:min(310px,86vw) !important;
    height:100vh !important;
    transform:translateX(-105%) !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:6500 !important;
  }
  body.dashboard-page .dashboard-sidebar.open{
    transform:translateX(0) !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  html[dir="rtl"] body.dashboard-page .dashboard-sidebar,
  body.dashboard-page[dir="rtl"] .dashboard-sidebar{
    inset-inline-start:auto !important;
    inset-inline-end:0 !important;
    transform:translateX(105%) !important;
  }
  html[dir="rtl"] body.dashboard-page .dashboard-sidebar.open,
  body.dashboard-page[dir="rtl"] .dashboard-sidebar.open{
    transform:translateX(0) !important;
  }
  body.dashboard-page .dashboard-sidebar-close{
    display:grid !important;
    position:absolute !important;
    top:16px !important;
    inset-inline-end:14px !important;
    width:40px !important;
    height:40px !important;
    place-items:center !important;
    z-index:20 !important;
  }
  body.dashboard-page .dashboard-brand-mini{
    padding-inline-end:55px !important;
  }
  body.dashboard-page .dashboard-top-actions{
    right:22px !important;
    left:auto !important;
  }
  html[dir="rtl"] body.dashboard-page .dashboard-top-actions,
  body.dashboard-page[dir="rtl"] .dashboard-top-actions{
    right:22px !important;
    left:auto !important;
  }
  body.dashboard-page .dashboard-content{
    gap:14px !important;
    row-gap:14px !important;
    padding-top:14px !important;
  }
}

@media (max-width:767px){
  body.dashboard-page .dashboard-main{
    padding:0 14px 30px !important;
  }
  body.dashboard-page .dashboard-topbar{
    margin:0 -14px !important;
    padding:11px 14px !important;
    min-height:62px !important;
  }
  body.dashboard-page .dashboard-top-actions{
    right:14px !important;
    gap:6px !important;
  }
  html[dir="rtl"] body.dashboard-page .dashboard-top-actions,
  body.dashboard-page[dir="rtl"] .dashboard-top-actions{
    right:14px !important;
  }
  body.dashboard-page .dashboard-content{
    gap:12px !important;
    row-gap:12px !important;
    padding-top:12px !important;
  }
  body.dashboard-page .dashboard-content > section.dashboard-panel{
    padding:18px !important;
  }
  body.dashboard-page .dashboard-content > section.dashboard-hero,
  body.dashboard-page .dashboard-content > section.dashboard-admin-welcome{
    padding:24px 20px !important;
  }
}

/* Keep information readable and stop dashboard children from
   creating accidental overflow. */
body.dashboard-page .dashboard-panel,
body.dashboard-page .dashboard-hero,
body.dashboard-page .dashboard-admin-welcome,
body.dashboard-page .dashboard-metric{
  box-sizing:border-box !important;
  min-width:0 !important;
}
body.dashboard-page img{
  max-width:100%;
}

/* =====================================================================
   CONTACT PAGE — 7 bespoke sections
   Tight vertical rhythm throughout: every section below overrides the
   generic `section { padding:100px 0; min-height:400px; }` default so
   sections flow into each other with no dead gaps, per spec.
   ===================================================================== */

/* Shared kinetic heading (word + char stagger reveal) ------------------ */
.kinetic-heading {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  margin: 18px 0 20px;
}

.kinetic-heading.center { text-align: center; }

.kinetic-line { display: block; overflow: hidden; }

.kinetic-word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

[data-reveal].in .kinetic-word,
.contact-final-content.in .kinetic-word {
  transform: translateY(0);
  opacity: 1;
}

.kinetic-line:nth-child(1) .kinetic-word { transition-delay: 0.05s; }
.kinetic-line:nth-child(2) .kinetic-word { transition-delay: 0.16s; }
.kinetic-line:nth-child(3) .kinetic-word { transition-delay: 0.27s; }
.kinetic-line .kinetic-word:nth-child(2) { transition-delay: calc(0.06s + 0.05s); }

.kinetic-word.italic-accent {
  position: relative;
  font-style: italic;
  color: var(--brand);
  white-space: nowrap;
}

.kinetic-word.italic-accent i {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--brand) 55%, transparent);
  transform: scaleX(0);
  transform-origin: left;
}

[data-reveal].in .kinetic-word.italic-accent i,
.contact-final-content.in .kinetic-word.italic-accent i {
  animation: underlineDraw 0.9s 0.65s cubic-bezier(.4, 0, .2, 1) forwards;
}

.kinetic-chars .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%) rotate(6deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  transition-delay: calc(0.4s + var(--i) * 0.035s);
}

[data-reveal].in .kinetic-chars .ch,
.contact-final-content.in .kinetic-chars .ch {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* Shared button anatomy: fill sweep + magnetic + ripple ----------------- */
.magnetic-btn { position: relative; overflow: hidden; will-change: transform; }
.btn-content { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }
.btn-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-130%);
}
.magnetic-btn:hover .btn-fill { transform: translateX(130%); transition: transform 0.7s ease; }

.btn-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out;
  pointer-events: none;
  z-index: 3;
}

@keyframes rippleAnim {
  to { transform: scale(22); opacity: 0; }
}

/* Shared floating particles (reuses particleFloat keyframe) ------------- */
.contact-hero-particles, .contact-final-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.contact-hero-particles .particle, .contact-final-particles .particle {
  position: absolute;
  bottom: -30px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(122, 16, 48, 0.4);
  animation: particleFloat linear infinite;
}
.contact-final-particles .particle { background: rgba(240, 200, 105, 0.55); box-shadow: 0 0 10px 2px rgba(240, 200, 105, 0.3); }
.contact-hero-particles .p1, .contact-final-particles .p1 { left: 10%; animation-duration: 11s; animation-delay: 0s; }
.contact-hero-particles .p2, .contact-final-particles .p2 { left: 28%; animation-duration: 15s; animation-delay: 2s; width: 8px; height: 8px; }
.contact-hero-particles .p3, .contact-final-particles .p3 { left: 48%; animation-duration: 9s; animation-delay: 4s; }
.contact-hero-particles .p4, .contact-final-particles .p4 { left: 68%; animation-duration: 13s; animation-delay: 1s; }
.contact-hero-particles .p5, .contact-final-particles .p5 { left: 88%; animation-duration: 17s; animation-delay: 3s; }

/* -----------------------------------------------------------------------
   SECTION 1 — Immersive Contact Hero
   ----------------------------------------------------------------------- */
.contact-hero-section {
  position: relative;
  padding: 76px 0 56px;
  min-height: auto;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}

.contact-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.contact-hero-visual { position: relative; }

.contact-hero-image-mask {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  clip-path: inset(0 0 0 0);
  animation: heroMaskReveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-play-state: paused;
  box-shadow: var(--shadow-lg);
}

[data-reveal].in .contact-hero-image-mask { animation-play-state: running; }

@keyframes heroMaskReveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.contact-hero-image-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].in .contact-hero-image-mask img { transform: scale(1); }

.contact-hero-badge {
  position: absolute;
  bottom: -18px;
  left: -18px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact-hero-badge i { color: var(--brand); }

.contact-scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
}
.contact-scroll-cue i { animation: scrollCueBounce 1.8s ease-in-out infinite; }
.contact-scroll-cue:hover { color: var(--brand); }

@media (max-width: 900px) {
  .contact-hero-grid { grid-template-columns: 1fr; }
  .contact-hero-visual { order: -1; max-width: 380px; margin: 0 auto; }
  .contact-hero-badge { left: 10px; bottom: -14px; }
}

/* -----------------------------------------------------------------------
   SECTION 2 — Contact Details Orbit
   ----------------------------------------------------------------------- */
.contact-orbit-section { padding: 60px 0; min-height: auto; }

.contact-orbit-stage {
  position: relative;
  width: min(400px, 84vw);
  aspect-ratio: 1 / 1;
  margin: 20px auto 0;
}

.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--brand) 30%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 4 8;
  transform-origin: 200px 200px;
  animation: orbitRingSpin 40s linear infinite;
}
@keyframes orbitRingSpin { to { transform: rotate(360deg); } }

.orbit-line {
  stroke: color-mix(in srgb, var(--brand) 45%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}
.contact-orbit-section.in .orbit-line { animation: orbitDraw 1s ease forwards; }
.contact-orbit-section.in .orbit-line:nth-of-type(2) { animation-delay: 0.12s; }
.contact-orbit-section.in .orbit-line:nth-of-type(3) { animation-delay: 0.24s; }
.contact-orbit-section.in .orbit-line:nth-of-type(4) { animation-delay: 0.36s; }
@keyframes orbitDraw { to { stroke-dashoffset: 0; } }

.orbit-center {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-lg);
  z-index: 3;
}
.orbit-center img { width: 100%; height: 100%; object-fit: cover; }

.orbit-item {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 10px 16px 10px 12px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, translate 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
.orbit-item i {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease;
}
.orbit-item:hover { translate: 0 -3px; box-shadow: 0 12px 26px rgba(122, 16, 48, 0.22); }
.orbit-item:hover i { transform: rotate(18deg) scale(1.1); }
.orbit-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.orbit-value { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); }

.orbit-email    { inset-inline-start: 50%; inset-block-start: 0; transform: translate(-50%, 0); }
.orbit-phone    { inset-inline-start: 0; inset-block-start: 50%; transform: translate(0, -50%); }
.orbit-location { inset-inline-end: 0; inset-block-start: 50%; transform: translate(0, -50%); }
.orbit-hours    { inset-inline-start: 50%; inset-block-end: 0; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .contact-orbit-stage {
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .orbit-svg, .orbit-ring, .orbit-line { display: none; }
  .orbit-center { position: static; transform: none; width: 108px; height: 108px; }
  .orbit-item {
    position: static;
    transform: none !important;
    width: 100%;
    max-width: 320px;
    white-space: normal;
  }
}

/* -----------------------------------------------------------------------
   SECTION 3 — Creative Contact Form
   ----------------------------------------------------------------------- */
.contact-form-section { padding: 60px 0; min-height: auto; }

.contact-form-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.contact-form-points { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.contact-form-points li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; color: var(--text); }
.contact-form-points i { color: var(--brand); }

.contact-modern-form { display: flex; flex-direction: column; gap: 26px; }

.form-field { position: relative; }

.form-field input,
.form-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  padding: 10px 2px 10px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  outline: none;
  resize: none;
}

.form-field textarea { min-height: 90px; }

.form-field label {
  position: absolute;
  inset-inline-start: 2px;
  top: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 16px;
  pointer-events: none;
  transition: transform 0.25s ease, color 0.25s ease, font-size 0.25s ease;
  transform-origin: inline-start top;
}

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
  transform: translateY(-20px) scale(0.82);
  color: var(--brand);
}

.field-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.form-field:focus-within .field-underline { transform: scaleX(1); }
.form-field:focus-within input,
.form-field:focus-within textarea { color: var(--text); }

.field-error { display: none; color: #D8324A; font-size: 13.5px; margin-top: 6px; font-weight: 700; }
.field-error.show { display: block; }

.form-field.shake { animation: shakeKf 0.4s ease; }
@keyframes shakeKf {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.contact-submit-btn { position: relative; min-width: 220px; justify-content: center; }
.contact-submit-btn .btn-content { transition: opacity 0.2s ease; }
.contact-submit-btn .btn-spinner,
.contact-submit-btn .btn-success { display: none; }

.contact-submit-btn.is-loading .btn-label { display: none; }
.contact-submit-btn.is-loading .btn-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 248, 233, 0.4);
  border-top-color: var(--on-strong);
  animation: spinLoader 0.7s linear infinite;
}
@keyframes spinLoader { to { transform: rotate(360deg); } }

.contact-submit-btn.is-success .btn-label,
.contact-submit-btn.is-success .btn-spinner { display: none; }
.contact-submit-btn.is-success .btn-success {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.contact-submit-btn.is-success { background: #2E7D32; border-color: #2E7D32; }
@keyframes checkPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 900px) {
  .contact-form-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* -----------------------------------------------------------------------
   SECTION 4 — Location / Map Experience
   ----------------------------------------------------------------------- */
.contact-map-section { padding: 60px 0; min-height: auto; }

.contact-map-stage {
  max-width: 980px;
  margin: 20px auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

.contact-map-visual {
  position: relative;
  height: clamp(220px, 34vw, 320px);
  background-color: var(--bg-soft);
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  overflow: hidden;
}

.map-route-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-route-path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
[data-reveal].in .map-route-path { animation: routeDraw 1.6s ease forwards 0.15s; }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }

.map-origin-dot {
  position: absolute;
  left: 6.7%;
  top: 80%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-strong);
  transform: translate(-50%, -50%);
}

.map-pin {
  position: absolute;
  left: 92.5%;
  top: 18.3%;
  transform: translate(-50%, -100%) translateY(-30px);
  color: var(--brand-strong);
  font-size: 34px;
  opacity: 0;
}
[data-reveal].in .map-pin { animation: pinDrop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1.5s; }
@keyframes pinDrop {
  0%   { opacity: 0; transform: translate(-50%, -100%) translateY(-30px); }
  60%  { opacity: 1; transform: translate(-50%, -100%) translateY(4px); }
  100% { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
}
.map-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  transform: translateX(-50%);
  animation: mapPinPulse 2s ease-out infinite 2.2s;
}
@keyframes mapPinPulse {
  0%   { transform: translateX(-50%) scale(0.7); opacity: 0.9; }
  100% { transform: translateX(-50%) scale(2.4); opacity: 0; }
}

.contact-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 28px;
}
.map-address h4 { font-size: 15px; font-weight: 800; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.map-address h4 i { color: var(--brand); }
.map-address p { color: var(--muted); font-size: 14.5px; }

@media (max-width: 640px) {
  .contact-map-footer { flex-direction: column; align-items: flex-start; }
}

.contact-journey-section { padding: 60px 0 68px; min-height: auto; }

.journey-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 1040px;
  margin: 32px auto 0;
  padding-top: 6px;
}

.journey-svg { position: absolute; top: 24px; left: 0; width: 100%; height: 20px; z-index: 0; overflow: visible; }
.journey-line-bg { stroke: var(--line); stroke-width: 3; }
.journey-line-progress {
  stroke: var(--brand);
  stroke-width: 3;
  stroke-dasharray: 940;
  stroke-dashoffset: 940;
}
.contact-journey-section.in .journey-line-progress { animation: journeyGrow 1.4s ease forwards 0.2s; }
@keyframes journeyGrow { to { stroke-dashoffset: 460; } }

.journey-step {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  padding: 0 6px;
}

.journey-dot {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--line);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.3s ease;
}
.journey-step.is-done .journey-dot {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: var(--on-strong);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 18%, transparent);
}
.journey-num { display: block; font-size: 12px; font-weight: 800; color: var(--brand); letter-spacing: 1px; margin-bottom: 4px; }
.journey-step h4 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.journey-step p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 800px) {
  .journey-track { flex-direction: column; gap: 28px; max-width: 420px; }
  .journey-svg { display: none; }
  .journey-step { text-align: start; padding-inline-start: 60px; position: relative; }
  .journey-step:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-inline-start: 23px;
    top: 48px;
    width: 2px;
    height: calc(100% + 4px);
    background: var(--line);
  }
  .journey-dot { position: absolute; inset-inline-start: 0; top: 0; margin: 0; }
}

/* -----------------------------------------------------------------------
   SECTION 6 — Interactive FAQ
   ----------------------------------------------------------------------- */
.contact-faq-section { padding: 60px 0; min-height: auto; }

.faq-list { margin-top: 24px; }
.faq-row { border-bottom: 1px solid var(--line); }
.faq-row:first-child { border-top: 1px solid var(--line); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  background: none;
  border: none;
  padding: 22px 4px;
  cursor: pointer;
  text-align: start;
  transition: background 0.3s ease;
}
.faq-question:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.faq-num { font-size: 14px; font-weight: 800; color: var(--brand); min-width: 26px; }
.faq-text { flex: 1; font-size: clamp(18px, 2.4vw, 24px); font-weight: 800; color: var(--text); }

.faq-toggle { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.faq-toggle span { position: absolute; inset-inline-start: 0; top: 50%; width: 100%; height: 2px; background: var(--brand); transition: transform 0.3s ease, opacity 0.3s ease; }
.faq-toggle span:last-child { transform: translateY(-50%) rotate(90deg); }
.faq-toggle span:first-child { transform: translateY(-50%); }
.faq-row.open .faq-toggle span:last-child { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-row.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-answer-inner p {
  padding: 0 4px 22px 44px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}
.faq-row.open .faq-answer-inner p { opacity: 1; transform: translateY(0); }

/* -----------------------------------------------------------------------
   SECTION 7 — Final Immersive CTA
   ----------------------------------------------------------------------- */
.contact-final-cta {
  position: relative;
  padding: 88px 0;
  min-height: auto;
  overflow: hidden;
}
.contact-final-media { position: absolute; inset: 0; overflow: hidden; }
.contact-final-media img { width: 100%; height: 100%; object-fit: cover; animation: bannerSlowZoom 16s ease-in-out infinite alternate; }
.contact-final-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 7, 13, 0.72) 0%, rgba(31, 7, 13, 0.88) 100%);
}
.contact-final-content { position: relative; z-index: 2; text-align: center; max-width: 720px; margin: 0 auto; }
.contact-final-spark {
  display: inline-block;
  color: #F0C869;
  font-size: 22px;
  margin-bottom: 10px;
  animation: sparkTwinkle 2.4s ease-in-out infinite;
}
@keyframes sparkTwinkle { 0%, 100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }
.contact-final-tagline { justify-content: center; color: #F0C869; }
.contact-final-content .kinetic-heading { color: var(--on-strong); }
.contact-final-content .kinetic-word.italic-accent { color: #F0C869; }
.contact-final-content .btn.primary { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .kinetic-word, .kinetic-chars .ch,
  .contact-hero-image-mask, .contact-hero-image-mask img,
  .orbit-ring, .orbit-line, .map-route-path, .map-pin, .map-pin::after,
  .journey-line-progress, .contact-final-media img, .contact-final-spark,
  .contact-hero-particles .particle, .contact-final-particles .particle {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* =====================================================================
   CONTACT PAGE — extra motion pass (glows, spotlight, tilt, idle float,
   gradient-shimmer accent text, punchier reveals)
   ===================================================================== */

/* Ambient drifting glows (reuses bannerGlowDrift keyframe) -------------- */
.contact-hero-glow, .orbit-glow, .contact-final-glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  animation: bannerGlowDrift 12s ease-in-out infinite alternate;
  mix-blend-mode: multiply;
}
.contact-hero-glow {
  background:
    radial-gradient(34% 42% at 85% 20%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(30% 38% at 12% 85%, color-mix(in srgb, #F0C869 18%, transparent), transparent 70%);
}
.orbit-glow {
  inset: -30%;
  background: radial-gradient(45% 45% at 50% 50%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 72%);
  mix-blend-mode: multiply;
}
.contact-final-glow {
  background:
    radial-gradient(36% 40% at 20% 25%, rgba(240, 200, 105, 0.22), transparent 70%),
    radial-gradient(30% 40% at 82% 78%, rgba(122, 16, 48, 0.32), transparent 70%);
  mix-blend-mode: screen;
  z-index: 1;
}

html[data-theme="dark"] .contact-hero-glow,
html[data-theme="dark"] .orbit-glow { mix-blend-mode: screen; }

/* Cursor spotlight in the hero (JS sets --mx/--my) ---------------------- */
.contact-hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
}
.contact-hero-section:hover .contact-hero-spotlight { opacity: 1; }

/* Gradient-shimmer accent text on kinetic headings ---------------------- */
.kinetic-word.italic-accent {
  background: linear-gradient(90deg, var(--brand), #C8557A, var(--brand));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: accentShimmer 4s linear infinite;
}
.contact-final-content .kinetic-word.italic-accent {
  background: linear-gradient(90deg, #F0C869, #FFE1A8, #F0C869);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes accentShimmer { to { background-position: -200% center; } }

/* Idle floating bob on hero badge only (orbit items already use `transform`
   for their positioning, so an idle-float there would conflict) --------- */
.contact-hero-badge { animation: idleFloat 3.6s ease-in-out infinite; }
@keyframes idleFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* Punchier reveal for journey dots + FAQ rows ---------------------------- */
.journey-dot {
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
[data-reveal].in .journey-dot { transform: scale(1); opacity: 1; }

.journey-step.is-done .journey-dot i { animation: dotPop 0.5s ease 0.1s both; }
@keyframes dotPop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

.faq-row { transition: background 0.3s ease; }
.faq-row.open { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.faq-row.open .faq-num { animation: numPulse 0.5s ease; }
@keyframes numPulse { 50% { transform: scale(1.3); color: var(--brand-strong); } }

/* Card lift + glow on hover: orbit items, journey steps, map footer ----- */
.journey-step { transition: transform 0.3s ease; }
.journey-step:hover { transform: translateY(-4px); }
.journey-step:hover .journey-dot { box-shadow: 0 10px 24px rgba(122, 16, 48, 0.28); }

/* Map pin idle bounce after it drops ------------------------------------- */
.map-pin { animation: none; }
[data-reveal].in .map-pin { animation: pinDrop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1.5s, pinBob 2.2s ease-in-out infinite 2.3s; }
@keyframes pinBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* Denser, livelier hero/final particles ---------------------------------- */
.contact-hero-particles .particle, .contact-final-particles .particle { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .contact-hero-glow, .orbit-glow, .contact-final-glow,
  .kinetic-word.italic-accent, .orbit-item, .contact-hero-badge,
  .journey-step.is-done .journey-dot i, .faq-row.open .faq-num,
  .map-pin {
    animation: none !important;
  }
  .journey-dot { transform: scale(1) !important; opacity: 1 !important; }
}

/* ---------- Home 2 / Section 4: arch-shaped cards with reveal animation ----------
   Shape: tall arch (round top, flat bottom). Nothing overlaps: the photo, the small
   arch thumbnail and the 01/02/03 number each get their own space, and the tinted
   arch frame sits OUTSIDE the photo. */
.page-home2 .home2-section-4 {
  --arch-radius: 999px 999px 26px 26px;
  --arch-frame: 10px;
  --arch-ease: cubic-bezier(.16, 1, .3, 1);
}

.page-home2 .home2-section-4 .pantry-collage-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 64px);
  align-items: stretch;
}

.page-home2 .home2-section-4 .pantry-collage-card {
  --tint: var(--brand);
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: transform .55s var(--arch-ease), opacity .85s var(--arch-ease);
}

.page-home2 .home2-section-4 .pantry-collage-card:nth-child(2) { --tint: #D39C51; }
.page-home2 .home2-section-4 .pantry-collage-card:nth-child(3) { --tint: #6D805F; }

.page-home2 .home2-section-4 .pantry-collage-card:hover {
  transform: translateY(-10px);
  box-shadow: none;
}

/* Media block: arch photo on top, then one row with the number and the small arch thumbnail */
.page-home2 .home2-section-4 .pantry-collage-media {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "shape shape"
    "index inset";
  column-gap: 16px;
  row-gap: calc(var(--arch-frame) + 16px);
  align-items: center;
  width: 100%;
  overflow: visible;
  background: transparent;
}

/* Main photo in the arch shape; tinted frame is a box-shadow so it hugs the arch curve */
.page-home2 .home2-section-4 .pantry-shape {
  grid-area: shape;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--arch-radius);
  background: color-mix(in srgb, var(--tint) 22%, var(--bg-soft));
  box-shadow:
    0 0 0 var(--arch-frame) color-mix(in srgb, var(--tint) 20%, var(--bg-soft)),
    0 26px 44px -18px rgba(31, 7, 13, .28);
  transition: box-shadow .55s var(--arch-ease);
}

.page-home2 .home2-section-4 .pantry-collage-card.in:hover .pantry-shape {
  box-shadow:
    0 0 0 var(--arch-frame) color-mix(in srgb, var(--tint) 34%, var(--bg-soft)),
    0 32px 50px -18px rgba(31, 7, 13, .34);
}

/* Photo rises up inside the arch */
.page-home2 .home2-section-4 .arch-pantry-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.3);
  filter: saturate(.92) contrast(1.04);
  transition: clip-path 1.25s var(--arch-ease) .1s, transform 1.7s var(--arch-ease) .1s, filter .45s ease;
}

.page-home2 .home2-section-4 .pantry-collage-card.in .arch-pantry-photo {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

.page-home2 .home2-section-4 .pantry-collage-card.in:hover .arch-pantry-photo {
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.06);
  transition: transform .8s var(--arch-ease), filter .45s ease;
}

/* One soft light sweep after the reveal */
.page-home2 .home2-section-4 .pantry-shape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .34) 50%, transparent 64%);
  transform: translateX(-130%);
  pointer-events: none;
}

.page-home2 .home2-section-4 .pantry-collage-card.in .pantry-shape::after {
  transform: translateX(130%);
  transition: transform 1.3s ease 1s;
}

/* Number: sits in its own row under the photo, with a hairline leading to the thumbnail */
.page-home2 .home2-section-4 .pantry-collage-index {
  grid-area: index;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--brand);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(30px, 3vw, 42px);
  font-style: italic;
  line-height: 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease .9s, transform .8s var(--arch-ease) .9s;
}

.page-home2 .home2-section-4 .pantry-collage-index::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .3;
}

.page-home2 .home2-section-4 .pantry-collage-card.in .pantry-collage-index {
  opacity: 1;
  transform: none;
}

/* Small thumbnail: same arch shape, own grid cell (never on top of the main photo) */
.page-home2 .home2-section-4 .pantry-inset {
  grid-area: inset;
  width: 62px;
  aspect-ratio: 4 / 5;
  filter: drop-shadow(0 10px 16px rgba(31, 7, 13, .22));
  opacity: 0;
  transform: translateY(14px) scale(.85);
  transition: transform .9s var(--arch-ease) .85s, opacity .6s ease .85s;
}

.page-home2 .home2-section-4 .pantry-collage-card.in .pantry-inset {
  opacity: 1;
  transform: none;
}

.page-home2 .home2-section-4 .pantry-collage-card.in:hover .pantry-inset {
  transform: translateY(-4px) scale(1.05);
  transition: transform .55s var(--arch-ease);
}

.page-home2 .home2-section-4 .pantry-collage-inset {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 3px solid var(--bg);
  border-radius: var(--arch-radius);
  background: var(--bg);
}

/* Text block: staggered rise after the shape lands */
.page-home2 .home2-section-4 .arch-pantry-content {
  position: relative;
  z-index: 5;
  flex: 1 1 auto;
  min-height: 220px;
  padding: 22px 0 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.page-home2 .home2-section-4 .arch-pantry-tag,
.page-home2 .home2-section-4 .arch-pantry-content h3,
.page-home2 .home2-section-4 .arch-pantry-content p,
.page-home2 .home2-section-4 .arch-pantry-footer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .9s var(--arch-ease);
}

.page-home2 .home2-section-4 .arch-pantry-content h3 { transition-delay: .55s; }
.page-home2 .home2-section-4 .arch-pantry-tag { transition-delay: .45s; }
.page-home2 .home2-section-4 .arch-pantry-content p { transition-delay: .68s; }
.page-home2 .home2-section-4 .arch-pantry-footer { transition-delay: .8s; }

.page-home2 .home2-section-4 .pantry-collage-card.in .arch-pantry-tag,
.page-home2 .home2-section-4 .pantry-collage-card.in .arch-pantry-content h3,
.page-home2 .home2-section-4 .pantry-collage-card.in .arch-pantry-content p,
.page-home2 .home2-section-4 .pantry-collage-card.in .arch-pantry-footer {
  opacity: 1;
  transform: none;
}

.page-home2 .home2-section-4 .arch-pantry-tag {
  display: block;
  width: fit-content;
  padding: 0 0 7px;
  margin: 0 0 15px;
  color: var(--brand);
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 1.5px;
}

.page-home2 .home2-section-4 .arch-pantry-content h3 {
  max-width: 290px;
  margin: 0 0 10px;
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.08;
}

.page-home2 .home2-section-4 .arch-pantry-content p {
  max-width: 330px;
  margin: 0 0 22px;
  line-height: 1.65;
}

.page-home2 .home2-section-4 .arch-pantry-footer {
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-top: 0;
  margin-top: auto;
  border-top: 0;
}

.page-home2 .home2-section-4 .arch-pantry-price {
  font-size: 13px;
}

.page-home2 .home2-section-4 .arch-pantry-price strong {
  font-size: 21px;
}

.page-home2 .home2-section-4 .arch-pantry-footer .btn.primary {
  padding: 0 !important;
  color: var(--brand);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 13px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.page-home2 .home2-section-4 .arch-pantry-footer .btn.primary:hover {
  color: var(--brand-strong);
  background: transparent;
  box-shadow: none;
  transform: translateX(4px);
}

html[dir="rtl"] .page-home2 .home2-section-4 .arch-pantry-footer .btn.primary:hover {
  transform: translateX(-4px);
}

@media (max-width: 1023px) {
  .page-home2 .home2-section-4 .pantry-collage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
  }

  .page-home2 .home2-section-4 .arch-pantry-content {
    min-height: 250px;
  }

  .page-home2 .home2-section-4 .arch-pantry-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .page-home2 .home2-section-4 .pantry-collage-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .page-home2 .home2-section-4 .pantry-collage-card {
    width: min(calc(100% - 2 * var(--arch-frame)), 430px);
    margin-inline: auto;
  }

  .page-home2 .home2-section-4 .arch-pantry-content {
    min-height: 0;
  }

  .page-home2 .home2-section-4 .arch-pantry-footer {
    align-items: baseline;
    flex-direction: row;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home2 .home2-section-4 .pantry-collage-card,
  .page-home2 .home2-section-4 .pantry-shape,
  .page-home2 .home2-section-4 .pantry-shape::after,
  .page-home2 .home2-section-4 .arch-pantry-photo,
  .page-home2 .home2-section-4 .pantry-inset,
  .page-home2 .home2-section-4 .pantry-collage-index,
  .page-home2 .home2-section-4 .arch-pantry-tag,
  .page-home2 .home2-section-4 .arch-pantry-content h3,
  .page-home2 .home2-section-4 .arch-pantry-content p,
  .page-home2 .home2-section-4 .arch-pantry-footer {
    transition: none;
  }
}

/* ---------- Home 2 / Section 2: remove only the outer moodboard box ---------- */
.page-home2 .home2-section-2 .moodboard-canvas {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Home 2 / Section 8: remove only the outer ribbon box ---------- */
.page-home2 .home2-section-8 {
  background: var(--brand);
}

.page-home2 .home2-section-8 .photo-ribbon-section {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Home 2 / Fix 1: equal vertical rhythm between all sections ---------- */
.page-home2 main#main > section:not(.hero-split-contrast) {
  padding: 64px 0;
}

.page-home2 .hero-split-contrast {
  padding: 40px 0 64px;
}

@media (max-width: 767px) {
  .page-home2 main#main > section:not(.hero-split-contrast) {
    padding: 48px 0;
  }
}

/* ---------- Home 2 / Fix 3: remove redundant card margins that doubled the
   gap between section-2 and section-3 (section padding already spaces them) ---------- */
.page-home2 .home2-section-2 .moodboard-canvas {
  margin: 0;
}

.page-home2 .home2-section-3 .polaroid-corner-canvas {
  margin: 0;
}

/* ===================================================================
   HOME 1 — SECTIONS 3 to 6 (Editorial Infographic, Horizontal Story,
   Cinematic Stack, Orbiting Showcase)
   All motion is driven from index.js with GSAP; every element below is
   fully visible by default so the layout still reads without JS.
   =================================================================== */

/* -------------------------------------------------------------
   3. BOX PLANS — Infographic board (medallion + connector + card)
   ------------------------------------------------------------- */
.fr-info {
  overflow: hidden;
}

.fr-info-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 64px;
}

.fr-info-lead {
  font-size: 17.5px;
  color: var(--muted);
  max-width: 560px;
  margin: 0;
}

.fr-info-title {
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1;
  margin: 0;
  text-align: end;
  letter-spacing: -0.5px;
}

.fr-info-title .fr-char {
  display: inline-block;
  will-change: transform, opacity;
}

.fr-info-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  align-items: center;
  padding: 18px 0;
}

.fr-info-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.fr-info-node.is-up {
  flex-direction: column-reverse;
}

/* Circular medallion */
.fr-info-medallion {
  position: relative;
  width: min(196px, 84%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
  border: 9px solid var(--surface);
  box-shadow: 0 18px 38px rgba(31, 7, 13, 0.18);
  transition: transform var(--transition), box-shadow var(--transition);
  isolation: isolate;
}

.fr-info-medallion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fr-info-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 62%, transparent), color-mix(in srgb, var(--brand-strong) 38%, transparent));
  mix-blend-mode: multiply;
  opacity: 0.42;
  transition: opacity var(--transition);
  z-index: 2;
  pointer-events: none;
}

.fr-info-sweep {
  position: absolute;
  inset: -30%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
  transform: translateX(-120%);
  opacity: 0;
}

.fr-info-index {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 14px;
  z-index: 4;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  color: var(--on-strong);
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  line-height: 1;
}

.fr-info-node:hover .fr-info-medallion {
  transform: translateY(-8px);
  box-shadow: 0 26px 52px rgba(31, 7, 13, 0.28);
}

.fr-info-node:hover .fr-info-medallion img {
  transform: scale(1.09);
}

.fr-info-node:hover .fr-info-ring {
  opacity: 0.2;
}

/* Curved connector with junction dot */
.fr-info-link-line {
  position: relative;
  width: 62%;
  height: 62px;
  border: 2px solid var(--line);
  border-top: none;
  border-radius: 0 0 46px 46px;
  transform-origin: top center;
}

.fr-info-node.is-up .fr-info-link-line {
  border: 2px solid var(--line);
  border-bottom: none;
  border-radius: 46px 46px 0 0;
  transform-origin: bottom center;
}

.fr-info-dot {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: -6px;
  width: 11px;
  height: 11px;
  margin-inline-start: -5.5px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}

.fr-info-node.is-up .fr-info-dot {
  inset-block-end: auto;
  inset-block-start: -6px;
}

/* Outlined text card */
.fr-info-box {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  padding: 22px 20px;
  text-align: center;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.fr-info-node:hover .fr-info-box {
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: var(--shadow-sm);
}

.fr-info-box h3 {
  font-size: 20px;
  margin: 0 0 8px;
}

.fr-info-box p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 14px;
}

.fr-info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}

.fr-info-meta span {
  font-size: 13.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text);
}

.fr-info-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.fr-info-price {
  font-size: 14.5px;
  color: var(--muted);
}

.fr-info-price strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  color: var(--brand);
}

.fr-info-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--brand);
}

.fr-info-cta:hover {
  gap: 10px;
}

html[dir="rtl"] .fr-info-cta i.fa-chevron-right {
  transform: scaleX(-1);
}

/* Floating decorative dots */
.fr-info-float {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 35%, transparent);
  pointer-events: none;
  z-index: 1;
}

.fr-info-float-1 { width: 10px; height: 10px; inset-block-start: 4%; inset-inline-start: 22%; }
.fr-info-float-2 { width: 16px; height: 16px; inset-block-end: 8%; inset-inline-start: 46%; opacity: 0.6; }
.fr-info-float-3 { width: 8px;  height: 8px;  inset-block-start: 12%; inset-inline-end: 18%; }
.fr-info-float-4 { width: 22px; height: 22px; inset-block-end: 4%;  inset-inline-end: 6%; opacity: 0.35; }

/* -------------------------------------------------------------
   4. HOW IT WORKS — Pinned horizontal story
   ------------------------------------------------------------- */
.fr-story {
  padding: 0;
  min-height: 0;
  position: relative;
  background: var(--bg);
}

.fr-story-viewport {
  overflow: hidden;
  padding-block: 90px;
}

.fr-story-track {
  display: flex;
  align-items: center;
  gap: 42px;
  padding-inline: clamp(24px, 6vw, 96px);
  direction: ltr;
  will-change: transform;
}

.fr-story-panel,
.fr-story-frame {
  flex: 0 0 auto;
  direction: inherit;
}

html[dir="rtl"] .fr-story-panel,
html[dir="rtl"] .fr-story-frame {
  direction: rtl;
  text-align: right;
}

.fr-story-intro {
  width: min(460px, 78vw);
}

.fr-story-title {
  font-size: clamp(32px, 3.6vw, 46px);
  margin: 0 0 14px;
}

.fr-story-title .fr-word {
  display: inline-block;
  will-change: transform, opacity;
}

.fr-story-intro p {
  color: var(--muted);
  font-size: 17px;
  margin: 0 0 22px;
}

.fr-story-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--brand);
}

html[dir="rtl"] .fr-story-hint i {
  transform: scaleX(-1);
}

.fr-story-frame {
  margin: 0;
  position: relative;
}

.fr-frame-mask {
  overflow: hidden;
  border-radius: 260px 260px 22px 22px;
  box-shadow: var(--shadow);
  background: var(--surface);
}

.fr-story-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.fr-frame-1 { width: clamp(240px, 27vw, 340px); }
.fr-frame-2 { width: clamp(280px, 32vw, 420px); margin-block-start: 90px; }
.fr-frame-3 { width: clamp(220px, 24vw, 300px); margin-block-end: 70px; margin-inline-start: -46px; }
.fr-frame-4 { width: clamp(280px, 30vw, 400px); }

.fr-frame-1 .fr-frame-mask { height: clamp(300px, 34vw, 430px); }
.fr-frame-2 .fr-frame-mask { height: clamp(220px, 24vw, 300px); border-radius: 22px 22px 180px 180px; }
.fr-frame-3 .fr-frame-mask { height: clamp(300px, 32vw, 400px); border-radius: 22px 180px 180px 22px; }
.fr-frame-4 .fr-frame-mask { height: clamp(250px, 26vw, 330px); border-radius: 180px 22px 22px 180px; }

.fr-story-frame figcaption {
  display: block;
  padding-top: 18px;
  max-width: 320px;
}

.fr-frame-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  color: var(--brand);
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}

.fr-story-frame figcaption strong {
  display: block;
  font-size: 19px;
  margin-bottom: 4px;
}

.fr-story-frame figcaption small {
  display: block;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* Pinned-image finale inside the track */
.fr-story-stage {
  width: min(880px, 88vw);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

.fr-stage-media {
  position: relative;
  border-radius: 200px 200px 26px 26px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  height: clamp(320px, 42vw, 480px);
}

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

.fr-stage-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 45% at 50% 100%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}

.fr-stage-cards {
  position: relative;
  min-height: 260px;
}

.fr-stage-card {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}

.fr-stage-card + .fr-stage-card {
  opacity: 0;
}

.fr-stage-step {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brand);
}

.fr-stage-card h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  margin: 10px 0 10px;
}

.fr-stage-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
}

.fr-story-progress {
  position: absolute;
  inset-block-end: 26px;
  inset-inline: clamp(24px, 6vw, 96px);
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.fr-story-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
}

html[dir="rtl"] .fr-story-progress span {
  transform-origin: right center;
}

/* -------------------------------------------------------------
   5. WHOLE BASKET — Cinematic stacked reveal + zoom-out
   ------------------------------------------------------------- */
.fr-cine {
  padding: 0;
  position: relative;
  overflow: hidden;
}

.fr-cine-pin {
  position: relative;
  padding-block: 100px;
  overflow: hidden;
}

.fr-cine-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.fr-cine-stack {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 560px;
}

.fr-cine-card {
  position: absolute;
  margin: 0;
  width: 54%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  will-change: transform, clip-path;
}

.fr-cine-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fr-cine-card:hover img {
  transform: scale(1.06);
}

.fr-cine-card figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 26px 16px 14px;
  font-size: 14px;
  font-weight: 800;
  color: #FFF8E9;
  background: linear-gradient(to top, rgba(31, 7, 13, 0.85), transparent);
}

.fr-cine-sweep {
  position: absolute;
  inset: -40%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}

/* Final resting spots — JS animates from a single stacked pile to these */
.fr-cine-card-1 { inset-block-start: 0;    inset-inline-start: 0;   z-index: 4; }
.fr-cine-card-2 { inset-block-start: 8%;   inset-inline-end: 0;     z-index: 3; width: 46%; }
.fr-cine-card-3 { inset-block-end: 0;      inset-inline-start: 12%; z-index: 2; width: 44%; }
.fr-cine-card-4 { inset-block-end: 6%;     inset-inline-end: 4%;    z-index: 1; width: 40%; }

.fr-cine-copy .tagline {
  margin-bottom: 12px;
}

.fr-cine-title {
  font-size: clamp(30px, 3.6vw, 46px);
  margin: 0 0 14px;
}

.fr-cine-title .fr-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.fr-cine-lead {
  color: var(--muted);
  font-size: 17px;
  margin: 0 0 24px;
}

.fr-cine-checks li {
  will-change: transform, opacity;
}

/* Decorative layers */
.fr-cine-type {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  transform: translateY(-50%);
  z-index: 1;
  display: grid;
  gap: 2px;
  pointer-events: none;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: clamp(56px, 12vw, 168px);
  line-height: 0.92;
  letter-spacing: -2px;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--brand) 32%, transparent);
  opacity: 0.35;
  white-space: nowrap;
}

.fr-cine-word {
  display: block;
  will-change: transform;
}

.fr-cine-word:nth-child(2) { padding-inline-start: 12vw; }
.fr-cine-word:nth-child(3) { padding-inline-start: 4vw; }

.fr-cine-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.35;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 24%, transparent) 0.6px, transparent 0.7px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

.fr-cine-line {
  position: absolute;
  z-index: 2;
  background: color-mix(in srgb, var(--brand) 28%, transparent);
  pointer-events: none;
}

.fr-cine-line-1 { inset-block-start: 14%; inset-inline-start: 0; width: 34%; height: 1px; }
.fr-cine-line-2 { inset-block-end: 16%; inset-inline-end: 0; width: 26%; height: 1px; }

.fr-cine-dot {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 45%, transparent);
  pointer-events: none;
}

.fr-cine-dot-1 { width: 12px; height: 12px; inset-block-start: 18%; inset-inline-end: 12%; }
.fr-cine-dot-2 { width: 8px;  height: 8px;  inset-block-end: 22%; inset-inline-start: 8%; }
.fr-cine-dot-3 { width: 18px; height: 18px; inset-block-end: 10%; inset-inline-end: 34%; opacity: 0.55; }

/* -------------------------------------------------------------
   6. UNBOXING — Orbiting showcase
   ------------------------------------------------------------- */
.fr-orbit {
  overflow: hidden;
}

.fr-orbit-stage {
  position: relative;
  width: min(760px, 100%);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.fr-orbit-path {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--brand) 22%, transparent);
  pointer-events: none;
}

.fr-orbit-path-outer { inset: 6%; }
.fr-orbit-path-inner { inset: 24%; border-style: solid; opacity: 0.55; }

.fr-orbit-core {
  position: relative;
  width: min(280px, 44%);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  z-index: 5;
}

.fr-orbit-circular-type {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--brand);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  opacity: 0.75;
  pointer-events: none;
  will-change: transform;
}

.fr-orbit-core-inner {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 18px;
  max-width: 78%;
}

.fr-orbit-core-inner i {
  font-size: 24px;
  color: var(--brand);
}

.fr-orbit-core-inner strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
}

.fr-orbit-core-inner span {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

.fr-orbit-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fr-orbit-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(104px, 15vw, 156px);
  aspect-ratio: 3 / 4;
  margin: 0;
  padding: 0;
  border: 5px solid var(--surface);
  border-radius: 90px 90px 18px 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 16px 34px rgba(31, 7, 13, 0.2);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}

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

.fr-orbit-card-label {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 24px 10px 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: #FFF8E9;
  background: linear-gradient(to top, rgba(31, 7, 13, 0.88), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.fr-orbit-card.is-hovered {
  box-shadow: 0 24px 52px color-mix(in srgb, var(--brand) 42%, rgba(31, 7, 13, 0.3));
}

.fr-orbit-card.is-hovered img {
  transform: scale(1.08);
}

.fr-orbit-card.is-hovered .fr-orbit-card-label {
  opacity: 1;
}

.fr-orbit-card:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.fr-orbit-readout {
  margin: 34px auto 0;
  text-align: center;
  max-width: 560px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--muted);
  min-height: 34px;
}

/* -------------------------------------------------------------
   Dark mode refinements for sections 3-6
   ------------------------------------------------------------- */
html[data-theme="dark"] .fr-info-box {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
}

html[data-theme="dark"] .fr-info-ring {
  mix-blend-mode: screen;
  opacity: 0.3;
}

html[data-theme="dark"] .fr-info-medallion,
html[data-theme="dark"] .fr-orbit-card {
  border-color: var(--surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.62);
}

html[data-theme="dark"] .fr-info-index,
html[data-theme="dark"] .fr-cine-card figcaption,
html[data-theme="dark"] .fr-orbit-card-label {
  color: #FFFFFF;
}

html[data-theme="dark"] .fr-cine-grain {
  mix-blend-mode: screen;
  opacity: 0.18;
}

html[data-theme="dark"] .fr-cine-type {
  -webkit-text-stroke-color: color-mix(in srgb, var(--brand) 42%, transparent);
  opacity: 0.3;
}

html[data-theme="dark"] .fr-stage-glow {
  opacity: 0.38;
}

/* -------------------------------------------------------------
   Responsive — large screens, tablet, mobile
   ------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1280px) {
  .fr-info-board { gap: 18px; }
  .fr-info-medallion { width: min(170px, 86%); }
  .fr-orbit-stage { width: min(660px, 100%); }
}

@media (max-width: 1023px) {
  .fr-info-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 14px;
    margin-bottom: 44px;
  }

  .fr-info-title { text-align: start; }

  .fr-info-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 26px;
    align-items: start;
  }

  .fr-info-node.is-up { flex-direction: column; }
  .fr-info-node.is-up .fr-info-link-line {
    border: 2px solid var(--line);
    border-top: none;
    border-radius: 0 0 46px 46px;
    transform-origin: top center;
  }
  .fr-info-node.is-up .fr-info-dot {
    inset-block-start: auto;
    inset-block-end: -6px;
  }

  .fr-info-medallion { width: min(180px, 70%); }
  .fr-info-link-line { height: 44px; }

  .fr-story-viewport { padding-block: 70px; }
  .fr-story-track { gap: 30px; }
  .fr-frame-2 { margin-block-start: 50px; }
  .fr-frame-3 { margin-block-end: 40px; margin-inline-start: -20px; }

  .fr-story-stage {
    grid-template-columns: 1fr;
    width: min(560px, 86vw);
    gap: 22px;
  }
  .fr-stage-media { height: clamp(240px, 38vw, 320px); }
  .fr-stage-cards { min-height: 230px; }

  .fr-cine-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .fr-cine-stack {
    width: min(520px, 100%);
    margin-inline: auto;
  }

  .fr-orbit-stage { width: min(560px, 100%); }
  .fr-orbit-core { width: min(210px, 48%); }
}

@media (max-width: 767px) {
  .fr-info-board {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .fr-info-medallion { width: min(190px, 62%); }
  .fr-info-float-2,
  .fr-info-float-4 { display: none; }

  .fr-story-viewport { padding-block: 56px; }
  .fr-story-track {
    flex-direction: column;
    align-items: stretch;
    gap: 34px;
    padding-inline: 24px;
    transform: none !important;
  }
  .fr-story-panel,
  .fr-story-frame { width: 100%; }
  .fr-frame-1,
  .fr-frame-2,
  .fr-frame-3,
  .fr-frame-4 {
    width: 100%;
    margin: 0;
  }
  .fr-frame-1 .fr-frame-mask,
  .fr-frame-2 .fr-frame-mask,
  .fr-frame-3 .fr-frame-mask,
  .fr-frame-4 .fr-frame-mask {
    height: 270px;
    border-radius: 150px 150px 20px 20px;
  }
  .fr-story-frame figcaption { max-width: none; }
  .fr-story-stage { width: 100%; }
  .fr-stage-cards {
    min-height: 0;
    display: grid;
    gap: 14px;
  }
  .fr-stage-card {
    position: relative;
    opacity: 1 !important;
    inset: auto;
  }
  .fr-story-progress { display: none; }

  .fr-cine-pin { padding-block: 70px; }
  .fr-cine-stack {
    aspect-ratio: auto;
    max-height: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .fr-cine-card {
    position: relative;
    inset: auto;
    width: 100%;
  }
  .fr-cine-type {
    font-size: clamp(42px, 17vw, 74px);
    opacity: 0.22;
  }
  .fr-cine-word:nth-child(2) { padding-inline-start: 18vw; }
  .fr-cine-line,
  .fr-cine-dot-3 { display: none; }

  .fr-orbit-stage { width: 100%; }
  .fr-orbit-core { width: min(170px, 54%); }
  .fr-orbit-core-inner { padding: 8px; }
  .fr-orbit-core-inner i { font-size: 18px; }
  .fr-orbit-card {
    width: clamp(78px, 24vw, 104px);
    border-width: 4px;
    border-radius: 60px 60px 14px 14px;
  }
  .fr-orbit-card-label { font-size: 11px; padding: 18px 6px 8px; }
  .fr-orbit-readout { margin-top: 24px; }
}

@media (max-width: 400px) {
  .fr-info-medallion { width: min(170px, 74%); }
  .fr-orbit-card { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-info-sweep,
  .fr-cine-sweep { display: none; }

  .fr-story-track { transform: none !important; }

  .fr-stage-card {
    position: relative;
    opacity: 1 !important;
    inset: auto;
    margin-bottom: 14px;
  }

  .fr-stage-cards { min-height: 0; }
}

/* Desktop-only pinning geometry for the horizontal story & cinematic stack */
@media (min-width: 768px) {
  .fr-story-viewport {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

  .fr-story-track { width: max-content; }

  .fr-cine-pin {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}

/* Orbit hover states */
.fr-orbit-card {
  transition: box-shadow var(--transition), filter var(--transition);
}

.fr-orbit-card.is-dimmed {
  filter: saturate(0.75) brightness(0.9);
}

html[data-theme="dark"] .fr-orbit-card.is-dimmed {
  filter: saturate(0.7) brightness(0.72);
}

.fr-orbit-card.is-hovered {
  filter: none;
}

/* Explicit clip-path resting states so scrubbed GSAP reveals have a valid end value */
.fr-info-box,
.fr-frame-mask,
.fr-stage-card,
.fr-cine-checks li {
  clip-path: inset(0% 0% 0% 0%);
}

.fr-cine-card {
  clip-path: inset(0% 0% 0% 0% round 22px);
}

.fr-info-medallion img {
  clip-path: circle(75% at 50% 50%);
}

/* Mobile refinements for the orbit core and cinematic typography */
@media (max-width: 767px) {
  .fr-orbit-core { width: min(132px, 42%); }
  .fr-orbit-core-inner { padding: 4px; gap: 3px; max-width: 86%; }
  .fr-orbit-core-inner i { font-size: 15px; }
  .fr-orbit-core-inner strong { font-size: 18px; }
  .fr-orbit-core-inner span { font-size: 11px; line-height: 1.35; }
  .fr-orbit-circular-type { font-size: 9px; letter-spacing: 2px; }
  .fr-cine-type { opacity: 0.14; }
}

/* ============================================================
   FRESHRHYTHM — COMPACT 360PX PAGE BANNERS
   Final visual pass: About / Plans / How It Works / FAQ / Contact
   ============================================================ */

/* Shared full-bleed guard */
.about-banner-section,
.plans-banner-section,
.faq-hero,
.contact-hero-section {
  width: 100%;
  max-width: 100%;
  height: 58vh;
  min-height: 58vh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ---------------- ABOUT US ---------------- */
.about-banner-section {
  isolation: isolate;
  align-items: stretch;
}

.about-banner-media img {
  object-position: center 42%;
  animation: frBannerKenBurns 14s ease-in-out infinite alternate;
}

.about-banner-overlay {
  background:
    linear-gradient(90deg, rgba(31,7,13,.88) 0%, rgba(31,7,13,.64) 38%, rgba(31,7,13,.20) 72%, rgba(31,7,13,.48) 100%);
}

.about-banner-glow {
  inset: -35%;
  background:
    radial-gradient(circle at 17% 48%, rgba(240,200,105,.28), transparent 27%),
    radial-gradient(circle at 78% 24%, rgba(255,248,233,.14), transparent 25%),
    radial-gradient(circle at 88% 82%, rgba(122,16,48,.34), transparent 30%);
  animation: frBannerAtmosphere 10s ease-in-out infinite alternate;
}

.about-banner-content {
  width: min(1200px, calc(100% - 48px));
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 0 34px;
}

.about-banner-content .hero-pill,
.plans-banner-content .hero-pill {
  width: fit-content;
  margin-bottom: 10px;
}

.about-banner-content h1 {
  max-width: 720px;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: .98;
  margin-bottom: 10px;
  text-shadow: 0 6px 24px rgba(0,0,0,.24);
}

.about-banner-content .hero-lead {
  max-width: 600px;
  font-size: 13.5px;
  line-height: 1.48;
  margin-bottom: 12px;
}

.about-banner-content .hero-btns {
  margin-bottom: 10px;
}

.about-banner-content .hero-perks {
  max-width: 720px;
  padding-top: 9px;
  gap: 18px;
}

.about-banner-scroll-cue,
.plans-banner-scroll-cue {
  bottom: 10px;
}

.about-banner-section::after,
.plans-banner-section::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: -42%;
  width: 42%;
  height: 78%;
  border: 1px solid rgba(255,248,233,.25);
  border-radius: 50%;
  transform: rotate(-14deg);
  animation: frRingFloat 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* ---------------- PLANS ---------------- */
.plans-banner-section {
  align-items: stretch;
}

.plans-banner-media img {
  object-position: center 48%;
  animation: frBannerKenBurns 15s ease-in-out infinite alternate-reverse;
}

.plans-banner-overlay {
  background:
    linear-gradient(90deg, rgba(31,7,13,.90) 0%, rgba(31,7,13,.66) 42%, rgba(31,7,13,.24) 78%, rgba(31,7,13,.55) 100%);
}

.plans-banner-glow {
  background:
    radial-gradient(circle at 82% 24%, rgba(240,200,105,.30), transparent 24%),
    radial-gradient(circle at 58% 82%, rgba(122,16,48,.38), transparent 30%);
}

.plans-banner-content {
  width: min(1200px, calc(100% - 48px));
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 0 34px;
}

.plans-banner-content h1 {
  max-width: 650px;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: .98;
  margin-bottom: 9px;
}

.plans-banner-content .hero-lead {
  max-width: 590px;
  font-size: 13.5px;
  line-height: 1.48;
  margin-bottom: 9px;
}

.plans-banner-cadence {
  width: fit-content;
  margin: 0 0 10px;
  padding: 7px 14px;
}

.plans-banner-content .hero-btns {
  margin-bottom: 8px;
}

.plans-banner-content .hero-perks {
  max-width: 720px;
  padding-top: 9px;
  gap: 18px;
}

/* ---------------- HOW IT WORKS ---------------- */
.hiw-hero {
  min-height: 360px;
  padding: 0;
}

.hiw-hero-image {
  object-position: center 48%;
  filter: brightness(.66) saturate(1.05);
  transform: scale(1.03);
  animation: frBannerKenBurns 16s ease-in-out infinite alternate;
}

.hiw-hero-overlay {
  background:
    linear-gradient(90deg, rgba(31,7,13,.90) 0%, rgba(31,7,13,.66) 43%, rgba(31,7,13,.24) 78%, rgba(31,7,13,.55) 100%);
}

.page-how-it-works .hiw-hero-content {
  width: min(1200px, calc(100% - 48px));
  min-height: 360px;
  padding: 22px 0 30px;
  align-items: center;
}

.page-how-it-works .hiw-hero-copy {
  width: min(690px, 68%);
}

.page-how-it-works .hiw-hero-eyebrow {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  color: #F0C869;
}

.page-how-it-works .hiw-hero-title {
  max-width: 700px;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: .98;
  letter-spacing: -1.5px;
  margin-bottom: 9px;
  color: #FFF8E9;
}

.page-how-it-works .hiw-hero-text {
  max-width: 560px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: rgba(255,248,233,.88);
}

.page-how-it-works .hiw-hero-btns {
  gap: 10px;
  margin-bottom: 10px;
}

.page-how-it-works .hiw-hero-meta {
  gap: 16px;
  font-size: 11px;
}

.page-how-it-works .hiw-hero-number {
  right: 3%;
  bottom: 0;
  font-size: 220px;
  color: rgba(255,248,233,.10);
}

.page-how-it-works .hiw-curved-line {
  right: 10%;
  bottom: 30px;
  width: 170px;
  height: 170px;
  border-color: rgba(240,200,105,.24);
}

.hiw-hero-route {
  opacity: .7;
}

/* ---------------- FAQ ---------------- */
.faq-hero {
  min-height: 58vh;
  padding: 0;
  background: var(--brand-strong);
}

.faq-hero-bg {
  position: absolute;
  inset: 0;
}

.faq-hero-parallax {
  inset: -5%;
  background:
    linear-gradient(90deg, rgba(31,7,13,.92) 0%, rgba(31,7,13,.70) 44%, rgba(31,7,13,.28) 78%, rgba(31,7,13,.55) 100%),
    url("../images/hero-basket.jpg") center 52% / cover no-repeat;
  animation: frBannerKenBurns 17s ease-in-out infinite alternate;
}

.faq-hero-overlay {
  background:
    radial-gradient(circle at 80% 28%, rgba(240,200,105,.24), transparent 22%),
    repeating-linear-gradient(115deg, transparent 0 45px, rgba(255,248,233,.045) 46px 47px);
  opacity: .9;
}

.faq-hero-content {
  width: min(1200px, calc(100% - 48px));
  height: 100%;
  min-height: 360px;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 30px;
  padding: 24px 0 30px;
}

.faq-hero-text-wrapper {
  max-width: 650px;
}

.faq-eyebrow {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 2.2px;
  color: #F0C869;
}

.faq-hero-title {
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: .98;
  margin-bottom: 9px;
  color: #FFF8E9;
  text-shadow: 0 5px 20px rgba(0,0,0,.25);
}

.faq-hero-subtitle {
  max-width: 510px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: rgba(255,248,233,.86);
}

.faq-search-container {
  max-width: 460px;
  padding: 5px 5px 5px 15px;
  border-color: rgba(255,248,233,.28);
  background: rgba(255,248,233,.12);
  backdrop-filter: blur(12px);
}

.faq-search-input {
  color: #FFF8E9;
  padding: 9px 0;
}

.faq-search-input::placeholder {
  color: rgba(255,248,233,.68);
}

.faq-search-icon {
  color: rgba(255,248,233,.72);
}

.faq-search-btn {
  width: 42px;
  height: 42px;
}

.faq-hero-visual {
  height: 100%;
  min-height: 280px;
}

.faq-hero-visual::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(240,200,105,.42);
  border-radius: 50%;
  animation: frOrbitSpin 18s linear infinite;
}

.faq-hero-visual::after {
  content: "FAQ";
  position: absolute;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(64px, 8vw, 104px);
  font-weight: 800;
  font-style: italic;
  color: rgba(255,248,233,.12);
  transform: rotate(-8deg);
}

.faq-hero .floating-veg {
  width: 58px;
  height: 58px;
  background: rgba(255,248,233,.12);
  border: 1px solid rgba(255,248,233,.35);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.faq-hero .veg-inner {
  color: #F0C869;
  font-size: 22px;
  animation: frIconFloat 3s ease-in-out infinite;
}

.faq-hero .veg-inner span {
  display: grid;
  place-items: center;
}

.faq-hero .veg-1 { top: 12%; left: 18%; }
.faq-hero .veg-2 { top: 48%; right: 12%; }
.faq-hero .veg-3 { bottom: 10%; left: 30%; }

.faq-hero-deco-line {
  width: 180px;
  opacity: .4;
}

.faq-hero-deco-circle {
  width: 130px;
  height: 130px;
  border-color: #F0C869;
}

/* ---------------- CONTACT ---------------- */
.contact-hero-section {
  padding: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, var(--bg-soft) 100%);
}

.contact-hero-grid {
  width: min(1200px, calc(100% - 48px));
  height: 360px;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 34px;
  padding: 22px 0 28px;
}

.contact-hero-copy {
  max-width: 650px;
}

.contact-hero-copy .hero-pill {
  margin-bottom: 8px;
}

.contact-hero-copy .kinetic-heading {
  font-size: clamp(34px, 4vw, 52px);
  line-height: .92;
  margin-bottom: 9px;
}

.contact-hero-copy .hero-lead {
  max-width: 550px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.contact-hero-copy .btn {
  margin-top: 0;
}

.contact-hero-visual {
  height: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-hero-image-mask {
  width: min(310px, 100%);
  height: 270px;
  aspect-ratio: auto;
  border-radius: 48% 18% 48% 18%;
  box-shadow: var(--shadow-lg);
  transform: rotate(2deg);
}

.contact-hero-image-mask img {
  object-position: center;
}

.contact-hero-badge {
  left: auto;
  right: -4px;
  bottom: 4px;
  font-size: 11px;
  padding: 9px 13px;
}

.contact-hero-section::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: 50%;
  animation: frRingFloat 8s ease-in-out infinite reverse;
  pointer-events: none;
}

.contact-hero-spotlight {
  opacity: .7;
}

/* Shared animation polish */
@keyframes frBannerKenBurns {
  0% { transform: scale(1.02) translate3d(0,0,0); }
  100% { transform: scale(1.09) translate3d(-1%, -1%, 0); }
}

@keyframes frBannerAtmosphere {
  0% { transform: translate3d(-2%,-1%,0) scale(1); opacity: .7; }
  100% { transform: translate3d(3%,2%,0) scale(1.08); opacity: 1; }
}

@keyframes frRingFloat {
  0%,100% { transform: translate3d(0,0,0) rotate(-8deg); opacity: .55; }
  50% { transform: translate3d(-12px,-8px,0) rotate(4deg); opacity: .9; }
}

@keyframes frOrbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes frIconFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

/* Home Page 1 — Section 4 horizontal story: remove accidental edge clipping/gap */
.fr-story-viewport {
  padding-block: 70px;
  overflow: hidden;
}

.fr-story-track {
  gap: 28px;
  padding-inline: 32px;
}

.fr-frame-2 {
  margin-block-start: 58px;
}

.fr-frame-3 {
  margin-block-end: 48px;
  margin-inline-start: 0;
}

.fr-frame-1 .fr-frame-mask,
.fr-frame-2 .fr-frame-mask,
.fr-frame-3 .fr-frame-mask,
.fr-frame-4 .fr-frame-mask {
  box-shadow: 0 18px 42px rgba(31,7,13,.16);
}

.fr-story-frame img {
  display: block;
}

/* Tablet */
@media (max-width: 1023px) {
  .about-banner-content,
  .plans-banner-content,
  .page-how-it-works .hiw-hero-content,
  .faq-hero-content,
  .contact-hero-grid {
    width: min(100% - 36px, 900px);
  }

  .about-banner-content h1,
  .plans-banner-content h1,
  .page-how-it-works .hiw-hero-title,
  .faq-hero-title,
  .contact-hero-copy .kinetic-heading {
    font-size: clamp(30px, 5vw, 44px);
  }

  .about-banner-content .hero-lead,
  .plans-banner-content .hero-lead {
    max-width: 520px;
  }

  .faq-hero-content {
    grid-template-columns: 1fr .75fr;
    gap: 20px;
  }

  .contact-hero-grid {
    grid-template-columns: 1fr .78fr;
    gap: 22px;
  }

  .contact-hero-image-mask {
    width: min(270px,100%);
    height: 245px;
  }

  .page-how-it-works .hiw-hero-copy {
    width: 72%;
  }

  .fr-story-track {
    padding-inline: 24px;
  }
}

/* Mobile — retain a compact 360px banner without clipping */
@media (max-width: 767px) {
  .about-banner-section,
  .plans-banner-section,
  .faq-hero,
  .contact-hero-section {
    height: 58svh;
    min-height: 58svh;
    max-height: none;
  }

  .about-banner-content,
  .plans-banner-content,
  .faq-hero-content,
  .contact-hero-grid {
    width: calc(100% - 28px);
    min-height: 58svh;
    height: 58svh;
    padding: 18px 0 26px;
  }

  .about-banner-overlay,
  .plans-banner-overlay,
  .hiw-hero-overlay {
    background: linear-gradient(90deg, rgba(31,7,13,.93) 0%, rgba(31,7,13,.76) 62%, rgba(31,7,13,.48) 100%);
  }

  .about-banner-content h1,
  .plans-banner-content h1,
  .faq-hero-title,
  .contact-hero-copy .kinetic-heading {
    font-size: 28px;
    line-height: .98;
  }

  .about-banner-content .hero-lead,
  .plans-banner-content .hero-lead,
  .faq-hero-subtitle,
  .contact-hero-copy .hero-lead {
    font-size: 12.5px;
    line-height: 1.42;
    margin-bottom: 9px;
  }

  .about-banner-content .hero-perks,
  .plans-banner-content .hero-perks,
  .page-how-it-works .hiw-hero-meta {
    display: none;
  }

  .about-banner-content .hero-btns,
  .plans-banner-content .hero-btns,
  .page-how-it-works .hiw-hero-btns {
    gap: 7px;
    margin-bottom: 0;
  }

  .about-banner-content .hero-btns .btn,
  .plans-banner-content .hero-btns .btn,
  .page-how-it-works .hiw-hero-btns .btn {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 11px;
  }

  .plans-banner-cadence {
    margin-bottom: 8px;
    font-size: 11px;
    padding: 6px 11px;
  }

  .page-how-it-works .hiw-hero-content {
    align-items: flex-start;
    justify-content: center;
  }

  .page-how-it-works .hiw-hero-copy {
    width: 100%;
  }

  .page-how-it-works .hiw-hero-number {
    font-size: 140px;
    right: -4%;
    bottom: -4%;
  }

  .page-how-it-works .hiw-curved-line {
    right: -2%;
    bottom: 8%;
    width: 120px;
    height: 120px;
  }

  .faq-hero-content {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
  }

  .faq-hero-visual {
    display: none;
  }

  .faq-search-container {
    max-width: 100%;
  }

  .faq-hero-title {
    max-width: 100%;
  }

  .contact-hero-grid {
    grid-template-columns: 1.2fr .8fr;
    gap: 12px;
    align-items: center;
  }

  .contact-hero-visual {
    min-height: 0;
  }

  .contact-hero-image-mask {
    width: 100%;
    height: 215px;
    border-radius: 45% 16% 45% 16%;
  }

  .contact-hero-badge {
    right: -2px;
    bottom: 8px;
    font-size: 9px;
    padding: 7px 9px;
  }

  .contact-hero-copy .btn {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 11px;
  }

  .contact-hero-section::after {
    width: 180px;
    height: 180px;
    right: -55px;
  }

  .fr-story-viewport {
    padding-block: 50px;
  }

  .fr-story-track {
    gap: 22px;
    padding-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-banner-media img,
  .plans-banner-media img,
  .hiw-hero-image,
  .faq-hero-parallax,
  .about-banner-glow,
  .plans-banner-glow,
  .faq-hero .floating-veg,
  .faq-hero .veg-inner,
  .faq-hero-visual::before,
  .about-banner-section::after,
  .plans-banner-section::after,
  .contact-hero-section::after {
    animation: none !important;
  }
}

/* ===================================================
   Home 2 / Section 5 spacing fix
   Left column (title + photo) and right FAQ grid now stretch to the same
   height, and the extra section padding that left a blank band is trimmed.
   =================================================== */
.page-home2 .faq-typographic-section {
  padding: 80px 0 24px;
  min-height: 0;
}

.page-home2 .faq-typographic-layout {
  align-items: stretch;
}

.page-home2 .faq-typographic-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-home2 .faq-typographic-sidebar h2 {
  margin-bottom: 22px;
}

.page-home2 .faq-typographic-photo {
  flex: 1 1 0;
  height: 0;
  min-height: 260px;
}

.page-home2 .faq-hairline-grid {
  grid-template-rows: repeat(2, 1fr);
  align-content: stretch;
  border-top: 1px solid var(--line);
}

@media (max-width: 1023px) {
  .page-home2 .faq-typographic-section { padding: 64px 0 16px; }
  .page-home2 .faq-typographic-photo { flex: none; height: 260px; min-height: 0; }
  .page-home2 .faq-hairline-grid { grid-template-rows: none; }
}

/* ===================================================
   Home 2 / Section 6: animated join stage
   Colours are fixed (not theme variables) so the dark cherry stage reads
   the same in light and dark mode.
   =================================================== */
.page-home2 section.h2s6 {
  padding: 44px 0 90px;
  min-height: 0;
}

.h2s6-stage {
  --h2s6-cream: #FFF8E9;
  --h2s6-gold: #F0C869;
  --h2s6-rose: #B33B4F;
  --h2s6-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 40px;
  color: var(--h2s6-cream);
  background: linear-gradient(140deg, #24080F 0%, #3B0B19 55%, #4A0D1D 100%);
  border: 1px solid rgba(240, 200, 105, .18);
  box-shadow: 0 30px 70px rgba(31, 7, 13, .35);
}

.h2s6-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.h2s6-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0;
  transition: opacity 1.6s ease .2s;
}

.h2s6-blob--1 {
  width: 460px; height: 460px;
  inset-block-start: -160px; inset-inline-end: -80px;
  background: radial-gradient(circle, var(--h2s6-rose), transparent 68%);
  animation: h2s6Drift 16s ease-in-out infinite alternate;
}

.h2s6-blob--2 {
  width: 380px; height: 380px;
  inset-block-end: -140px; inset-inline-start: -60px;
  background: radial-gradient(circle, rgba(240, 200, 105, .75), transparent 68%);
  animation: h2s6Drift 20s ease-in-out infinite alternate-reverse;
}

.h2s6.in .h2s6-blob { opacity: .5; }
.h2s6.in .h2s6-blob--2 { opacity: .28; }

.h2s6-grain {
  position: absolute;
  inset: -50%;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: h2s6Grain 1.2s steps(6) infinite;
}

.h2s6-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 68px) clamp(28px, 4vw, 44px);
}

/* ---- copy ---- */
.h2s6-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin-bottom: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 248, 233, .22);
  background: rgba(255, 248, 233, .07);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--h2s6-cream);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease .1s, transform .8s var(--h2s6-ease) .1s;
}

.h2s6-live {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--h2s6-gold);
  box-shadow: 0 0 0 0 rgba(240, 200, 105, .6);
  animation: h2s6Pulse 2.2s ease-out infinite;
}

.h2s6.in .h2s6-eyebrow { opacity: 1; transform: none; }

.h2s6-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.08;
  color: var(--h2s6-cream);
  margin: 0 0 22px;
}

.h2s6-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.h2s6-w > span {
  display: inline-block;
  transform: translateY(115%) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1s var(--h2s6-ease);
  transition-delay: calc(.25s + var(--i) * .09s);
}

.h2s6.in .h2s6-w > span { transform: none; }

.h2s6-it { font-style: italic; color: var(--h2s6-gold); }

.h2s6-lead {
  max-width: 520px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 248, 233, .8);
  margin: 0 0 30px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease .85s, transform .9s var(--h2s6-ease) .85s;
}

.h2s6.in .h2s6-lead { opacity: 1; transform: none; }

.h2s6-actions {
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition: opacity .7s ease 1s, transform .9s var(--h2s6-ease) 1s;
}

.h2s6.in .h2s6-actions { opacity: 1; transform: none; }

.h2s6-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--h2s6-cream);
  color: #3B0B19;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  transition: transform .4s var(--h2s6-ease), box-shadow .4s ease, background .3s ease;
}

.h2s6-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(240, 200, 105, .55) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: h2s6Shine 4.5s ease-in-out 2s infinite;
}

.h2s6-cta i { transition: transform .35s var(--h2s6-ease); }

.h2s6-cta:hover {
  transform: translateY(-4px);
  background: #fff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .38);
}

.h2s6-cta:hover i { transform: translateX(6px); }
html[dir="rtl"] .h2s6-cta i { transform: scaleX(-1); }
html[dir="rtl"] .h2s6-cta:hover i { transform: scaleX(-1) translateX(6px); }

.h2s6-cta:focus-visible {
  outline: 3px solid var(--h2s6-gold);
  outline-offset: 3px;
}

.h2s6-perks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 0;
  margin: 28px 0 0;
}

.h2s6-perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: rgba(255, 248, 233, .86);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .7s var(--h2s6-ease);
}

.h2s6-perks li:nth-child(1) { transition-delay: 1.15s; }
.h2s6-perks li:nth-child(2) { transition-delay: 1.27s; }
.h2s6-perks li:nth-child(3) { transition-delay: 1.39s; }
.h2s6.in .h2s6-perks li { opacity: 1; transform: none; }
.h2s6-perks i { color: var(--h2s6-gold); }

/* ---- visual ---- */
.h2s6-visual {
  --mx: 0;
  --my: 0;
  position: relative;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 1 / 1.02;
  margin-inline: auto;
}

.h2s6-layer {
  position: absolute;
  translate: calc(var(--mx) * var(--d) * 1px) calc(var(--my) * var(--d) * 1px);
  will-change: translate;
}

.h2s6-layer--ring { inset: 0; }
.h2s6-layer--main { inset: 14% 26% 16%; }
.h2s6-layer--o1 { width: 30%; inset-inline-start: -2%; inset-block-start: 14%; }
.h2s6-layer--o2 { width: 24%; inset-inline-end: -1%; inset-block-start: 4%; }
.h2s6-layer--o3 { width: 21%; inset-inline-end: 4%; inset-block-end: 6%; }
.h2s6-layer--badge { inset-inline-start: 0; inset-block-end: 8%; }

.h2s6-ring {
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  transition: opacity 1.2s ease .5s;
  animation: h2s6Spin 48s linear infinite;
}

.h2s6-ring text {
  fill: rgba(255, 248, 233, .62);
  font-family: 'Manrope', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
}

.h2s6.in .h2s6-ring { opacity: 1; }

.h2s6-main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px 999px 28px 28px;
  border: 6px solid rgba(255, 248, 233, .9);
  background: #3B0B19;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .45);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s var(--h2s6-ease) .3s;
}

.h2s6-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.4);
  transition: transform 2s var(--h2s6-ease) .3s;
}

.h2s6.in .h2s6-main { clip-path: inset(0 0 0 0); }
.h2s6.in .h2s6-main img { transform: scale(1); }

.h2s6-orb {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid var(--h2s6-cream);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
  transform: scale(0);
  transition: transform 1s cubic-bezier(.34, 1.56, .64, 1);
}

.h2s6-orb img { width: 100%; height: 100%; object-fit: cover; }

.h2s6-orb--1 { transition-delay: 1s; }
.h2s6-orb--2 { transition-delay: 1.15s; }
.h2s6-orb--3 { transition-delay: 1.3s; }

.h2s6.in .h2s6-orb { transform: scale(1); }

/* gentle floating once each orb has landed (uses `translate`, so it never clashes with the pop-in) */
.h2s6.in .h2s6-orb--1 { animation: h2s6Bob 6s ease-in-out 2.2s infinite alternate; }
.h2s6.in .h2s6-orb--2 { animation: h2s6Bob 7.5s ease-in-out 2.4s infinite alternate-reverse; }
.h2s6.in .h2s6-orb--3 { animation: h2s6Bob 5.5s ease-in-out 2.6s infinite alternate; }

.h2s6-badge {
  display: grid;
  gap: 2px;
  padding: 14px 20px;
  border-radius: 20px;
  background: rgba(255, 248, 233, .94);
  color: #3B0B19;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateY(24px) scale(.9);
  transition: opacity .7s ease 1.5s, transform .9s var(--h2s6-ease) 1.5s;
}

.h2s6-badge strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1;
}

.h2s6-badge span { font-size: 13px; font-weight: 700; color: #6E4A50; }
.h2s6.in .h2s6-badge { opacity: 1; transform: none; }

/* ---- marquee ---- */
.h2s6-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(255, 248, 233, .14);
  padding: 20px 0;
  opacity: 0;
  transition: opacity 1s ease 1.2s;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.h2s6.in .h2s6-marquee { opacity: 1; }

.h2s6-marq-track {
  display: flex;
  width: max-content;
  animation: h2s6Marq 38s linear infinite;
}

.h2s6-marquee:hover .h2s6-marq-track { animation-play-state: paused; }

.h2s6-marq-set {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-inline-end: 28px;
  white-space: nowrap;
}

.h2s6-marq-set span {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 34px);
  color: rgba(255, 248, 233, .55);
}

.h2s6-marq-set i { color: var(--h2s6-gold); font-size: 16px; opacity: .8; }

html[dir="rtl"] .h2s6-marq-track { animation-name: h2s6MarqRtl; }

@keyframes h2s6Marq { to { transform: translateX(-50%); } }
@keyframes h2s6MarqRtl { to { transform: translateX(50%); } }
@keyframes h2s6Spin { to { transform: rotate(360deg); } }
@keyframes h2s6Bob { from { translate: 0 -8px; } to { translate: 0 10px; } }
@keyframes h2s6Drift { to { transform: translate(40px, 30px) scale(1.15); } }
@keyframes h2s6Grain { to { transform: translate(-4%, 3%); } }
@keyframes h2s6Shine { 0%, 55% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }
@keyframes h2s6Pulse {
  0% { box-shadow: 0 0 0 0 rgba(240, 200, 105, .6); }
  100% { box-shadow: 0 0 0 12px rgba(240, 200, 105, 0); }
}

@media (max-width: 960px) {
  .h2s6-grid { grid-template-columns: 1fr; }
  .h2s6-visual { max-width: 400px; }
  .h2s6-lead { max-width: none; }
}

@media (max-width: 560px) {
  .page-home2 section.h2s6 { padding: 16px 0 64px; }
  .h2s6-stage { border-radius: 26px; }
  .h2s6-visual { max-width: 320px; }
  .h2s6-orb { border-width: 3px; }
  .h2s6-cta { padding: 15px 24px; width: 100%; justify-content: center; }
  .h2s6-badge { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .h2s6-blob, .h2s6-grain, .h2s6-live, .h2s6-cta::after, .h2s6-ring,
  .h2s6-orb, .h2s6-marq-track { animation: none !important; }
  .h2s6-layer { translate: none; }
}

.h2s6-badge strong { direction: ltr; unicode-bidi: isolate; text-align: start; }

/* ===================================================
   About Us banner: even spacing, jumping headline, no scroll cue
   =================================================== */
.about-banner-section .about-banner-content {
  --ab-gap: clamp(12px, 2.3vh, 20px);
  justify-content: center;
  align-items: flex-start;
  gap: var(--ab-gap);
  padding: 32px 0;
}

/* every child gets the same gap; individual margins are switched off */
.about-banner-section .about-banner-content > * {
  margin: 0;
}

.about-banner-section .about-banner-content .hero-btns,
.about-banner-section .about-banner-content .hero-perks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.about-banner-section .about-banner-content .hero-btns {
  gap: 12px;
}

/* equal space above and below the hairline that separates the perks */
.about-banner-section .about-banner-content .hero-perks {
  width: 100%;
  padding-top: var(--ab-gap);
  gap: 10px 22px;
}

.about-banner-section .about-banner-content h1 {
  line-height: 1.06;
}

/* ---- jumping headline ---- */
.ab-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ab-visual {
  direction: ltr;
  unicode-bidi: isolate;
}

.ab-w {
  display: inline-block;
  white-space: nowrap;
}

.ab-ch {
  display: inline-block;
  animation:
    abJump .85s cubic-bezier(.3, .7, .3, 1) backwards,
    abWave 7s ease-in-out infinite;
  animation-delay:
    calc(.3s + var(--i) * .03s),
    calc(3s + var(--i) * .055s);
}

/* underline draws once the letters have landed */
.about-banner-content h1 span.italic-accent i {
  animation-delay: 1.7s;
}

@keyframes abJump {
  0%   { opacity: 0; transform: translateY(.9em) scale(.75); }
  45%  { opacity: 1; transform: translateY(-.3em) scale(1.06); }
  68%  { transform: translateY(.07em) scale(1); }
  84%  { transform: translateY(-.09em); }
  100% { opacity: 1; transform: none; }
}

@keyframes abWave {
  0%, 9%, 100% { transform: none; }
  4.5% { transform: translateY(-.13em); }
}

@media (hover: hover) {
  .ab-ch:hover {
    animation: abHop .5s cubic-bezier(.3, .7, .3, 1);
  }
  @keyframes abHop {
    0%, 100% { transform: none; }
    40% { transform: translateY(-.24em) scale(1.08); }
  }
}

/* the scroll cue is gone from the markup; keep any stray rule from showing it */
.about-banner-scroll-cue { display: none !important; }

/* tablet and mobile keep the centred layout the page already uses */
@media (max-width: 1023px) {
  .about-banner-section .about-banner-content {
    align-items: center;
    text-align: center;
  }
  .about-banner-section .about-banner-content .hero-btns,
  .about-banner-section .about-banner-content .hero-perks {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .about-banner-section .about-banner-content {
    --ab-gap: 12px;
    padding: 22px 0;
  }
  .about-banner-section .about-banner-content .hero-perks { display: none; }
  .about-banner-section .about-banner-content h1 { line-height: 1.08; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-ch { animation: none !important; }
}

/* =========================================================
   ABOUT US — SECTIONS 3 & 4 ONLY
   Outer visual wrappers removed; internal layouts preserved.
   ========================================================= */
#about-story-section {
  padding-top: 70px;
  padding-bottom: 34px;
}

#about-story-section .split-tone-section {
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

#about-story-section .split-dark-block,
#about-story-section .split-light-block {
  transition: transform .55s cubic-bezier(.2,.75,.2,1), box-shadow .55s ease;
  will-change: transform;
}

#about-story-section .split-dark-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(31,7,13,.18);
}

#about-story-section .split-light-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(31,7,13,.10);
}

#about-story-section .founder-avatar-img {
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
  will-change: transform;
}

#about-story-section .founder-avatar-img:hover {
  transform: scale(1.1) rotate(2deg);
  box-shadow: 0 14px 28px rgba(31,7,13,.22);
}

#about-collective-section {
  padding-top: 34px;
  padding-bottom: 70px;
}

#about-collective-section .grower-moodboard {
  margin: 0;
  /* Keep the existing internal spacing/layout; remove only the outer visual box. */
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#about-collective-section .grower-banner-wrapper {
  overflow: hidden;
}

#about-collective-section .grower-banner-img {
  transform-origin: center center;
  will-change: transform, clip-path, filter;
  transition: transform .65s cubic-bezier(.2,.8,.2,1), box-shadow .65s ease;
}

#about-collective-section .grower-banner-wrapper:hover .grower-banner-img {
  transform: scale(1.035);
  box-shadow: 0 20px 44px rgba(31,7,13,.18);
}

#about-collective-section .moodboard-inset-card,
#about-collective-section .passport-widget {
  will-change: transform;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease;
}

#about-collective-section .moodboard-inset-card:hover,
#about-collective-section .passport-widget:hover {
  transform: translateY(-5px);
}

#about-collective-section .grower-circle-thumb {
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  will-change: transform;
}

#about-collective-section .grower-circle-thumb:hover {
  transform: translateY(-5px) scale(1.12);
  box-shadow: 0 12px 24px rgba(31,7,13,.20);
}

@media (max-width: 1023px) {
  #about-story-section {
    padding-top: 55px;
    padding-bottom: 24px;
  }

  #about-collective-section {
    padding-top: 24px;
    padding-bottom: 55px;
  }
}

@media (max-width: 767px) {
  #about-story-section {
    padding-top: 42px;
    padding-bottom: 18px;
  }

  #about-collective-section {
    padding-top: 18px;
    padding-bottom: 44px;
  }

  #about-collective-section .grower-moodboard {
    padding-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #about-story-section .split-dark-block:hover,
  #about-story-section .split-light-block:hover,
  #about-collective-section .moodboard-inset-card:hover,
  #about-collective-section .passport-widget:hover,
  #about-collective-section .grower-banner-wrapper:hover .grower-banner-img,
  #about-story-section .founder-avatar-img:hover,
  #about-collective-section .grower-circle-thumb:hover {
    transform: none;
  }
}

/* ==========================================================
   ABOUT US — SPACING REFINEMENT
   Scoped only to the About Us page.
   Removes global section min-height whitespace while keeping
   the internal layouts/content unchanged.
   ========================================================== */
#main.about-page > section:not(.about-banner-section) {
  min-height: auto;
}

/* Tighten only the space between About page chapters. */
#main.about-page #manifesto {
  padding-top: 48px;
  padding-bottom: 44px;
}

#main.about-page #about-story-section {
  padding-top: 42px;
  padding-bottom: 24px;
}

#main.about-page #about-collective-section {
  padding-top: 24px;
  padding-bottom: 42px;
}

#main.about-page .sustainability-hairline-section {
  padding-top: 46px;
  padding-bottom: 46px;
}

#main.about-page .milestone-timeline-section {
  padding-top: 46px;
  padding-bottom: 46px;
}

#main.about-page .about-finale-section {
  margin-top: 24px;
  margin-bottom: 24px;
}

@media (max-width: 1023px) {
  #main.about-page #manifesto {
    padding-top: 36px;
    padding-bottom: 34px;
  }

  #main.about-page #about-story-section {
    padding-top: 32px;
    padding-bottom: 20px;
  }

  #main.about-page #about-collective-section {
    padding-top: 20px;
    padding-bottom: 34px;
  }

  #main.about-page .sustainability-hairline-section,
  #main.about-page .milestone-timeline-section {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

@media (max-width: 767px) {
  #main.about-page #manifesto {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  #main.about-page #about-story-section {
    padding-top: 26px;
    padding-bottom: 16px;
  }

  #main.about-page #about-collective-section {
    padding-top: 16px;
    padding-bottom: 28px;
  }

  #main.about-page .sustainability-hairline-section,
  #main.about-page .milestone-timeline-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  #main.about-page .about-finale-section {
    margin-top: 18px;
    margin-bottom: 18px;
  }
}

/* ============================================================
   PLANS BANNER — SPACING + CREATIVE MOTION REFINEMENT
   ============================================================ */
.plans-banner-section {
  min-height: 520px;
  height: 58vh;
  padding: 0;
}

.plans-banner-content {
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  padding: 34px 0 38px;
}

.plans-banner-content .hero-pill {
  margin: 0 0 18px;
  padding: 11px 20px;
}

.plans-banner-content h1 {
  margin: 0 0 16px;
  max-width: 720px;
  line-height: 1.04;
  letter-spacing: -1.4px;
  animation: plansHeadingJump 6s ease-in-out infinite;
  transform-origin: left bottom;
}

.plans-banner-content .hero-lead {
  max-width: 650px;
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.58;
}

.plans-banner-cadence {
  margin: 0 0 18px;
  padding: 10px 18px;
  min-height: 42px;
}

.plans-banner-content .hero-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}

.plans-banner-content .hero-btns .btn {
  min-height: 46px;
  padding: 12px 22px;
}

.plans-banner-content .hero-perks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 820px;
  padding-top: 14px;
  margin: 0;
}

.plans-banner-content .hero-perk-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 0 20px;
  border-right: 1px solid rgba(255,248,233,.28);
  white-space: nowrap;
}

.plans-banner-content .hero-perk-item:first-child { padding-left: 0; }
.plans-banner-content .hero-perk-item:last-child { border-right: 0; }
.plans-banner-scroll-cue { display: none !important; }

@keyframes plansHeadingJump {
  0%, 78%, 100% { transform: translateY(0); }
  82% { transform: translateY(-7px); }
  86% { transform: translateY(0); }
  90% { transform: translateY(-3px); }
  94% { transform: translateY(0); }
}

@media (max-width: 767px) {
  .plans-banner-section { min-height: 58svh; height: 58svh; }
  .plans-banner-content { padding: 24px 0 28px; }
  .plans-banner-content .hero-pill { margin-bottom: 13px; padding: 9px 14px; }
  .plans-banner-content h1 { margin-bottom: 13px; letter-spacing: -.7px; }
  .plans-banner-content .hero-lead { font-size: 13px; line-height: 1.5; margin-bottom: 13px; }
  .plans-banner-cadence { margin-bottom: 13px; }
  .plans-banner-content .hero-btns { gap: 9px; margin-bottom: 0; }
  .plans-banner-content .hero-btns .btn { min-height: 40px; padding: 9px 13px; font-size: 12px; }
  .plans-banner-content .hero-perks { display: none; }
}

/* ============================================================
   PLANS PAGE — FINAL BANNER + BOX MARQUEE POLISH
   ============================================================ */
.plans-banner-content { padding: 34px 0 30px; gap: 0; }
.plans-banner-content h1 { margin: 0 0 12px; letter-spacing: -1.2px; animation: plansHeadingJump 5.5s ease-in-out infinite; transform-origin: 50% 100%; }
.plans-banner-content .hero-lead { margin: 0 0 14px; max-width: 610px; }
.plans-banner-cadence { margin: 0 0 13px; }
.plans-banner-content .hero-btns { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 13px; }
.plans-banner-content .hero-perks { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; max-width:850px; padding:12px 0 0; border-top:1px solid rgba(255,248,233,.35); }
.plans-banner-content .hero-perk-item { white-space:nowrap; }
@keyframes plansHeadingJump { 0%,82%,100% { transform:translateY(0); } 86% { transform:translateY(-5px); } 90% { transform:translateY(0); } 94% { transform:translateY(-2px); } }

.box-marquee-wrap { display:flex; align-items:center; gap:14px; width:100%; margin-bottom:34px; }
.box-marquee-wrap .box-timeline { flex:1; min-width:0; margin:0; padding:0 8px; overflow:hidden; justify-content:space-around; }
.box-marquee-wrap .box-timeline::before { left:8px; right:8px; }
.box-marquee-btn { flex:0 0 46px; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; box-shadow:var(--shadow-sm); }
.box-marquee-btn:hover { transform:translateY(-3px) scale(1.05); background:var(--brand); color:var(--on-strong); border-color:var(--brand); }
.box-marquee-btn:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
.box-display-shell {
  display:grid;
  grid-template-columns:46px minmax(0, 1fr) 46px;
  align-items:center;
  gap:24px;
  width:100%;
}
.box-display-stage { padding:38px 64px; gap:42px; position:relative; min-width:0; }
.box-stage-nav { position:static; z-index:5; transform:none; }
.box-stage-nav-prev { justify-self:center; }
.box-stage-nav-next { justify-self:center; }
.box-stage-nav:hover { transform:scale(1.05); }
.box-display-stage.is-switching .box-details-panel { animation: boxPanelSwap .45s ease both; }
@keyframes boxPanelSwap { from { opacity:.25; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } }
@media (max-width:767px) {
  .plans-banner-content { padding:28px 0 24px; }
  .plans-banner-content h1 { letter-spacing:-.6px; }
  .plans-banner-content .hero-btns { gap:10px; }
  .plans-banner-content .hero-perks { gap:9px 15px; }
  .plans-banner-content .hero-perk-item { font-size:12px; }
  .box-marquee-wrap { gap:7px; }
  .box-marquee-btn { flex-basis:38px; width:38px; height:38px; }
  .box-marquee-wrap .box-timeline { padding:0 2px; }
  .box-marquee-wrap .timeline-item { gap:8px; }
  .box-marquee-wrap .timeline-item span { font-size:11px; }
  .box-marquee-wrap .timeline-dot { width:36px; height:36px; border-width:2px; }
  .box-display-shell { grid-template-columns:38px minmax(0, 1fr) 38px; gap:12px; }
  .box-display-stage { padding:22px 24px; gap:22px; }
  .box-stage-nav { width:38px; height:38px; flex-basis:38px; }
  .box-stage-nav:hover { transform:scale(1.04); }
}

/* =========================================================
   HOW IT WORKS — SECTION 3: EDITORIAL CHOOSE EXPERIENCE
   Scoped ONLY to #hiw-s3
   ========================================================= */
#hiw-s3.fr-s3{
  position:relative;
  isolation:isolate;
  min-height:clamp(620px,82vh,860px);
  padding:clamp(70px,8vw,120px) clamp(20px,6vw,88px);
  overflow:hidden;
  background:var(--cream,#f7eedf);
  color:var(--ink,#250910);
}
#hiw-s3 .fr-s3-editorial-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(143,24,57,.08), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,.7), transparent 30%);
}
#hiw-s3 .fr-s3-grid{
  width:min(1180px,100%);
  min-height:clamp(500px,70vh,700px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(300px,.78fr) minmax(420px,1.22fr);
  align-items:center;
  gap:clamp(38px,6vw,90px);
}
#hiw-s3 .fr-s3-copy{
  position:relative;
  z-index:4;
  max-width:520px;
}
#hiw-s3 .fr-s3-kicker{
  display:inline-block;
  margin-bottom:14px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8d163b;
}
#hiw-s3 .fr-s3-number{
  position:absolute;
  right:0;
  top:-18px;
  font-size:clamp(70px,9vw,130px);
  line-height:.8;
  font-weight:800;
  letter-spacing:-.08em;
  color:rgba(141,22,59,.08);
  pointer-events:none;
}
#hiw-s3 .fr-s3-copy h2{
  margin:0 0 20px;
  max-width:510px;
  font-size:clamp(42px,5vw,76px);
  line-height:.95;
  letter-spacing:-.045em;
  color:#250910;
}
#hiw-s3 .fr-s3-copy h2 em{color:#8d163b;}
#hiw-s3 .fr-s3-copy p{
  max-width:500px;
  margin:0 0 28px;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.7;
  color:#654f55;
}
#hiw-s3 .fr-s3-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:13px 22px;
  transition:transform .3s ease,box-shadow .3s ease;
}
#hiw-s3 .fr-s3-cta:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(37,9,16,.18);
}
#hiw-s3 .fr-s3-steps{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:38px;
  padding-top:18px;
  border-top:1px solid rgba(37,9,16,.14);
}
#hiw-s3 .fr-s3-steps span{
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:#6d555b;
}
#hiw-s3 .fr-s3-steps b{color:#8d163b;margin-right:5px;}
#hiw-s3 .fr-s3-visual{
  position:relative;
  min-height:clamp(480px,65vh,650px);
  display:flex;
  align-items:center;
  justify-content:center;
}
#hiw-s3 .fr-s3-main-image{
  position:relative;
  width:min(100%,690px);
  height:clamp(420px,58vh,600px);
  overflow:hidden;
  border-radius:34px 34px 34px 8px;
  box-shadow:0 26px 60px rgba(37,9,16,.18);
  transform:translateZ(0);
}
#hiw-s3 .fr-s3-main-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.08);
  will-change:transform,filter;
}
#hiw-s3 .fr-s3-image-wash{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(24,6,12,.7) 100%);
  pointer-events:none;
}
#hiw-s3 .fr-s3-image-label{
  position:absolute;
  left:24px;
  bottom:22px;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:rgba(35,8,15,.76);
  color:#fff8ee;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
  backdrop-filter:blur(8px);
}
#hiw-s3 .fr-s3-float{
  position:absolute;
  z-index:5;
  width:150px;
  height:112px;
  overflow:hidden;
  border:7px solid #f7eedf;
  border-radius:22px;
  box-shadow:0 18px 35px rgba(37,9,16,.2);
  will-change:transform;
}
#hiw-s3 .fr-s3-float img{width:100%;height:100%;object-fit:cover;display:block;}
#hiw-s3 .fr-s3-float-a{top:7%;left:-5%;transform:rotate(-5deg);}
#hiw-s3 .fr-s3-float-b{right:-3%;bottom:8%;transform:rotate(5deg);}
#hiw-s3 .fr-s3-orbit{
  position:absolute;
  width:180px;height:180px;
  border:1px solid rgba(141,22,59,.18);
  border-radius:50%;
  pointer-events:none;
}
#hiw-s3 .fr-s3-orbit-a{right:-45px;top:2%;}
#hiw-s3 .fr-s3-orbit-b{left:-70px;bottom:2%;width:120px;height:120px;}
#hiw-s3 .fr-s3-dot{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:#8d163b;box-shadow:0 0 0 7px rgba(141,22,59,.09);
}
#hiw-s3 .fr-s3-dot-a{right:11%;top:12%;}
#hiw-s3 .fr-s3-dot-b{left:9%;bottom:14%;}
#hiw-s3 .fr-s3-progress{
  width:min(1180px,100%);
  height:2px;
  margin:38px auto 0;
  background:rgba(37,9,16,.12);
  overflow:hidden;
}
#hiw-s3 .fr-s3-progress span{
  display:block;width:0;height:100%;background:#8d163b;
}

.dark-mode #hiw-s3,
body.dark-mode #hiw-s3{
  background:#17070c;
  color:#fff5eb;
}
.dark-mode #hiw-s3 .fr-s3-editorial-bg,
body.dark-mode #hiw-s3 .fr-s3-editorial-bg{
  background:
    radial-gradient(circle at 12% 18%,rgba(224,63,100,.13),transparent 28%),
    radial-gradient(circle at 88% 82%,rgba(255,255,255,.035),transparent 30%);
}
.dark-mode #hiw-s3 .fr-s3-copy h2,
body.dark-mode #hiw-s3 .fr-s3-copy h2{color:#fff5eb;}
.dark-mode #hiw-s3 .fr-s3-copy p,
body.dark-mode #hiw-s3 .fr-s3-copy p{color:#e5cfd2;}
.dark-mode #hiw-s3 .fr-s3-steps,
body.dark-mode #hiw-s3 .fr-s3-steps{border-color:rgba(255,255,255,.14);}
.dark-mode #hiw-s3 .fr-s3-steps span,
body.dark-mode #hiw-s3 .fr-s3-steps span{color:#ddc6ca;}
.dark-mode #hiw-s3 .fr-s3-number,
body.dark-mode #hiw-s3 .fr-s3-number{color:rgba(255,255,255,.07);}
.dark-mode #hiw-s3 .fr-s3-float,
body.dark-mode #hiw-s3 .fr-s3-float{border-color:#17070c;}
.dark-mode #hiw-s3 .fr-s3-progress,
body.dark-mode #hiw-s3 .fr-s3-progress{background:rgba(255,255,255,.14);}

@media(max-width:900px){
  #hiw-s3.fr-s3{padding:70px 22px 65px;}
  #hiw-s3 .fr-s3-grid{grid-template-columns:1fr;gap:42px;}
  #hiw-s3 .fr-s3-copy{max-width:680px;margin:auto;width:100%;}
  #hiw-s3 .fr-s3-visual{min-height:500px;}
  #hiw-s3 .fr-s3-main-image{height:500px;}
  #hiw-s3 .fr-s3-float-a{left:0;}
  #hiw-s3 .fr-s3-float-b{right:0;}
}
@media(max-width:600px){
  #hiw-s3.fr-s3{padding:54px 16px 50px;}
  #hiw-s3 .fr-s3-grid{gap:28px;}
  #hiw-s3 .fr-s3-copy h2{font-size:clamp(38px,11vw,54px);}
  #hiw-s3 .fr-s3-copy p{font-size:15px;line-height:1.6;}
  #hiw-s3 .fr-s3-steps{margin-top:25px;gap:8px 14px;}
  #hiw-s3 .fr-s3-steps span{font-size:12px;}
  #hiw-s3 .fr-s3-visual{min-height:390px;}
  #hiw-s3 .fr-s3-main-image{height:390px;border-radius:25px 25px 25px 5px;}
  #hiw-s3 .fr-s3-float{width:105px;height:82px;border-width:5px;border-radius:15px;}
  #hiw-s3 .fr-s3-float-a{top:4%;left:-2%;}
  #hiw-s3 .fr-s3-float-b{right:-2%;bottom:4%;}
  #hiw-s3 .fr-s3-orbit{display:none;}
  #hiw-s3 .fr-s3-number{font-size:78px;top:-8px;}
  #hiw-s3 .fr-s3-image-label{left:15px;bottom:15px;font-size:12px;padding:8px 11px;}
}

/* =====================================================================
   SAMPLE BOX PAGE
   (merged from the former sample-box.css; dark-mode rules live in
   darkmode.css and RTL rules live in rtl.css)
   ===================================================================== */

/* ===================================================
   Sample Box Page - Premium Interactive Experience
   FreshRhythm Grocery Subscription Service
   =================================================== */

/* Base Setup */

.page-sample-box {
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* Custom Cursor for Desktop */

@media (min-width: 1024px) {
  body.sample-box-page .custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--brand);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s ease, opacity 0.15s ease;
    mix-blend-mode: difference;
  }

  body.sample-box-page .custom-cursor.active {
    transform: scale(2);
    background: rgba(122, 16, 48, 0.1);
  }

  body.sample-box-page .cursor-follower {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--brand);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.08s ease;
  }
}

/* ===================================================
   SECTION 1 — HALF-VIEWPORT SAMPLE BOX BANNER
   Layout: Layered composition with parallax
   Animation: Parallax + Staggered Text + Curtain Reveal
   =================================================== */

.sb-hero {
  position: relative;
  height: 50vh;
  min-height: 400px;
  max-height: 600px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%);
}

.sb-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="%237A1030" opacity="0.08"/><circle cx="80" cy="80" r="1.5" fill="%237A1030" opacity="0.06"/><circle cx="50" cy="10" r="0.8" fill="%237A1030" opacity="0.07"/><circle cx="10" cy="70" r="1.2" fill="%237A1030" opacity="0.05"/><circle cx="90" cy="30" r="0.6" fill="%237A1030" opacity="0.08"/></svg>');
  background-size: 200px 200px;
  opacity: 0.6;
}

.sb-hero-curtain {
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: translateY(-100%);
  z-index: 10;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-hero-curtain.revealed {
  transform: translateY(0);
}

.sb-hero-content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  padding: 0 6%;
}

.sb-hero-text {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.sb-hero-text.revealed {
  opacity: 1;
  transform: translateY(0);
}

.sb-hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sb-hero-eyebrow i {
  font-size: 0.9rem;
}

.sb-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--text);
}

.sb-hero-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

.sb-hero-title.revealed .char {
  animation: sbCharReveal 0.6s ease forwards;
}

@keyframes sbCharReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sb-hero-description {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 32px;
  max-width: 480px;
  line-height: 1.6;
}

.sb-hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.sb-hero-visual {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-hero-box {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4/3;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
}

.sb-hero-box.revealed {
  transform: translateY(0);
  opacity: 1;
}

.sb-hero-box-main {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-soft) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 2px solid var(--line);
}

.sb-hero-box-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Floating Produce Elements */

body.sample-box-page .floating-produce {
  position: absolute;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
  pointer-events: none;
}

body.sample-box-page .produce-1 {
  width: 80px;
  height: 80px;
  top: -20px;
  right: -30px;
  background: linear-gradient(135deg, #FF6B6B 0%, #EE5A5A 100%);
  z-index: 2;
}

body.sample-box-page .produce-2 {
  width: 60px;
  height: 60px;
  bottom: -15px;
  left: -25px;
  background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
  z-index: 2;
}

body.sample-box-page .produce-3 {
  width: 50px;
  height: 50px;
  top: 50%;
  right: -40px;
  background: linear-gradient(135deg, #FFE66D 0%, #F7B731 100%);
  z-index: 1;
}

body.sample-box-page .produce-4 {
  width: 70px;
  height: 70px;
  top: 20%;
  left: -35px;
  background: linear-gradient(135deg, #95E1D3 0%, #B8E994 100%);
  z-index: 1;
}

/* CTA Button Effects */

body.sample-box-page .btn-shimmer {
  position: relative;
  overflow: hidden;
}

body.sample-box-page .btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}

body.sample-box-page .btn-shimmer:hover::before {
  left: 100%;
}

body.sample-box-page .btn-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.sample-box-page .btn-scale:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 28px rgba(31, 7, 13, 0.2);
}

/* Parallax Effect */

@media (min-width: 1024px) {
  .sb-hero-visual {
    transform-style: preserve-3d;
  }

  body.sample-box-page .floating-produce {
    transition: transform 0.1s ease-out;
  }
}

/* Responsive Design */

@media (max-width: 1023px) {
  .sb-hero {
    height: auto;
    min-height: 500px;
    padding: 80px 0;
  }

  .sb-hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .sb-hero-description {
    max-width: 100%;
    margin-inline: auto;
  }

  .sb-hero-btns {
    justify-content: center;
  }

  body.sample-box-page .floating-produce {
    display: none;
  }
}

@media (max-width: 767px) {
  .sb-hero {
    min-height: 450px;
    padding: 60px 0;
  }

  .sb-hero-title {
    font-size: 2rem;
  }

  .sb-hero-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .sb-hero-box {
    max-width: 100%;
  }
}

/* ===================================================
   SECTION 2 — INTERACTIVE SAMPLE BOX IMAGE SLIDER
   Layout: Large central image with preview strip
   Animation: Wipe Reveal + Ripple + 3D Tilt
   =================================================== */

.sb-slider-section {
  position: relative;
  padding: 100px 0;
  background: var(--surface);
  overflow: hidden;
}

.sb-slider-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.sb-slider-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6%;
}

.sb-slider-main {
  position: relative;
  aspect-ratio: 16/9;
  max-height: 700px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.sb-slider-main:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(2deg);
}

.sb-slider-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.sb-slider-image.active {
  opacity: 1;
}

.sb-slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wipe Effect */

.sb-slider-wipe {
  position: absolute;
  inset: 0;
  background: var(--surface);
  transform: translateX(100%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.sb-slider-wipe.wipe-active {
  transform: translateX(0);
}

/* Shimmer Effect on Image */

.sb-slider-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: translateX(-100%);
  z-index: 3;
  pointer-events: none;
}

.sb-slider-shimmer.shimmer-active {
  animation: sbShimmerMove 1.5s ease;
}

@keyframes sbShimmerMove {
  to {
    transform: translateX(100%);
  }
}

/* Navigation Controls */

.sb-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  color: var(--text);
}

.sb-slider-nav:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-50%) scale(1.1);
}

.sb-slider-nav i {
  font-size: 1.2rem;
}

.sb-slider-prev {
  left: 20px;
}

.sb-slider-next {
  right: 20px;
}

/* Border Trace Effect */

.sb-slider-nav::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.sb-slider-nav:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* Image Counter */

.sb-slider-counter {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-family: 'Manrope', monospace;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 10;
  backdrop-filter: blur(10px);
}

/* Image Caption */

.sb-slider-caption {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  z-index: 10;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.sb-slider-caption.active {
  opacity: 1;
  transform: translateY(0);
}

/* Preview Strip */

.sb-slider-strip {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}

.sb-slider-strip::-webkit-scrollbar {
  display: none;
}

.sb-slider-thumb {
  flex: 0 0 120px;
  aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.sb-slider-thumb:hover {
  opacity: 1;
  transform: scale(1.05);
}

.sb-slider-thumb.active {
  border-color: var(--brand);
  opacity: 1;
}

.sb-slider-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive Design */

@media (max-width: 1023px) {
  .sb-slider-section {
    padding: 60px 0;
  }

  .sb-slider-main {
    aspect-ratio: 4/3;
    max-height: 500px;
  }

  .sb-slider-nav {
    width: 48px;
    height: 48px;
  }

  .sb-slider-thumb {
    flex: 0 0 100px;
  }
}

@media (max-width: 767px) {
  .sb-slider-section {
    padding: 40px 0;
  }

  .sb-slider-main {
    aspect-ratio: 1/1;
    max-height: 400px;
  }

  .sb-slider-nav {
    width: 44px;
    height: 44px;
  }

  .sb-slider-prev {
    left: 10px;
  }

  .sb-slider-next {
    right: 10px;
  }

  .sb-slider-caption {
    font-size: 1rem;
    bottom: 20px;
    left: 20px;
    right: 20px;
  }

  .sb-slider-thumb {
    flex: 0 0 80px;
  }
}

/* Touch-friendly swipe indicator */

@media (hover: none) {
  .sb-slider-swipe-hint {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 0.85rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 10;
    animation: sbSwipeHint 2s ease-in-out infinite;
  }

  @keyframes sbSwipeHint {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
  }
}

/* ===================================================
   SECTION 4 — SAMPLE BOX JOURNEY / SCROLL STORY
   Layout: Vertical scrollytelling with sticky stages
   Animation: Scroll Reveal + Sticky + SVG Path Drawing
   =================================================== */

.sb-journey-section {
  position: relative;
  padding: 100px 0;
  background: var(--bg);
  overflow: hidden;
}

.sb-journey-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 6%;
}

/* Journey Path */

.sb-journey-path {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--line);
  transform: translateX(-50%);
}

.sb-journey-progress {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  background: var(--brand);
  transform: translateX(-50%);
  height: 0;
  transition: height 0.3s ease;
}

/* Journey Stages */

.sb-journey-stage {
  position: relative;
  padding: 60px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.sb-journey-stage.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Alternating Layout */

.sb-journey-stage:nth-child(odd) .sb-journey-content {
  order: 1;
}

.sb-journey-stage:nth-child(odd) .sb-journey-visual {
  order: 2;
}

.sb-journey-stage:nth-child(even) .sb-journey-content {
  order: 2;
}

.sb-journey-stage:nth-child(even) .sb-journey-visual {
  order: 1;
}

/* Stage Number */

.sb-stage-number {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', monospace;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  z-index: 10;
  transition: all 0.4s ease;
}

.sb-journey-stage.active .sb-stage-number {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-strong);
  transform: translate(-50%, -50%) scale(1.2);
}

/* Stage Content */

.sb-journey-content {
  padding: 0 40px;
}

.sb-stage-title {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text);
}

.sb-stage-description {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.7;
}

/* Stage Visual */

.sb-journey-visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.4s ease;
}

.sb-journey-stage.active .sb-journey-visual {
  transform: scale(1.05);
}

.sb-journey-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Background Changes */

.sb-journey-stage:nth-child(1) {
  background: linear-gradient(90deg, transparent 40%, var(--bg-soft) 40%);
}

.sb-journey-stage:nth-child(2) {
  background: linear-gradient(90deg, var(--bg-soft) 60%, transparent 60%);
}

.sb-journey-stage:nth-child(3) {
  background: linear-gradient(90deg, transparent 40%, var(--bg-soft) 40%);
}

.sb-journey-stage:nth-child(4) {
  background: linear-gradient(90deg, var(--bg-soft) 60%, transparent 60%);
}

.sb-journey-stage:nth-child(5) {
  background: linear-gradient(90deg, transparent 40%, var(--bg-soft) 40%);
}

/* Counter Animation */

.sb-stage-number .counter {
  display: inline-block;
}

/* Responsive Design */

@media (max-width: 1023px) {
  .sb-journey-section {
    padding: 60px 0;
  }

  .sb-journey-stage {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 0;
  }

  .sb-journey-stage:nth-child(odd) .sb-journey-content,
.sb-journey-stage:nth-child(even) .sb-journey-content {
    order: 1;
  }

  .sb-journey-stage:nth-child(odd) .sb-journey-visual,
.sb-journey-stage:nth-child(even) .sb-journey-visual {
    order: 2;
  }

  .sb-journey-path {
    left: 30px;
  }

  .sb-journey-progress {
    left: 30px;
  }

  .sb-stage-number {
    left: 30px;
  }

  .sb-journey-content {
    padding: 0 0 0 60px;
  }

  .sb-journey-stage:nth-child(odd),
.sb-journey-stage:nth-child(even) {
    background: none;
  }
}

@media (max-width: 767px) {
  .sb-journey-section {
    padding: 40px 0;
  }

  .sb-journey-stage {
    padding: 30px 0;
  }

  .sb-stage-title {
    font-size: 1.5rem;
  }

  .sb-stage-description {
    font-size: 1rem;
  }

  .sb-stage-number {
    width: 50px;
    height: 50px;
    font-size: 1rem;
  }

  .sb-journey-content {
    padding: 0 0 0 50px;
  }
}

/* Responsive Design */

/* ===================================================
   SECTION 6 — FRESHNESS & QUALITY
   Layout: Typography + Photography with spotlight
   Animation: Kinetic Typography + Spotlight + Liquid Motion
   =================================================== */

.sb-freshness-section {
  position: relative;
  padding: 120px 0;
  background: var(--surface);
  overflow: hidden;
}

.sb-freshness-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6%;
}

/* Large Typography */

.sb-freshness-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 60px;
  position: relative;
  z-index: 5;
}

.sb-freshness-heading .word {
  display: inline-block;
  overflow: hidden;
}

.sb-freshness-heading .char {
  display: inline-block;
  transition: transform 0.3s ease;
}

.sb-freshness-heading:hover .char {
  transform: translateY(-5px);
}

/* Kinetic Marquee */

.sb-kinetic-marquee {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
  opacity: 0.08;
}

.sb-kinetic-text {
  display: inline-block;
  font-size: 8rem;
  font-weight: 900;
  color: var(--brand);
  animation: sbKineticMove 30s linear infinite;
}

@keyframes sbKineticMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Photography Grid */

.sb-freshness-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 5;
}

.sb-freshness-photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s ease;
}

.sb-freshness-photo:hover {
  transform: scale(1.03);
}

.sb-freshness-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Spotlight Effect */

.sb-freshness-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.sb-freshness-photo:hover::before {
  opacity: 1;
}

/* Floating Labels */

.sb-freshness-label {
  position: absolute;
  background: rgba(255,255,255,0.95);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.sb-freshness-photo:hover .sb-freshness-label {
  opacity: 1;
  transform: translateY(0);
}

body.sample-box-page .label-1 {
  top: 20px; left: 20px;
}

body.sample-box-page .label-2 {
  bottom: 20px; right: 20px;
}

body.sample-box-page .label-3 {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* Supporting Points */

.sb-freshness-points {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 60px;
  position: relative;
  z-index: 5;
}

.sb-freshness-point {
  flex: 1 1 200px;
  padding: 20px;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  transition: all 0.3s ease;
}

.sb-freshness-point:hover {
  border-color: var(--brand);
  transform: translateY(-4px);
}

.sb-freshness-point i {
  font-size: 1.5rem;
  color: var(--brand);
  margin-bottom: 12px;
}

.sb-freshness-point h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.sb-freshness-point p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Liquid Blob Background */

.sb-liquid-blob {
  position: absolute;
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, rgba(122, 16, 48, 0.1) 0%, rgba(122, 16, 48, 0.05) 100%);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: sbBlobMorph 8s ease-in-out infinite;
  z-index: 1;
}

body.sample-box-page .blob-1 {
  top: 10%; right: 10%;
}

body.sample-box-page .blob-2 {
  bottom: 20%; left: 5%; animation-delay: 2s;
}

@keyframes sbBlobMorph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
}

/* Typewriter Effect */

.sb-typewriter {
  font-size: 1.2rem;
  color: var(--muted);
  margin-top: 40px;
  position: relative;
  z-index: 5;
}

.sb-typewriter::after {
  content: '|';
  animation: sbBlink 1s step-end infinite;
}

@keyframes sbBlink {
  50% { opacity: 0; }
}

/* Responsive Design */

@media (max-width: 1023px) {
  .sb-freshness-section {
    padding: 80px 0;
  }

  .sb-freshness-heading {
    font-size: 2.5rem;
  }

  .sb-kinetic-text {
    font-size: 4rem;
  }

  .sb-freshness-photos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .sb-freshness-section {
    padding: 60px 0;
  }

  .sb-freshness-heading {
    font-size: 2rem;
  }

  .sb-kinetic-text {
    font-size: 2.5rem;
  }

  .sb-freshness-photos {
    grid-template-columns: 1fr;
  }

  .sb-freshness-points {
    flex-direction: column;
  }

  .sb-liquid-blob {
    width: 200px;
    height: 200px;
  }
}

/* ===================================================
   SECTION 7 — FINAL SAMPLE BOX CTA
   Layout: Premium conversion with layered composition
   Animation: Curtain Reveal + Ripple + Glow + 3D Tilt
   =================================================== */

.sb-cta-section {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%);
  overflow: hidden;
}

.sb-cta-curtain {
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: translateY(-100%);
  z-index: 20;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-cta-curtain.revealed {
  transform: translateY(0);
}

.sb-cta-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 6%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* CTA Content */

.sb-cta-content {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.sb-cta-content.revealed {
  opacity: 1;
  transform: translateY(0);
}

.sb-cta-eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sb-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--text);
}

.sb-cta-title .word {
  display: inline-block;
  overflow: hidden;
}

.sb-cta-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

.sb-cta-title.revealed .char {
  animation: sbCharReveal 0.6s ease forwards;
}

.sb-cta-description {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

/* Counter */

.sb-cta-counter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 32px;
}

.sb-counter-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--brand);
  font-family: 'Manrope', monospace;
}

.sb-counter-label {
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 600;
}

/* CTA Buttons */

.sb-cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Ripple Effect */

body.sample-box-page .btn-ripple {
  position: relative;
  overflow: hidden;
}

body.sample-box-page .btn-ripple::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--brand) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}

body.sample-box-page .btn-ripple:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

/* CTA Visual */

.sb-cta-visual {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.8s ease 0.2s;
}

.sb-cta-visual.revealed {
  opacity: 1;
  transform: translateX(0);
}

.sb-cta-box {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-soft) 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--line);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.sb-cta-box:hover {
  transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
}

.sb-cta-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Emerging Products */

.sb-emerging-product {
  position: absolute;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.sb-cta-visual.revealed .sb-emerging-product {
  opacity: 1;
  transform: translateY(0);
}

body.sample-box-page .emerging-1 {
  width: 80px;
  height: 80px;
  top: -20px;
  right: -30px;
  background: linear-gradient(135deg, #FF6B6B 0%, #EE5A5A 100%);
  transition-delay: 0.4s;
}

body.sample-box-page .emerging-2 {
  width: 60px;
  height: 60px;
  bottom: -15px;
  left: -25px;
  background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
  transition-delay: 0.6s;
}

body.sample-box-page .emerging-3 {
  width: 50px;
  height: 50px;
  top: 50%;
  right: -40px;
  background: linear-gradient(135deg, #FFE66D 0%, #F7B731 100%);
  transition-delay: 0.8s;
}

/* Particle Effects */

.sb-cta-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.sb-cta-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--brand);
  border-radius: 50%;
  opacity: 0.4;
  animation: sbCtaParticleFloat 6s ease-in-out infinite;
}

@keyframes sbCtaParticleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-30px) translateX(15px) scale(1.5);
    opacity: 0.8;
  }
}

/* Decorative Lines */

.sb-decorative-line {
  position: absolute;
  background: var(--line);
  opacity: 0.3;
}

body.sample-box-page .line-1 {
  width: 2px;
  height: 100px;
  top: 20%;
  left: 10%;
}

body.sample-box-page .line-2 {
  width: 100px;
  height: 2px;
  bottom: 30%;
  right: 15%;
}

/* Glow Effect */

.sb-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(122, 16, 48, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: sbGlowPulse 4s ease-in-out infinite;
}

body.sample-box-page .glow-1 {
  top: 20%; right: 20%;
}

body.sample-box-page .glow-2 {
  bottom: 20%; left: 20%; animation-delay: 2s;
}

@keyframes sbGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

/* Responsive Design */

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

  .sb-cta-container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .sb-cta-buttons {
    justify-content: center;
  }

  .sb-cta-visual {
    max-width: 400px;
    margin: 0 auto;
  }

  .sb-emerging-product {
    display: none;
  }
}

@media (max-width: 767px) {
  .sb-cta-section {
    padding: 60px 0;
  }

  .sb-cta-title {
    font-size: 1.75rem;
  }

  .sb-counter-number {
    font-size: 2rem;
  }

  .sb-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .sb-cta-visual {
    aspect-ratio: 4/3;
  }
}

/* ===================================================
   REDUCED MOTION SUPPORT
   =================================================== */

@media (prefers-reduced-motion: reduce) {
  body.sample-box-page *,
body.sample-box-page *::before,
body.sample-box-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body.sample-box-page .custom-cursor,
body.sample-box-page .cursor-follower {
    display: none;
  }

  .sb-hero-box,
body.sample-box-page .floating-produce,
.sb-journey-stage,
.sb-freshness-photo,
.sb-cta-content,
.sb-cta-visual {
    transform: none !important;
  }

  .sb-slider-main:hover {
    transform: none;
  }

  .sb-cta-box:hover {
    transform: none;
  }
}

/* ===================================================
   ACCESSIBILITY ENHANCEMENTS
   =================================================== */

body.sample-box-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus States */

.sb-slider-nav:focus,
.sb-freshness-photo:focus {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* High Contrast Mode Support */

@media (prefers-contrast: high) {
  .sb-hero,
.sb-slider-section,
.sb-ingredients-section,
.sb-journey-section,
.sb-freshness-section,
.sb-cta-section {
    background: var(--bg);
  }

  .sb-slider-nav,
.sb-freshness-point {
    border: 2px solid var(--text);
  }
}

/* ===================================================
   RTL SUPPORT
   =================================================== */

/* Hero Section RTL */

/* Slider Section RTL */

/* Exploded Section RTL */

/* Journey Section RTL */

/* Freshness Section RTL */

/* CTA Section RTL */

/* RTL Responsive Adjustments */

/* ===================================================
   DARK MODE SUPPORT
   =================================================== */

/* Hero Section Dark Mode */

/* Slider Section Dark Mode */

/* Exploded Section Dark Mode */

/* Journey Section Dark Mode */

/* Dark Mode RTL Support for Journey Section */

/* Dark Mode RTL Support for Hero Section */

/* Freshness Section Dark Mode */

/* CTA Section Dark Mode */

/* Dark Mode Glow Enhancement */

/* Dark Mode Image Filters */

/* Dark Mode Custom Cursor */

/* ===================================================
   SAMPLE BOX FINAL FIXES — 18 SEP 2026
   Scoped to Sample Box page only.
   =================================================== */

/* SECTION 1: visible, richer half-viewport hero */

.sb-hero {
  height: 52vh;
  min-height: 430px;
  max-height: 560px;
  isolation: isolate;
  background:
  linear-gradient(100deg, rgba(35, 7, 15, 0.82) 0%, rgba(35, 7, 15, 0.56) 43%, rgba(35, 7, 15, 0.18) 100%),
  url('../images/fresh-produce-market-stand.jpg') center 54% / cover no-repeat;
}

.sb-hero::before {
  background-image:
  radial-gradient(circle at 12% 22%, rgba(255,255,255,.55) 0 2px, transparent 3px),
  radial-gradient(circle at 72% 18%, rgba(255,255,255,.4) 0 1.5px, transparent 2.5px),
  radial-gradient(circle at 88% 72%, rgba(255,255,255,.45) 0 2px, transparent 3px),
  radial-gradient(circle at 48% 86%, rgba(255,214,105,.35) 0 3px, transparent 4px);
  background-size: 180px 180px, 240px 240px, 210px 210px, 280px 280px;
  opacity: .7;
  animation: sbHeroParticles 16s linear infinite;
  z-index: 0;
}

.sb-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(to top, rgba(25,4,10,.5), transparent);
  pointer-events: none;
  z-index: 1;
}

@keyframes sbHeroParticles {
  from { background-position: 0 0, 40px 0, 0 50px, 80px 20px; }
  to { background-position: 120px 90px, -80px 120px, 100px -60px, -60px 100px; }
}

/* The old curtain was reversed: it covered the whole hero after "revealed". */

.sb-hero-curtain,
.sb-cta-curtain {
  transform: translateY(0);
  background: var(--bg);
}

.sb-hero-curtain.revealed,
.sb-cta-curtain.revealed {
  transform: translateY(-100%);
}

.sb-hero-content {
  padding: 0 4%;
  gap: 34px;
  z-index: 5;
}

.sb-hero-text {
  opacity: 1;
  transform: none;
  color: #fff;
}

.sb-hero-text.revealed {
  opacity: 1;
  transform: translateY(0);
}

.sb-hero-eyebrow {
  color: #FFD76A;
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
}

.sb-hero-title {
  color: #fff;
  text-shadow: 0 5px 24px rgba(0,0,0,.38);
  margin-bottom: 14px;
}

.sb-hero-title .char {
  opacity: 1;
  transform: translateY(0);
}

.sb-hero-title.revealed .char {
  animation: sbCharReveal 0.6s ease forwards;
}

.sb-hero-description {
  color: rgba(255,255,255,.92);
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
  margin-bottom: 22px;
}

.sb-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.sb-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sb-hero-trust i {
  color: #FFD76A;
}

.sb-hero-box {
  max-width: 460px;
}

.sb-hero-box-main {
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 24px 55px rgba(0,0,0,.3);
}

/* Stronger image composition so hero doesn't read as empty. */

.sb-hero-visual::before,
.sb-hero-visual::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.sb-hero-visual::before {
  width: 180px;
  height: 180px;
  right: 4%;
  top: 8%;
  border: 1px solid rgba(255,255,255,.32);
  animation: sbOrbit 8s ease-in-out infinite;
}

.sb-hero-visual::after {
  width: 12px;
  height: 12px;
  left: 10%;
  bottom: 16%;
  background: #FFD76A;
  box-shadow: 70px -120px 0 #fff, 150px 40px 0 rgba(255,255,255,.55);
  animation: sbFloatDots 5s ease-in-out infinite;
}

@keyframes sbOrbit {
  0%,100% { transform: scale(.92) rotate(0deg); opacity:.45; }
  50% { transform: scale(1.06) rotate(12deg); opacity:.9; }
}

@keyframes sbFloatDots {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* SECTION 2: reduce side gutter and make light-mode image frame clearer */

.sb-slider-container {
  max-width: 1500px;
  padding: 0 3.5%;
}

.sb-slider-main {
  border: 2px solid rgba(122,16,48,.22);
  box-shadow: 0 24px 60px rgba(50,24,24,.16);
}

/* SECTION 3: light-mode boxes must be visibly separated from the pale background */

/* SECTION 7: CTA must never become a blank block if JS/animation is delayed */

.sb-cta-section {
  min-height: 520px;
  background:
  radial-gradient(circle at 78% 35%, rgba(198,31,68,.14), transparent 30%),
  linear-gradient(135deg, #fff8ed 0%, #f6e9d8 100%);
}

.sb-cta-content,
.sb-cta-visual {
  opacity: 1;
  transform: none;
}

.sb-cta-content.revealed,
.sb-cta-visual.revealed {
  opacity: 1;
  transform: translateY(0);
}

.sb-cta-title .char {
  opacity: 1;
  transform: none;
}

.sb-cta-title.revealed .char {
  animation: sbCharReveal .6s ease forwards;
}

.sb-cta-description {
  color: #62484d;
  font-weight: 600;
}

.sb-cta-box {
  border-color: rgba(122,16,48,.24);
  box-shadow: 0 28px 64px rgba(55,26,32,.2);
}

/* Minimum readable text size on this page */

.page-sample-box p,
.page-sample-box li,
.page-sample-box span,
.page-sample-box label,
.page-sample-box button,
.page-sample-box a {
  font-size: max(14px, 1em);
}

@media (max-width: 1023px) {
  .sb-hero {
    height: auto;
    min-height: 560px;
    max-height: none;
  }

  .sb-hero-content {
    padding: 54px 6%;
  }

  .sb-hero-trust {
    justify-content: center;
  }

  .sb-hero-visual::before,
.sb-hero-visual::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .sb-hero {
    min-height: 620px;
  }

  .sb-hero-title {
    font-size: 2.25rem;
  }

  .sb-hero-description {
    font-size: 1rem;
  }

  .sb-hero-trust {
    gap: 10px 14px;
    justify-content: center;
  }
}

/* Respect reduced motion without hiding content. */

@media (prefers-reduced-motion: reduce) {
  .sb-hero::before,
.sb-hero-visual::before,
.sb-hero-visual::after {
    animation: none !important;
  }

  .sb-hero-curtain,
.sb-cta-curtain {
    transform: translateY(-100%) !important;
  }

  .sb-hero-text,
.sb-hero-box,
.sb-cta-content,
.sb-cta-visual {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   SAMPLE BOX — SECTION HEADINGS + RESPONSIVE VISIBILITY FIX
   ========================================================= */

.page-sample-box .sb-section-heading-wrap {
  position: relative;
  z-index: 30;
  width: min(1180px, 88%);
  margin: 0 auto 44px;
  text-align: center;
  padding-top: 92px;
}

.page-sample-box .sb-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.page-sample-box .sb-section-kicker::before,
.page-sample-box .sb-section-kicker::after {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
  opacity: .45;
}

.page-sample-box .sb-section-heading {
  margin: 0 auto 12px;
  color: var(--text);
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
}

.page-sample-box .sb-section-subtitle {
  max-width: 680px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
}

.page-sample-box .sb-slider-section .sb-section-heading-wrap {
  padding-top: 88px;
  margin-bottom: 34px;
}

.page-sample-box .sb-ingredients-section .sb-section-heading-wrap,
.page-sample-box .sb-journey-section .sb-section-heading-wrap {
  padding-top: 88px;
}

.page-sample-box .sb-cta-section-heading {
  padding-top: 0;
  margin-bottom: 28px;
}

.page-sample-box .sb-cta-section > .sb-cta-container {
  z-index: 25;
}

/* Keep the hero controls fully inside the half-height banner. */

.page-sample-box .sb-hero-content {
  box-sizing: border-box;
}

.page-sample-box .sb-hero-title {
  margin-bottom: 12px;
}

.page-sample-box .sb-hero-description {
  margin-bottom: 18px;
}

.page-sample-box .sb-hero-btns {
  position: relative;
  z-index: 40;
}

.page-sample-box .sb-hero-btns .btn {
  position: relative;
  z-index: 41;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Tablet/mobile: never crop the box cards or their active scale. */

@media (max-width: 1023px) {
  .page-sample-box .sb-hero {
    min-height: 650px;
    height: auto;
  }

  .page-sample-box .sb-hero-content {
    min-height: 650px;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px 7% 54px;
  }

  .page-sample-box .sb-hero-text {
    order: 1;
  }

  .page-sample-box .sb-hero-visual {
    order: 2;
    min-height: 230px;
  }

  .page-sample-box .sb-hero-box {
    max-width: 430px;
  }

  .page-sample-box .sb-hero-btns {
    width: 100%;
  }

  .page-sample-box .sb-hero-btns .btn {
    min-height: 50px;
  }

  .page-sample-box .sb-section-heading-wrap {
    width: min(900px, 88%);
    padding-top: 70px;
    margin-bottom: 30px;
  }

  

  

  

  

  
}

@media (max-width: 767px) {
  .page-sample-box .sb-hero {
    min-height: 720px;
  }

  .page-sample-box .sb-hero-content {
    min-height: 720px;
    padding: 38px 20px 46px;
    gap: 22px;
  }

  .page-sample-box .sb-hero-title {
    font-size: 2.15rem;
  }

  .page-sample-box .sb-hero-description {
    font-size: 15px;
    line-height: 1.55;
  }

  .page-sample-box .sb-hero-btns {
    gap: 10px;
  }

  .page-sample-box .sb-hero-btns .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .page-sample-box .sb-hero-trust {
    justify-content: flex-start;
    gap: 10px 14px;
  }

  .page-sample-box .sb-section-heading-wrap {
    width: calc(100% - 36px);
    padding-top: 54px;
    margin-bottom: 24px;
  }

  .page-sample-box .sb-section-heading {
    font-size: 2rem;
  }

  .page-sample-box .sb-section-subtitle {
    font-size: 14px;
  }

  .page-sample-box .sb-section-kicker {
    font-size: 12px;
    letter-spacing: .12em;
  }
}

/* ============================================================
   SAMPLE BOX — 360PX ART-DIRECTED BANNER
   ============================================================ */

.sb-hero {
  height: 360px;
  min-height: 360px;
  max-height: 360px;
  background:
  radial-gradient(circle at 78% 24%, rgba(240,200,105,.20), transparent 22%),
  linear-gradient(110deg, var(--bg-soft), var(--bg));
  isolation: isolate;
}

.sb-hero::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -90px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-radius: 50%;
  animation: sbBannerRing 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.sb-hero-content {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 20px 0 24px;
  grid-template-columns: minmax(0, .95fr) minmax(300px, 1.05fr);
  gap: 28px;
}

.sb-hero-text {
  position: relative;
  z-index: 8;
}

.sb-hero-eyebrow {
  margin-bottom: 7px;
  font-size: 10px;
  letter-spacing: .18em;
}

.sb-hero-title {
  font-size: clamp(34px, 4vw, 50px);
  line-height: .98;
  margin-bottom: 9px;
}

.sb-hero-description {
  max-width: 510px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 10px;
}

.sb-hero-btns {
  gap: 8px;
}

.sb-hero-btns .btn {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 11px;
}

.sb-hero-trust {
  margin-top: 10px;
  gap: 12px;
  font-size: 10.5px;
}

.sb-hero-visual {
  min-width: 0;
  height: 100%;
  z-index: 4;
}

.sb-hero-box {
  width: min(520px, 100%);
  max-width: 520px;
  aspect-ratio: 1.5 / 1;
  transform: translateY(14px) rotate(1deg);
}

.sb-hero-box.revealed {
  transform: translateY(0) rotate(1deg);
}

.sb-hero-box-main {
  border-radius: 34px 10px 34px 10px;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 24px 55px rgba(31,7,13,.22);
}

.sb-hero-box-img {
  object-position: center 48%;
  transform: scale(1.04);
  animation: sbImageDrift 12s ease-in-out infinite alternate;
}

.sb-hero-box-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(31,7,13,.10), transparent 45%, rgba(240,200,105,.18));
  pointer-events: none;
}

body.sample-box-page .floating-produce {
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.72);
  box-shadow: 0 12px 30px rgba(31,7,13,.18);
}

body.sample-box-page .produce-1 {
  width: 64px;
  height: 64px;
  top: -16px;
  right: -18px;
  animation: sbFloatA 4.5s ease-in-out infinite;
}

body.sample-box-page .produce-2 {
  width: 52px;
  height: 52px;
  bottom: -12px;
  left: -18px;
  animation: sbFloatB 5.5s ease-in-out infinite;
}

body.sample-box-page .produce-3 {
  width: 44px;
  height: 44px;
  top: 48%;
  right: -24px;
  animation: sbFloatA 5s ease-in-out infinite reverse;
}

body.sample-box-page .produce-4 {
  width: 56px;
  height: 56px;
  top: 16%;
  left: -25px;
  animation: sbFloatB 6s ease-in-out infinite reverse;
}

@keyframes sbBannerRing {
  0%,100% { transform: translateY(-50%) rotate(0deg) scale(1); opacity: .45; }
  50% { transform: translateY(-50%) rotate(8deg) scale(1.06); opacity: .85; }
}

@keyframes sbImageDrift {
  0% { transform: scale(1.04) translate3d(0,0,0); }
  100% { transform: scale(1.10) translate3d(-1.5%,-1%,0); }
}

@keyframes sbFloatA {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(8deg); }
}

@keyframes sbFloatB {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(8px) rotate(-7deg); }
}

@media (max-width: 1023px) {
  .sb-hero {
    height: 360px;
    min-height: 360px;
    max-height: 360px;
  }

  .sb-hero-content {
    width: calc(100% - 36px);
    grid-template-columns: 1fr .9fr;
    gap: 18px;
    padding: 18px 0 22px;
  }

  .sb-hero-title {
    font-size: clamp(30px, 5vw, 42px);
  }

  .sb-hero-description {
    font-size: 12px;
  }

  .sb-hero-trust {
    display: none;
  }

  .sb-hero-box {
    max-width: 100%;
  }

  body.sample-box-page .floating-produce {
    transform: scale(.82);
  }
}

@media (max-width: 767px) {
  .sb-hero {
    height: 360px;
    min-height: 360px;
    max-height: 360px;
  }

  .sb-hero-content {
    width: calc(100% - 28px);
    grid-template-columns: 1.05fr .95fr;
    gap: 10px;
    padding: 18px 0 22px;
  }

  .sb-hero-title {
    font-size: 27px;
  }

  .sb-hero-description {
    font-size: 11px;
    line-height: 1.38;
    margin-bottom: 8px;
  }

  .sb-hero-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .sb-hero-btns .btn {
    width: fit-content;
    max-width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 9.5px;
  }

  .sb-hero-visual {
    min-width: 0;
  }

  .sb-hero-box {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  body.sample-box-page .produce-1 {
    width: 44px; height: 44px; right: -10px;
  }

  body.sample-box-page .produce-2 {
    width: 38px; height: 38px; left: -8px;
  }

  body.sample-box-page .produce-3 {
    width: 34px; height: 34px; right: -10px;
  }

  body.sample-box-page .produce-4 {
    width: 40px; height: 40px; left: -8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-hero::after,
.sb-hero-box-img,
body.sample-box-page .produce-1,
body.sample-box-page .produce-2,
body.sample-box-page .produce-3,
body.sample-box-page .produce-4 {
    animation: none !important;
  }
}

/* ============================================================
   SAMPLE BOX — FINAL FIXES (hero 60vh + readable text + slider alignment)
   Keep this block LAST in the file so it wins over earlier layers.
   ============================================================ */

/* ---- SECTION 1: banner is 60vh, light background, dark readable text ---- */

.sb-hero {
  height: 60vh;
  min-height: 400px;
  max-height: none;
  padding: 0;   /* global `section{padding:100px 0}` was pushing the content down and out of the banner */
}

/* Old decorative ring was stretched into a big grey disc on the left
   (leftover gradient + left:0 from an earlier rule). Make it a right-side ring only. */

.sb-hero::after {
  inset: auto;
  top: 50%;
  right: -90px;
  left: auto;
  bottom: auto;
  width: 300px;
  height: 300px;
  background: none;
}

.sb-hero-content {
  box-sizing: border-box;   /* padding was being added on top of height:100% -> content overflowed the banner */
  padding: 20px 0;
}

.sb-hero-text {
  color: var(--text);
}

.sb-hero-eyebrow {
  color: var(--brand);
  text-shadow: none;
  font-size: 12px;
  margin-bottom: 10px;
}

.sb-hero-title {
  color: var(--text);
  text-shadow: none;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: 14px;
}

/* keep spaces between letters/words (they were collapsing: "AFreshBox") */

.sb-hero-title .word {
  display: block; white-space: nowrap;
}

.sb-hero-title .char {
  white-space: pre;
}

.sb-hero-description {
  color: var(--muted);
  text-shadow: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 18px;
}

.sb-hero-btns {
  gap: 12px;
}

.sb-hero-btns .btn {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 13px;
}

.sb-hero-trust {
  color: var(--text);
  margin-top: 16px;
  gap: 18px;
  font-size: 13px;
}

.sb-hero-trust i {
  color: var(--brand);
}

.sb-hero-box {
  width: min(500px, 100%);
  max-width: 500px;
}

/* Tablet + mobile: an earlier pass forced the hero to 650px/720px tall via
   `.page-sample-box ...` selectors, so those are overridden here at the same specificity. */

@media (max-width: 1023px) {
  .page-sample-box .sb-hero {
    height: 60vh; min-height: 400px; max-height: none; padding: 0;
  }

  .page-sample-box .sb-hero-content {
    min-height: 0;
    height: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: 20px;
    padding: 20px 0;
    width: calc(100% - 48px);
  }

  .page-sample-box .sb-hero-visual {
    min-height: 0;
  }

  .page-sample-box .sb-hero-box {
    max-width: 100%;
  }

  .page-sample-box .sb-hero-title {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
  }

  .page-sample-box .sb-hero-description {
    font-size: .92rem; line-height: 1.5; margin-bottom: 14px;
  }

  .page-sample-box .sb-hero-btns {
    width: auto;
  }

  .page-sample-box .sb-hero-btns .btn {
    min-height: 44px; padding: 10px 16px; font-size: 12.5px;
  }
}

@media (max-width: 767px) {
  .page-sample-box .sb-hero {
    height: auto; min-height: 60svh; max-height: none; padding: 0;
  }

  .page-sample-box .sb-hero-content {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 60svh;
    padding: 32px 0;
    align-content: center;
    width: calc(100% - 36px);
  }

  .page-sample-box .sb-hero-visual {
    display: none;
  }

  .page-sample-box .sb-hero-title {
    font-size: 2.1rem;
  }

  .page-sample-box .sb-hero-description {
    font-size: .95rem; line-height: 1.55;
  }

  .page-sample-box .sb-hero-btns {
    flex-direction: row; flex-wrap: wrap; align-items: center;
  }

  .page-sample-box .sb-hero-btns .btn {
    flex: 0 0 auto; width: auto; min-height: 44px; padding: 10px 16px; font-size: 12.5px;
  }

  .page-sample-box .sb-hero-trust {
    display: flex; gap: 10px 16px; font-size: 12.5px;
  }
}

/* ---- SECTION 2: slider was shrinking to a max-height-driven width and hugging the
   left edge (big empty gap on the right). Make it fill + centre in its container. ---- */

.sb-slider-container {
  max-width: 1228px;
  padding: 0 24px;
  margin: 0 auto;
}

.sb-slider-main {
  width: 100%;
  max-height: none;
  margin: 0 auto;
}

.sb-slider-strip {
  justify-content: flex-start;
}

.sb-slider-strip .sb-slider-thumb:first-child {
  margin-left: auto;
}

.sb-slider-strip .sb-slider-thumb:last-child {
  margin-right: auto;
}

@media (max-width: 1023px) {
  .sb-slider-container {
    padding: 0 20px;
  }

  .sb-slider-main {
    max-height: none;
  }
}

@media (max-width: 767px) {
  .sb-slider-container {
    padding: 0 14px;
  }

  .sb-slider-main {
    max-height: none;
  }
}

/* ---- CTA heading: letters were split into inline-blocks, which collapsed the spaces
   ("ReadytoSeeWhat"). Preserve spaces and keep each phrase together on its own line. ---- */

.sb-cta-title .word {
  display: block; white-space: nowrap; overflow: visible;
}

.sb-cta-title .char {
  white-space: pre;
}

@media (max-width: 480px) {
  .sb-cta-title {
    font-size: clamp(1.5rem, 7.2vw, 2rem);
  }
}

/* ===================================================
   SECTION 3 — WHAT'S INSIDE THE BOX (ingredient cards)
   Layout: filter chips + clean 4 x 2 card grid
   Animation: staggered reveal on scroll, soft hover lift
   =================================================== */
.sb-ingredients-section {
  position: relative;
  padding: 0 0 110px;
  background:
    radial-gradient(circle at 50% 0%, rgba(198, 31, 68, .08), transparent 46%),
    linear-gradient(180deg, #fffdf8 0%, var(--bg-soft) 100%);
  overflow: hidden;
}

.sb-ing {
  width: min(1180px, 88%);
  margin: 0 auto;
}

/* Filter chips */
.sb-ing-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.sb-ing-chip {
  appearance: none;
  padding: 9px 20px;
  border: 1.5px solid rgba(122, 16, 48, .2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.sb-ing-chip:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

.sb-ing-chip:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.sb-ing-chip[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Card grid */
.sb-ing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-ing-card {
  --ing-color: var(--brand);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 30px 24px 24px;
  background: var(--surface);
  border: 1.5px solid rgba(122, 16, 48, .14);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(67, 31, 36, .1);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease, opacity .3s ease, filter .3s ease;
}

/* colour accent bar along the top edge */
.sb-ing-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--ing-color);
}

.sb-ing-card:hover {
  transform: translateY(-6px);
  border-color: var(--ing-color);
  box-shadow: 0 22px 46px rgba(67, 31, 36, .18);
}

.sb-ing-num {
  position: absolute;
  top: 18px;
  inset-inline-end: 20px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .55;
}

.sb-ing-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ing-color) 16%, transparent);
  color: var(--ing-color);
  font-size: 1.7rem;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.sb-ing-card:hover .sb-ing-icon {
  transform: scale(1.1) rotate(-6deg);
}

.sb-ing-name {
  margin: 0;
  color: var(--text);
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}

.sb-ing-qty {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.sb-ing-cat {
  margin-top: auto;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ing-color) 14%, transparent);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Filter state: keep the grid stable, just dim non-matching cards */
.sb-ing-card.is-dimmed {
  opacity: .28;
  filter: grayscale(.6);
  transform: none;
}

/* Scroll reveal (only when JS is running, so content never stays hidden) */
.sb-ing.js-ready .sb-ing-card {
  opacity: 0;
}

.sb-ing.js-ready.is-visible .sb-ing-card {
  opacity: 1;
  animation: sbIngIn .65s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.sb-ing.js-ready.is-visible .sb-ing-card.is-dimmed {
  opacity: .28;
}

@keyframes sbIngIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1023px) {
  .sb-ingredients-section { padding-bottom: 80px; }
  .sb-ing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 480px) {
  .sb-ingredients-section { padding-bottom: 60px; }
  .sb-ing { width: calc(100% - 32px); }
  .sb-ing-grid { gap: 12px; }
  .sb-ing-card { padding: 26px 16px 18px; }
  .sb-ing-icon { width: 54px; height: 54px; font-size: 1.4rem; }
  .sb-ing-name { font-size: 1.1rem; }
  .sb-ing-chip { padding: 8px 14px; }
}

@media (prefers-contrast: high) {
  .sb-ingredients-section { background: var(--bg); }
}

@media (prefers-reduced-motion: reduce) {
  .sb-ing-card,
  .sb-ing-icon,
  .sb-ing-chip { transition: none; }
  .sb-ing.js-ready.is-visible .sb-ing-card { animation: none; }
}

/* ===================================================
   SECTION 5 — CHOOSE YOUR BOX (interactive menu + morphing image)
   Layout: big typographic list beside a blob-masked image stage
   (no boxes / cards — hairlines, circles and organic shapes only)
   Animation: clip-path circle reveal, morphing blob, rotating rings,
   floating dots, price count-up, autoplay progress line, marquee
   =================================================== */
.sb-variations-section {
  position: relative;
  isolation: isolate;
  padding: 0 0 90px;
  background:
    radial-gradient(circle at 12% 28%, rgba(198, 31, 68, .09), transparent 38%),
    radial-gradient(circle at 92% 82%, rgba(255, 215, 106, .18), transparent 36%),
    linear-gradient(180deg, var(--bg-soft) 0%, #fffdf8 100%);
  overflow: hidden;
}

.page-sample-box .sb-variations-section .sb-section-heading-wrap {
  padding-top: 88px;
  margin-bottom: 52px;
}

.sb-vx {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(36px, 7vw, 100px);
  width: min(1180px, 88%);
  margin: 0 auto;
}

/* ---------- Image stage ---------- */
.sb-vx-stage {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.sb-vx-blob {
  position: absolute;
  inset: 8%;
  border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%;
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: 0 30px 70px rgba(67, 31, 36, .28);
  animation: sbVxMorph 14s ease-in-out infinite;
}

.sb-vx-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  clip-path: circle(0% at 50% 50%);
  transform: scale(1.18);
  transition: clip-path 1s cubic-bezier(.65, 0, .35, 1), transform 1.8s cubic-bezier(.16, 1, .3, 1);
}

.sb-vx-img.is-prev {
  z-index: 1;
  clip-path: circle(75% at 50% 50%);
  transform: scale(1);
  transition: none;
}

.sb-vx-img.is-active {
  z-index: 2;
  clip-path: circle(75% at 50% 50%);
  transform: scale(1);
}

.sb-vx-ring {
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(122, 16, 48, .38);
  border-radius: 50%;
  animation: sbVxSpin 46s linear infinite;
  pointer-events: none;
}

/* small planet riding on the ring */
.sb-vx-ring::after {
  content: '';
  position: absolute;
  top: 6%;
  left: 14%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(122, 16, 48, .14);
}

.sb-vx-ring-inner {
  inset: 3.5%;
  border: 1.5px solid rgba(255, 215, 106, .75);
  animation-duration: 30s;
  animation-direction: reverse;
}

.sb-vx-ring-inner::after {
  top: auto;
  left: auto;
  right: 10%;
  bottom: 12%;
  width: 11px;
  height: 11px;
  background: #E0A526;
  box-shadow: 0 0 0 5px rgba(224, 165, 38, .2);
}

.sb-vx-dot {
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  pointer-events: none;
  animation: sbVxFloat 7s ease-in-out infinite;
}

.sb-vx-dot-1 { top: 2%; right: 12%; width: 22px; height: 22px; background: rgba(198, 31, 68, .75); }
.sb-vx-dot-2 { bottom: 14%; left: -1%; width: 34px; height: 34px; background: rgba(255, 215, 106, .85); animation-delay: -2.4s; }
.sb-vx-dot-3 { top: 40%; left: -5%; width: 12px; height: 12px; background: rgba(47, 158, 107, .8); animation-delay: -4.2s; }

.sb-vx-stamp {
  position: absolute;
  z-index: 6;
  inset-inline-end: -1%;
  bottom: 5%;
  display: grid;
  place-content: center;
  width: 27%;
  min-width: 108px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 40px rgba(122, 16, 48, .38);
  animation: sbVxBob 5s ease-in-out infinite;
}

.sb-vx-stamp::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px dashed rgba(255, 255, 255, .6);
  border-radius: 50%;
  animation: sbVxSpin 24s linear infinite;
}

.sb-vx .sb-vx-stamp-price {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sb-vx .sb-vx-stamp-unit {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;
}

/* ---------- Typographic list ---------- */
.sb-vx-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.sb-vx-list > li {
  border-top: 1px solid var(--line);
}

.sb-vx-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 20px;
  width: 100%;
  margin: 0;
  padding: 26px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  overflow: hidden;
}

.sb-vx-item:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: -3px;
}

.sb-vx .sb-vx-num {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .1em;
  transition: color .4s ease;
}

.sb-vx .sb-vx-name {
  color: color-mix(in srgb, var(--text) 52%, transparent);
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.75rem, 3.3vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  translate: 0 0;
  transition: color .4s ease, translate .5s cubic-bezier(.16, 1, .3, 1);
}

.sb-vx .sb-vx-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sb-vx .sb-vx-arrow {
  display: inline-block;
  font-size: 1.3rem;
  opacity: 0;
  translate: -10px 0;
  transition: opacity .35s ease, translate .45s cubic-bezier(.16, 1, .3, 1);
}

.sb-vx-item:hover .sb-vx-name {
  color: color-mix(in srgb, var(--text) 85%, transparent);
}

.sb-vx-item:hover .sb-vx-arrow,
.sb-vx-item.is-active .sb-vx-arrow {
  opacity: 1;
  translate: 0 0;
}

.sb-vx-item.is-active .sb-vx-name {
  color: var(--text);
  translate: 14px 0;
}

.sb-vx-item.is-active .sb-vx-num {
  color: var(--brand);
}

/* expanding description (height animates 0 -> auto) */
.sb-vx-detail {
  display: grid;
  grid-column: 2 / -1;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .6s cubic-bezier(.16, 1, .3, 1), opacity .45s ease;
}

.sb-vx-item.is-active .sb-vx-detail {
  grid-template-rows: 1fr;
  opacity: 1;
}

.sb-vx-detail-clip {
  display: block;
  min-height: 0;
  overflow: hidden;
}

.sb-vx-detail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 28px;
  padding: 14px 0 0 14px;
}

.sb-vx .sb-vx-desc {
  flex: 1 1 260px;
  max-width: 38ch;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}

.sb-vx .sb-vx-price {
  color: var(--brand);
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.sb-vx-price small {
  margin-inline-start: 2px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  opacity: .75;
}

/* autoplay progress line (also the "active" underline) */
.sb-vx-bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
}

.sb-vx.is-inview .sb-vx-item.is-active .sb-vx-bar {
  animation: sbVxFill 6s linear forwards;
}

.sb-vx.is-paused .sb-vx-bar {
  animation-play-state: paused;
}

.sb-vx.no-auto .sb-vx-item.is-active .sb-vx-bar {
  animation: none;
  transform: scaleX(1);
  opacity: .4;
}

/* ---------- Entrance (only when JS is running) ---------- */
.sb-vx.js-ready .sb-vx-stage {
  opacity: 0;
  transform: scale(.86) rotate(-5deg);
}

.sb-vx.js-ready .sb-vx-list > li {
  opacity: 0;
  transform: translateY(30px);
}

.sb-vx.js-ready.is-revealed .sb-vx-stage {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

.sb-vx.js-ready.is-revealed .sb-vx-list > li {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 110ms + 250ms);
}

/* ---------- Marquee (in normal flow — never spills into section 6) ---------- */
.sb-vx-marquee {
  direction: ltr;
  margin-top: 72px;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.sb-vx-marquee-track {
  display: inline-flex;
  animation: sbVxMarquee 32s linear infinite;
}

.sb-vx-marquee-track span {
  padding-inline-end: 1.4rem;
  color: transparent;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800;
  -webkit-text-stroke: 1.5px rgba(122, 16, 48, .3);
}

@keyframes sbVxMorph {
  0%, 100% { border-radius: 58% 42% 55% 45% / 52% 48% 52% 48%; }
  25%      { border-radius: 44% 56% 42% 58% / 58% 42% 58% 42%; }
  50%      { border-radius: 52% 48% 60% 40% / 44% 56% 44% 56%; }
  75%      { border-radius: 40% 60% 48% 52% / 54% 46% 56% 44%; }
}
@keyframes sbVxSpin   { to { transform: rotate(360deg); } }
@keyframes sbVxFloat  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8px, -18px); } }
@keyframes sbVxBob    { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes sbVxFill   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sbVxMarquee { to { transform: translateX(-50%); } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sb-vx { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .sb-vx-stage { width: min(100%, 360px); }
  .page-sample-box .sb-variations-section .sb-section-heading-wrap { padding-top: 60px; margin-bottom: 36px; }
  .sb-vx-marquee { margin-top: 52px; }
}

@media (max-width: 480px) {
  .sb-variations-section { padding-bottom: 64px; }
  .sb-vx { width: calc(100% - 32px); }
  .sb-vx-item { padding: 20px 0; column-gap: 12px; }
  .sb-vx .sb-vx-tag { font-size: 14px; letter-spacing: .06em; }
  .sb-vx-detail-row { padding-left: 0; }
}

@media (prefers-contrast: high) {
  .sb-variations-section { background: var(--bg); }
}

@media (prefers-reduced-motion: reduce) {
  .sb-vx-blob, .sb-vx-ring, .sb-vx-dot, .sb-vx-stamp, .sb-vx-stamp::before, .sb-vx-marquee-track { animation: none; }
  .sb-vx-img, .sb-vx-detail, .sb-vx-name, .sb-vx-arrow { transition: none; }
  .sb-vx.js-ready .sb-vx-stage, .sb-vx.js-ready .sb-vx-list > li { opacity: 1; transform: none; }
}

/* ============================================================
   FIX: Dashboard drawer showing as a white panel in the centre
   when switching to RTL. In RTL the drawer must dock to the LEFT
   edge and slide out to the left; it is also fully hidden while closed.
   ============================================================ */
body.dashboard-page .dashboard-drawer,
.dashboard-drawer{
  visibility:hidden;
  pointer-events:none;
  transition:transform .42s cubic-bezier(.16,1,.3,1),visibility 0s linear .42s;
}
body.dashboard-page .dashboard-drawer.open,
.dashboard-drawer.open{
  visibility:visible;
  pointer-events:auto;
  transition:transform .42s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s;
}
html[dir="rtl"] .dashboard-drawer,
body[dir="rtl"] .dashboard-drawer{
  inset-inline-start:auto;
  inset-inline-end:auto;
  left:0;
  right:auto;
  transform:translateX(-105%);
  border-inline-start:1px solid var(--line);
  border-inline-end:0;
  box-shadow:18px 0 45px rgba(30,15,20,.16);
}
html[dir="rtl"] .dashboard-drawer.open,
body[dir="rtl"] .dashboard-drawer.open{
  transform:translateX(0);
}

/* ============================================================
   HOME 1 FIXES
   1) Hero polaroids: every caption + the "Next Drop" badge visible
   2) Section 5 (whole basket): no overlapping cards, readable captions
   3) Section 6 (orbit): core text fully inside the circle, all sizes
   4) Section 8 (testimonial): padding in dark mode
   ============================================================ */

/* ---------- 1) HERO ---------- */
.polaroid-stage {
  min-height: 500px;
  padding-bottom: 70px;
  box-sizing: border-box;
}
.polaroid-stack {
  width: min(520px, calc(100% - 24px));
  height: 420px;
}
.polaroid-card {
  width: 40%;
  padding: 12px 12px 18px;
  box-sizing: border-box;
}
.polaroid-caption {
  font-size: 15px;
  line-height: 1.3;
  margin-top: 10px;
  overflow-wrap: anywhere;
}
.polaroid-1 { width: 40%; top: 70px;  bottom: auto; inset-inline-start: 0;    inset-inline-end: auto; z-index: 1; }
.polaroid-2 { width: 40%; top: 0;     bottom: auto; inset-inline-start: 30%;   inset-inline-end: auto; z-index: 3; }
.polaroid-3 { width: 40%; top: 100px; bottom: auto; inset-inline-start: auto;  inset-inline-end: 0;    z-index: 2; }
.polaroid-3 { transform: rotate(4deg); }
.polaroid-1 { transform: rotate(-5deg); }
.polaroid-2 { transform: rotate(2deg); }
@keyframes polaroidFloat1 {
  0%   { transform: rotate(-5deg) translateY(0); }
  100% { transform: rotate(-4deg) translateY(-8px); }
}
@keyframes polaroidFloat2 {
  0%   { transform: rotate(2deg) translateY(0); }
  100% { transform: rotate(3deg) translateY(-10px); }
}
.hero-float-badge {
  inset-inline: 0;
  margin-inline: auto;
  bottom: 8px;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .polaroid-stage { min-height: 0; padding-bottom: 64px; }
  .polaroid-stack { width: min(calc(100% - 12px), 380px); height: 290px; }
  .polaroid-card { padding: 8px 8px 12px; border-radius: 6px; }
  .polaroid-caption { font-size: 11.5px; margin-top: 8px; }
  .polaroid-1 { top: 62px; }
  .polaroid-2 { top: 0; }
  .polaroid-3 { top: 88px; }
  .hero-float-badge { padding: 11px 18px; font-size: 13.5px; gap: 9px; bottom: 6px; }
}
@media (max-width: 400px) {
  .hero-float-badge { font-size: 12.5px; padding: 10px 14px; }
}

/* ---------- 2) SECTION 5 — WHOLE BASKET ---------- */
@media (min-width: 768px) {
  .fr-cine-stack {
    width: min(100%, 540px);
    max-height: none;
    margin-inline: auto;
  }
  .fr-cine-card img { aspect-ratio: 1 / 1; }
  .fr-cine-card-1 { width: 44%; inset-block-start: 0;   inset-block-end: auto; inset-inline-start: 0;   inset-inline-end: auto; z-index: 2; }
  .fr-cine-card-2 { width: 44%; inset-block-start: 3%;  inset-block-end: auto; inset-inline-end: 0;     inset-inline-start: auto; z-index: 2; }
  .fr-cine-card-3 { width: 44%; inset-block-end: 0;     inset-block-start: auto; inset-inline-start: 4%; inset-inline-end: auto; z-index: 2; }
  .fr-cine-card-4 { width: 44%; inset-block-end: 4%;    inset-block-start: auto; inset-inline-end: 4%;   inset-inline-start: auto; z-index: 2; }
}
.fr-cine-card figcaption {
  padding: 44px 16px 14px;
  line-height: 1.3;
  color: #FFFFFF;
  background: linear-gradient(to top, rgba(20, 5, 9, 0.92) 0%, rgba(20, 5, 9, 0.72) 45%, rgba(20, 5, 9, 0) 100%);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* ---------- 3) SECTION 6 — ORBIT CORE ---------- */
.fr-orbit-core {
  container-type: inline-size;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: inset 0 0 0 1px var(--line), 0 14px 40px rgba(31, 7, 13, 0.08);
}
.fr-orbit-circular-type {
  font-size: 10px;
  letter-spacing: 0;
  overflow: visible;
}
.fr-orbit-core-inner {
  width: 62%;
  max-width: 62%;
  padding: 0;
  gap: 2.5%;
  box-sizing: border-box;
}
.fr-orbit-core-inner i      { font-size: 22px; }
.fr-orbit-core-inner strong { font-size: 24px; white-space: nowrap; }
.fr-orbit-core-inner span   { font-size: 13px; line-height: 1.35; }
@supports (font-size: 1cqw) {
  .fr-orbit-core-inner { gap: 2cqw; }
  .fr-orbit-core-inner i      { font-size: 8cqw; }
  .fr-orbit-core-inner strong { font-size: min(9cqw, 28px); line-height: 1.1; white-space: nowrap; }
  .fr-orbit-core-inner span   { font-size: clamp(8.5px, 5cqw, 14px); line-height: 1.35; }
}
/* very small cores: drop the icon so the text block stays inside the circle */
@container (max-width: 170px) {
  .fr-orbit-core-inner i { display: none; }
}
@media (max-width: 767px) {
  .fr-orbit-core { width: min(46%, 200px); }
  .fr-orbit-circular-type { font-size: 10.5px; letter-spacing: 0; }
  .fr-orbit-core-inner { width: 62%; max-width: 62%; padding: 0; gap: 2cqw; }
  .fr-orbit-core-inner strong { font-size: min(9cqw, 28px); white-space: nowrap; }
  .fr-orbit-core-inner span { font-size: clamp(8.5px, 5cqw, 14px); line-height: 1.35; }
}

/* ---------- 4) SECTION 8 — TESTIMONIAL, DARK MODE PADDING ---------- */
html[data-theme="dark"] .quote-editorial-card {
  padding: clamp(40px, 6vw, 64px) clamp(22px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 28px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .quote-band {
  padding: clamp(64px, 9vw, 100px) 0;
}
@media (max-width: 767px) {
  html[data-theme="dark"] .quote-editorial-card .stars { margin-bottom: 18px; }
  html[data-theme="dark"] .quote-editorial-card blockquote { margin-bottom: 26px; }
}
.quote-subscriber img { flex: 0 0 66px; aspect-ratio: 1 / 1; }

/* ============================================================
   PAGE BANNERS — ONE SHARED HEIGHT + SPACING SYSTEM
   About · Plans · How It Works · Sample Box · Contact · FAQ
   Every banner uses the same min-height and the same inner
   padding, and grows with its content (height:auto) so text and
   images can never be clipped. This is the last rule set in the
   file and deliberately wins over the older per-page layers.
   ============================================================ */
:root {
  --pb-h: clamp(480px, 58vh, 640px);
  --pb-pad: clamp(32px, 5.5vh, 56px);
}
@media (max-width: 767px) {
  :root {
    --pb-h: clamp(500px, 68svh, 620px);
    --pb-pad: 30px;
  }
}

html body main .about-banner-section,
html body main .plans-banner-section,
html body main .fr-hiw-s1,
html body main .sb-hero,
html body main #contact-hero,
html body main .faq-hero {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-height: var(--pb-h) !important;
  max-height: none !important;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
}

html body main .about-banner-content,
html body main .plans-banner-content,
html body main .fr-hiw-s1 .fr-s1-inner,
html body main .sb-hero-content,
html body main #contact-hero .c1-split,
html body main .faq-hero-content {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: min(1200px, calc(100% - 48px)) !important;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-inline: auto !important;
  padding-block: var(--pb-pad) !important;
}
@media (max-width: 767px) {
  html body main .about-banner-content,
  html body main .plans-banner-content,
  html body main .fr-hiw-s1 .fr-s1-inner,
  html body main .sb-hero-content,
  html body main #contact-hero .c1-split,
  html body main .faq-hero-content {
    width: calc(100% - 36px) !important;
  }
}

/* ---------- FAQ: heading never breaks mid-word, fuller content block ---------- */
.faq-hero-title .faq-word {
  display: inline-block;
  white-space: nowrap;
}
html body main .faq-hero-title {
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.06;
  margin-bottom: 14px;
}
html body main .faq-eyebrow {
  font-size: 12px;
  margin-bottom: 12px;
}
html body main .faq-hero-subtitle {
  font-size: clamp(14px, 1.25vw, 16.5px);
  line-height: 1.55;
  margin-bottom: 20px;
}
html body main .faq-search-container {
  max-width: 520px;
}
html body main .faq-search-input {
  padding: 12px 0;
}
@media (max-width: 767px) {
  html body main .faq-hero-title { font-size: 30px; line-height: 1.08; }
  html body main .faq-hero-subtitle { font-size: 13.5px; margin-bottom: 16px; }
}

/* ---------- CONTACT banner: same height as the rest at every width ---------- */
@media (max-width: 980px) {
  html body main #contact-hero .c1-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: 24px;
  }
  html body main #contact-hero .c1-copy { margin: 0; text-align: left; max-width: none; }
  html body main #contact-hero .c1-eyebrow,
  html body main #contact-hero .c1-actions { justify-content: flex-start; }
  html body main #contact-hero p { margin-left: 0; margin-right: 0; }
  html body main #contact-hero .c1-visual { min-height: 300px; max-width: none; margin: 0; }
  html body main #contact-hero .c1-panel-main { left: 4%; width: 78%; }
}
@media (max-width: 640px) {
  html body main #contact-hero .c1-split { grid-template-columns: minmax(0, 1fr); }
  html body main #contact-hero .c1-copy { text-align: center; }
  html body main #contact-hero .c1-eyebrow,
  html body main #contact-hero .c1-actions { justify-content: center; }
  html body main #contact-hero p { margin-left: auto; margin-right: auto; }
  /* the photo becomes a soft ambient accent behind the copy, so it can no longer stretch the banner */
  html body main #contact-hero .c1-visual {
    position: absolute;
    inset: auto -30px -24px auto;
    width: 210px;
    min-height: 0;
    height: 170px;
    opacity: .2;
    pointer-events: none;
    z-index: 1;
  }
  html body main #contact-hero .c1-image-stamp { display: none; }
  html body main #contact-hero .c1-split-label { display: none; }
}

/* ---------- HOW IT WORKS: first heading line was dark-on-dark (hard to read) ---------- */
html body main .fr-hiw-s1 .fr-s1-copy h1 span {
  color: #F1D38B;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .35);
}

/* ---------- FAQ: centre the text block vertically inside the banner ---------- */
html body main .faq-hero-text-wrapper {
  align-self: center;
  height: auto;
}

/* ---------- PLANS: compact on small phones so it matches the other banners ---------- */
@media (max-width: 480px) {
  html body main .plans-banner-content .hero-btns {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  html body main .plans-banner-content .hero-btns .btn {
    width: auto;
    flex: 0 1 auto;
  }
  html body main .plans-banner-content .hero-perks {
    gap: 6px 14px;
  }
}

/* ---------- RTL: split-letter headings keep their letters in reading order ---------- */
html[dir="rtl"] .faq-hero-title .faq-word,
html[dir="rtl"] .sb-hero-title .word {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir="rtl"] .faq-hero-title {
  direction: ltr;
  text-align: right;
}


/* =========================================================
   PLANS PAGE FIXES
   1) Section 2 — Choose Your Box Type: visible timeline line,
      full-height image, tidy responsive alignment
   2) Section 4 — What's Inside Each Plan: readable captions
      in light mode + no empty grid cell
   Scoped to #choose-box and .plans-contents-section only.
   ========================================================= */

/* ---------- Section 2: timeline (line + dots always visible) ---------- */
#choose-box .box-marquee-wrap { margin-bottom: 36px; }

#choose-box .box-timeline {
  --tl-dot: 50px;
  --tl-pad: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  justify-items: center;
  gap: 0;
  flex-wrap: nowrap;
  margin: 0;
  padding: var(--tl-pad) 0 0;
  overflow: visible;
}

#choose-box .box-timeline::before {
  display: block;
  left: 10%;
  right: 10%;
  top: calc(var(--tl-pad) + var(--tl-dot) / 2);
  height: 4px;
  border-radius: 4px;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--brand) 42%, var(--line));
}

#choose-box .timeline-item {
  min-width: 0;
  flex: none;
}

html[dir="rtl"] #choose-box .timeline-item { flex-direction: column; }

#choose-box .timeline-dot {
  width: var(--tl-dot);
  height: var(--tl-dot);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}

#choose-box .timeline-item:hover .timeline-dot {
  border-color: var(--brand);
}

#choose-box .timeline-item.active .timeline-dot {
  background: var(--brand);
  border-color: var(--brand);
}

#choose-box .timeline-item span {
  text-align: center;
  white-space: nowrap;
}

@keyframes boxTimelineIn {
  from { opacity: 0; transform: translateY(14px) scale(.85); }
  to   { opacity: 1; transform: none; }
}

#choose-box.in .timeline-item { animation: boxTimelineIn .6s cubic-bezier(.34, 1.56, .64, 1) backwards; }
#choose-box.in .timeline-item:nth-child(2) { animation-delay: .08s; }
#choose-box.in .timeline-item:nth-child(3) { animation-delay: .16s; }
#choose-box.in .timeline-item:nth-child(4) { animation-delay: .24s; }
#choose-box.in .timeline-item:nth-child(5) { animation-delay: .32s; }

/* ---------- Section 2: image fills the whole left side of the card ---------- */
#choose-box .box-display-stage {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  align-items: stretch;
  overflow: hidden;
}

#choose-box .box-visual-wrapper {
  display: block;
  height: auto;
  min-height: 440px;
  align-self: stretch;
}

#choose-box .box-main-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

#choose-box .box-main-image img {
  transition: transform .5s ease, opacity .3s ease;
}

#choose-box .box-details-panel {
  min-width: 0;
  align-self: center;
  padding: 44px 40px;
}

/* ---------- Section 2: tablet + mobile alignment ---------- */
@media (max-width: 1023px) {
  #choose-box .box-display-shell {
    --box-img-h: 300px;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  #choose-box .box-display-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  #choose-box .box-visual-wrapper {
    height: var(--box-img-h);
    min-height: 0;
  }

  #choose-box .box-details-panel {
    padding: 28px 28px 32px;
  }

  /* arrows sit on the image instead of squeezing the card */
  #choose-box .box-stage-nav {
    position: absolute;
    top: calc(var(--box-img-h) / 2 - 19px);
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    z-index: 6;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    background: rgba(255, 248, 233, .94);
    color: #2A1015;
    border-color: rgba(255, 255, 255, .6);
  }

  #choose-box .box-stage-nav:hover {
    background: var(--brand);
    color: var(--on-strong);
    border-color: var(--brand);
  }

  #choose-box .box-stage-nav-prev { left: 14px; }
  #choose-box .box-stage-nav-next { right: 14px; }
}

@media (max-width: 767px) {
  #choose-box .box-display-shell { --box-img-h: 240px; }

  #choose-box .box-timeline {
    --tl-dot: 36px;
    --tl-pad: 10px;
  }

  #choose-box .timeline-item { gap: 8px; }
  #choose-box .timeline-item span { font-size: 11px; }

  #choose-box .box-details-panel { padding: 22px 18px 26px; }
  #choose-box .box-details-panel h3 { font-size: 24px; margin-bottom: 10px; }
  #choose-box .box-details-panel > p { font-size: 15px; margin-bottom: 20px; }
  #choose-box .box-specs-grid { gap: 12px; margin-bottom: 20px; }
  #choose-box .box-spec { padding: 14px; }
  #choose-box .box-features { gap: 10px; margin-bottom: 22px; }
  #choose-box .box-details-panel .btn { width: 100%; justify-content: center; }
  #choose-box .box-floating-badge { padding: 10px 16px; }
  #choose-box .box-floating-badge .badge-price { font-size: 19px; }
}

@media (max-width: 380px) {
  #choose-box .timeline-item span { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #choose-box.in .timeline-item { animation: none; }
}

/* ---------- Section 4: captions readable in light + dark mode ---------- */
.mosaic-caption h4 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(20, 4, 9, .55);
}

.mosaic-caption p {
  text-shadow: 0 1px 10px rgba(20, 4, 9, .5);
}

.mosaic-tile::before {
  background: linear-gradient(180deg,
    rgba(31, 7, 13, .04) 20%,
    rgba(31, 7, 13, .58) 58%,
    rgba(31, 7, 13, .92) 100%);
}

/* ---------- Section 4: no empty cell — last tile spans two columns ---------- */
.contents-mosaic {
  grid-template-rows: 250px 210px 210px;
  grid-template-areas:
    "hero c1 c2"
    "hero c3 c4"
    "c5   c6 c6";
}

/* soft glow behind the mosaic no longer shows a hard rectangle edge */
.contents-mosaic::before {
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 100%);
}

@media (max-width: 1023px) {
  .contents-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 320px 220px 220px 220px;
    grid-template-areas:
      "hero hero"
      "c1   c2"
      "c3   c4"
      "c5   c6";
  }
}

@media (max-width: 640px) {
  .contents-mosaic {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 280px repeat(6, 220px);
    grid-template-areas:
      "hero"
      "c1"
      "c2"
      "c3"
      "c4"
      "c5"
      "c6";
    grid-auto-rows: 220px;
  }

  .mosaic-hero { min-height: 0; }
}

/* ==========================================================
   FAQ — SECTION 5 (journey) responsive line fix
   The <svg> inside .journey-svg-path has no width/height, so
   with viewBox 100x400 it grew to 4x its width and the vertical
   line ran down through the stage text on tablet/mobile.
   On stacked layouts it is now clipped to the visual box only.
   ========================================================== */
@media (max-width: 1023px) {
  .faq-journey .journey-svg-path {
    overflow: hidden;
  }

  .faq-journey .journey-svg-path svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .faq-journey .journey-content-side {
    position: relative;
    z-index: 1;
  }
}

/* ==========================================================
   ADMIN / USER DASHBOARD — RESPONSIVE FIXES
   1) Subscription pipeline + delivery route summary no longer
      overflow (and get clipped) on phones.
   2) Wide tables can be dragged sideways with the mouse.
   ========================================================== */

/* -- Pipeline: vertical stepper on phones so every label is visible -- */
@media (max-width: 640px) {
  body.dashboard-page .dashboard-pipeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 4px 0;
  }

  body.dashboard-page .dashboard-pipeline:before {
    top: 24px;
    bottom: 24px;
    left: 18px;
    right: auto;
    width: 2px;
    height: auto;
  }

  html[dir="rtl"] body.dashboard-page .dashboard-pipeline:before {
    left: auto;
    right: 18px;
  }

  body.dashboard-page .dashboard-pipe {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    text-align: start;
    min-width: 0;
  }

  body.dashboard-page .dashboard-pipe i {
    grid-row: 1 / span 2;
    margin: 0;
  }

  body.dashboard-page .dashboard-pipe strong {
    margin-top: 0;
    overflow-wrap: anywhere;
  }

  body.dashboard-page .dashboard-pipe small {
    margin-top: 2px;
    overflow-wrap: anywhere;
  }

  /* -- Route summary: number + label rows instead of six squeezed columns -- */
  body.dashboard-page .route-summary {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 8px 12px;
  }

  body.dashboard-page .route-summary span,
  body.dashboard-page .route-summary strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* -- Tables: drag-to-scroll + visible scrollbar -- */
body.dashboard-page .dashboard-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand) 55%, transparent) var(--bg-soft);
}

body.dashboard-page .dashboard-table-wrap.is-scrollable {
  cursor: grab;
}

body.dashboard-page .dashboard-table-wrap.is-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: auto;
}

body.dashboard-page .dashboard-table-wrap.is-dragging * {
  cursor: grabbing;
}

body.dashboard-page .dashboard-table-wrap:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

body.dashboard-page .dashboard-table-wrap::-webkit-scrollbar {
  height: 8px;
}

body.dashboard-page .dashboard-table-wrap::-webkit-scrollbar-track {
  background: var(--bg-soft);
  border-radius: 8px;
}

body.dashboard-page .dashboard-table-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand) 55%, transparent);
  border-radius: 8px;
}