/* ==========================================================================
   TARAZU — Design System
   Tokens → Base → Layout → Components → Motion → Responsive
   Tailwind supplies layout utilities; this file owns the brand system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --tz-white: #ffffff;
  --tz-warm: #fafaf8;
  --tz-ink: #111111;
  --tz-soft-ink: #242424;
  --tz-gray: #6b6b6b;
  --tz-border: #e8e8e8;
  --tz-orange: #f36f21;
  --tz-orange-deep: #d95c12;
  --tz-orange-soft: #fff1e8;
  --tz-surface: #f5f3ef;

  /* Typography */
  --tz-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tz-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;

  /* Spacing scale */
  --tz-space-1: 4px;
  --tz-space-2: 8px;
  --tz-space-3: 12px;
  --tz-space-4: 16px;
  --tz-space-5: 24px;
  --tz-space-6: 32px;
  --tz-space-7: 48px;
  --tz-space-8: 64px;
  --tz-space-9: 96px;

  /* Radius — restrained */
  --tz-r-card: 14px;
  --tz-r-btn: 9px;
  --tz-r-input: 9px;
  --tz-r-pill: 999px;
  --tz-r-sm: 6px;

  /* Elevation — used only on floating UI */
  --tz-shadow-menu: 0 18px 48px -24px rgba(17, 17, 17, 0.22);
  --tz-shadow-float: 0 24px 64px -28px rgba(17, 17, 17, 0.3);
  --tz-shadow-soft: 0 2px 10px -6px rgba(17, 17, 17, 0.16);

  /* Motion */
  --tz-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tz-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tz-fast: 180ms;
  --tz-base: 320ms;
  --tz-slow: 620ms;

  /* Layout */
  --tz-container: 1320px;
  --tz-header-h: 74px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--tz-font);
  color: var(--tz-ink);
  background: var(--tz-white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.tz-locked { overflow: hidden; }

/* The hidden attribute must win over any display utility (Tailwind's .grid,
   .flex etc. share its specificity and would otherwise re-show the element). */
[hidden] { display: none !important; }

h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }

.tz-display {
  font-family: var(--tz-font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

.tz-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tz-gray);
}
.tz-eyebrow--accent { color: var(--tz-orange); }

.tz-container {
  width: 100%;
  max-width: var(--tz-container);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px) { .tz-container { padding-inline: 32px; } }
@media (min-width: 1280px) { .tz-container { padding-inline: 40px; } }

.tz-section { padding-block: 56px; }
.tz-section--tight { padding-block: 40px; }
.tz-section--airy { padding-block: 76px; }
@media (min-width: 768px) {
  .tz-section { padding-block: 84px; }
  .tz-section--tight { padding-block: 56px; }
  .tz-section--airy { padding-block: 118px; }
}

.tz-rule { height: 1px; background: var(--tz-border); border: 0; }

::selection { background: var(--tz-orange); color: #fff; }

:focus-visible {
  outline: 2px solid var(--tz-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.tz-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tz-skip {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--tz-ink); color: #fff; padding: 12px 18px;
  border-radius: var(--tz-r-btn); font-size: 14px; font-weight: 600;
  transition: top var(--tz-fast) var(--tz-ease);
}
.tz-skip:focus { top: 16px; }

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.tz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  border-radius: var(--tz-r-btn);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--tz-fast) var(--tz-ease),
              color var(--tz-fast) var(--tz-ease),
              border-color var(--tz-fast) var(--tz-ease),
              transform var(--tz-fast) var(--tz-ease);
}
.tz-btn:active { transform: translateY(1px); }
.tz-btn svg { flex: none; }

.tz-btn--primary { background: var(--tz-ink); color: #fff; }
.tz-btn--primary:hover { background: var(--tz-soft-ink); }

.tz-btn--accent { background: var(--tz-orange); color: #fff; }
.tz-btn--accent:hover { background: var(--tz-orange-deep); }

.tz-btn--outline { background: transparent; color: var(--tz-ink); border-color: var(--tz-border); }
.tz-btn--outline:hover { border-color: var(--tz-ink); background: var(--tz-warm); }

.tz-btn--light { background: #fff; color: var(--tz-ink); }
.tz-btn--light:hover { background: var(--tz-orange-soft); }

.tz-btn--ghost { background: transparent; color: var(--tz-ink); padding: 0; min-height: 0; }
.tz-btn--ghost:hover { color: var(--tz-orange); }

.tz-btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* Gradient CTA with a shine that sweeps across on hover */
.tz-btn--gradient {
  position: relative; z-index: 0; overflow: hidden;
  color: #fff; border-color: transparent;
  background-image: linear-gradient(120deg, #e5620f 0%, #f36f21 38%, #ff9445 62%, #e5620f 100%);
  background-size: 220% 100%; background-position: 0 0;
  box-shadow: 0 12px 26px -14px rgba(243, 111, 33, 0.85);
  transition: background-position .7s var(--tz-ease), box-shadow var(--tz-base) var(--tz-ease),
              transform var(--tz-fast) var(--tz-ease);
}
.tz-btn--gradient > * { position: relative; z-index: 2; }
.tz-btn--gradient::after {
  content: ""; position: absolute; z-index: 1; top: -20%; bottom: -20%; left: -55%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  transition: left .75s var(--tz-ease-out);
}
.tz-btn--gradient:hover { background-position: 100% 0; box-shadow: 0 16px 32px -14px rgba(243, 111, 33, 0.95); }
.tz-btn--gradient:hover::after { left: 125%; }
.tz-btn--block { width: 100%; }

/* Text link with an animated rule */
.tz-link {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--tz-ink); padding-bottom: 3px;
}
.tz-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform var(--tz-base) var(--tz-ease);
}
.tz-link:hover { color: var(--tz-orange); }
.tz-link:hover::after { transform-origin: left; transform: scaleX(0.4); }
.tz-link svg { transition: transform var(--tz-base) var(--tz-ease); }
.tz-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   4. BADGES / CHIPS / PILLS
   -------------------------------------------------------------------------- */
.tz-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px;
  border-radius: var(--tz-r-sm);
  font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--tz-ink); color: #fff; white-space: nowrap;
}
.tz-badge--accent { background: var(--tz-orange); }
.tz-badge--soft { background: var(--tz-orange-soft); color: var(--tz-orange-deep); }
.tz-badge--quiet { background: #fff; color: var(--tz-ink); border: 1px solid var(--tz-border); }

.tz-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 1px solid var(--tz-border); border-radius: var(--tz-r-pill);
  background: #fff; color: var(--tz-ink);
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: all var(--tz-fast) var(--tz-ease);
}
.tz-chip:hover { border-color: var(--tz-ink); }
.tz-chip[aria-pressed="true"], .tz-chip.is-active {
  background: var(--tz-ink); border-color: var(--tz-ink); color: #fff;
}
.tz-chip--accent[aria-pressed="true"] { background: var(--tz-orange); border-color: var(--tz-orange); }

/* --------------------------------------------------------------------------
   5. HEADER / NAV
   -------------------------------------------------------------------------- */
.tz-promo {
  background: var(--tz-ink); color: #fff;
  font-size: 12.5px; letter-spacing: 0.02em;
  padding: 9px 0; text-align: center;
}
.tz-promo b { color: var(--tz-orange); font-weight: 700; }

.tz-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--tz-border);
  transition: box-shadow var(--tz-base) var(--tz-ease);
}
.tz-header.is-stuck { box-shadow: var(--tz-shadow-soft); }

.tz-logo { display: inline-flex; align-items: center; flex: none; }
.tz-logo img { display: block; width: auto; height: 38px; }
@media (max-width: 1023px) { .tz-logo img { height: 32px; } }
@media (max-width: 360px)  { .tz-logo img { height: 27px; } }

.tz-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  height: var(--tz-header-h); padding-inline: 2px;
  font-size: 14.5px; font-weight: 600; color: var(--tz-ink);
  transition: color var(--tz-fast) var(--tz-ease);
}
.tz-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px;
  background: var(--tz-orange); transform: scaleX(0); transform-origin: left;
  transition: transform var(--tz-base) var(--tz-ease);
}
.tz-nav__link:hover, .tz-nav__link[aria-expanded="true"] { color: var(--tz-orange); }
.tz-nav__link:hover::after, .tz-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.tz-nav__link .tz-caret { transition: transform var(--tz-fast) var(--tz-ease); }
.tz-nav__link[aria-expanded="true"] .tz-caret { transform: rotate(180deg); }

