/* KOMOREBI & KARAK - Core Stylesheet (single-line selector format) */
:root { --bg-atelier: #faf6f0; --bg-surface: #ffffff; --bg-surface-glass: rgba(253, 250, 246, 0.84); --bg-warm-tint: #f3eae0; --text-primary: #191512; --text-secondary: #5a5047; --text-muted: #8c8277; --color-saffron: #c86828; --color-amber-gold: #c3933c; --color-kulhad-clay: #964f33; --color-leaf-green: #294033; --border-subtle: rgba(140, 130, 119, 0.18); --border-brass: rgba(195, 147, 60, 0.32); --shadow-subtle: 0 4px 20px -2px rgba(45, 34, 24, 0.06); --shadow-floating: 0 18px 42px -10px rgba(40, 28, 18, 0.14); --shadow-glass: 0 10px 34px 0 rgba(50, 35, 22, 0.08); --header-glass: rgba(253, 250, 246, 0.82); --ann-bg: #1c1815; --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --side-padding: 5em; --section-block-padding: 5.5em; --header-h: 75px; --header-h-compact: 75px; --radius-pill: 9999px; --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --trans-fast: 0.22s ease; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
body { font-family: var(--font-body); background-color: var(--bg-atelier); color: var(--text-primary); line-height: 1.6; overflow-x: clip; transition: background-color 0.4s ease, color 0.4s ease; }
a { color: inherit; text-decoration: none; transition: color var(--trans-fast); }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
:focus-visible { outline: 2px solid var(--color-amber-gold); outline-offset: 3px; }

/* PRELOADER (UNCHANGED - same selectors, properties and values) */
.chai-preloader { position: fixed; inset: 0; background: #171310; color: #f5ede2; z-index: 10000; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.7s; }
.chai-preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { text-align: center; max-width: 420px; padding: 2em; display: flex; flex-direction: column; align-items: center; gap: 1.5em; }
.steeping-vessel { position: relative; width: 90px; height: 85px; display: flex; justify-content: center; align-items: flex-end; }
.steam-vapors { position: absolute; top: -24px; width: 65px; height: 55px; color: var(--color-amber-gold); }
.steam-line { stroke-dasharray: 60; stroke-dashoffset: 60; animation: vaporRise 2.4s infinite ease-in-out; }
.steam-2 { animation-delay: 0.4s; }
.steam-3 { animation-delay: 0.8s; }
@keyframes vaporRise {
0% { stroke-dashoffset: 60; opacity: 0; transform: translateY(8px); }
40% { opacity: 0.85; }
100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-16px); }
}
.ceramic-bowl { width: 72px; height: 38px; background: #2b221c; border: 1.5px solid var(--color-amber-gold); border-radius: 4px 4px 34px 34px; position: relative; box-shadow: inset 0 -6px 14px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(200, 104, 40, 0.25); overflow: hidden; }
.amber-glow { position: absolute; top: 4px; left: 6px; right: 6px; height: 6px; background: linear-gradient(90deg, #b05419, #e5a93c, #b05419); border-radius: var(--radius-pill); filter: blur(1.5px); animation: teaSimmer 2s ease-in-out infinite alternate; }
@keyframes teaSimmer {
0% { opacity: 0.6; transform: scaleX(0.92); }
100% { opacity: 1; transform: scaleX(1.05); }
}
.preloader-eyebrow { font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.32em; color: var(--color-amber-gold); text-transform: uppercase; }
.preloader-brand { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; letter-spacing: 0.08em; color: #fbf7f0; margin-top: 0.3em; }
.steep-status { display: flex; align-items: center; gap: 0.6em; font-size: 0.86rem; color: #bfb5a7; margin-top: 0.4em; }
.status-dot { width: 7px; height: 7px; background: var(--color-saffron); border-radius: 50%; animation: pulseDot 1.4s infinite; }
@keyframes pulseDot {
0%, 100% { transform: scale(0.9); opacity: 0.5; }
50% { transform: scale(1.4); opacity: 1; }
}
.steep-progress-bar { width: 220px; height: 3px; background: rgba(255, 255, 255, 0.12); border-radius: var(--radius-pill); overflow: hidden; margin-top: 0.6em; }
.progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, var(--color-amber-gold), var(--color-saffron)); transition: width 0.3s ease; }

.announcement-bar { position: relative; z-index: 900; background: var(--ann-bg); color: #f2e9dc; font-size: 0.8rem; border-bottom: 1px solid rgba(195, 147, 60, 0.2); }
.announcement-bar.is-dismissed { display: none; }
.announcement-container { display: grid; grid-template-columns: 1fr minmax(0, 740px) 1fr; align-items: center; gap: 1.5em; padding: 0 4em; min-height: 42px; }
.announcement-left, .announcement-right { display: flex; align-items: center; gap: 0.8em; white-space: nowrap;}
.announcement-right { justify-content: flex-end; }
.status-chip { --pulse: #4fae7b; display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fbf7f0; }
.status-chip[data-state="closed"] { --pulse: #d0694a; }
.live-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--pulse); }
.live-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pulse); animation: pulseRing 2s infinite ease-out; }
.status-chip[data-state="closed"] .live-pulse::after { animation: none; }
@keyframes pulseRing {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(3.2); opacity: 0; }
 }
.divider-slash { color: var(--color-amber-gold); opacity: 0.5; }
.batch-counter { color: #b9ad9d; font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; }
.announcement-center { display: flex; align-items: center; gap: 0.4em; min-width: 0; }
.ticker-btn { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #b9ad9d; transition: color 0.2s ease, background 0.2s ease; }
.ticker-btn:hover { color: var(--color-amber-gold); background: rgba(195, 147, 60, 0.14); }
.ticker-btn svg { width: 12px; height: 12px; }
.ticker-wrapper { position: relative; flex: 1; min-width: 0; height: 30px; overflow: hidden; }
.ticker-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.85em; min-width: 0; opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; }
.ticker-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ticker-tag { flex: none; background: rgba(195, 147, 60, 0.14); border: 1px solid var(--border-brass); color: #f0cb76; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.18em 0.75em; border-radius: var(--radius-pill); }
.ticker-phrase { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f0e7db; }
.ticker-link { flex: none; display: inline-flex; align-items: center; gap: 0.3em; color: var(--color-amber-gold); font-weight: 700; white-space: nowrap; }
.ticker-link:hover { color: #f5d487; }
.arrow { display: inline-block; transition: transform 0.2s ease; }
.ticker-link:hover .arrow { transform: translateX(3px); }
.open-hours, .ann-contact { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.76rem; color: #c4b9aa; }
.ann-contact:hover { color: var(--color-amber-gold); }
.clock-icon { width: 14px; height: 14px; color: var(--color-amber-gold); }
.ann-close { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #9d9285; font-size: 0.7rem; transition: color 0.2s ease, background 0.2s ease; }
.ann-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.atelier-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  transition: all 0.3s var(--ease-smooth);
}
.header-container {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2em;
  height: var(--header-h);
  padding: 0 var(--side-padding);
  background: var(--header-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border-subtle);
  transition: height 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.header-container::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-amber-gold), transparent); opacity: 0.5; pointer-events: none; }
.atelier-header.scrolled .header-container {
  height: var(--header-h-compact);
  background: var(--bg-surface-glass);
  border-bottom-color: var(--border-brass);
  box-shadow: var(--shadow-glass);
}
.brand-identity { display: flex; align-items: center; gap: 0.8em; }
.brand-crest { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-saffron); background: var(--bg-warm-tint); border: 1px solid var(--border-brass); transition: transform 0.5s var(--ease-smooth); }
.crest-svg { width: 30px; height: 30px; }
.brand-identity:hover .brand-crest { transform: rotate(60deg); }
.brand-names { display: flex; flex-direction: column; gap: 2px; }
.brand-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.08em; color: var(--text-primary); line-height: 1.8em; white-space: nowrap; }
.brand-title em { font-style: normal; color: var(--color-saffron); }
.brand-sub { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.2em; color: var(--text-muted); text-transform: uppercase; white-space: nowrap; }
.atelier-nav { justify-self: center; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 0.2em; }
.nav-item { position: relative; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.7em 1em; font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); white-space: nowrap; transition: color 0.2s ease; }
.nav-link::after { content: ""; position: absolute; inset-inline: 1em; bottom: 0.3em; height: 1.5px; background: var(--color-saffron); transform: scaleX(0); transition: transform 0.35s var(--ease-smooth); }
.nav-link:hover, .nav-item:hover > .nav-link, .nav-item:focus-within > .nav-link, .nav-link.is-active { color: var(--text-primary); }
.nav-link:hover::after, .nav-item:hover > .nav-link::after, .nav-item:focus-within > .nav-link::after, .nav-link.is-active::after { transform: scaleX(1); }
.chevron { width: 12px; height: 12px; transition: transform 0.25s ease; }
.nav-item:hover .chevron, .nav-item:focus-within .chevron { transform: rotate(180deg); }
.dropdown-panel { position: absolute; top: calc(100% + 12px); left: 50%; width: 300px; display: flex; flex-direction: column; gap: 0.2em; padding: 0.6em; background: var(--bg-surface); border: 1px solid var(--border-brass); border-radius: 16px; box-shadow: var(--shadow-floating); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(10px); transition: opacity 0.25s ease, transform 0.3s var(--ease-smooth), visibility 0.25s; z-index: 100; }
.dropdown-panel::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.dropdown-panel::after { content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; background: var(--bg-surface); border-top: 1px solid var(--border-brass); border-left: 1px solid var(--border-brass); transform: translateX(-50%) rotate(45deg); }
.dropdown-menu-tier { width: 340px; }
.nav-item:hover .dropdown-panel, .nav-item:focus-within .dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown-link-item { display: flex; align-items: center; gap: 0.85em; padding: 0.6em 0.7em; border-radius: 12px; transition: background 0.2s ease, transform 0.2s ease; }
.dropdown-link-item:hover, .dropdown-link-item.active { background: var(--bg-warm-tint); }
.dropdown-link-item:hover { transform: translateX(4px); }
.menu-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-warm-tint); border: 1px solid var(--border-subtle); color: var(--color-amber-gold); font-size: 1.05rem; }
.dropdown-link-item:hover .menu-icon { background: var(--bg-surface); border-color: var(--border-brass); }
.link-meta { display: flex; flex-direction: column; }
.link-name { font-family: var(--font-heading); font-size: 0.86rem; font-weight: 700; color: var(--text-primary); }
.link-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; }
.header-actions { display: flex; align-items: center; gap: 0.6em; }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-subtle); color: var(--text-primary); transition: background 0.2s ease, border-color 0.2s ease; }
.icon-btn:hover { background: rgba(195, 147, 60, 0.12); border-color: var(--color-amber-gold); }
.theme-icon { width: 17px; height: 17px; }
.moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: inline-block; color: var(--color-amber-gold); }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); transition: border-color 0.2s ease; }
.lang-switch:hover { border-color: var(--color-amber-gold); }
.seg { display: grid; place-items: center; min-width: 34px; height: 100%; padding: 0 0.6em; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; color: var(--text-muted); transition: background 0.25s ease, color 0.25s ease; }
.seg.is-active { background: var(--color-saffron); color: #fff; }
.action-icon-pill { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.55em 0.9em; border-radius: var(--radius-pill); background: rgba(195, 147, 60, 0.1); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 0.76rem; font-weight: 600; transition: all 0.22s ease; }
.action-icon-pill:hover { background: rgba(195, 147, 60, 0.18); border-color: var(--color-amber-gold); }
.cta-sculpted-btn { display: inline-flex; align-items: center; gap: 0.6em; height: 40px; padding: 0 1.3em; background: linear-gradient(135deg, var(--color-saffron) 0%, var(--color-kulhad-clay) 100%); color: #fff; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; border-radius: var(--radius-pill); box-shadow: 0 6px 18px -4px rgba(180, 78, 28, 0.45); transition: transform 0.22s ease, box-shadow 0.22s ease; white-space: nowrap; }
.cta-sculpted-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -4px rgba(180, 78, 28, 0.5); }
.btn-icon svg { display: block; width: 14px; height: 14px; transition: transform 0.2s ease; }
.cta-sculpted-btn:hover .btn-icon svg { transform: translateX(3px); }
.mobile-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-subtle); gap: 4px; }
.hamburger-bar { width: 17px; height: 2px; background-color: var(--text-primary); border-radius: 2px; transition: all 0.3s ease; }

/* MOBILE NAVIGATION DRAWER */
.mobile-drawer { position: fixed; inset: 0; z-index: 2000; visibility: hidden; transition: visibility 0.4s ease; }
.mobile-drawer.active { visibility: visible; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(18, 14, 12, 0.65); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.4s ease; }
.mobile-drawer.active .drawer-backdrop { opacity: 1; }
.drawer-content { position: absolute; top: 0; right: 0; width: 100%; max-width: 390px; height: 100%; background: var(--bg-surface); border-left: 1px solid var(--border-brass); display: flex; flex-direction: column; justify-content: space-between; padding: 1.8em; transform: translateX(100%); transition: transform 0.4s var(--ease-smooth); overflow-y: auto; }
.mobile-drawer.active .drawer-content { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.2em; border-bottom: 1px dashed var(--border-subtle); }
.drawer-title { font-family: var(--font-heading); font-weight: 800; font-size: 1rem; display: block; }
.drawer-caption { font-size: 0.64rem; letter-spacing: 0.15em; color: var(--color-saffron); text-transform: uppercase; }
.drawer-close { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-warm-tint); font-size: 1rem; color: var(--text-primary); display: flex; align-items: center; justify-content: center; }
.drawer-nav { list-style: none; margin: 1.5em 0; display: flex; flex-direction: column; gap: 0.6em; }
.drawer-accordion-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6em 0; font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--text-primary); text-align: start; }
.drawer-nav-item .drawer-link {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.6em 0; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text-primary); text-align: start;}
.drawer-chevron { width: 15px; height: 15px; transition: transform 0.25s ease; }
.drawer-subnav { display: none; flex-direction: column; gap: 0.4em; padding: 0.4em 0 0.8em 1em; border-left: 2px solid var(--border-brass); margin-left: 0.3em; }
.has-drawer-sub.open .drawer-subnav { display: flex; }
.has-drawer-sub.open .drawer-chevron { transform: rotate(180deg); }
.drawer-sublink { font-size: 0.9rem; color: var(--text-secondary); padding: 0.3em 0; transition: color 0.2s ease; }
.drawer-nav-item .drawer-link.active,
.drawer-nav-item .drawer-link.is-active,
.drawer-sublink.active,
.drawer-sublink.is-active {
  color: var(--color-saffron);
  font-weight: 700;
}
.drawer-sublink:hover,
.drawer-nav-item .drawer-link:hover {
  color: var(--color-saffron);
}
.drawer-actions { margin-top: 1.5em; display: flex; flex-direction: column; gap: 0.8em; }
.drawer-toggles-row { display: flex; gap: 0.6em; }
.drawer-toggles-row .action-icon-pill { flex: 1; justify-content: center; padding: 0.65em 0.5em; }
.drawer-cta-full { width: 100%; justify-content: center; padding: 0.85em; }
.drawer-foot { padding-top: 1.2em; border-top: 1px dashed var(--border-subtle); }
.drawer-copy { font-size: 0.7rem; color: var(--text-muted); text-align: center; }


.hero-link { display: inline-flex; align-items: center; gap: 0.8em; font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: #f8f2eb; }
.hero-link-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(226, 179, 90, 0.5); color: var(--color-amber-gold); transition: background 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-smooth); }
.hero-link-icon svg { width: 16px; height: 16px; }
.hero-link:hover .hero-link-icon { background: var(--color-amber-gold); color: #140e0a; transform: rotate(45deg); }

@media (max-width: 1024px) {
:root { --side-padding: 2.5em; --section-block-padding: 5em; --header-h: 68px; --header-h-compact: 70px; }
.atelier-nav { display: none; }
.mobile-toggle { display: flex; }
.header-container { grid-template-columns: 1fr auto; }
.announcement-container { grid-template-columns: auto minmax(0, 1fr) auto; }
.batch-counter, .divider-slash, .open-hours, .ann-contact { display: none; }
/* Hide toggles & CTA from header — they live in the drawer on mobile */
.header-actions .icon-btn,
.header-actions .lang-switch,
.header-actions .cta-sculpted-btn { display: none; }
}
@media (max-width: 767px) {
:root { --side-padding: 1.5em; --section-block-padding: 5em; --header-h: 62px; --header-h-compact: 66px; }
.announcement-container { gap: 0.8em; }
.ticker-tag, .ticker-link, .ticker-btn { display: none; }
.ticker-slide { justify-content: flex-start; }
.brand-sub { display: none; }
.brand-crest { width: 38px; height: 38px; }
.crest-svg { width: 26px; height: 26px; }
.brand-title { font-size: 0.92rem; }
}

/* ==========================================================================
   9. MENU PAGE — shared helpers
   ========================================================================== */
[hidden] { display: none !important; }
.menu-wrap { max-width: 1320px; margin-inline: auto; }
.sec-eyebrow { display: inline-flex; align-items: center; gap: 0.9em; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-saffron); margin-bottom: 1.4em; }
.sec-eyebrow::before { content: ""; width: 42px; height: 1px; background: currentColor; }
.sec-title { font-family: var(--font-heading); font-size: clamp(2.2rem, 4.2vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; color: var(--text-primary); }
.sec-title .mline { display: block; overflow: hidden; padding-bottom: 0.12em; }
.sec-title .mline-in { display: inline-block; will-change: transform; }
.sec-title em { font-style: italic; font-weight: 500; color: var(--color-saffron); }
.sec-lead { font-size: 14px; line-height: 1.75; color: var(--text-secondary); }
.menu-pdf { color: var(--text-primary); }
.menu-pdf .hero-link-icon { border-color: var(--border-brass); color: var(--color-saffron); }
.menu-pdf:hover .hero-link-icon { background: var(--color-saffron); color: #fff; }

/* ==========================================================================
   9a. EXPLORE OUR MENU — sticky sidebar + menu cards
   ========================================================================== */
.mx-section { position: relative; isolation: isolate; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-atelier); }
.mx-section::before { content: ""; position: absolute; z-index: -1; top: -14%; inset-inline-start: -12%; width: 52vw; height: 52vw; max-width: 720px; max-height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 104, 40, 0.09), transparent 68%); pointer-events: none; }
.mx-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 4em; align-items: start; }

/* Sidebar: Highlighted Card */
.mx-side {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-h-compact) + 1.8rem);
  align-self: start;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 10;
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.94) 0%, rgba(250, 244, 236, 0.9) 100%);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--border-brass);
  border-radius: 28px;
  padding: 2.2em 1.8em;
  box-shadow: 0 20px 48px -12px rgba(45, 34, 24, 0.09), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.mx-side::after {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-amber-gold), transparent);
  border-radius: 99px;
  pointer-events: none;
}
.mx-side::-webkit-scrollbar { display: none; }
.mx-title { margin-bottom: 0.5em; font-size: clamp(2rem, 3.4vw, 2.7rem); }
.mx-lead { margin-bottom: 1.8em; font-size: 0.92rem; line-height: 1.65; }
.mx-filters { list-style: none; display: flex; flex-direction: column; gap: 0.4em; border-top: 1px solid var(--border-subtle); padding-top: 1.2em; margin-bottom: 0.5em; }
.mx-filters li { border: none; }
.mx-filter {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.75em 1em;
  border-radius: 14px;
  text-align: start;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.25s var(--ease-smooth);
}
.mx-filter::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-saffron);
  margin-inline-end: 0.6em;
  opacity: 0;
  transform: scale(0);
  transition: all 0.25s var(--ease-smooth);
}
.mx-filter-name {
  display: inline-flex;
  align-items: center;
  flex: 1;
}
.mx-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 0.5em;
  border-radius: 99px;
  background: rgba(45, 34, 24, 0.05);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  transition: all 0.25s ease;
}
.mx-filter:hover {
  background: rgba(195, 147, 60, 0.08);
  color: var(--text-primary);
  transform: translateX(3px);
}
.mx-filter.is-active {
  background: linear-gradient(135deg, rgba(200, 104, 40, 0.14) 0%, rgba(195, 147, 60, 0.08) 100%);
  border-color: rgba(200, 104, 40, 0.32);
  color: var(--color-saffron);
  font-weight: 700;
  box-shadow: 0 4px 14px -3px rgba(200, 104, 40, 0.16);
  transform: translateX(2px);
}
.mx-filter.is-active::before {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 6px rgba(200, 104, 40, 0.5);
}
.mx-filter.is-active .mx-filter-count {
  background: rgba(200, 104, 40, 0.2);
  color: var(--color-saffron);
  font-weight: 800;
}
.mx-side-extra { display: flex; flex-direction: column; gap: 1.1em; margin-top: 1.6em; padding-top: 1.4em; border-top: 1px dashed var(--border-subtle); }
.mx-hours { display: inline-flex; align-items: center; gap: 0.65em; font-size: 0.8rem; color: var(--text-secondary); }
.mx-hours svg { width: 15px; height: 15px; color: var(--color-amber-gold); }
.mx-side-extra .cta-sculpted-btn { width: 100%; justify-content: center; }

/* Toolbar */
.mx-toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding-bottom: 1.3em; margin-bottom: 2em; border-bottom: 1px solid var(--border-subtle); }
.mx-result-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.mx-result-count { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }

/* Cards */
.mx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 2em 1.6em; }
.mx-card { display: flex; flex-direction: column; padding: 10px 10px 1.4em; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 26px; box-shadow: var(--shadow-subtle); transition: translate 0.5s var(--ease-smooth), box-shadow 0.4s ease, border-color 0.4s ease; }
.mx-card:hover { translate: 0 -6px; box-shadow: var(--shadow-floating); border-color: var(--border-brass); }
.mx-media { position: relative; margin: 0; aspect-ratio: 4 / 3.3; border-radius: 18px; overflow: hidden; background: var(--bg-warm-tint); }
.mx-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-smooth); }
.mx-card:hover .mx-media img { transform: scale(1.07); }
.mx-badge { position: absolute; top: 0.8em; inset-inline-start: 0.8em; padding: 0.38em 0.95em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-kulhad-clay); }
.mx-body { display: flex; flex-direction: column; flex: 1; gap: 0.7em; padding: 1.3em 0.8em 0; }
.mx-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.mx-name { font-family: var(--font-heading); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--text-primary); }
.mx-price { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--color-saffron); white-space: nowrap; }
.mx-desc { flex: 1; font-size: 0.88rem; line-height: 1.65; color: var(--text-secondary); }
.mx-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 0.4em; padding-top: 1em; border-top: 1px solid var(--border-subtle); }
.mx-meta { display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.76rem; color: var(--text-muted); }
.veg-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--color-leaf-green); box-shadow: 0 0 0 3px rgba(41, 64, 51, 0.14); }
.mx-add { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-brass); color: var(--color-saffron); transition: background 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-smooth); }
.mx-add svg { width: 15px; height: 15px; }
.mx-add:hover { background: var(--color-saffron); color: #fff; transform: rotate(90deg); }

.mx-end { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.4em 3em; margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--border-subtle); }
.mx-note { font-size: 0.86rem; color: var(--text-muted); max-width: 50ch; }

/* ==========================================================================
   9b. SIGNATURE CHAI COLLECTION — dark sidebar + medallion cards
   ========================================================================== */
.sc-section { --sc-ink: #f8f2eb; --sc-soft: rgba(248, 242, 235, 0.72); --sc-line: rgba(226, 179, 90, 0.24); position: relative; isolation: isolate; padding: var(--section-block-padding) var(--side-padding); background: radial-gradient(ellipse at 12% 0%, rgba(200, 104, 40, 0.22), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(195, 147, 60, 0.1), transparent 50%), #17120f; color: var(--sc-ink); }
.sc-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 4em; align-items: start; }

/* Sidebar: Highlighted Dark Brass Card */
.sc-side {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-h-compact) + 1.8rem);
  align-self: start;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 10;
  background: linear-gradient(170deg, rgba(38, 28, 22, 0.92) 0%, rgba(18, 14, 11, 0.96) 100%);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(226, 179, 90, 0.35);
  border-radius: 28px;
  padding: 2.2em 1.8em;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.85), 0 0 35px -8px rgba(226, 179, 90, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.sc-side::after {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #e2b35a, transparent);
  border-radius: 99px;
  pointer-events: none;
}
.sc-side::-webkit-scrollbar { display: none; }
.sc-side .sec-eyebrow { color: #e2b35a; margin-bottom: 1em; }
.sc-side .sec-title { color: #fbf7f0; margin-bottom: 0.5em; font-size: clamp(2rem, 3.4vw, 2.7rem); }
.sc-side .sec-title em { color: #e2b35a; }
.sc-lead { color: var(--sc-soft); font-size: 0.92rem; line-height: 1.65; margin-bottom: 0.5em; }
.sc-index { list-style: none; margin: 1.6em 0 1.4em; display: flex; flex-direction: column; gap: 0.45em; border-top: 1px solid var(--sc-line); padding-top: 1.2em; }
.sc-index li { border: none; }
.sc-index a {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.75em 1em;
  border-radius: 14px;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--sc-soft);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.28s var(--ease-smooth);
}
.sc-index-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 0.5em;
  border-radius: 8px;
  background: rgba(226, 179, 90, 0.1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(226, 179, 90, 0.7);
  transition: all 0.25s ease;
}
.sc-index a::after {
  content: "";
  margin-inline-start: auto;
  width: 20px;
  height: 2px;
  background: #e2b35a;
  box-shadow: 0 0 8px #e2b35a;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 2px;
  transition: transform 0.4s var(--ease-smooth);
}
.sc-index a:hover {
  background: rgba(226, 179, 90, 0.08);
  border-color: rgba(226, 179, 90, 0.2);
  color: #fff;
  transform: translateX(3px);
}
.sc-index a:hover .sc-index-num {
  color: #e2b35a;
  background: rgba(226, 179, 90, 0.18);
}
.sc-index a.is-active {
  background: linear-gradient(135deg, rgba(226, 179, 90, 0.22) 0%, rgba(200, 104, 40, 0.15) 100%);
  border-color: rgba(226, 179, 90, 0.5);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.5), 0 0 16px rgba(226, 179, 90, 0.18);
  transform: translateX(2px);
}
.sc-index a.is-active .sc-index-num {
  background: rgba(226, 179, 90, 0.32);
  color: #ffe6a3;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(226, 179, 90, 0.35);
}
.sc-index a.is-active::after {
  transform: scaleX(1);
}
.sc-flight {
  color: #f8f2eb;
  padding-top: 1.4em;
  border-top: 1px dashed var(--sc-line);
  width: 100%;
}

.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10em 3em; padding-top: 5.5em; }
.sc-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 9em 2.2em 2.2em; border-radius: 32px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.015) 100%); border: 1px solid var(--sc-line); scroll-margin-top: calc(var(--header-h) + 7em); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), translate 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease, background 0.5s ease; will-change: transform, box-shadow; }
.sc-card:hover { transform: translateY(-10px); translate: 0 -10px; border-color: rgba(226, 179, 90, 0.55); background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(200, 104, 40, 0.08) 45%, rgba(255, 255, 255, 0.02) 100%); box-shadow: 0 32px 70px -16px rgba(0, 0, 0, 0.85), 0 0 36px -6px rgba(226, 179, 90, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.sc-medal { position: absolute; top: -5.4em; left: 0; right: 0; width: 12.5em; margin-inline: auto; aspect-ratio: 1; }
.sc-medal-ring { position: absolute; inset: -0.7em; border-radius: 50%; border: 1px solid rgba(226, 179, 90, 0.45); transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease, box-shadow 0.5s ease; }
.sc-card:hover .sc-medal-ring { transform: scale(1.08); border-color: rgba(226, 179, 90, 0.85);}
.sc-medal-img { position: absolute; inset: 0; margin: 0; border-radius: 50%; overflow: hidden; background: #241b16; box-shadow: 0 28px 50px -16px rgba(0, 0, 0, 0.8); transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.sc-card:hover .sc-medal-img { box-shadow: 0 32px 60px -12px rgba(0, 0, 0, 0.92), 0 0 24px rgba(200, 104, 40, 0.3); }
.sc-medal-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease; }
.sc-card:hover .sc-medal-img img { transform: scale(1.1); filter: saturate(1.1) brightness(1.04); }
.sc-price { position: absolute; left: 0; right: 0; bottom: -1.1em; width: max-content; margin-inline: auto; display: inline-flex; align-items: baseline; gap: 0.5em; padding: 0.55em 1.25em; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--color-saffron) 0%, var(--color-kulhad-clay) 100%); color: #fff; box-shadow: 0 10px 24px -6px rgba(180, 78, 28, 0.55); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease; }
.sc-card:hover .sc-price { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 28px -4px rgba(200, 104, 40, 0.75), 0 0 18px rgba(226, 179, 90, 0.4); }
.sc-price strong { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; }
.sc-price small { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.88; }
.sc-tag { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #e2b35a; margin-bottom: 0.9em; transition: letter-spacing 0.4s var(--ease-smooth), color 0.3s ease; }
.sc-card:hover .sc-tag { letter-spacing: 0.25em; color: #f7d48c; }
.sc-name { font-family: var(--font-heading); font-size: clamp(1.5rem, 1.2vw, 1.95rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: #fbf7f0; margin-bottom: 0.4em; transition: color 0.3s ease, text-shadow 0.4s ease; }
.sc-card:hover .sc-name { color: #ffffff; text-shadow: 0 2px 16px rgba(226, 179, 90, 0.28); }
.sc-origin { font-size: 14px; font-style: italic; color: #e2b35a; margin-bottom: 1em; }
.sc-desc { font-size: 0.92rem; line-height: 1.75; color: var(--sc-soft); margin-bottom: 1.4em; }
.sc-notes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; margin-bottom: 1.8em; }
.sc-notes li { padding: 0.38em 1em; border-radius: var(--radius-pill); border: 1px solid var(--sc-line); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--sc-soft); transition: border-color 0.35s ease, background 0.35s ease, color 0.35s ease, transform 0.3s ease; }
.sc-card:hover .sc-notes li { border-color: rgba(226, 179, 90, 0.35); background: rgba(226, 179, 90, 0.06); color: #fdfaf6; }
.sc-notes li:hover { transform: translateY(-2px); background: rgba(226, 179, 90, 0.18) !important; border-color: rgba(226, 179, 90, 0.7) !important; color: #fff !important; }
.sc-foot { width: 100%; margin-top: auto; padding-top: 1.5em; border-top: 1px solid var(--sc-line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1em; }
.sc-strength { display: inline-flex; align-items: center; gap: 0.8em; }
.sc-label { font-family: var(--font-heading); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(248, 242, 235, 0.55); }
.sc-meter { display: inline-flex; gap: 6px; }
.sc-meter i { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(226, 179, 90, 0.28); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.sc-meter i.on { background: #e27d3b; }
.sc-card:hover .sc-meter i.on { box-shadow: 0 0 6px rgba(226, 125, 59, 0.7); }
.sc-foot .cta-sculpted-btn { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.sc-card:hover .sc-foot .cta-sculpted-btn { box-shadow: 0 8px 24px -4px rgba(200, 104, 40, 0.65); }

/* ==========================================================================
   Tablet (<=1024px): sidebar stacks on top, side padding 2.5em
   ========================================================================== */
@media (max-width: 1024px) {
  .mx-section, .sc-section { padding: var(--section-block-padding) var(--side-padding); }
  .mx-layout, .sc-layout { grid-template-columns: 1fr; gap: 2.5em; }
  .mx-side, .sc-side { position: static; }
  .mx-lead { margin-bottom: 1.8em; max-width: 560px; }
  .mx-side-extra { display: none; }
  .mx-filters { flex-direction: row; gap: 0.6em; border-top: 0; overflow-x: auto; margin-inline: calc(var(--side-padding) * -1); padding: 0.2em var(--side-padding) 0.6em; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mx-filters::-webkit-scrollbar { display: none; }
  .mx-filters li { flex: none; border: 0; }
  .mx-filter { width: auto; padding: 0.65em 1.2em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); font-size: 0.85rem; white-space: nowrap; gap: 0.7em; }
  .mx-filter::before { display: none; }
  .mx-filter:hover, .mx-filter.is-active { padding-inline-start: 1.2em; }
  .mx-filter.is-active { background: var(--color-saffron); border-color: var(--color-saffron); color: #fff; }
  .mx-filter.is-active .mx-filter-count { color: rgba(255, 255, 255, 0.8); }
  .sc-lead { max-width: 560px; }
  .sc-index { display: none; }
  .sc-flight { margin-top: 1.6em; }
  .sc-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 6.5em 1.6em; padding-top: 5em; }
  .sc-card { padding-inline: 1.6em; }
}

/* ==========================================================================
   Mobile (<=767px): side padding 1.5em
   ========================================================================== */
@media (max-width: 767px) {
  .mx-section, .sc-section { padding: var(--section-block-padding) var(--side-padding); }
  .sec-title { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .mx-grid { grid-template-columns: 1fr; gap: 1.6em; }
  .mx-toolbar { margin-bottom: 1.5em; }
  .mx-result-title { font-size: 1.25rem; }
  .mx-end { flex-direction: column; align-items: flex-start; margin-top: 2.4em; }
  .sc-grid { grid-template-columns: 1fr; gap: 6.2em; padding-top: 4.6em; }
  .sc-medal { width: 11em; top: -4.8em; }
  .sc-card { padding: 8em 1.4em 1.6em; }
  .sc-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .sc-strength { justify-content: center; }
  .sc-foot .cta-sculpted-btn { justify-content: center; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-card, .sc-card, .mx-media img, .sc-medal-img img, .mx-filter, .sc-index a::after { transition: none; }
}

/* ==========================================================================
   10. SPECIALTY TEA SELECTION — capsule tea shelf
   ========================================================================== */
.ts-section { position: relative; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-atelier); overflow: hidden; }
.ts-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; margin-bottom: 4.5em; }
.ts-head .sec-lead { max-width: 440px; padding-bottom: 0.6em; }
.ts-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.4em; align-items: start; }
.ts-item { display: flex; flex-direction: column; }
.ts-item:nth-child(even) { margin-top: 4.5em; }
.ts-visual { position: relative; transition: translate 0.6s var(--ease-smooth); }
.ts-visual::before { content: ""; position: absolute; inset: -9px; border-radius: 999px; border: 1px solid var(--border-brass); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.ts-item:hover .ts-visual { translate: 0 -8px; }
.ts-item:hover .ts-visual::before { opacity: 1; }
.ts-capsule { margin: 0; aspect-ratio: 3 / 4.7; border-radius: 999px; overflow: hidden; background: var(--bg-warm-tint); box-shadow: var(--shadow-floating); }
.ts-capsule img { width: 100%; height: 112%; margin-top: -6%; object-fit: cover; will-change: transform; }
.ts-temp { position: absolute; z-index: 2; top: 6%; inset-inline-end: -9%; width: 78px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: linear-gradient(135deg, var(--color-saffron) 0%, var(--color-kulhad-clay) 100%); color: #fff; box-shadow: 0 12px 26px -6px rgba(180, 78, 28, 0.5); }
.ts-temp strong { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; line-height: 1; }
.ts-temp small { margin-top: 0.3em; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.ts-info { display: flex; flex-direction: column; align-items: center; gap: 0.55em; padding-top: 1.7em; text-align: center; }
.ts-origin { font-family: var(--font-heading); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-saffron); }
.ts-name { font-family: var(--font-heading); font-size: 1.28rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--text-primary); }
.ts-notes { font-size: 0.86rem; font-style: italic; line-height: 1.6; color: var(--text-secondary); max-width: 22ch; }
.ts-buy { display: flex; align-items: center; gap: 1em; margin-top: 0.5em; }
.ts-price { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; color: var(--color-saffron); }
.ts-price small { margin-inline-start: 0.4em; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-muted); }
.ts-add { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-brass); color: var(--color-saffron); transition: background 0.3s ease, color 0.3s ease, rotate 0.4s var(--ease-smooth); }
.ts-add svg { width: 15px; height: 15px; }
.ts-add:hover { background: var(--color-saffron); color: #fff; rotate: 90deg; }
.ts-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.4em 3em; margin-top: 5em; padding-top: 2em; border-top: 1px solid var(--border-subtle); }
.ts-foot-note { font-size: 0.88rem; color: var(--text-muted); max-width: 52ch; }

/* ==========================================================================
   11. TEA-TIME SNACKS — pill banner + dotted-leader menu
   ========================================================================== */
.sn-section { position: relative; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-warm-tint); overflow: hidden; }
.sn-head { max-width: 700px; margin: 0 auto 3.8em; text-align: center; }
.sn-head .sec-eyebrow { justify-content: center; }
.sn-head .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.sn-head .sec-lead { max-width: 520px; margin: 1.2em auto 0; }

.sn-banner { position: relative; margin-bottom: 5em; }
.sn-banner-media { position: relative; margin: 0; height: clamp(250px, 29vw, 390px); border-radius: 999px; overflow: hidden; background: var(--bg-surface); box-shadow: var(--shadow-floating); }
.sn-banner-media img { width: 100%; height: 100%; object-fit: cover; }
.sn-banner-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 12, 9, 0.9) 0%, rgba(18, 12, 9, 0.55) 45%, rgba(18, 12, 9, 0.05) 100%); }
.sn-banner-copy { position: absolute; z-index: 2; inset-block: 0; inset-inline-start: 7%; display: flex; flex-direction: column; justify-content: center; gap: 0.9em; max-width: min(46%, 500px); color: #f8f2eb; }
.sn-banner-eyebrow { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: #e2b35a; }
.sn-banner-title { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.9vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: #fbf7f0; }
.sn-banner-text { font-size: 0.95rem; color: rgba(248, 242, 235, 0.8); }
.sn-times { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: 0.4em; }
.sn-times li { padding: 0.38em 1.1em; border-radius: var(--radius-pill); border: 1px solid rgba(226, 179, 90, 0.55); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; color: #f0cb76; }

.sn-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4em; }
.sn-group-title { display: flex; align-items: baseline; gap: 0.9em; padding-bottom: 1.1em; margin-bottom: 0.7em; border-bottom: 1px solid var(--border-brass); font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); }
.sn-group-title span { font-size: 0.9rem; font-style: italic; font-weight: 500; color: var(--color-saffron); }
.sn-list { list-style: none; }
.sn-item { display: flex; align-items: flex-start; gap: 1.1em; padding: 1.15em 0; cursor: default; }
.sn-thumb { display: none; flex: none; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--border-brass); background: var(--bg-surface); }
.sn-body { flex: 1; min-width: 0; }
.sn-line { display: flex; align-items: baseline; gap: 0.7em; }
.sn-name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); transition: color var(--trans-fast); }
.sn-item:hover .sn-name { color: var(--color-saffron); }
.sn-tag { flex: none; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-kulhad-clay); }
.sn-leader { flex: 1; min-width: 1em; border-bottom: 2px dotted rgba(195, 147, 60, 0.7); transform: translateY(-0.25em); }
.sn-price { flex: none; font-family: var(--font-heading); font-size: 1.02rem; font-weight: 800; color: var(--color-saffron); }
.sn-desc { margin-top: 0.35em; max-width: 36ch; font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary); }
.sn-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.4em 3em; margin-top: 4em; padding-top: 2em; border-top: 1px solid var(--border-subtle); }
.sn-note { display: inline-flex; align-items: center; gap: 0.7em; font-size: 0.86rem; color: var(--text-muted); }
.sn-veg { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--color-leaf-green); box-shadow: 0 0 0 3px rgba(41, 64, 51, 0.16); }
.sn-peek { position: fixed; z-index: 700; top: 0; left: 0; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 6px solid var(--bg-warm-tint); box-shadow: var(--shadow-floating), 0 0 0 1px var(--border-brass); opacity: 0; pointer-events: none; display: none; }
.sn-peek img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (min-width: 1025px) { .sn-peek { display: block; } }