/* Search field in the bar */
.tz-searchbar {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 44px; padding: 0 16px;
  background: var(--tz-warm);
  border: 1px solid var(--tz-border); border-radius: var(--tz-r-input);
  color: var(--tz-gray); font-size: 14.5px; text-align: left; cursor: pointer;
  transition: all var(--tz-fast) var(--tz-ease);
}
.tz-searchbar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-searchbar:hover { border-color: #d3d3d3; background: #fff; }
.tz-searchbar kbd {
  flex: none; font-family: var(--tz-font); font-size: 11px; font-weight: 700;
  color: var(--tz-gray); background: #fff; border: 1px solid var(--tz-border);
  border-radius: 5px; padding: 2px 6px;
}

/* Icon actions */
.tz-iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--tz-r-btn); color: var(--tz-ink);
  transition: background-color var(--tz-fast) var(--tz-ease), color var(--tz-fast) var(--tz-ease);
}
.tz-iconbtn:hover { background: var(--tz-warm); color: var(--tz-orange); }

/* --------------------------------------------------------------------------
   6. MEGA MENU
   -------------------------------------------------------------------------- */
.tz-mega {
  position: absolute; top: calc(100% - 6px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.985);
  transform-origin: 20% 0;
  transition: opacity .22s var(--tz-ease),
              transform .32s var(--tz-ease-out),
              visibility .32s;
}
.tz-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.tz-mega__col-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tz-gray); margin-bottom: 14px;
}
.tz-mega__link {
  display: block; padding: 6px 0;
  font-size: 14.5px; color: var(--tz-soft-ink);
  transition: color var(--tz-fast) var(--tz-ease), padding-left var(--tz-fast) var(--tz-ease);
}
.tz-mega__link:hover { color: var(--tz-orange); padding-left: 6px; }

.tz-mega__promo {
  border-radius: var(--tz-r-card); overflow: hidden;
  background: var(--tz-orange-soft); padding: 22px;
  display: flex; flex-direction: column; gap: 12px; height: 100%;
}

/* The mega menu is a pointer/desktop affordance — below lg the drawer takes
   over, so keep the panels out of layout entirely. */
@media (max-width: 1023px) { .tz-mega { display: none; } }



/* --------------------------------------------------------------------------
   6b. BANNER
   -------------------------------------------------------------------------- */
.tz-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--tz-warm); }
.tz-hero__inner { position: relative; z-index: 2; }

/* Slow-drifting light behind the banner */
.tz-hero__aurora { position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none; }
.tz-hero__aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(10px); will-change: transform; }
.tz-hero__aurora span:nth-child(1) {
  width: 44vw; height: 44vw; top: -8%; right: -6%;
  background: radial-gradient(circle, rgba(243,111,33,0.14) 0%, rgba(243,111,33,0) 68%);
  animation: tz-drift-a 26s var(--tz-ease) infinite alternate;
}
.tz-hero__aurora span:nth-child(2) {
  width: 32vw; height: 32vw; bottom: -12%; left: -4%;
  background: radial-gradient(circle, rgba(190,205,192,0.26) 0%, rgba(190,205,192,0) 70%);
  animation: tz-drift-b 32s var(--tz-ease) infinite alternate;
}
@keyframes tz-drift-a { to { transform: translate3d(-6%, 8%, 0) scale(1.12); } }
@keyframes tz-drift-b { to { transform: translate3d(9%, -7%, 0) scale(1.16); } }

/* Film grain so the large flat areas do not read as digital */
.tz-hero__grain {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Kinetic headline: each line rises out of its own mask.
   Named tz-mask, not tz-line, which is a different component. */
.tz-mask {
  display: block; overflow: hidden;
  padding: 0.14em 0 0.1em; margin-top: -0.14em;
}
.tz-mask > span {
  display: block; white-space: nowrap;
  transform: translateY(115%);
  transition: transform 1.05s var(--tz-ease-out);
  transition-delay: var(--d, 0ms);
}
.is-ready .tz-mask > span { transform: translateY(0); }
@media (max-width: 480px) { .tz-mask > span { white-space: normal; } }

/* Staggered rise for the supporting elements */
.tz-rise {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--tz-ease-out), transform .8s var(--tz-ease-out);
  transition-delay: var(--d, 0ms);
}
.is-ready .tz-rise { opacity: 1; transform: none; }

.tz-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--tz-orange); flex: none;
  box-shadow: 0 0 0 0 rgba(243, 111, 33, 0.55);
  animation: tz-pulse 2.2s var(--tz-ease) infinite;
}
@keyframes tz-pulse {
  70%  { box-shadow: 0 0 0 11px rgba(243, 111, 33, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 111, 33, 0); }
}

/* Buttons: sweep fill + magnetic pull */
.tz-magnet { transition: transform .3s var(--tz-ease-out); will-change: transform; }
.tz-btn--sweep { position: relative; overflow: hidden; z-index: 0; }
.tz-btn--sweep > * { position: relative; z-index: 2; }
.tz-btn--sweep::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--tz-orange); transform: translateY(101%);
  transition: transform .45s var(--tz-ease-out);
}
.tz-btn--sweep:hover::before, .tz-btn--sweep:focus-visible::before { transform: translateY(0); }
.tz-btn--sweep:hover { background: var(--tz-ink); }

/* Infinite marquee */
.tz-marquee {
  position: relative; z-index: 2; display: flex; overflow: hidden;
  border-top: 1px solid var(--tz-border); background: #fff;
}
.tz-marquee__track { display: flex; flex: none; align-items: center; animation: tz-marquee 40s linear infinite; }
.tz-marquee:hover .tz-marquee__track { animation-play-state: paused; }
@keyframes tz-marquee { to { transform: translate3d(-50%, 0, 0); } }
.tz-marquee__item {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 26px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
}
.tz-marquee__item i { width: 5px; height: 5px; border-radius: 50%; background: var(--tz-orange); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .tz-mask > span { transform: none !important; }
  .tz-rise { opacity: 1 !important; transform: none !important; }
  .tz-marquee__track, .tz-hero__aurora span { animation: none !important; }
}



/* --------------------------------------------------------------------------
   6c. MEGA MENU — a compact anchored panel: one orange mark, one name
   -------------------------------------------------------------------------- */
.tz-navpanel {
  width: min(560px, calc(100vw - 32px));
  padding: 18px;
  background: #fff;
  border: 1px solid var(--tz-border);
  border-radius: 18px;
  box-shadow: 0 30px 70px -42px rgba(17, 17, 17, 0.32), 0 2px 8px -4px rgba(17, 17, 17, 0.05);
}

.tz-navpanel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--tz-border);
}
.tz-navpanel__label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tz-gray);
}
.tz-navpanel__all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--tz-ink);
  transition: color var(--tz-fast) var(--tz-ease);
}
.tz-navpanel__all:hover { color: var(--tz-orange); }
.tz-navpanel__all svg { transition: transform var(--tz-base) var(--tz-ease); }
.tz-navpanel__all:hover svg { transform: translateX(3px); }

.tz-navpanel__items {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 8px; row-gap: 2px; padding-top: 8px;
}

.tz-navitem {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 11px;
  transition: background-color var(--tz-fast) var(--tz-ease);
}
.tz-navitem:hover { background: var(--tz-warm); }

/* Outlined disc, orange mark — colour without a heavy filled tile */
.tz-navitem__icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; border: 1px solid var(--tz-border);
  color: var(--tz-orange); background: #fff;
  transition: border-color var(--tz-base) var(--tz-ease),
              background-color var(--tz-base) var(--tz-ease),
              transform var(--tz-base) var(--tz-ease-out);
}
.tz-navitem:hover .tz-navitem__icon {
  border-color: var(--tz-orange); background: var(--tz-orange-soft); transform: translateY(-1px);
}
.tz-navitem__name {
  font-size: 14px; font-weight: 700; letter-spacing: -0.012em; color: var(--tz-ink);
  transition: color var(--tz-fast) var(--tz-ease);
}
.tz-navitem:hover .tz-navitem__name { color: var(--tz-orange); }

/* ---- Compact category tile (search panel) ---- */
.tz-minicat {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 8px; border: 1px solid var(--tz-border); border-radius: var(--tz-r-card);
  background: #fff; text-align: center;
  transition: border-color var(--tz-fast) var(--tz-ease), background-color var(--tz-fast) var(--tz-ease);
}
.tz-minicat img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  transition: transform var(--tz-base) var(--tz-ease-out);
}
.tz-minicat span { font-size: 12px; font-weight: 700; }
.tz-minicat:hover { border-color: var(--tz-orange); background: var(--tz-orange-soft); }
.tz-minicat:hover img { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   7b. BANNER LAYOUT + 3D CAROUSEL
   -------------------------------------------------------------------------- */
/* Promo + header + strip + banner are meant to land inside one viewport. */
.tz-hero__grid { display: grid; gap: 40px; padding-block: 34px; align-items: center; }
@media (min-width: 1024px) {
  .tz-hero { display: flex; align-items: center; min-height: calc(100svh - 132px); }
  .tz-hero__grid { grid-template-columns: 46fr 54fr; gap: 48px; padding-block: 24px; width: 100%; }
}
.tz-hero__title {
  margin-top: 16px; font-size: clamp(33px, 4.4vw, 58px); line-height: 1.06;
  font-style: italic;
}
/* "Your" — same serif as the rest of the line, simply set in orange italic.
   No separate face, so nothing can overflow the headline mask. */
.tz-hl { font-style: italic; color: var(--tz-orange); }

.tz-hero__sub {
  margin-top: 16px; font-size: clamp(17px, 1.9vw, 23px); line-height: 1.35;
  font-style: italic; color: var(--tz-orange);
}
.tz-hero__lede { margin-top: 16px; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: var(--tz-gray); }
.tz-hero__cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.tz-hero__cta .tz-btn { flex: 1 1 auto; }
@media (min-width: 560px) { .tz-hero__cta .tz-btn { flex: 0 0 auto; } }
.tz-hero__trust {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-size: 12.5px; color: var(--tz-gray);
}
.tz-hero__trust li { display: flex; align-items: center; gap: 7px; }

/* ---- Carousel ---- */
.tz-carousel { position: relative; width: 100%; }
.tz-carousel__stage {
  position: relative; width: 100%; height: 0; padding-bottom: 74%;
  perspective: 1400px; perspective-origin: 50% 46%;
  touch-action: pan-y;
}
@media (min-width: 1024px) { .tz-carousel__stage { padding-bottom: 0; height: min(52.5vh, 443px); } }

.tz-slide {
  position: absolute; left: 50%; top: 50%;
  width: min(62%, 302px); aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #fff; border: 1px solid var(--tz-border); border-radius: 20px;
  box-shadow: 0 26px 60px -34px rgba(17, 17, 17, 0.42);
  transform-style: preserve-3d; backface-visibility: hidden;
  transition: transform .85s var(--tz-ease-out), opacity .6s var(--tz-ease),
              box-shadow .6s var(--tz-ease);
  will-change: transform, opacity;
  opacity: 0; z-index: 1;
  transform: translate3d(-50%, -50%, -420px) scale(.7);
}
/* The product is shown whole on white — contained, never cropped. */
.tz-slide__photo {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  width: 100%; height: 74%;
  object-fit: contain; object-position: center;
  padding: 16px 16px 0;
  transition: transform .8s var(--tz-ease-out);
}
.tz-slide[data-o="0"] .tz-slide__photo { transform: scale(1.03); }
.tz-slide__no {
  position: absolute; top: 15px; right: 17px; z-index: 2;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--tz-orange);
}
/* Only the active card carries its label — otherwise fragments of the
   neighbours' text peek out from behind it. */
.tz-slide__foot, .tz-slide__no {
  opacity: 0; transition: opacity .45s var(--tz-ease);
}
.tz-slide[data-o="0"] .tz-slide__foot,
.tz-slide[data-o="0"] .tz-slide__no { opacity: 1; }
.tz-slide__foot {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: block;
  padding-top: 12px; border-top: 1px solid var(--tz-border);
}
.tz-slide__name {
  display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--tz-ink);
}
.tz-slide__sub {
  display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--tz-gray);
}

/* Depth ladder — the active card faces you, neighbours fall back and turn away */
.tz-slide[data-o="0"] {
  opacity: 1; z-index: 5;
  transform: translate3d(-50%, -50%, 0) rotateY(0deg) scale(1);
}
.tz-slide[data-o="1"] {
  opacity: .72; z-index: 4;
  transform: translate3d(8%, -50%, -190px) rotateY(-30deg) scale(.94);
}
.tz-slide[data-o="-1"] {
  opacity: .72; z-index: 4;
  transform: translate3d(-108%, -50%, -190px) rotateY(30deg) scale(.94);
}
.tz-slide[data-o="2"] {
  opacity: .3; z-index: 3;
  transform: translate3d(52%, -50%, -360px) rotateY(-38deg) scale(.86);
}
.tz-slide[data-o="-2"] {
  opacity: .3; z-index: 3;
  transform: translate3d(-152%, -50%, -360px) rotateY(38deg) scale(.86);
}

/* Carousel controls */
.tz-carousel__ui {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 18px;
}
@media (min-width: 1024px) { .tz-carousel__ui { justify-content: flex-start; padding-left: 6%; } }
.tz-carousel__btn {
  position: relative; width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--tz-border); border-radius: 50%;
  background: #fff; color: var(--tz-ink);
  transition: color var(--tz-fast) var(--tz-ease), border-color var(--tz-fast) var(--tz-ease),
              transform var(--tz-fast) var(--tz-ease);
}
.tz-carousel__btn:hover { color: var(--tz-orange); border-color: var(--tz-orange); transform: translateY(-2px); }
.tz-carousel__btn > svg:not(.tz-carousel__ring) { position: relative; z-index: 1; }

/* Timer ring on the next button, restarted each cycle */
.tz-carousel__btn .tz-carousel__ring { position: absolute; inset: -1px; width: 44px; height: 44px; transform: rotate(-90deg); z-index: 0; }
.tz-carousel__ring circle {
  fill: none; stroke: var(--tz-orange); stroke-width: 1.5;
  stroke-dasharray: 129; stroke-dashoffset: 129;
  animation: tz-ring 3400ms linear infinite;
}
@keyframes tz-ring { to { stroke-dashoffset: 0; } }
.tz-carousel.is-held .tz-carousel__ring circle { animation-play-state: paused; }

.tz-carousel__count {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--tz-gray);
}
.tz-carousel__count b { color: var(--tz-ink); font-size: 15px; }
.tz-carousel__count i { width: 22px; height: 1px; background: var(--tz-border); }

@media (prefers-reduced-motion: reduce) {
  .tz-carousel__ring circle { animation: none !important; }
}

/* --------------------------------------------------------------------------
   7. CORPORATE SECTIONS
   -------------------------------------------------------------------------- */
.tz-band { background: var(--tz-warm); }

/* ---- Category strip — compact: art + label, nothing else ---- */
.tz-catstrip { background: #fff; border-bottom: 1px solid var(--tz-border); }
.tz-catstrip__row {
  display: flex; gap: 4px; padding-block: 9px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.tz-catstrip__row::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .tz-catstrip__row { justify-content: space-between; gap: 8px; } }

.tz-cat {
  position: relative; flex: none; scroll-snap-align: start;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 7px; border-radius: var(--tz-r-pill);
  background: transparent; cursor: pointer;
  transition: background-color var(--tz-fast) var(--tz-ease);
}
.tz-cat__media {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--tz-warm); color: var(--tz-orange);
  transition: background-color var(--tz-base) var(--tz-ease), transform var(--tz-base) var(--tz-ease-out);
}
.tz-cat__media svg { transition: transform var(--tz-base) var(--tz-ease-out); }
.tz-cat__name {
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
  transition: color var(--tz-fast) var(--tz-ease);
}
/* The label's rule sweeps in from the left */
.tz-cat__name::after {
  content: ""; position: absolute; left: 55px; right: 14px; bottom: 5px; height: 1.5px;
  background: var(--tz-orange); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--tz-base) var(--tz-ease-out);
}
.tz-cat:hover { background: var(--tz-warm); }
.tz-cat:hover .tz-cat__media { background: var(--tz-orange-soft); transform: translateY(-2px); }
.tz-cat:hover .tz-cat__media svg { transform: scale(1.12); }
.tz-cat:hover .tz-cat__name::after { transform: scaleX(1); }