/* ==========================================================================
   12. CHAI & SNACK PAIRINGS — mood selector + duo ovals
   ========================================================================== */
.pp-section { --pp-bg: #1b2d23; position: relative; isolation: isolate; padding: var(--section-block-padding) var(--side-padding); background: radial-gradient(ellipse at 50% 0%, rgba(195, 147, 60, 0.16), transparent 60%), radial-gradient(ellipse at 90% 100%, rgba(200, 104, 40, 0.1), transparent 50%), var(--pp-bg); color: #f8f2eb; overflow: hidden; }
.pp-head { max-width: 720px; margin: 0 auto; text-align: center; }
.pp-head .sec-eyebrow { justify-content: center; color: #e2b35a; }
.pp-head .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.pp-head .sec-title { color: #fbf7f0; }
.pp-head .sec-title em { color: #e2b35a; }
.pp-head .sec-lead { max-width: 540px; margin: 1.2em auto 0; color: rgba(248, 242, 235, 0.74); }
.pp-moods { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.7em; margin: 2.6em 0 4.5em; }
.pp-mood { padding: 0.72em 1.55em; border-radius: var(--radius-pill); border: 1px solid rgba(226, 179, 90, 0.38); font-family: var(--font-heading); font-size: 0.86rem; font-weight: 600; color: rgba(248, 242, 235, 0.82); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.pp-mood:hover { border-color: #e2b35a; color: #fff; }
.pp-mood[aria-selected="true"] { background: #e2b35a; border-color: #e2b35a; color: #1b2d23; }

.pp-panel { display: none; }
.pp-panel.is-active { display: block; }
.pp-duo { position: relative; display: flex; justify-content: center; align-items: center; padding-block: 0.5em; margin-bottom: 4em; }
.pp-oval { position: relative; margin: 0; width: clamp(180px, 26vw, 310px); aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden; background: #243a2e; box-shadow: 0 0 0 10px var(--pp-bg), 0 0 0 11px rgba(226, 179, 90, 0.5), 0 36px 60px -20px rgba(0, 0, 0, 0.7); }
.pp-oval img { width: 100%; height: 100%; object-fit: cover; }
.pp-oval--a { z-index: 1; margin-block-end: 4.2em; }
.pp-oval--b { z-index: 2; margin-block-start: 4.2em; margin-inline-start: -0.6em; }
.pp-plus { position: absolute; z-index: 3; inset: 0; margin: auto; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #e2b35a; color: #1b2d23; box-shadow: 0 0 0 8px var(--pp-bg), 0 14px 30px -8px rgba(0, 0, 0, 0.6); }
.pp-plus svg { width: 22px; height: 22px; }

.pp-info { max-width: 880px; margin-inline: auto; text-align: center; }
.pp-names { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2em; margin-bottom: 1.8em; }
.pp-side { display: flex; flex-direction: column; gap: 0.4em; }
.pp-side:first-child { text-align: end; }
.pp-side:last-child { text-align: start; }
.pp-kicker { font-family: var(--font-heading); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #e2b35a; }
.pp-item-name { font-family: var(--font-heading); font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: #fbf7f0; }
.pp-item-price { font-size: 0.88rem; color: rgba(248, 242, 235, 0.62); }
.pp-amp { font-family: var(--font-heading); font-size: 2rem; font-style: italic; font-weight: 500; color: #e2b35a; }
.pp-why { max-width: 580px; margin: 0 auto 2em; font-size: 1.08rem; font-style: italic; line-height: 1.75; color: rgba(248, 242, 235, 0.8); }
.pp-deal { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1em 1.5em; }
.pp-was { font-size: 1rem; text-decoration: line-through; color: rgba(248, 242, 235, 0.45); }
.pp-now { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: #e2b35a; }
.pp-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(248, 242, 235, 0.6); }

/* ==========================================================================
   Tablet (<=1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .ts-section, .sn-section, .pp-section { padding: var(--section-block-padding) var(--side-padding); }
  .ts-head { flex-direction: column; align-items: flex-start; gap: 1.4em; margin-bottom: 3em; }
  .ts-shelf { display: flex; gap: 1.6em; overflow-x: auto; margin-inline: calc(var(--side-padding) * -1); padding: 0.6em var(--side-padding) 1.2em; scroll-snap-type: x mandatory; scroll-padding-inline: var(--side-padding); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ts-shelf::-webkit-scrollbar { display: none; }
  .ts-item { flex: none; width: min(46vw, 270px); scroll-snap-align: start; }
  .ts-item:nth-child(even) { margin-top: 0; }
  .ts-temp { inset-inline-end: -6%; }
  .ts-foot { margin-top: 3em; }
  .sn-banner { margin-bottom: 4em; }
  .sn-banner-copy { max-width: min(52%, 440px); }
  .sn-menu { grid-template-columns: 1fr; gap: 3em; }
  .sn-thumb { display: block; }
  .sn-desc { max-width: 52ch; }
  .sn-foot { margin-top: 3em; }
  .pp-moods { margin-bottom: 3.5em; }
  .pp-oval--a { margin-block-end: 3.2em; }
  .pp-oval--b { margin-block-start: 3.2em; margin-inline-start: -2.6em; }
}

/* ==========================================================================
   Mobile (<=767px)
   ========================================================================== */
@media (max-width: 767px) {
  .ts-section, .sn-section, .pp-section { padding: var(--section-block-padding) var(--side-padding); }
  .ts-item { width: min(68vw, 270px); }
  .ts-foot { flex-direction: column; align-items: flex-start; }
  .sn-banner { margin-bottom: 3.5em; }
  .sn-banner-media { height: 200px; }
  .sn-banner-media::after { display: none; }
  .sn-banner-copy { position: static; max-width: none; padding-top: 1.8em; color: var(--text-primary); }
  .sn-banner-eyebrow { color: var(--color-saffron); }
  .sn-banner-title { color: var(--text-primary); }
  .sn-banner-text { color: var(--text-secondary); }
  .sn-times li { color: var(--color-kulhad-clay); border-color: var(--border-brass); }
  .sn-thumb { width: 52px; height: 52px; }
  .sn-line { flex-wrap: wrap; row-gap: 0.1em; }
  .sn-foot { flex-direction: column; align-items: flex-start; }
  .pp-moods { gap: 0.55em; margin: 2.2em 0 3.6em; }
  .pp-mood { padding: 0.62em 1.2em; font-size: 0.8rem; }
  .pp-duo { margin-bottom: 3em; }
  .pp-oval { width: 44%; box-shadow: 0 0 0 7px var(--pp-bg), 0 0 0 8px rgba(226, 179, 90, 0.5), 0 24px 40px -16px rgba(0, 0, 0, 0.7); }
  .pp-oval--a { margin-block-end: 2.4em; }
  .pp-oval--b { margin-block-start: 2.4em; margin-inline-start: -1.6em; }
  .pp-plus { width: 50px; height: 50px; box-shadow: 0 0 0 6px var(--pp-bg), 0 10px 22px -8px rgba(0, 0, 0, 0.6); }
  .pp-plus svg { width: 18px; height: 18px; }
  .pp-names { grid-template-columns: 1fr; gap: 0.8em; }
  .pp-side:first-child, .pp-side:last-child { text-align: center; }
  .pp-amp { font-size: 1.5rem; }
  .pp-why { font-size: 1rem; }
  .pp-deal { flex-direction: column; }
  .pp-deal .cta-sculpted-btn { width: 100%; justify-content: center; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-visual, .ts-visual::before, .ts-add, .pp-mood { transition: none; }
}
/* ==========================================================================
   13. SEASONAL SPECIALS — season journey
   ========================================================================== */
.ss-section { position: relative; isolation: isolate; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-atelier); overflow: clip; }
.ss-section::before { content: ""; position: absolute; z-index: -1; bottom: -12%; inset-inline-end: -14%; width: 50vw; height: 50vw; max-width: 680px; max-height: 680px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 104, 40, 0.08), transparent 68%); pointer-events: none; }
.ss-head { max-width: 720px; margin: 0 auto 5.5em; text-align: center; }
.ss-head .sec-eyebrow { justify-content: center; }
.ss-head .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.ss-head .sec-lead { max-width: 540px; margin: 1.2em auto 0; }
.ss-journey { position: relative; display: flex; flex-direction: column; gap: 6.5em; }
.ss-line { position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; width: 1px; background: var(--border-brass); -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); }
.ss-line-fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-amber-gold), var(--color-saffron)); }
.ss-stop { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 9em; }
.ss-node { position: absolute; z-index: 2; top: 50%; inset-inline-start: 50%; width: 16px; height: 16px; margin-top: -8px; margin-inline-start: -8px; border-radius: 50%; background: var(--bg-atelier); border: 2px solid var(--color-saffron); box-shadow: 0 0 0 8px var(--bg-atelier); }
.ss-stop.is-live .ss-node { background: var(--color-saffron); box-shadow: 0 0 0 8px var(--bg-atelier), 0 0 0 9px var(--border-brass); }
.ss-media-wrap { position: relative; width: min(100%, 410px); justify-self: end; }
.ss-stop--flip .ss-media-wrap { order: 2; justify-self: start; }
.ss-stop--flip .ss-copy { order: 1; justify-self: end; }
.ss-ring { position: absolute; inset: -16px; border-radius: 50%; padding: 1.5px; background: conic-gradient(from 200deg, var(--color-amber-gold), transparent 55%, var(--color-saffron) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.ss-photo { position: relative; margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--bg-warm-tint); box-shadow: var(--shadow-floating); }
.ss-photo img { display: block; width: 100%; height: 112%; margin-top: -6%; object-fit: cover; will-change: transform; }
.ss-ingredient { position: absolute; bottom: 2%; inset-inline-end: -7%; width: 31%; aspect-ratio: 1; margin: 0; border-radius: 50%; overflow: hidden; border: 7px solid var(--bg-atelier); background: var(--bg-warm-tint); box-shadow: var(--shadow-floating); }
.ss-stop--flip .ss-ingredient { inset-inline-end: auto; inset-inline-start: -7%; }
.ss-ingredient img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-copy { width: 100%; max-width: 470px; }
.ss-months { display: block; margin-bottom: 0.22em; font-family: var(--font-heading); font-size: clamp(3rem, 6.4vw, 5.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(195, 147, 60, 0.75); }
.ss-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8em 1.4em; margin-bottom: 1.1em; }
.ss-season { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-saffron); }
.ss-season svg { width: 16px; height: 16px; }
.ss-status { display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.76rem; font-weight: 600; color: var(--text-muted); }
.ss-status .live-pulse { --pulse: var(--text-muted); width: 7px; height: 7px; }
.ss-stop.is-live .ss-status { color: var(--text-primary); }
.ss-stop.is-live .ss-status .live-pulse { --pulse: #4fae7b; }
.ss-stop:not(.is-live) .ss-status .live-pulse::after { animation: none; }
.ss-name { font-family: var(--font-heading); font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; color: var(--text-primary); }
.ss-origin { margin-top: 0.5em; font-size: 1rem; font-style: italic; color: var(--color-saffron); }
.ss-desc { margin-top: 1.1em; font-size: 0.94rem; line-height: 1.8; color: var(--text-secondary); }
.ss-notes { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em 0; margin-top: 1.3em; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-primary); }
.ss-notes li + li::before { content: "·"; margin-inline: 0.75em; color: var(--color-amber-gold); }
.ss-buy { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.2em 2em; margin-top: 1.8em; padding-top: 1.5em; border-top: 1px solid var(--border-subtle); }
.ss-price { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-saffron); }
.ss-price small { margin-inline-start: 0.5em; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; color: var(--text-muted); }
.ss-foot { display: flex; justify-content: center; margin-top: 6em; text-align: center; }
.ss-foot-note { max-width: 52ch; font-size: 0.88rem; color: var(--text-muted); }

/* ==========================================================================
   14. CUSTOMIZE YOUR CHAI — live builder
   ========================================================================== */
.cc-section { position: relative; isolation: isolate; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-warm-tint); }
.cc-head { max-width: 640px; margin-bottom: 4.5em; }
.cc-head .sec-lead { max-width: 520px; margin-top: 1.2em; }
.cc-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 6em; align-items: start; }
.cc-preview { position: sticky; top: calc(var(--header-h) + 2rem); display: flex; flex-direction: column; align-items: center; text-align: center; }
.cc-stage { position: relative; width: min(100%, 460px); aspect-ratio: 1; container-type: inline-size; }
.cc-gauge { position: absolute; inset: 5%; width: 90%; height: 90%; transform: rotate(-90deg); }
.cc-gauge circle { fill: none; }
.cc-gauge-track { stroke: var(--border-brass); stroke-width: 0.3; }
.cc-gauge-fill { stroke: var(--color-saffron); stroke-width: 0.7; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 40; transition: stroke-dashoffset 0.9s var(--ease-smooth); }
.cc-disc { position: absolute; inset: 11%; margin: 0; border-radius: 50%; overflow: hidden; background: #241b16; box-shadow: var(--shadow-floating); }
.cc-disc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cc-tint { position: absolute; inset: 0; background: var(--cc-tone, #b9692f); mix-blend-mode: soft-light; opacity: 0.6; transition: background 0.7s ease; }
.cc-strength-chip { position: absolute; left: 50%; bottom: 19%; transform: translateX(-50%); display: inline-flex; gap: 0.5em; padding: 0.4em 1.05em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-heading); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.cc-strength-chip b { color: var(--color-saffron); }
.cc-orbit { position: absolute; inset: 0; pointer-events: none; }
.cc-orb { position: absolute; top: 50%; left: 50%; width: 14cqw; height: 14cqw; margin: -7cqw 0 0 -7cqw; transform: rotate(var(--a)) translateY(-43.5cqw) rotate(calc(var(--a) * -1)); }
.cc-orb-pop { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 0.9cqw solid var(--bg-warm-tint); background: #241b16; box-shadow: 0 10px 22px -8px rgba(40, 28, 18, 0.5); opacity: 0; transform: scale(0); transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cc-orb.is-on .cc-orb-pop { opacity: 1; transform: scale(1); }
.cc-orb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-readout { display: flex; flex-direction: column; align-items: center; gap: 1em; max-width: 440px; margin-top: 1.8em; }
.cc-readout-label { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-saffron); }
.cc-sentence { min-height: 6.6em; font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
.cc-sentence em { font-style: italic; font-weight: 600; color: var(--text-primary); }
.cc-total-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1em 1.8em; }
.cc-total-wrap { display: flex; align-items: baseline; gap: 0.6em; }
.cc-total { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--color-saffron); font-variant-numeric: tabular-nums; }
.cc-total-note { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.cc-add { height: 50px; padding: 0 1.6em; font-size: 0.88rem; }
.cc-add.is-added { background: linear-gradient(135deg, #3f7a58, #294033); }
.cc-reset .hero-link-icon { width: 38px; height: 38px; }
.cc-reset { font-size: 0.82rem; }
.cc-controls { display: flex; flex-direction: column; }
.cc-step { padding: 2.1em 0; border-top: 1px solid var(--border-subtle); }
.cc-step:first-child { padding-top: 0; border-top: 0; }
.cc-step-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4em 1em; margin-bottom: 1.15em; }
.cc-step-num { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; color: var(--color-amber-gold); }
.cc-step-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); }
.cc-step-value { margin-inline-start: auto; font-size: 0.9rem; font-style: italic; font-weight: 500; color: var(--color-saffron); }
.cc-pills { display: flex; flex-wrap: wrap; gap: 0.6em; }
.cc-pill { position: relative; display: inline-flex; }
.cc-pill input, .cc-spice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cc-pill-in { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.72em 1.3em; border-radius: var(--radius-pill); border: 1px solid var(--border-brass); font-family: var(--font-heading); font-size: 0.86rem; font-weight: 600; color: var(--text-secondary); transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.cc-pill-in small { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); transition: color 0.3s ease; }
.cc-pill:hover .cc-pill-in { border-color: var(--color-saffron); color: var(--text-primary); }
.cc-pill input:checked + .cc-pill-in { background: var(--color-saffron); border-color: var(--color-saffron); color: #fff; }
.cc-pill input:checked + .cc-pill-in small { color: rgba(255, 255, 255, 0.82); }
.cc-pill input:focus-visible + .cc-pill-in, .cc-spice input:focus-visible + .cc-spice-media { outline: 2px solid var(--color-amber-gold); outline-offset: 3px; }
.cc-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 4px; margin: 1.1em 0 0; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--color-saffron) 0 var(--fill, 50%), var(--border-brass) var(--fill, 50%) 100%); outline: none; cursor: pointer; }
.cc-range::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; background: var(--color-saffron); border: 4px solid var(--bg-warm-tint); box-shadow: 0 0 0 1px var(--color-saffron), 0 6px 14px -3px rgba(150, 79, 51, 0.5); transition: transform 0.25s var(--ease-smooth); }
.cc-range::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; background: var(--color-saffron); border: 4px solid var(--bg-warm-tint); box-shadow: 0 0 0 1px var(--color-saffron), 0 6px 14px -3px rgba(150, 79, 51, 0.5); }
.cc-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.cc-range:focus-visible { outline: 2px solid var(--color-amber-gold); outline-offset: 10px; }
.cc-scale { display: flex; justify-content: space-between; margin-top: 1em; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--text-muted); }
.cc-spices { display: flex; flex-wrap: wrap; gap: 1.3em 1.5em; }
.cc-spice { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6em; width: 76px; cursor: pointer; }
.cc-spice-media { position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--border-brass); transition: box-shadow 0.35s ease, opacity 0.3s ease, filter 0.35s ease; filter: saturate(0.6); }
.cc-spice-media img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cc-spice:hover .cc-spice-media { filter: saturate(1); }
.cc-spice input:checked + .cc-spice-media { filter: none; box-shadow: 0 0 0 3px var(--bg-warm-tint), 0 0 0 5px var(--color-saffron); }
.cc-spice input:disabled + .cc-spice-media { opacity: 0.38; }
.cc-spice-tick { position: absolute; bottom: -3px; inset-inline-end: -3px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-saffron); color: #fff; border: 2px solid var(--bg-warm-tint); transform: scale(0); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cc-spice-tick svg { width: 11px; height: 11px; }
.cc-spice input:checked + .cc-spice-media .cc-spice-tick { transform: scale(1); }
.cc-spice-name { font-size: 0.76rem; font-weight: 600; line-height: 1.25; text-align: center; color: var(--text-secondary); }
.cc-spice-name small { display: block; font-size: 0.66rem; color: var(--text-muted); }
.cc-dock { display: none; }

/* ==========================================================================
   15. FINAL CTA — Your Chai Moment (sunrise dome)
   ========================================================================== */
.fc-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); text-align: center; color: #f8f2eb; background: radial-gradient(ellipse at 50% 0%, rgba(200, 104, 40, 0.24), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(226, 179, 90, 0.12), transparent 55%), #15100d; }
.fc-rays { --rw: max(120vw, 1200px); position: absolute; z-index: -1; top: 56%; inset-inline-start: 50%; width: var(--rw); height: var(--rw); margin-top: calc(var(--rw) / -2); margin-inline-start: calc(var(--rw) / -2); border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(226, 179, 90, 0.09) 0deg 2.5deg, transparent 2.5deg 11deg); -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.5) 28%, transparent 60%); mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.5) 28%, transparent 60%); pointer-events: none; will-change: transform; }
.fc-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.fc-section .sec-eyebrow { justify-content: center; color: #e2b35a; }
.fc-section .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.fc-title { max-width: 880px; font-size: clamp(2.4rem, 5.6vw, 4.6rem); color: #fbf7f0; }
.fc-title em { color: #e2b35a; }
.fc-lead { max-width: 560px; margin-top: 1.5em; font-size: 1rem; line-height: 1.8; color: rgba(248, 242, 235, 0.76); }
.fc-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.2em 2.2em; margin-top: 2.5em; }
.fc-cta-lg { height: 54px; padding: 0 1.8em; font-size: 0.92rem; }
.fc-scene { position: relative; width: min(100%, 880px); margin-top: 4.5em; }
.fc-scene::before { content: ""; position: absolute; z-index: -1; inset: 12% 14% -8%; border-radius: 50%; background: radial-gradient(circle, rgba(226, 125, 59, 0.42), transparent 68%); filter: blur(44px); }
.fc-dome { position: relative; margin: 0; aspect-ratio: 16 / 8.4; border-radius: 999px 999px 0 0; overflow: hidden; background: #241b16; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); }
.fc-dome img { display: block; width: 100%; height: 112%; margin-top: -6%; object-fit: cover; will-change: transform; }
.fc-dome::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 16, 13, 0.1), rgba(21, 16, 13, 0.2) 55%, rgba(21, 16, 13, 0.85) 100%), radial-gradient(circle at 50% 100%, rgba(226, 125, 59, 0.3), transparent 60%); pointer-events: none; }
.fc-orb { position: absolute; margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 7px solid #15100d; background: #241b16; box-shadow: 0 24px 50px -14px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(226, 179, 90, 0.35); }
.fc-orb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fc-orb--a { width: clamp(96px, 18%, 172px); inset-inline-start: -3%; bottom: 14%; }
.fc-orb--b { width: clamp(84px, 14%, 140px); inset-inline-end: -2%; top: 26%; }
.fc-live { --pulse: #4fae7b; position: absolute; left: 50%; bottom: -1.3em; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.8em; padding: 0.65em 1.4em; border-radius: var(--radius-pill); background: rgba(21, 16, 13, 0.82); border: 1px solid rgba(226, 179, 90, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fbf7f0; white-space: nowrap; }
.fc-facts { list-style: none; display: flex; justify-content: center; width: 100%; max-width: 980px; margin-top: 5.5em; }
.fc-facts > li { flex: 1; }
.fc-facts > li + li { border-inline-start: 1px solid rgba(226, 179, 90, 0.24); }
.fc-fact { display: flex; align-items: center; justify-content: center; gap: 1em; padding: 0.4em 1.6em; text-align: start; }
a.fc-fact { transition: color 0.25s ease; }
.fc-fact-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(226, 179, 90, 0.5); color: #e2b35a; transition: background 0.3s ease, color 0.3s ease; }
.fc-fact-icon svg { width: 18px; height: 18px; }
a.fc-fact:hover .fc-fact-icon { background: #e2b35a; color: #140e0a; }
.fc-fact-label { display: block; font-family: var(--font-heading); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(226, 179, 90, 0.85); }
.fc-fact-value { display: block; margin-top: 0.2em; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: #fbf7f0; }

/* ==========================================================================
   Tablet (<=1024px): side padding 2.5em
   ========================================================================== */
@media (max-width: 1024px) {
  .ss-head { margin-bottom: 4.5em; }
  .ss-journey { gap: 5em; }
  .ss-stop { column-gap: 4.5em; }
  .ss-media-wrap { width: min(100%, 340px); }
  .ss-copy { max-width: 420px; }
  .cc-head { margin-bottom: 3.5em; }
  .cc-layout { grid-template-columns: 1fr; gap: 3em; }
  .cc-preview { position: static; }
  .cc-stage { width: min(100%, 360px); }
  .cc-sentence { min-height: 5.4em; max-width: 520px; }
  .cc-total-row, .cc-reset { display: none; }
  .cc-readout { margin-top: 1.2em; }
  .cc-dock { position: sticky; bottom: 1em; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 1.4em; padding: 0.55em; padding-inline-start: 1.7em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid var(--border-brass); box-shadow: var(--shadow-floating); }
  .cc-dock-info { display: flex; flex-direction: column; line-height: 1.15; }
  .cc-dock-label { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
  .cc-dock-total { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 800; color: var(--color-saffron); font-variant-numeric: tabular-nums; }
  .fc-scene { margin-top: 4em; }
  .fc-facts { margin-top: 5em; }
  .fc-fact { padding-inline: 1em; flex-direction: column; text-align: center; gap: 0.8em; }
}

/* ==========================================================================
   Mobile (<=767px): side padding 1.5em
   ========================================================================== */
@media (max-width: 767px) {
  .ss-head { margin-bottom: 3.6em; }
  .ss-journey { gap: 4.6em; }
  .ss-line { inset-inline-start: 7px; }
  .ss-node { inset-inline-start: 0; margin-inline-start: 0; top: 0.4em; margin-top: 0; }
  .ss-stop, .ss-stop--flip { grid-template-columns: 1fr; row-gap: 2.6em; padding-inline-start: 2.7em; }
  .ss-stop--flip .ss-media-wrap, .ss-stop--flip .ss-copy { order: 0; }
  .ss-media-wrap, .ss-stop--flip .ss-media-wrap { width: min(84%, 320px); justify-self: start; }
  .ss-stop--flip .ss-ingredient { inset-inline-start: auto; inset-inline-end: -7%; }
  .ss-copy, .ss-stop--flip .ss-copy { max-width: none; justify-self: stretch; }
  .ss-months { font-size: clamp(2.6rem, 14vw, 3.4rem); }
  .ss-buy { flex-direction: column; align-items: flex-start; }
  .ss-foot { margin-top: 4em; }
  .cc-head { margin-bottom: 3em; }
  .cc-stage { width: min(100%, 300px); }
  .cc-step { padding: 1.8em 0; }
  .cc-step-title { font-size: 1.05rem; }
  .cc-pill-in { padding: 0.65em 1.1em; font-size: 0.82rem; }
  .cc-spices { gap: 1.1em 1em; }
  .cc-spice { width: 70px; }
  .cc-spice-media { width: 58px; height: 58px; }
  .cc-dock { bottom: 0.8em; padding-inline-start: 1.4em; }
  .cc-dock .cc-add { height: 46px; padding: 0 1.2em; }
  .fc-title { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .fc-actions { flex-direction: column; width: 100%; gap: 1.4em; }
  .fc-actions .fc-cta-lg { width: 100%; justify-content: center; }
  .fc-scene { margin-top: 3.4em; }
  .fc-orb { border-width: 5px; }
  .fc-live { font-size: 0.6rem; padding: 0.6em 1.1em; }
  .fc-facts { flex-direction: column; margin-top: 4.6em; gap: 1.6em; }
  .fc-facts > li + li { border-inline-start: 0; border-top: 1px solid rgba(226, 179, 90, 0.2); padding-top: 1.6em; }
  .fc-fact { flex-direction: row; justify-content: flex-start; text-align: start; padding-inline: 0.4em; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-orb-pop, .cc-gauge-fill, .cc-pill-in, .cc-spice-media, .cc-spice-tick, .cc-tint { transition: none; }
}
/* ==========================================================================
   16. HOW IT WORKS — scroll-led steeping story
   ========================================================================== */
.hw-section { position: relative; isolation: isolate; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-atelier); }
.hw-section::before { content: ""; position: absolute; z-index: -1; top: -10%; inset-inline-end: -12%; width: 50vw; height: 50vw; max-width: 700px; max-height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 104, 40, 0.08), transparent 68%); pointer-events: none; }
.hw-head { max-width: 680px; margin-bottom: 1.5em; }
.hw-head .sec-lead { max-width: 520px; margin-top: 1.2em; }
.hw-track { position: relative; }
.hw-track.has-pin { height: 330vh; }
.hw-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 6em; }
.hw-track.has-pin .hw-stage { position: sticky; top: calc(var(--header-h) + 1.5rem); height: calc(100vh - var(--header-h) - 3rem); max-height: 760px; }
.hw-steps { list-style: none; }
.hw-step { position: relative; padding-inline-start: 3.2em; padding-bottom: 2.4em; }
.hw-step:last-child { padding-bottom: 0; }
.hw-step::before { content: ""; position: absolute; top: calc(0.62em + 15px); bottom: -0.62em; inset-inline-start: 7px; width: 1px; background: var(--border-brass); transition: background 0.6s ease; }
.hw-step:last-child::before { display: none; }
.hw-step.is-done::before { background: var(--color-saffron); }
.hw-step::after { content: ""; position: absolute; top: 0.62em; inset-inline-start: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--bg-atelier); border: 2px solid var(--border-brass); transition: border-color 0.5s ease, background 0.5s ease, box-shadow 0.5s ease; }
.hw-step.is-done::after { border-color: var(--color-saffron); background: var(--color-saffron); }
.hw-step.is-active::after { border-color: var(--color-saffron); background: var(--bg-atelier); box-shadow: 0 0 0 6px rgba(200, 104, 40, 0.16); }
.hw-step-btn { display: flex; align-items: baseline; gap: 1em; width: 100%; padding: 0.15em 0; text-align: start; }
.hw-num { font-family: var(--font-heading); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; color: var(--color-amber-gold); }
.hw-step-title { font-family: var(--font-heading); font-size: clamp(1.25rem, 1.7vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--text-muted); transition: color 0.5s ease;font-style: italic; }
.hw-step-btn:hover .hw-step-title { color: var(--text-secondary); }
.hw-step.is-active .hw-step-title { color: var(--text-primary); }
.hw-step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease-smooth); }
.hw-step.is-active .hw-step-body { grid-template-rows: 1fr; }
.hw-step-body > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s 0.7s; }
.hw-step.is-active .hw-step-body > div { visibility: visible; transition-delay: 0s; }
.hw-step-body p { max-width: 44ch; padding-top: 0.9em; font-size: 0.96rem; line-height: 1.75; color: var(--text-secondary); }
.hw-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em 0; margin-top: 1em; font-family: var(--font-heading); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-primary); }
.hw-facts li + li::before { content: "·"; margin-inline: 0.75em; color: var(--color-amber-gold); }
.hw-visual { position: relative; justify-self: center; width: min(100%, 480px, max(300px, calc(100vh - var(--header-h) - 9rem))); aspect-ratio: 1; }
.hw-ring { position: absolute; inset: -7%; border-radius: 50%; border: 1px solid var(--border-brass); transform: rotate(var(--hw-rot, 0deg)); transition: transform 1.1s var(--ease-smooth); pointer-events: none; }
.hw-dot { position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); box-shadow: 0 0 0 6px var(--bg-atelier), 0 0 22px rgba(200, 104, 40, 0.55); }
.hw-photos { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--bg-warm-tint); box-shadow: var(--shadow-floating); }
.hw-photo { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.8s ease; }
.hw-photo.is-active { z-index: 1; opacity: 1; }
.hw-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hw-chip { position: absolute; z-index: 3; left: 50%; bottom: -1.3em; transform: translateX(-50%); padding: 0.7em 1.5em; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); color: #fff; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; box-shadow: 0 14px 28px -8px rgba(180, 78, 28, 0.55); }
.hw-chip-text { display: block; font-weight: 700; }

/* ==========================================================================
   17. YOUR REWARDS, YOUR WAY — Leaves slider
   ========================================================================== */