/* Synced with the carousel: the live category lights up */
.tz-cat[aria-current="true"] { background: var(--tz-orange-soft); }
.tz-cat[aria-current="true"] .tz-cat__media { background: #fff; }
.tz-cat[aria-current="true"] .tz-cat__name { color: var(--tz-orange-deep); }
.tz-cat[aria-current="true"] .tz-cat__name::after { transform: scaleX(1); }

/* ---- Stats — a single row of figures on desktop, hairlines only ---- */
.tz-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: 44px; border-top: 1px solid var(--tz-border);
}
@media (min-width: 680px)  { .tz-stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) {
  .tz-stats { grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--tz-border); }
}

.tz-stat { position: relative; padding: 28px 20px 30px 0; }
/* Below the one-row breakpoint each cell carries its own baseline rule */
.tz-stat::after {
  content: ""; position: absolute; left: 0; right: 20px; bottom: 0; height: 1px;
  background: var(--tz-border);
}
@media (min-width: 1100px) {
  .tz-stat { padding: 30px 18px 32px; }
  .tz-stat::after { display: none; }
  /* One row, so a leading divider can never land at the start of a wrap */
  .tz-stat + .tz-stat::before {
    content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 1px;
    background: var(--tz-border);
  }
}

.tz-stat__value {
  display: block; line-height: 1; letter-spacing: -0.03em; color: var(--tz-ink);
  font-size: clamp(34px, 4.4vw, 52px);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1100px) { .tz-stat__value { font-size: clamp(28px, 2.4vw, 38px); } }
/* Draws itself in as the figure counts up */
.tz-stat__rule {
  display: block; height: 2px; width: 0; margin-top: 14px; border-radius: 2px;
  background: linear-gradient(90deg, var(--tz-orange), rgba(243, 111, 33, 0.25));
  transition: width 1.1s var(--tz-ease-out) .15s;
}
.tz-reveal.is-in .tz-stat__rule { width: 44px; }
.tz-stat__label {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 13px; max-width: 24ch;
  font-size: 12.5px; line-height: 1.45; color: var(--tz-gray);
}
.tz-stat__label svg { flex: none; margin-top: 2px; color: var(--tz-orange); }

/* ---- Product range cards ---- */
.tz-range__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.tz-range {
  display: grid; gap: 18px; margin-top: 44px;
  grid-template-columns: repeat(2, 1fr);
  perspective: 1200px;
}
@media (min-width: 760px)  { .tz-range { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .tz-range { grid-template-columns: repeat(4, 1fr); } }

.tz-range__card {
  position: relative; display: flex; flex-direction: column;
  padding: 16px 16px 18px; background: #fff;
  border: 1px solid var(--tz-border); border-radius: var(--tz-r-card);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform .35s var(--tz-ease-out), box-shadow var(--tz-base) var(--tz-ease);
  will-change: transform;
}
/* Pointer tilt is tracked live, so shorten the easing while hovering */
.tz-range__card:hover {
  --ty: -8px;
  transition: transform .12s linear, box-shadow var(--tz-base) var(--tz-ease);
  box-shadow: 0 30px 60px -38px rgba(17, 17, 17, 0.5);
}

/* Gradient hairline that fades in around the card */
.tz-range__edge {
  position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--tz-orange), rgba(243, 111, 33, 0.05) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .45s var(--tz-ease);
}
.tz-range__card:hover .tz-range__edge { opacity: 1; }

.tz-range__no {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: var(--tz-border);
  transition: color var(--tz-base) var(--tz-ease), transform var(--tz-base) var(--tz-ease-out);
}
.tz-range__card:hover .tz-range__no { color: var(--tz-orange); transform: scale(1.15); }

.tz-range__media {
  position: relative; flex: none; display: grid; place-items: center;
  aspect-ratio: 4 / 3; border-radius: 10px; background: #fff;
}
/* Warm glow that blooms behind the product */
.tz-range__glow {
  position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 111, 33, 0.22) 0%, rgba(243, 111, 33, 0) 68%);
  opacity: 0; transform: scale(0.6);
  transition: opacity .5s var(--tz-ease), transform .6s var(--tz-ease-out);
}
.tz-range__card:hover .tz-range__glow { opacity: 1; transform: scale(1); }

/* The product drifts gently, each card offset so the grid never pulses in unison */
.tz-range__float {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%;
  animation: tz-drift 6.5s var(--tz-ease) infinite;
  animation-delay: var(--fd, 0s);
}
@keyframes tz-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.tz-range__media img {
  width: 88%; height: 88%; object-fit: contain;
  transition: transform .55s var(--tz-ease-out);
}
.tz-range__card:hover .tz-range__media img { transform: scale(1.13); }

.tz-range__body { display: block; margin-top: auto; padding-top: 14px; }
.tz-range__name {
  display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -0.015em;
  transition: color var(--tz-fast) var(--tz-ease);
}
.tz-range__card:hover .tz-range__name { color: var(--tz-orange); }
.tz-range__sub { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--tz-gray); }

/* Popup chip */
.tz-range__pop {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--tz-r-pill);
  background: var(--tz-orange); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  opacity: 0; transform: translateY(10px) scale(.92);
  transition: opacity var(--tz-base) var(--tz-ease), transform var(--tz-base) var(--tz-ease-out);
  box-shadow: 0 10px 22px -12px rgba(243, 111, 33, 0.9);
}
.tz-range__card:hover .tz-range__pop,
.tz-range__card:focus-visible .tz-range__pop { opacity: 1; transform: translateY(0) scale(1); }
.tz-range__card:hover .tz-range__body { opacity: 0; transition: opacity var(--tz-fast) var(--tz-ease); }

@media (prefers-reduced-motion: reduce) {
  .tz-range__float { animation: none !important; }
}

/* ---- Why Trazoo — numbered cards with a drawn accent ---- */
.tz-why {
  display: grid; gap: 16px; margin-top: 44px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px)  { .tz-why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .tz-why { grid-template-columns: repeat(3, 1fr); } }