.rw-section { position: relative; isolation: isolate; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-warm-tint); overflow: clip; }
.rw-head { max-width: 720px; margin: 0 auto 5em; text-align: center; }
.rw-head .sec-eyebrow { justify-content: center; }
.rw-head .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.rw-head .sec-lead { max-width: 540px; margin: 1.2em auto 0; }
.rw-board { --rw-base: clamp(84px, 12.6vw, 170px); }
.rw-row { list-style: none; display: flex; align-items: flex-end; }
.rw-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5em; text-align: center; }
.rw-item:nth-child(1) { --s: 0.7; }
.rw-item:nth-child(2) { --s: 0.8; }
.rw-item:nth-child(3) { --s: 0.9; }
.rw-item:nth-child(4) { --s: 1; }
.rw-item:nth-child(5) { --s: 1.1; }
.rw-medal { position: relative; display: block; width: calc(var(--rw-base) * var(--s)); aspect-ratio: 1; margin-bottom: 1.2em; border-radius: 50%; cursor: pointer; transition: transform 0.6s var(--ease-smooth); }
.rw-medal-ring { position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--border-brass); transition: border-color 0.5s ease, inset 0.5s var(--ease-smooth); }
.rw-medal-img { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--bg-surface); box-shadow: var(--shadow-floating); }
.rw-medal-img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.95); opacity: 0.5; transition: filter 0.6s ease, opacity 0.6s ease; }
.rw-item:not(.is-unlocked) .rw-medal:hover img { opacity: 0.75; }
.rw-item.is-unlocked .rw-medal-img img { filter: none; opacity: 1; }
.rw-item.is-unlocked .rw-medal-ring { border-color: var(--color-amber-gold); }
.rw-item.is-selected .rw-medal { transform: scale(1.1); }
.rw-item.is-selected .rw-medal-ring { inset: -13px; border-width: 2px; border-color: var(--color-saffron); }
.rw-medal:focus-visible { outline: 2px solid var(--color-amber-gold); outline-offset: 14px; }
.rw-lock { position: absolute; z-index: 2; bottom: 4%; inset-inline-end: 4%; display: grid; place-items: center; width: 30%; max-width: 34px; aspect-ratio: 1; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border-brass); color: var(--text-muted); transition: opacity 0.4s ease, transform 0.5s var(--ease-smooth); }
.rw-lock svg { width: 52%; height: 52%; }
.rw-item.is-unlocked .rw-lock { opacity: 0; transform: scale(0.4); }
.rw-pts { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.rw-pts b { margin-inline-end: 0.4em; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--text-secondary); transition: color 0.4s ease; }
.rw-item.is-unlocked .rw-pts b { color: var(--color-saffron); }
.rw-name { max-width: 14ch; font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700; line-height: 1.25; color: var(--text-secondary); transition: color 0.4s ease; }
.rw-item.is-selected .rw-name { color: var(--text-primary); }
.rw-slider { position: relative; margin-top: 2.8em; padding-block: 1em; }
.rw-ticks { position: absolute; top: 50%; inset-inline: 15px; height: 0; pointer-events: none; }
.rw-tick { position: absolute; top: 0; inset-inline-start: var(--p); width: 10px; height: 10px; margin-top: -5px; margin-inline-start: -5px; border-radius: 50%; background: var(--bg-warm-tint); border: 1.5px solid var(--border-brass); transition: background 0.4s ease, border-color 0.4s ease; }
.rw-tick.on { background: var(--color-saffron); border-color: var(--color-saffron); }
.rw-range { position: relative; z-index: 1; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--color-saffron) 0 var(--fill, 0%), var(--border-brass) var(--fill, 0%) 100%); outline: none; cursor: pointer; }
.rw-range::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; background: var(--color-saffron); border: 5px solid var(--bg-warm-tint); box-shadow: 0 0 0 1px var(--color-saffron), 0 8px 18px -4px rgba(150, 79, 51, 0.55); transition: transform 0.25s var(--ease-smooth); }
.rw-range::-moz-range-thumb { box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; background: var(--color-saffron); border: 5px solid var(--bg-warm-tint); box-shadow: 0 0 0 1px var(--color-saffron), 0 8px 18px -4px rgba(150, 79, 51, 0.55); }
.rw-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.rw-range:focus-visible { outline: 2px solid var(--color-amber-gold); outline-offset: 12px; }
.rw-hint { margin-top: 0.4em; text-align: center; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-muted); }
.rw-balance { display: flex; align-items: baseline; justify-content: center; gap: 0.7em; margin-top: 2.2em; }
.rw-balance-label { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-saffron); }
.rw-leaves { min-width: 2ch; font-family: var(--font-heading); font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rw-balance-unit { font-size: 0.92rem; font-style: italic; color: var(--text-muted); }
.rw-detail { max-width: 620px; margin: 2.6em auto 0; text-align: center; }
.rw-detail-tag { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-saffron); }
.rw-detail-name { margin-top: 0.6em; font-family: var(--font-heading); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; color: var(--text-primary); }
.rw-detail-desc { margin-top: 0.9em; font-size: 14px; line-height: 1.8; color: var(--text-secondary); }
.rw-detail-meta { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4em 0; margin-top: 1.2em; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-primary); }
.rw-detail-meta li + li::before { content: "·"; margin-inline: 0.8em; color: var(--color-amber-gold); }
.rw-next { min-height: 1.5em; margin-top: 1.4em; font-size: 0.88rem; color: var(--text-muted); }
.rw-detail .hero-link { margin-top: 1.4em; }

/* ==========================================================================
   18. MEMBERSHIP BENEFITS — tier coin + perks
   ========================================================================== */
.mb-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); text-align: center; color: #f8f2eb; background: radial-gradient(ellipse at 50% 0%, rgba(195, 147, 60, 0.16), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(200, 104, 40, 0.14), transparent 50%), #17120f; }
.mb-head { max-width: 720px; margin: 0 auto 3.4em; }
.mb-head .sec-eyebrow { justify-content: center; color: #e2b35a; }
.mb-head .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.mb-head .sec-title { color: #fbf7f0; }
.mb-head .sec-title em { color: #e2b35a; }
.mb-head .sec-lead { max-width: 540px; margin: 1.2em auto 0; color: rgba(248, 242, 235, 0.74); }
.mb-tiers { display: flex; justify-content: center; margin-bottom: 4.5em; }
.mb-tier { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35em; width: 170px; padding-top: 2.2em; color: rgba(248, 242, 235, 0.55); transition: color 0.4s ease; }
.mb-tier::before { content: ""; position: absolute; z-index: 1; top: 0; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #17120f; border: 2px solid rgba(226, 179, 90, 0.45); transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.mb-tier + .mb-tier::after { content: ""; position: absolute; z-index: 0; top: 7px; inset-inline-end: 50%; width: 100%; height: 2px; background: rgba(226, 179, 90, 0.28); transition: background 0.5s ease; }
.mb-tier.is-reached::before { border-color: #e2b35a; }
.mb-tier.is-reached::after { background: #e2b35a; }
.mb-tier.is-active { color: #fbf7f0; }
.mb-tier.is-active::before { background: #e2b35a; box-shadow: 0 0 0 7px rgba(226, 179, 90, 0.18); }
.mb-tier:hover { color: #fbf7f0; }
.mb-tier-name { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; }
.mb-tier-req { font-family: var(--font-heading); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.mb-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px) minmax(0, 1fr); align-items: center; gap: 3.6em; text-align: start; }
.mb-perks { list-style: none; display: flex; flex-direction: column; gap: 3em; }
.mb-perk { position: relative; transition: opacity 0.6s ease; }
.mb-perk.is-locked { opacity: 0.38; }
.mb-perk-in { display: flex; align-items: flex-start; gap: 1.3em; }
.mb-perks--l .mb-perk-in { justify-content: flex-end; text-align: end; }
.mb-perk::after { content: ""; position: absolute; top: 27px; width: 2.6em; height: 1px; }
.mb-perks--l .mb-perk::after { inset-inline-end: -3.2em; background: linear-gradient(to right, rgba(226, 179, 90, 0.55), transparent); }
.mb-perks--r .mb-perk::after { inset-inline-start: -3.2em; background: linear-gradient(to left, rgba(226, 179, 90, 0.55), transparent); }
.mb-perk-icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(226, 179, 90, 0.5); color: #e2b35a; transition: background 0.5s ease; }
.mb-perk:not(.is-locked) .mb-perk-icon { background: rgba(226, 179, 90, 0.12); }
.mb-perk-icon svg { width: 22px; height: 22px; }
.mb-perk-title { font-family: var(--font-heading); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: #fbf7f0; }
.mb-perk-desc { margin-top: 0.45em; font-size: 0.88rem; line-height: 1.7; color: rgba(248, 242, 235, 0.7); }
.mb-perk-tag { display: inline-block; margin-top: 0.8em; font-family: var(--font-heading); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(226, 179, 90, 0.9); }
.mb-coin-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.8em; }
.mb-coin { --mb-ink: #e6f1ea; position: relative; width: min(100%, 380px); aspect-ratio: 1; perspective: 900px; }
.mb-coin[data-tier="1"] { --mb-ink: #fff0e2; }
.mb-coin[data-tier="2"] { --mb-ink: #3a2708; }
.mb-coin-spin, .mb-coin-tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
.mb-bezel { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity 0.8s ease; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.mb-bezel.is-active { opacity: 1; }
.mb-bezel[data-t="0"] { background: conic-gradient(from 200deg, #7fae92, #294033 18%, #5f927a 36%, #1f3329 54%, #7fae92 72%, #2f4d3b 90%, #7fae92); }
.mb-bezel[data-t="1"] { background: conic-gradient(from 200deg, #f0a068, #7a3a22 18%, #d8804a 36%, #66301c 54%, #f0a068 72%, #8a4527 90%, #f0a068); }
.mb-bezel[data-t="2"] { background: conic-gradient(from 200deg, #f7dc99, #a8791f 18%, #e8c26e 36%, #946a1a 54%, #f7dc99 72%, #b88b2e 90%, #f7dc99); }
.mb-coin-photo { position: absolute; inset: 13%; margin: 0; border-radius: 50%; overflow: hidden; background: #241b16; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(255, 255, 255, 0.2), inset 0 0 40px rgba(0, 0, 0, 0.4); }
.mb-coin-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; }
.mb-coin-photo img.is-active { opacity: 1; }
.mb-coin-text { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mb-coin-label { font-family: var(--font-heading); font-size: 9.5px; font-weight: 800; letter-spacing: 0.34em; fill: var(--mb-ink); transition: fill 0.6s ease; }
.mb-coin-shine { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at var(--mx, 30%) var(--my, 22%), rgba(255, 255, 255, 0.34), transparent 46%); mix-blend-mode: soft-light; pointer-events: none; }
.mb-coin-caption { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #e2b35a; }
.mb-cta { display: flex; flex-direction: column; align-items: center; gap: 1.4em; margin-top: 5.5em; }
.mb-cta-line { max-width: 26ch; font-family: var(--font-heading); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: #fbf7f0; }
.mb-cta-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.2em 2.2em; }
.mb-join { height: 54px; padding: 0 1.8em; font-size: 0.92rem; }
.mb-fine { font-size: 0.8rem; letter-spacing: 0.04em; color: rgba(248, 242, 235, 0.6); }

/* ==========================================================================
   Tablet (<=1024px): side padding 2.5em
   ========================================================================== */
@media (max-width: 1024px) {
  .hw-head { margin-bottom: 3.5em; }
  .hw-stage { grid-template-columns: 1fr; gap: 4.2em; }
  .hw-visual { order: -1; width: min(100%, 380px); }
  .rw-head { margin-bottom: 4.2em; }
  .mb-tiers { margin-bottom: 3.6em; }
  .mb-tier { width: 140px; }
  .mb-stage { grid-template-columns: 1fr 1fr; gap: 3.4em 2.6em; }
  .mb-coin-wrap { grid-column: 1 / -1; order: -1; }
  .mb-coin { width: min(100%, 320px); }
  .mb-perks { gap: 2.4em; }
  .mb-perk::after { display: none; }
  .mb-perks--l .mb-perk-in { flex-direction: row-reverse; justify-content: flex-start; text-align: start; }
  .mb-cta { margin-top: 4.6em; }
}

/* ==========================================================================
   Mobile (<=767px): side padding 1.5em
   ========================================================================== */
@media (max-width: 767px) {
  .hw-visual { width: min(86%, 320px); }
  .hw-step { padding-inline-start: 2.6em; }
  .hw-chip { padding: 0.62em 1.2em; font-size: 0.7rem; }
  .rw-head { margin-bottom: 3.6em; }
  .rw-board { --rw-base: 96px; }
  .rw-row { overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.2em; margin-inline: calc(var(--side-padding) * -1); padding: 1.6em var(--side-padding) 0.4em; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rw-row::-webkit-scrollbar { display: none; }
  .rw-item { flex: none; width: 128px; scroll-snap-align: center; }
  .rw-slider { margin-top: 1.8em; }
  .rw-ticks { display: none; }
  .rw-leaves { font-size: 2.5rem; }
  .mb-tier { flex: 1; width: auto; min-width: 0; }
  .mb-tier-name { font-size: 1.05rem; }
  .mb-tier-req { font-size: 0.58rem; letter-spacing: 0.1em; text-align: center; }
  .mb-stage { grid-template-columns: 1fr; gap: 2.4em; }
  .mb-coin { width: min(86%, 300px); }
  .mb-perk-icon { width: 48px; height: 48px; }
  .mb-cta { margin-top: 4.2em; }
  .mb-cta-actions { flex-direction: column; width: 100%; gap: 1.4em; }
  .mb-join { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-ring, .hw-photo, .hw-step-body, .rw-medal, .rw-medal-img img, .rw-medal-ring, .mb-bezel, .mb-coin-photo img, .mb-perk { transition: none; }
}

/* ==========================================================================
   19. MEMBERSHIP TIERS — rising arches
   ========================================================================== */
.mt-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-atelier); }
.mt-section::before { content: ""; position: absolute; z-index: -1; top: -10%; inset-inline-end: -14%; width: 56vw; height: 56vw; max-width: 760px; max-height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(195, 147, 60, 0.12), transparent 68%); pointer-events: none; }
.mt-head { max-width: 720px; margin: 0 auto 4.2em; text-align: center; }
.mt-head .sec-eyebrow { justify-content: center; }
.mt-head .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.mt-head .sec-lead { max-width: 540px; margin: 1.2em auto 0; }
.mt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4em; align-items: start; max-width: 1120px; margin-inline: auto; }
.mt-tier { --tone: var(--color-leaf-green); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mt-tier:nth-child(1) { margin-top: 5.5em; }
.mt-tier:nth-child(2) { margin-top: 2.75em; --tone: var(--color-kulhad-clay); }
.mt-tier:nth-child(3) { margin-top: 0; --tone: var(--color-saffron); }
.mt-arch { position: relative; width: 100%; max-width: 320px; padding-bottom: 2.6em; transition: transform 0.7s var(--ease-smooth); }
.mt-tier:hover .mt-arch { transform: translateY(-6px); }
.mt-arch-photo { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--bg-warm-tint); box-shadow: var(--shadow-floating); }
.mt-arch-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-smooth); }
.mt-tier:hover .mt-arch-photo img { transform: scale(1.07); }
.mt-arch-photo::after { content: ""; position: absolute; inset: 10px; border-radius: 999px 999px 0 0; border: 1px solid rgba(255, 255, 255, 0.55); pointer-events: none; }
.mt-seal { position: absolute; bottom: 0; left: 50%; width: 78px; height: 78px; margin-left: -39px; display: grid; place-items: center; border-radius: 50%; background: var(--tone); color: #fff; box-shadow: 0 0 0 6px var(--bg-atelier), 0 14px 28px -8px rgba(40, 28, 18, 0.35); }
.mt-seal svg { width: 30px; height: 30px; }
.mt-body { display: flex; flex-direction: column; align-items: center; gap: 0.7em; padding-top: 1.2em; width: 100%; }
.mt-label { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tone); }
.mt-name { font-family: var(--font-heading); font-size: clamp(1.9rem,1.8vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--text-primary); }
.mt-req { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.mt-rate { display: flex; align-items: baseline; gap: 0.6em; margin-top: 0.3em; }
.mt-rate b { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--tone); }
.mt-rate span { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.mt-desc { max-width: 30ch; font-size: 0.94rem; line-height: 1.7; color: var(--text-secondary); }
.mt-perks { list-style: none; width: 100%; max-width: 300px; margin: 0.7em 0 0.5em; text-align: start; }
.mt-perks li { display: flex; align-items: center; justify-content: center; gap: 0.8em; padding: 0.85em 0; border-top: 1px solid var(--border-subtle); font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); text-align: center; }.mt-perks li:last-child { border-bottom: 1px solid var(--border-subtle); }
.mt-perks svg { flex: none; width: 16px; height: 16px; margin-top: 0.2em; color: var(--tone); }
.mt-note { max-width: 520px; margin: 5em auto 0; text-align: center; font-size: 0.84rem; line-height: 1.7; letter-spacing: 0.02em; color: var(--text-muted); }

/* ==========================================================================
   20. YOUR POINTS JOURNEY — scroll-drawn trail
   ========================================================================== */
.pj-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-warm-tint); }
.pj-head { max-width: 720px; margin: 0 auto 4em; text-align: center; }
.pj-head .sec-eyebrow { justify-content: center; }
.pj-head .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.pj-head .sec-lead { max-width: 520px; margin: 1.2em auto 0; }
.pj-trail { --pj-size: 200px; --pj-gap: 2.2em; --pj-text-gap: 4.2em; position: relative; max-width: 980px; margin-inline: auto; }
.pj-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.pj-path-base { fill: none; stroke: var(--border-brass); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.pj-path-draw { fill: none; stroke: var(--color-saffron); stroke-width: 3; stroke-linecap: round; }
.pj-marker { position: absolute; z-index: 3; left: 0; top: 0; width: 74px; height: 74px; margin: -37px 0 0 -37px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); color: #fff; box-shadow: 0 0 0 6px var(--bg-warm-tint), 0 14px 30px -8px rgba(150, 70, 30, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.pj-trail.is-live .pj-marker { opacity: 1; }
.pj-count { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; line-height: 1; }
.pj-marker small { margin-top: 0.3em; font-family: var(--font-heading); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; }
.pj-stops { list-style: none; }
.pj-stop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 2.4em 0; }
.pj-text { max-width: 420px; justify-self: end; text-align: end; padding-inline-end: var(--pj-text-gap); }
.pj-stop:nth-child(even) .pj-text { justify-self: start; text-align: start; padding-inline-end: 0; padding-inline-start: var(--pj-text-gap); }
.pj-pts { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.55em; margin-bottom: 0.5em; }
.pj-stop:nth-child(even) .pj-pts { justify-content: flex-start; }
.pj-pts b { font-family: var(--font-heading); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary); }
.pj-pts small { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-saffron); }
.pj-name { margin-bottom: 0.5em; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); }
.pj-text p { font-size: 0.94rem; line-height: 1.75; color: var(--text-secondary); }
.pj-node { position: relative; z-index: 1; width: var(--pj-size); height: var(--pj-size); margin: 0; margin-inline-start: var(--pj-gap); justify-self: start; padding: 7px; border-radius: 50%; background: var(--bg-warm-tint); box-shadow: 0 0 0 1px var(--border-brass), var(--shadow-floating); transition: box-shadow 0.8s ease; }
.pj-stop:nth-child(even) .pj-node { order: -1; justify-self: end; margin-inline-start: 0; margin-inline-end: var(--pj-gap); }
.pj-node img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; filter: grayscale(0.9) brightness(1.03); transition: filter 1s ease; }
.pj-stop.is-reached .pj-node { box-shadow: 0 0 0 2px var(--color-saffron), var(--shadow-floating); }
.pj-stop.is-reached .pj-node img { filter: none; }
.pj-foot { display: flex; flex-direction: column; align-items: center; gap: 1.4em; margin-top: 3em; text-align: center; }
.pj-foot p { font-family: var(--font-heading); font-size: clamp(1.15rem, 1.5vw, 1.5rem); font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }

/* ==========================================================================
   21. LOYALTY PROGRAM FAQ — host photo + accordion
   ========================================================================== */
.fq-section { position: relative; isolation: isolate; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-atelier); }
.fq-section::before { content: ""; position: absolute; z-index: -1; bottom: -12%; inset-inline-start: -12%; width: 50vw; height: 50vw; max-width: 680px; max-height: 680px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 104, 40, 0.08), transparent 68%); pointer-events: none; }
.fq-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5em; align-items: start; }
.fq-side { position: sticky; top: calc(var(--header-h) + 1.8rem); display: flex; flex-direction: column; }
.fq-title { margin-bottom: 0.6em; }
.fq-lead { max-width: 420px; }
.fq-host { position: relative; width: min(100%, 340px); margin-top: 2.6em; }
.fq-host-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px 24px 24px 160px; background: var(--bg-warm-tint); box-shadow: var(--shadow-floating); }
.fq-host-photo img { position: absolute; inset: -9% 0; width: 100%; height: 118%; object-fit: cover; }
.fq-host-chip { position: absolute; bottom: -1.2em; inset-inline-start: 1.4em; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.75em 1.3em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-glass); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-primary); }
.fq-host-chip svg { width: 15px; height: 15px; color: var(--color-saffron); }
.fq-contact { margin-top: 3em; }
.fq-tabs { display: flex; flex-wrap: wrap; gap: 0 2em; border-bottom: 1px solid var(--border-subtle); }
.fq-tab { position: relative; padding: 0.9em 0; font-family: var(--font-heading); font-size: 0.86rem; font-weight: 700; color: var(--text-secondary); transition: color var(--trans-fast); }
.fq-tab::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--color-saffron); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-smooth); }
.fq-tab:hover { color: var(--text-primary); }
.fq-tab.is-active { color: var(--color-saffron); }
.fq-tab.is-active::after { transform: scaleX(1); }
.fq-list { list-style: none; }
.fq-item { border-bottom: 1px solid var(--border-subtle); }
.fq-btn { width: 100%; display: flex; align-items: center; gap: 1.4rem; padding: 1.5em 0; text-align: start; }
.fq-no { flex: none; width: 2.2rem; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: var(--text-muted); transition: color var(--trans-fast); }
.fq-qtext { flex: 1; font-family: var(--font-heading); font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; color: var(--text-primary); transition: color var(--trans-fast); }
.fq-btn:hover .fq-qtext, .fq-item.is-open .fq-qtext, .fq-item.is-open .fq-no { color: var(--color-saffron); }
.fq-icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-brass); transition: background 0.4s ease, border-color 0.4s ease; }
.fq-icon::before, .fq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: var(--color-saffron); transition: transform 0.45s var(--ease-smooth), background 0.3s ease; }
.fq-icon::after { transform: rotate(90deg); }
.fq-item.is-open .fq-icon { background: var(--color-saffron); border-color: var(--color-saffron); }
.fq-item.is-open .fq-icon::before, .fq-item.is-open .fq-icon::after { background: #fff; }
.fq-item.is-open .fq-icon::after { transform: rotate(0deg); }
.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-smooth); }
.fq-item.is-open .fq-a { grid-template-rows: 1fr; }
.fq-a-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.55s; }
.fq-item.is-open .fq-a-in { visibility: visible; transition-delay: 0s; }
.fq-a-in p { padding: 0 3.5rem 1.8em 3.6rem; font-size: 0.96rem; line-height: 1.8; color: var(--text-secondary); }

/* ==========================================================================
   Tablet (<=1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .mt-head, .pj-head { margin-bottom: 3.6em; }
  .mt-row { grid-template-columns: 1fr; gap: 4em; max-width: 760px; }
  .mt-tier { flex-direction: row; align-items: center; gap: 2.8em; text-align: start; }
  .mt-tier:nth-child(n) { margin-top: 0; }
  .mt-tier:nth-child(even) { flex-direction: row-reverse; }
  .mt-arch { flex: 0 0 min(42%, 280px); }
  .mt-body { align-items: flex-start; padding-top: 0; }
  .mt-desc { max-width: none; }
  .mt-perks { max-width: none; }
  .mt-note { margin-top: 4em; }
  .pj-trail { --pj-size: 140px; --pj-gap: 1.6em; --pj-text-gap: 3em; }
  .pj-marker { width: 66px; height: 66px; margin: -33px 0 0 -33px; }
  .fq-layout { grid-template-columns: 1fr; gap: 3.6em; }
  .fq-side { position: static; display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto 1fr; column-gap: 2.6em; align-items: start; }
  .fq-copy { grid-column: 1; grid-row: 1; }
  .fq-host { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; width: 100%; }
  .fq-contact { grid-column: 1; grid-row: 2; align-self: start; margin-top: 2.4em; }
}

/* ==========================================================================
   Mobile (<=767px)
   ========================================================================== */
@media (max-width: 767px) {
  .mt-row { gap: 4em; }
  .mt-tier, .mt-tier:nth-child(even) { flex-direction: column; text-align: center; gap: 1.6em; }
  .mt-arch { flex: none; width: min(78%, 300px); }
  .mt-body { align-items: center; }
  .mt-perks { max-width: 340px; }
  .mt-rate b { font-size: 2.3rem; }
  .pj-trail { --pj-size: 92px; --pj-gap: 0; }
  .pj-stop { grid-template-columns: auto minmax(0, 1fr); gap: 1.4em; padding: 1.8em 0; }
  .pj-stop:nth-child(n) .pj-node { order: 0; justify-self: start; margin: 0; padding: 5px; }
  .pj-stop:nth-child(n) .pj-text { justify-self: start; text-align: start; padding: 0; }
  .pj-stop:nth-child(n) .pj-pts { justify-content: flex-start; }
  .pj-pts b { font-size: 2rem; }
  .pj-name { font-size: 1.1rem; }
  .pj-marker { width: 56px; height: 56px; margin: -28px 0 0 -28px; box-shadow: 0 0 0 4px var(--bg-warm-tint), 0 10px 22px -6px rgba(150, 70, 30, 0.55); }
  .pj-count { font-size: 0.95rem; }
  .pj-marker small { font-size: 0.44rem; }
  .pj-foot { margin-top: 2.4em; }
  .fq-side { display: flex; }
  .fq-host { width: min(86%, 300px); margin-top: 2.4em; }
  .fq-contact { margin-top: 2.6em; }
  .fq-tabs { gap: 0 1.4em; }
  .fq-no { width: 1.8rem; }
  .fq-btn { gap: 1rem; }
  .fq-a-in p { padding: 0 0 1.6em 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-arch, .mt-arch-photo img, .pj-node, .pj-node img, .pj-marker, .fq-a, .fq-icon::before, .fq-icon::after, .fq-tab::after { transition: none; }
}

/* ==========================================================================
   22. OUR STORY — oval portraits + heritage ledger
   ========================================================================== */
.os-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-atelier); }
.os-section::before { content: ""; position: absolute; z-index: -1; top: -12%; inset-inline-start: -12%; width: 52vw; height: 52vw; max-width: 720px; max-height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 104, 40, 0.09), transparent 68%); pointer-events: none; }
.os-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 5em; align-items: center; }
.os-title { margin-bottom: 0.9em; }
.os-lead { max-width: 52ch; margin-bottom: 1.2em; font-size: 1.12rem; font-weight: 500; line-height: 1.75; color: var(--text-primary); }
.os-body { max-width: 56ch; font-size: 14px; line-height: 1.85; color: var(--text-secondary); }
.os-sign { display: flex; flex-direction: column; gap: 0.25em; width: fit-content; min-width: 220px; margin-top: 2.2em; padding-top: 1.4em; border-top: 1px solid var(--border-subtle); }
.os-sign-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; font-style: italic; color: var(--text-primary); }
.os-sign-role { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-saffron); }
.os-visual { position: relative; width: min(100%, 520px); margin-inline: auto; aspect-ratio: 1 / 1.14; }
.os-ring { position: absolute; top: -16px; inset-inline-end: 16px; width: 76%; aspect-ratio: 4 / 5; border-radius: 50%; border: 1px solid var(--color-amber-gold); opacity: 0.8; pointer-events: none; }
.os-oval { position: absolute; margin: 0; overflow: hidden; border-radius: 50%; background: var(--bg-warm-tint); }
.os-oval img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.os-oval--main { top: 0; inset-inline-end: 0; width: 76%; aspect-ratio: 4 / 5; box-shadow: var(--shadow-floating); }
.os-oval--small { bottom: 0; inset-inline-start: 0; width: 46%; aspect-ratio: 4 / 5; box-shadow: 0 0 0 8px var(--bg-atelier), var(--shadow-floating); }
.os-est { position: absolute; bottom: 9%; inset-inline-end: -2%; padding: 0.75em 1.5em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-glass); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-primary); }
.os-facts { display: flex; margin-top: 5em; padding-top: 2.6em; border-top: 1px solid var(--border-subtle); }
.os-fact { flex: 1; padding-inline: 2em; border-inline-start: 1px solid var(--border-subtle); }
.os-fact:first-child { padding-inline-start: 0; border-inline-start: 0; }
.os-fact b { display: block; font-family: var(--font-heading); font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary); }
.os-fact span { display: block; margin-top: 0.9em; font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.os-ledger { list-style: none; margin-top: 5em; }
.os-row { display: grid; grid-template-columns: minmax(150px, 280px) minmax(0, 1fr); align-items: center; gap: 2em; padding: 2em 0; border-top: 1px solid var(--border-subtle); }
.os-row:last-child { border-bottom: 1px solid var(--border-subtle); }
.os-year { font-family: var(--font-heading); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(195, 147, 60, 0.75); transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease; }
.os-row:hover .os-year { color: var(--color-saffron); -webkit-text-stroke-color: var(--color-saffron); }
.os-row h3 { margin-bottom: 0.45em; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); }
.os-row p { max-width: 60ch; font-size: 0.95rem; line-height: 1.75; color: var(--text-secondary); }

/* ==========================================================================
   23. OUR PHILOSOPHY — scroll-lit manifesto
   ========================================================================== */
.ph-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); text-align: center; color: #f8f2eb; background: #120d0a; }
.ph-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ph-bg img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; filter: brightness(0.72) saturate(1.05); }
.ph-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 12, 9, 0.9) 0%, rgba(18, 12, 9, 0.72) 45%, rgba(18, 12, 9, 0.92) 100%), radial-gradient(circle at 50% 40%, rgba(200, 104, 40, 0.28), transparent 60%); }
.ph-head { max-width: 760px; margin: 0 auto 3.4em; }
.ph-head .sec-eyebrow { justify-content: center; color: #e2b35a; }
.ph-head .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.ph-head .sec-title { color: #fbf7f0; }
.ph-head .sec-title em { color: #e2b35a; }
.ph-manifest { max-width: 880px; margin: 0 auto 2em; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.8vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; color: #fbf7f0; }
.ph-manifest .wd { display: inline-block; }
.ph-pillars { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; margin-inline: auto; text-align: start; }
.ph-pillar { padding: 0.4em 2.6em; }
.ph-pillar:first-child { padding-inline-start: 0; }
.ph-pillar:last-child { padding-inline-end: 0; }
.ph-pillar + .ph-pillar { border-inline-start: 1px solid rgba(226, 179, 90, 0.28); }
.ph-num { display: block; margin-bottom: 0.3em; font-family: var(--font-heading); font-size: 3.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(226, 179, 90, 0.7); }
.ph-icon { display: block; width: 30px; height: 30px; margin-bottom: 1em; color: #e2b35a; }
.ph-pillar h3 { margin-bottom: 0.6em; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.015em; color: #fbf7f0; }
.ph-pillar p { font-size: 0.94rem; line-height: 1.75; color: rgba(248, 242, 235, 0.74); }

/* ==========================================================================
   24. THE ART OF BREWING — three rituals
   ========================================================================== */
.br-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-warm-tint); }
.br-head { max-width: 720px; margin: 0 auto 5em; text-align: center; }
.br-head .sec-eyebrow { justify-content: center; }
.br-head .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.br-head .sec-lead { max-width: 540px; margin: 1.2em auto 0; }
.br-methods { list-style: none; display: flex; flex-direction: column; gap: 6em; max-width: 1180px; margin-inline: auto; }
.br-method { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 5em; align-items: center; }
.br-method:nth-child(even) .br-stage { order: 2; }
.br-stage { position: relative; width: 100%; max-width: 600px; margin-inline: auto; }
.br-orbit { position: absolute; inset: -4% -6%; border-radius: 50%; border: 1px solid var(--border-brass); transform: rotate(-8deg); pointer-events: none; }
.br-tray { position: relative; margin: 0; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 50%; background: var(--bg-surface); box-shadow: var(--shadow-floating); }
.br-tray img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.br-chip { position: absolute; bottom: 6%; inset-inline-end: 2%; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.75em 1.3em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-glass); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-primary); }
.br-chip svg { width: 16px; height: 16px; color: var(--color-saffron); }
.br-no { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-saffron); }
.br-name { margin: 0.3em 0 0.2em; font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--text-primary); }
.br-tag { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 500; font-style: italic; color: var(--color-saffron); }
.br-desc { max-width: 46ch; margin: 1em 0 1.8em; font-size: 0.96rem; line-height: 1.8; color: var(--text-secondary); }
.br-read { display: flex; margin: 0 0 1.8em; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.br-read > div { flex: 1; padding: 1.2em 1.2em; border-inline-start: 1px solid var(--border-subtle); }
.br-read > div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.br-read dt { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.br-read dd { display: flex; align-items: baseline; gap: 0.25em; margin-top: 0.4em; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.br-read dd b { font-size: 1.9rem; line-height: 1; }
.br-read dd span { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.br-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em 0.9em; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.br-steps li + li::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-inline-end: 0.9em; vertical-align: middle; background: var(--color-amber-gold); }
.br-mark { margin-top: 6em; overflow: hidden; white-space: nowrap; direction: ltr; user-select: none; }
.br-mark-track { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-heading); font-size: clamp(4rem, 5vw, 9rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: transparent; -webkit-text-stroke: 1px rgba(195, 147, 60, 0.6); will-change: transform; }
.br-mark-track i { flex: none; width: 0.14em; height: 0.14em; margin-inline: 0.2em; border-radius: 50%; background: var(--color-saffron); }
.br-close { display: flex; flex-direction: column; align-items: center; gap: 1.4em; margin-top: 3.4em; text-align: center; }
.br-close-line { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-primary); }
.br-close-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.2em 2.2em; }
.br-cta { height: 54px; padding: 0 1.8em; font-size: 0.92rem; }
.br-hours { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }

/* ==========================================================================
   Tablet (<=1024px): side padding 2.5em
   ========================================================================== */
@media (max-width: 1024px) {
  .os-top { grid-template-columns: 1fr; gap: 3.6em; }
  .os-visual { order: -1; width: min(100%, 440px); }
  .os-facts, .os-ledger { margin-top: 4em; }
  .os-fact { padding-inline: 1.4em; }
  .os-row { grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); }
  .ph-head { margin-bottom: 3em; }
  .ph-manifest { margin-bottom: 4em; }
  .ph-pillars { grid-template-columns: 1fr; max-width: 620px; }
  .ph-pillar, .ph-pillar:first-child, .ph-pillar:last-child { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 1.6em; padding: 2.2em 0; }
  .ph-pillar + .ph-pillar { border-inline-start: 0; border-top: 1px solid rgba(226, 179, 90, 0.28); }
  .ph-num { margin: 0; font-size: 3rem; }
  .br-head { margin-bottom: 4em; }
  .br-methods { gap: 5em; }
  .br-method { grid-template-columns: 1fr; gap: 3.4em; }
  .br-method:nth-child(even) .br-stage { order: 0; }
  .br-stage { max-width: 520px; }
  .br-info { width: 100%; max-width: 620px; margin-inline: auto; }
  .br-mark { margin-top: 5em; }
}

/* ==========================================================================
   Mobile (<=767px): side padding 1.5em
   ========================================================================== */