.tz-why__card {
  position: relative; overflow: hidden;
  padding: 30px 26px 28px; background: #fff;
  border: 1px solid var(--tz-border); border-radius: var(--tz-r-card);
  transition: transform var(--tz-base) var(--tz-ease-out),
              border-color var(--tz-base) var(--tz-ease),
              box-shadow var(--tz-base) var(--tz-ease);
}
.tz-why__card:hover {
  transform: translateY(-5px); border-color: rgba(243, 111, 33, 0.42);
  box-shadow: 0 28px 54px -38px rgba(17, 17, 17, 0.45);
}
/* Accent rule across the top edge, drawn on hover */
.tz-why__accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--tz-orange), rgba(243, 111, 33, 0.15));
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--tz-ease-out);
}
.tz-why__card:hover .tz-why__accent { transform: scaleX(1); }
/* Oversized index numeral, sunk into the corner */
.tz-why__no {
  position: absolute; top: -6px; right: 14px;
  font-family: var(--tz-font-display); font-size: 72px; line-height: 1;
  color: var(--tz-ink); opacity: 0.055; letter-spacing: -0.04em;
  transition: opacity var(--tz-base) var(--tz-ease), transform var(--tz-base) var(--tz-ease-out);
}
.tz-why__card:hover .tz-why__no { opacity: 0.1; transform: translateY(2px); }
.tz-why__icon {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 20px;
  border-radius: 50%; border: 1px solid var(--tz-border);
  color: var(--tz-orange); background: #fff;
  transition: background-color var(--tz-base) var(--tz-ease),
              border-color var(--tz-base) var(--tz-ease),
              color var(--tz-base) var(--tz-ease);
}
.tz-why__card:hover .tz-why__icon {
  background: var(--tz-orange); border-color: var(--tz-orange); color: #fff;
}
.tz-why__name { position: relative; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.tz-why__desc { position: relative; margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: var(--tz-gray); }


/* ---- Pan-India map — light panel, tracing outline, glowing cities ---- */
.tz-india {
  position: relative; margin: 0; padding: 30px 28px 24px; overflow: hidden;
  border-radius: 20px; border: 1px solid var(--tz-border);
  background:
    radial-gradient(110% 80% at 70% 18%, rgba(243, 111, 33, 0.10) 0%, rgba(243, 111, 33, 0) 62%),
    linear-gradient(165deg, #ffffff 0%, var(--tz-warm) 100%);
}

.tz-india__map {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px; margin-inline: auto;
}
.tz-india__map svg { display: block; width: 100%; height: auto; }

/* Resting dots */
.tz-india__dots { display: block; color: #ddd8d0; }
/* Soft breathing bloom behind the country */
.tz-india__dots::after {
  content: ""; position: absolute; inset: 8% 12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 111, 33, 0.16) 0%, rgba(243, 111, 33, 0) 66%);
  animation: tz-india-bloom 6s var(--tz-ease) infinite;
  pointer-events: none;
}
@keyframes tz-india-bloom {
  0%, 100% { opacity: .5; transform: scale(.95); }
  50%      { opacity: 1;  transform: scale(1.05); }
}

/* The border traces itself, over and over */
.tz-india__outline { position: absolute; inset: 0; }
.tz-india__outline path {
  fill: none; stroke: var(--tz-orange); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 340 2600;
  filter: drop-shadow(0 0 5px rgba(243, 111, 33, 0.55));
  animation: tz-trace 7s linear infinite;
}
@keyframes tz-trace { from { stroke-dashoffset: 2940; } to { stroke-dashoffset: 0; } }

.tz-india__pin { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.tz-india__pin i {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tz-orange);
  box-shadow: 0 0 10px 2px rgba(243, 111, 33, 0.55);
  transform: scale(0);
  animation: tz-pin-in .5s var(--tz-ease-out) var(--pd, 0ms) forwards,
             tz-pin-pulse 3.2s var(--tz-ease) calc(var(--pd, 0ms) + 500ms) infinite;
}
@keyframes tz-pin-in { to { transform: scale(1); } }
@keyframes tz-pin-pulse {
  0%, 100% { box-shadow: 0 0 10px 2px rgba(243, 111, 33, 0.5); }
  50%      { box-shadow: 0 0 16px 4px rgba(243, 111, 33, 0.85); }
}
.tz-india__pin b {
  position: absolute; left: 50%; bottom: calc(100% + 5px);
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap; color: var(--tz-soft-ink);
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  animation: tz-pin-label .5s var(--tz-ease-out) calc(var(--pd, 0ms) + 220ms) forwards;
}
@keyframes tz-pin-label { to { opacity: .82; transform: translateX(-50%) translateY(0); } }
.tz-india__pin:hover { z-index: 5; }
.tz-india__pin:hover b {
  opacity: 1; color: #fff; font-size: 10px;
  background: var(--tz-ink); padding: 4px 8px; border-radius: 6px;
}

.tz-india__meta {
  position: relative; z-index: 1;
  display: grid; gap: 4px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--tz-border); text-align: center;
}
.tz-india__label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tz-orange);
}
.tz-india__city { font-family: var(--tz-font-display); font-size: 26px; line-height: 1.1; color: var(--tz-ink); }
.tz-india__note { font-size: 12px; color: var(--tz-gray); }

@media (prefers-reduced-motion: reduce) {
  .tz-india__dots::after, .tz-india__outline path { animation: none !important; }
  .tz-funnel__wires path { animation: none !important; }
  .tz-india__outline path { stroke-dasharray: none; opacity: .5; }
  .tz-india__pin i { animation: none !important; transform: scale(1); }
  .tz-india__pin b { animation: none !important; opacity: .82; transform: translateX(-50%); }
}

/* ---- About — four inputs converging on one deadline ---- */
.tz-funnel {
  margin-top: 44px; padding: 30px 28px 26px;
  background: var(--tz-warm); border: 1px solid var(--tz-border); border-radius: 18px;
}
.tz-funnel__body { display: grid; gap: 20px; align-items: center; }
@media (min-width: 820px) {
  .tz-funnel__body { grid-template-columns: minmax(190px, 260px) minmax(90px, 1fr) auto; gap: 0; }
}

.tz-funnel__inputs { display: grid; gap: 10px; list-style: none; }
@media (max-width: 819px) { .tz-funnel__inputs { grid-template-columns: repeat(2, 1fr); } }
.tz-funnel__in {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 16px; background: #fff;
  border: 1px solid var(--tz-border); border-radius: 11px;
  transition: transform var(--tz-base) var(--tz-ease-out), border-color var(--tz-base) var(--tz-ease);
}
.tz-funnel__in:hover { transform: translateX(4px); border-color: rgba(243, 111, 33, 0.45); }
.tz-funnel__in b { font-size: 25px; line-height: 1; color: var(--tz-ink); font-variant-numeric: tabular-nums; }
.tz-funnel__in span {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--tz-gray);
}

/* Wires drawing from each input into the single outcome */
.tz-funnel__wires { width: 100%; height: 220px; overflow: visible; }
@media (max-width: 819px) { .tz-funnel__wires { display: none; } }
/* A pulse travels each wire toward the single deadline. Drawn unconditionally
   rather than tied to reveal state, so the diagram is never blank. */
.tz-funnel__wires path {
  fill: none; stroke: var(--tz-orange); stroke-width: 1.6; stroke-linecap: round;
  opacity: .7; stroke-dasharray: 7 11;
  animation: tz-wire 2.2s linear infinite;
}
.tz-funnel__wires path:nth-child(2) { animation-delay: .25s; }
.tz-funnel__wires path:nth-child(3) { animation-delay: .5s; }
.tz-funnel__wires path:nth-child(4) { animation-delay: .75s; }
@keyframes tz-wire { to { stroke-dashoffset: -36; } }

.tz-funnel__out {
  justify-self: center; text-align: center; min-width: 150px;
  padding: 22px 26px; border-radius: 16px;
  background: var(--tz-ink); color: #fff;
  box-shadow: 0 22px 44px -28px rgba(17, 17, 17, 0.8);
}
.tz-funnel__out b {
  display: block; font-size: clamp(38px, 4.4vw, 52px); line-height: 1; color: var(--tz-orange);
}
.tz-funnel__out span {
  display: block; margin-top: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.tz-funnel__foot {
  display: flex; align-items: center; gap: 9px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--tz-border);
  font-size: 13px; color: var(--tz-gray);
}
.tz-funnel__foot svg { color: var(--tz-orange); flex: none; }

/* ---- Process — an interactive stepper ---- */
.tz-stepper { margin-top: 40px; }

.tz-stepper__tabs {
  position: relative; display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 1fr); gap: 8px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 6px;
}
.tz-stepper__tabs::-webkit-scrollbar { display: none; }
/* Rail behind the tabs, filled to the live stage */
.tz-stepper__rail {
  position: absolute; left: 26px; right: 26px; top: 25px; height: 2px;
  background: var(--tz-border);
}
.tz-stepper__fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--tz-orange), rgba(243, 111, 33, .45));
  transition: width .7s var(--tz-ease-out);
}

.tz-stepper__tab {
  position: relative; z-index: 1; display: grid; justify-items: start; gap: 8px;
  padding: 0 6px 6px 0; text-align: left; cursor: pointer;
}
.tz-stepper__dot {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; border: 1px solid var(--tz-border); color: var(--tz-gray);
  transition: background-color var(--tz-base) var(--tz-ease), color var(--tz-base) var(--tz-ease),
              border-color var(--tz-base) var(--tz-ease), transform var(--tz-base) var(--tz-ease-out);
}
.tz-stepper__tab:hover .tz-stepper__dot { border-color: var(--tz-orange); color: var(--tz-orange); }
.tz-stepper__tab.is-on .tz-stepper__dot {
  background: var(--tz-orange); border-color: var(--tz-orange); color: #fff;
  transform: scale(1.06); box-shadow: 0 10px 22px -12px rgba(243, 111, 33, .95);
}
.tz-stepper__tabno {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--tz-gray);
  transition: color var(--tz-base) var(--tz-ease);
}
.tz-stepper__tab.is-on .tz-stepper__tabno { color: var(--tz-orange); }
.tz-stepper__tabname {
  font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--tz-gray);
  transition: color var(--tz-base) var(--tz-ease);
}
.tz-stepper__tab.is-on .tz-stepper__tabname { color: var(--tz-ink); }

.tz-stepper__panels { margin-top: 26px; }
.tz-stage {
  display: grid; gap: 26px; align-items: center;
  padding: 26px; background: #fff;
  border: 1px solid var(--tz-border); border-radius: 18px;
  animation: tz-stage-in .55s var(--tz-ease-out) both;
}
@media (min-width: 860px) { .tz-stage { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); padding: 34px; gap: 40px; } }
@keyframes tz-stage-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.tz-stage__no {
  display: block; font-size: clamp(38px, 5vw, 62px); line-height: 1;
  color: var(--tz-border); letter-spacing: -.04em;
}
.tz-stage__name { margin-top: 6px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; }
.tz-stage__desc { margin-top: 12px; max-width: 46ch; font-size: 14.5px; line-height: 1.65; color: var(--tz-gray); }
.tz-stage__out {
  display: inline-flex; flex-direction: column; gap: 2px; margin-top: 20px;
  padding: 11px 16px; border-radius: 11px;
  background: var(--tz-warm); border: 1px solid var(--tz-border);
}
.tz-stage__outlbl {
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tz-gray);
}
.tz-stage__outval { font-size: 14px; font-weight: 700; color: var(--tz-ink); }
.tz-stage__media {
  margin: 0; display: grid; place-items: center;
  aspect-ratio: 4 / 3; border-radius: 14px; background: var(--tz-warm); overflow: hidden;
}
.tz-stage__media img { width: 88%; height: 88%; object-fit: contain; }

/* ---- Journal ---- */
.tz-posts { display: grid; gap: 20px; margin-top: 42px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .tz-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tz-posts { grid-template-columns: repeat(3, 1fr); } }

.tz-post {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--tz-border); border-radius: var(--tz-r-card);
  transition: transform var(--tz-base) var(--tz-ease-out), border-color var(--tz-base) var(--tz-ease),
              box-shadow var(--tz-base) var(--tz-ease);
}
.tz-post:hover {
  transform: translateY(-5px); border-color: rgba(243, 111, 33, .42);
  box-shadow: 0 28px 54px -38px rgba(17, 17, 17, .45);
}
.tz-post__media {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10; background: var(--tz-warm); overflow: hidden;
}
.tz-post__media img { width: 84%; height: 84%; object-fit: contain; transition: transform .6s var(--tz-ease-out); }
.tz-post:hover .tz-post__media img { transform: scale(1.08); }
.tz-post__tag {
  position: absolute; left: 14px; top: 14px;
  padding: 5px 11px; border-radius: var(--tz-r-pill);
  background: var(--tz-ink); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.tz-post__body { display: flex; flex-direction: column; padding: 18px 20px 22px; flex: 1; }
.tz-post__meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--tz-gray);
}
.tz-post__meta svg { color: var(--tz-orange); }
.tz-post__title { margin-top: 9px; font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.tz-post__title a { position: relative; }
.tz-post__title a::after { content: ""; position: absolute; inset: 0; }
.tz-post:hover .tz-post__title { color: var(--tz-orange); }
.tz-post__excerpt { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--tz-gray); }
.tz-post__more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 16px;
  font-size: 12.5px; font-weight: 800; color: var(--tz-ink);
}
.tz-post__more svg { color: var(--tz-orange); transition: transform var(--tz-base) var(--tz-ease); }
.tz-post:hover .tz-post__more svg { transform: translateX(4px); }

/* ---- Gallery ---- */
.tz-gallery {
  display: grid; gap: 14px; margin-top: 42px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px)  { .tz-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .tz-gallery { grid-template-columns: repeat(4, 1fr); } }
.tz-gallery__cell {
  position: relative; margin: 0; overflow: hidden;
  display: grid; place-items: center; aspect-ratio: 1 / 1;
  background: #fff; border: 1px solid var(--tz-border); border-radius: var(--tz-r-card);
}
@media (min-width: 760px) { .tz-gallery__cell.is-wide { grid-column: span 2; aspect-ratio: 2 / 1; } }
.tz-gallery__cell img {
  width: 84%; height: 84%; object-fit: contain;
  transition: transform .6s var(--tz-ease-out);
}
.tz-gallery__cell:hover img { transform: scale(1.07); }
.tz-gallery__cell figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px; border-radius: 10px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border: 1px solid var(--tz-border);
  font-size: 12px; font-weight: 700;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--tz-base) var(--tz-ease), transform var(--tz-base) var(--tz-ease-out);
}
.tz-gallery__cell figcaption svg { color: var(--tz-orange); }
.tz-gallery__cell:hover figcaption { opacity: 1; transform: none; }

/* ---- Social ---- */
.tz-social__grid { display: grid; gap: 36px; }
@media (min-width: 940px) { .tz-social__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; } }

.tz-social__links { list-style: none; display: grid; gap: 10px; margin-top: 26px; }
.tz-social__links a {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; border-radius: 12px;
  background: #fff; border: 1px solid var(--tz-border);
  transition: border-color var(--tz-fast) var(--tz-ease), transform var(--tz-fast) var(--tz-ease);
}
.tz-social__links a:hover { border-color: var(--tz-orange); transform: translateX(4px); }
.tz-social__links a > svg:last-child { margin-left: auto; color: var(--tz-orange); }
.tz-social__ico {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; background: var(--tz-orange-soft); color: var(--tz-orange);
  transition: background-color var(--tz-fast) var(--tz-ease), color var(--tz-fast) var(--tz-ease);
}
.tz-social__links a:hover .tz-social__ico { background: var(--tz-orange); color: #fff; }
.tz-social__net { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.tz-social__handle { display: block; margin-top: 1px; font-size: 12px; color: var(--tz-gray); }

.tz-social__feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tz-social__tile {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--tz-warm); border: 1px solid var(--tz-border); border-radius: 14px;
}
.tz-social__tile img { width: 86%; height: 86%; object-fit: contain; transition: transform .55s var(--tz-ease-out); }
.tz-social__tile:hover img { transform: scale(1.09); }
.tz-social__badge {
  position: absolute; right: 10px; top: 10px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--tz-orange);
  opacity: 0; transform: scale(.8);
  transition: opacity var(--tz-base) var(--tz-ease), transform var(--tz-base) var(--tz-ease-out);
}
.tz-social__tile:hover .tz-social__badge { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) { .tz-stage { animation: none !important; } }

/* ---- Gifting programmes ---- */
.tz-prog {
  display: grid; gap: 18px; margin-top: 44px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 620px)  { .tz-prog { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tz-prog { grid-template-columns: repeat(3, 1fr); } }

.tz-prog__card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--tz-border); border-radius: var(--tz-r-card);
  transition: transform var(--tz-base) var(--tz-ease-out),
              border-color var(--tz-base) var(--tz-ease),
              box-shadow var(--tz-base) var(--tz-ease);
}
.tz-prog__card:hover {
  transform: translateY(-5px); border-color: rgba(243, 111, 33, 0.42);
  box-shadow: 0 28px 54px -38px rgba(17, 17, 17, 0.45);
}
.tz-prog__media {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10; background: var(--tz-warm); overflow: hidden;
}
.tz-prog__media img {
  width: 84%; height: 84%; object-fit: contain;
  transition: transform .6s var(--tz-ease-out);
}
.tz-prog__card:hover .tz-prog__media img { transform: scale(1.09); }
.tz-prog__no {
  position: absolute; left: 16px; top: 14px;
  font-family: var(--tz-font-display); font-size: 26px; line-height: 1;
  color: var(--tz-ink); opacity: 0.16;
  transition: color var(--tz-base) var(--tz-ease), opacity var(--tz-base) var(--tz-ease);
}
.tz-prog__card:hover .tz-prog__no { color: var(--tz-orange); opacity: 1; }