@media (max-width: 767px) {
  .os-visual { width: min(92%, 360px); }
  .os-lead { font-size: 1.02rem; }
  .os-est { padding: 0.6em 1.1em; font-size: 0.64rem; }
  .os-fact { padding-inline: 0.9em; }
  .os-fact span { font-size: 0.58rem; letter-spacing: 0.1em; }
  .os-row { grid-template-columns: 1fr; gap: 0.5em; padding: 1.6em 0; }
  .ph-manifest { font-size: 1.35rem; }
  .ph-pillar, .ph-pillar:first-child, .ph-pillar:last-child { grid-template-columns: 64px minmax(0, 1fr); column-gap: 1.1em; }
  .ph-num { font-size: 2.2rem; }
  .br-methods { gap: 4.5em; }
  .br-orbit { inset: -3% -4%; }
  .br-chip { padding: 0.6em 1.1em; font-size: 0.64rem; }
  .br-read > div { padding: 1em 0.8em; }
  .br-read dd b { font-size: 1.5rem; }
  .br-steps { font-size: 0.7rem; }
  .br-mark { margin-top: 4.5em; }
  .br-close-actions { flex-direction: column; width: 100%; gap: 1.4em; }
  .br-cta { width: 100%; justify-content: center; }
}

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

/* ==========================================================================
   25. OUR INGREDIENTS — floating specimens
   ========================================================================== */
.ig-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-atelier); }
.ig-section::before { content: ""; position: absolute; z-index: -1; top: 40%; left: 50%; width: 80vw; height: 34vw; max-width: 1100px; max-height: 480px; transform: translate(-50%, -20%); border-radius: 50%; background: radial-gradient(ellipse, rgba(200, 104, 40, 0.1), transparent 66%); pointer-events: none; }
.ig-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4em; align-items: end; margin-bottom: 5em; }
.ig-lead { max-width: 460px; justify-self: end; }
.ig-row { list-style: none; display: flex; gap: 2.5em; max-width: 1240px; margin-inline: auto; }
.ig-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ig-item:nth-child(1) { margin-top: 2.5em; }
.ig-item:nth-child(2) { margin-top: 0; }
.ig-item:nth-child(3) { margin-top: 3.5em; }
.ig-item:nth-child(4) { margin-top: 0.5em; }
.ig-item:nth-child(5) { margin-top: 3em; }
.ig-pic { position: relative; width: 100%; max-width: 230px; aspect-ratio: 1; margin-bottom: 1.8em; }
.ig-float { position: relative; z-index: 1; width: 100%; height: 100%; }
.ig-float img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(40, 28, 18, 0.22)); transition: transform 0.9s var(--ease-smooth); }
.ig-item:hover .ig-float img { transform: translateY(-8px) rotate(-3deg) scale(1.05); }
.ig-ground { position: absolute; bottom: -2%; left: 50%; width: 56%; height: 16px; margin-left: -28%; border-radius: 50%; background: radial-gradient(ellipse, rgba(40, 28, 18, 0.3), transparent 70%); filter: blur(3px); }
.ig-no { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; color: var(--text-muted); }
.ig-name { margin: 0.35em 0 0.2em; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); }
.ig-origin { font-family: var(--font-heading); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-saffron); }
.ig-note { max-width: 24ch; margin-top: 0.9em; font-size: 0.88rem; line-height: 1.65; color: var(--text-secondary); }
.ig-source { display: flex; align-items: center; justify-content: center; gap: 1.2em; margin-top: 5em; text-align: center; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.ig-source::before, .ig-source::after { content: ""; flex: none; width: 60px; height: 1px; background: var(--border-brass); }

/* ==========================================================================
   26. WHAT MAKES US SPECIAL — panorama + comparison
   ========================================================================== */
.sp-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-warm-tint); }
.sp-head { max-width: 720px; margin: 0 auto 4em; text-align: center; }
.sp-head .sec-eyebrow { justify-content: center; }
.sp-head .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.sp-head .sec-lead { max-width: 540px; margin: 1.2em auto 0; }
.sp-panorama { position: relative; max-width: 1180px; aspect-ratio: 21 / 8; margin: 0 auto; overflow: hidden; border-radius: 999px; background: var(--bg-surface); box-shadow: var(--shadow-floating); }
.sp-panorama img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
.sp-panorama::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(18, 12, 9, 0.55)); pointer-events: none; }
.sp-cap { position: absolute; z-index: 1; inset-inline: 0; bottom: 12%; text-align: center; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.sp-compare { max-width: 980px; margin: 5em auto 0; }
.sp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; padding-bottom: 1.1em; border-bottom: 1px solid var(--border-subtle); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.sp-cols span:first-child { color: var(--text-muted); }
.sp-cols span:last-child { color: var(--color-saffron); }
.sp-rows { list-style: none; }
.sp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; align-items: center; padding: 1.6em 0; border-bottom: 1px solid var(--border-subtle); }
.sp-usual { font-size: 1rem; line-height: 1.5; color: var(--text-muted); }
.sp-usual s { --strike: 100%; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / var(--strike) 1.5px; }
.sp-ours { display: flex; align-items: center; gap: 1em; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; color: var(--text-primary); }
.sp-check { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-saffron); color: #fff; }
.sp-check svg { width: 15px; height: 15px; }

/* ==========================================================================
   27. VISIT OUR TEA HOUSE — dusk photo + live hours
   ========================================================================== */
.vt-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); color: #f8f2eb; background: #120d0a; }
.vt-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.vt-bg img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; filter: brightness(0.75) saturate(1.05); }
.vt-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 12, 9, 0.94) 0%, rgba(18, 12, 9, 0.8) 50%, rgba(18, 12, 9, 0.58) 100%), radial-gradient(circle at 82% 50%, rgba(200, 104, 40, 0.3), transparent 55%); }
.vt-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 5em; align-items: center; }
.vt-info .sec-eyebrow { color: #e2b35a; }
.vt-info .sec-title { color: #fbf7f0; }
.vt-info .sec-title em { color: #e2b35a; }
.vt-lead { max-width: 480px; margin-top: 1.2em; font-size: 14px; line-height: 1.75; color: rgba(248, 242, 235, 0.76); }
.vt-contact { list-style: none; display: flex; flex-direction: column; gap: 1.5em; margin: 2.4em 0 2.2em; }
.vt-contact li { display: flex; align-items: center; gap: 1.1em; }
.vt-ico { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(226, 179, 90, 0.5); color: #e2b35a; }
.vt-ico svg { width: 20px; height: 20px; }
.vt-ico--pin::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(226, 179, 90, 0.6); animation: vtPulse 2.6s ease-out infinite; }
@keyframes vtPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
.vt-contact small { display: block; margin-bottom: 0.2em; font-family: var(--font-heading); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(248, 242, 235, 0.55); }
.vt-contact address, .vt-val { font-family: var(--font-heading); font-size:15px; font-style: normal; font-weight: 600; line-height: 1.5; color: #fbf7f0; transition: color 0.25s ease; }
.vt-val:hover { color: #e2b35a; }
.vt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2em 2.2em; }
.vt-cta { height: 54px; padding: 0 1.8em; font-size: 0.92rem; }
.vt-amen { display: flex; flex-wrap: wrap; gap: 0.5em 1.4em; margin-top: 2.4em; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(248, 242, 235, 0.62); }
.vt-amen span { display: inline-flex; align-items: center; gap: 0.7em; }
.vt-amen span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #e2b35a; }
.vt-hours { padding-inline-start: 3.4em; border-inline-start: 1px solid rgba(226, 179, 90, 0.28); }
.vt-hours-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1em; margin-bottom: 1.6em; }
.vt-hours-head h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: #fbf7f0; }
.vt-live { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.5em 1em; border-radius: var(--radius-pill); background: rgba(15, 12, 10, 0.6); border: 1px solid rgba(226, 179, 90, 0.35); font-family: var(--font-heading); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #f8f2eb; }
.vt-live i { width: 8px; height: 8px; border-radius: 50%; background: #689f7f; animation: vtLive 2s infinite; }
.vt-live[data-state="closed"] i { background: #c86828; animation: none; }
@keyframes vtLive { 0% { box-shadow: 0 0 0 0 rgba(104, 159, 127, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(104, 159, 127, 0); } }
.vt-times { list-style: none; }
.vt-time { padding: 1.3em 0; border-top: 1px solid rgba(226, 179, 90, 0.2); transition: opacity 0.5s ease; }
.vt-time:last-child { border-bottom: 1px solid rgba(226, 179, 90, 0.2); }
.vt-times.has-now .vt-time:not(.is-now) { opacity: 0.62; }
.vt-time-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.vt-t-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: #fbf7f0; }
.vt-t-hours { flex: none; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: #e2b35a; }
.vt-now { display: none; margin-inline-start: 0.8em; padding: 0.25em 0.75em; border-radius: var(--radius-pill); background: #e2b35a; color: #17120f; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: middle; }
.vt-time.is-now .vt-now { display: inline-block; }
.vt-time p { margin-top: 0.4em; font-size: 0.9rem; line-height: 1.65; color: rgba(248, 242, 235, 0.7); }
.vt-note { margin-top: 1.8em; font-size: 0.84rem; line-height: 1.7; color: rgba(248, 242, 235, 0.6); }

/* ==========================================================================
   Tablet (<=1024px): side padding 2.5em
   ========================================================================== */
@media (max-width: 1024px) {
  .ig-head { grid-template-columns: 1fr; gap: 1.4em; margin-bottom: 3.6em; }
  .ig-lead { justify-self: start; max-width: 560px; }
  .ig-row { max-width: none; gap: 2em; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--side-padding) * -1); padding: 1em var(--side-padding); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ig-row::-webkit-scrollbar { display: none; }
  .ig-item, .ig-item:nth-child(n) { flex: none; width: min(240px, 46vw); margin-top: 0; scroll-snap-align: center; }
  .ig-source { margin-top: 3.4em; }
  .sp-head { margin-bottom: 3.4em; }
  .sp-panorama { aspect-ratio: 21 / 9; }
  .sp-compare { margin-top: 4em; }
  .sp-cols, .sp-row { gap: 2em; }
  .vt-veil { background: linear-gradient(180deg, rgba(18, 12, 9, 0.92) 0%, rgba(18, 12, 9, 0.82) 60%, rgba(18, 12, 9, 0.7) 100%), radial-gradient(circle at 50% 80%, rgba(200, 104, 40, 0.3), transparent 60%); }
  .vt-layout { grid-template-columns: 1fr; gap: 4em; }
  .vt-hours { padding-inline-start: 0; border-inline-start: 0; padding-top: 3em; border-top: 1px solid rgba(226, 179, 90, 0.28); }
}

/* ==========================================================================
   Mobile (<=767px): side padding 1.5em
   ========================================================================== */
@media (max-width: 767px) {
  .ig-item, .ig-item:nth-child(n) { width: min(210px, 62vw); }
  .ig-source { font-size: 0.62rem; letter-spacing: 0.14em; }
  .ig-source::before, .ig-source::after { width: 28px; }
  .sp-panorama { aspect-ratio: 16 / 9; }
  .sp-cap { bottom: 14%; font-size: 0.6rem; letter-spacing: 0.2em; }
  .sp-cols { display: none; }
  .sp-compare { margin-top: 3em; }
  .sp-row { grid-template-columns: 1fr; gap: 0.6em; padding: 1.4em 0; }
  .sp-usual { font-size: 0.88rem; }
  .sp-ours { font-size: 1.05rem; }
  .vt-actions { flex-direction: column; align-items: stretch; gap: 1.4em; }
  .vt-cta { justify-content: center; }
  .vt-hours-head h3 { font-size: 1.3rem; }
  .vt-time-top { flex-direction: column; gap: 0.3em; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-float img, .vt-time { transition: none; }
  .vt-ico--pin::after, .vt-live i { animation: none; }
}
/* ==========================================================================
   CONTACT PAGE — shared helpers
   ========================================================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.live-tag { --pulse: #4fae7b; display: inline-flex; align-items: center; gap: 0.7em; font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); }
.live-tag[data-state="closed"] { --pulse: #d0694a; }
.live-tag[data-state="closed"] .live-pulse::after { animation: none; }
.ch-section, .wr-section, .mp-section, .dl-section, .ev-section { scroll-margin-top: var(--header-h); }

/* ==========================================================================
   28. CONTACT HERO — leaf photo, circle & rotating seal
   ========================================================================== */
.ch-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding) calc(var(--section-block-padding) + 1.5em); background: var(--bg-atelier); }
.ch-section::before { content: ""; position: absolute; z-index: -1; top: -14%; inset-inline-end: -12%; width: 54vw; height: 54vw; max-width: 740px; max-height: 740px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 104, 40, 0.1), transparent 68%); pointer-events: none; }
.ch-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 5em; align-items: center; }
.ch-title { margin-bottom: 0.7em; }
.ch-lead { max-width: 500px; }
.ch-channels { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 0.9em; margin: 2.4em 0 2.2em; }
.ch-channels li:nth-child(2) { margin-inline-start: 2.4em; }
.ch-channels li:nth-child(3) { margin-inline-start: 4.8em; }
.ch-pill { display: inline-flex; align-items: center; gap: 1.1em; padding: 0.5em 1.9em 0.5em 0.5em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); border: 1px solid var(--border-brass); box-shadow: var(--shadow-subtle); transition: transform 0.45s var(--ease-smooth), box-shadow 0.4s ease, border-color 0.4s ease; }
.ch-pill:hover { transform: translateX(6px); border-color: var(--color-saffron); box-shadow: var(--shadow-floating); }
.ch-pill-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); color: #fff; transition: transform 0.5s var(--ease-smooth); }
.ch-pill:hover .ch-pill-ico { transform: rotate(-12deg) scale(1.06); }
.ch-pill-ico svg { width: 20px; height: 20px; }
.ch-pill-txt { display: flex; flex-direction: column; line-height: 1.25; }
.ch-pill-txt small { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.ch-pill-txt b { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.ch-live-sep { color: var(--color-amber-gold); }
.ch-visual { position: relative; width: min(100%, 520px); justify-self: center; aspect-ratio: 1 / 1.12; }
.ch-leaf { position: absolute; inset: 0 0 0 12%; margin: 0; overflow: hidden; border-radius: 260px 32px 260px 32px; background: var(--bg-warm-tint); box-shadow: var(--shadow-floating); }
.ch-leaf img { width: 100%; height: 100%; object-fit: cover; }
.ch-leaf::after { content: ""; position: absolute; inset: 10px; border-radius: 252px 24px 252px 24px; border: 1px solid rgba(255, 255, 255, 0.55); pointer-events: none; }
.ch-circle { position: absolute; inset-inline-start: 0; bottom: 5%; width: 41%; aspect-ratio: 1; z-index: 2; }
.ch-circle-img { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: 50%; border: 7px solid var(--bg-atelier); background: var(--bg-warm-tint); box-shadow: var(--shadow-floating); }
.ch-circle-img img { width: 100%; height: 100%; object-fit: cover; }
.ch-ring { position: absolute; inset: -13px; border-radius: 50%; border: 1px dashed var(--color-amber-gold); animation: ringSpin 38s linear infinite; pointer-events: none; }
.ch-seal { position: absolute; z-index: 3; top: 5%; inset-inline-end: -3%; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; background: var(--bg-surface-glass); border: 1px solid var(--border-brass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-glass); color: var(--color-saffron); }
.ch-seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: ringSpin 24s linear infinite; }
.ch-seal-ring text { font-family: var(--font-heading); font-size: 8.6px; font-weight: 700; fill: currentColor; }
.ch-seal-cup { width: 30px; height: 30px; }
.ch-wave { position: absolute; inset-inline: 0; bottom: -1px; width: 100%; height: 56px; fill: var(--bg-warm-tint); pointer-events: none; }

/* ==========================================================================
   29. WRITE TO US — capsule photo + underline form
   ========================================================================== */
.wr-section { position: relative; isolation: isolate; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-warm-tint); }
.wr-layout { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 6em; align-items: start; }
.wr-side { position: sticky; top: calc(var(--header-h) + 2rem); }
.wr-visual { position: relative; width: min(100%, 390px); margin-inline: auto; padding-bottom: 3em; }
.wr-capsule { margin: 0; aspect-ratio: 3 / 4.4; overflow: hidden; border-radius: 999px; background: var(--bg-surface); box-shadow: var(--shadow-floating); }
.wr-capsule img { width: 100%; height: 100%; object-fit: cover; }
.wr-orb { position: absolute; z-index: 2; bottom: 4%; inset-inline-end: -14%; width: 46%; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 50%; border: 8px solid var(--bg-warm-tint); background: var(--bg-surface); box-shadow: var(--shadow-floating); }
.wr-orb img { width: 100%; height: 100%; object-fit: cover; }
.wr-badge { position: absolute; z-index: 3; top: 7%; inset-inline-start: -10%; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.7em 1.3em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-glass); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-primary); white-space: nowrap; }
.wr-badge svg { width: 16px; height: 16px; color: var(--color-saffron); }
.wr-head { margin-bottom: 3.2em; }
.wr-lead { max-width: 500px; margin-top: 1.2em; }
.wr-form { display: flex; flex-direction: column; gap: 2.2em; }
.wr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2em; }
.wr-field { position: relative; }
.wr-input { display: block; width: 100%; padding: 1.5em 0 0.6em; font-family: var(--font-body); font-size: 1.02rem; color: var(--text-primary); background: transparent; border: 0; border-bottom: 1px solid var(--border-brass); border-radius: 0; outline: none; transition: border-color 0.3s ease; }
textarea.wr-input { resize: none; line-height: 1.7; }
.wr-field label { position: absolute; inset-inline-start: 0; top: 1.4em; font-size: 1rem; color: var(--text-muted); pointer-events: none; transform-origin: left top; transition: transform 0.4s var(--ease-smooth), color 0.3s ease; }
.wr-field label em { font-style: normal; font-size: 0.8em; opacity: 0.8; }
.wr-input:focus + label, .wr-input:not(:placeholder-shown) + label { transform: translateY(-1.45em) scale(0.78); color: var(--color-saffron); font-weight: 600; }
.wr-line { position: absolute; inset-inline: 0; bottom: 1.45em; height: 2px; background: var(--color-saffron); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-smooth); pointer-events: none; }
.wr-input:focus ~ .wr-line { transform: scaleX(1); }
.wr-input[aria-invalid="true"] { border-bottom-color: #c0492b; }
.wr-err { display: block; min-height: 1.3em; margin-top: 0.5em; font-size: 0.76rem; color: #c0492b; }
.wr-count { position: absolute; inset-inline-end: 0; bottom: 0; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wr-topics { border: 0; padding: 0; min-width: 0; }
.wr-topics legend { margin-bottom: 1em; padding: 0; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-saffron); }
.wr-chips { display: flex; flex-wrap: wrap; gap: 0.6em; }
.wr-chip { position: relative; display: inline-flex; }
.wr-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wr-chip span { display: inline-flex; align-items: center; gap: 0.7em; padding: 0.7em 1.3em; border-radius: var(--radius-pill); border: 1px solid var(--border-brass); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 600; color: var(--text-secondary); transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease; }
.wr-chip span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--color-amber-gold); transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease-smooth); }
.wr-chip:hover span { border-color: var(--color-saffron); color: var(--text-primary); }
.wr-chip input:checked + span { background: var(--color-saffron); border-color: var(--color-saffron); color: #fff; }
.wr-chip input:checked + span::before { background: #fff; border-color: #fff; transform: scale(1.15); }
.wr-chip input:focus-visible + span { outline: 2px solid var(--color-amber-gold); outline-offset: 3px; }
.wr-send-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2em 2em; margin-top: 0.4em; }
.wr-send { height: 54px; padding: 0 1.8em; font-size: 0.92rem; }
.wr-send:disabled { opacity: 0.75; cursor: progress; }
.wr-note { font-size: 0.8rem; color: var(--text-muted); }
.wr-done { display: flex; flex-direction: column; align-items: flex-start; gap: 1em; padding-block: 1em; }
.wr-done-ico { width: 84px; height: 84px; color: var(--color-saffron); }
.wr-done-ico circle, .wr-done-ico path { stroke-dasharray: 240; }
.wr-done-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--text-primary); }
.wr-done p { max-width: 46ch; font-size: 14px; line-height: 1.8; color: var(--text-secondary); }

/* ==========================================================================
   30. FIND THE STALL — pill map + route
   ========================================================================== */
.mp-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-atelier); }
.mp-section::before { content: ""; position: absolute; z-index: -1; bottom: -14%; inset-inline-start: -12%; width: 50vw; height: 50vw; max-width: 680px; max-height: 680px; border-radius: 50%; background: radial-gradient(circle, rgba(195, 147, 60, 0.1), transparent 68%); pointer-events: none; }
.mp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; margin-bottom: 4.5em; }
.mp-lead { max-width: 430px; padding-bottom: 0.6em; }
.mp-stage { display: flex; flex-direction: column; align-items: center; }
.mp-address { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 0.7em; max-width: calc(100% - 2em); margin-bottom: -1.7em; padding: 0.8em 1.6em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-brass); box-shadow: var(--shadow-glass); font-family: var(--font-heading); font-size: 0.84rem; font-style: normal; font-weight: 700; color: var(--text-primary); text-align: center; }
.mp-address svg { flex: none; width: 17px; height: 17px; color: var(--color-saffron); }
.mp-map { position: relative; width: 100%; aspect-ratio: 2.15 / 1; overflow: hidden; border-radius: 999px; background: var(--bg-warm-tint); box-shadow: var(--shadow-floating), 0 0 0 10px var(--bg-atelier), 0 0 0 11px var(--border-brass); }
.mp-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: sepia(0.28) saturate(0.85) contrast(0.96); }
.mp-shield { position: absolute; inset: 0; z-index: 2; display: none; place-items: center; cursor: pointer; background: rgba(25, 21, 18, 0.12); transition: opacity 0.4s ease, visibility 0.4s; }
.mp-shield span { padding: 0.75em 1.5em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-primary); }
.mp-shield.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
@media (hover: none) { .mp-shield { display: grid; } }
.mp-actions { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.8em 1.2em; margin-top: -1.7em; padding-inline: 1em; }
.mp-actions .cta-sculpted-btn { height: 52px; padding: 0 1.7em; }
.mp-copy { display: inline-flex; align-items: center; gap: 0.6em; height: 52px; padding: 0 1.5em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-brass); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 700; color: var(--text-primary); transition: background 0.3s ease, border-color 0.3s ease; }
.mp-copy:hover { border-color: var(--color-saffron); }
.mp-copy.is-copied { background: var(--color-leaf-green); border-color: var(--color-leaf-green); color: #fff; }
.mp-copy svg { width: 16px; height: 16px; }
.mp-ways { position: relative; list-style: none; display: flex; justify-content: space-between; gap: 2em; max-width: 1040px; margin: 6em auto 0; }
.mp-route { --draw: 1; position: absolute; top: 34px; inset-inline: 8%; height: 0; border-top: 2px dashed var(--border-brass); transform: scaleX(var(--draw)); transform-origin: left; pointer-events: none; }
.mp-way { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mp-way-ico { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 1.2em; border-radius: 50%; background: var(--bg-atelier); border: 1px solid var(--border-brass); box-shadow: 0 0 0 8px var(--bg-atelier); color: var(--color-saffron); transition: background 0.4s ease, color 0.4s ease, transform 0.5s var(--ease-smooth); }
.mp-way:hover .mp-way-ico { background: var(--color-saffron); color: #fff; transform: translateY(-5px); }
.mp-way-ico svg { width: 26px; height: 26px; }
.mp-way b { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.mp-way p { max-width: 24ch; margin-top: 0.5em; font-size: 0.86rem; line-height: 1.65; color: var(--text-secondary); }

/* ==========================================================================
   31. OPENING DIAL — sun travelling the day arc
   ========================================================================== */
.dl-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); text-align: center; color: #f8f2eb; background: radial-gradient(ellipse at 50% 0%, rgba(195, 147, 60, 0.14), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(200, 104, 40, 0.14), transparent 50%), #17120f; }
.dl-glow { position: absolute; z-index: -1; left: 50%; top: 52%; width: min(90vw, 900px); aspect-ratio: 1; transform: translate(-50%, -30%); border-radius: 50%; background: radial-gradient(circle, rgba(226, 125, 59, 0.26), transparent 62%); filter: blur(30px); pointer-events: none; }
.dl-head { max-width: 720px; margin: 0 auto; }
.dl-head .sec-eyebrow { justify-content: center; color: #e2b35a; }
.dl-head .sec-eyebrow::after { content: ""; width: 42px; height: 1px; background: currentColor; }
.dl-head .sec-title { color: #fbf7f0; }
.dl-head .sec-title em { color: #e2b35a; }
.dl-lead { max-width: 520px; margin: 1.2em auto 0; color: rgba(248, 242, 235, 0.74); }
.dl-stage { position: relative; width: min(100%, 780px); aspect-ratio: 600 / 340; margin: 4.5em auto 0; direction: ltr; }
.dl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dl-base { fill: none; stroke: rgba(226, 179, 90, 0.32); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.dl-draw { fill: none; stroke: #e2b35a; stroke-width: 3; stroke-linecap: round; }
.dl-tick-dot { fill: #17120f; stroke: rgba(226, 179, 90, 0.6); stroke-width: 1.5; }
.dl-ticks text { font-family: var(--font-heading); font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; fill: rgba(248, 242, 235, 0.62); }
.dl-sun-halo { fill: rgba(226, 179, 90, 0.22); animation: dlHalo 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dl-sun-core { fill: #e2b35a; stroke: #17120f; stroke-width: 3; }
.dl-sun.is-closed { opacity: 0.55; }
.dl-sun.is-closed .dl-sun-halo { animation: none; }
@keyframes dlHalo { 0%, 100% { transform: scale(0.85); opacity: 0.8; } 50% { transform: scale(1.25); opacity: 0.35; } }
.dl-dome { position: absolute; left: 50%; bottom: 8.8%; width: 46.7%; aspect-ratio: 2 / 1; margin: 0; transform: translateX(-50%); overflow: hidden; border-radius: 999px 999px 0 0; background: #241b16; box-shadow: 0 0 0 1px rgba(226, 179, 90, 0.35), 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.dl-dome img { width: 100%; height: 100%; object-fit: cover; }
.dl-readout { display: flex; flex-direction: column; align-items: center; gap: 0.6em; margin-top: 2.2em; }
.dl-live { padding: 0.5em 1.1em; border-radius: var(--radius-pill); background: rgba(15, 12, 10, 0.6); border: 1px solid rgba(226, 179, 90, 0.35); color: #f8f2eb; }
.dl-clock { font-family: var(--font-heading); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #fbf7f0; font-variant-numeric: tabular-nums; }
.dl-closes { font-size: 0.9rem; color: rgba(248, 242, 235, 0.66); }
.dl-services { list-style: none; display: flex;width:100%; margin: 4.5em 0 0; text-align: start; }
.dl-service { flex: 1; padding: 0.4em 2.2em; border-inline-start: 1px solid rgba(226, 179, 90, 0.26); transition: opacity 0.5s ease; }
.dl-service:first-child { padding-inline-start: 0; border-inline-start: 0; }
.dl-service:last-child { padding-inline-end: 0; }
.dl-services.has-now .dl-service:not(.is-now) { opacity: 0.58; }
.dl-service-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 0.9em; }
.dl-service-top b { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.015em; color: #fbf7f0; }
.dl-service-top span { font-family: var(--font-heading); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; color: #e2b35a; }
.dl-now { display: none; padding: 0.25em 0.75em; border-radius: var(--radius-pill); background: #e2b35a; color: #17120f; font-size: 0.58rem; font-style: normal; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.dl-service.is-now .dl-now { display: inline-block; }
.dl-service p { margin-top: 0.6em; font-size: 0.9rem; line-height: 1.7; color: rgba(248, 242, 235, 0.68); }
.dl-batches { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.2em 2em; margin-top: 4em; }
.dl-batches-label { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(248, 242, 235, 0.6); }
.dl-batch-list { list-style: none; display: flex; gap: 0.9em; }
.dl-batch-list li { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; border: 1px solid rgba(226, 179, 90, 0.5); font-family: var(--font-heading); font-size: 0.86rem; font-weight: 800; letter-spacing: 0.04em; color: #f0cb76; transition: background 0.35s ease, color 0.35s ease; }
.dl-batch-list li:hover { background: #e2b35a; color: #17120f; }

/* ==========================================================================
   32. PRIVATE TEA & EVENTS — circle cluster
   ========================================================================== */
.ev-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-block-padding) var(--side-padding); background: var(--bg-atelier); }
.ev-section::before { content: ""; position: absolute; z-index: -1; top: -10%; inset-inline-end: -14%; width: 52vw; height: 52vw; max-width: 720px; max-height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 104, 40, 0.09), transparent 68%); pointer-events: none; }
.ev-layout { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 6em; align-items: center; }
.ev-cluster { position: relative; width: min(100%, 540px); aspect-ratio: 1; justify-self: center; }
.ev-ring { position: absolute; top: -4%; inset-inline-end: -4%; width: 72%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--color-amber-gold); animation: ringSpin 44s linear infinite; pointer-events: none; }
.ev-c { position: absolute; margin: 0; overflow: hidden; border-radius: 50%; background: var(--bg-warm-tint); }
.ev-c img { width: 100%; height: 100%; object-fit: cover; }
.ev-c1 { top: 0; inset-inline-end: 0; width: 66%; aspect-ratio: 1; box-shadow: var(--shadow-floating); }
.ev-c2 { bottom: 6%; inset-inline-start: 0; width: 44%; aspect-ratio: 1; box-shadow: 0 0 0 8px var(--bg-atelier), var(--shadow-floating); }
.ev-c3 { bottom: 0; inset-inline-end: 12%; width: 27%; aspect-ratio: 1; box-shadow: 0 0 0 7px var(--bg-atelier), var(--shadow-floating); }
.ev-tag { position: absolute; z-index: 2; top: 56%; inset-inline-end: 0; padding: 0.7em 1.4em; border-radius: var(--radius-pill); background: var(--bg-surface-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-glass); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary); white-space: nowrap; }
.ev-lead { max-width: 500px; margin-top: 1.2em; }
.ev-list { list-style: none; margin-top: 2.6em; }
.ev-item { display: flex; align-items: flex-start; gap: 1.6em; padding: 1.7em 0; border-top: 1px solid var(--border-subtle); }
.ev-item:last-child { border-bottom: 1px solid var(--border-subtle); }
.ev-no { flex: none; width: 2.4ch; font-family: var(--font-heading); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(195, 147, 60, 0.75); transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease; }
.ev-item:hover .ev-no { color: var(--color-saffron); -webkit-text-stroke-color: var(--color-saffron); }
.ev-item h3 { font-family: var(--font-heading); font-size: 1.28rem; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); }
.ev-item p { max-width: 46ch; margin-top: 0.5em; font-size: 0.93rem; line-height: 1.75; color: var(--text-secondary); }
.ev-link { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 0.9em; font-family: var(--font-heading); font-size: 0.84rem; font-weight: 700; color: var(--color-saffron); }
.ev-link span { transition: transform 0.3s ease; }
.ev-link:hover span { transform: translateX(5px); }

/* ==========================================================================
   33. FOOTER — curved top, newsletter pill, clipped wordmark
   ========================================================================== */
.ft-footer { position: relative; isolation: isolate; overflow: hidden; padding:6em 5em 2em; color: #f8f2eb; background: radial-gradient(ellipse at 50% 0%, rgba(200, 104, 40, 0.2), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(226, 179, 90, 0.08), transparent 50%), #120d0a; }
.ft-arc { position: absolute; top: -1px; left: 0; width: 100%; height: 64px; fill: var(--bg-atelier); pointer-events: none; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 4em; align-items: center; padding-bottom: 1.5em; border-bottom: 1px solid rgba(226, 179, 90, 0.2); }
.ft-big { font-family: var(--font-heading); font-size: clamp(2.4rem, 1vw, 4.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.4; color: #fbf7f0; }
.ft-big .mline { display: block; overflow: hidden; padding-bottom: 0.12em; }
.ft-big .mline-in { display: inline-block; will-change: transform; }
.ft-big em { font-style: italic; font-weight: 500; color: #e2b35a; }
.ft-news-lead { max-width: 380px; margin-bottom: 1.4em; font-size:14px; line-height: 1.7; color: rgba(248, 242, 235, 0.72); }
.ft-news { display: flex; align-items: center; gap: 0.6em; padding: 0.4em 0.4em 0.4em 1.6em; border-radius: var(--radius-pill); border: 1px solid rgba(226, 179, 90, 0.4); background: rgba(255, 255, 255, 0.04); transition: border-color 0.3s ease, background 0.3s ease; }
.ft-news:focus-within { border-color: #e2b35a; background: rgba(255, 255, 255, 0.07); }
.ft-news input { flex: 1; min-width: 0; height: 36px; background: transparent; border: 0; outline: none; font-family: var(--font-body); font-size: 0.94rem; color: #fbf7f0; }
.ft-news input::placeholder { color: rgba(248, 242, 235, 0.5); }
.ft-news button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); color: #fff; transition: transform 0.4s var(--ease-smooth); }
.ft-news button:hover { transform: rotate(-45deg); }
.ft-news button svg { width: 18px; height: 18px; }
.ft-news-msg { min-height: 1.4em; margin-top: 0.9em;font-size: 0.82rem; color: #e2b35a; }
.ft-news-msg.is-error { color: #e98a6b; }
.ft-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 3.4em; padding: 2em 0; }
.ft-logo { display: inline-flex; align-items: center; gap: 0.9em; }
.ft-crest { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #e2b35a; background: rgba(226, 179, 90, 0.08); border: 1px solid rgba(226, 179, 90, 0.3); transition: transform 0.5s var(--ease-smooth); }
.ft-logo:hover .ft-crest { transform: rotate(60deg); }
.ft-crest svg { width: 34px; height: 34px; }
.ft-logo b { display: block; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; letter-spacing: 0.08em; color: #fbf7f0; }
.ft-logo small { display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(248, 242, 235, 0.55); }
.ft-about { max-width: 34ch; margin: 1.4em 0 1.6em; font-size: 0.9rem; line-height: 2; color: rgba(248, 242, 235, 0.68); }
.ft-social { list-style: none; display: flex; gap: 0.7em; }
.ft-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(226, 179, 90, 0.4); color: #e2b35a; transition: background 0.35s ease, color 0.35s ease, transform 0.45s var(--ease-smooth); }
.ft-social a:hover { background: #e2b35a; color: #140e0a; transform: translateY(-4px); }
.ft-social svg { width: 18px; height: 18px; }
.ft-h { margin-top: 3.3em;margin-bottom: 1.3em; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #e2b35a; }
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.75em; }
.ft-col ul a { position: relative; display: inline-block; font-size: 0.92rem; color: rgba(248, 242, 235, 0.74); transition: color 0.25s ease, transform 0.35s var(--ease-smooth); }
.ft-col ul a::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 1px; background: #e2b35a; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-smooth); }
.ft-col ul a:hover { color: #fbf7f0; transform: translateX(4px); }
.ft-col ul a:hover::after { transform: scaleX(1); }
.ft-visit address { margin-bottom: 1em; font-size: 0.92rem; font-style: normal; line-height: 1.75; color: rgba(248, 242, 235, 0.74); }
.ft-line { display: block; margin-bottom: 0.4em; font-family: var(--font-heading); font-size: 0.92rem; font-weight: 600; color: #fbf7f0; transition: color 0.25s ease; }
.ft-line:hover { color: #e2b35a; }
.ft-live { margin-top: 1em; color: #f8f2eb; }
.ft-hours { display: block; margin-top: 0.4em; font-size: 0.82rem; color: rgba(248, 242, 235, 0.6); }
.ft-word { position: relative; margin-top: 0.5em; overflow: hidden; direction: ltr; text-align: center; user-select: none; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 96%); mask-image: linear-gradient(180deg, #000 30%, transparent 96%); }
.ft-word-in { display: block; font-family: var(--font-heading); font-size: clamp(3.4rem, 15vw, 16rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.82; padding-bottom: 0.18em; color: transparent; -webkit-text-stroke: 1px rgba(226, 179, 90, 0.5); white-space: nowrap; will-change: transform; }
.ft-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.2em 2em; padding-top: 1.8em; border-top: 1px solid rgba(226, 179, 90, 0.2); }
.ft-copy { font-size: 0.8rem; color: rgba(248, 242, 235, 0.58); }
.ft-legal { list-style: none; display: flex; gap: 1.6em; margin-inline-start: auto; }
.ft-legal a { font-size: 0.8rem; color: rgba(248, 242, 235, 0.58); transition: color 0.25s ease; }
.ft-legal a:hover { color: #e2b35a; }
.ft-top-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(226, 179, 90, 0.5); color: #e2b35a; transition: background 0.3s ease, color 0.3s ease, transform 0.45s var(--ease-smooth); }
.ft-top-btn:hover { background: #e2b35a; color: #140e0a; transform: translateY(-5px); }
.ft-top-btn svg { width: 18px; height: 18px; }

/* ==========================================================================
   Tablet (<=1024px): side padding 2.5em
   ========================================================================== */
@media (max-width: 1024px) {
  .ch-wrap { grid-template-columns: 1fr; gap: 4.5em; }
  .ft-big {font-size:20px}
  .ch-visual { width: min(440px, 80%); }
  .wr-layout { grid-template-columns: 1fr; gap: 4em; }
  .wr-side { position: static; order: 2; }
  .wr-visual { width: min(100%, 320px); }
  .wr-badge { inset-inline-start: -6%; }
  .mp-head { flex-direction: column; align-items: flex-start; gap: 1.4em; margin-bottom: 4em; }
  .mp-map { aspect-ratio: 16 / 10; }
  .mp-ways { flex-wrap: wrap; row-gap: 3.2em; margin-top: 5em; }
  .mp-way { flex: 1 1 40%; }
  .mp-route { display: none; }
  .ft-footer {padding:3em 3em 3em;}
  .dl-stage { margin-top: 3.6em; }
  .dl-services { flex-direction: column; margin-top: 3.6em; }
  .dl-service, .dl-service:first-child, .dl-service:last-child { padding: 1.6em 0; border-inline-start: 0; border-top: 1px solid rgba(226, 179, 90, 0.26); }
  .dl-service:last-child { border-bottom: 1px solid rgba(226, 179, 90, 0.26); }
  .ev-layout { grid-template-columns: 1fr; gap: 4em; }
  .ev-cluster { width: min(100%, 460px); }
  .ft-top { gap: 2.4em; padding-bottom: 3.4em; grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.8fr); }
  .ft-cols { grid-template-columns: 1fr 1fr; gap: 3em 2.4em; padding: 3.4em 0; }
}

/* ==========================================================================
   Mobile (<=767px): side padding 1.5em
   ========================================================================== */
@media (max-width: 767px) {
  .ch-channels li:nth-child(n) { margin-inline-start: 0; }
  .ch-pill { padding-inline-end: 1.4em; }
  .ch-pill-txt b { font-size: 0.92rem; }
  .ch-visual { width: min(330px, 86%); }
  .ch-leaf { border-radius: 190px 24px 190px 24px; }
  .ch-leaf::after { border-radius: 182px 16px 182px 16px; }
  .ch-seal { width: 92px; height: 92px; inset-inline-end: -7%; }
  .ch-seal-ring text { font-size: 9.2px; }
  .ch-seal-cup { width: 24px; height: 24px; }
  .ch-circle { inset-inline-start: -6%; width: 42%; }
  .ch-wave { height: 38px; }
  .ft-footer {padding:2em 1.5em}
  .wr-head { margin-bottom: 2.4em; }
  .wr-row { grid-template-columns: 1fr; gap: 2.2em; }
  .wr-send-row { flex-direction: column; align-items: stretch; }
  .wr-send { width: 100%; justify-content: center; }
  .wr-visual { width: min(86%, 300px); }
  .wr-orb { inset-inline-end: -10%; }
  .wr-badge { top: 5%; inset-inline-start: -4%; font-size: 0.66rem; padding: 0.6em 1.1em; }
  .mp-head { margin-bottom: 3.6em; }
  .mp-address { font-size: 0.76rem; padding: 0.7em 1.2em; }
  .mp-map { aspect-ratio: 3 / 4.2; box-shadow: var(--shadow-floating), 0 0 0 7px var(--bg-atelier), 0 0 0 8px var(--border-brass); }
  .mp-actions { flex-direction: column; width: 100%; }
  .mp-actions .cta-sculpted-btn, .mp-copy { width: min(100%, 300px); justify-content: center; }
  .mp-ways { position: relative; flex-direction: column; gap: 2.4em; max-width: 420px; margin-top: 4.4em; padding-inline-start: 0; }
  .mp-route { display: block; top: 34px; bottom: 34px; height: auto; inset-inline: auto; inset-inline-start: 34px; border-top: 0; border-inline-start: 2px dashed var(--border-brass); transform: scaleY(var(--draw)); transform-origin: top; }
  .mp-way { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 1.2em; text-align: start; }
  .mp-way-ico { margin-bottom: 0; flex: none; }
  .mp-way b { flex: 1; }
  .mp-way p { flex-basis: 100%; max-width: none; margin-top: 0.7em; padding-inline-start: calc(68px + 1.2em); }
  .dl-stage { margin-top: 3em; }
  .dl-ticks text { font-size: 15px; }
  .dl-batch-list li { width: 58px; height: 58px; font-size: 0.78rem; }
  .ev-ring { display: none; }
  .ev-tag { font-size: 0.58rem; padding: 0.6em 1.1em; }
  .ev-item { gap: 1.1em; }
  .ev-no { font-size: 2rem; }
  .ft-cols { grid-template-columns: 1fr 1fr; gap: 2.6em 1.6em; }
  .ft-visit { grid-column: 1 / -1; }
  .ft-news { padding-inline-start: 1.2em; }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
  .ft-legal { margin-inline-start: 0; }
  .ft-top { gap: 2.4em; padding-bottom: 3.4em; grid-template-columns: 1fr; }
  .ft-top-btn { position: absolute; inset-inline-end: 0; bottom: 0; }
  .ft-bottom { position: relative; padding-bottom: 4em; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-ring, .ch-seal-ring, .ev-ring, .dl-sun-halo { animation: none; }
  .ch-pill, .mp-way-ico, .wr-input, .wr-line, .wr-field label, .ft-social a { transition: none; }
}

/* ==========================================================================
   HERO — COUNTER PLATE (cinematic crossfade slideshow)
   ========================================================================== */
.hz { --hz-dur: 7s; --hz-dir: to right; position: relative; isolation: isolate; overflow: hidden; height: clamp(620px, calc(100svh - var(--header-h) - 42px), 940px); background: #120d0a; color: #fbf7f0; }
.hz-stage, .hz-slide, .hz-scrim, .hz-light { position: absolute; inset: 0; }
.hz-stage { inset: -6% 0; will-change: transform; }
.hz-slide { margin: 0; opacity: 0; transition: opacity 1.8s ease; background: radial-gradient(120% 90% at 70% 40%, #7a3f1c 0%, #2a1b12 55%, #120d0a 100%); }
.hz-slide:nth-child(2) { background: radial-gradient(120% 90% at 35% 45%, #8a5a1c 0%, #2b2012 55%, #120d0a 100%); }
.hz-slide:nth-child(3) { background: radial-gradient(120% 90% at 60% 35%, #6d6a2c 0%, #1f2216 55%, #120d0a 100%); }
.hz-slide:nth-child(4) { background: radial-gradient(120% 90% at 50% 60%, #8b3a22 0%, #26150f 55%, #120d0a 100%); }
.hz-slide.is-active { opacity: 1; z-index: 1; }
.hz-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transform-origin: var(--ox, 55%) var(--oy, 55%); transition: transform 0s 1.9s; }
.hz.is-ready .hz-slide.is-active img { transform: scale(1.1); transition: transform 12s linear; }
.hz-scrim { z-index: 2; pointer-events: none; background: linear-gradient(var(--hz-dir), rgba(18, 12, 8, 0.84) 0%, rgba(18, 12, 8, 0.5) 40%, rgba(18, 12, 8, 0.06) 74%), linear-gradient(to top, rgba(18, 12, 8, 0.72) 0%, transparent 42%); }
.hz-light { z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: 0.5; background: radial-gradient(38% 46% at 74% 22%, rgba(226, 150, 60, 0.38), transparent 70%), radial-gradient(22% 30% at 88% 58%, rgba(232, 190, 110, 0.22), transparent 70%); }
.hz-inner { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2.6em; padding: 0 var(--side-padding) 2.2em; }
.hz-stack { display: grid; }
.hz-text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s 0.5s; }
.hz-text.is-active { opacity: 1; visibility: visible; transition: opacity 0.7s ease 0.35s, visibility 0s; }
.hz-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 6.4vw, 5.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; color: #fbf7f0; max-width: 11em; text-shadow: 0 2px 30px rgba(10, 6, 3, 0.35); }
.hz-title .mline { display: block; overflow: hidden; padding-bottom: 0.1em; }
.hz-title .mline-in { display: inline-block; will-change: transform; }
.hz-sub { font-family: var(--font-body); font-size: 14px; line-height: 1.8; color: rgba(251, 247, 240, 0.86); max-width: 44ch; margin-top: 1.5em; }
.hz-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2em 2em; margin-top: 2.2em; }
.hz .cta-sculpted-btn { height: 52px; padding: 0 1.9em; font-size: 0.9rem; }
.hz-rail { display: flex; align-items: center; gap: 2em; padding-top: 1.4em; border-top: 1px solid rgba(226, 179, 90, 0.3); }
.hz-caption { flex: 1; min-width: 0; font-size: 14px; line-height: 1.6; color: rgba(251, 247, 240, 0.72); }
.hz-bars { display: flex; gap: 0.5em; }
.hz-bar { position: relative; width: 56px; height: 24px; }
.hz-bar::before, .hz-bar i { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 2px; margin-top: -1px; }
.hz-bar::before { background: rgba(251, 247, 240, 0.28); }
.hz-bar i { background: var(--color-amber-gold); transform: scaleX(0); transform-origin: left center; }
.hz.is-ready .hz-bar.is-active i { animation: hzFill var(--hz-dur) linear forwards; }
.hz.is-paused .hz-bar.is-active i { animation-play-state: paused; }
.hz.is-static .hz-bar.is-active i { animation: none; transform: scaleX(1); }
@keyframes hzFill { to { transform: scaleX(1); } }
.hz-ctrls { display: flex; gap: 0.6em; }
.hz-ctrl { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(226, 179, 90, 0.5); color: var(--color-amber-gold); transition: background 0.25s ease, color 0.25s ease; }
.hz-ctrl svg { width: 16px; height: 16px; }
.hz-ctrl:hover { background: var(--color-amber-gold); color: #140e0a; }
@media (max-width: 1024px) { .hz-light { opacity: 0.4; } }
@media (max-width: 767px) {
  .hz { height: clamp(620px, calc(100svh - var(--header-h) - 42px), 780px); }
  .hz-inner { gap: 1.8em; padding-bottom: 1.6em; }
  .hz-title { font-size: clamp(2.2rem, 10.5vw, 2.9rem); }
  .hz-caption { display: none; }
  .hz-rail { justify-content: space-between; }
  .hz-bar { width: 34px; }
  .hz-scrim { background: linear-gradient(to top, rgba(18, 12, 8, 0.9) 0%, rgba(18, 12, 8, 0.55) 48%, rgba(18, 12, 8, 0.18) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hz-slide { transition-duration: 0.4s; }
  .hz.is-ready .hz-slide.is-active img { transform: none; transition: none; }
  .hz-bar.is-active i { animation: none !important; transform: scaleX(1); }
}

/* ==========================================================================
   HOME 2 HERO — CEREMONIAL BAR (arch portrait, seal, live steeping card)
   ========================================================================== */
.cb { --cb-arch-r: 999px 999px 34px 34px; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(660px, calc(100svh - var(--header-h) - 42px), 960px); padding-top: clamp(2.4em, 5vw, 4.2em); background: var(--bg-atelier); color: var(--text-primary); }
.cb-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(46% 56% at 82% 38%, rgba(200, 104, 40, 0.16), transparent 70%), radial-gradient(34% 44% at 6% 92%, rgba(41, 64, 51, 0.1), transparent 70%), linear-gradient(180deg, var(--bg-atelier) 0%, var(--bg-warm-tint) 100%); }
.cb-rings { position: absolute; z-index: -1; top: 50%; inset-inline-end: -8%; width: min(62vw, 780px); aspect-ratio: 1; translate: 0 -50%; border: 1px solid var(--border-brass); border-radius: 50%; pointer-events: none; opacity: 0.75; }
.cb-rings::before, .cb-rings::after { content: ""; position: absolute; border: 1px solid var(--border-brass); border-radius: 50%; }
.cb-rings::before { inset: 11%; }
.cb-rings::after { inset: 22%; border-style: dashed; }

.cb-wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--side-padding); }
.cb-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(2em, 5vw, 5em); align-items: center; padding-block: 1em 3.2em; }

/* copy */
.cb-eyebrow { display: inline-flex; align-items: center; gap: 0.8em; padding: 0.55em 1.1em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); background: var(--bg-surface-glass); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-saffron); }
.cb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-leaf-green); animation: cbPulse 2.2s ease-out infinite; }
@keyframes cbPulse { 0% { box-shadow: 0 0 0 0 rgba(104, 159, 127, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(104, 159, 127, 0); } }
.cb-title { margin-top: 0.4em; font-family: var(--font-heading); font-size: clamp(2.5rem, 5.5vw, 5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; color: var(--text-primary); max-width: 12em; }
.cb-title .mline { display: block; overflow: hidden; padding-bottom: 0.12em; }
.cb-title .mline-in { display: inline-block; will-change: transform; }
.cb-title em { font-style: normal; background: linear-gradient(135deg, var(--color-saffron) 0%, var(--color-kulhad-clay) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cb-sub { margin-top: 1.6em; max-width: 46ch; font-family: var(--font-body); font-size: 15px; line-height: 1.85; color: var(--text-secondary); }
.cb-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2em 2em; margin-top: 2.2em; }
.cb .cta-sculpted-btn { height: 52px; padding: 0 1.9em; font-size: 0.9rem; }
.cb-link { display: inline-flex; align-items: center; gap: 0.8em; font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
.cb-link-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-brass); color: var(--color-saffron); transition: background 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-smooth); }
.cb-link-icon svg { width: 16px; height: 16px; }
.cb-link:hover .cb-link-icon { background: var(--color-saffron); color: #fff; transform: rotate(45deg); }
.cb-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 clamp(1.6em, 4vw, 3.4em); margin-top: 3em; padding-top: 1.5em; border-top: 1px solid var(--border-brass); }
.cb-stats li { display: flex; flex-direction: column; gap: 0.35em; }
.cb-stats b { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); }
.cb-stats li > span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

/* visual */
.cb-visual { position: relative; width: 100%; max-width: 560px; margin-inline-start: auto; aspect-ratio: 5 / 6; }
.cb-par { translate: calc(var(--px, 0) * var(--depth, 0) * 1px) calc(var(--py, 0) * var(--depth, 0) * 1px); will-change: translate; }
.cb-arch-wrap { position: absolute; inset-block: 0; inset-inline: 12% 0; }
.cb-arch-line { position: absolute; inset: -14px; border: 1px solid var(--border-brass); border-radius: 999px 999px 44px 44px; pointer-events: none; }
.cb-arch { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: var(--cb-arch-r); background: radial-gradient(120% 90% at 60% 30%, #8b4a22 0%, #2a1b12 60%, #120d0a 100%); box-shadow: var(--shadow-floating); }
.cb-arch img { width: 100%; height: 100%; object-fit: cover; display: block; scale: 1.08; translate: 0 calc(var(--sy, 0) * 1px); }
.cb-arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 12, 8, 0.38) 0%, transparent 45%); pointer-events: none; }

.cb-seal { position: absolute; top: 5%; inset-inline-start: 0; display: grid; place-items: center; width: 128px; aspect-ratio: 1; border-radius: 50%; background: var(--bg-surface); color: var(--color-saffron); box-shadow: var(--shadow-floating); border: 1px solid var(--border-brass); }
.cb-seal-svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: cbSpin 24s linear infinite; }
.cb-seal-svg text { font-family: var(--font-heading); font-size: 9.4px; font-weight: 700; fill: currentColor; }
.cb-seal-crest { width: 40%; height: 40%; }
@keyframes cbSpin { to { transform: rotate(360deg); } }

.cb-orb { position: absolute; bottom: 9%; inset-inline-start: 0; width: 33%; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 50%; border: 6px solid var(--bg-atelier); background: radial-gradient(100% 100% at 40% 35%, #6d6a2c 0%, #1f2216 100%); box-shadow: var(--shadow-floating); }
.cb-orb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cb-chip { position: absolute; top: 24%; inset-inline-end: -3%; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.65em 1.1em; border-radius: var(--radius-pill); background: var(--color-leaf-green); color: #f8f2eb; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; box-shadow: var(--shadow-floating); animation: cbFloat 6s ease-in-out infinite; }
.cb-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #e2b35a; }

.cb-card { position: absolute; bottom: 4%; inset-inline-end: -2%; display: flex; align-items: center; gap: 1em; min-width: 260px; padding: 0.95em 1.3em 0.95em 0.95em; border-radius: 26px; border: 1px solid var(--border-brass); background: var(--bg-surface-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-glass); animation: cbFloat 7s ease-in-out -2s infinite; }
@keyframes cbFloat { 50% { transform: translateY(-8px); } }
.cb-ringwrap { position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center; }
.cb-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cb-ring circle { fill: none; stroke-width: 3.5; }
.cb-ring-bg { stroke: var(--border-brass); }
.cb-ring-fg { stroke: var(--color-saffron); stroke-linecap: round; stroke-dasharray: 163.36; stroke-dashoffset: 163.36; }
.cb-time { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cb-card-meta { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; transition: opacity 0.35s ease, transform 0.35s ease; }
.cb-card-meta.is-swap { opacity: 0; transform: translateY(6px); }
.cb-card-label { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-saffron); }
.cb-card-meta strong { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.cb-card-meta small { font-size: 0.78rem; color: var(--text-muted); }

/* ribbon */
.cb-ribbon { border-top: 1px solid var(--border-brass); background: var(--bg-surface-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cb-steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.cb-step { display: flex; align-items: center; gap: 1em; padding: 1.5em 1.2em; border-inline-end: 1px solid var(--border-subtle); }
.cb-step:first-child { padding-inline-start: 0; }
.cb-step:last-child { border-inline-end: none; }
.cb-step-no { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-brass); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-saffron); }
.cb-step-txt { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
.cb-step-txt strong { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }
.cb-step-txt small { font-size: 0.78rem; color: var(--text-muted); }

/* entrance (armed by JS so content never stays hidden without it) */
.cb.is-armed .cb-title .mline-in { transform: translateY(112%); }
.cb.is-armed .cb-rise { opacity: 0; transform: translateY(22px); }
.cb.is-armed .cb-arch { clip-path: inset(100% 0 0 0 round 999px 999px 34px 34px); }
.cb.is-armed .cb-arch-line, .cb.is-armed .cb-seal, .cb.is-armed .cb-orb, .cb.is-armed .cb-chip, .cb.is-armed .cb-card, .cb.is-armed .cb-rings, .cb.is-armed .cb-ribbon { opacity: 0; }
.cb.is-ready .cb-title .mline-in { transform: none; transition: transform 1.2s var(--ease-smooth); transition-delay: calc(0.15s + var(--i, 0) * 0.12s); }
.cb.is-ready .cb-rise { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s var(--ease-smooth); transition-delay: calc(var(--d, 0) * 1s); }
.cb.is-ready .cb-arch { clip-path: inset(0 0 0 0 round 999px 999px 34px 34px); transition: clip-path 1.6s var(--ease-smooth) 0.2s; }
.cb.is-ready .cb-arch-line, .cb.is-ready .cb-seal, .cb.is-ready .cb-orb, .cb.is-ready .cb-chip, .cb.is-ready .cb-card, .cb.is-ready .cb-rings, .cb.is-ready .cb-ribbon { opacity: 1; transition: opacity 1s ease 0.9s; }

@media (max-width: 1024px) {
  .cb-grid { grid-template-columns: 1fr; gap: 3.4em; }
  .cb-visual { margin-inline: auto; max-width: 500px; }
  .cb-title { max-width: 14em; }
  .cb-steps { grid-template-columns: repeat(2, 1fr); }
  .cb-step:nth-child(2) { border-inline-end: none; }
  .cb-step:nth-child(3) { padding-inline-start: 0; }
  .cb-step:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
}
@media (max-width: 767px) {
  .cb { padding-top: 1.8em; }
  .cb-title { font-size: clamp(2.2rem, 10.5vw, 2.9rem); }
  .cb-eyebrow { font-size: 0.6rem; letter-spacing: 0.14em; }
  .cb-stats { gap: 0 1.6em; }
  .cb-visual { max-width: 380px; }
  .cb-seal { width: 96px; }
  .cb-card { min-width: 0; inset-inline-end: 0; padding: 0.75em 1em 0.75em 0.75em; }
  .cb-ringwrap { width: 52px; height: 52px; }
  .cb-chip { inset-inline-end: 0; font-size: 0.64rem; }
  .cb-step { padding: 1.1em 0.6em; gap: 0.7em; }
  .cb-step-no { width: 34px; height: 34px; font-size: 0.64rem; }
  .cb-step-txt small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-seal-svg, .cb-chip, .cb-card, .cb-dot { animation: none; }
  .cb.is-armed .cb-title .mline-in, .cb.is-armed .cb-rise { transform: none; }
  .cb.is-ready .cb-arch, .cb.is-ready .cb-title .mline-in, .cb.is-ready .cb-rise { transition-duration: 0.01s; transition-delay: 0s; }
  .cb-par { translate: none; }
}

/* ==========================================================================
   HOME 2 — SIGNATURE BLENDS · ART OF BREWING · EXPLORE MENU
   ========================================================================== */
.hs-sec { position: relative; isolation: isolate; overflow: hidden; padding:5em var(--side-padding) 2em; background: var(--bg-atelier); color: var(--text-primary); }
.hs-sec--warm { background: var(--bg-warm-tint); }
.hs-sec .menu-wrap { position: relative; }
.hs-head { max-width: 740px; }
.hs-head--center { margin-inline: auto; text-align: center; }
.hs-head--center .sec-eyebrow { justify-content: center; }
.hs-sec .mline { display: block; overflow: hidden; padding-bottom: 0.12em; }
.hs-sec .mline-in { display: inline-block; will-change: transform; }
.hs-dash { display: inline-block; width: 34px; height: 1px; background: currentColor; opacity: 0.6; }
.hs-lead { margin-top: 1.4em; max-width: 52ch; font-family: var(--font-body); font-size: 15px; line-height: 1.85; color: var(--text-secondary); }
.hs-head--center .hs-lead { margin-inline: auto; }
.hs-ghost { position: absolute; z-index: -1; top: 2.5%; inset-inline-end: 2%; font-family: var(--font-heading); font-size: clamp(8rem, 24vw, 22rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px var(--border-brass); opacity: 0.55; pointer-events: none; user-select: none; }
.hs-ghost--start { inset-inline-end: auto; inset-inline-start: 36%; }

.hs-link { display: inline-flex; align-items: center; gap: 0.8em; font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: var(--text-primary);margin-bottom: 1em; }
.hs-link-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-brass); color: var(--color-saffron); transition: background 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-smooth); }
.hs-link-icon svg { width: 16px; height: 16px; }
.hs-link:hover .hs-link-icon { background: var(--color-saffron); color: #fff; transform: rotate(45deg); }

/* ---------- A. SIGNATURE CHAI BLENDS — The Kettle Trail ---------- */
.sb-head { margin-bottom: 4em; }
.sb-trail { --sb-row: clamp(440px, 40vw, 520px); position: relative; }
.sb-trail::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%; width: 1px; background: var(--border-brass); }
.sb-trail.is-built::before { display: none; }
.sb-path { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
.sb-path path { fill: none; stroke-linecap: round; }
.sb-path-bg { stroke: var(--border-brass); stroke-width: 1.5; stroke-dasharray: 2 9; }
.sb-path-fg { stroke: var(--color-saffron); stroke-width: 2.5; }

.sb-stop { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: var(--sb-row); }
.sb-stop--2, .sb-stop--4 { flex-direction: row-reverse; }
.sb-node { position: absolute; top: calc(50% - 22px); inset-inline-start: calc(50% - 22px); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-atelier); border: 1.5px solid var(--border-brass); transition: border-color 0.4s ease, background 0.4s ease, transform 0.5s var(--ease-smooth); }
.sb-node i { width: 14px; height: 14px; border-radius: 50%; background: var(--border-brass); transition: background 0.4s ease, transform 0.5s var(--ease-smooth); }
.sb-node.is-lit { border-color: var(--color-saffron); transform: scale(1.08); }
.sb-node.is-lit i { background: var(--color-saffron); }
.sb-node.is-lit::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--color-saffron); opacity: 0; animation: sbPing 2.6s ease-out infinite; }
@keyframes sbPing { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } }

.sb-media { flex: 0 0 43%; display: grid; place-items: center; }
.sb-frame { --r: 50%; position: relative; width: clamp(250px, 29vw, 400px); aspect-ratio: 1; }
.sb-frame--circle { --r: 50%; }
.sb-halo { position: absolute; inset: 0; translate: 7% 7%; border: 1.5px solid var(--color-amber-gold); border-radius: var(--r); opacity: 0.55; pointer-events: none; }
.sb-shape { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: var(--r); background: radial-gradient(120% 90% at 65% 35%, #8a4a22 0%, #2a1b12 60%, #120d0a 100%); box-shadow: var(--shadow-floating); }
.sb-stop--2 .sb-shape { background: radial-gradient(120% 90% at 40% 40%, #a05a5a 0%, #3a1f20 60%, #140c0c 100%); }
.sb-stop--3 .sb-shape { background: radial-gradient(120% 90% at 55% 35%, #5a4a2c 0%, #1f1a12 60%, #0f0c09 100%); }
.sb-stop--4 .sb-shape { background: radial-gradient(120% 90% at 50% 40%, #6d7a3c 0%, #1f2a16 60%, #0e130a 100%); }
.sb-shape img { display: block; width: 100%; height: 112%; margin-top: -6%; object-fit: cover; }
.sb-badge { position: absolute; z-index: 3; top: 4%; inset-inline-end: -2%; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); color: #fff; font-family: var(--font-heading); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.35; text-align: center; text-transform: uppercase; box-shadow: 0 12px 26px -6px rgba(180, 78, 28, 0.55); outline: 5px solid var(--bg-atelier); animation: sbBob 6s ease-in-out infinite; }
@keyframes sbBob { 50% { transform: translateY(-7px) rotate(4deg); } }
.sb-steam { position: absolute; z-index: 3; top: -9%; inset-inline-start: 6%; width: 58px; height: 68px; overflow: visible; }
.sb-steam path { stroke: var(--color-amber-gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 90; stroke-dashoffset: 90; opacity: 0.8; animation: sbSteam 4.2s ease-in-out infinite; }
.sb-steam path:nth-child(2) { animation-delay: 0.5s; }
.sb-steam path:nth-child(3) { animation-delay: 1s; }
@keyframes sbSteam { 0% { stroke-dashoffset: 90; opacity: 0; } 40% { opacity: 0.85; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.sb-body { flex: 0 0 38%; min-width: 0; }
.sb-no { display: block; margin-bottom: 0.15em; font-family: var(--font-heading); font-size: clamp(4rem, 7vw, 6.4rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px var(--color-saffron); opacity: 0.7; }
.sb-origin { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-saffron); }
.sb-name { margin-top: 0.7em; font-family: var(--font-heading); font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: var(--text-primary); }
.sb-desc { margin-top: 1em; max-width: 44ch; font-size: 15px; line-height: 1.8; color: var(--text-secondary); }
.sb-notes { display: flex; flex-wrap: wrap; gap: 0.55em; margin-top: 1.3em; }
.sb-notes li { padding: 0.45em 1.1em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-secondary); }
.sb-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2em 2em; margin-top: 1.9em; padding-top: 1.5em; border-top: 1px solid var(--border-subtle); }
.sb-price { display: flex; flex-direction: column; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.sb-price small { margin-top: 0.5em; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.sb-meter { display: inline-flex; align-items: center; gap: 0.35em; }
.sb-meter i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--border-brass); }
.sb-meter i.on { background: var(--color-saffron); border-color: var(--color-saffron); }
.sb-meter em { margin-inline-start: 0.5em; font-style: normal; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.sb-end { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.4em; margin-top: 2.5em; font-family: var(--font-heading); font-weight: 600; color: var(--text-secondary); }

/* ---------- B. THE ART OF BREWING — Anatomy of the Perfect Cup ---------- */
.ac-sec::before, .ac-sec::after { content: ""; position: absolute; z-index: -1; inset-inline: -8%; height: clamp(34px, 5vw, 64px); background: var(--bg-atelier); pointer-events: none; }
.ac-sec::before { top: -1px; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.ac-sec::after { bottom: -1px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.ac-stage { --ac-gap: clamp(1.6em, 3.4vw, 3.6em); display: grid; grid-template-columns: 1fr minmax(320px, 440px) 1fr; align-items: stretch; gap: 0 var(--ac-gap); margin-top: 4.2em; }
.ac-cup { position: relative; width: 100%; aspect-ratio: 1; }
.ac-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ac-ring circle { fill: none; }
.ac-ring-dash { stroke: var(--border-brass); stroke-width: 1; stroke-dasharray: 2 7; transform-box: view-box; transform-origin: 50% 50%; animation: acSpin 70s linear infinite; }
.ac-ring-track { stroke: var(--border-subtle); stroke-width: 2; }
.ac-arc { stroke: var(--color-saffron); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-box: view-box; transform-origin: 50% 50%; animation: acArc 7s ease-in-out infinite; }
@keyframes acSpin { to { transform: rotate(360deg); } }
@keyframes acArc { 0% { stroke-dashoffset: 100; } 70%, 100% { stroke-dashoffset: 0; } }
.ac-photo { position: absolute; inset: 8%; margin: 0; overflow: hidden; border-radius: 50%; background: radial-gradient(120% 90% at 60% 35%, #8b4a22 0%, #2a1b12 60%, #120d0a 100%); box-shadow: var(--shadow-floating); }
.ac-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-photo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.06); pointer-events: none; }
.ac-pin { position: absolute; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-surface); border: 1.5px solid var(--color-saffron); font-family: var(--font-heading); font-size: 0.74rem; font-weight: 800; color: var(--color-saffron); cursor: pointer; transition: background 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-smooth); }
.ac-pin::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--color-saffron); opacity: 0; }
.ac-pin.is-on { background: var(--color-saffron); color: #fff; transform: scale(1.14); }
.ac-pin.is-on::after { animation: sbPing 2.2s ease-out infinite; }
.ac-pin--1 { top: 17%; inset-inline-start: 9%; }
.ac-pin--2 { bottom: 19%; inset-inline-start: 7%; }
.ac-pin--3 { top: 21%; inset-inline-end: 8%; }
.ac-pin--4 { bottom: 17%; inset-inline-end: 10%; }
.ac-timer { position: absolute; z-index: 3; bottom: -3%; inset-inline-start: calc(50% - 46px); display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--bg-surface); box-shadow: var(--shadow-floating); }
.ac-timer svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); transform: rotate(-90deg); }
.ac-timer circle { fill: none; stroke-width: 3; }
.ac-timer-track { stroke: var(--border-brass); }
.ac-timer-fg { stroke: var(--color-saffron); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: acArc 7s ease-in-out infinite; }
.ac-timer span { display: flex; flex-direction: column; align-items: center; font-family: var(--font-heading); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.ac-timer b { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); }

.ac-side { list-style: none; display: flex; flex-direction: column; justify-content: space-around; gap: 2.5em; padding-block: 3%; }
.ac-side--l { align-items: flex-end; text-align: end; }
.ac-call { position: relative; max-width: 330px; opacity: 0.62; transition: opacity 0.4s ease; outline: none; }
.ac-call.is-on, .ac-call:hover, .ac-call:focus-visible { opacity: 1; }
.ac-call::after { content: ""; position: absolute; top: 0.8em; width: var(--ac-gap); height: 1px; background: var(--border-brass); transition: background 0.4s ease; }
.ac-side--l .ac-call::after { inset-inline-end: calc(var(--ac-gap) * -1); }
.ac-side--r .ac-call::after { inset-inline-start: calc(var(--ac-gap) * -1); }
.ac-call.is-on::after { background: var(--color-saffron); }
.ac-kicker { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-saffron); }
.ac-call h3 { margin-top: 0.8em; font-family: var(--font-heading); font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--text-primary); }
.ac-call p { margin-top: 0.7em; font-size: 14px; line-height: 1.75; color: var(--text-secondary); }
.ac-fig { display: inline-flex; align-items: center; gap: 0.6em; margin-top: 1em; font-family: var(--font-heading); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-primary); }
.ac-fig i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-amber-gold); }

.ac-ratio { max-width: 780px; margin: 5em auto 0; }
.ac-ratio-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: 1.2em; }
.ac-ratio-note { font-size: 0.78rem; color: var(--text-muted); }
.ac-bar { display: flex; gap: 5px; height: 16px; }
.ac-seg { flex: var(--w) 1 0; min-width: 10px; border-radius: 999px; }
.ac-seg--water, .ac-lg--water i { background: var(--color-leaf-green); }
.ac-seg--milk, .ac-lg--milk i { background: var(--color-amber-gold); }
.ac-seg--leaf, .ac-lg--leaf i { background: var(--color-kulhad-clay); }
.ac-seg--spice, .ac-lg--spice i { background: var(--color-saffron); }
.ac-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8em 1.6em; margin-top: 1.3em; }
.ac-legend li { display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.82rem; color: var(--text-secondary); }
.ac-legend li i { width: 11px; height: 11px; border-radius: 50%; }
.ac-legend b { font-family: var(--font-heading); font-weight: 800; color: var(--text-primary); }

/* ---------- C. EXPLORE OUR TEA MENU — The Wave of Plates ---------- */
.tp-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 2.2em 3em; }
.tp-filters { display: flex; flex-wrap: wrap; gap: 0.6em; justify-content: flex-end; }
.tp-chip { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.7em 1.3em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); background: transparent; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.tp-chip:hover { border-color: var(--color-saffron); color: var(--color-saffron); transform: translateY(-2px); }
.tp-chip.is-active { background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -6px rgba(180, 78, 28, 0.5); }
.tp-chip-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(140, 130, 119, 0.16); font-style: normal; font-size: 0.64rem; font-weight: 800; }
.tp-chip.is-active .tp-chip-n { background: rgba(255, 255, 255, 0.24); }

.tp-rail-wrap { margin-top: 1.5em; }
.tp-rail { display: flex; gap: clamp(1.8em, 3.2vw, 3.2em); overflow-x: auto; scroll-snap-type: x proximity; padding: 3em var(--side-padding) 3.6em;scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.tp-rail::-webkit-scrollbar { display: none; }
.tp-rail.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.tp-rail:focus-visible { outline: 2px solid var(--color-saffron); outline-offset: -6px; border-radius: 40px; }
.tp-plate { flex: 0 0 clamp(210px, 19vw, 262px); scroll-snap-align: center; text-align: center; transition: margin-top 0.5s var(--ease-smooth); }
.tp-plate[hidden] { display: none; }
.tp-plate.is-low { margin-top: 3.6em; }
.tp-disc { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(120% 90% at 60% 35%, #8b4a22 0%, #2a1b12 60%, #120d0a 100%); box-shadow: 0 26px 44px -16px rgba(40, 28, 18, 0.42); }
.tp-disc::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--border-brass); transition: inset 0.5s var(--ease-smooth), border-color 0.4s ease; }
.tp-disc::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.42); pointer-events: none; }
.tp-plate:hover .tp-disc::before { inset: -15px; border-color: var(--color-saffron); }
.tp-disc img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform 0.9s var(--ease-smooth); -webkit-user-drag: none; }
.tp-plate:hover .tp-disc img { transform: scale(1.07) rotate(5deg); }
.tp-price { position: absolute; z-index: 2; bottom: 1%; inset-inline-end: -3%; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); color: #fff; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 800; outline: 4px solid var(--bg-atelier); box-shadow: 0 10px 22px -6px rgba(180, 78, 28, 0.55); }
.tp-name { margin-top: 1.7em; font-family: var(--font-heading); font-size: 1.12rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--text-primary); }
.tp-desc { margin: 0.6em auto 0; max-width: 24ch; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); }
.tp-meta { display: inline-flex; align-items: center; gap: 0.7em; margin-top: 1em; font-family: var(--font-heading); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-saffron); }
.tp-meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }

.tp-ctrl { display: flex; align-items: center; gap: 1.6em; margin-top: 0.6em; }
.tp-progress { flex: 1; height: 3px; border-radius: 999px; background: var(--border-brass); overflow: hidden; }
.tp-bar { display: block; height: 100%; border-radius: inherit; background: var(--color-saffron); transform: scaleX(0.1); transform-origin: left center; transition: transform 0.25s ease; }
.tp-count { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tp-arrows { display: flex; gap: 0.6em; }
.tp-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-brass); color: var(--color-saffron); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease; }
.tp-arrow svg { width: 16px; height: 16px; }
.tp-arrow:hover:not(:disabled) { background: var(--color-saffron); color: #fff; }
.tp-arrow:disabled { opacity: 0.35; cursor: default; }

.tp-cta { position: relative; display: flex; align-items: center; gap: clamp(1.4em, 3vw, 3em); margin-top: 7em; padding: 1.5em 1.8em 1.5em clamp(11em, 15vw, 14em); border-radius: 999px; background: linear-gradient(120deg, #1f3328 0%, #294033 55%, #2f4a3a 100%); color: #f8f2eb; box-shadow: var(--shadow-floating); }
.tp-cta-disc { position: absolute; inset-inline-start: 0.5em; top: 50%; translate: 0 -50%; width: clamp(150px, 15vw, 190px); aspect-ratio: 1; margin: -2.2em 0 0; overflow: hidden; border-radius: 50%; border: 6px solid var(--bg-atelier); background: radial-gradient(120% 90% at 50% 40%, #8b4a22 0%, #2a1b12 70%); box-shadow: 0 22px 40px -12px rgba(0, 0, 0, 0.5); }
.tp-cta-disc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tp-cta-copy { flex: 1; min-width: 0; }
.tp-cta-eyebrow { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #e2b35a; }
.tp-cta h3 { margin-top: 0.7em; max-width: 24ch; font-family: var(--font-heading); font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: #fbf7f0; }
.tp-cta-btn { height: 52px; padding: 0 1.9em; font-size: 0.9rem; }

/* ---------- Tablet (<=1024px): side padding 2.5em comes from :root ---------- */
@media (max-width: 1024px) {
  .hs-ghost { font-size: clamp(6rem, 26vw, 12rem); }
  .sb-head { margin-bottom: 3em; }
  .sb-trail::before { inset-inline-start: 14px; }
  .sb-stop, .sb-stop--2, .sb-stop--4 { flex-direction: column; align-items: flex-start; justify-content: flex-start; height: auto; gap: 2.2em; padding: 0 0 4.5em 3.6em; }
  .sb-stop:last-child { padding-bottom: 1em; }
  .sb-node { top: 1.2em; inset-inline-start: 0; width: 28px; height: 28px; }
  .sb-node i { width: 10px; height: 10px; }
  .sb-media { flex: none; width: 100%; display: block; }
  .sb-frame { width: min(76vw, 360px); }
  .sb-body { flex: none; width: 100%; }
  .sb-badge { width: 82px; height: 82px; inset-inline-end: -2%; }

  .ac-stage { display: flex; flex-direction: column; align-items: center; gap: 3.2em; margin-top: 3.4em; }
  .ac-cup { width: min(78vw, 420px); }
  .ac-side { width: 100%; max-width: 640px; align-items: stretch; text-align: start; gap: 0; padding: 0; position: relative; }
  .ac-side--l { align-items: stretch; text-align: start; }
  .ac-call { max-width: none; opacity: 1; padding: 1.5em 0 1.5em 0; border-top: 1px solid var(--border-subtle); }
  .ac-call::after { display: none; }
  .ac-call.is-on h3 { color: var(--color-saffron); }
  .ac-ratio { margin-top: 4em; }

  .tp-head { align-items: flex-start; }
  .tp-filters { justify-content: flex-start; max-width: none; }
  .tp-cta { margin-top: 6.5em; }
}

/* ---------- Mobile (<=767px): side padding 1.5em comes from :root ---------- */
@media (max-width: 767px) {
  .hs-lead { font-size: 14.5px; }
  .sb-head { margin-bottom: 2.6em; }
  .sb-stop, .sb-stop--2, .sb-stop--4 { padding-inline-start: 3em; padding-bottom: 3.8em; gap: 1.8em; }
  .sb-no { font-size: 4.2rem; }
  .sb-foot { gap: 1em 1.4em; }
  .sb-steam { width: 44px; height: 52px; }
  .sb-end { flex-direction: column; gap: 1em; margin-top: 1.6em; }

  .ac-ratio-head { flex-direction: column; gap: 0.3em; }
  .ac-pin { width: 30px; height: 30px; font-size: 0.68rem; }
  .ac-timer { width: 78px; height: 78px; inset-inline-start: calc(50% - 39px); }
  .ac-timer b { font-size: 1.4rem; }
  .ac-legend { justify-content: flex-start; }

  .tp-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1.5em; padding: 0.3em 1.5em; max-width: none; width: calc(100% + 3em); scrollbar-width: none; }
  .tp-filters::-webkit-scrollbar { display: none; }
  .tp-chip { flex: none; }
  .tp-plate { flex-basis: 200px; }
  .tp-plate.is-low { margin-top: 2.6em; }
  .tp-ctrl { flex-wrap: wrap; gap: 1.2em; }
  .tp-progress { order: 1; flex: 1 1 100%; }
  .tp-count { order: 2; }
  .tp-arrows { order: 3; margin-inline-start: auto; }
  .tp-ctrl .hs-link { order: 4; flex: 1 1 100%; }
  .tp-cta { flex-direction: column; align-items: flex-start; margin-top: 7em; padding: 5.6em 1.8em 2em; border-radius: 56px; }
  .tp-cta-disc { position: absolute; top: 0; inset-inline-start: 50%; translate: -50% -50%; margin: 0; width: 150px; }
  .tp-cta h3 { max-width: none; }
  .tp-cta-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-badge, .sb-steam path, .ac-ring-dash, .ac-arc, .ac-timer-fg, .sb-node.is-lit::after, .ac-pin.is-on::after { animation: none; }
  .ac-arc, .ac-timer-fg { stroke-dashoffset: 25; }
  .tp-plate, .tp-disc img, .tp-disc::before { transition: none; }
}

/* ==========================================================================
   HOME 2 — CUSTOMER FAVORITES · A COZY PLACE TO PAUSE · TEA-TIME SNACKS
   (builds on the shared .hs-* helpers)
   ========================================================================== */

/* ---------- A. CUSTOMER FAVORITES — The Favourites Arc ---------- */
.fv-sec::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 48%; width: min(120vw, 1500px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 104, 40, 0.1), transparent 70%); pointer-events: none; }
.fv-arc { position: relative; aspect-ratio: 1000 / 540; margin-top: 3.2em; }
.fv-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fv-path path { fill: none; stroke-linecap: round; }
.fv-path-bg { stroke: var(--border-brass); stroke-width: 1.5; stroke-dasharray: 2 9; }
.fv-path-fg { stroke: var(--color-saffron); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; }

.fv-orb { position: absolute; left: var(--x); top: var(--y); width: var(--w); translate: -50% -50%; }
.fv-disc { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(120% 90% at 60% 35%, #8b4a22 0%, #2a1b12 60%, #120d0a 100%); box-shadow: var(--shadow-floating); }
.fv-orb--1 .fv-disc { background: radial-gradient(120% 90% at 60% 35%, #b07a2a 0%, #3a2312 60%, #120d0a 100%); }
.fv-orb--2 .fv-disc { background: radial-gradient(120% 90% at 40% 40%, #7a5a22 0%, #2b2012 60%, #120d0a 100%); }
.fv-orb--3 .fv-disc { background: radial-gradient(120% 90% at 55% 35%, #a05a3a 0%, #2d1a12 60%, #120d0a 100%); }
.fv-orb--4 .fv-disc { background: radial-gradient(120% 90% at 50% 40%, #a05a5a 0%, #3a1f20 60%, #140c0c 100%); }
.fv-orb--5 .fv-disc { background: radial-gradient(120% 90% at 50% 40%, #6d6a2c 0%, #1f2216 60%, #0e0f0a 100%); }
.fv-disc img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform 0.9s var(--ease-smooth); }
.fv-orb:hover .fv-disc img { transform: scale(1.08); }
.fv-ring { position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed var(--color-amber-gold); opacity: 0.7; animation: fvSpin 46s linear infinite; pointer-events: none; }
.fv-orb--1 .fv-ring { inset: -15px; border-style: solid; opacity: 0.4; }
.fv-orb--1 .fv-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px dashed var(--color-amber-gold); opacity: 0.8; }
@keyframes fvSpin { to { transform: rotate(360deg); } }
.fv-rank { position: absolute; z-index: 2; top: 4%; inset-inline-start: 4%; display: grid; place-items: center; width: clamp(34px, 3.2vw, 48px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); color: #fff; font-family: var(--font-heading); font-size: clamp(0.85rem, 1.2vw, 1.1rem); font-weight: 800; outline: 4px solid var(--bg-atelier); box-shadow: 0 8px 18px -4px rgba(180, 78, 28, 0.5); }
.fv-love { position: absolute; z-index: 2; bottom: 6%; inset-inline-end: -5%; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.5em 0.95em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); background: var(--bg-surface-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; color: var(--text-primary); box-shadow: var(--shadow-glass); }
.fv-love svg { width: 12px; height: 12px; fill: var(--color-saffron); }
.fv-cap { position: absolute; top: 100%; left: 50%; translate: -50% 0; width: max(100%, 190px); padding-top: 1.7em; text-align: center; }
.fv-cap h3 { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--text-primary); }
.fv-orb--1 .fv-cap h3 { font-size: 1.3rem; }
.fv-cap p { margin-top: 0.4em; font-size: 0.8rem; color: var(--text-muted); }

.fv-score { position: absolute; left: 50%; top: 88%; translate: -50% -50%; display: grid; place-items: center; align-content: center; width: clamp(120px, 12.5vw, 160px); aspect-ratio: 1; border-radius: 50%; background: var(--bg-surface); box-shadow: var(--shadow-floating); text-align: center; }
.fv-score svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); transform: rotate(-90deg); }
.fv-score circle { fill: none; stroke-width: 3.5; }
.fv-score-track { stroke: var(--border-brass); }
.fv-score-fg { stroke: var(--color-saffron); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 2; }
.fv-score b { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary); }
.fv-stars { margin-top: 0.25em; font-size: 0.7rem; letter-spacing: 0.15em; color: var(--color-amber-gold); }
.fv-score small { margin-top: 0.3em; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

.fv-voices { position: relative; max-width: 900px; margin: 1.5em auto 0; }
.fv-quote { position: relative; display: grid; padding: clamp(2.2em, 4vw, 3.2em) clamp(2.4em, 6vw, 5em); border: 1px solid var(--border-brass); border-radius: 130px; background: var(--bg-surface); box-shadow: var(--shadow-subtle); text-align: center; }
.fv-quote::before { content: "\201C"; position: absolute; top: -0.12em; inset-inline-start: 50%; translate: -50% 0; font-family: Georgia, serif; font-size: 5.6rem; line-height: 1; color: var(--color-saffron); opacity: 0.35; pointer-events: none; }
.fv-quote::after { content: ""; position: absolute; bottom: -22px; inset-inline-start: calc(50% - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border-brass); box-shadow: 0 16px 0 -4px var(--bg-surface); }
.fv-q { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s 0.6s; }
.fv-q.is-active { opacity: 1; visibility: visible; transition: opacity 0.8s ease 0.25s, visibility 0s; }
.fv-q p { font-family: var(--font-heading); font-size: clamp(1.05rem, 1.7vw, 1.4rem); font-weight: 600; line-height: 1.65; letter-spacing: -0.01em; color: var(--text-primary); }
.fv-q cite { display: inline-flex; flex-direction: column; gap: 0.2em; margin-top: 1.4em; font-style: normal; font-family: var(--font-heading); font-size: 0.86rem; font-weight: 800; color: var(--color-saffron); }
.fv-q cite small { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.fv-dots { display: flex; justify-content: center; gap: 0.9em; margin-top: 3em; }
.fv-dot { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid transparent; background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); opacity: 0.55; filter: grayscale(0.6); cursor: pointer; transition: opacity 0.3s ease, filter 0.3s ease, transform 0.4s var(--ease-smooth), border-color 0.3s ease; }
.fv-dot::before { content: attr(data-i); position: absolute; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; color: #fff; }
.fv-dot img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.fv-dot:hover { opacity: 0.9; }
.fv-dot.is-on { opacity: 1; filter: none; border-color: var(--color-saffron); transform: scale(1.14); box-shadow: 0 0 0 4px var(--bg-atelier); }

/* ---------- B. A COZY PLACE TO PAUSE — Pick Your Hour ---------- */
.cp-glow { position: absolute; z-index: -1; inset: 0; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.cp-glow--m { background: radial-gradient(52% 62% at 76% 42%, rgba(232, 190, 110, 0.5), transparent 70%); }
.cp-glow--a { background: radial-gradient(52% 62% at 76% 42%, rgba(120, 165, 125, 0.3), transparent 70%); }
.cp-glow--e { background: radial-gradient(52% 62% at 76% 42%, rgba(200, 104, 40, 0.38), transparent 70%), radial-gradient(40% 50% at 8% 92%, rgba(95, 55, 85, 0.22), transparent 70%); }
.cp-sec[data-time="morning"] .cp-glow--m, .cp-sec[data-time="afternoon"] .cp-glow--a, .cp-sec[data-time="evening"] .cp-glow--e { opacity: 1; }
.cp-wrap { display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr); gap: clamp(2.5em, 6vw, 6em); align-items: center; }
.cp-dial { position: relative; width: min(100%, 340px); aspect-ratio: 2 / 1; margin-top: 2.6em; direction: ltr; }
.cp-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cp-arc { fill: none; stroke: var(--border-brass); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.cp-mark { position: absolute; translate: -50% -50%; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--color-amber-gold); background: var(--bg-warm-tint); cursor: pointer; transition: transform 0.3s ease, background 0.3s ease; }
.cp-mark::before { content: ""; position: absolute; inset: -10px; }
.cp-mark:hover { transform: scale(1.3); }
.cp-sun { position: absolute; z-index: 2; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe7ab, var(--color-amber-gold)); box-shadow: 0 0 0 7px rgba(226, 179, 90, 0.22), 0 0 40px 12px rgba(226, 150, 60, 0.45); pointer-events: none; transition: background 1s ease, box-shadow 1s ease; }
.cp-sec[data-time="afternoon"] .cp-sun { background: radial-gradient(circle at 35% 35%, #fff2c4, #e2b35a); }
.cp-sec[data-time="evening"] .cp-sun { background: radial-gradient(circle at 35% 35%, #ffc9a0, var(--color-saffron)); box-shadow: 0 0 0 7px rgba(200, 104, 40, 0.22), 0 0 44px 14px rgba(200, 104, 40, 0.5); }
.cp-tabs { display: inline-flex; gap: 0.5em; margin-top: 1.2em; direction: ltr; }
.cp-tab { padding: 0.7em 1.4em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.cp-tab:hover { border-color: var(--color-saffron); color: var(--color-saffron); }
.cp-tab.is-active { background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -6px rgba(180, 78, 28, 0.5); }
.cp-mark.is-on { background: var(--color-saffron); border-color: var(--color-saffron); }
.cp-mood { min-height: 12.5em; margin-top: 2.2em; }
.cp-hours { display: inline-block; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-saffron); }
.cp-mood h3 { margin-top: 0.7em; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-primary); }
.cp-mood p { margin-top: 0.8em; max-width: 46ch; font-size: 15px; line-height: 1.8; color: var(--text-secondary); }
.cp-tags { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 1.2em; }
.cp-tags li { padding: 0.4em 1em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); }
.cp-amen { display: flex; flex-wrap: wrap; gap: 1.2em 2em; margin-top: 1.8em; padding-top: 1.8em; border-top: 1px solid var(--border-brass); }
.cp-amen li { display: inline-flex; align-items: center; gap: 0.8em; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.cp-amen-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-brass); color: var(--color-saffron); }
.cp-amen-ico svg { width: 18px; height: 18px; }
.cp-link { margin-top: 2em; }

.cp-visual { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1 / 1.1; }
.cp-oval { position: absolute; inset-block: 0; inset-inline: 15% 0; margin: 0; overflow: hidden; border-radius: 50%; background: radial-gradient(120% 90% at 60% 30%, #8b4a22 0%, #2a1b12 60%, #120d0a 100%); box-shadow: var(--shadow-floating); }
.cp-oval-ring { position: absolute; inset-block: -14px; inset-inline: calc(15% - 14px) -14px; border: 1px solid var(--color-amber-gold); border-radius: 50%; opacity: 0.55; pointer-events: none; }
.cp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.cp-slide.is-active { opacity: 1; }
.cp-slide img { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.08; }
.cp-oval::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 12, 8, 0.35), transparent 50%); pointer-events: none; }
.cp-orb { position: absolute; z-index: 2; bottom: 5%; inset-inline-start: 0; width: 36%; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 50%; border: 6px solid var(--bg-warm-tint); background: radial-gradient(100% 100% at 40% 35%, #6d6a2c 0%, #1f2216 100%); box-shadow: var(--shadow-floating); }
.cp-blob { position: absolute; z-index: 2; top: 4%; inset-inline-start: 3%; width: 27%; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius:50%; border: 5px solid var(--bg-warm-tint); background: radial-gradient(100% 100% at 50% 40%, #8b4a22 0%, #2a1b12 100%); box-shadow: var(--shadow-floating); }
.cp-orb img, .cp-blob img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.65em 1.15em; border-radius: var(--radius-pill); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; box-shadow: var(--shadow-floating); animation: cpFloat 6.5s ease-in-out infinite; }
.cp-float--1 { top: 46%; inset-inline-end: -2%; background: var(--color-leaf-green); color: #f8f2eb; }
.cp-float--1 i { width: 7px; height: 7px; border-radius: 50%; background: #e2b35a; }
.cp-float--2 { bottom: 5%; inset-inline-end: 6%; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-brass); animation-delay: -2.4s; }
@keyframes cpFloat { 50% { transform: translateY(-8px); } }

/* ---------- C. TEA-TIME SNACKS — The Hanging Lamps ---------- */
.tt-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 2.4em 3em; }
.tt-side { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6em; }
.tt-live { display: inline-flex; align-items: center; gap: 0.8em; padding: 0.8em 1.4em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); background: var(--bg-surface-glass); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.tt-live b { color: var(--color-saffron); font-weight: 800; }
.tt-live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-leaf-green); animation: cbPulse 2.2s ease-out infinite; }
.tt-seal { position: relative; display: grid; place-items: center; flex: none; width: 112px; aspect-ratio: 1; color: var(--color-saffron); }
.tt-seal-svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: sbSpinTT 26s linear infinite; }
.tt-seal-svg text { font-family: var(--font-heading); font-size: 8.6px; font-weight: 700; fill: currentColor; }
.tt-seal-crest { width: 38%; height: 38%; }
@keyframes sbSpinTT { to { transform: rotate(360deg); } }

.tt-lamps { --gap: clamp(1em, 2vw, 2.4em); display: flex; justify-content: space-between; gap: var(--gap); margin-top: 3.6em; }
.tt-lamp { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tt-lamp::before { content: ""; position: absolute; top: 0; inset-inline: calc(var(--gap) / -2); height: 1px; background: var(--border-brass); }
.tt-pendant { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; animation: ttSwing var(--dur, 7s) ease-in-out var(--delay, 0s) infinite alternate; }
.tt-pendant::before { content: ""; position: absolute; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-amber-gold); }
@keyframes ttSwing { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.tt-cable { width: 1px; height: var(--cable, 100px); background: linear-gradient(var(--color-amber-gold), var(--border-brass)); }
.tt-cap { position: relative; z-index: 2; width: 36px; height: 18px; border-radius: 20px 20px 4px 4px; background: linear-gradient(180deg, #c3933c, #8a5f1f); }
.tt-shade { position: relative; width: clamp(130px, 13.4vw, 186px); aspect-ratio: 1; margin: -6px 0 0; overflow: hidden; border-radius: 50%; background: radial-gradient(120% 90% at 60% 35%, #8b4a22 0%, #2a1b12 60%, #120d0a 100%); box-shadow: 0 0 0 5px var(--bg-atelier), 0 0 0 6px var(--border-brass), var(--shadow-floating); transition: box-shadow 0.7s ease, transform 0.7s var(--ease-smooth); }
.tt-shade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tt-lamp:hover .tt-shade { transform: scale(1.05); }
.tt-lamp:hover .tt-pendant { animation-play-state: paused; }
.tt-lamp.is-fresh .tt-shade { box-shadow: 0 0 0 5px var(--bg-atelier), 0 0 0 6px var(--color-amber-gold), 0 0 60px 14px rgba(226, 150, 60, 0.5); }
.tt-info { margin-top: 1.6em; }
.tt-fresh { display: none; margin-bottom: 0.8em; padding: 0.3em 0.9em; border-radius: var(--radius-pill); background: var(--color-saffron); color: #fff; font-family: var(--font-heading); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.tt-lamp.is-fresh .tt-fresh { display: inline-block; }
.tt-name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--text-primary); }
.tt-desc { margin: 0.55em auto 0; max-width: 22ch; font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.tt-foot { display: inline-flex; align-items: center; gap: 0.8em; margin-top: 1em; }
.tt-price { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
.tt-batch { padding: 0.35em 0.85em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-saffron); }
.tt-end { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.4em; margin-top: 4em; font-family: var(--font-heading); font-weight: 600; color: var(--text-secondary); }

/* ---------- Tablet (<=1024px): side padding 2.5em comes from :root ---------- */
@media (max-width: 1024px) {
  .fv-arc { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 3.4em 2.6em; margin-top: 3.2em; }
  .fv-path { display: none; }
  .fv-orb { position: relative; left: auto; top: auto; translate: none; width: clamp(150px, 34vw, 230px); }
  .fv-orb--1 { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; }
  .fv-orb--1 .fv-disc { width: min(62vw, 320px); }
  .fv-orb--3, .fv-orb--5 { margin-top: 2.6em; }
  .fv-orb--2 { order: 1; } .fv-orb--3 { order: 1; } .fv-orb--4 { order: 2; } .fv-orb--5 { order: 2; }
  .fv-cap { position: static; translate: none; width: auto; padding-top: 1.5em; }
  .fv-score { position: relative; order: 3; left: auto; top: auto; translate: none; flex: none; margin-top: 1.4em; width: 140px; }
  .fv-voices { margin-top: 2.2em; }

  .cp-wrap { grid-template-columns: 1fr; gap: 4em; }
  .cp-visual { max-width: 520px; }
  .cp-mood { min-height: 11em; }

  .tt-head { align-items: flex-start; }
  .tt-lamps { flex-wrap: wrap; row-gap: 3.6em; }
  .tt-lamp { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); }
}

/* ---------- Mobile (<=767px): side padding 1.5em comes from :root ---------- */
@media (max-width: 767px) {
  .fv-arc { gap: 2.8em 1.2em; }
  .fv-orb { width: clamp(138px, 40vw, 180px); }
  .fv-orb--1 .fv-disc { width: min(72vw, 280px); }
  .fv-cap h3 { font-size: 0.95rem; }
  .fv-orb--1 .fv-cap h3 { font-size: 1.15rem; }
  .fv-cap p { font-size: 0.74rem; }
  .fv-love { font-size: 0.66rem; padding: 0.4em 0.8em; }
  .fv-quote { border-radius: 52px; padding: 3em 1.8em 2.2em; }
  .fv-dot { width: 46px; height: 46px; }
  .cp-dial { width: min(100%, 300px); }
  .cp-tabs { display: flex; width: 100%; }
  .cp-tab { flex: 1; padding-inline: 0.5em; text-align: center; }
  .cp-mood { min-height: 15em; }
  .cp-amen { gap: 1em 1.4em; }
  .cp-float { font-size: 0.64rem; padding: 0.55em 0.95em; }
  .cp-float--1 { top: 40%; inset-inline-end: 0; }
  .cp-orb { border-width: 4px; }
  .cp-blob { border-width: 4px; }

  .tt-side { width: 100%; justify-content: space-between; }
  .tt-seal { width: 92px; }
  .tt-live { font-size: 0.74rem; padding: 0.7em 1.1em; }
  .tt-lamps { --gap: 1em; row-gap: 3em; margin-top: 3em; }
  .tt-lamp { flex: 0 0 calc((100% - var(--gap)) / 2); }
  .tt-cable { height: calc(var(--cable, 100px) * 0.5); }
  .tt-shade { width: clamp(116px, 34vw, 160px); }
  .tt-end { flex-direction: column; gap: 1em; margin-top: 3em; text-align: center; }
}

/* ── Customer Favorites: fix 2-column layout at very small screens ── */
@media (max-width: 480px) {
  /* Switch from flex-wrap to proper 2-column grid */
  .fv-arc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4em 0.8em;
    align-items: start;
    justify-items: center;
  }
  /* Rank-1 (largest orb) spans full width */
  .fv-orb--1 {
    grid-column: 1 / -1;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .fv-orb--1 .fv-disc { width: min(56vw, 200px); }
  /* All other orbs: fill the half-width column */
  .fv-orb {
    width: 100%;
    max-width: calc(50vw - 1.5em);
  }
  /* Remove the stagger margins that broke even rows */
  .fv-orb--3, .fv-orb--5 { margin-top: 0; }
  /* Restore natural source order (override explicit order values set at 1024px) */
  .fv-orb--2 { order: unset; }
  .fv-orb--3 { order: unset; }
  .fv-orb--4 { order: unset; }
  .fv-orb--5 { order: unset; }
  /* Captions */
  .fv-cap { padding-top: 1.1em; }
  .fv-cap h3 { font-size: 0.82rem; }
  .fv-orb--1 .fv-cap h3 { font-size: 0.98rem; }
  .fv-cap p { font-size: 0.68rem; }
  /* Love badge — pull back inside disc boundary */
  .fv-love {
    font-size: 0.58rem;
    padding: 0.32em 0.55em;
    gap: 0.28em;
    inset-inline-end: -3%;
    bottom: 3%;
  }
  .fv-love svg { width: 9px; height: 9px; }
  /* Rank badge */
  .fv-rank {
    width: clamp(22px, 6.5vw, 32px);
    font-size: clamp(0.65rem, 2vw, 0.85rem);
    outline-width: 2px;
  }
  /* Score disc: span full width */
  .fv-score {
    grid-column: 1 / -1;
    order: unset;
    margin-top: 0.4em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv-ring, .cp-float, .tt-pendant, .tt-seal-svg, .tt-live-dot { animation: none; }
  .cp-slide, .cp-glow, .fv-q, .tt-shade, .fv-disc img { transition-duration: 0.01s; }
}
/* ==========================================================================
   HOME 2 — CUSTOMER STORIES · VISIT OUR TEA HOUSE
   (builds on the shared .hs-* helpers; side and block padding come from :root)
   ========================================================================== */

/* ---------- A. CUSTOMER STORIES — The Leaf Fan ---------- */
.cs-sec::before { content: ""; position: absolute; z-index: -1; inset-inline-start: -10%; top: 52%; width: min(80vw, 980px); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 104, 40, 0.14), transparent 72%); pointer-events: none; }
.cs-wrap { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); grid-template-areas: "fan head" "fan story"; column-gap: 5em; align-items: center; }
.cs-head { grid-area: head; align-self: end; }
.cs-fanwrap { grid-area: fan; }
.cs-storywrap { grid-area: story; align-self: start; }

.cs-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6em 1.1em; margin-top: 1.8em; }
.cs-stars { display: inline-flex; gap: 0.2em; }
.cs-stars svg { width: 15px; height: 15px; fill: var(--color-saffron); }
.cs-rating-t { font-size: 0.82rem; color: var(--text-secondary); }
.cs-rating-t b { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; color: var(--text-primary); }

/* the fan */
.cs-fan { --lw: clamp(120px, 13vw, 190px); --lh: calc(var(--lw) * 1.78); --step: 20deg; position: relative; width: 100%; max-width: 640px; height: calc(var(--lh) * 1.2 + 3.6em); margin-inline: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cs-fan::after { content: ""; position: absolute; z-index: 0; left: 50%; bottom: 0.7em; translate: -50% 0; width: 62%; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 28, 18, 0.26), transparent); filter: blur(5px); pointer-events: none; }
.cs-halo { position: absolute; z-index: 0; left: 50%; bottom: 1.6em; translate: -50% 0; width: min(calc(var(--lh) * 2.3), 112%); aspect-ratio: 2 / 1; border: 1px dashed var(--border-brass); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; }
.cs-halo--2 { width: min(calc(var(--lh) * 1.8), 88%); border-style: solid; opacity: 0.55; }
.cs-drift { position: absolute; z-index: 1; width: clamp(18px, 2.4vw, 30px); fill: var(--color-leaf-green); opacity: 0.8; pointer-events: none; }
.cs-drift--1 { top: 6%; inset-inline-start: 6%; rotate: -24deg; }
.cs-drift--2 { top: 18%; inset-inline-end: 4%; rotate: 32deg; width: clamp(14px, 1.9vw, 24px); opacity: 0.6; }

.cs-leaf { position: absolute; bottom: 1.6em; left: calc(50% - var(--lw) / 2); width: var(--lw); height: var(--lh); padding: 0; z-index: calc(10 - var(--ab, 0)); transform-origin: 50% 100%; transform: rotate(calc(var(--o, 0) * var(--step) * var(--fan, 1))) translateY(calc(var(--on, 0) * -14px)) scale(calc(1 + var(--on, 0) * 0.14)); filter: drop-shadow(0 18px 20px rgba(40, 28, 18, 0.28)); transition: transform 0.95s var(--ease-smooth), opacity 0.3s ease; cursor: pointer; pointer-events: none; }
.cs-fan.is-intro .cs-leaf { transition: none; }
.cs-leaf.is-jump { opacity: 0; transition: opacity 0.2s ease; }
.cs-leaf-in { position: absolute; inset: 0; display: block; transition: transform 0.5s var(--ease-smooth); }
.cs-leaf:not(.is-on):hover .cs-leaf-in { transform: translateY(-10px); }
.cs-leaf-shape { position: absolute; inset: 0; display: block; overflow: hidden; clip-path: url(#csLeafClip); pointer-events: auto; background: radial-gradient(120% 90% at 60% 35%, #8b4a22 0%, #2a1b12 60%, #120d0a 100%); }
.cs-leaf:nth-of-type(2) .cs-leaf-shape { background: radial-gradient(120% 90% at 40% 40%, #7a5a22 0%, #2b2012 60%, #120d0a 100%); }
.cs-leaf:nth-of-type(3) .cs-leaf-shape { background: radial-gradient(120% 90% at 55% 35%, #a05a3a 0%, #2d1a12 60%, #120d0a 100%); }
.cs-leaf:nth-of-type(4) .cs-leaf-shape { background: radial-gradient(120% 90% at 50% 40%, #a05a5a 0%, #3a1f20 60%, #140c0c 100%); }
.cs-leaf:nth-of-type(5) .cs-leaf-shape { background: radial-gradient(120% 90% at 50% 40%, #6d6a2c 0%, #1f2216 60%, #0e0f0a 100%); }
.cs-leaf-shape img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; transform: scale(1.06); transition: transform 1.2s var(--ease-smooth); }
.cs-leaf.is-on .cs-leaf-shape img { transform: scale(1.0); }
.cs-leaf-shape::after { content: ""; position: absolute; inset: 0; background: rgba(23, 18, 15, 0.34); transition: opacity 0.6s ease; }
.cs-leaf.is-on .cs-leaf-shape::after { opacity: 0; }
.cs-leaf-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cs-leaf-line path { fill: none; stroke: var(--color-amber-gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.75; transition: stroke 0.4s ease, stroke-width 0.4s ease; }
.cs-leaf.is-on .cs-leaf-line path { stroke: var(--color-saffron); stroke-width: 2.6; opacity: 1; }
.cs-leaf:focus-visible { outline: none; }
.cs-leaf:focus-visible .cs-leaf-line path { stroke: var(--color-saffron); stroke-width: 3.4; opacity: 1; }

.cs-hub { position: absolute; z-index: 20; left: 50%; bottom: calc(1.6em - 22px); translate: -50% 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-warm-tint); border: 1.5px solid var(--color-amber-gold); box-shadow: var(--shadow-glass); pointer-events: none; }
.cs-hub i { width: 14px; height: 14px; border-radius: 50%; background: var(--color-saffron); }
.cs-hub::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--color-saffron); opacity: 0; animation: csPing 3s ease-out infinite; }
@keyframes csPing { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } }

/* the story */
.cs-stage { display: grid; position: relative; margin-top: 2.6em; }
.cs-story { grid-area: 1 / 1; position: relative; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.cs-story.is-on { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.6s ease 0.1s, visibility 0s; }
.cs-qm { display: block; width: max-content; font-family: var(--font-heading); font-size: clamp(5rem, 8vw, 7rem); font-weight: 800; line-height: 0.7; height: 0.5em; color: transparent; -webkit-text-stroke: 1px var(--color-saffron); opacity: 0.7; user-select: none; }
.cs-story .cs-stars { margin-top: 1.1em; }
.cs-quote { margin-top: 1.1em; max-width: 34em; font-family: var(--font-heading); font-size: clamp(1.25rem, 1.9vw, 1.7rem); font-weight: 600; line-height: 1.5; letter-spacing: -0.012em; color: var(--text-primary); }
.cs-quote em { font-style: normal; color: var(--color-saffron); background: linear-gradient(transparent 82%, rgba(200, 104, 40, 0.22) 0); }
.cs-by { display: flex; align-items: center; gap: 1em; margin-top: 1.8em; }
.cs-by::before { content: ""; flex: none; width: 34px; height: 1px; background: var(--color-saffron); }
.cs-by-t { display: grid; gap: 0.15em; }
.cs-name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.cs-role { font-size: 0.8rem; color: var(--text-muted); }
.cs-order { display: flex; align-items: flex-start; gap: 0.7em; margin-top: 1.5em; padding-top: 1.3em; border-top: 1px solid var(--border-subtle); max-width: 34em; font-size: 0.84rem; color: var(--text-secondary); }
.cs-order svg { flex: none; width: 18px; height: 18px; margin-top: 0.15em; color: var(--color-saffron); }
.cs-order b { font-weight: 700; color: var(--text-primary); }

.cs-ctrl { display: flex; align-items: center; gap: 0.9em; margin-top: 2.4em; max-width: 34em; }
.cs-nav { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-brass); color: var(--color-saffron); transition: background 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-smooth); }
.cs-nav svg { width: 16px; height: 16px; }
.cs-nav:hover { background: var(--color-saffron); color: #fff; transform: scale(1.06); }
.cs-count { flex: none; min-width: 4.6em; margin-inline-start: 0.6em; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; color: var(--text-muted); }
.cs-count b { color: var(--text-primary); font-weight: 800; }
.cs-prog { flex: 1; height: 2px; border-radius: var(--radius-pill); background: var(--border-brass); overflow: hidden; }
.cs-prog i { display: block; width: 100%; height: 100%; background: var(--color-saffron); transform-origin: left center; transform: scaleX(0); }
.cs-foot { margin-top: 2.2em; }

/* ---------- B. VISIT OUR TEA HOUSE — The Kulhad & The Lane ---------- */
.vt-sec::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 60%; width: min(90vw, 1100px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(195, 147, 60, 0.16), transparent 70%); pointer-events: none; }
.vt-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 410px) minmax(0, 1fr); grid-template-areas: "info cup route"; gap: 3.4em; align-items: center; margin-top: 4.2em; }
.vt-cup { grid-area: cup; }
.vt-route { grid-area: route; }

.vt-info .live-pulse { flex: none; }
.vt-live { --pulse: #4fae7b; display: inline-flex; align-items: center; gap: 0.75em; padding: 0.6em 1.15em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;}
.vt-live[data-state="closed"] { --pulse: #d0694a; }
.vt-live[data-state="closed"] .live-pulse::after { animation: none; }
.vt-addr { display: grid; gap: 0.35em; margin-top: 1.8em; font-style: normal; }
.vt-addr-k { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-saffron); }
.vt-addr strong { font-family: var(--font-heading); font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); }
.vt-addr span:last-child { font-size: 0.9rem; color: var(--text-secondary); }

.vt-ledger { list-style: none; margin-top: 1.8em; border-top: 1px solid var(--border-subtle); }
.vt-row { display: flex; align-items: center; gap: 0.9em; padding: 1em 0; border-bottom: 1px solid var(--border-subtle); transition: opacity 0.4s ease; }
.vt-r-name { display: grid; gap: 0.1em; flex: 0 1 auto; min-width: 0; position: relative; }
.vt-r-name b { font-family: var(--font-heading); font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); transition: color 0.3s ease; }
.vt-r-name small { font-size: 0.76rem; color: var(--text-muted); }
.vt-now { display: none; width: max-content; margin-top: 0.35em; padding: 0.15em 0.7em; border-radius: var(--radius-pill); background: var(--color-saffron); color: #fff; font-family: var(--font-heading); font-size: 0.6rem; font-weight: 800; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; }
.vt-row.is-now .vt-now { display: inline-block; }
.vt-row.is-now .vt-r-name b { color: var(--color-saffron); }
.vt-row.is-off { opacity: 0.55; }
.vt-lead { flex: 1; min-width: 1.2em; height: 0; border-bottom: 1.5px dotted var(--border-brass); transform-origin: left center; }
.vt-r-time { flex: none; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.vt-contact { display: flex; flex-wrap: wrap; gap: 1.5em 1.6em; margin-top: 5.5em; font-family: var(--font-heading); font-size: 0.86rem; font-weight: 700; }
.vt-contact a:hover { color: var(--color-saffron); }

/* kulhad */
.vt-cup { position: relative; width: 100%; padding-top: 3.6em; }
.vt-steam { position: absolute; z-index: 4; top: 0; left: 50%; translate: -50% 0; width: 74px; height: 74px; overflow: visible; pointer-events: none; }
.vt-steam path { stroke: var(--color-amber-gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 90; stroke-dashoffset: 90; opacity: 0.8; animation: vtSteam 4.4s ease-in-out infinite; }
.vt-steam path:nth-child(2) { animation-delay: 0.6s; }
.vt-steam path:nth-child(3) { animation-delay: 1.2s; }
@keyframes vtSteam { 0% { stroke-dashoffset: 90; opacity: 0; } 40% { opacity: 0.85; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.vt-kulhad { position: relative; aspect-ratio: 1 / 1.16; filter: drop-shadow(0 28px 28px rgba(40, 28, 18, 0.3)); transform-origin: 50% 90%; }
.vt-kulhad-shape { position: absolute; inset: 0; overflow: hidden; clip-path: url(#vtKulhadClip); background: radial-gradient(120% 90% at 60% 35%, #8b4a22 0%, #2a1b12 60%, #120d0a 100%); }
.vt-kulhad-shape img { display: block; width: 100%; height: 112%; margin-top: -6%; object-fit: cover; }
.vt-pour { position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-amber-gold), var(--color-saffron) 40%, var(--color-kulhad-clay)); transform-origin: 50% 100%; transform: scaleY(0); }
.vt-wave { position: absolute; left: -24px; right: -24px; top: -11px; height: 12px; background: radial-gradient(circle 12px at 12px 12px, var(--color-amber-gold) 11px, transparent 12px) 0 0 / 24px 12px repeat-x; }
.vt-kulhad-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vt-kulhad-line path { fill: none; stroke: var(--color-amber-gold); stroke-width: 1.8; vector-effect: non-scaling-stroke; opacity: 0.85; }
.vt-kulhad-line .vt-rim { stroke: var(--color-saffron); opacity: 0.7; }
.vt-capsule { position: absolute; z-index: 3; inset-inline-start: -6%; bottom: 3%; width: 34%; aspect-ratio: 3 / 4; margin: 0; border-radius: 999px; overflow: hidden; border: 5px solid var(--bg-atelier); background: radial-gradient(120% 90% at 50% 40%, #6d6a2c 0%, #1f2216 60%, #0e0f0a 100%); box-shadow: var(--shadow-floating); }
.vt-capsule img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vt-float { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 0.55em; padding: 0.6em 1.1em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); background: var(--bg-surface-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; box-shadow: var(--shadow-glass); }
.vt-float i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-saffron); }
.vt-float--1 { top: 22%; inset-inline-end: -12%; }
.vt-float--2 { bottom: 10%; inset-inline-end: -10%; }
.vt-shadow { position: absolute; z-index: -1; left: 50%; bottom: -1.2em; translate: -50% 0; width: 66%; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 28, 18, 0.3), transparent); filter: blur(5px); }

/* map */
.vt-mapwrap { --vt-r:50%; position: relative; }
.vt-mapwrap::before { content: ""; position: absolute; inset: 0; translate: -5% 5%; border: 1.5px solid var(--color-amber-gold); border-radius: var(--vt-r); opacity: 0.5; pointer-events: none; }
.vt-map { position: relative; aspect-ratio: 420 / 460; border-radius: var(--vt-r); background: var(--bg-warm-tint); border: 1px solid var(--border-brass); overflow: hidden; box-shadow: var(--shadow-floating); }
.vt-map svg { position: absolute; inset: 0; width: 100%; height: 100%; direction: ltr; }
.vt-park { fill: var(--color-leaf-green); opacity: 0.16; }
.vt-lane { fill: none; stroke: var(--bg-surface); stroke-linecap: round; }
.vt-lane--main { stroke-width: 17; }
.vt-lane--mid { stroke-width: 12; }
.vt-lane--sm { stroke-width: 7; }
.vt-lbl { font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text-muted); }
.vt-lbl--pin { fill: var(--text-primary); font-weight: 800; }
.vt-poi { fill: var(--bg-surface); stroke: var(--border-brass); stroke-width: 1.5; }
.vt-poi-ic { fill: none; stroke: var(--color-saffron); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vt-poi-t { font-family: var(--font-heading); font-size: 11px; font-weight: 800; fill: var(--color-saffron); }
.vt-metro { fill: var(--color-leaf-green); }
.vt-metro-t { font-family: var(--font-heading); font-size: 12px; font-weight: 800; fill: #fff; }
.vt-route-bg { fill: none; stroke: var(--color-amber-gold); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; opacity: 0.6; }
.vt-route-fg { fill: none; stroke: var(--color-saffron); stroke-width: 3.5; stroke-linecap: round; }
.vt-walker { fill: #fff; stroke: var(--color-saffron); stroke-width: 3; opacity: 0; }
.vt-pin-pulse { fill: none; stroke: var(--color-saffron); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: vtPing 2.8s ease-out infinite; }
@keyframes vtPing { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }
.vt-pin-body { fill: var(--color-saffron); }
.vt-pin-dot { fill: #fff; }
.vt-map-chip { position: absolute; z-index: 2; left: 50%; bottom: 9%; translate: -50% 0; padding: 0.55em 1.1em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); background: var(--bg-surface-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; box-shadow: var(--shadow-glass); }

.vt-ways { display: flex; flex-wrap: wrap; gap: 1.2em 1.8em; margin-top: 2.4em; list-style: none; }
.vt-ways li { display: flex; align-items: center; gap: 0.75em; }
.vt-way-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-brass); color: var(--color-saffron); }
.vt-way-ic svg { width: 18px; height: 18px; }
.vt-ways b { display: block; font-family: var(--font-heading); font-size: 0.84rem; font-weight: 800; color: var(--text-primary); }
.vt-ways small { display: block; font-size: 0.74rem; color: var(--text-muted); }
.vt-act { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2em 1.8em; margin-top: 2.2em; }
.vt-btn { display: inline-flex; align-items: center; gap: 1em; padding-block: 0.5em; padding-inline: 1.7em 0.5em; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay)); color: #fff; font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; box-shadow: 0 14px 28px -8px rgba(180, 78, 28, 0.5); transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s ease; }
.vt-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -8px rgba(180, 78, 28, 0.6); }
.vt-btn-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.vt-btn-ic svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-smooth); }
.vt-btn:hover .vt-btn-ic svg { transform: translateX(3px); }

/* ---------- Tablet (<=1024px): side padding 2.5em comes from :root ---------- */
@media (max-width: 1024px) {
  .cs-wrap { grid-template-columns: 1fr; grid-template-areas: "head" "fan" "story"; row-gap: 3.2em; }
  .cs-head { align-self: start; }
  .cs-fan { --lw: clamp(130px, 21vw, 180px); }
  .cs-stage, .cs-ctrl, .cs-quote, .cs-order { max-width: 40em; }
  .cs-stage { margin-top: 0; }

  .vt-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cup cup" "info route"; gap: 4em 2.6em; align-items: start; margin-top: 3.4em; }
  .vt-cup { width: min(100%, 400px); margin-inline: auto; }
  .vt-float--1 { inset-inline-end: -6%; }
  .vt-float--2 { inset-inline-end: -4%; }
}

/* ---------- Mobile (<=767px): side padding 1.5em comes from :root ---------- */
@media (max-width: 767px) {
  .cs-fan { --lw: clamp(112px, 32vw, 150px); --step: 15deg; }
  .cs-quote { font-size: 1.2rem; }
  .cs-ctrl { gap: 0.7em; }
  .cs-count { min-width: 4em; margin-inline-start: 0.2em; }
  .cs-nav { width: 44px; height: 44px; }

  .vt-stage { grid-template-columns: 1fr; grid-template-areas: "cup" "info" "route"; gap: 3.6em; }
  .vt-cup { width: min(100%, 320px); }
  .vt-capsule { inset-inline-start: -6%; }
  .vt-float { font-size: 0.64rem; padding: 0.5em 0.9em; }
  .vt-float--1 { top: 24%; inset-inline-end: -4%; }
  .vt-float--2 { inset-inline-end: -2%; }
  .vt-row { gap: 0.6em; }
  .vt-r-time { font-size: 0.74rem; }
  .vt-ways { flex-direction: column; }
  .vt-act { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hub::after, .vt-steam path, .vt-pin-pulse { animation: none; }
  .vt-steam path { stroke-dashoffset: 0; opacity: 0.5; }
  .cs-leaf, .cs-leaf-in, .cs-leaf-shape img, .cs-story, .vt-btn { transition-duration: 0.01s; }
}

/* ==========================================================================
   HOME 2 — A JOURNEY THROUGH EVERY SIP · MEET THE CHAI COLLECTION · FROM SPICE TO STEAM
   (builds on the shared .hs-* helpers; side and block padding come from :root)
   ========================================================================== */

/* ---------- A. A JOURNEY THROUGH EVERY SIP — The Emptying Glass ---------- */
.sj-sec, .ss-sec { overflow: visible; overflow-x: clip; }
.sj-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) minmax(0, 1fr); column-gap: 4.5em; margin-top: 4em; }
.sj-glasscol { grid-column: 2; grid-row: 1 / span 4; }
.sj-glass { position: sticky; top: calc(var(--header-h) + 3em); max-width: 320px; margin-inline: auto; text-align: center; }
.sj-svg { display: block; width: 100%; height: auto; overflow: visible; --steam: 1; }
.sj-glass-line { fill: none; stroke: var(--color-amber-gold); stroke-width: 2.2; stroke-linejoin: round; }
.sj-gloss { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: 0.28; }
.sj-saucer { fill: none; stroke: var(--color-amber-gold); stroke-width: 1.5; opacity: 0.6; }
.sj-sh { fill: rgba(40, 28, 18, 0.22); filter: blur(3px); }
.sj-steam { opacity: var(--steam); }
.sj-steam path { stroke: var(--color-amber-gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 90; stroke-dashoffset: 90; animation: sjSteam 4.6s ease-in-out infinite; }
.sj-steam path:nth-child(2) { animation-delay: 0.6s; }
.sj-steam path:nth-child(3) { animation-delay: 1.2s; }
@keyframes sjSteam { 0% { stroke-dashoffset: 90; opacity: 0; } 40% { opacity: 0.85; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.sj-meter { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5em 0.7em; margin-top: 1.4em; font-family: var(--font-heading); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.sj-meter b { color: var(--color-saffron); font-size: 1.05rem; letter-spacing: 0; }
.sj-meter em { font-style: normal; color: var(--text-primary); }

.sj-note { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: clamp(340px, 44vh, 430px); padding-block: 1.5em; }
.sj-note--1 { grid-column: 1; grid-row: 1; } .sj-note--2 { grid-column: 3; grid-row: 2; } .sj-note--3 { grid-column: 1; grid-row: 3; } .sj-note--4 { grid-column: 3; grid-row: 4; }
.sj-note::after { content: ""; position: absolute; top: 50%; width: 4.5em; border-top: 1px dashed var(--border-brass); transition: border-color 0.5s ease; }
.sj-note--1::after, .sj-note--3::after { inset-inline-end: -4.5em; }
.sj-note--2::after, .sj-note--4::after { inset-inline-start: -4.5em; }
.sj-note.is-on::after { border-top-color: var(--color-saffron); border-top-style: solid; }
.sj-in { display: flex; flex-direction: column; gap: 1.5em; width: 100%; transition: opacity 0.6s ease; }
.sj-note--1 .sj-in, .sj-note--3 .sj-in { align-items: flex-end; text-align: end; }
.sj-note--2 .sj-in, .sj-note--4 .sj-in { align-items: flex-start; text-align: start; }
.sj-sec.is-live .sj-in { opacity: 0.4; }
.sj-sec.is-live .sj-note.is-on .sj-in { opacity: 1; }

.sj-ph { --r: 50%; position: relative; flex: none; width: clamp(130px, 12.5vw, 176px); aspect-ratio: 1; margin: 0; }
.sj-ph::before { content: ""; position: absolute; inset: 0; translate: 8% 8%; border: 1.5px solid var(--color-amber-gold); border-radius: var(--r); opacity: 0.55; pointer-events: none; }
.sj-ph-in { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: var(--r); background: radial-gradient(120% 90% at 60% 35%, #8b4a22 0%, #2a1b12 60%, #120d0a 100%); box-shadow: var(--shadow-floating); }
.sj-ph-in img { display: block; width: 100%; height: 112%; margin-top: -6%; object-fit: cover; }
.sj-ph--leaf { --r: 50% 0 50% 0; }
.sj-ph--pebble { --r: 58% 42% 38% 62% / 40% 44% 56% 60%; }
.sj-ph--capsule { --r: 999px; aspect-ratio: 3 / 4; width: clamp(104px, 10vw, 138px); }
.sj-no { display: block; font-family: var(--font-heading); font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px var(--color-saffron); opacity: 0.7; }
.sj-name { margin-top: 0.3em; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; color: var(--text-primary); }
.sj-desc { margin-top: 0.8em; max-width: 34ch; font-size: 15px; line-height: 1.8; color: var(--text-secondary); }
.sj-tags { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 1.1em; list-style: none; }
.sj-note--1 .sj-tags, .sj-note--3 .sj-tags { justify-content: flex-end; }
.sj-tags li { padding: 0.42em 1.05em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-secondary); }
.sj-end { margin-top: 3em; text-align: center; }

/* ---------- B. MEET THE CHAI COLLECTION — The Spice Shelf ---------- */
.cl-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 2.5em 4em; }
.cl-head .hs-head { flex: 1 1 520px; }
.cl-side { display: grid; gap: 1.1em; justify-items: start; flex: 0 1 320px; padding-bottom: 0.4em; }
.cl-ship { font-size: 0.84rem; color: var(--text-secondary); }
.cl-ship b { font-family: var(--font-heading); font-weight: 800; color: var(--text-primary); }
.cl-hint { display: none; align-items: center; gap: 0.6em; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); transition: opacity 0.4s ease; }
.cl-hint svg { width: 14px; height: 14px; color: var(--color-saffron); animation: clNudge 1.6s ease-in-out infinite; }
.cl-hint.is-gone { opacity: 0; }
@keyframes clNudge { 50% { transform: translateX(5px); } }

.cl-shelf { --gap: 1.4em; position: relative; margin-top: 4.6em; }
.cl-track { display: flex; align-items: stretch; gap: var(--gap); }
.cl-item { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.cl-jarwrap { position: relative; display: flex; flex: 1; align-items: flex-end; justify-content: center; width: 100%; padding: 2.2em 0 14px; }
.cl-jarwrap::after { content: ""; position: absolute; bottom: 0; left: calc(var(--gap) / -2); right: calc(var(--gap) / -2); height: 14px; border-radius: var(--radius-pill); background: linear-gradient(180deg, #c8a06a, #8a5a30); box-shadow: 0 14px 22px -8px rgba(40, 28, 18, 0.4); transform: scaleX(var(--pl, 1)); }

.cl-jar { position: relative; z-index: 1; width: var(--jw); aspect-ratio: var(--ar); margin-bottom: 4px; filter: drop-shadow(0 16px 16px rgba(40, 28, 18, 0.24)); transition: transform 0.6s var(--ease-smooth); }
.cl-jar--round { --jw: clamp(150px, 15vw, 210px); --ar: 1 / 1.12; }
.cl-jar--flask { --jw: clamp(118px, 11.5vw, 166px); --ar: 1 / 1.62; }
.cl-jar--pot { --jw: clamp(160px, 16vw, 226px); --ar: 1 / 0.98; }
.cl-item:hover .cl-jar, .cl-item:focus-within .cl-jar, .cl-item.is-open .cl-jar { transform: translateY(-12px); }
.cl-body { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 60% 35%, #8b4a22 0%, #2a1b12 60%, #120d0a 100%); }
.cl-jar--round .cl-body { clip-path: url(#clJarRound); }
.cl-jar--flask .cl-body { clip-path: url(#clJarFlask); }
.cl-jar--pot .cl-body { clip-path: url(#clJarPot); }
.cl-body img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-smooth); }
.cl-item:hover .cl-body img, .cl-item.is-open .cl-body img { transform: scale(1.08); }
.cl-gloss { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0.3) 0 12%, transparent 28%, transparent 76%, rgba(255, 255, 255, 0.12) 90%), linear-gradient(180deg, transparent 60%, rgba(20, 12, 8, 0.4)); pointer-events: none; }
.cl-jar-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cl-jar-line path { fill: none; stroke: var(--color-amber-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 0.85; }
.cl-lid { position: absolute; z-index: 3; background: linear-gradient(180deg, #e6c070, #a97a2a); box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.22), 0 4px 8px rgba(40, 28, 18, 0.25); transform-origin: 15% 100%; transition: transform 0.55s var(--ease-smooth); }
.cl-jar--round .cl-lid { top: -1%; left: 25%; width: 50%; height: 9.5%; border-radius: 999px; }
.cl-jar--flask .cl-lid { top: -3.5%; left: 31%; width: 38%; height: 7%; border-radius: 999px; }
.cl-jar--pot .cl-lid { top: -5%; left: 25%; width: 50%; height: 12%; border-radius: 50% 50% 10px 10px / 100% 100% 10px 10px; }
.cl-item:hover .cl-lid, .cl-item:focus-within .cl-lid, .cl-item.is-open .cl-lid { transform: translate(14%, -70%) rotate(-16deg); }
.cl-label { position: absolute; z-index: 2; left: 50%; top: 60%; translate: -50% -50%; display: grid; place-content: center; width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--bg-atelier); border: 1px solid var(--color-amber-gold); box-shadow: var(--shadow-subtle); text-align: center; }
.cl-jar--flask .cl-label { top: 66%; width: 40%; }
.cl-jar--pot .cl-label { top: 58%; width: 32%; }
.cl-label small { font-family: var(--font-heading); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.cl-label b { font-family: var(--font-heading); font-size: clamp(0.9rem, 1.3vw, 1.15rem); font-weight: 800; line-height: 1; color: var(--color-saffron); }
.cl-spark { position: absolute; z-index: 4; left: 50%; top: 0; width: 6px; height: 9px; border-radius: 50%; background: var(--color-saffron); pointer-events: none; }
.cl-spark:nth-child(3n) { background: var(--color-amber-gold); }
.cl-spark:nth-child(3n + 1) { background: var(--color-kulhad-clay); }

.cl-info { width: 100%; margin-top: 1.8em; }
.cl-name { font-family: var(--font-heading); font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.cl-notes { min-height: 2.8em; margin-top: 0.4em; padding-inline: 0.4em; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); }
.cl-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.7em 1em; margin-top: 0.9em; }
.cl-price { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
.cl-price small { margin-inline-start: 0.2em; font-size: 0.68rem; font-weight: 600; color: var(--text-muted); }
.cl-meter { display: inline-flex; gap: 4px; }
.cl-meter i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--border-brass); }
.cl-meter i.on { background: var(--color-saffron); border-color: var(--color-saffron); }
.cl-add { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-brass); color: var(--color-saffron); transition: background 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-smooth); }
.cl-add svg { width: 15px; height: 15px; }
.cl-add:hover { background: var(--color-saffron); color: #fff; transform: rotate(90deg); }

/* ---------- C. FROM SPICE TO STEAM — The Stacked Terraces ---------- */
.ss-sec .ss-head { margin-bottom: 0; }
.ss-stack { position: relative; margin: 4em calc(var(--side-padding) * -1) 0; }
.ss-stage { --ss-bg: var(--bg-warm-tint); position: sticky; top: calc(var(--header-h) + 0.6em + var(--i, 0) * 1.1em); z-index: calc(1 + var(--i, 0)); display: flex; align-items: center; min-height: clamp(520px, 74vh, 660px); padding: 3.4em 0 3em; background: var(--ss-bg); border-radius: 50% 50% 0 0 / 64px 64px 0 0; box-shadow: 0 -18px 40px -16px rgba(40, 28, 18, 0.24); transform-origin: 50% 0; will-change: transform; }
.ss-stage--2 { --ss-bg: #eedfc6; --ss-bg: color-mix(in srgb, var(--color-amber-gold) 16%, var(--bg-atelier)); }
.ss-stage--3 { --ss-bg: #e3e2cf; --ss-bg: color-mix(in srgb, var(--color-leaf-green) 13%, var(--bg-atelier)); }
.ss-stage--4 { --ss-bg: #f0d7bd; --ss-bg: color-mix(in srgb, var(--color-saffron) 18%, var(--bg-atelier)); }
.ss-dim { position: absolute; z-index: 6; inset: 0; border-radius: inherit; background: #120d0a; opacity: var(--dim, 0); pointer-events: none; }
.ss-in { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 4.5em; width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--side-padding); }
.ss-stage:nth-child(even) .ss-media { grid-column: 2; grid-row: 1; }
.ss-stage:nth-child(even) .ss-copy { grid-column: 1; grid-row: 1; }

.ss-media { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.ss-ring { position: absolute; inset: -4%; border-radius: 50%; border: 1px dashed var(--color-amber-gold); opacity: 0.55; animation: ssSpin 60s linear infinite; pointer-events: none; }
.ss-ring::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1px solid var(--border-brass); }
@keyframes ssSpin { to { transform: rotate(360deg); } }
.ss-shape { --r: 50%; position: relative; width: 82%; aspect-ratio: 1; }
.ss-halo, .ss-clip { position: absolute; inset: 0; border-radius: var(--r); }
.ss-halo { translate: 6% 6%; border: 1.5px solid var(--color-amber-gold); opacity: 0.55; pointer-events: none; }
.ss-clip { margin: 0; overflow: hidden; background: radial-gradient(120% 90% at 60% 35%, #8b4a22 0%, #2a1b12 60%, #120d0a 100%); box-shadow: var(--shadow-floating); }
.ss-clip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-shape--drop { --r: 50% 0 50% 50%; width: 70%; rotate: -45deg; }
.ss-shape--drop .ss-clip img { rotate: 45deg; scale: 1.46; }
.ss-shape--egg { --r: 50% 50% 50% 50% / 62% 62% 38% 38%; width: 72%; aspect-ratio: 4 / 5; }
.ss-shape--arch { --r: 999px 999px 40px 40px; width: 68%; aspect-ratio: 3 / 4; }
.ss-chip { position: absolute; z-index: 3; inset-inline-start: 2%; bottom: 4%; width: 27%; aspect-ratio: 1; margin: 0; border-radius: 50%; overflow: hidden; border: 5px solid var(--ss-bg); background: radial-gradient(120% 90% at 50% 40%, #6d6a2c 0%, #1f2216 60%, #0e0f0a 100%); box-shadow: var(--shadow-floating); }
.ss-chip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-time { position: absolute; z-index: 4; top: 6%; inset-inline-end: -2%; padding: 0.55em 1.1em; border: 1px solid var(--border-brass); border-radius: var(--radius-pill); background: var(--bg-surface-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; color: var(--text-primary); white-space: nowrap; box-shadow: var(--shadow-glass); }

.ss-copy { position: relative; }
.ss-no { display: block; font-family: var(--font-heading); font-size: clamp(4.6rem, 8vw, 7.4rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px var(--color-saffron); opacity: 0.6; user-select: none; }
.ss-step { display: block; margin-top: 0.6em; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-saffron); }
.ss-title { margin-top: 0.7em; font-family: var(--font-heading); font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; color: var(--text-primary); }
.ss-desc { margin-top: 1em; max-width: 46ch; font-size: 15px; line-height: 1.85; color: var(--text-secondary); }
.ss-facts { display: flex; flex-wrap: wrap; gap: 0.8em 2em; margin-top: 1.7em; padding-top: 1.5em; border-top: 1px solid var(--border-subtle); list-style: none; }
.ss-facts li { display: grid; gap: 0.15em; }
.ss-facts b { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-saffron); }
.ss-facts span { font-size: 0.74rem; color: var(--text-muted); }
.ss-end { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.4em 2em; margin-top: 3.6em; padding-top: 2em; border-top: 1px solid var(--border-subtle); font-size: 0.95rem; color: var(--text-secondary); }

/* ---------- Tablet (<=1024px): side padding 2.5em comes from :root ---------- */
@media (max-width: 1024px) {
  .sj-stage { grid-template-columns: clamp(96px, 24vw, 170px) minmax(0, 1fr); column-gap: 1.8em; margin-top: 3.4em; }
  .sj-glasscol { grid-column: 1; }
  .sj-glass { top: calc(var(--header-h) + 2em); }
  .sj-meter { flex-direction: column; gap: 0.3em; font-size: 0.6rem; letter-spacing: 0.1em; }
  .sj-meter span { display: none; }
  .sj-note--1, .sj-note--2, .sj-note--3, .sj-note--4 { grid-column: 2; min-height: 320px; }
  .sj-note--1 { grid-row: 1; } .sj-note--2 { grid-row: 2; } .sj-note--3 { grid-row: 3; } .sj-note--4 { grid-row: 4; }
  .sj-note::after { display: none; }
  .sj-note--1 .sj-in, .sj-note--3 .sj-in { align-items: flex-start; text-align: start; }
  .sj-note--1 .sj-tags, .sj-note--3 .sj-tags { justify-content: flex-start; }
  .sj-ph { width: clamp(110px, 20vw, 150px); }
  .sj-ph--capsule { width: clamp(88px, 15vw, 118px); }

  .cl-head { align-items: flex-start; }
  .cl-hint { display: inline-flex; }
  .cl-shelf { margin-top: 1.2em; margin-inline: calc(var(--side-padding) * -1); padding: 3.4em var(--side-padding) 0.6em; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cl-shelf::-webkit-scrollbar { display: none; }
  .cl-track { width: max-content; }
  .cl-item { flex: 0 0 clamp(220px, 30vw, 270px); scroll-snap-align: center; }

  .ss-stage { min-height: 0; padding: 3em 0 2.6em; }
  .ss-in { grid-template-columns: 1fr; gap: 2em; }
  .ss-stage:nth-child(even) .ss-media, .ss-stage:nth-child(even) .ss-copy { grid-column: 1; grid-row: auto; }
  .ss-media { width: min(52vw, 320px); }
  .ss-copy { max-width: 560px; margin-inline: auto; }
  .ss-end { justify-content: center; text-align: center; }
}
@media (max-width: 1024px) and (orientation: landscape) {
  .ss-in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.4em; }
  .ss-stage:nth-child(even) .ss-media { grid-column: 2; grid-row: 1; }
  .ss-stage:nth-child(even) .ss-copy { grid-column: 1; grid-row: 1; }
  .ss-media { width: min(100%, 280px); }
  .ss-no { display: none; }
}
@media (max-width: 1024px) and (max-height: 700px) {
  .ss-stage { position: relative; top: auto; }
}

/* ---------- Mobile (<=767px): side padding 1.5em comes from :root ---------- */
@media (max-width: 767px) {
  .sj-stage { column-gap: 1.2em; }
  .sj-note--1, .sj-note--2, .sj-note--3, .sj-note--4 { min-height: 300px; padding-block: 1em; }
  .sj-name { font-size: 1.35rem; }
  .sj-desc { font-size: 14px; }
  .sj-ph { width: clamp(100px, 30vw, 130px); }
  .sj-ph--capsule { width: clamp(78px, 24vw, 100px); }
  .sj-tags li { font-size: 0.68rem; padding: 0.38em 0.9em; }

  .cl-item { flex-basis: clamp(210px, 62vw, 260px); }

  .ss-stage { top: calc(var(--header-h) + 0.4em + var(--i, 0) * 0.7em); padding: 2.4em 0 2em; border-radius: 50% 50% 0 0 / 36px 36px 0 0; }
  .ss-in { gap: 1.4em; }
  .ss-media { width: min(46vw, 190px); }
  .ss-time { font-size: 0.6rem; padding: 0.45em 0.85em; top: 2%; }
  .ss-chip { border-width: 4px; }
  .ss-no { display: none; }
  .ss-title { font-size: 1.5rem; margin-top: 0.5em; }
  .ss-desc { font-size: 14px; line-height: 1.7; margin-top: 0.7em; }
  .ss-facts { gap: 0.6em 1.4em; margin-top: 1.1em; padding-top: 1em; }
  .ss-facts b { font-size: 1rem; }
  .ss-end { flex-direction: column; margin-top: 3em; }
}

@media (prefers-reduced-motion: reduce) {
  .sj-steam path, .cl-hint svg, .ss-ring { animation: none; }
  .sj-steam path { stroke-dashoffset: 0; opacity: 0.5; }
  .cl-jar, .cl-lid, .cl-body img, .sj-in { transition-duration: 0.01s; }
}

/* ==========================================================================
   HOME 2 — FIND YOUR PERFECT CHAI · THE RITUAL OF CHAI · CHAI PAIRING
   (side padding 5em / 2.5em / 1.5em and block padding come from .hs-sec)
   ========================================================================== */
@keyframes hsSpinSlow { to { transform: rotate(360deg); } }
@keyframes fyPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 104, 40, 0.45); } 50% { box-shadow: 0 0 0 14px rgba(200, 104, 40, 0); } }

/* ---------- A. FIND YOUR PERFECT CHAI ---------- */
.fy-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5em, 6vw, 5.5em); align-items: center; margin-top: 3.5em; }
.fy-pick { min-width: 0; }
.fy-moods { display: flex; flex-direction: column; border-block-start: 1px solid var(--border-brass); }
.fy-mood { position: relative; display: flex; align-items: center; gap: 1.1em; width: 100%; padding: 1.05em 0.2em; text-align: start; border-block-end: 1px solid var(--border-brass); transition: padding 0.4s var(--ease-smooth), color 0.25s ease; }
.fy-mood::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--color-saffron); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--ease-smooth); }
.fy-mood.is-active::after { transform: scaleX(1); }
.fy-mood.is-active { padding-inline-start: 0.9em; }
.fy-mood-no { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-brass); font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-saffron); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.fy-mood.is-active .fy-mood-no, .fy-mood:hover .fy-mood-no { background: var(--color-saffron); border-color: var(--color-saffron); color: #fff; }
.fy-mood-txt b { display: block; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.fy-mood-txt small { display: block; margin-top: 0.15em; font-size: 0.82rem; color: var(--text-muted); }
.fy-mood-arrow { margin-inline-start: auto; flex: none; width: 18px; height: 18px; color: var(--color-saffron); opacity: 0; transform: translateX(-8px); transition: opacity 0.3s ease, transform 0.4s var(--ease-smooth); }
.fy-mood.is-active .fy-mood-arrow, .fy-mood:hover .fy-mood-arrow { opacity: 1; transform: none; }

.fy-res { margin-top: 2.4em; padding-inline-start: 1.2em; border-inline-start: 2px solid var(--color-saffron); }
.fy-tag { display: block; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-saffron); }
.fy-name { margin-top: 0.45em; font-family: var(--font-heading); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.fy-desc { margin-top: 0.8em; max-width: 46ch; font-size: 15px; line-height: 1.85; color: var(--text-secondary); }
.fy-notes { margin-top: 0.7em; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-kulhad-clay); }
.fy-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 1.8em; margin-top: 1.4em; }
.fy-meter { display: inline-flex; gap: 5px; }
.fy-meter i { width: 22px; height: 6px; border-radius: var(--radius-pill); background: var(--border-brass); transition: background 0.3s ease; }
.fy-meter i.on { background: var(--color-saffron); }
.fy-price { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--text-primary); }
.fy-price small { margin-inline-start: 0.3em; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }

.fy-viz { --r: 50% 50% 50% 50% / 60% 60% 40% 40%; position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; }
.fy-viz[data-m="1"] { --r: 58% 42% 38% 62% / 40% 44% 56% 60%; }
.fy-shape { position: absolute; inset: 9%; border-radius: var(--r); overflow: hidden; isolation: isolate; box-shadow: var(--shadow-floating); transition: border-radius 1.1s var(--ease-smooth); }
.fy-shape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), transparent 42%, rgba(30, 18, 10, 0.3)); pointer-events: none; }
.fy-shape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.14); transition: opacity 0.9s ease, transform 1.4s var(--ease-smooth); }
.fy-shape img.is-on { opacity: 1; transform: scale(1); }
.fy-halo { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--border-brass); animation: hsSpinSlow 70s linear infinite; }
.fy-halo--2 { inset: 4.5%; border-style: solid; border-color: var(--border-subtle); animation-direction: reverse; animation-duration: 90s; }
.fy-orb { position: absolute; top: 7%; inset-inline-end: 12%; width: 18px; height: 18px; border-radius: 50%; background: var(--color-saffron); animation: fyPulse 2.6s ease-in-out infinite; }
.fy-seal { position: absolute; inset-inline-start: -2%; bottom: 8%; width: 112px; height: 112px; padding: 4px; border-radius: 50%; background: var(--bg-warm-tint); color: var(--color-saffron); box-shadow: var(--shadow-subtle); animation: hsSpinSlow 26s linear infinite; }

/* ---------- B. THE RITUAL OF CHAI — THE CHAI CLOCK ---------- */
.rt-sec { background: #1c1815; color: #f5ede2; }
.rt-sec .sec-title { color: #fbf7f0; }
.rt-sec .sec-title em, .rt-sec .sec-eyebrow { color: #e2b35a; }
.rt-sec .hs-lead { color: #c4b9aa; }
.rt-sec .hs-link { color: #fbf7f0; }
.rt-sec .hs-link-icon { border-color: rgba(226, 179, 90, 0.45); color: #e2b35a; }
.rt-sec .hs-link:hover .hs-link-icon { background: #e2b35a; color: #1c1815; }

/* sky that changes with the hour */
.rt-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rt-sky i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.rt-sky i:nth-child(1) { background: radial-gradient(60% 55% at 14% 55%, rgba(240, 140, 90, 0.34), transparent 70%), radial-gradient(40% 40% at 86% 0%, rgba(226, 179, 90, 0.14), transparent 70%); }
.rt-sky i:nth-child(2) { background: radial-gradient(60% 50% at 50% 0%, rgba(226, 179, 90, 0.32), transparent 70%), radial-gradient(40% 40% at 90% 90%, rgba(195, 147, 60, 0.12), transparent 70%); }
.rt-sky i:nth-child(3) { background: radial-gradient(60% 55% at 90% 55%, rgba(200, 104, 40, 0.38), transparent 70%), radial-gradient(45% 45% at 8% 100%, rgba(150, 79, 51, 0.3), transparent 70%); }
.rt-sky i:nth-child(4) { background: radial-gradient(65% 55% at 50% 100%, rgba(41, 64, 51, 0.7), transparent 72%), radial-gradient(35% 35% at 85% 10%, rgba(226, 179, 90, 0.1), transparent 70%); }
.rt-sec[data-phase="0"] .rt-sky i:nth-child(1), .rt-sec[data-phase="1"] .rt-sky i:nth-child(2), .rt-sec[data-phase="2"] .rt-sky i:nth-child(3), .rt-sec[data-phase="3"] .rt-sky i:nth-child(4) { opacity: 1; }

.rt-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5em, 6vw, 6em); align-items: center; margin-top: 3.5em; }

.rt-dial { --mk: 68px; position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-inline: auto; }
.rt-ticks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rt-ticks circle { fill: none; }
.rt-ring-a { stroke: rgba(226, 179, 90, 0.35); stroke-width: 1; }
.rt-ring-b { stroke: rgba(226, 179, 90, 0.5); stroke-width: 10; stroke-dasharray: 2 19.47; }
.rt-ring-c { stroke: rgba(226, 179, 90, 0.3); stroke-width: 1; stroke-dasharray: 3 9; transform-box: fill-box; transform-origin: center; animation: hsSpinSlow 90s linear infinite; }

.rt-hand { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: transform 1.5s var(--ease-smooth); will-change: transform; }
.rt-stage.is-scrub .rt-hand { transition: transform 0.35s linear; }
.rt-sun { position: absolute; top: calc(12% - 14px); inset-inline-start: 50%; margin-inline-start: -14px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c9, #e2b35a 60%, #c86828); box-shadow: 0 0 0 8px rgba(226, 179, 90, 0.18), 0 0 38px 10px rgba(226, 179, 90, 0.5); }

.rt-core { position: absolute; inset: 17%; border-radius: 50%; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 8px #1c1815, 0 0 0 9px rgba(226, 179, 90, 0.45), 0 30px 70px -20px rgba(0, 0, 0, 0.6); }
.rt-core::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(255, 240, 200, 0.2), transparent 55%), linear-gradient(180deg, transparent 55%, rgba(20, 12, 8, 0.35)); pointer-events: none; }
.rt-core img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.18) rotate(-4deg); transition: opacity 1s ease, transform 1.6s var(--ease-smooth); }
.rt-core img.is-on { opacity: 1; transform: none; }

.rt-mark { position: absolute; z-index: 3; width: var(--mk); height: var(--mk); margin: calc(var(--mk) / -2); display: grid; place-content: center; text-align: center; border-radius: 50%; background: #1c1815; border: 1px solid rgba(226, 179, 90, 0.4); color: #c4b9aa; transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.5s var(--ease-smooth), box-shadow 0.4s ease; }
.rt-mark b { display: block; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.1; }
.rt-mark small { display: block; margin-top: 0.15em; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.rt-mark:hover { border-color: #e2b35a; color: #fbf7f0; }
.rt-mark.is-past { color: #f0cb76; border-color: #e2b35a; }
.rt-mark.is-active { background: #e2b35a; border-color: #e2b35a; color: #1c1815; transform: scale(1.12); box-shadow: 0 0 0 7px rgba(226, 179, 90, 0.16); }
.rt-mark[data-i="0"] { inset-inline-start: 3.5%; top: 50%; }
.rt-mark[data-i="1"] { inset-inline-start: 50%; top: 3.5%; }
.rt-mark[data-i="2"] { inset-inline-end: 3.5%; top: 50%; }
.rt-mark[data-i="3"] { inset-inline-start: 50%; bottom: 3.5%; }

.rt-info { min-width: 0; max-width: 30em; }
.rt-phase { display: block; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: #e2b35a; }
.rt-clock { margin-top: 0.15em; font-family: var(--font-heading); font-size: clamp(4.2rem, 8.5vw, 7.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #f5d487 10%, #c86828 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rt-title { margin-top: 0.5em; font-family: var(--font-heading); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: #fbf7f0; }
.rt-desc { margin-top: 0.9em; font-size: 15px; line-height: 1.85; color: #c4b9aa; }
.rt-notes { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em 1.3em; margin-top: 1.2em; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: #f0cb76; }
.rt-notes li { display: inline-flex; align-items: center; gap: 0.6em; }
.rt-notes li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e2b35a; }
.rt-go { margin-top: 1.8em; }
.rt-dots { display: flex; gap: 0.5em; margin-top: 2.2em; }
.rt-dots i { width: 34px; height: 3px; border-radius: var(--radius-pill); background: rgba(226, 179, 90, 0.25); transition: width 0.5s var(--ease-smooth), background 0.4s ease; }
.rt-dots i.on { width: 58px; background: #e2b35a; }

/* ---------- C. CHAI PAIRING EXPERIENCES ---------- */
.cp-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2em 4em; align-items: end; max-width: none; }
.cp-head .hs-lead { margin-top: 0; }
.cp-list { list-style: none; margin-top: 3.5em; }
.cp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5em, 6vw, 5.5em); align-items: center; padding-block: 3.2em; border-block-start: 1px dashed var(--border-brass); }
.cp-row--rev .cp-duo { order: 2; }
.cp-duo { position: relative; width: min(100%, 560px); aspect-ratio: 1.2; margin-inline: auto; }
.cp-disc { position: absolute; width: 60%; aspect-ratio: 1; overflow: hidden; box-shadow: 0 0 0 8px var(--bg-atelier), var(--shadow-floating); transition: translate 0.7s var(--ease-smooth); }
.cp-disc img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); }
.cp-disc--a { top: 20px;left: 20px; inset-inline-start: 0; z-index: 1; }
.cp-disc--b { bottom: 0; inset-inline-end: 0; width: 54%; z-index: 2; }
.cp-circle { border-radius: 50%; }
.cp-arch { width: 50%; border-radius:50%; }
.cp-leaf { border-radius: 50%; }
.cp-plus { position: absolute; z-index: 3; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--color-saffron); color: #fff; box-shadow: 0 0 0 7px var(--bg-atelier), 0 10px 26px -6px rgba(200, 104, 40, 0.55); }
.cp-plus svg { width: 22px; height: 22px; }
.cp-plus::before { content: ""; position: absolute; inset: -15px; border-radius: 50%; border: 1px dashed var(--border-brass); animation: hsSpinSlow 18s linear infinite; }
.cp-row:hover .cp-disc--a { translate: 2.5% 2.5%; }
.cp-row:hover .cp-disc--b { translate: -2.5% -2.5%; }
.cp-copy { min-width: 0; max-width: 520px; }
.cp-kicker { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-saffron); }
.cp-title { margin-top: 0.6em; font-family: var(--font-heading); font-size: clamp(1.7rem, 2.9vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
.cp-title em { font-style: italic; font-weight: 500; color: var(--color-saffron); padding-inline: 0.12em; }
.cp-desc { margin-top: 1em; font-size: 15px; line-height: 1.85; color: var(--text-secondary); }
.cp-why { display: flex; flex-wrap: wrap; gap: 0.5em 1.3em; margin-top: 1.2em; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-kulhad-clay); }
.cp-why span { display: inline-flex; align-items: center; gap: 0.6em; }
.cp-why span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-amber-gold); }
.cp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 2em; margin-top: 1.6em; }
.cp-price { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; }
.cp-price small { margin-inline-start: 0.4em; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.cp-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2em 2em; padding-top: 2.6em; border-block-start: 1px dashed var(--border-brass); font-size: 15px; color: var(--text-secondary); }

/* ---------- RESPONSIVE ---------- */
@media (min-width: 1025px) {
  .rt-dial { width: min(100%, 560px, calc(100vh - 190px)); }
}
@media (max-width: 1024px) {
  .fy-stage { grid-template-columns: 1fr; gap: 3em; }
  .fy-viz { order: -1; width: min(100%, 440px); }
  .fy-pick { max-width: 620px; margin-inline: auto; width: 100%; }

  .rt-stage { grid-template-columns: 1fr; gap: 3em; }
  .rt-dial { width: min(100%, 460px); }
  .rt-info { max-width: 36em; margin-inline: auto; text-align: center; }
  .rt-desc { margin-inline: auto; }
  .rt-notes, .rt-dots { justify-content: center; }

  .cp-head { grid-template-columns: 1fr; }
  .cp-row { grid-template-columns: 1fr; gap: 2.4em; padding-block: 2.8em; }
  .cp-row--rev .cp-duo { order: 0; }
  .cp-duo { width: min(100%, 500px); }
  .cp-copy { max-width: 620px;}
}
@media (max-width: 767px) {
  .fy-stage { margin-top: 2.6em; }
  .fy-viz { width: min(100%, 340px); }
  .fy-seal { width: 84px; height: 84px; }
  .fy-mood { gap: 0.9em; }
  .fy-mood-no { width: 36px; height: 36px; }
  .fy-mood-txt b { font-size: 1.02rem; }
  .fy-res { padding-inline-start: 1em; }
  .fy-go .hs-link-icon { width: 40px; height: 40px; }

  .rt-stage { margin-top: 2.6em; }
  .rt-dial { --mk: 50px; width: min(100%, 340px); }
  .rt-mark b { font-size: 0.66rem; }
  .rt-mark small { display: none; }
  .rt-sun { width: 22px; height: 22px; margin-inline-start: -11px; top: calc(12% - 11px); box-shadow: 0 0 0 6px rgba(226, 179, 90, 0.18), 0 0 26px 8px rgba(226, 179, 90, 0.5); }
  .rt-core { box-shadow: 0 0 0 6px #1c1815, 0 0 0 7px rgba(226, 179, 90, 0.45), 0 24px 50px -16px rgba(0, 0, 0, 0.6); }
  .rt-clock { font-size: clamp(3.6rem, 19vw, 4.6rem); }
  .rt-desc { font-size: 14.5px; }

  .cp-list { margin-top: 2.4em; }
  .cp-disc { box-shadow: 0 0 0 6px var(--bg-atelier), var(--shadow-floating); }
  .cp-plus { width: 50px; height: 50px; box-shadow: 0 0 0 5px var(--bg-atelier), 0 8px 20px -6px rgba(200, 104, 40, 0.55); }
  .cp-plus svg { width: 18px; height: 18px; }
  .cp-end { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .fy-halo, .fy-seal, .fy-orb, .cp-plus::before, .rt-ring-c { animation: none; }
  .fy-shape, .fy-shape img, .cp-disc, .rt-core img, .rt-hand, .rt-sky i, .rt-mark { transition-duration: 0.01s; }
}

/* ==========================================================================
   HOME 2 — BEHIND THE COUNTER · MOMENTS MADE OVER CHAI · YOUR NEXT CHAI STOP
   (side padding 5em / 2.5em / 1.5em and block padding 5.5em / 5em come from .hs-sec)
   ========================================================================== */
@keyframes hsSpinSlow { to { transform: rotate(360deg); } }
@keyframes nsSteam { 0% { stroke-dasharray: 70; stroke-dashoffset: 70; opacity: 0; } 35% { opacity: 0.85; } 100% { stroke-dasharray: 70; stroke-dashoffset: -70; opacity: 0; } }

/* ---------- A. BEHIND THE COUNTER ---------- */
.bc-wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5em, 6vw, 6em); align-items: center; }
.bc-copy { min-width: 0; }
.bc-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 1.4em 2.6em; margin: 2.2em 0 2.4em; padding-top: 1.6em; border-block-start: 1px solid var(--border-brass); }
.bc-stats b { display: block; font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bc-stats span { display: block; margin-top: 0.55em; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

.bc-people { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1 / 1.1; margin-inline: auto; }
.bc-pill { position: absolute; width: 30%; margin: 0; overflow: hidden; border-radius: 999px; isolation: isolate; box-shadow: var(--shadow-floating); }
.bc-pill--1 { inset-inline-start: 0; top: 22%; aspect-ratio: 0.5; }
.bc-pill--2 { inset-inline-start: 34.5%; top: 6%; aspect-ratio: 0.46; }
.bc-pill--3 { inset-inline-end: 0; top: 30%; aspect-ratio: 0.5; }
.bc-pill img { position: absolute; inset: -6% 0 auto; width: 100%; height: 112%; object-fit: cover; }
.bc-pill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(20, 12, 8, 0.78)); pointer-events: none; }
.bc-pill figcaption { position: absolute; z-index: 2; inset-inline: 0; bottom: 7%; padding-inline: 0.6em; text-align: center; color: #fbf7f0; }
.bc-pill figcaption b { display: block; font-family: var(--font-heading); font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.bc-pill figcaption small { display: block; margin-top: 0.25em; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #f0cb76; }
.bc-disc { position: absolute; z-index: 3; top: 0; inset-inline-start: 0; width: 27%; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 7px var(--bg-warm-tint), var(--shadow-floating); }
.bc-disc img { width: 100%; height: 100%; object-fit: cover; }
.bc-seal { position: absolute; z-index: 3; bottom: 0; inset-inline-start: 36%; width: 104px; height: 104px; padding: 4px; border-radius: 50%; background: var(--bg-surface); color: var(--color-saffron); box-shadow: var(--shadow-subtle); animation: hsSpinSlow 26s linear infinite; }
.bc-note { position: absolute; bottom: 0; inset-inline-end: 0; width: 34%; font-family: var(--font-heading); font-size: 0.92rem; font-weight: 600; font-style: italic; line-height: 1.5; color: var(--text-secondary); }
.bc-note small { display: block; margin-top: 0.5em; font-size: 0.66rem; font-style: normal; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-saffron); }

/* ---------- B. MOMENTS MADE OVER CHAI ---------- */
.mm-stage { position: relative; margin-top: 2.5em;aspect-ratio: 1.45; }
.mm-rail { display: contents; }
.mm-moment { position: absolute; inset-inline-start: var(--x); top: var(--y); width: var(--w); margin: 0; }
.mm-shape { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: var(--ar, 1); box-shadow: var(--shadow-floating); }
.mm-shape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-smooth); }
.mm-moment:hover .mm-shape img { transform: scale(1.08); }
.mm-moment--arch { --ar: 0.8; --rd: 999px 999px 26px 26px; }
.mm-moment--circle { --ar: 1; --rd: 50%; }
.mm-moment--leaf { --ar: 1; --rd: 100% 0 100% 0; }
.mm-moment--pebble { --ar: 1.1; --rd: 58% 42% 38% 62% / 40% 44% 56% 60%; }
.mm-moment--egg { --ar: 0.85; --rd: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.mm-moment figcaption { margin-top: 0.9em; padding-inline: 0.3em; }
.mm-moment figcaption small { display: block; font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-saffron); }
.mm-moment figcaption span { display: block; margin-top: 0.35em; font-size: 0.86rem; font-weight: 600; line-height: 1.5; color: var(--text-secondary); }
.mm-center { position: absolute; z-index: 2; top: 50%; inset-inline-start: 50%; translate: -50% -50%; width: min(34%, 420px); text-align: center; }
.mm-num { font-family: var(--font-heading); font-size: clamp(3.2rem, 6.4vw, 5.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--color-amber-gold), var(--color-saffron)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mm-cap { margin: 0.7em auto 1.5em; max-width: 24ch; font-size: 15px; line-height: 1.7; color: var(--text-secondary); }

/* ---------- C. YOUR NEXT CHAI STOP ---------- */
.ns-sec { background: linear-gradient(165deg, #24382c 0%, #16231b 100%); color: #f5ede2; }
.ns-sec .sec-title-stop { color: #fbf7f0;margin-bottom: 1em; }
.ns-sec .sec-title-stop  em, .ns-sec .sec-eyebrow { color: #e2b35a; }
.ns-sec .hs-lead { color: #c4b9aa; }
.ns-glow { position: absolute; z-index: -1; top: -22%; inset-inline-end: -12%; width: 60vw; max-width: 820px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(226, 179, 90, 0.2), transparent 65%); pointer-events: none; }
.ns-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5em, 6vw, 6em); align-items: center; }
.ns-copy { min-width: 0; }
.ns-route { list-style: none; position: relative; display: flex; justify-content: space-between; max-width: 30em; margin: 2.8em 0 2.6em; }
.ns-line { position: absolute; top: 38px; inset-inline: 38px; height: 1px; background: rgba(226, 179, 90, 0.28); }
.ns-line i { position: absolute; inset: 0; background: #e2b35a; transform-origin: left center; }
.ns-stop { position: relative; z-index: 1; }
.ns-stop a { display: flex; flex-direction: column; align-items: center; gap: 0.7em; text-align: center; }
.ns-dot { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #1b2b22; border: 1px solid rgba(226, 179, 90, 0.5); color: #e2b35a; transition: background 0.3s ease, color 0.3s ease, transform 0.5s var(--ease-smooth), box-shadow 0.3s ease; }
.ns-dot svg { width: 28px; height: 28px; }
.ns-stop a:hover .ns-dot { background: #e2b35a; color: #16231b; transform: translateY(-6px); box-shadow: 0 14px 30px -10px rgba(226, 179, 90, 0.5); }
.ns-stop b { font-family: var(--font-heading); font-size: 0.98rem; font-weight: 800; color: #fbf7f0; }
.ns-stop small { font-size: 0.74rem; color: #c4b9aa; }
.ns-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2em 2em; }
.ns-btn { display: inline-flex; align-items: center; gap: 1em; padding: 0.55em 0.6em 0.55em 1.8em; border-radius: var(--radius-pill); background: linear-gradient(135deg, #e2b35a, #c86828); color: #1a120b; font-family: var(--font-heading); font-size: 0.94rem; font-weight: 800; box-shadow: 0 14px 34px -12px rgba(226, 179, 90, 0.55); transition: box-shadow 0.3s ease; }
.ns-btn:hover { box-shadow: 0 18px 44px -10px rgba(226, 179, 90, 0.75); }
.ns-btn-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #1a120b; color: #f0cb76; transition: transform 0.35s var(--ease-smooth); }
.ns-btn-ic svg { width: 16px; height: 16px; }
.ns-btn:hover .ns-btn-ic { transform: translateX(3px); }
.ns-live { --pulse: #4fae7b; display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #fbf7f0; }
.ns-live[data-state="closed"] { --pulse: #d0694a; }
.ns-hours { font-size: 0.8rem; color: #c4b9aa; }

.ns-visual { position: relative; width: min(100%, 460px); aspect-ratio: 0.8; margin-inline: auto; }
.ns-moon { position: absolute; inset: 3% 6% auto; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(226, 179, 90, 0.35); background: radial-gradient(circle at 50% 40%, rgba(226, 179, 90, 0.26), transparent 70%); }
.ns-steam { position: absolute; top: 0; inset-inline-start: 50%; width: 70px; height: 15%; margin-inline-start: -35px; z-index: 2; }
.ns-steam path { stroke-dasharray: 70; animation: nsSteam 3.2s ease-in-out infinite; }
.ns-steam path:nth-child(2) { animation-delay: 0.6s; }
.ns-steam path:nth-child(3) { animation-delay: 1.2s; }
.ns-door { position: absolute; inset: 14% 12% 0; margin: 0; padding: 12px; border-radius: 999px 999px 26px 26px; border: 1px solid rgba(226, 179, 90, 0.5); }
.ns-door-in { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 999px 999px 16px 16px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6); }
.ns-door-in img { position: absolute; inset: -6% 0 auto; width: 100%; height: 112%; object-fit: cover; }
.ns-door-in::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 70%, rgba(255, 190, 90, 0.22), transparent 60%), linear-gradient(180deg, transparent 60%, rgba(10, 18, 13, 0.4)); pointer-events: none; }
.ns-cup { position: absolute; z-index: 3; bottom: 6%; inset-inline-start: -3%; width: 34%; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 7px #1b2b22, 0 0 0 8px rgba(226, 179, 90, 0.5), 0 20px 40px -12px rgba(0, 0, 0, 0.6); }
.ns-cup img { width: 100%; height: 100%; object-fit: cover; }
.ns-seal { position: absolute; z-index: 3; top: 36%; inset-inline-end: -3%; width: 104px; height: 104px; padding: 4px; border-radius: 50%; background: #1b2b22; color: #e2b35a; border: 1px solid rgba(226, 179, 90, 0.4); animation: hsSpinSlow 24s linear infinite; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .bc-wrap { grid-template-columns: 1fr; gap: 3.4em; }
  .bc-copy { max-width: 640px; }

  .mm-stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 2.4em; margin-top: 3em; }
  .mm-center { position: static; translate: none; width: auto; max-width: 34em; margin-inline: auto; order: -1; }
  .mm-rail { display: flex; align-items: flex-start; gap: 1.6em; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.5em var(--side-padding) 2em;scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mm-rail::-webkit-scrollbar { display: none; }
  .mm-moment { position: relative; inset-inline-start: auto; top: auto; flex: none; width: clamp(190px, 30vw, 260px); scroll-snap-align: center; }
  .mm-moment:nth-child(even) { margin-top: 3em; }

  .ns-wrap { grid-template-columns: 1fr; gap: 3.4em; }
  .ns-copy { max-width: 620px; margin-inline:0; }
  .ns-visual { width: min(100%, 400px); }
}
@media (max-width: 767px) {
  .bc-stats { gap: 1.2em 1.8em; }
  .bc-pill figcaption b { font-size: 0.8rem; }
  .bc-pill figcaption small { display: none; }
  .bc-disc { box-shadow: 0 0 0 5px var(--bg-warm-tint), var(--shadow-floating); }
  .bc-seal { width: 76px; height: 76px; }
  .bc-note { font-size: 0.74rem; width: 36%; }
  .bc-note small { font-size: 0.56rem; }

  .mm-moment { width: 62vw; max-width: 250px; }
  .mm-cap { font-size: 14.5px; }

  .ns-route { margin: 2.2em 0; }
  .ns-line { top: 30px; inset-inline: 30px; }
  .ns-dot { width: 60px; height: 60px; }
  .ns-dot svg { width: 24px; height: 24px; }
  .ns-stop b { font-size: 0.88rem; }
  .ns-stop small { font-size: 0.68rem; }
  .ns-seal { width: 80px; height: 80px; }
  .ns-door { padding: 9px; }
  .ns-btn { padding-inline-start: 1.5em; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-seal, .ns-seal { animation: none; }
  .ns-steam path { animation: none; stroke-dasharray: none; opacity: 0.6; }
  .mm-shape img, .ns-dot, .ns-btn-ic { transition-duration: 0.01s; }
}


/* ==========================================================================
   CHAI COLLECTION v2 — Premium editorial redesign
   ========================================================================== */

/* ── Section shell ── */
.cl2-sec {
  position: relative;
  padding: var(--section-block-padding) var(--side-padding);
  background: var(--bg-atelier);
  overflow: hidden;
}

/* Subtle dark band behind the list */
.cl2-sec::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 38%;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, rgba(18, 12, 8, 0.035) 30%, rgba(18, 12, 8, 0.055));
  pointer-events: none;
}

/* Grain overlay */
.cl2-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.cl2-sec .menu-wrap { position: relative; z-index: 1; }

/* ── Header ── */
.cl2-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2.5em 5em;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--border-brass);
}

.cl2-header-left {max-width: 640px; }

.cl2-title {
  margin-top: 0.6em;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
}

.cl2-header-right {
  flex: 0 1 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4em;
  padding-bottom: 0.4em;
}

.cl2-ship-badge {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: 0.83rem;
  color: var(--text-secondary);
}
.cl2-ship-badge svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-saffron); }
.cl2-ship-badge b { font-family: var(--font-heading); font-weight: 800; color: var(--text-primary); }

.cl2-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.8em;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay));
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 10px 28px -8px rgba(180, 78, 28, 0.48);
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s ease;
}
.cl2-cta svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.cl2-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(180, 78, 28, 0.58); }
.cl2-cta:hover svg { transform: translateX(4px); }

/* ── Card list ── */
.cl2-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--border-brass);
  border-radius: 20px;
  overflow: hidden;
}

/* ── Single card ── */
.cl2-card {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 200px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-brass);
  transition: background 0.3s ease;
}
.cl2-card:last-child { border-bottom: none; }
.cl2-card:hover { background: var(--bg-warm-tint); }

/* Featured card accent */
.cl2-card--featured {
  background: linear-gradient(105deg, var(--bg-surface), rgba(226, 179, 90, 0.04));
}
.cl2-card--featured:hover {
  background: linear-gradient(105deg, var(--bg-warm-tint), rgba(226, 179, 90, 0.07));
}

/* Number index */
.cl2-index {
  position: absolute;
  top: 1.6rem;
  inset-inline-end: 1.8rem;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  opacity: 0.55;
}

/* Best-seller badge */
.cl2-badge {
  position: absolute;
  top: 1.4rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 0.32em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--color-saffron);
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(180, 78, 28, 0.5);
}

/* ── Image figure ── */
.cl2-fig {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 55% 30%, #7a3c18 0%, #1f1409 70%, #0e0906 100%);
  /* fill card height */
  min-height: 200px;
}

.cl2-img-wrap {
  position: absolute;
  inset: 0;
}
.cl2-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-smooth);
}
.cl2-card:hover .cl2-img-wrap img { transform: scale(1.06); }

/* Dark gradient overlay on image */
.cl2-fig::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 40%, var(--bg-surface) 96%);
  pointer-events: none;
  transition: background 0.3s ease;
}
.cl2-card:hover .cl2-fig::after {
  background: linear-gradient(to right, transparent 40%, var(--bg-warm-tint) 96%);
}
.cl2-card--featured .cl2-fig::after {
  background: linear-gradient(to right, transparent 40%, color-mix(in srgb, var(--bg-surface), rgba(226,179,90,0.04)) 96%);
}

/* Origin tag */
.cl2-origin-tag {
  position: absolute;
  bottom: 1.1rem;
  inset-inline-start: 0.9rem;
  z-index: 2;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  background: rgba(18, 12, 8, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-amber-gold);
  border: 1px solid rgba(226, 179, 90, 0.25);
}

/* ── Card body ── */
.cl2-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.4rem, 2.5vw, 2.2rem) clamp(1.4rem, 2.5vw, 2rem) 1.4rem;
  gap: 0.8em;
}

.cl2-top { display: flex; flex-direction: column; gap: 0.6em; }

.cl2-name {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-primary);
}

.cl2-spices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.6em;
  list-style: none;
  padding: 0;
}
.cl2-spices li {
  padding: 0.28em 0.8em;
  border: 1px solid var(--border-brass);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.cl2-desc {
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 48ch;
}

/* ── Footer row inside card ── */
.cl2-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8em 1.4em;
  padding-top: 1.1em;
  border-top: 1px solid var(--border-brass);
  margin-top: auto;
}

.cl2-strength {
  display: flex;
  align-items: center;
  gap: 0.65em;
}
.cl2-strength-label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cl2-bars {
  display: inline-flex;
  gap: 3px;
}
.cl2-bars i {
  display: block;
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-brass);
}
.cl2-bars i.on {
  background: linear-gradient(90deg, var(--color-kulhad-clay), var(--color-saffron));
}

.cl2-purchase {
  display: flex;
  align-items: center;
  gap: 1.2em;
}

.cl2-price {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.cl2-price small {
  margin-inline-start: 0.15em;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cl2-add {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.3em;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-saffron);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-saffron);
  transition: background 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-smooth);
}
.cl2-add svg { width: 12px; height: 12px; transition: transform 0.3s ease; }
.cl2-add:hover {
  background: var(--color-saffron);
  color: #fff;
  transform: translateY(-1px);
}
.cl2-add:hover svg { transform: translateX(3px); }

/* Featured card — filled add button */
.cl2-card--featured .cl2-add {
  background: linear-gradient(135deg, var(--color-saffron), var(--color-kulhad-clay));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px -5px rgba(180, 78, 28, 0.45);
}
.cl2-card--featured .cl2-add:hover { opacity: 0.9; }

/* ── Footer strip ── */
.cl2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2em 2em;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--border-brass);
}
.cl2-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .cl2-card {
    grid-template-columns: 200px 1fr;
  }
}

@media (max-width: 767px) {
  .cl2-header { flex-direction: column; align-items: flex-start; gap: 1.8em; }
  .cl2-header-right { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1em 1.6em; }
  .cl2-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }

  .cl2-list { border-radius: 16px; }

  .cl2-card {
    grid-template-columns: 150px 1fr;
    min-height: 170px;
  }
  .cl2-fig { min-height: 170px; }
  .cl2-fig::after {
    background: linear-gradient(to right, transparent 25%, var(--bg-surface) 85%);
  }
  .cl2-card:hover .cl2-fig::after {
    background: linear-gradient(to right, transparent 25%, var(--bg-warm-tint) 85%);
  }

  .cl2-desc { display: none; }
  .cl2-spices { display: none; }

  .cl2-body { padding: 1.2rem 1.2rem 1.2rem 1rem; gap: 0.6em; }

  .cl2-footer { flex-direction: column; align-items: flex-start; gap: 1em; }
}

@media (max-width: 480px) {
  .cl2-card {
    grid-template-columns: 110px 1fr;
    min-height: 150px;
  }
  .cl2-fig { min-height: 150px; }
  .cl2-body { padding: 1rem 1rem 1rem 0.8rem; }
  .cl2-name { font-size: 0.95rem; }
  .cl2-price { font-size: 0.95rem; }
  .cl2-bars i { width: 12px; }
  .cl2-strength-label { display: none; }
  .cl2-add { padding: 0.5em 1em; font-size: 0.66rem; }
  .cl2-index { font-size: 0.56rem; top: 1rem; inset-inline-end: 1rem; }
}

/* ── Dark mode tweaks ── */
[data-theme="dark"] .cl2-sec { background: var(--bg-atelier); }
[data-theme="dark"] .cl2-card { background: var(--bg-surface); }
[data-theme="dark"] .cl2-card:hover { background: var(--bg-warm-tint); }
[data-theme="dark"] .cl2-card--featured {
  background: linear-gradient(105deg, var(--bg-surface), rgba(226, 179, 90, 0.06));
}
[data-theme="dark"] .cl2-fig::after {
  background: linear-gradient(to right, transparent 35%, var(--bg-surface) 96%);
}
[data-theme="dark"] .cl2-card:hover .cl2-fig::after {
  background: linear-gradient(to right, transparent 35%, var(--bg-warm-tint) 96%);
}

/* Menu page hero banner */
.menu-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(360px, 48vw, 590px);
  padding: 6rem var(--side-padding);
  overflow: hidden;
  color: #fffaf2;
  text-align: center;
  background: #39251b url("../images/Chai being poured into a clay kulhad in warm morning light.jpg") center / cover no-repeat;
  isolation: isolate;
}
.menu-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 16, 11, 0.3), rgba(25, 16, 11, 0.68));
}
.menu-hero-content { width: min(100%, 760px); margin-inline: auto; }
.menu-hero-eyebrow { display: inline-block; margin-bottom: 1.2rem; color: #f1c37a; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.menu-hero h1 { margin: 0; color: inherit; font-family: var(--font-heading); font-size: clamp(2.8rem, 7vw, 5.8rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.menu-hero h1 em { color: #f1c37a; font-weight: 500; }
.menu-hero p { max-width: 560px; margin: 1.3rem auto 1.8rem; color: rgba(255, 250, 242, 0.9); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; }
.menu-hero-link { display: inline-flex; align-items: center; gap: 0.75rem; color: #fffaf2; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.menu-hero-link span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(255, 250, 242, 0.6); border-radius: 50%; transition: transform 0.2s ease; }
.menu-hero-link:hover span { transform: translateY(3px); }
@media (max-width: 767px) {
  .menu-hero { min-height: 420px; padding-block: 5rem; background-position: 58% center; }
  .menu-hero p { max-width: 380px; }
}

.brew-banner-section { position: relative; width: 100%; min-height: 85vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--header-h) + 2em) var(--side-padding) var(--section-block-padding); overflow: hidden; background-color: var(--bg-atelier); }
.banner-bg-container { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.banner-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.78) 100%); z-index: 1; pointer-events: none; }
.banner-content-wrapper { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.banner-badge { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.45em 1.25em; background: var(--bg-surface-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-saffron); margin-bottom: 1.4rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-subtle); }
.banner-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-saffron); animation: pulseDot 1.6s infinite; }
.banner-title { font-family: var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: #ffffff; margin-bottom: 1.1rem; text-shadow: 0 4px 20px rgba(0,0,0,0.35); }
.banner-title em { font-style: normal; color: var(--color-saffron); }
.banner-desc { font-family: var(--font-body); font-size:15px; color:#fff; max-width: 620px; margin: 0 auto 2.2rem; line-height: 1.65; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.banner-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.btn-banner-primary { display: inline-flex; align-items: center; gap: 0.6em; height: 50px; padding: 0 2rem; background: linear-gradient(135deg, var(--color-saffron) 0%, var(--color-kulhad-clay) 100%); color: #ffffff; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; border-radius: var(--radius-pill); box-shadow: var(--shadow-floating); transition: transform var(--trans-fast), box-shadow var(--trans-fast); text-decoration: none; }
.btn-banner-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -4px rgba(200, 104, 40, 0.45); color: #ffffff; }
.btn-banner-secondary { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 2rem; background: var(--bg-surface-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: transform var(--trans-fast), border-color var(--trans-fast), background var(--trans-fast); box-shadow: var(--shadow-glass); }
.btn-banner-secondary:hover { background: var(--bg-surface); border-color: var(--color-saffron); color: var(--text-primary); transform: translateY(-2px); }
@media (max-width: 768px) { .brew-banner-section { padding: calc(var(--header-h) + 1.5em) 1.5em var(--section-block-padding); } .banner-actions { flex-direction: column; width: 100%; max-width: 320px; } .btn-banner-primary, .btn-banner-secondary { width: 100%; justify-content: center; } }