.tz-prog__body { display: block; padding: 18px 20px 22px; }
.tz-prog__icon {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px;
  border-radius: 50%; border: 1px solid var(--tz-border); color: var(--tz-orange); background: #fff;
  transition: background-color var(--tz-base) var(--tz-ease), color var(--tz-base) var(--tz-ease),
              border-color var(--tz-base) var(--tz-ease);
}
.tz-prog__card:hover .tz-prog__icon {
  background: var(--tz-orange); border-color: var(--tz-orange); color: #fff;
}
.tz-prog__name { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.tz-prog__desc { margin-top: 7px; font-size: 13px; line-height: 1.55; color: var(--tz-gray); }

/* ---- Pull quote ---- */
.tz-note {
  position: relative; padding-left: 22px;
  font-family: var(--tz-font-display); font-size: clamp(18px, 2.1vw, 25px); line-height: 1.42;
}
.tz-note::before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 3px; border-radius: 2px; background: var(--tz-orange);
}
.tz-note em { font-style: italic; color: var(--tz-orange); }

/* ---- Handled chain ---- */
.tz-chain { display: flex; flex-wrap: wrap; gap: 8px; }
.tz-chain__item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--tz-r-pill);
  border: 1px solid var(--tz-border); background: #fff;
  font-size: 13px; font-weight: 700;
  transition: border-color var(--tz-fast) var(--tz-ease), transform var(--tz-fast) var(--tz-ease);
}
.tz-chain__item:hover { border-color: var(--tz-orange); transform: translateY(-2px); }
.tz-chain__item i { width: 6px; height: 6px; border-radius: 50%; background: var(--tz-orange); }

/* ---- Leather CTA band ---- */
.tz-cta {
  position: relative; color: #fff;
  background-image: linear-gradient(rgba(96, 36, 4, 0.42), rgba(96, 36, 4, 0.52)),
                    url("../images/branding/leather.webp");
  background-size: cover; background-position: center;
  padding-block: 56px;
}
@media (min-width: 768px) { .tz-cta { padding-block: 76px; } }
.tz-cta__inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .tz-cta__inner { grid-template-columns: 1fr auto; gap: 48px; } }
.tz-btn--onleather { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.tz-btn--onleather:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* Give the banner room for the leather rail */

/* --------------------------------------------------------------------------
   9. OVERLAYS — scrim, drawer, modal
   -------------------------------------------------------------------------- */
.tz-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17, 17, 17, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--tz-base) var(--tz-ease), visibility var(--tz-base);
}
.tz-scrim.is-open { opacity: 1; visibility: visible; }

.tz-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(420px, 92vw);
  background: #fff; display: flex; flex-direction: column;
  box-shadow: var(--tz-shadow-float);
  transform: translateX(101%); visibility: hidden;
  transition: transform var(--tz-base) var(--tz-ease-out), visibility var(--tz-base);
}
.tz-drawer.is-open { transform: translateX(0); visibility: visible; }
.tz-drawer--left { right: auto; left: 0; transform: translateX(-101%); width: min(380px, 90vw); }
.tz-drawer--left.is-open { transform: translateX(0); }

.tz-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--tz-border); flex: none;
}
.tz-drawer__title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.tz-drawer__body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.tz-drawer__foot { flex: none; padding: 18px 20px; border-top: 1px solid var(--tz-border); background: var(--tz-warm); }

.tz-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 0; opacity: 0; visibility: hidden;
  transition: opacity var(--tz-base) var(--tz-ease), visibility var(--tz-base);
}
.tz-modal.is-open { opacity: 1; visibility: visible; }
.tz-modal__panel {
  width: 100%; background: #fff; border-bottom: 1px solid var(--tz-border);
  box-shadow: var(--tz-shadow-menu);
  transform: translateY(-14px); transition: transform var(--tz-base) var(--tz-ease-out);
  max-height: 100vh; overflow-y: auto;
}
.tz-modal.is-open .tz-modal__panel { transform: translateY(0); }

/* Inputs */
.tz-input {
  width: 100%; height: 48px; padding: 0 16px;
  background: #fff; border: 1px solid var(--tz-border); border-radius: var(--tz-r-input);
  font-family: inherit; font-size: 15px; color: var(--tz-ink);
  transition: border-color var(--tz-fast) var(--tz-ease), box-shadow var(--tz-fast) var(--tz-ease);
}
.tz-input::placeholder { color: #9a9a9a; }
.tz-input:focus { outline: none; border-color: var(--tz-ink); box-shadow: 0 0 0 3px rgba(243, 111, 33, 0.14); }
.tz-input--lg { height: 62px; font-size: 17px; border: 0; border-radius: 0; padding-inline: 0; }
.tz-input--lg:focus { box-shadow: none; }

/* Toast */
.tz-toasts {
  position: fixed; z-index: 120; left: 50%; bottom: 92px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; width: max-content; max-width: 92vw;
}
@media (min-width: 768px) { .tz-toasts { left: auto; right: 28px; bottom: 28px; transform: none; } }
.tz-toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--tz-ink); color: #fff; padding: 12px 18px;
  border-radius: var(--tz-r-btn); font-size: 14px; font-weight: 600;
  box-shadow: var(--tz-shadow-float);
  animation: tz-toast-in 320ms var(--tz-ease-out);
}
.tz-toast svg { color: var(--tz-orange); flex: none; }
.tz-toast.is-out { animation: tz-toast-out 260ms var(--tz-ease) forwards; }
@keyframes tz-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tz-toast-out { to { opacity: 0; transform: translateY(8px); } }


/* --------------------------------------------------------------------------
   9b. FOOTER
   -------------------------------------------------------------------------- */
.tz-footer { background: var(--tz-ink); color: #fff; padding-block: 56px 0; }
@media (min-width: 768px) { .tz-footer { padding-block: 72px 0; } }

.tz-footer__top { display: grid; gap: 44px; padding-bottom: 44px; }
@media (min-width: 900px) { .tz-footer__top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; } }

.tz-footer__brand img { display: block; width: auto; height: 40px; filter: brightness(0) invert(1); opacity: .95; }
.tz-footer__line { margin-top: 22px; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.18; }
.tz-footer__line em { font-style: italic; color: var(--tz-orange); }
.tz-footer__blurb {
  margin-top: 14px; max-width: 46ch; font-size: 14px; line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}
.tz-footer__brand .tz-btn { margin-top: 22px; }

.tz-footer__head {
  font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tz-orange); padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 16px;
}
.tz-footer__rows, .tz-footer__social { list-style: none; display: grid; gap: 14px; }
@media (min-width: 520px) { .tz-footer__rows, .tz-footer__social { grid-template-columns: repeat(2, 1fr); } }
.tz-footer__rows li, .tz-footer__social a { display: flex; align-items: flex-start; gap: 11px; }
.tz-footer__ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 50%; background: rgba(243, 111, 33, 0.16); color: var(--tz-orange);
  transition: background-color var(--tz-fast) var(--tz-ease), color var(--tz-fast) var(--tz-ease);
}
.tz-footer__social a:hover .tz-footer__ico { background: var(--tz-orange); color: #fff; }
.tz-footer__lbl {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
}
.tz-footer__val {
  display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: #fff;
  transition: color var(--tz-fast) var(--tz-ease);
}
a.tz-footer__val:hover, .tz-footer__social a:hover .tz-footer__val { color: var(--tz-orange); }

.tz-footer__nav {
  display: grid; gap: 32px; padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 620px) { .tz-footer__nav { grid-template-columns: repeat(3, 1fr); } }
.tz-footer__nav ul { list-style: none; display: grid; gap: 9px; }
.tz-footer__nav a {
  font-size: 13.5px; color: rgba(255, 255, 255, 0.66);
  transition: color var(--tz-fast) var(--tz-ease), padding-left var(--tz-fast) var(--tz-ease);
}
.tz-footer__nav a:hover { color: var(--tz-orange); padding-left: 4px; }

.tz-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px; color: rgba(255, 255, 255, 0.45);
}
.tz-footer__legal { display: flex; align-items: center; gap: 10px; }
.tz-footer__legal a { color: rgba(255, 255, 255, 0.6); transition: color var(--tz-fast) var(--tz-ease); }
.tz-footer__legal a:hover { color: var(--tz-orange); }
@media (max-width: 767px) { .tz-footer__bar { padding-bottom: 76px; } }

/* --------------------------------------------------------------------------
   10. MOBILE BOTTOM NAV
   -------------------------------------------------------------------------- */
.tz-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--tz-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tz-bottomnav a, .tz-bottomnav button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 60px; font-size: 10.5px; font-weight: 700; color: var(--tz-gray);
  transition: color var(--tz-fast) var(--tz-ease);
}
.tz-bottomnav .is-current, .tz-bottomnav a:hover, .tz-bottomnav button:hover { color: var(--tz-orange); }
.tz-bottomnav .tz-count { top: 6px; right: 50%; margin-right: -22px; }
@media (min-width: 768px) { .tz-bottomnav { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 60px; } }

/* --------------------------------------------------------------------------
   11. SECTION ACCENTS
   -------------------------------------------------------------------------- */
.tz-value__icon { color: var(--tz-orange); }

/* --------------------------------------------------------------------------
   11b. NARROW PHONES (≤360px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .tz-container { padding-inline: 16px; }
  .tz-logo__mark { width: 26px; height: 26px; }
  .tz-logo__word { font-size: 18px; letter-spacing: 0.15em; }
  .tz-iconbtn { width: 40px; }
  .tz-hide-xs { display: none; }
}

/* --------------------------------------------------------------------------
   12. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.tz-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--tz-slow) var(--tz-ease-out), transform var(--tz-slow) var(--tz-ease-out);
  transition-delay: var(--tz-delay, 0ms);
}
.tz-reveal.is-in { opacity: 1; transform: none; }
.tz-reveal--scale { transform: translateY(18px) scale(0.985); }

/* --------------------------------------------------------------------------
   13. INTRO — the gift-box reveal
   Three frames of artwork, keyed to alpha and aligned on the box base, so they
   cross-dissolve into one continuous lid-lift instead of cutting between shots.
   Placement comes from assets/images/loader/frames.json (see build script).
   -------------------------------------------------------------------------- */
.tz-intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: #fff;
  overflow: hidden;
  animation: tz-intro-out 620ms var(--tz-ease) 3280ms forwards;
  animation-play-state: paused;
}
.tz-intro.is-playing,
.tz-intro.is-playing .tz-intro__stage,
.tz-intro.is-playing .tz-intro__frame,
.tz-intro.is-playing .tz-intro__glow,
.tz-intro.is-playing .tz-intro__shadow,
.tz-intro.is-playing .tz-intro__wash,
.tz-intro.is-playing .tz-intro__bar span { animation-play-state: running; }
.tz-intro__stage, .tz-intro__frame, .tz-intro__glow,
.tz-intro__shadow, .tz-intro__wash, .tz-intro__bar span { animation-play-state: paused; }
.tz-intro[hidden] { display: none; }
.tz-intro::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 50% 46%, #ffffff 58%, #fffaf5 100%);
}
@keyframes tz-intro-out { to { opacity: 0; visibility: hidden; } }

/* The stage carries one slow rise for the whole sequence, so the box is always
   in motion and the dissolves ride on top of it. */
.tz-intro__stage {
  position: relative; z-index: 1;
  width: min(76vw, 450px); aspect-ratio: 1 / 1;
  animation: tz-stage 3500ms var(--tz-ease-out) both;
  will-change: transform;
}
@keyframes tz-stage {
  0%   { transform: translateY(16px) scale(0.97); }
  16%  { transform: translateY(2px)  scale(1); }
  66%  { transform: translateY(-10px) scale(1.03); }
  100% { transform: translateY(-26px) scale(1.11); }
}

.tz-intro__frame {
  position: absolute; z-index: 2;
  left: var(--x); top: var(--y); width: var(--w); height: auto;
  opacity: 0; will-change: opacity;
}
.tz-intro__frame--a { animation: tz-frame-a 1650ms var(--tz-ease) 0ms both; }
.tz-intro__frame--b { animation: tz-frame-b 1450ms var(--tz-ease) 1250ms both; }
.tz-intro__frame--c { animation: tz-frame-c 1400ms var(--tz-ease) 2300ms both; }

/* Each pair hands over as a true cross-dissolve: one fades out over exactly the
   window the next fades in. */
@keyframes tz-frame-a { 0% { opacity: 0; } 28% { opacity: 1; } 76% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tz-frame-b { 0% { opacity: 0; } 28% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tz-frame-c { 0% { opacity: 0; } 28% { opacity: 1; } 100% { opacity: 1; } }

/* Warm light blooming out of the box, behind the artwork */
.tz-intro__glow {
  position: absolute; z-index: 1; left: 50%; top: 60%;
  width: 78%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 244, 224, 0.95) 0%,
              rgba(255, 196, 118, 0.60) 30%,
              rgba(243, 111, 33, 0.22) 52%,
              rgba(243, 111, 33, 0) 72%);
  opacity: 0; transform: translate(-50%, -50%) scale(0.15);
  animation: tz-glow 2450ms var(--tz-ease-out) 1150ms both;
  will-change: transform, opacity;
}
@keyframes tz-glow {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.15); }
  32%  { opacity: 0.9;  transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 1;    transform: translate(-50%, -50%) scale(2); }
}

/* Contact shadow that lightens as the box lifts */
.tz-intro__shadow {
  position: absolute; z-index: 0; left: 50%; top: 81%;
  width: 42%; height: 6%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(17, 17, 17, 0.22) 0%, rgba(17, 17, 17, 0) 70%);
  animation: tz-shadow 3500ms var(--tz-ease-out) both;
}
@keyframes tz-shadow {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.7, 0.8); }
  16%  { opacity: 1;    transform: translate(-50%, -50%) scale(1, 1); }
  100% { opacity: 0.35; transform: translate(-50%, -50%) scale(1.3, 0.7); }
}

/* Light wash that expands and hands off to the homepage */
.tz-intro__wash {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax;
  border-radius: 50%;
  background: radial-gradient(circle,
              #ffffff 0%, rgba(255, 247, 240, 0.96) 42%, rgba(255, 255, 255, 0) 72%);
  opacity: 0; transform: scale(0.05);
  animation: tz-wash 1200ms var(--tz-ease-out) 2520ms forwards;
  will-change: transform, opacity;
}
@keyframes tz-wash {
  0%   { opacity: 0; transform: scale(0.05); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: scale(4); }
}

.tz-intro__word {
  position: absolute; left: 0; right: 0; bottom: 21%; z-index: 4;
  text-align: center; font-size: 14px; font-weight: 800;
  letter-spacing: 0.44em; text-transform: uppercase; color: var(--tz-ink);
  opacity: 0; animation: tz-word 900ms var(--tz-ease-out) 900ms forwards;
}
@keyframes tz-word { from { opacity: 0; letter-spacing: 0.62em; } to { opacity: 1; letter-spacing: 0.44em; } }

.tz-intro__bar {
  position: absolute; left: 50%; bottom: 17%; z-index: 4;
  width: 132px; height: 2px; margin-left: -66px;
  background: var(--tz-border); border-radius: 2px; overflow: hidden;
}
.tz-intro__bar span {
  display: block; height: 100%; width: 100%;
  background: var(--tz-orange);
  transform: scaleX(0); transform-origin: left;
  animation: tz-bar 3150ms var(--tz-ease) both;
}
@keyframes tz-bar { to { transform: scaleX(1); } }

.tz-intro__skip {
  position: absolute; right: 22px; bottom: 22px; z-index: 5;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tz-gray); padding: 10px 16px;
  border: 1px solid var(--tz-border); border-radius: var(--tz-r-pill); background: #fff;
  transition: all var(--tz-fast) var(--tz-ease);
}
.tz-intro__skip:hover { color: var(--tz-ink); border-color: var(--tz-ink); }

.tz-page--intro { animation: tz-page-in 1100ms var(--tz-ease-out) 2400ms both; }
/* Settles up to full size rather than down from oversize — scaling past 100%
   makes the wrapper wider than the viewport and flashes a scrollbar. */
@keyframes tz-page-in { from { opacity: 0; transform: scale(0.992); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   14. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .tz-reveal { opacity: 1; transform: none; }
  .tz-rail { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   15. INTRO SKIP STATE (set pre-paint by the inline head script)
   -------------------------------------------------------------------------- */
.tz-no-intro .tz-intro { display: none !important; }
.tz-no-intro .tz-page--intro { animation: none !important; opacity: 1; }