/* ===================================================================
   TAZRIRT Home page - custom stylesheet
   Loaded ONLY on the Home page (ID 22). Root: .tz-home
   Tokens mirror tz-cr.css (Custom Rugs) so both pages share one mood.
   =================================================================== */

.tz-home {
  --cream: #FAF7F2;
  --sand: #EFE3D3;
  --forest: #303B32;
  --blush: #F3E2D8;
  --terracotta: #98452F;
  --dark: #241F1A;
  --muted: #5A5045;
  --muted-on-dark: rgba(250,247,242,0.82);
  --gold: #D9A56A;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--cream);
}
.tz-home *, .tz-home *::before, .tz-home *::after { box-sizing: border-box; }
.tz-home img { max-width: 100%; }
.tz-home .tz-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===================================================================
   SECTION 1 - HERO (two photographs)
   --s is the hero state: 0 = Atlas panorama showing, 1 = sale poster showing.
   Without JS each device simply shows the photo made for it:
   landscape panorama on wide screens, portrait poster on phones.
   The phone query below must stay identical to 'mobile_query' in
   tazrirt-home-template.php.
   =================================================================== */

.tz-hh { position: relative; background: var(--cream); --s: 0; }
@media (max-width: 899px) and (orientation: portrait) { .tz-hh { --s: 1; } }
.tz-hh.is-pano { --s: 0; }
.tz-hh.is-sale { --s: 1; }

/* ---------- Stage ---------- */
.tz-hh__stage {
  position: relative; width: 100%; aspect-ratio: 2560 / 1086;
  /* keep the whole photograph inside the first screen under the header */
  max-height: max(420px, calc(100vh - 230px));
  overflow: hidden; isolation: isolate; background: var(--dark);
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
  animation: tz-hh-open 1500ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.tz-hh__zoom {
  position: absolute; inset: 0;
  animation: tz-hh-settle 2000ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
/* Entrance: the photo starts as a framed print and opens to the full width. */
@keyframes tz-hh-open {
  from { clip-path: inset(9% 6% 9% 6% round 20px); }
  to   { clip-path: inset(0% 0% 0% 0% round 0px); }
}
@keyframes tz-hh-settle {
  from { transform: scale(1.14); }
  to   { transform: scale(1); }
}

.tz-hh__slide { position: absolute; inset: 0; display: block; }
.tz-hh__slide picture { display: block; width: 100%; height: 100%; }
.tz-home .tz-hh__img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; border-radius: 0; will-change: transform;
}

/* ---------- Panorama: slow drift while it is on screen ----------
   If the stage is ever shorter than the photo, trim the wool-carding side
   first so the weavers on the right stay whole. */
.tz-home .tz-hh__slide--pano .tz-hh__img { object-position: 72% 50%; }
.tz-hh__slide--pano.is-live .tz-hh__img { animation: tz-hh-drift 16s ease-in-out infinite alternate; }
@keyframes tz-hh-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1%, 0, 0); }
}

/* ---------- Veil: soft blurred copy of the panorama behind the poster ---------- */
.tz-hh__veil {
  position: absolute; inset: -2%; pointer-events: none;
  background-color: var(--dark);
  background-image: linear-gradient(rgba(36,31,26,0.46), rgba(36,31,26,0.64)), var(--tz-hh-veil, none);
  background-size: cover; background-position: center;
  opacity: var(--s); transition: opacity 800ms ease;
}

/* ---------- Sale poster: rises in front of the veiled panorama ---------- */
.tz-hh__slide--sale {
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  opacity: var(--s);
  transform: translate3d(0, calc((1 - var(--s)) * 48px), 0) scale(calc(0.94 + var(--s) * 0.06));
  transition: opacity 700ms ease, transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tz-hh.is-sale .tz-hh__slide--sale { transition-delay: 120ms; }
.tz-home .tz-hh__poster {
  position: relative; display: block; height: 88%; aspect-ratio: 2 / 3;
  border-radius: 12px; overflow: hidden; pointer-events: auto; text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 44px 80px -28px rgba(0,0,0,0.72);
}
.tz-hh__slide--sale[inert] .tz-hh__poster { pointer-events: none; }
.tz-hh__slide--sale.is-live .tz-hh__poster { animation: tz-hh-float 7s ease-in-out infinite alternate; }
@keyframes tz-hh-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -10px, 0); }
}
/* A band of light crosses the poster once when it arrives (same gesture as the site buttons). */
.tz-hh__poster::after {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -80%; width: 55%;
  transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.26), rgba(255,255,255,0));
}
.tz-hh__slide--sale.is-live .tz-hh__poster::after { animation: tz-hh-shine 1500ms cubic-bezier(0.22, 1, 0.36, 1) 650ms both; }
@keyframes tz-hh-shine {
  from { left: -80%; }
  to   { left: 140%; }
}
.tz-hh__poster picture { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) {
  .tz-hh__poster:hover picture { transform: scale(1.025); }
}
.tz-home .tz-hh__poster:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }

/* Without JS on wide screens the poster never shows, so keep it out of the way entirely. */
@media not all and (max-width: 899px) and (orientation: portrait) {
  .tz-hh:not(.tz-hh--js) .tz-hh__slide--sale { visibility: hidden; }
}

/* ---------- Phones and upright tablets ----------
   Poster fills the stage. The panorama is taller than the screen is wide,
   so it travels sideways like a slow camera pan. */
@media (max-width: 899px) and (orientation: portrait) {
  .tz-hh__stage { aspect-ratio: 2 / 3; max-height: 86vh; max-height: 86svh; }
  .tz-hh__veil { display: none; }

  .tz-home .tz-hh__slide--pano .tz-hh__img {
    width: auto; height: 100%; aspect-ratio: 2560 / 1086; object-fit: fill;
  }
  .tz-hh__slide--pano.is-live .tz-hh__img {
    animation: tz-hh-pan var(--tz-hh-pan, 11s) cubic-bezier(0.45, 0, 0.55, 1) both;
  }

  .tz-hh__slide--sale {
    opacity: 1; transform: none; background: var(--dark);
    clip-path: inset(0 0 0 calc((1 - var(--s)) * 100%));
    transition: clip-path 1000ms cubic-bezier(0.77, 0, 0.18, 1);
  }
  .tz-hh.is-sale .tz-hh__slide--sale { transition-delay: 0ms; }
  .tz-home .tz-hh__poster {
    width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none;
  }
  .tz-hh__slide--sale.is-live .tz-hh__poster { animation: none; }
  .tz-hh__poster::after { display: none; }
  .tz-hh__poster picture {
    transform: translate3d(calc((1 - var(--s)) * 14%), 0, 0);
    transition: transform 1000ms cubic-bezier(0.77, 0, 0.18, 1);
  }
  .tz-home .tz-hh__slide--sale .tz-hh__img { object-fit: contain; }
  .tz-hh__slide--sale.is-live .tz-hh__img { animation: tz-hh-breathe 9s ease-out both; }
}
@keyframes tz-hh-pan {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% + var(--tz-hh-w, 100vw)), 0, 0); }
}
@keyframes tz-hh-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

/* ---------- Controls (built by JS, so they only exist when the slideshow works) ---------- */
.tz-hh__controls { display: none; align-items: center; justify-content: center; gap: 14px; padding: 14px 20px 18px; }
.tz-hh--js .tz-hh__controls { display: flex; }

.tz-home .tz-hh__seg,
.tz-home .tz-hh__seg:hover,
.tz-home .tz-hh__seg:focus {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 6px; margin: 0;
  background: transparent; border: 0; border-radius: 4px; box-shadow: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.5px; line-height: 1;
  color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color 260ms ease;
}
.tz-home .tz-hh__seg.is-active,
.tz-home .tz-hh__seg:hover { color: var(--dark); }
.tz-hh__num { font-variant-numeric: tabular-nums; }
.tz-hh__bar {
  position: relative; display: block; width: 64px; height: 2px; border-radius: 2px;
  overflow: hidden; background: rgba(36,31,26,0.16);
}
.tz-hh__fill {
  position: absolute; inset: 0; background: var(--terracotta);
  transform: scaleX(0); transform-origin: left center;
}
.tz-hh__seg.is-active .tz-hh__fill { animation: tz-hh-fill var(--tz-hh-dur, 7s) linear forwards; }
@keyframes tz-hh-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.tz-home .tz-hh__toggle,
.tz-home .tz-hh__toggle:hover,
.tz-home .tz-hh__toggle:focus {
  position: relative; flex: 0 0 auto; width: 40px; height: 40px; min-height: 0; padding: 0; margin: 0 0 0 4px;
  background: transparent; border: 1px solid rgba(36,31,26,0.22); border-radius: 50%; box-shadow: none;
  color: var(--dark); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 260ms ease, background-color 260ms ease;
}
.tz-home .tz-hh__toggle:hover { border-color: var(--terracotta); background: rgba(152,69,47,0.06); }
.tz-hh__toggle::before, .tz-hh__toggle::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 12px;
  margin: -6px 0 0 -5px; border-radius: 1px; background: currentColor;
}
.tz-hh__toggle::after { margin-left: 2px; }
.tz-hh__toggle[aria-pressed="true"]::before {
  width: 0; height: 0; margin: -6px 0 0 -3px; border-radius: 0; background: transparent;
  border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}
.tz-hh__toggle[aria-pressed="true"]::after { display: none; }
.tz-home .tz-hh__seg:focus-visible,
.tz-home .tz-hh__toggle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* ---------- Paused: hover, pause button, off screen or still loading ---------- */
.tz-hh.is-paused .tz-hh__fill,
.tz-hh.is-paused .is-live .tz-hh__img,
.tz-hh.is-paused .is-live .tz-hh__poster { animation-play-state: paused; }

/* ---------- Reduced motion: two still photographs, switched by hand ---------- */
@media (prefers-reduced-motion: reduce) {
  .tz-hh__stage, .tz-hh__zoom,
  .tz-hh .tz-hh__img, .tz-hh .tz-hh__poster, .tz-hh .tz-hh__poster::after, .tz-hh .tz-hh__fill { animation: none !important; }
  .tz-hh__veil, .tz-hh__slide--sale, .tz-hh__poster picture { transition: none !important; }
  .tz-hh__seg.is-active .tz-hh__fill { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 899px) and (orientation: portrait) {
  .tz-home .tz-hh__slide--pano .tz-hh__img {
    width: 100%; aspect-ratio: auto; object-fit: cover; object-position: 36% 50%;
  }
}

/* ===================================================================
   SHARED BASE for sections 2 and later
   Same typography, section shell and reveal rule as tz-cr.css.
   =================================================================== */

.tz-home h2, .tz-home h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 18px; color: var(--dark); }
.tz-home h2 { font-size: clamp(30px, 4vw, 40px); }
.tz-home h3 { font-size: 22px; }
.tz-home p, .tz-home li { font-family: var(--font-body); font-size: 18px; line-height: 1.65; color: var(--muted); margin: 0 0 16px; }
.tz-home .tz-on-dark h2, .tz-home .tz-on-dark h3 { color: var(--cream); }
.tz-home .tz-on-dark p, .tz-home .tz-on-dark li { color: var(--muted-on-dark); }
@media (max-width: 767px) {
  .tz-home p, .tz-home li { font-size: 17px; }
}

.tz-home .tz-section { padding: 96px 32px; display: flex; justify-content: center; }
.tz-home .tz-section-inner { width: 100%; max-width: 1180px; }
.tz-home .tz-section--cream { background: var(--cream); }
.tz-home .tz-section--sand { background: var(--sand); }
.tz-home .tz-section--forest { background: var(--forest); }
.tz-home .tz-section--blush { background: var(--blush); }
.tz-home .tz-section--terracotta { background: var(--terracotta); }
@media (max-width: 767px) { .tz-home .tz-section { padding: 56px 20px; } }

/* Reveal on scroll: VISIBLE BY DEFAULT. JS opts elements in (see tz-home.js). */
.tz-home .tz-reveal.tz-pending { opacity: 0; transform: translateY(24px); }
.tz-home .tz-reveal.tz-anim-ready.tz-pending { transition: opacity 750ms ease, transform 750ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-home .tz-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .tz-home .tz-reveal.tz-pending { opacity: 1; transform: none; transition: none; }
}

/* ===================================================================
   SECTION 2 - THE FILM
   Tagline + heading, then the documentary behind a poster. The play
   button is the invitation: a slow ring of words turns around it, it
   breathes, and on a mouse it leans toward the cursor.
   =================================================================== */

.tz-fs__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0 52px; }
.tz-home .tz-fs__tagline {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 25px; line-height: 1.2; letter-spacing: 0.2px; color: var(--gold); margin: 0 0 16px;
}
.tz-fs__tagline::before, .tz-fs__tagline::after { content: ''; flex: 0 0 auto; width: 44px; height: 1px; background: rgba(217,165,106,0.55); }
.tz-home .tz-fs__head h2 { font-size: clamp(30px, 4.2vw, 46px); max-width: 900px; margin: 0; text-wrap: balance; }

.tz-fs__frame { position: relative; }
.tz-fs__screen { position: relative; }
.tz-fs__screen::before {
  content: ''; position: absolute; inset: 18px -18px -18px 18px; pointer-events: none;
  border: 1px solid rgba(217,165,106,0.35); border-radius: 14px;
}
.tz-fs__media {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: #1c1815; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(217,165,106,0.4), 0 40px 70px -34px rgba(0,0,0,0.8);
}
.tz-fs__media iframe,
.tz-home .tz-fs__poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; object-fit: cover; }
.tz-home .tz-fs__poster { transform-origin: 60% 40%; animation: tz-fs-drift 18s ease-in-out infinite alternate; }
@keyframes tz-fs-drift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.1); }
}

.tz-home .tz-fs__play,
.tz-home .tz-fs__play:hover,
.tz-home .tz-fs__play:focus {
  position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; outline: none;
  -webkit-appearance: none; appearance: none; cursor: pointer; color: var(--cream);
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(to top, rgba(20,17,14,0.74), rgba(20,17,14,0.2) 48%, rgba(20,17,14,0.36));
  transition: background 400ms ease;
}
.tz-home .tz-fs__play:hover { background: linear-gradient(to top, rgba(20,17,14,0.62), rgba(20,17,14,0.06) 48%, rgba(20,17,14,0.2)); }

/* --mx / --my are set by JS while a mouse is over the poster */
.tz-fs__cluster {
  position: absolute; left: 50%; top: 50%; display: block; width: 168px; height: 168px; margin: -84px 0 0 -84px;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); will-change: transform;
  /* soft dark disc so the ring of words reads on any part of the cover */
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(20,17,14,0.58) 0%, rgba(20,17,14,0.5) 78%, rgba(20,17,14,0) 100%);
}
.tz-fs__ring { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; animation: tz-fs-spin 18s linear infinite; }
.tz-fs__ring text { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; fill: var(--cream); text-transform: uppercase; }
@keyframes tz-fs-spin { to { transform: rotate(360deg); } }

.tz-fs__circle {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background-color: rgba(250,247,242,0.96);
  animation: tz-fs-breathe 2.8s ease-in-out infinite;
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), background-color 340ms ease;
}
@keyframes tz-fs-breathe {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.38), 0 0 0 0 rgba(250,247,242,0.5); }
  55%      { box-shadow: 0 10px 30px rgba(0,0,0,0.38), 0 0 0 16px rgba(250,247,242,0); }
}
.tz-fs__triangle {
  width: 0; height: 0; margin-left: 7px;
  border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 24px solid var(--terracotta);
  transition: border-left-color 340ms ease;
}
@media (hover: hover) {
  .tz-fs__play:hover .tz-fs__circle { transform: scale(1.12); background-color: var(--terracotta); }
  .tz-fs__play:hover .tz-fs__triangle { border-left-color: var(--cream); }
}
.tz-fs__play:active .tz-fs__circle { transform: scale(0.96); transition-duration: 90ms; }
.tz-home .tz-fs__play:focus-visible .tz-fs__circle { outline: 3px solid var(--gold); outline-offset: 5px; }

/* Film title: over the poster on wide screens, under it on phones */
.tz-fs__caption {
  position: absolute; z-index: 3; left: 38px; right: 38px; bottom: 32px; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.tz-home .tz-fs__kicker { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }
.tz-home .tz-fs__title { font-size: 32px; margin: 0 0 4px; color: var(--cream); }
.tz-home .tz-fs__sub { font-size: 16px; line-height: 1.5; margin: 0; color: var(--muted-on-dark); }
.tz-fs__frame.is-playing .tz-fs__caption { display: none; }

.tz-home .tz-fs__invite { max-width: 620px; margin: 56px auto 0; text-align: center; font-size: 18px; }

/* only move while the section is on screen */
.tz-fs--js:not(.is-in) .tz-fs__poster,
.tz-fs--js:not(.is-in) .tz-fs__ring,
.tz-fs--js:not(.is-in) .tz-fs__circle { animation-play-state: paused; }

@media (max-width: 767px) {
  .tz-fs__head { margin-bottom: 34px; }
  .tz-home .tz-fs__tagline { font-size: 21px; gap: 12px; margin-bottom: 12px; }
  .tz-fs__tagline::before, .tz-fs__tagline::after { width: 22px; }
  .tz-fs__screen::before { inset: 10px -8px -10px 8px; border-radius: 12px; }
  .tz-fs__media { border-radius: 12px; }
  .tz-fs__cluster { width: 124px; height: 124px; margin: -62px 0 0 -62px; }
  .tz-fs__circle { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .tz-fs__triangle { margin-left: 5px; border-top-width: 11px; border-bottom-width: 11px; border-left-width: 18px; }
  .tz-fs__caption { position: static; align-items: center; text-align: center; margin: 34px 0 0; }
  .tz-fs__frame.is-playing .tz-fs__caption { display: flex; }
  .tz-home .tz-fs__title { font-size: 26px; }
  .tz-home .tz-fs__invite { margin-top: 18px; font-size: 17px; }
}
@media (max-width: 420px) {
  .tz-fs__tagline::before, .tz-fs__tagline::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-home .tz-fs__poster, .tz-fs__ring, .tz-fs__circle { animation: none !important; }
  .tz-fs__circle { box-shadow: 0 10px 30px rgba(0,0,0,0.38); }
  .tz-fs__cluster { transform: none; }
}

/* ===================================================================
   BUTTONS - same button as tz-cr.css (Custom Rugs)
   Rest: soft coloured shadow. Hover: lifts, a band of light sweeps
   across and the arrow slides forward. Press: it sinks.
   =================================================================== */
.tz-home .tz-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0.2px;
  min-height: 56px; padding: 0 32px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none !important;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease, background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}
.tz-home .tz-btn::before {
  content: ''; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: -70%; width: 50%;
  transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.38), rgba(255,255,255,0));
}
.tz-home .tz-btn--solid { background-color: var(--terracotta); color: var(--cream); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(36,31,26,0.2), 0 10px 22px -10px rgba(152,69,47,0.6); }
.tz-home .tz-btn--solid:focus { color: var(--cream); }
.tz-home .tz-btn--inverse { background-color: var(--cream); color: var(--terracotta); box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 10px 22px -10px rgba(0,0,0,0.45); }
.tz-home .tz-btn--inverse:focus { color: var(--terracotta); }
.tz-home .tz-btn--inverse::before, .tz-home .tz-btn--outline::before { background: linear-gradient(90deg, rgba(152,69,47,0), rgba(152,69,47,0.16), rgba(152,69,47,0)); }
.tz-home .tz-btn--outline { background-color: transparent; color: var(--cream); border-color: rgba(250,247,242,0.65); box-shadow: none; }
.tz-home .tz-btn--outline:focus { color: var(--cream); }
@media (hover: hover) {
  .tz-home .tz-btn:hover::before { left: 130%; transition: left 750ms cubic-bezier(0.22, 1, 0.36, 1); }
  .tz-home .tz-btn--solid:hover { background-color: #8a3d29; color: var(--cream); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 4px rgba(36,31,26,0.2), 0 20px 34px -12px rgba(152,69,47,0.72); }
  .tz-home .tz-btn--inverse:hover { background-color: #fff; color: #7d3a26; transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 20px 34px -12px rgba(0,0,0,0.55); }
  .tz-home .tz-btn--outline:hover { background-color: var(--cream); color: var(--terracotta); border-color: var(--cream); transform: translateY(-3px); box-shadow: 0 20px 34px -12px rgba(0,0,0,0.5); }
  .tz-home .tz-btn:hover .tz-btn__arrow { transform: rotate(45deg) translate(3px, -3px); }
}
.tz-home .tz-btn:active { transform: translateY(0) scale(0.98); transition-duration: 90ms; }
.tz-home .tz-btn--solid:active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(36,31,26,0.25), 0 6px 12px -8px rgba(152,69,47,0.6); }
.tz-home .tz-btn--inverse:active, .tz-home .tz-btn--outline:active { box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 6px 12px -8px rgba(0,0,0,0.45); }
.tz-home .tz-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.tz-home .tz-btn__arrow { display: inline-block; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
/* No destination set yet: looks and hovers like any button, the click does nothing.
   Logged-in editors get the note underneath. */
.tz-home .tz-note { font-family: var(--font-body); font-size: 12.5px; font-style: italic; opacity: 0.65; margin: 8px 0 0; }
@media (max-width: 600px) { .tz-home .tz-btn--full-mobile { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) {
  .tz-home .tz-btn, .tz-home .tz-btn__arrow { transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
  .tz-home .tz-btn:hover, .tz-home .tz-btn:active { transform: none; }
  .tz-home .tz-btn::before { display: none; }
}

/* ===================================================================
   SECTION 3 - THE STORY
   Photograph beside the text. The opening of the story is always on
   screen; "Read more" unfolds the rest in place. Without JS the whole
   story is simply visible.
   =================================================================== */

.tz-st__grid {
  display: grid; align-items: start; column-gap: 76px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "fig head" "fig body";
}

/* The photograph stays in view while the story unfolds beside it.
   The theme sets overflow-x:hidden on both html and body, which turns body
   into its own scroll box and switches position:sticky off. clip hides the
   same sideways overflow without doing that. (This file only loads on Home.) */
body.page-id-22 { overflow-x: clip; }
.tz-st__figure { grid-area: fig; position: sticky; top: 110px; margin: 0; }
.tz-st__figure::before {
  content: ''; position: absolute; inset: 18px 18px -18px -18px; pointer-events: none;
  border: 1px solid rgba(152,69,47,0.4); border-radius: 14px;
}
.tz-st__photo {
  position: relative; z-index: 1; overflow: hidden; aspect-ratio: 2560 / 2062;
  border-radius: 14px; background: var(--sand);
  box-shadow: 0 34px 60px -34px rgba(36,31,26,0.55);
}
.tz-home .tz-st__photo img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tz-home .tz-st__figure.tz-pending .tz-st__photo img { transform: scale(1.1); }

.tz-st__head { grid-area: head; }
.tz-home .tz-st__head h2 { font-size: clamp(32px, 4vw, 46px); margin: 0; }
.tz-st__head::after { content: ''; display: block; width: 56px; height: 2px; margin: 22px 0 28px; background: var(--terracotta); }

.tz-st__body { grid-area: body; }
.tz-home .tz-st__lead { font-size: 21px; line-height: 1.55; color: var(--dark); }
.tz-home .tz-st__verse { margin: 26px 0; padding: 2px 0 2px 22px; border-left: 2px solid var(--terracotta); }
.tz-home .tz-st__verse span {
  display: block; font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 25px; line-height: 1.36; color: var(--dark);
}
.tz-home .tz-st__closing { margin: 30px 0 0; }
.tz-home .tz-st__closing strong {
  display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 700;
  font-size: 32px; line-height: 1.18; color: var(--terracotta);
}

/* Unfolding part: open by default, JS folds it */
.tz-st__more { display: grid; grid-template-rows: 1fr; }
.tz-st__more-inner { min-height: 0; overflow: hidden; }
.tz-st__more-inner > :last-child { margin-bottom: 4px; }
.tz-st--js .tz-st__more { transition: grid-template-rows 750ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; }
.tz-st--js:not(.is-open) .tz-st__more {
  grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 600ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 600ms;
}
.tz-st--js .tz-st__more-inner > * { transition: opacity 600ms ease, transform 750ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-st--js:not(.is-open) .tz-st__more-inner > * { opacity: 0; transform: translateY(16px); transition-duration: 250ms; }
.tz-st--js.is-open .tz-st__more-inner > :nth-child(1) { transition-delay: 120ms; }
.tz-st--js.is-open .tz-st__more-inner > :nth-child(2) { transition-delay: 200ms; }
.tz-st--js.is-open .tz-st__more-inner > :nth-child(3) { transition-delay: 280ms; }
.tz-st--js.is-open .tz-st__more-inner > :nth-child(4) { transition-delay: 360ms; }
.tz-st--js.is-open .tz-st__more-inner > :nth-child(5) { transition-delay: 440ms; }
.tz-st--js.is-open .tz-st__more-inner > :nth-child(n+6) { transition-delay: 520ms; }

/* first fold on page load happens without any transition (class removed right after) */
.tz-st--init .tz-st__more, .tz-st--init .tz-st__more-inner > * { transition: none !important; }

/* Read more / Read less */
.tz-home .tz-st__toggle,
.tz-home .tz-st__toggle:hover,
.tz-home .tz-st__toggle:focus {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 2px 0 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0.2px; line-height: 1.2;
  color: var(--terracotta); -webkit-tap-highlight-color: transparent;
}
.tz-home .tz-st__toggle[hidden] { display: none; }
.tz-st__toggle-label { padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; }
.tz-st__chev {
  display: inline-block; width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), margin 450ms ease;
}
.tz-st__toggle[aria-expanded="false"] .tz-st__chev { animation: tz-st-nudge 1.8s ease-in-out infinite; }
.tz-st__toggle[aria-expanded="true"] .tz-st__chev { transform: rotate(-135deg); margin-top: 4px; }
@keyframes tz-st-nudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(3px, 3px); }
}
@media (hover: hover) {
  .tz-home .tz-st__toggle:hover { color: #7d3a26; }
}
.tz-home .tz-st__toggle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }

.tz-st__cta { margin-top: 26px; }

@media (max-width: 900px) {
  .tz-st__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "fig" "body"; }
  .tz-st__figure { position: relative; top: auto; margin: 0 0 40px; }
  .tz-st__figure::before { inset: 10px 8px -10px -8px; border-radius: 12px; }
  .tz-st__photo { border-radius: 12px; }
  .tz-home .tz-st__lead { font-size: 19px; }
  .tz-home .tz-st__verse { margin: 22px 0; padding-left: 18px; }
  .tz-home .tz-st__verse span { font-size: 22px; }
  .tz-home .tz-st__closing strong { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-st--js .tz-st__more, .tz-st--js .tz-st__more-inner > *, .tz-home .tz-st__photo img, .tz-st__chev { transition: none !important; }
  .tz-st__toggle .tz-st__chev { animation: none !important; }
  .tz-home .tz-st__figure.tz-pending .tz-st__photo img { transform: none; }
}

/* ===================================================================
   SECTION 5 - FIND YOUR RUG (pattern / size / color)
   Three tabs of cards. Each card opens the shop with that filter on:
   /shop/?pattern=..., ?size=..., ?color=...
   Without JS the three groups are simply listed one under the other.
   =================================================================== */

.tz-ff__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0 30px; }
.tz-home .tz-ff__head h2 { font-size: clamp(32px, 4vw, 46px); margin: 0 0 12px; }
.tz-home .tz-ff__head p { max-width: 560px; margin: 0; }

/* ---------- Tabs ---------- */
.tz-ff__tabs {
  position: relative; display: flex; justify-content: center; width: max-content; max-width: 100%;
  margin: 0 auto 40px; border-bottom: 1px solid rgba(36,31,26,0.18);
}
.tz-ff__tabs[hidden] { display: none; }
.tz-home .tz-ff__tab,
.tz-home .tz-ff__tab:hover,
.tz-home .tz-ff__tab:focus {
  min-height: 50px; margin: 0; padding: 0 26px; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px;
  color: var(--muted); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: color 260ms ease;
}
.tz-home .tz-ff__tab[aria-selected="true"],
.tz-home .tz-ff__tab:hover { color: var(--dark); }
.tz-home .tz-ff__tab:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -4px; }
/* the line under the active tab; --x and --w are set by JS */
.tz-ff__ink {
  position: absolute; left: 0; bottom: -1px; height: 2px; pointer-events: none;
  width: var(--w, 0px); transform: translate3d(var(--x, 0px), 0, 0); background: var(--terracotta);
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), width 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Panels ---------- */
.tz-ff__panel[hidden] { display: none; }
.tz-ff__panel + .tz-ff__panel { margin-top: 48px; }
.tz-home .tz-ff__panel-title { margin: 0 0 18px; text-align: center; }
.tz-ff--js .tz-ff__panel + .tz-ff__panel { margin-top: 0; }
.tz-home .tz-ff--js .tz-ff__panel-title {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.tz-home .tz-ff__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.tz-home .tz-ff__grid li { flex: 0 0 calc((100% - 80px) / 6); min-width: 0; margin: 0; }

/* ---------- Cards ---------- */
.tz-home .tz-ff__card {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate;
  border-radius: 12px; background: var(--cream); text-decoration: none;
  box-shadow: 0 1px 2px rgba(36,31,26,0.12), 0 16px 26px -18px rgba(36,31,26,0.5);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
  -webkit-tap-highlight-color: transparent;
}
.tz-home .tz-ff__card img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* size cards: a line drawing on a cream tile instead of a photograph */
.tz-home .tz-ff__card--icon img {
  inset: 14px 14px auto 14px; width: calc(100% - 28px); height: calc(100% - 66px);
  object-fit: contain; mix-blend-mode: multiply;
}
.tz-ff__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px;
  background-color: rgba(36,31,26,0.8); color: var(--cream);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 1px;
  text-transform: uppercase; text-align: center;
  transition: background-color 320ms ease;
}
.tz-ff__label::after {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px; margin-left: 0; opacity: 0;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
  transition: opacity 320ms ease, margin-left 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .tz-home .tz-ff__card:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(36,31,26,0.14), 0 26px 36px -20px rgba(36,31,26,0.6); }
  .tz-home .tz-ff__card:hover img { transform: scale(1.08); }
  .tz-home .tz-ff__card--icon:hover img { transform: scale(1.05); }
  .tz-ff__card:hover .tz-ff__label { background-color: var(--terracotta); }
  .tz-ff__card:hover .tz-ff__label::after { opacity: 1; margin-left: 10px; }
}
.tz-home .tz-ff__card:active { transform: scale(0.98); transition-duration: 90ms; }
.tz-home .tz-ff__card:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* cards arrive one after the other when a tab is chosen */
.tz-ff__panel.is-switched .tz-ff__grid li {
  animation: tz-ff-in 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes tz-ff-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
}

@media (max-width: 900px) {
  .tz-home .tz-ff__grid { gap: 12px; }
  .tz-home .tz-ff__grid li { flex-basis: calc((100% - 24px) / 3); }
}
@media (max-width: 767px) {
  .tz-ff__tabs { margin-bottom: 28px; }
  .tz-home .tz-ff__tab,
  .tz-home .tz-ff__tab:hover,
  .tz-home .tz-ff__tab:focus { min-height: 46px; padding: 0 15px; font-size: 16px; }
  .tz-home .tz-ff__grid { gap: 10px; }
  .tz-home .tz-ff__grid li { flex-basis: calc((100% - 20px) / 3); }
  .tz-home .tz-ff__card { border-radius: 10px; }
  .tz-ff__label { min-height: 34px; padding: 6px 4px; font-size: 11.5px; letter-spacing: 0.6px; }
  .tz-ff__label::after { display: none; }
  .tz-home .tz-ff__card--icon img { inset: 8px 8px auto 8px; width: calc(100% - 16px); height: calc(100% - 46px); }
}

@media (prefers-reduced-motion: reduce) {
  .tz-ff__ink, .tz-home .tz-ff__card, .tz-home .tz-ff__card img, .tz-ff__label, .tz-ff__label::after { transition: none !important; }
  .tz-ff__panel.is-switched .tz-ff__grid li { animation: none !important; }
  .tz-home .tz-ff__card:hover { transform: none; }
}

/* ===================================================================
   SECTION 6 - OUR CATEGORIES
   A 3D carousel of square posters. The centre poster faces the visitor,
   the others fan away to both sides in depth. It turns by itself, can be
   dragged or swiped, and every poster is a link to its own page.
   Without JS it is a plain row that scrolls sideways.
   JS sets per card: --o (signed distance from the centre, may be
   fractional while dragging), --a (absolute distance), --r (clamped
   distance used for the turn), --op (opacity), --z (stacking).
   =================================================================== */

.tz-oc { overflow: hidden; }
.tz-oc__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0 44px; }
.tz-home .tz-oc__head h2 { font-size: clamp(32px, 4vw, 46px); margin: 0 0 12px; }
.tz-home .tz-oc__head p { max-width: 560px; margin: 0; }
.tz-home .tz-oc__eyebrow {
  display: inline-flex; align-items: center; gap: 16px; margin: 0 0 14px;
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 23px; line-height: 1.2; color: var(--gold);
}
.tz-oc__eyebrow::before, .tz-oc__eyebrow::after { content: ''; flex: 0 0 auto; width: 40px; height: 1px; background: rgba(217,165,106,0.55); }

.tz-oc__stage {
  --w: clamp(250px, 30vw, 400px);
  --step: calc(var(--w) * 0.62);
  --depth: 190px;
  --turn: 26deg;
  position: relative;
}

/* ---------- Without JS: a row to scroll ---------- */
.tz-home .tz-oc__track {
  display: flex; gap: 16px; margin: 0; padding: 0 0 12px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.tz-home .tz-oc__track li { flex: 0 0 var(--w); margin: 0; scroll-snap-align: center; }
.tz-home .tz-oc__card {
  display: block; text-decoration: none; border-radius: 14px; outline: none;
  -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; user-select: none;
}
.tz-oc__inner {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; background: #1c1815;
  box-shadow: 0 0 0 1px rgba(217,165,106,0.3), 0 30px 50px -28px rgba(0,0,0,0.8);
}
.tz-home .tz-oc__inner img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.tz-home .tz-oc__card:focus-visible .tz-oc__inner { outline: 3px solid var(--gold); outline-offset: 4px; }

/* ---------- With JS: the 3D stage ---------- */
.tz-oc--js .tz-oc__stage { height: calc(var(--w) + 40px); perspective: 1500px; perspective-origin: 50% 46%; touch-action: pan-y; cursor: grab; }
.tz-oc--js.is-dragging .tz-oc__stage { cursor: grabbing; }
.tz-home .tz-oc--js .tz-oc__track {
  display: block; position: absolute; inset: 0; padding: 0; overflow: visible; transform-style: preserve-3d;
}
.tz-home .tz-oc--js .tz-oc__track li {
  position: absolute; left: 50%; top: 10px; width: var(--w); margin-left: calc(var(--w) / -2);
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--o, 0) * var(--step)), 0, calc(var(--a, 0) * var(--depth) * -1)) rotateY(calc(var(--r, 0) * var(--turn) * -1));
  opacity: var(--op, 1); z-index: var(--z, 1);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms ease;
  will-change: transform, opacity;
}
.tz-oc--js.is-dragging .tz-oc__track li { transition: none; }
/* before the section is seen, the posters wait as one closed deck */
.tz-home .tz-oc--js:not(.is-open) .tz-oc__track li { transform: translate3d(0, 30px, -260px) scale(0.86); }

.tz-oc--js .tz-oc__inner {
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms ease;
}
/* posters further back sink into the dark */
.tz-oc--js .tz-oc__inner::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #14110e;
  opacity: calc(var(--a, 0) * 0.26); transition: opacity 600ms ease;
}
.tz-oc--js.is-dragging .tz-oc__inner::before { transition: none; }
.tz-oc--js li.is-active .tz-oc__inner {
  box-shadow: 0 0 0 1px rgba(217,165,106,0.6), 0 44px 70px -30px rgba(0,0,0,0.9), 0 0 90px -20px rgba(217,165,106,0.28);
}
/* a band of light crosses the poster that has just come to the front */
.tz-oc--js .tz-oc__inner::after {
  content: ''; position: absolute; z-index: 2; top: -10%; bottom: -10%; left: -80%; width: 55%; pointer-events: none;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.24), rgba(255,255,255,0));
}
.tz-oc--js.is-open li.is-active .tz-oc__inner::after { animation: tz-oc-shine 1300ms cubic-bezier(0.22, 1, 0.36, 1) 350ms both; }
@keyframes tz-oc-shine {
  from { left: -80%; }
  to   { left: 140%; }
}

/* soft light on the floor under the front poster */
.tz-oc--js .tz-oc__stage::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: min(80%, 760px); height: 60px; pointer-events: none;
  transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(217,165,106,0.22), rgba(217,165,106,0) 70%);
}

/* ---------- Caption + controls (shown by JS) ---------- */
.tz-oc__foot { display: none; flex-direction: column; align-items: center; margin-top: 26px; }
.tz-oc--js .tz-oc__foot { display: flex; }
.tz-home .tz-oc__caption,
.tz-home .tz-oc__caption:hover,
.tz-home .tz-oc__caption:focus {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none !important;
  font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15; color: var(--cream);
}
.tz-oc__caption-text { background: linear-gradient(var(--gold), var(--gold)) left bottom / 0% 1px no-repeat; padding-bottom: 4px; transition: background-size 450ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-oc__caption-arrow {
  flex: 0 0 auto; width: 9px; height: 9px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .tz-oc__caption:hover .tz-oc__caption-text { background-size: 100% 1px; }
  .tz-oc__caption:hover .tz-oc__caption-arrow { transform: rotate(45deg) translate(3px, -3px); }
}
.tz-oc__caption.is-changing .tz-oc__caption-text,
.tz-oc__caption.is-changing .tz-oc__caption-arrow { animation: tz-oc-caption 520ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tz-oc-caption {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: 0 0; }
}
.tz-home .tz-oc__caption:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 4px; }

.tz-oc__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.tz-home .tz-oc__arrow,
.tz-home .tz-oc__arrow:hover,
.tz-home .tz-oc__arrow:focus,
.tz-home .tz-oc__toggle,
.tz-home .tz-oc__toggle:hover,
.tz-home .tz-oc__toggle:focus {
  position: relative; flex: 0 0 auto; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0;
  background: transparent; border: 1px solid rgba(250,247,242,0.3); border-radius: 50%; box-shadow: none;
  color: var(--cream); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 260ms ease, background-color 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .tz-home .tz-oc__arrow:hover, .tz-home .tz-oc__toggle:hover { border-color: var(--gold); background-color: rgba(217,165,106,0.12); }
}
.tz-home .tz-oc__arrow:active { transform: scale(0.92); }
.tz-oc__arrow::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -5px 0 0 -7px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
}
.tz-oc__arrow--prev::before { margin-left: -3px; transform: rotate(-135deg); }
.tz-oc__toggle { width: 36px; height: 36px; }
.tz-home .tz-oc__toggle, .tz-home .tz-oc__toggle:hover, .tz-home .tz-oc__toggle:focus { width: 36px; height: 36px; }
.tz-oc__toggle::before, .tz-oc__toggle::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 11px; margin: -5.5px 0 0 -5px; border-radius: 1px; background: currentColor;
}
.tz-oc__toggle::after { margin-left: 2px; }
.tz-oc__toggle[aria-pressed="true"]::before {
  width: 0; height: 0; margin: -6px 0 0 -3px; border-radius: 0; background: transparent;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor;
}
.tz-oc__toggle[aria-pressed="true"]::after { display: none; }
.tz-oc__dots { display: flex; align-items: center; gap: 2px; }
.tz-home .tz-oc__dot,
.tz-home .tz-oc__dot:hover,
.tz-home .tz-oc__dot:focus {
  position: relative; width: 22px; height: 44px; min-height: 0; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tz-oc__dot::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 3px;
  background: rgba(250,247,242,0.34); transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1), margin 400ms cubic-bezier(0.22, 1, 0.36, 1), background-color 300ms ease;
}
.tz-oc__dot[aria-current="true"]::before { width: 20px; margin-left: -10px; background: var(--gold); }
.tz-home .tz-oc__arrow:focus-visible, .tz-home .tz-oc__toggle:focus-visible, .tz-home .tz-oc__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 767px) {
  .tz-oc__head { margin-bottom: 30px; }
  .tz-home .tz-oc__eyebrow { font-size: 20px; gap: 12px; margin-bottom: 10px; }
  .tz-oc__eyebrow::before, .tz-oc__eyebrow::after { width: 22px; }
  .tz-oc__stage { --w: min(70vw, 320px); --step: calc(var(--w) * 0.6); --depth: 150px; --turn: 30deg; margin: 0 -20px; }
  .tz-home .tz-oc__track { padding-left: 20px; padding-right: 20px; }
  .tz-oc--js .tz-oc__stage { perspective: 1000px; height: calc(var(--w) + 30px); }
  .tz-home .tz-oc__caption, .tz-home .tz-oc__caption:hover, .tz-home .tz-oc__caption:focus { font-size: 25px; }
  .tz-oc__foot { margin-top: 18px; }
  .tz-oc__controls { gap: 8px; margin-top: 12px; }
  .tz-home .tz-oc__dot, .tz-home .tz-oc__dot:hover, .tz-home .tz-oc__dot:focus { width: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-home .tz-oc--js .tz-oc__track li, .tz-oc--js .tz-oc__inner, .tz-oc--js .tz-oc__inner::before { transition: none !important; }
  .tz-oc--js .tz-oc__inner::after, .tz-oc__caption.is-changing .tz-oc__caption-text, .tz-oc__caption.is-changing .tz-oc__caption-arrow { animation: none !important; }
  .tz-oc--js .tz-oc__inner { transform: none; }
  .tz-home .tz-oc__toggle { display: none; }
}

/* ===================================================================
   SECTION 7 - THE MOVING LINE (choose / customize / no customs fees /
   satisfaction guaranteed)
   One strip that travels from right to left, forever. The four items
   are printed four times in a row; the track slides by exactly one set
   (-25%) and starts again, so the loop has no seam on any screen up to
   three sets wide. Pauses under the mouse and with the button.
   =================================================================== */

.tz-mq {
  position: relative; overflow: hidden; background: var(--blush);
  border-top: 1px solid rgba(152,69,47,0.16); border-bottom: 1px solid rgba(152,69,47,0.16);
}
.tz-mq__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.tz-mq__track {
  display: flex; width: max-content;
  animation: tz-mq-run var(--tz-mq-dur, 40s) linear infinite;
  will-change: transform;
}
@keyframes tz-mq-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}
@media (hover: hover) {
  .tz-mq:hover .tz-mq__track { animation-play-state: paused; }
}
.tz-mq.is-paused .tz-mq__track,
.tz-mq.is-offscreen .tz-mq__track { animation-play-state: paused; }

.tz-home .tz-mq__set { display: flex; flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
.tz-home .tz-mq__set li {
  position: relative; flex: 0 0 auto; box-sizing: border-box; width: 380px; margin: 0; padding: 36px 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-size: 16px; line-height: 1.5; color: var(--muted);
}
/* small woven diamond between two items */
.tz-mq__set li::after {
  content: ''; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  background: var(--terracotta); opacity: 0.75; transform: rotate(45deg);
}
.tz-home .tz-mq__set strong {
  display: block; margin: 0 0 6px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--terracotta);
}
.tz-mq__set span { display: block; color: var(--dark); }

/* pause button (shown by JS) */
.tz-home .tz-mq__toggle,
.tz-home .tz-mq__toggle:hover,
.tz-home .tz-mq__toggle:focus {
  position: absolute; right: 14px; top: 50%; z-index: 2; width: 34px; height: 34px; min-height: 0; margin: -17px 0 0; padding: 0;
  background: rgba(250,247,242,0.92); border: 1px solid rgba(152,69,47,0.3); border-radius: 50%; box-shadow: none;
  color: var(--terracotta); cursor: pointer; opacity: 0.85; -webkit-tap-highlight-color: transparent;
  transition: opacity 260ms ease, border-color 260ms ease;
}
.tz-home .tz-mq__toggle[hidden] { display: none; }
.tz-home .tz-mq__toggle:hover { opacity: 1; border-color: var(--terracotta); }
.tz-home .tz-mq__toggle:focus-visible { opacity: 1; outline: 2px solid var(--terracotta); outline-offset: 2px; }
.tz-mq__toggle::before, .tz-mq__toggle::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 10px; margin: -5px 0 0 -5px; border-radius: 1px; background: currentColor;
}
.tz-mq__toggle::after { margin-left: 2px; }
.tz-mq__toggle[aria-pressed="true"]::before {
  width: 0; height: 0; margin: -5px 0 0 -3px; border-radius: 0; background: transparent;
  border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor;
}
.tz-mq__toggle[aria-pressed="true"]::after { display: none; }

@media (max-width: 767px) {
  .tz-home .tz-mq__set li { width: 290px; padding: 26px 30px; font-size: 15px; }
  .tz-home .tz-mq__set strong { font-size: 13px; letter-spacing: 1.5px; }
  .tz-mq__track { animation-duration: var(--tz-mq-dur-phone, 30s); }
  .tz-home .tz-mq__toggle, .tz-home .tz-mq__toggle:hover, .tz-home .tz-mq__toggle:focus { right: 8px; width: 30px; height: 30px; margin-top: -15px; }
}

/* Reduced motion: the four items stand still, side by side */
@media (prefers-reduced-motion: reduce) {
  .tz-mq__viewport { -webkit-mask-image: none; mask-image: none; }
  .tz-mq__track { animation: none; width: 100%; justify-content: center; }
  .tz-mq__set[aria-hidden="true"] { display: none !important; }
  .tz-home .tz-mq__set { flex-wrap: wrap; justify-content: center; max-width: 1180px; }
  .tz-home .tz-mq__toggle { display: none; }
}

/* ===================================================================
   SECTION 8 - WHEN LEATHER BECOMES SPIRIT (the signature piece)
   The one dark, gold-lit room of the page. Order of events when it
   comes on screen: the title rises word by word, a gold line is drawn,
   the three opening lines follow; lower down the photograph opens like
   a curtain while the text arrives line by line. A soft light follows
   the mouse, the photograph drifts a little slower than the page, and
   a seal turns in its corner. Everything is visible without JS.
   =================================================================== */

.tz-lx {
  --lx-gold: #D9A56A; --lx-gold-hi: #F3DEB6; --lx-gold-lo: #A8773E; --lx-ink: #17120E;
  position: relative; overflow: hidden; isolation: isolate; padding: 132px 32px 140px; color: var(--cream);
  background: radial-gradient(120% 70% at 50% 0%, #2c231c 0%, #1c1612 52%, #14100d 100%);
}
/* light that follows the mouse (--sx / --sy set by JS) */
.tz-lx::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(560px circle at var(--sx, 50%) var(--sy, 12%), rgba(217,165,106,0.15), rgba(217,165,106,0) 66%);
}
.tz-lx::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(217,165,106,0), rgba(217,165,106,0.7), rgba(217,165,106,0));
}
.tz-lx__inner { max-width: 1180px; margin: 0 auto; }

/* ---------- Opening ---------- */
.tz-lx__hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tz-lx__mark { position: relative; display: block; width: 1px; height: 64px; background: linear-gradient(180deg, rgba(217,165,106,0), var(--lx-gold)); transform-origin: 50% 0; }
.tz-lx__mark::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; background: var(--lx-gold); transform: rotate(45deg); }
.tz-home .tz-lx__title {
  margin: 34px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 7.4vw, 104px);
  line-height: 1.03; letter-spacing: -0.01em; color: var(--cream);
}
.tz-lx__line { display: block; }
/* each word sits in its own window so it can rise into view */
.tz-lx__w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.07em 0.16em; margin: -0.04em -0.07em -0.16em; }
.tz-lx__w > span { display: inline-block; }
.tz-lx__title em {
  font-style: italic; font-weight: 600; padding-right: 0.08em;
  background: linear-gradient(100deg, var(--lx-gold-lo) 0%, var(--lx-gold) 30%, var(--lx-gold-hi) 46%, var(--lx-gold) 60%, var(--lx-gold-lo) 100%);
  background-size: 230% 100%; background-position: 50% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--lx-gold);
  animation: tz-lx-shimmer 7s linear infinite;
}
@keyframes tz-lx-shimmer {
  from { background-position: 115% 0; }
  to   { background-position: -115% 0; }
}
.tz-lx__rule { display: block; width: 132px; height: 1px; margin: 36px 0; background: linear-gradient(90deg, rgba(217,165,106,0), var(--lx-gold), rgba(217,165,106,0)); }
.tz-home .tz-lx__intro p {
  max-width: 900px; margin: 0 auto 8px; text-wrap: balance;
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.42;
  color: rgba(250,247,242,0.88);
}
.tz-home .tz-lx__intro p:last-child { margin: 20px auto 0; color: var(--lx-gold); }

/* ---------- Photograph + text ---------- */
.tz-lx__feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 92px; align-items: center; margin-top: 112px; }
.tz-lx__figure { position: relative; margin: 0; }
.tz-lx__figure::before {
  content: ''; position: absolute; inset: -18px 18px 18px -18px; pointer-events: none;
  border: 1px solid rgba(217,165,106,0.32);
}
.tz-lx__frame {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--lx-ink);
  box-shadow: 0 0 0 1px rgba(217,165,106,0.4), 0 70px 90px -56px rgba(0,0,0,0.95), 0 0 120px -40px rgba(217,165,106,0.25);
}
.tz-lx__zoom { position: absolute; inset: 0; }
.tz-home .tz-lx__frame img {
  position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; border-radius: 0;
  transform: translate3d(0, var(--par, 0px), 0); will-change: transform;
}
/* the thin gold line inside the picture, like a mount */
.tz-lx__frame::after { content: ''; position: absolute; inset: 14px; z-index: 1; pointer-events: none; border: 1px solid rgba(243,222,182,0.55); }

.tz-lx__seal {
  position: absolute; right: -40px; bottom: -40px; z-index: 2; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2f251d, var(--lx-ink) 70%);
  box-shadow: 0 0 0 1px rgba(217,165,106,0.55), 0 18px 34px -12px rgba(0,0,0,0.8);
}
.tz-lx__seal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tz-lx__seal-ring { transform-origin: 50% 50%; transform-box: fill-box; animation: tz-lx-spin 28s linear infinite; }
.tz-lx__seal-ring text { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; fill: var(--lx-gold); }
.tz-lx__seal-t { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 58px; fill: var(--lx-gold-hi); }
@keyframes tz-lx-spin { to { transform: rotate(360deg); } }

.tz-home .tz-lx__text h3 { margin: 0 0 24px; font-size: clamp(34px, 3.6vw, 50px); font-weight: 600; line-height: 1.08; color: var(--cream); }
.tz-lx__text h3::before { content: ''; display: block; width: 56px; height: 1px; margin-bottom: 28px; background: var(--lx-gold); }
.tz-home .tz-lx__text p { margin: 0 0 18px; font-size: 18px; color: rgba(250,247,242,0.8); }
.tz-home .tz-lx__text .tz-lx__verse { margin: 26px 0; padding: 2px 0 2px 22px; border-left: 1px solid var(--lx-gold); }
.tz-home .tz-lx__verse span { display: block; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 27px; line-height: 1.34; color: var(--cream); }
.tz-home .tz-lx__text .tz-lx__only { margin: 36px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.15; color: var(--lx-gold); }
.tz-home .tz-lx__text .tz-lx__only-sub { margin: 6px 0 0; font-style: italic; color: rgba(250,247,242,0.72); }
.tz-lx__cta { margin-top: 38px; }
.tz-home .tz-lx .tz-note { color: rgba(250,247,242,0.6); }

.tz-home .tz-btn--gold { background-image: linear-gradient(135deg, #EDCB96 0%, #D9A56A 48%, #BF8747 100%); background-color: #D9A56A; color: #1c1612; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.3), 0 16px 32px -14px rgba(217,165,106,0.7); }
.tz-home .tz-btn--gold:focus { color: #1c1612; }
@media (hover: hover) {
  .tz-home .tz-btn--gold:hover { color: #1c1612; transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.3), 0 26px 44px -16px rgba(217,165,106,0.85); }
}
.tz-home .tz-btn--gold:active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.35), 0 8px 14px -8px rgba(217,165,106,0.7); }

/* ---------- Arrival (only once JS has taken over) ---------- */
.tz-lx--js .tz-lx__w > span { transition: transform 1150ms cubic-bezier(0.19, 1, 0.22, 1); transition-delay: calc(var(--i, 0) * 120ms + 150ms); }
.tz-lx--js .tz-lx__hero:not(.is-in) .tz-lx__w > span { transform: translate3d(0, 118%, 0); }
.tz-lx--js .tz-lx__mark { transition: transform 900ms cubic-bezier(0.19, 1, 0.22, 1), opacity 500ms ease; }
.tz-lx--js .tz-lx__hero:not(.is-in) .tz-lx__mark { transform: scaleY(0); opacity: 0; }
.tz-lx--js .tz-lx__rule { transition: transform 1200ms cubic-bezier(0.19, 1, 0.22, 1) 700ms, opacity 600ms ease 700ms; }
.tz-lx--js .tz-lx__hero:not(.is-in) .tz-lx__rule { transform: scaleX(0); opacity: 0; }
.tz-lx--js .tz-lx__intro p { transition: opacity 1000ms ease, transform 1100ms cubic-bezier(0.19, 1, 0.22, 1); transition-delay: calc(var(--i, 0) * 180ms + 900ms); }
.tz-lx--js .tz-lx__hero:not(.is-in) .tz-lx__intro p { opacity: 0; transform: translate3d(0, 24px, 0); }

.tz-lx--js .tz-lx__frame { clip-path: inset(0% 0% 0% 0%); transition: clip-path 1500ms cubic-bezier(0.19, 1, 0.22, 1); }
.tz-lx--js .tz-lx__feature:not(.is-in) .tz-lx__frame { clip-path: inset(50% 0% 50% 0%); }
.tz-lx--js .tz-lx__zoom { transition: transform 2000ms cubic-bezier(0.19, 1, 0.22, 1); }
.tz-lx--js .tz-lx__feature:not(.is-in) .tz-lx__zoom { transform: scale(1.22); }
.tz-lx--js .tz-lx__figure::before { transition: opacity 900ms ease 800ms, transform 1200ms cubic-bezier(0.19, 1, 0.22, 1) 800ms; }
.tz-lx--js .tz-lx__feature:not(.is-in) .tz-lx__figure::before { opacity: 0; transform: translate3d(18px, 18px, 0); }
.tz-lx--js .tz-lx__seal { transition: opacity 700ms ease 1000ms, transform 1100ms cubic-bezier(0.19, 1, 0.22, 1) 1000ms; }
.tz-lx--js .tz-lx__feature:not(.is-in) .tz-lx__seal { opacity: 0; transform: scale(0.6) rotate(-40deg); }
.tz-lx--js .tz-lx__text > * { transition: opacity 900ms ease, transform 1000ms cubic-bezier(0.19, 1, 0.22, 1); transition-delay: calc(var(--i, 0) * 100ms + 300ms); }
.tz-lx--js .tz-lx__feature:not(.is-in) .tz-lx__text > * { opacity: 0; transform: translate3d(0, 22px, 0); }
.tz-lx__text > :nth-child(1) { --i: 0; } .tz-lx__text > :nth-child(2) { --i: 1; } .tz-lx__text > :nth-child(3) { --i: 2; }
.tz-lx__text > :nth-child(4) { --i: 3; } .tz-lx__text > :nth-child(5) { --i: 4; } .tz-lx__text > :nth-child(6) { --i: 5; }
.tz-lx__text > :nth-child(7) { --i: 6; } .tz-lx__text > :nth-child(8) { --i: 7; } .tz-lx__text > :nth-child(n+9) { --i: 8; }

@media (max-width: 900px) {
  .tz-lx { padding: 88px 20px 96px; }
  .tz-lx__mark { height: 48px; }
  .tz-home .tz-lx__title { margin-top: 28px; }
  .tz-lx__rule { margin: 28px 0; width: 104px; }
  .tz-lx__feature { grid-template-columns: minmax(0, 1fr); gap: 76px; margin-top: 72px; }
  .tz-lx__figure { margin: 0 6px 0 10px; }
  .tz-lx__figure::before { inset: -10px 10px 10px -10px; }
  .tz-lx__frame::after { inset: 10px; }
  .tz-lx__seal { right: -6px; bottom: -44px; width: 112px; height: 112px; }
  .tz-home .tz-lx__verse span { font-size: 23px; }
  .tz-home .tz-lx__text .tz-lx__only { font-size: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-lx__title em, .tz-lx__seal-ring { animation: none !important; }
  .tz-lx--js .tz-lx__w > span, .tz-lx--js .tz-lx__mark, .tz-lx--js .tz-lx__rule, .tz-lx--js .tz-lx__intro p,
  .tz-lx--js .tz-lx__frame, .tz-lx--js .tz-lx__zoom, .tz-lx--js .tz-lx__figure::before, .tz-lx--js .tz-lx__seal, .tz-lx--js .tz-lx__text > * { transition: none !important; }
  .tz-home .tz-lx__frame img { transform: none; }
}

/* ===================================================================
   SECTION 9 - WOVEN BY HAND (the ten steps of a rug)
   Without JS: a heading and a plain list, each step with its photograph
   beside its text.
   With JS (.tz-jr--live, added by tz-home.js): the photographs move into
   one pinned frame, the "loom". While the page scrolls, the next
   photograph is woven over the current one in strips, upright strips
   (warp) then flat strips (weft), in step with the scroll and back again
   when scrolling up. Beside the text a thread is drawn from knot to
   knot with a shuttle at its tip. Reduced motion: photographs simply
   fade, nothing travels.
   NOTE: no overflow:hidden on .tz-jr or .tz-jr__body, the pinned frame
   relies on position:sticky.
   =================================================================== */

.tz-jr {
  position: relative; padding: 124px 32px 104px; background-color: var(--cream);
  background-image:
    repeating-linear-gradient(90deg, rgba(152,69,47,0.04) 0 1px, rgba(152,69,47,0) 1px 18px),
    repeating-linear-gradient(0deg, rgba(152,69,47,0.03) 0 1px, rgba(152,69,47,0) 1px 18px);
}
.tz-jr__inner { max-width: 1280px; margin: 0 auto; }

/* ---------- Opening ---------- */
.tz-jr__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0 92px; }
.tz-home .tz-jr__eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 24px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracotta);
}
.tz-jr__eyebrow::before, .tz-jr__eyebrow::after { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.6; }
.tz-home .tz-jr__title { margin: 0; font-size: clamp(38px, 5.6vw, 78px); line-height: 1.05; letter-spacing: -0.01em; }
.tz-jr__line { display: block; }
.tz-jr__line--accent { font-style: italic; font-weight: 600; color: var(--terracotta); }
.tz-jr__w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.07em 0.16em; margin: -0.04em -0.07em -0.16em; }
.tz-jr__w > span { display: inline-block; }
.tz-jr__rule { display: block; width: 120px; height: 1px; margin: 34px 0 30px; background: linear-gradient(90deg, rgba(152,69,47,0), var(--terracotta), rgba(152,69,47,0)); }
.tz-home .tz-jr__intro p { max-width: 760px; margin: 0 auto 10px; font-size: 19px; text-wrap: balance; }
.tz-home .tz-jr__intro p:last-child { margin-bottom: 0; }

/* the opening rises when it comes on screen (JS adds .is-in) */
.tz-jr--js .tz-jr__w > span { transition: transform 950ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.tz-jr--js .tz-jr__eyebrow { transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-jr--js .tz-jr__rule { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 620ms; }
.tz-jr--js .tz-jr__intro p { transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(760ms + var(--i, 0) * 160ms); }
.tz-jr--js .tz-jr__head:not(.is-in) .tz-jr__w > span { transform: translateY(118%); }
.tz-jr--js .tz-jr__head:not(.is-in) .tz-jr__eyebrow,
.tz-jr--js .tz-jr__head:not(.is-in) .tz-jr__intro p { opacity: 0; transform: translateY(18px); }
.tz-jr--js .tz-jr__head:not(.is-in) .tz-jr__rule { transform: scaleX(0); }

/* ---------- The steps as a plain list (no JS) ---------- */
.tz-home .tz-jr__steps { list-style: none; margin: 0; padding: 0; }
.tz-home .tz-jr__step { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; margin: 0 0 80px; }
.tz-home .tz-jr__step:last-child { margin-bottom: 0; }
.tz-jr__step:nth-child(even) .tz-jr__fig { order: 2; }
.tz-jr__fig { margin: 0; }
.tz-jr__fig img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 30px 60px -34px rgba(36,31,26,0.55); }
.tz-jr__num {
  display: block; margin: 0 0 12px;
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(64px, 7vw, 104px); line-height: 0.9; font-variant-numeric: lining-nums;
  color: var(--terracotta);
}
@supports (-webkit-text-stroke: 1px black) {
  .tz-jr__num { color: transparent; -webkit-text-stroke: 1px rgba(152,69,47,0.6); }
}
.tz-home .tz-jr__h { position: relative; margin: 0 0 20px; padding: 0 0 18px; font-size: clamp(28px, 3vw, 38px); }
.tz-jr__h::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px; background: var(--terracotta); transform-origin: 0 50%; }
.tz-home .tz-jr__txt p { max-width: 46ch; margin: 0 0 14px; }
.tz-home .tz-jr__txt p:last-child { margin-bottom: 0; }
.tz-home .tz-jr__txt .tz-jr__verse { margin-top: 20px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 25px; line-height: 1.3; color: var(--dark); }
.tz-jr__verse span { display: block; }

/* ---------- The loom (JS) ---------- */
.tz-jr--live .tz-jr__fig { display: none; }
.tz-jr--live .tz-jr__body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: clamp(36px, 4.4vw, 72px); align-items: start; }
/* pinned with its centre on the centre of the screen (--jr-h = frame height, set by JS) */
.tz-jr--live .tz-jr__pin { position: -webkit-sticky; position: sticky; top: max(20px, calc(50vh - var(--jr-h, 480px) / 2)); }
.tz-jr__stage { position: relative; width: 100%; }
.tz-jr__stage::before { content: ''; position: absolute; inset: -14px; border: 1px solid rgba(152,69,47,0.32); border-radius: 10px; pointer-events: none; }
.tz-jr__frame {
  position: relative; width: 100%; aspect-ratio: 2000 / 1611; max-height: 78vh; overflow: hidden; border-radius: 6px;
  background-color: #E5D5BE;
  background-image: repeating-linear-gradient(90deg, rgba(36,31,26,0.10) 0 1px, rgba(36,31,26,0) 1px 9px);
  box-shadow: 0 44px 90px -44px rgba(36,31,26,0.62);
}
.tz-jr__layers, .tz-jr__weave { position: absolute; inset: 0; }
.tz-home .tz-jr__layers img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; }
.tz-home .tz-jr__layers img.is-on { opacity: 1; }
.tz-jr--calm .tz-jr__layers img { transition: opacity 500ms ease; }
.tz-jr__weave { visibility: hidden; z-index: 1; }
.tz-jr__weave.is-on { visibility: visible; }
.tz-jr__weave span { position: absolute; display: block; background-repeat: no-repeat; box-shadow: 0 0 22px rgba(20,14,10,0.5); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* counter, step name and progress on the photograph */
.tz-jr__hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; gap: 18px; padding: 70px 26px 32px;
  color: #fff; pointer-events: none; background: linear-gradient(to top, rgba(20,14,10,0.74), rgba(20,14,10,0));
  transition: opacity 700ms ease 250ms;
}
.tz-jr__count { display: flex; align-items: baseline; gap: 8px; flex: none; font-family: var(--font-display); font-style: italic; font-weight: 600; font-variant-numeric: lining-nums; line-height: 1; }
.tz-jr__reel-box { display: block; height: 1.1em; padding-right: 0.1em; overflow: hidden; font-size: 60px; line-height: 1.1; }
.tz-jr__reel { display: block; transform: translateY(calc(var(--k, 0) * -1.1em)); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-jr__reel span { display: block; height: 1.1em; }
.tz-jr__total { font-size: 21px; opacity: 0.78; }
.tz-jr__cap {
  min-width: 0; margin-bottom: 13px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,0.45);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase;
  transition: opacity 240ms ease;
}
.tz-jr__cap.is-swap { opacity: 0; }
.tz-jr__ticks { position: absolute; left: 26px; right: 26px; bottom: 17px; z-index: 3; display: flex; gap: 5px; transition: opacity 700ms ease 250ms; }
.tz-jr__ticks i { display: block; flex: 1 1 0; height: 2px; background: rgba(255,255,255,0.3); transition: background-color 400ms ease; }
.tz-jr__ticks i.is-done { background: var(--gold); }
.tz-jr__frame:not(.is-woven) .tz-jr__hud, .tz-jr__frame:not(.is-woven) .tz-jr__ticks { opacity: 0; }

/* the steps beside the loom */
.tz-home .tz-jr--live .tz-jr__steps { position: relative; padding: 0 0 0 84px; }
.tz-home .tz-jr--live .tz-jr__step { display: flex; flex-direction: column; justify-content: center; min-height: 72vh; margin: 0; }
/* first and last step are as tall as the frame, so the frame starts and ends level with them
   (the thread is the last <li>, hence nth-last-child(2)) */
.tz-home .tz-jr--live .tz-jr__step:first-child, .tz-home .tz-jr--live .tz-jr__step:nth-last-child(2) { min-height: var(--jr-h, 72vh); }
.tz-jr--live .tz-jr__txt { opacity: 0.3; transform: translateY(10px); transition: opacity 600ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-jr--live .tz-jr__step.is-active .tz-jr__txt { opacity: 1; transform: none; }
.tz-jr--live .tz-jr__num { transition: color 600ms ease; }
.tz-jr--live .tz-jr__step.is-active .tz-jr__num { color: var(--terracotta); }
.tz-jr--live .tz-jr__h::after { transform: scaleX(0); transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 150ms; }
.tz-jr--live .tz-jr__step.is-active .tz-jr__h::after { transform: scaleX(1); }

/* the thread, its knots and the shuttle */
.tz-jr__thread { position: absolute; top: 0; bottom: 0; left: 6px; width: 40px; pointer-events: none; }
.tz-jr__thread svg { position: absolute; top: 0; left: 0; display: block; overflow: visible; }
.tz-jr__thread-bg { fill: none; stroke: rgba(36,31,26,0.26); stroke-width: 1; stroke-dasharray: 2 6; }
.tz-jr__thread-fg { fill: none; stroke: var(--terracotta); stroke-width: 2; stroke-linecap: round; }
.tz-jr__knot, .tz-jr__shuttle { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.tz-jr__knot::before {
  content: ''; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--cream); border: 1.5px solid rgba(36,31,26,0.38);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}
.tz-jr__knot.is-done::before { background: var(--terracotta); border-color: var(--terracotta); }
.tz-jr__knot.is-active::before { transform: scale(1.5); box-shadow: 0 0 0 5px rgba(152,69,47,0.16); }
.tz-jr__shuttle { opacity: 0; transition: opacity 300ms ease; }
.tz-jr__shuttle.is-on { opacity: 1; }
.tz-jr__shuttle::before {
  content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 2px; transform: rotate(45deg);
  background: var(--gold); border: 2px solid var(--terracotta); box-shadow: 0 0 0 4px rgba(217,165,106,0.22), 0 0 18px rgba(217,165,106,0.95);
}

@media (max-width: 899px) {
  .tz-jr { padding: 72px 20px 48px; }
  .tz-jr__head { margin-bottom: 44px; }
  .tz-home .tz-jr__eyebrow { font-size: 11.5px; letter-spacing: 0.18em; gap: 10px; }
  .tz-jr__eyebrow::before, .tz-jr__eyebrow::after { width: 20px; }
  .tz-home .tz-jr__intro p { font-size: 17px; }
  .tz-home .tz-jr__step { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 56px; }
  .tz-jr__step:nth-child(even) .tz-jr__fig { order: 0; }

  /* phone loom: the photograph is pinned to the top, the text passes beneath it */
  .tz-jr--live .tz-jr__body { display: block; }
  .tz-jr--live .tz-jr__pin { top: 0; z-index: 4; margin: 0 -20px; }
  .tz-jr--live .tz-jr__pin::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none; background: linear-gradient(var(--cream), rgba(250,247,242,0)); }
  .tz-jr__stage::before { display: none; }
  .tz-jr--live .tz-jr__frame { aspect-ratio: auto; height: min(80.55vw, 44vh); height: min(80.55vw, 44svh); max-height: none; border-radius: 0; box-shadow: 0 18px 34px -24px rgba(36,31,26,0.6); }
  .tz-jr__hud { gap: 14px; padding: 44px 18px 24px; }
  .tz-jr__reel-box { font-size: 42px; }
  .tz-jr__total { font-size: 17px; }
  .tz-jr__cap { margin-bottom: 9px; padding-left: 14px; font-size: 11px; letter-spacing: 0.16em; }
  .tz-jr__ticks { left: 18px; right: 18px; bottom: 12px; gap: 4px; }
  .tz-home .tz-jr--live .tz-jr__steps { padding: 5vh 0 10vh 46px; }
  .tz-home .tz-jr--live .tz-jr__step, .tz-home .tz-jr--live .tz-jr__step:first-child, .tz-home .tz-jr--live .tz-jr__step:nth-last-child(2) { min-height: 54vh; min-height: 54svh; }
  .tz-jr__thread { left: -6px; }
  .tz-jr__num { font-size: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-jr--js .tz-jr__w > span, .tz-jr--js .tz-jr__eyebrow, .tz-jr--js .tz-jr__rule, .tz-jr--js .tz-jr__intro p,
  .tz-jr--live .tz-jr__txt, .tz-jr--live .tz-jr__h::after, .tz-jr__reel, .tz-jr__knot::before, .tz-jr__hud, .tz-jr__ticks { transition: none; }
  .tz-jr--live .tz-jr__txt { transform: none; }
}

/* ===================================================================
   SECTION 10 - SEE HOW TAZRIRT TRANSFORMS SPACES (rugs in real homes)
   Without JS: a row of framed photographs that scrolls sideways.
   With JS (.tz-sp--live): the photographs sit on a big wheel. Each card
   is turned around a point far below the stage (--r), by --d steps of
   --step; JS only writes --d, CSS does the turning. The wheel spins
   into place when it comes on screen, then moves one photograph at a
   time (autoplay, arrows, drag or swipe, keyboard). The photograph in
   front lifts and can be opened full size. The last word of the title
   follows the room of the photograph in front.
   =================================================================== */

.tz-sp {
  /* --w card width; --rk wheel radius as a multiple of --w; --fit: how far down the cards two
     neighbours touch (1 = at their bottom edge, less = they overlap lower down); --step is
     recomputed by JS from these */
  --w: clamp(250px, 21vw, 380px); --gap: 14px; --rk: 5.6; --fit: 1; --r: calc(var(--w) * var(--rk)); --step: 12deg; --drop: calc(var(--w) * 0.4);
  position: relative; padding: 112px 0 100px; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 0%, #F6EDE0 0%, var(--sand) 62%);
}

/* ---------- Opening ---------- */
.tz-sp__head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 32px; margin: 0 0 36px; }
.tz-home .tz-sp__eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracotta);
}
.tz-sp__eyebrow::before, .tz-sp__eyebrow::after { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.6; }
.tz-home .tz-sp__title { margin: 0; font-size: clamp(34px, 5vw, 68px); line-height: 1.06; letter-spacing: -0.01em; }
.tz-sp__lead { display: block; }
.tz-sp__swap { display: grid; justify-items: center; overflow: hidden; padding: 0.02em 0.2em 0.16em; font-size: 1.16em; }
.tz-sp__word {
  grid-area: 1 / 1; white-space: nowrap; font-style: italic; font-weight: 600; color: var(--terracotta);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1), opacity 380ms ease;
}
.tz-sp__word:not(.is-on) { opacity: 0; transform: translateY(105%); }
.tz-sp__word.is-out { opacity: 0; transform: translateY(-105%); }
.tz-home .tz-sp__sub { max-width: 620px; margin: 18px auto 0; font-size: 19px; text-wrap: balance; }

/* ---------- Photographs: plain row (no JS) ---------- */
.tz-home .tz-sp__wheel { display: flex; gap: 18px; margin: 0; padding: 12px 32px 28px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.tz-home .tz-sp__card { flex: none; width: var(--w); margin: 0; scroll-snap-align: center; }
.tz-sp__frame { margin: 0; padding: 10px 10px 0; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(36,31,26,0.14), 0 22px 44px -26px rgba(36,31,26,0.55); }
.tz-home .tz-sp__frame img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; background: var(--sand); -webkit-user-drag: none; }
.tz-sp__label { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 6px; }
.tz-sp__room { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 23px; line-height: 1; color: var(--dark); }
.tz-sp__no { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: rgba(90,80,69,0.75); }

/* ---------- The wheel (JS) ---------- */
.tz-sp--live .tz-sp__stage {
  position: relative; height: calc(var(--w) + 64px + var(--drop) + 34px); overflow: hidden;
  touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; outline: none;
}
.tz-sp--live.is-dragging .tz-sp__stage { cursor: grabbing; }
.tz-home .tz-sp--live .tz-sp__wheel { position: absolute; inset: 0; display: block; padding: 0; overflow: visible; transition: opacity 700ms ease; }
.tz-home .tz-sp--live:not(.is-in) .tz-sp__wheel { opacity: 0; }
.tz-home .tz-sp--live .tz-sp__card {
  position: absolute; top: 34px; left: 50%; width: var(--w); margin-left: calc(var(--w) / -2);
  transform-origin: 50% var(--r); transform: rotate(calc(var(--d, 0) * var(--step)));
  transition: transform var(--dur, 850ms) cubic-bezier(0.22, 1, 0.36, 1); will-change: transform;
}
.tz-sp--live.is-dragging .tz-sp__card { transition: none; }
.tz-sp--live .tz-sp__card.is-off { visibility: hidden; }
.tz-sp--live .tz-sp__card img { pointer-events: none; }
.tz-sp--live .tz-sp__frame { position: relative; transform: scale(0.9); transform-origin: 50% 55%; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 700ms ease; }
.tz-sp--live .tz-sp__card.is-front { z-index: 2; }
.tz-sp--live .tz-sp__card.is-front .tz-sp__frame { transform: translateY(-12px) scale(1); box-shadow: 0 2px 4px rgba(36,31,26,0.16), 0 46px 70px -34px rgba(36,31,26,0.7); }
.tz-sp--live .tz-sp__stage:focus-visible .tz-sp__card.is-front .tz-sp__frame { outline: 2px solid var(--terracotta); outline-offset: 5px; }
/* the photograph in front opens full size */
.tz-sp--zoom .tz-sp__card.is-front { cursor: zoom-in; }
.tz-sp--zoom .tz-sp__frame::after {
  content: ''; position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%; pointer-events: none;
  background: rgba(36,31,26,0.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M10 19H5v-5M19 5l-6 6M5 19l6-6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  opacity: 0; transform: scale(0.7); transition: opacity 400ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tz-sp--zoom .tz-sp__card.is-front .tz-sp__frame::after { opacity: 1; transform: scale(1); transition-delay: 350ms; }

/* ---------- Controls ---------- */
.tz-sp__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; padding: 0 20px; }
.tz-sp__controls[hidden] { display: none; }
.tz-home .tz-sp__count { min-width: 92px; margin: 0; text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 24px; line-height: 1; font-variant-numeric: lining-nums; color: var(--dark); }
.tz-sp__count-total { color: rgba(90,80,69,0.8); }
.tz-home .tz-sp__arrow, .tz-home .tz-sp__arrow:hover, .tz-home .tz-sp__arrow:focus,
.tz-home .tz-sp__toggle, .tz-home .tz-sp__toggle:hover, .tz-home .tz-sp__toggle:focus {
  position: relative; flex: none; width: 48px; height: 48px; min-height: 0; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(36,31,26,0.28); background-color: transparent; color: var(--terracotta); box-shadow: none;
  -webkit-tap-highlight-color: transparent; transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tz-home .tz-sp__arrow:hover, .tz-home .tz-sp__toggle:hover { background-color: var(--terracotta); border-color: var(--terracotta); color: var(--cream); }
.tz-home .tz-sp__arrow:active { transform: scale(0.94); }
.tz-sp__arrow::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translate(-70%, -50%) rotate(45deg); }
.tz-sp__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.tz-home .tz-sp__toggle, .tz-home .tz-sp__toggle:hover, .tz-home .tz-sp__toggle:focus { width: 36px; height: 36px; margin-left: 4px; }
.tz-sp__toggle::before, .tz-sp__toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 12px; margin-top: -6px; background: currentColor; border-radius: 1px; }
.tz-sp__toggle::before { margin-left: -5px; }
.tz-sp__toggle::after { margin-left: 2px; }
.tz-sp__toggle[aria-pressed="true"]::before { width: 0; height: 0; margin: -6px 0 0 -3px; background: none; border-radius: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.tz-sp__toggle[aria-pressed="true"]::after { display: none; }
.tz-home .tz-sp__arrow:focus-visible, .tz-home .tz-sp__toggle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.tz-sp__cta { display: flex; justify-content: center; margin-top: 40px; padding: 0 20px; }

/* ---------- Full-size view ---------- */
.tz-home .tz-sp-box { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: var(--cream); }
.tz-home .tz-sp-box::backdrop { background: rgba(20,16,13,0.92); }
.tz-sp-box[open] { animation: tz-sp-box-in 380ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes tz-sp-box-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.tz-sp-box__inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 64px 84px 28px; }
.tz-home .tz-sp-box__img { display: block; flex: 0 1 auto; min-height: 0; width: auto; height: auto; max-width: min(100%, 1100px); max-height: calc(100% - 44px); aspect-ratio: 1 / 1; object-fit: contain; border: 10px solid #fff; border-radius: 4px; background: #fff; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8); }
.tz-home .tz-sp-box__cap { flex: none; margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--cream); font-variant-numeric: lining-nums; }
.tz-home .tz-sp-box__btn, .tz-home .tz-sp-box__btn:hover, .tz-home .tz-sp-box__btn:focus {
  position: absolute; width: 50px; height: 50px; min-height: 0; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(250,247,242,0.4); background-color: rgba(20,16,13,0.5); color: var(--cream); box-shadow: none;
  transition: background-color 260ms ease, border-color 260ms ease;
}
.tz-home .tz-sp-box__btn:hover { background-color: var(--terracotta); border-color: var(--terracotta); }
.tz-home .tz-sp-box__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tz-home .tz-sp-box__btn--close { top: 16px; right: 16px; }
.tz-home .tz-sp-box__btn--prev { left: 16px; top: 50%; margin-top: -25px; }
.tz-home .tz-sp-box__btn--next { right: 16px; top: 50%; margin-top: -25px; }
.tz-sp-box__btn--prev::before, .tz-sp-box__btn--next::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translate(-70%, -50%) rotate(45deg); }
.tz-sp-box__btn--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.tz-sp-box__btn--close::before, .tz-sp-box__btn--close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; background: currentColor; transform: rotate(45deg); }
.tz-sp-box__btn--close::after { transform: rotate(-45deg); }

@media (max-width: 767px) {
  .tz-sp { --w: min(64vw, 290px); --gap: 10px; --rk: 5; --fit: 0.3; --step: 12deg; --drop: 56px; padding: 68px 0 60px; }
  .tz-sp__head { padding: 0 20px; margin-bottom: 22px; }
  .tz-home .tz-sp__eyebrow { font-size: 11.5px; letter-spacing: 0.18em; gap: 10px; margin-bottom: 16px; }
  .tz-sp__eyebrow::before, .tz-sp__eyebrow::after { width: 20px; }
  .tz-home .tz-sp__sub { font-size: 17px; margin-top: 12px; }
  .tz-home .tz-sp__wheel { gap: 14px; padding: 10px 20px 24px; }
  .tz-sp__frame { padding: 8px 8px 0; }
  .tz-sp__label { height: 46px; }
  .tz-sp__room { font-size: 20px; }
  .tz-sp--live .tz-sp__stage { height: calc(var(--w) + 54px + var(--drop) + 28px); }
  .tz-home .tz-sp--live .tz-sp__card { top: 28px; }
  .tz-sp--zoom .tz-sp__frame::after { top: 16px; right: 16px; width: 34px; height: 34px; }
  .tz-sp__controls { gap: 14px; margin-top: 0; }
  .tz-sp__cta { margin-top: 30px; }
  .tz-sp-box__inner { padding: 70px 14px 24px; }
  .tz-home .tz-sp-box__img { border-width: 6px; max-height: calc(100% - 110px); }
  .tz-home .tz-sp-box__btn--prev, .tz-home .tz-sp-box__btn--next { top: auto; bottom: 18px; margin-top: 0; }
  .tz-home .tz-sp-box__btn--prev { left: calc(50% - 120px); }
  .tz-home .tz-sp-box__btn--next { right: calc(50% - 120px); }
  .tz-sp-box__inner { padding-bottom: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-home .tz-sp--live .tz-sp__card, .tz-sp--live .tz-sp__frame, .tz-sp__word, .tz-home .tz-sp--live .tz-sp__wheel, .tz-sp--zoom .tz-sp__frame::after { transition-duration: 1ms; transition-delay: 0s; }
  .tz-sp-box[open] { animation: none; }
  .tz-home .tz-sp__toggle { display: none; }
}

/* ===================================================================
   SECTION 11 - AFTER YOU ORDER (the updates you receive on WhatsApp)
   Without JS: five stages, each with its text and its example chat
   beside it. With JS (.tz-up--live): the chats move into a phone and
   are played message by message (typing dots, then the bubble pops
   in); the list of stages beside it follows and can be clicked.
   Every chat carries the line "Example of the messages you receive".
   =================================================================== */

.tz-up {
  --up-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  position: relative; padding: 120px 32px 124px; overflow: hidden; color: var(--cream);
  background: radial-gradient(60% 50% at 76% 62%, rgba(217,165,106,0.16), rgba(217,165,106,0) 70%), var(--forest);
}
.tz-up__inner { max-width: 1140px; margin: 0 auto; }

/* ---------- Opening ---------- */
.tz-up__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0 72px; }
.tz-home .tz-up__eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
}
.tz-up__eyebrow::before, .tz-up__eyebrow::after { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.6; }
.tz-home .tz-up__title { margin: 0; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.08; letter-spacing: -0.01em; color: var(--cream); }
.tz-up__line { display: block; }
.tz-up__line--accent { font-style: italic; font-weight: 600; color: var(--gold); }
.tz-up__w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.07em 0.16em; margin: -0.04em -0.07em -0.16em; }
.tz-up__w > span { display: inline-block; }
.tz-home .tz-up__sub { max-width: 720px; margin: 24px auto 0; font-size: 19px; color: var(--muted-on-dark); text-wrap: balance; }
.tz-up--js .tz-up__w > span { transition: transform 950ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 60ms + 120ms); }
.tz-up--js .tz-up__eyebrow, .tz-up--js .tz-up__sub { transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-up--js .tz-up__sub { transition-delay: 700ms; }
.tz-up--js .tz-up__head:not(.is-in) .tz-up__w > span { transform: translateY(118%); }
.tz-up--js .tz-up__head:not(.is-in) .tz-up__eyebrow, .tz-up--js .tz-up__head:not(.is-in) .tz-up__sub { opacity: 0; transform: translateY(18px); }

/* ---------- Stages: plain list (no JS) ---------- */
.tz-home .tz-up__stages { display: grid; gap: 36px; margin: 0; padding: 0; list-style: none; }
.tz-home .tz-up__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 44px; align-items: start; margin: 0; }
.tz-up__info { display: flex; align-items: flex-start; gap: 20px; }
.tz-up__n { flex: none; min-width: 50px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 42px; line-height: 0.95; font-variant-numeric: lining-nums; color: var(--gold); }
.tz-home .tz-up__when { margin: 0 0 7px; font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.tz-home .tz-up__t { margin: 0; font-size: 28px; color: var(--cream); }
.tz-home .tz-up__d { max-width: 46ch; margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted-on-dark); }

/* ---------- The chat ---------- */
.tz-up__thread, .tz-up__screen {
  background-color: #ECE5DA;
  background-image: radial-gradient(rgba(36,31,26,0.055) 1px, rgba(36,31,26,0) 1.5px); background-size: 14px 14px;
}
.tz-up__thread { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 16px; border-radius: 18px; font-family: var(--up-font); }
.tz-up__thread[hidden] { display: none; }
.tz-home .tz-up__note, .tz-home .tz-up__day {
  align-self: center; margin: 2px 0 4px; padding: 4px 12px; border-radius: 8px;
  font-family: var(--up-font); font-size: 11.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; text-align: center;
  color: #5B5F58; background: rgba(255,255,255,0.88); box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}
.tz-home .tz-up__note { color: #6A5A1E; background: #FFF1C2; }
.tz-home .tz-up__msg {
  position: relative; max-width: 84%; margin: 0; padding: 7px 10px 8px; border-radius: 12px;
  font-family: var(--up-font); font-size: 14.5px; font-weight: 400; line-height: 1.4; color: #1F2420;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1); overflow-wrap: anywhere;
}
.tz-home .tz-up__msg--in { align-self: flex-start; background: #fff; border-top-left-radius: 4px; transform-origin: 0 100%; }
.tz-home .tz-up__msg--out { align-self: flex-end; padding-right: 34px; background: #D9F5CB; border-top-right-radius: 4px; transform-origin: 100% 100%; }
.tz-up__ticks {
  position: absolute; right: 9px; bottom: 8px; width: 17px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 10' fill='none' stroke='%233B9BE0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.4l3 3 6-7M7.6 8.4l6-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tz-home .tz-up__msg--photo { width: 76%; padding: 4px 4px 7px; }
.tz-home .tz-up__msg--photo img { display: block; width: 100%; height: auto; border-radius: 9px; background: #d9d2c6; }
.tz-up__msg--photo figcaption { padding: 6px 6px 0; }
.tz-home .tz-up__msg--card { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 11px 14px; border-left: 4px solid #2E9E5B; }
.tz-up__msg--card strong { font-weight: 600; }
.tz-up__msg--card span { font-size: 13.5px; color: #555B54; }

/* ---------- Live: stages beside the phone (JS) ---------- */
.tz-up--live .tz-up__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 7vw, 110px); align-items: center; }
.tz-home .tz-up--live .tz-up__stages { gap: 6px; }
.tz-home .tz-up--live .tz-up__stage { display: block; padding: 18px 22px 18px 22px; border-radius: 14px; opacity: 0.5; transition: opacity 500ms ease, background-color 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-up--live .tz-up__stage::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-home .tz-up--live .tz-up__stage.is-active { opacity: 1; background-color: rgba(250,247,242,0.065); }
.tz-up--live .tz-up__stage.is-active::before { transform: scaleY(1); }
.tz-home .tz-up--live .tz-up__d { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms ease, margin-top 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-home .tz-up--live .tz-up__stage.is-active .tz-up__d { max-height: 140px; margin-top: 10px; opacity: 1; }
.tz-home .tz-up__pick, .tz-home .tz-up__pick:hover, .tz-home .tz-up__pick:focus {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 14px;
  background: transparent; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tz-home .tz-up__pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) { .tz-home .tz-up--live .tz-up__stage:not(.is-active):hover { opacity: 0.82; } }

/* the phone */
.tz-up__device { position: relative; display: flex; flex-direction: column; align-items: center; perspective: 1400px; }
.tz-up__phone {
  --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; flex-direction: column; width: 336px; height: 664px; padding: 10px; border-radius: 50px;
  background: #15120F; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), inset 0 0 0 2px #2B2622, 0 70px 90px -46px rgba(0,0,0,0.75), 0 30px 60px -30px rgba(0,0,0,0.5);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 900ms ease;
}
.tz-up--live:not(.is-in) .tz-up__phone { opacity: 0; transform: translateY(70px) rotateX(10deg) rotateY(-26deg); }
.tz-up--live.is-in .tz-up__phone { transition-duration: 1300ms, 900ms; }
.tz-up--live.is-settled .tz-up__phone { transition-duration: 500ms, 900ms; }
.tz-up__phone::before { content: ''; position: absolute; z-index: 3; top: 20px; left: 50%; width: 96px; height: 26px; margin-left: -48px; border-radius: 14px; background: #15120F; }
.tz-up__bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 48px 14px 10px; border-radius: 40px 40px 0 0; background: #F6F3EE; color: #1F2420; font-family: var(--up-font); box-shadow: 0 1px 0 rgba(0,0,0,0.08); position: relative; z-index: 1; }
.tz-up__avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--terracotta); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; }
.tz-up__who { display: flex; flex-direction: column; min-width: 0; }
.tz-up__name { font-size: 15.5px; font-weight: 600; line-height: 1.25; letter-spacing: 0.02em; }
.tz-up__status { font-size: 12px; line-height: 1.3; color: #3E8A4E; }
.tz-up__screen { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-y; }
.tz-up__screen::-webkit-scrollbar { display: none; }
.tz-up__screen .tz-up__thread { min-height: 100%; padding: 12px 10px 18px; border-radius: 0; background: none; }
/* the line that says this is an example stays in view while the chat scrolls */
.tz-home .tz-up__screen .tz-up__note { position: -webkit-sticky; position: sticky; top: 8px; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.tz-up__input { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px 20px; border-radius: 0 0 40px 40px; background: #F6F3EE; }
.tz-up__input span { flex: 1; height: 34px; border-radius: 17px; background: #fff; border: 1px solid rgba(0,0,0,0.08); }
.tz-up__input i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #2E9E5B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4 20l17-8L4 4v6l11 2-11 2z'/%3E%3C/svg%3E") 55% 50% / 17px 17px no-repeat; }

/* messages arriving */
.tz-up--live .tz-up__thread > .is-wait { display: none; }
.tz-up--live .tz-up__thread > .is-pop { animation: tz-up-pop 440ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }
@keyframes tz-up-pop { from { opacity: 0; transform: translateY(12px) scale(0.86); } to { opacity: 1; transform: none; } }
.tz-up__typing { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 12px 13px; border-radius: 12px; border-top-left-radius: 4px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,0.1); }
.tz-up__typing[hidden] { display: none; }
.tz-up__typing i { width: 6px; height: 6px; border-radius: 50%; background: #9AA39A; animation: tz-up-dot 1000ms ease-in-out infinite; }
.tz-up__typing i:nth-child(2) { animation-delay: 150ms; }
.tz-up__typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes tz-up-dot { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* controls under the phone */
.tz-up__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.tz-home .tz-up__count { min-width: 64px; margin: 0; text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 23px; line-height: 1; font-variant-numeric: lining-nums; color: var(--cream); }
.tz-home .tz-up__arrow, .tz-home .tz-up__arrow:hover, .tz-home .tz-up__arrow:focus,
.tz-home .tz-up__toggle, .tz-home .tz-up__toggle:hover, .tz-home .tz-up__toggle:focus {
  position: relative; flex: none; width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(217,165,106,0.5); background-color: transparent; color: var(--gold); box-shadow: none;
  -webkit-tap-highlight-color: transparent; transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease;
}
.tz-home .tz-up__arrow:hover, .tz-home .tz-up__toggle:hover { background-color: var(--gold); border-color: var(--gold); color: var(--forest); }
.tz-up__arrow::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translate(-70%, -50%) rotate(45deg); }
.tz-up__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.tz-home .tz-up__toggle, .tz-home .tz-up__toggle:hover, .tz-home .tz-up__toggle:focus { width: 36px; height: 36px; margin-left: 2px; }
.tz-up__toggle::before, .tz-up__toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 12px; margin-top: -6px; background: currentColor; border-radius: 1px; }
.tz-up__toggle::before { margin-left: -5px; }
.tz-up__toggle::after { margin-left: 2px; }
.tz-up__toggle[aria-pressed="true"]::before { width: 0; height: 0; margin: -6px 0 0 -3px; background: none; border-radius: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.tz-up__toggle[aria-pressed="true"]::after { display: none; }
.tz-home .tz-up__arrow:focus-visible, .tz-home .tz-up__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 899px) {
  .tz-up { padding: 72px 20px 76px; }
  .tz-up__head { margin-bottom: 40px; }
  .tz-home .tz-up__eyebrow { font-size: 11.5px; letter-spacing: 0.18em; gap: 10px; margin-bottom: 16px; }
  .tz-up__eyebrow::before, .tz-up__eyebrow::after { width: 20px; }
  .tz-home .tz-up__sub { font-size: 17px; margin-top: 18px; }
  .tz-home .tz-up__stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tz-up__n { min-width: 42px; font-size: 36px; }
  .tz-home .tz-up__t { font-size: 25px; }

  /* phone layout: one stage card at a time above the phone */
  .tz-up--live .tz-up__body { display: flex; flex-direction: column; align-items: center; gap: 26px; }
  .tz-home .tz-up--live .tz-up__stages { display: grid; gap: 0; width: 100%; max-width: 440px; }
  .tz-home .tz-up--live .tz-up__stage { grid-area: 1 / 1; min-height: 152px; padding: 16px 18px; opacity: 0; visibility: hidden; transform: translateY(10px); background-color: rgba(250,247,242,0.065); transition: opacity 450ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 450ms; }
  .tz-home .tz-up--live .tz-up__stage.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .tz-home .tz-up--live .tz-up__d, .tz-home .tz-up--live .tz-up__stage.is-active .tz-up__d { max-height: none; margin-top: 8px; opacity: 1; font-size: 16px; }
  .tz-home .tz-up__pick { display: none; }
  .tz-up__phone { width: min(100%, 330px); height: min(640px, 78vh); height: min(640px, 78svh); }
  .tz-up__controls { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-up--js .tz-up__w > span, .tz-up--js .tz-up__eyebrow, .tz-up--js .tz-up__sub, .tz-up__phone, .tz-home .tz-up--live .tz-up__stage, .tz-up--live .tz-up__stage::before, .tz-home .tz-up--live .tz-up__d { transition-duration: 1ms !important; transition-delay: 0s !important; }
  .tz-up--live .tz-up__thread > .is-pop, .tz-up__typing i { animation: none; }
  .tz-home .tz-up__toggle { display: none; }
}

/* ===================================================================
   SECTION 12 - SECOND MOVING LINE (shipping / tracking / secure payments /
   customer service). Same strip as section 7 (.tz-mq), peach background,
   one small icon above each title.
   =================================================================== */
.tz-mq--peach { background: #F6D5B3; border-top-color: rgba(152,69,47,0.2); border-bottom-color: rgba(152,69,47,0.2); }
.tz-mq__icon { flex: none; display: block; width: 30px; height: 30px; margin: 0 0 12px; color: var(--terracotta); }
.tz-home .tz-mq--peach .tz-mq__set li { width: 400px; padding: 34px 44px; justify-content: flex-start; }
@media (max-width: 767px) {
  .tz-home .tz-mq--peach .tz-mq__set li { width: 300px; padding: 26px 28px; }
  .tz-mq__icon { width: 26px; height: 26px; margin-bottom: 10px; }
}

/* ===================================================================
   SECTION 14 - DESIGN YOUR OWN RUG (call to the Custom Rugs page)
   The one terracotta section. Text and button on one side, a wide
   picture in a frame on the other. Without JS the picture is cropped
   in the frame. With JS (.tz-dz--live): the frame opens from left to
   right, then the picture travels slowly from its left side to its
   right side and back (--travel and --dur are set by JS), with a thin
   gold line that follows along the bottom. Pauses under the mouse,
   with the button, and off screen.
   =================================================================== */

.tz-dz {
  position: relative; overflow: hidden; padding: 116px 32px 120px; color: var(--cream);
  background-color: var(--terracotta);
  background-image:
    repeating-linear-gradient(90deg, rgba(250,247,242,0.035) 0 1px, rgba(250,247,242,0) 1px 22px),
    radial-gradient(70% 90% at 82% 50%, #AC5433 0%, rgba(152,69,47,0) 70%),
    linear-gradient(160deg, #98452F 0%, #823921 100%);
}
.tz-dz__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5.5vw, 92px); align-items: center; }

/* ---------- Text ---------- */
.tz-home .tz-dz__eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 20px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: #F3D2A6;
}
.tz-dz__eyebrow::before { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
.tz-home .tz-dz__title { margin: 0 0 20px; font-size: clamp(38px, 4.8vw, 68px); line-height: 1.04; letter-spacing: -0.01em; color: var(--cream); }
.tz-dz__w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.07em 0.16em; margin: -0.04em -0.07em -0.16em; }
.tz-dz__w > span { display: inline-block; }
.tz-home .tz-dz__lead { margin: 0 0 18px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(23px, 2.2vw, 31px); line-height: 1.28; color: #F8E1C2; }
.tz-home .tz-dz__p { max-width: 46ch; margin: 0 0 12px; color: rgba(250,247,242,0.9); }
.tz-dz__cta { position: relative; display: inline-block; margin-top: 26px; }
/* a ring that keeps leaving the button */
.tz-dz__cta::before { content: ''; position: absolute; inset: 0; border-radius: 10px; border: 1px solid rgba(250,247,242,0.7); pointer-events: none; animation: tz-dz-ring 2600ms cubic-bezier(0.22, 1, 0.36, 1) infinite; }
@keyframes tz-dz-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.09, 1.42); } }
.tz-home .tz-dz__cta .tz-btn { min-height: 64px; padding: 0 40px; font-size: 17px; box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 22px 40px -18px rgba(0,0,0,0.6); }
.tz-home .tz-dz__cta .tz-btn:hover { transform: translateY(-3px); }

/* the text arrives when the section comes on screen (JS adds .is-in) */
.tz-dz--js .tz-dz__w > span { transition: transform 950ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 80ms + 100ms); }
.tz-dz--js .tz-dz__eyebrow, .tz-dz--js .tz-dz__lead, .tz-dz--js .tz-dz__p, .tz-dz--js .tz-dz__cta { transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-dz--js .tz-dz__lead { transition-delay: 480ms; }
.tz-dz--js .tz-dz__p { transition-delay: 620ms; }
.tz-dz--js .tz-dz__p + .tz-dz__p { transition-delay: 740ms; }
.tz-dz--js .tz-dz__cta { transition-delay: 900ms; }
.tz-dz--js:not(.is-in) .tz-dz__w > span { transform: translateY(118%); }
.tz-dz--js:not(.is-in) .tz-dz__eyebrow, .tz-dz--js:not(.is-in) .tz-dz__lead, .tz-dz--js:not(.is-in) .tz-dz__p, .tz-dz--js:not(.is-in) .tz-dz__cta { opacity: 0; transform: translateY(20px); }

/* ---------- Picture ---------- */
.tz-dz__media { position: relative; }
.tz-dz__media::before { content: ''; position: absolute; inset: -14px; border: 1px solid rgba(243,210,166,0.5); border-radius: 18px; pointer-events: none; }
.tz-dz__media::after { content: ''; position: absolute; z-index: 0; left: 6%; right: 6%; top: 30%; bottom: -4%; border-radius: 50%; background: rgba(0,0,0,0.55); filter: blur(34px); pointer-events: none; }
.tz-home .tz-dz__frame { position: relative; z-index: 1; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #5C2A18; }
.tz-home .tz-dz__frame img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; }
.tz-home .tz-dz__frame:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.tz-dz__thread { display: none; }

.tz-home .tz-dz--live .tz-dz__frame { clip-path: inset(0 100% 0 0 round 10px); transition: clip-path 1500ms cubic-bezier(0.22, 1, 0.36, 1) 150ms; }
.tz-home .tz-dz--live.is-open .tz-dz__frame { clip-path: inset(0 0 0 0 round 10px); }
.tz-dz--live .tz-dz__media::before, .tz-dz--live .tz-dz__media::after { transition: opacity 900ms ease 700ms; }
.tz-dz--live:not(.is-open) .tz-dz__media::before, .tz-dz--live:not(.is-open) .tz-dz__media::after { opacity: 0; }
.tz-home .tz-dz--live .tz-dz__frame img {
  width: auto; object-fit: fill; will-change: transform;
  animation: tz-dz-pan var(--dur, 24s) ease-in-out 900ms infinite alternate both; animation-play-state: paused;
}
@keyframes tz-dz-pan { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--travel, 0px) * -1), 0, 0); } }
.tz-dz--live .tz-dz__thread {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), #F8E1C2);
  animation: tz-dz-line var(--dur, 24s) ease-in-out 900ms infinite alternate both; animation-play-state: paused;
}
@keyframes tz-dz-line { from { transform: scaleX(0.04); } to { transform: scaleX(1); } }
.tz-dz--live.is-open .tz-dz__frame img, .tz-dz--live.is-open .tz-dz__thread { animation-play-state: running; }
@media (hover: hover) {
  .tz-dz--live.is-open .tz-dz__frame:hover img, .tz-dz--live.is-open .tz-dz__frame:hover .tz-dz__thread { animation-play-state: paused; }
}
.tz-dz--live.is-paused .tz-dz__frame img, .tz-dz--live.is-paused .tz-dz__thread,
.tz-dz--live.is-offscreen .tz-dz__frame img, .tz-dz--live.is-offscreen .tz-dz__thread { animation-play-state: paused; }

.tz-home .tz-dz__toggle, .tz-home .tz-dz__toggle:hover, .tz-home .tz-dz__toggle:focus {
  position: absolute; z-index: 2; right: 14px; bottom: 16px; width: 36px; height: 36px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(250,247,242,0.55); background: rgba(36,31,26,0.55); color: var(--cream); box-shadow: none; opacity: 0.9;
  -webkit-tap-highlight-color: transparent; transition: opacity 260ms ease, background-color 260ms ease;
}
.tz-home .tz-dz__toggle[hidden] { display: none; }
.tz-home .tz-dz__toggle:hover { opacity: 1; background: rgba(36,31,26,0.8); }
.tz-home .tz-dz__toggle:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.tz-dz__toggle::before, .tz-dz__toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 12px; margin: -6px 0 0 -5px; border-radius: 1px; background: currentColor; }
.tz-dz__toggle::after { margin-left: 2px; }
.tz-dz__toggle[aria-pressed="true"]::before { width: 0; height: 0; margin: -6px 0 0 -3px; border-radius: 0; background: transparent; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.tz-dz__toggle[aria-pressed="true"]::after { display: none; }

@media (max-width: 899px) {
  .tz-dz { padding: 72px 20px 84px; }
  .tz-dz__inner { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .tz-dz__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .tz-home .tz-dz__eyebrow { font-size: 11.5px; letter-spacing: 0.18em; margin-bottom: 16px; }
  .tz-dz__eyebrow::after { content: ''; flex: none; width: 20px; height: 1px; background: currentColor; opacity: 0.7; }
  .tz-dz__eyebrow::before { width: 20px; }
  .tz-home .tz-dz__p { font-size: 17px; }
  .tz-dz__cta { display: block; width: 100%; max-width: 380px; margin-top: 22px; }
  .tz-home .tz-dz__cta .tz-btn { width: 100%; justify-content: center; padding: 0 20px; }
  .tz-home .tz-dz__frame { aspect-ratio: 4 / 3; }
  .tz-dz__media::before { inset: -9px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-dz__cta::before { animation: none; opacity: 0; }
  .tz-dz--js .tz-dz__w > span, .tz-dz--js .tz-dz__eyebrow, .tz-dz--js .tz-dz__lead, .tz-dz--js .tz-dz__p, .tz-dz--js .tz-dz__cta,
  .tz-home .tz-dz--live .tz-dz__frame, .tz-dz--live .tz-dz__media::before, .tz-dz--live .tz-dz__media::after { transition-duration: 1ms; transition-delay: 0s; }
}

/* ===================================================================
   SECTION 15 - CUSTOM MADE FOR YOUR HOME (the five steps)
   Follows the user's artwork. Wide screens (1000px and up): one tall
   card on the left (title, then step 5: the final room) and steps 1 to
   4 in a 2 x 2 grid, a strip of four badges and the closing line
   underneath. Smaller screens: title, steps 1 to 4, step 5, badges,
   closing line. Every [data-step] arrives when it comes on screen
   (JS adds .is-in): the card rises, its number pops, and the pictures
   inside follow one after the other.
   =================================================================== */

.tz-cm {
  --cm-olive: #4E5B2E; --cm-navy: #1F3A4D; --cm-rust: #9A3B1E; --cm-brown: #7E3A22; --cm-ochre: #B5772E;
  --cm-card: #FFFCF7; --cm-line: rgba(152,69,47,0.16);
  position: relative; padding: 110px 32px 104px; background: #F7F0E4;
}
.tz-cm__inner { max-width: 1320px; margin: 0 auto; }
.tz-cm__board { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: 18px; align-items: stretch; }

/* number disks and step titles */
.tz-cm__n {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1; letter-spacing: 0; font-variant-numeric: lining-nums; color: #fff; background: var(--terracotta);
}
.tz-cm__n--olive { background: var(--cm-olive); }
.tz-cm__n--navy { background: var(--cm-navy); }
.tz-cm__n--rust { background: var(--cm-rust); }
.tz-cm__n--brown { background: var(--cm-brown); }
.tz-cm__n--ochre { background: var(--cm-ochre); }
.tz-home .tz-cm__t, .tz-home .tz-cm__tag {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--font-body); font-size: 16.5px; font-weight: 600; line-height: 1.25; letter-spacing: 0.1em; text-transform: uppercase;
}
.tz-home .tz-cm__t { margin-bottom: 12px; }
.tz-home .tz-cm__t--olive { color: var(--cm-olive); }
.tz-home .tz-cm__t--navy { color: var(--cm-navy); }
.tz-home .tz-cm__t--rust { color: var(--cm-rust); }
.tz-home .tz-cm__t--brown { color: var(--cm-brown); }
.tz-home .tz-cm__tag { color: #7A5A1E; }

/* ---------- Left card: title + final room ---------- */
.tz-cm__lead {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border: 1px solid var(--cm-line);
  background: linear-gradient(180deg, var(--cm-card) 0%, #F8EFE0 60%, #F1E4D0 100%); box-shadow: 0 22px 44px -32px rgba(36,31,26,0.4);
}
.tz-home .tz-cm__tag--top { justify-content: center; padding: 30px 24px 0; }
.tz-cm__head { padding: 20px 28px 20px; text-align: center; }
.tz-home .tz-cm__title { margin: 0; font-size: clamp(30px, 2.7vw, 41px); line-height: 1.05; color: var(--dark); }
.tz-cm__title-a { display: block; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.tz-cm__title-b { display: block; margin-top: 9px; font-family: var(--font-body); font-size: 0.34em; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.tz-cm__orn { position: relative; display: block; width: 116px; height: 1px; margin: 18px auto 18px; background: linear-gradient(90deg, rgba(152,69,47,0), rgba(152,69,47,0.6), rgba(152,69,47,0)); }
.tz-cm__orn::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--cm-ochre); transform: rotate(45deg); }
.tz-home .tz-cm__intro { max-width: 30ch; margin: 0 auto; font-size: 16.5px; line-height: 1.6; color: var(--dark); }
.tz-cm__final { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 360px; }
.tz-home .tz-cm__tag--final { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.tz-cm__final-img {
  position: relative; flex: 1 1 auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%); mask-image: linear-gradient(180deg, transparent 0, #000 18%);
}
.tz-home .tz-cm__final-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 46% 100%; }

/* ---------- Steps 1 to 4 ---------- */
.tz-home .tz-cm__steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.tz-home .tz-cm__step {
  position: relative; display: flex; flex-direction: column; margin: 0; padding: 24px 24px 22px; border-radius: 16px;
  background: var(--cm-card); border: 1px solid var(--cm-line); box-shadow: 0 18px 40px -32px rgba(36,31,26,0.4);
}
.tz-home .tz-cm__step p { margin: 0 0 14px; font-size: 16px; line-height: 1.55; text-align: center; color: var(--dark); }
.tz-home .tz-cm__step .tz-cm__foot { margin: 14px 0 0; font-size: 15.5px; color: var(--muted); }
.tz-home .tz-cm__step img { display: block; max-width: none; }

.tz-cm__yarn { position: relative; flex: 1 1 auto; min-height: 214px; overflow: hidden; border-radius: 10px; }
.tz-home .tz-cm__yarn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.tz-home .tz-cm__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tz-home .tz-cm__dots li { width: 20px; height: 20px; margin: 0; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }

.tz-cm__pats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.78fr); gap: 8px; height: clamp(196px, 17vw, 250px); }
.tz-home .tz-cm__pats img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 8px; }
.tz-cm__pats-col { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 0; }

.tz-home .tz-cm__sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.tz-home .tz-cm__sizes li { display: flex; flex-direction: column; align-items: center; margin: 0; font-family: var(--font-body); font-size: 13.5px; line-height: 1.4; color: var(--muted); text-align: center; }
.tz-home .tz-cm__sizes img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
.tz-cm__sz { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--cm-navy); }
.tz-cm__sz-name { margin-top: 2px; color: var(--dark); }
.tz-cm__sz-dim { font-weight: 600; color: var(--dark); white-space: nowrap; }

.tz-cm__duo { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 8px; }
.tz-home .tz-cm__duo img { width: 100%; height: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 8px; }

/* ---------- Badges + closing line ---------- */
.tz-cm__strip {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 18px; padding: 18px 26px;
  border-radius: 16px; background: var(--cm-card); border: 1px solid var(--cm-line);
}
.tz-home .tz-cm__badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 0; margin: 0; padding: 0; list-style: none; }
.tz-home .tz-cm__badges li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0 16px; font-size: 14.5px; line-height: 1.35; color: var(--dark); }
.tz-home .tz-cm__badges li + li { border-left: 1px solid var(--cm-line); }
.tz-cm__badges svg { flex: none; width: 34px; height: 34px; color: var(--terracotta); }
.tz-home .tz-cm__tagline { position: relative; margin: 0; padding: 0 30px; text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.25; color: var(--terracotta); }
.tz-cm__tagline::before, .tz-cm__tagline::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4px; background: var(--cm-ochre); transform: rotate(45deg); }
.tz-cm__tagline::before { left: 6px; }
.tz-cm__tagline::after { right: 6px; }

/* ---------- Arrivals (JS adds .is-in to each [data-step]) ---------- */
.tz-cm--js [data-step] { transition: opacity 800ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms ease; }
.tz-cm--js .tz-cm__step:nth-child(even) { transition-delay: 140ms, 140ms, 0s; }
.tz-cm--js [data-step]:not(.is-in) { opacity: 0; transform: translateY(36px); }
.tz-cm--js .tz-cm__n { transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms; }
.tz-cm--js [data-step]:not(.is-in) .tz-cm__n { transform: scale(0) rotate(-120deg); }
.tz-cm--js .tz-cm__final-img img { transition: transform 2600ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-cm--js .tz-cm__final:not(.is-in) .tz-cm__final-img img { transform: scale(1.16); }
.tz-cm--js .tz-cm__yarn { clip-path: inset(0 0 0 0 round 10px); transition: clip-path 1200ms cubic-bezier(0.22, 1, 0.36, 1) 350ms; }
.tz-cm--js [data-step]:not(.is-in) .tz-cm__yarn { clip-path: inset(0 100% 0 0 round 10px); }
.tz-cm--js .tz-cm__dots li { transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(1000ms + var(--i, 0) * 80ms); }
.tz-cm--js [data-step]:not(.is-in) .tz-cm__dots li { transform: scale(0); }
.tz-cm--js .tz-cm__pats > *, .tz-cm--js .tz-cm__sizes li, .tz-cm--js .tz-cm__duo img { transition: opacity 700ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 380ms; }
.tz-cm--js .tz-cm__pats > :nth-child(2), .tz-cm--js .tz-cm__sizes li:nth-child(2), .tz-cm--js .tz-cm__duo img:nth-child(2) { transition-delay: 540ms; }
.tz-cm--js .tz-cm__pats > :nth-child(3), .tz-cm--js .tz-cm__sizes li:nth-child(3) { transition-delay: 700ms; }
.tz-cm--js [data-step]:not(.is-in) .tz-cm__pats > *, .tz-cm--js [data-step]:not(.is-in) .tz-cm__sizes li { opacity: 0; transform: translateY(26px) scale(0.94); }
.tz-cm--js [data-step]:not(.is-in) .tz-cm__duo img { opacity: 0; transform: translateX(-30px); }
.tz-cm--js [data-step]:not(.is-in) .tz-cm__duo img:nth-child(2) { transform: translateX(30px); }
.tz-cm--js .tz-cm__badges li { transition: opacity 600ms ease, transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(250ms + var(--i, 0) * 120ms); }
.tz-cm--js .tz-cm__strip:not(.is-in) .tz-cm__badges li { opacity: 0; transform: translateY(14px) scale(0.9); }
@media (hover: hover) {
  .tz-cm--js .tz-cm__step.is-in:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -30px rgba(36,31,26,0.5); transition-delay: 0s; }
}

@media (max-width: 999px) {
  .tz-cm { padding: 68px 20px 64px; }
  .tz-cm__board { display: flex; flex-direction: column; gap: 14px; }
  .tz-cm__lead { display: contents; }
  .tz-home .tz-cm__tag--top { display: none; }
  .tz-cm__head { order: 0; padding: 0 6px 14px; }
  .tz-home .tz-cm__title { font-size: clamp(34px, 9vw, 46px); }
  .tz-home .tz-cm__steps { order: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tz-cm__final { order: 2; flex: none; min-height: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--cm-line); background: var(--cm-card); box-shadow: 0 18px 40px -32px rgba(36,31,26,0.4); }
  .tz-home .tz-cm__tag--final { position: static; width: auto; height: auto; margin: 0; padding: 20px 20px 16px; overflow: visible; clip: auto; white-space: normal; }
  .tz-cm__final-img { flex: none; aspect-ratio: 4 / 3; -webkit-mask-image: none; mask-image: none; }
  .tz-home .tz-cm__final-img img { object-position: 50% 78%; }
  .tz-cm__pats { height: clamp(190px, 30vw, 260px); }
  .tz-cm__strip { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; padding: 18px 16px; }
  .tz-home .tz-cm__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .tz-home .tz-cm__badges li { padding: 0 10px; }
  .tz-home .tz-cm__badges li:nth-child(odd) { border-left: 0; }
  .tz-home .tz-cm__tagline { padding: 14px 34px; border-radius: 12px; background: var(--forest); color: var(--cream); }
  .tz-cm__tagline::before { left: 16px; }
  .tz-cm__tagline::after { right: 16px; }
}
@media (max-width: 699px) {
  .tz-home .tz-cm__steps { grid-template-columns: minmax(0, 1fr); }
  .tz-home .tz-cm__step { padding: 20px 18px 20px; }
  .tz-cm__pats { height: clamp(200px, 58vw, 260px); }
  .tz-cm--js .tz-cm__step:nth-child(even) { transition-delay: 0s; }
  .tz-home .tz-cm__badges li { font-size: 14px; gap: 10px; }
  .tz-cm__badges svg { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-cm--js [data-step], .tz-cm--js .tz-cm__n, .tz-cm--js .tz-cm__final-img img, .tz-cm--js .tz-cm__yarn, .tz-cm--js .tz-cm__dots li,
  .tz-cm--js .tz-cm__pats > *, .tz-cm--js .tz-cm__sizes li, .tz-cm--js .tz-cm__duo img, .tz-cm--js .tz-cm__badges li { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* ===================================================================
   SECTION 16 - A DESERT EXPERIENCE FEW IN THE WORLD OWN
   (handwoven tents + Sahrawi lounges)
   A night-to-dusk sky with stars. The opening lines arrive one by one,
   the figure counts down inside a gold medallion. Then the four posters:
   without JS a plain row; with JS (.tz-ds--live) they stand behind two
   tent flaps that swing open from the top (.is-open), and one poster is
   wide open at a time while the others wait as narrow panels showing
   the part of the picture set by --fx / --fy. Phones: the panels stack
   and open downwards (--w = width of the stage, set by JS).
   =================================================================== */

.tz-ds {
  --ds-gold: #E2B279; --ds-gold-hi: #F6DDB6; --h: clamp(380px, 42vw, 580px); --w: calc(100vw - 40px);
  position: relative; overflow: hidden; isolation: isolate; padding: 128px 32px 124px; color: var(--cream);
  background:
    radial-gradient(60% 26% at 50% 70%, rgba(214,120,52,0.5) 0%, rgba(214,120,52,0) 100%),
    linear-gradient(180deg, #0C0A14 0%, #191122 24%, #2E1A1C 48%, #55291A 66%, #3A1D12 82%, #17100C 100%);
}
.tz-ds__inner { position: relative; max-width: 1240px; margin: 0 auto; }

/* ---------- Sky ---------- */
.tz-ds__sky { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 60%; pointer-events: none; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.tz-ds__stars {
  position: absolute; inset: 0; opacity: 0.85;
  background-image:
    radial-gradient(1.4px 1.4px at 22px 34px, #fff, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 96px 120px, #FFE9C9, rgba(255,255,255,0)),
    radial-gradient(1.6px 1.6px at 170px 58px, #fff, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 236px 190px, #fff, rgba(255,255,255,0)),
    radial-gradient(1.2px 1.2px at 290px 96px, #FFE9C9, rgba(255,255,255,0)),
    radial-gradient(1px 1px at 54px 212px, #fff, rgba(255,255,255,0)),
    radial-gradient(1.3px 1.3px at 140px 240px, #fff, rgba(255,255,255,0));
  background-size: 330px 270px;
  animation: tz-ds-twinkle 4600ms ease-in-out infinite alternate;
}
.tz-ds__stars--b { background-size: 470px 390px; background-position: 120px 60px; opacity: 0.5; animation-duration: 6400ms; animation-delay: -2400ms; }
@keyframes tz-ds-twinkle { from { opacity: 0.35; } to { opacity: 0.95; } }
.tz-ds__comet { position: absolute; top: 16%; left: 74%; width: 150px; height: 2px; border-radius: 2px; opacity: 0; transform: rotate(-24deg); background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); animation: tz-ds-comet 12s ease-in infinite 3s; }
@keyframes tz-ds-comet {
  0%, 84% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-24deg); }
  87% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-460px, 205px, 0) rotate(-24deg); }
}
.tz-ds.is-paused .tz-ds__stars, .tz-ds.is-paused .tz-ds__comet, .tz-ds.is-paused .tz-ds__ring { animation-play-state: paused; }

/* ---------- Opening lines + the figure ---------- */
.tz-ds__intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); grid-template-areas: 'head stat' 'a stat' 'b stat'; column-gap: clamp(36px, 5vw, 80px); align-items: center; margin: 0 0 76px; }
.tz-ds__head { grid-area: head; }
.tz-ds__lines--a { grid-area: a; }
.tz-ds__lines--b { grid-area: b; }
.tz-ds__stat { grid-area: stat; text-align: center; }
.tz-home .tz-ds__eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ds-gold);
}
.tz-ds__eyebrow::before { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
.tz-home .tz-ds__title { margin: 0 0 30px; font-size: clamp(38px, 5vw, 72px); line-height: 1.04; letter-spacing: -0.01em; color: var(--cream); }
.tz-ds__w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.07em 0.16em; margin: -0.04em -0.07em -0.16em; }
.tz-ds__w > span { display: inline-block; }
.tz-home .tz-ds__lines { margin: 0 0 18px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(23px, 2.3vw, 33px); line-height: 1.36; color: rgba(250,247,242,0.94); }
.tz-home .tz-ds__lines--b { margin-bottom: 0; color: var(--ds-gold-hi); }
.tz-ds__l { display: block; }
.tz-home .tz-ds__stat-lead { margin: 0 0 30px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; color: var(--cream); }
.tz-home .tz-ds__medal {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(300px, 100%); aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%;
  border: 1px solid rgba(226,178,121,0.6); color: var(--cream);
  background: radial-gradient(circle at 50% 32%, rgba(226,178,121,0.22), rgba(226,178,121,0) 70%), rgba(12,10,20,0.35);
  box-shadow: 0 0 90px rgba(226,178,121,0.2), inset 0 0 44px rgba(226,178,121,0.1);
}
.tz-ds__ring { position: absolute; inset: -15px; border-radius: 50%; border: 1px dashed rgba(226,178,121,0.55); animation: tz-ds-spin 46s linear infinite; }
@keyframes tz-ds-spin { to { transform: rotate(360deg); } }
.tz-ds__over, .tz-ds__under { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ds-gold-hi); }
.tz-ds__fig {
  display: flex; align-items: baseline; margin: 6px 0 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(60px, 6.2vw, 90px); line-height: 1; font-variant-numeric: lining-nums tabular-nums;
  color: var(--ds-gold); background: linear-gradient(180deg, #F9E6C6 0%, #E2B279 55%, #B67E3F 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tz-ds__unit { margin-left: 4px; font-size: 0.56em; }

/* arrivals of the opening (JS adds .is-in) */
.tz-ds--js .tz-ds__w > span { transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 70ms + 100ms); }
.tz-ds--js .tz-ds__eyebrow { transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-ds--js .tz-ds__l { transition: opacity 1000ms ease, transform 1100ms cubic-bezier(0.22, 1, 0.36, 1), filter 1000ms ease; transition-delay: calc(900ms + var(--i, 0) * 480ms); }
.tz-ds--js .tz-ds__stat { transition: opacity 1100ms ease 1500ms, transform 1300ms cubic-bezier(0.22, 1, 0.36, 1) 1500ms; }
.tz-ds--js .tz-ds__intro:not(.is-in) .tz-ds__w > span { transform: translateY(118%); }
.tz-ds--js .tz-ds__intro:not(.is-in) .tz-ds__eyebrow { opacity: 0; transform: translateY(16px); }
.tz-ds--js .tz-ds__intro:not(.is-in) .tz-ds__l { opacity: 0; transform: translateY(18px); filter: blur(7px); }
.tz-ds--js .tz-ds__intro:not(.is-in) .tz-ds__stat { opacity: 0; transform: scale(0.82); }

/* ---------- The four posters: plain row (no JS) ---------- */
.tz-ds__stage { position: relative; }
.tz-home .tz-ds__panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tz-home .tz-ds__panel { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: #1B1410; }
.tz-home .tz-ds__panel img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.tz-ds__name, .tz-ds__flap { display: none; }

/* ---------- The tent (JS) ---------- */
.tz-ds--live .tz-ds__stage { height: var(--h); overflow: hidden; border-radius: 14px; background: #120D0A; box-shadow: 0 70px 120px -56px rgba(0,0,0,0.85), 0 0 0 1px rgba(226,178,121,0.28); }
.tz-home .tz-ds--live .tz-ds__panels { display: flex; gap: 8px; height: 100%; }
.tz-home .tz-ds--live .tz-ds__panel {
  flex: 1 1 0; min-width: 0; height: 100%; border-radius: 10px;
  transition: flex-grow 950ms cubic-bezier(0.22, 1, 0.36, 1), flex-basis 950ms cubic-bezier(0.22, 1, 0.36, 1), opacity 800ms ease, transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tz-home .tz-ds--live .tz-ds__panel.is-active { flex: 0 0 var(--h); }
.tz-home .tz-ds--live .tz-ds__panel img {
  position: absolute; top: 0; left: 50%; width: var(--h); height: var(--h); max-width: none; aspect-ratio: auto;
  transform: translateX(calc(-50% + var(--h) * (0.5 - var(--fx, 0.5)))) scale(1.06); filter: saturate(0.85) brightness(0.8);
  transition: transform 1150ms cubic-bezier(0.22, 1, 0.36, 1), filter 800ms ease;
}
.tz-home .tz-ds--live .tz-ds__panel.is-active img { transform: translateX(-50%) scale(1); filter: none; }
.tz-ds--live .tz-ds__panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity 700ms ease;
  /* solid over the top third: the words painted on the posters must not show through in pieces */
  background: linear-gradient(180deg, #0D0A08 0%, #0D0A08 37%, rgba(13,10,8,0.55) 46%, rgba(13,10,8,0.06) 60%, rgba(13,10,8,0.06) 70%, rgba(13,10,8,0.74) 100%);
}
.tz-ds--live .tz-ds__panel.is-active::after { opacity: 0; }
.tz-ds--live .tz-ds__name {
  display: block; position: absolute; z-index: 2; left: 50%; bottom: 24px; white-space: nowrap; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 27px; line-height: 1; color: var(--ds-gold-hi); text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  transition: opacity 500ms ease;
}
.tz-ds--live .tz-ds__panel.is-active .tz-ds__name { opacity: 0; }
.tz-home .tz-ds__pick, .tz-home .tz-ds__pick:hover, .tz-home .tz-ds__pick:focus {
  position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 10px;
  background: transparent; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tz-home .tz-ds__pick:focus-visible { outline: 2px solid var(--ds-gold); outline-offset: -4px; }
.tz-home .tz-ds__panel.is-active .tz-ds__pick { pointer-events: none; }

/* two tent flaps hang in front, hinged at the top centre, and swing open */
.tz-ds--live .tz-ds__flap {
  display: block; position: absolute; z-index: 5; top: 0; bottom: 0; width: 50.5%; will-change: transform;
  background-color: #17110D;
  background-image:
    linear-gradient(180deg, rgba(226,178,121,0) 0 15%, rgba(226,178,121,0.55) 15% 15.7%, rgba(226,178,121,0) 15.7% 18%, rgba(226,178,121,0.35) 18% 18.4%, rgba(226,178,121,0) 18.4% 80%, rgba(226,178,121,0.35) 80% 80.4%, rgba(226,178,121,0) 80.4% 82.7%, rgba(226,178,121,0.55) 82.7% 83.4%, rgba(226,178,121,0) 83.4% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 2px, rgba(255,255,255,0) 2px 7px);
  box-shadow: 0 0 70px rgba(0,0,0,0.7);
  transition: transform 2100ms cubic-bezier(0.7, 0, 0.2, 1), opacity 900ms ease 1400ms;
}
.tz-ds--live .tz-ds__flap--l { left: 0; transform-origin: 100% 0; }
.tz-ds--live .tz-ds__flap--r { right: 0; transform-origin: 0 0; }
.tz-ds--live.is-open .tz-ds__flap--l { transform: rotate(64deg); opacity: 0; }
.tz-ds--live.is-open .tz-ds__flap--r { transform: rotate(-64deg); opacity: 0; }
.tz-ds--live:not(.is-open) .tz-ds__panel { opacity: 0; transform: scale(0.93); }
.tz-ds--live.is-open .tz-ds__panel { transition-delay: 0s, 0s, calc(450ms + var(--i, 0) * 150ms), calc(450ms + var(--i, 0) * 150ms); }
.tz-ds--live.is-ready .tz-ds__panel { transition-delay: 0s; }

.tz-home .tz-ds__toggle, .tz-home .tz-ds__toggle:hover, .tz-home .tz-ds__toggle:focus {
  position: absolute; z-index: 6; right: 14px; bottom: 14px; width: 36px; height: 36px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(250,247,242,0.55); background: rgba(13,10,8,0.6); color: var(--cream); box-shadow: none; opacity: 0.9;
  -webkit-tap-highlight-color: transparent; transition: opacity 260ms ease, background-color 260ms ease;
}
.tz-home .tz-ds__toggle[hidden] { display: none; }
.tz-home .tz-ds__toggle:hover { opacity: 1; background: rgba(13,10,8,0.85); }
.tz-home .tz-ds__toggle:focus-visible { outline: 2px solid var(--ds-gold); outline-offset: 2px; }
.tz-ds__toggle::before, .tz-ds__toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 12px; margin: -6px 0 0 -5px; border-radius: 1px; background: currentColor; }
.tz-ds__toggle::after { margin-left: 2px; }
.tz-ds__toggle[aria-pressed="true"]::before { width: 0; height: 0; margin: -6px 0 0 -3px; border-radius: 0; background: transparent; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.tz-ds__toggle[aria-pressed="true"]::after { display: none; }

/* ---------- Closing ---------- */
.tz-ds__outro { margin-top: 68px; text-align: center; }
.tz-home .tz-ds__closing { max-width: 920px; margin: 0 auto 36px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(24px, 2.7vw, 38px); line-height: 1.3; color: var(--cream); text-wrap: balance; }
.tz-ds__closing span { display: block; }
.tz-ds__closing span + span { color: var(--ds-gold-hi); }
.tz-ds__cta { position: relative; display: inline-block; }
.tz-ds__cta::before { content: ''; position: absolute; inset: 0; border-radius: 10px; border: 1px solid rgba(226,178,121,0.8); pointer-events: none; animation: tz-ds-ringout 2800ms cubic-bezier(0.22, 1, 0.36, 1) infinite; }
@keyframes tz-ds-ringout { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.1, 1.45); } }
.tz-home .tz-ds__cta .tz-btn { min-height: 62px; padding: 0 38px; font-size: 17px; }
.tz-ds--js .tz-ds__closing span, .tz-ds--js .tz-ds__cta { transition: opacity 1000ms ease, transform 1100ms cubic-bezier(0.22, 1, 0.36, 1), filter 1000ms ease; }
.tz-ds--js .tz-ds__closing span + span { transition-delay: 450ms; }
.tz-ds--js .tz-ds__cta { transition-delay: 900ms; }
.tz-ds--js .tz-ds__outro:not(.is-in) .tz-ds__closing span { opacity: 0; transform: translateY(18px); filter: blur(7px); }
.tz-ds--js .tz-ds__outro:not(.is-in) .tz-ds__cta { opacity: 0; transform: translateY(18px); }

@media (max-width: 899px) {
  .tz-ds { padding: 76px 20px 80px; }
  .tz-ds__intro { display: block; margin-bottom: 46px; text-align: center; }
  .tz-home .tz-ds__eyebrow { font-size: 11.5px; letter-spacing: 0.18em; margin-bottom: 16px; }
  .tz-ds__eyebrow::before { width: 20px; }
  .tz-ds__eyebrow::after { content: ''; flex: none; width: 20px; height: 1px; background: currentColor; opacity: 0.7; }
  .tz-home .tz-ds__title { margin-bottom: 24px; }
  .tz-ds__stat { margin: 30px 0 34px; }
  .tz-home .tz-ds__stat-lead { margin-bottom: 26px; }
  .tz-home .tz-ds__medal { width: min(250px, 78%); }
  .tz-home .tz-ds__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  .tz-ds--live .tz-ds__stage { height: auto; }
  .tz-home .tz-ds--live .tz-ds__panels { flex-direction: column; gap: 6px; height: auto; }
  .tz-home .tz-ds--live .tz-ds__panel { flex: none; height: 68px; transition: height 850ms cubic-bezier(0.22, 1, 0.36, 1), opacity 800ms ease, transform 1000ms cubic-bezier(0.22, 1, 0.36, 1); }
  .tz-home .tz-ds--live .tz-ds__panel.is-active { flex: none; height: var(--w); }
  .tz-home .tz-ds--live .tz-ds__panel img { left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 1 / 1; transform: translateY(calc(-50% + var(--w) * (0.5 - var(--fy, 0.5)))) scale(1.04); }
  .tz-home .tz-ds--live .tz-ds__panel.is-active img { transform: translateY(-50%) scale(1); }
  .tz-ds--live .tz-ds__panel::after { background: linear-gradient(90deg, rgba(13,10,8,0.9) 0%, rgba(13,10,8,0.5) 46%, rgba(13,10,8,0.15) 100%); }
  .tz-ds--live .tz-ds__name { left: 18px; top: 50%; bottom: auto; writing-mode: horizontal-tb; transform: translateY(-50%); font-size: 23px; }
  .tz-ds--live.is-open .tz-ds__panel { transition-delay: 0s, calc(450ms + var(--i, 0) * 150ms), calc(450ms + var(--i, 0) * 150ms); }
  .tz-ds--live.is-ready .tz-ds__panel { transition-delay: 0s; }
  .tz-ds__outro { margin-top: 48px; }
  .tz-ds__cta { display: block; width: 100%; max-width: 380px; margin: 0 auto; }
  .tz-home .tz-ds__cta .tz-btn { width: 100%; justify-content: center; padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-ds__stars, .tz-ds__comet, .tz-ds__ring, .tz-ds__cta::before { animation: none; }
  .tz-ds__cta::before { opacity: 0; }
  .tz-ds--js .tz-ds__w > span, .tz-ds--js .tz-ds__eyebrow, .tz-ds--js .tz-ds__l, .tz-ds--js .tz-ds__stat, .tz-ds--js .tz-ds__closing span, .tz-ds--js .tz-ds__cta,
  .tz-home .tz-ds--live .tz-ds__panel, .tz-home .tz-ds--live .tz-ds__panel img, .tz-ds--live .tz-ds__flap { transition-duration: 1ms !important; transition-delay: 0s !important; }
  .tz-home .tz-ds__toggle { display: none; }
}

/* ===================================================================
   SECTION 17 - THE RUG STYLES OF MOROCCO (seven cards, one at a time)
   Each card is the user's artwork: landscape above, rug below, a cream
   box in the middle (measured at x 22.9 to 76.9 %, y 17.8 to 86.4 % of
   the picture). The words painted in that box are covered by real text.
   Wide screens: the text panel (.tz-rc__panel) sits exactly on the box.
   Narrow screens: the box only carries the name (.tz-rc__cover) and the
   text sits under the picture.
   Without JS the seven cards follow each other. With JS (.tz-rc--live)
   one card shows at a time; the change is a soft fade and rise.
   =================================================================== */

.tz-rc { position: relative; padding: 112px 32px 118px; background: linear-gradient(180deg, #FAF7F2 0%, #F4EDE3 100%); }
.tz-rc__inner { max-width: 1120px; margin: 0 auto; }

/* ---------- Heading ---------- */
.tz-rc__head { max-width: 720px; margin: 0 auto 30px; text-align: center; }
.tz-home .tz-rc__eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 16px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracotta);
}
.tz-rc__eyebrow::before, .tz-rc__eyebrow::after { content: ''; flex: none; width: 30px; height: 1px; background: currentColor; opacity: 0.6; }
.tz-home .tz-rc__title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -0.01em; color: var(--dark); }
.tz-home .tz-rc__lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }

/* ---------- The names (tabs) ---------- */
.tz-rc__tabs { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin: 0 0 30px; }
.tz-home .tz-rc__tab, .tz-home .tz-rc__tab:hover, .tz-home .tz-rc__tab:focus {
  position: relative; display: inline-block; padding: 9px 14px 13px;
  font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  color: var(--muted); text-decoration: none !important; background: none; box-shadow: none; outline: none; cursor: pointer;
  transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease;
}
.tz-home .tz-rc__tab:hover { color: var(--dark); }
.tz-home .tz-rc__tab:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; border-radius: 6px; }
.tz-rc__tab::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--terracotta);
  transform: scaleX(0); transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tz-rc__tab:hover::after { transform: scaleX(0.3); }
.tz-home .tz-rc--live .tz-rc__tab[aria-current="true"], .tz-home .tz-rc--live .tz-rc__tab[aria-current="true"]:hover, .tz-home .tz-rc--live .tz-rc__tab[aria-current="true"]:focus { color: var(--terracotta); }
.tz-rc--live .tz-rc__tab[aria-current="true"]::after { transform: scaleX(1); }

/* ---------- The cards (narrow layout first) ---------- */
.tz-rc__stage { display: grid; gap: 28px; touch-action: pan-y; }
.tz-rc__card {
  position: relative; overflow: hidden; border-radius: 18px; background: #FFFFFF; scroll-margin-top: 120px;
  box-shadow: 0 1px 2px rgba(36,31,26,0.06), 0 26px 60px -34px rgba(36,31,26,0.45);
}
.tz-rc__art { position: relative; aspect-ratio: 3 / 2; background: #FFFFFF; }
.tz-home .tz-rc__art img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none; }

/* the name, laid over the painted box */
.tz-rc__cover {
  position: absolute; left: 22.6%; right: 22.8%; top: 17.4%; bottom: 13.2%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 8px;
  border-radius: 6px; background: #F6EDE1; text-align: center;
}
.tz-home .tz-rc__num { display: block; margin: 0 0 8px; font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.22em; color: var(--terracotta); }
.tz-home .tz-rc__name { display: block; margin: 0 0 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4vw, 52px); line-height: 1.02; letter-spacing: 0.01em; color: var(--dark); }
.tz-home .tz-rc__sub { display: block; margin: -6px 0 12px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--terracotta); }
.tz-home .tz-rc__cover .tz-rc__num { margin-bottom: clamp(3px, 1vw, 10px); font-size: clamp(9px, 2.5vw, 13px); }
.tz-home .tz-rc__cover .tz-rc__name { margin: 0; font-size: clamp(24px, 7.6vw, 56px); }
.tz-home .tz-rc__cover .tz-rc__sub { margin: clamp(2px, 0.8vw, 8px) 0 0; font-size: clamp(13px, 3.5vw, 24px); }
.tz-rc__rule { display: block; width: clamp(26px, 7vw, 54px); height: 1px; margin-top: clamp(8px, 2.2vw, 18px); background: var(--terracotta); opacity: 0.55; }

.tz-rc__panel { position: relative; padding: 20px 20px 28px; text-align: center; }
.tz-home .tz-rc__text { margin: 0; font-size: 15.5px; line-height: 1.64; color: #3F372F; }
.tz-home .tz-rc__link, .tz-home .tz-rc__link:hover, .tz-home .tz-rc__link:focus {
  display: inline-flex; align-items: center; align-self: center; gap: 10px; margin-top: 16px; padding-bottom: 3px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terracotta); text-decoration: none !important; border-bottom: 1px solid rgba(152,69,47,0.4); box-shadow: none;
}
.tz-rc__link span { position: relative; flex: none; width: 18px; height: 1px; background: currentColor; transition: width 300ms ease; }
.tz-rc__link span::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.tz-rc__link:hover span { width: 28px; }

/* ---------- Previous / next ---------- */
.tz-rc__nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; }
.tz-rc__nav[hidden] { display: none; }
.tz-home .tz-rc__arrow, .tz-home .tz-rc__arrow:hover, .tz-home .tz-rc__arrow:focus {
  position: relative; flex: none; width: 48px; height: 48px; min-width: 0; margin: 0; padding: 0; border-radius: 50%;
  border: 1px solid rgba(36,31,26,0.22); background: transparent; color: var(--dark); box-shadow: none; cursor: pointer;
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}
.tz-home .tz-rc__arrow:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--cream); }
.tz-home .tz-rc__arrow:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.tz-rc__arrow::before { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translate(-70%, -50%) rotate(45deg); }
.tz-rc__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.tz-home .tz-rc__count { margin: 0; min-width: 64px; text-align: center; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1; color: var(--muted); }
.tz-rc__now { color: var(--dark); }

/* ---------- One card at a time (JS) ---------- */
.tz-rc--live .tz-rc__card { display: none; }
.tz-rc--live .tz-rc__card.is-active { display: block; }
.tz-rc--live.is-in .tz-rc__card.is-active { animation: tz-rc-card 640ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__panel > *,
.tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__cover > * { animation: tz-rc-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__panel > :nth-child(1), .tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__cover > :nth-child(1) { animation-delay: 120ms; }
.tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__panel > :nth-child(2), .tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__cover > :nth-child(2) { animation-delay: 190ms; }
.tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__panel > :nth-child(3), .tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__cover > :nth-child(3) { animation-delay: 260ms; }
.tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__panel > :nth-child(4), .tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__cover > :nth-child(4) { animation-delay: 330ms; }
.tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__panel > :nth-child(5) { animation-delay: 400ms; }
@keyframes tz-rc-card { from { opacity: 0; transform: translateY(12px) scale(0.988); } to { opacity: 1; transform: none; } }
@keyframes tz-rc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Arrival on screen (JS adds .is-in) ---------- */
.tz-rc--live .tz-rc__head { opacity: 0; transform: translateY(16px); transition: opacity 700ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-rc--live.is-in .tz-rc__head { opacity: 1; transform: none; }
.tz-rc--live:not(.is-in) .tz-rc__tab, .tz-rc--live:not(.is-in) .tz-rc__stage, .tz-rc--live:not(.is-in) .tz-rc__nav { opacity: 0; }
.tz-rc--live.is-in .tz-rc__tab { animation: tz-rc-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(160ms + var(--i, 0) * 55ms); }
.tz-rc--live .tz-rc__nav { transition: opacity 600ms ease 450ms; }

/* ---------- Narrow and middle widths: the name is on the picture, so in the text
   block it stays for screen readers only ---------- */
@media (max-width: 1059px) {
  .tz-rc__panel .tz-rc__num { display: none; }
  .tz-home .tz-rc__panel .tz-rc__name, .tz-home .tz-rc__panel .tz-rc__sub {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}
@media (min-width: 600px) and (max-width: 1059px) {
  .tz-rc__panel { padding: 26px 56px 40px; }
  .tz-home .tz-rc__text { font-size: 16.5px; }
}

/* ---------- Wide screens: the whole text sits on the painted box ---------- */
@media (min-width: 1060px) {
  .tz-rc__card { aspect-ratio: 3 / 2; }
  .tz-rc__art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .tz-rc__cover { display: none; }
  .tz-rc__panel {
    position: absolute; left: 22.6%; right: 22.8%; top: 17.4%; bottom: 13.2%;
    display: flex; flex-direction: column; justify-content: center; padding: 18px clamp(30px, 3.4vw, 46px);
    border-radius: 10px; background: #F6EDE1;
  }
  .tz-home .tz-rc__text { font-size: clamp(14.5px, 1.45vw, 17px); }
}

/* ---------- Phones: the names become a row to slide ---------- */
@media (max-width: 599px) {
  .tz-rc { padding: 76px 16px 84px; }
  .tz-rc__head { margin-bottom: 22px; }
  .tz-home .tz-rc__eyebrow { font-size: 12px; letter-spacing: 0.2em; gap: 10px; }
  .tz-rc__eyebrow::before, .tz-rc__eyebrow::after { width: 20px; }
  .tz-home .tz-rc__lead { font-size: 16px; }
  .tz-rc__tabs {
    flex-wrap: nowrap; justify-content: flex-start; gap: 8px; margin: 0 -16px 20px; padding: 4px 16px 6px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tz-rc__tabs::-webkit-scrollbar { display: none; }
  .tz-home .tz-rc__tab, .tz-home .tz-rc__tab:hover, .tz-home .tz-rc__tab:focus {
    flex: none; padding: 9px 17px 10px; font-size: 19px; border: 1px solid rgba(36,31,26,0.16); border-radius: 999px; background: rgba(255,255,255,0.6);
  }
  .tz-rc__tab::after { display: none; }
  .tz-home .tz-rc--live .tz-rc__tab[aria-current="true"], .tz-home .tz-rc--live .tz-rc__tab[aria-current="true"]:hover, .tz-home .tz-rc--live .tz-rc__tab[aria-current="true"]:focus {
    background: var(--terracotta); border-color: var(--terracotta); color: var(--cream);
  }
  .tz-rc__stage { gap: 20px; }
  .tz-rc__card { border-radius: 14px; }
  .tz-rc__cover { border-radius: 4px; }
  .tz-rc__nav { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-rc--live.is-in .tz-rc__card.is-active, .tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__panel > *, .tz-rc--live.is-in .tz-rc__card.is-active .tz-rc__cover > *, .tz-rc--live.is-in .tz-rc__tab { animation: none; }
  .tz-rc--live .tz-rc__head, .tz-rc--live .tz-rc__nav, .tz-home .tz-rc__tab, .tz-rc__tab::after { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* ===================================================================
   SECTION 18 - FROM THE JOURNAL (the newest articles)
   Forest background. Wide screens (900px and up): the list <ol> is a
   two-column grid; every <li> is display:contents, so its picture
   (.tz-jl__media) goes to the left column, all pictures stacked in one
   frame, and its text (.tz-jl__body) becomes a row on the right. The
   .is-active article shows its picture: it is wiped in from the right
   over the previous one (.is-prev). A gold line runs along the top of
   the active row (--hold); when it ends tz-home.js moves on. Hovering
   a row chooses it. Without JS the first picture shows and hovering a
   row shows its picture (CSS only).
   Phones: a row of cards to slide, nothing moves by itself.
   =================================================================== */

.tz-jl {
  position: relative; overflow: hidden; padding: 112px 32px 120px; color: var(--cream);
  background-color: #2B352D;
  background-image:
    radial-gradient(55% 70% at 12% 0%, rgba(217,165,106,0.12) 0%, rgba(217,165,106,0) 70%),
    repeating-linear-gradient(0deg, rgba(250,247,242,0.022) 0 1px, rgba(250,247,242,0) 1px 26px),
    linear-gradient(180deg, #303B32 0%, #252E27 100%);
}
.tz-jl__inner {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head more" "stage stage";
  column-gap: 40px; row-gap: 48px; align-items: end;
}
.tz-jl__head { grid-area: head; max-width: 780px; }
.tz-jl__more { grid-area: more; padding-bottom: 8px; }
.tz-jl__stage { grid-area: stage; position: relative; --gap: clamp(32px, 4.6vw, 72px); }

/* ---------- Heading ---------- */
.tz-home .tz-jl__eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 20px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
}
.tz-jl__eyebrow::before { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
.tz-home .tz-jl__title { margin: 0 0 16px; font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 4.8vw, 66px); line-height: 1.04; letter-spacing: -0.01em; color: var(--cream); }
.tz-jl__w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.07em 0.16em; margin: -0.04em -0.07em -0.16em; }
.tz-jl__w > span { display: inline-block; }
.tz-home .tz-jl__lead { margin: 0; max-width: 54ch; font-size: 18px; line-height: 1.6; color: rgba(250,247,242,0.82); }

/* ---------- The list as a two-column grid ---------- */
.tz-home .tz-jl__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: repeat(var(--n, 4), auto); column-gap: var(--gap);
}
.tz-jl__item { display: contents; }

/* the frame (left) */
.tz-home .tz-jl__media, .tz-home .tz-jl__media:hover, .tz-home .tz-jl__media:focus {
  grid-column: 1; grid-row: 1 / -1; position: relative; z-index: 0; display: block; min-height: 500px; overflow: hidden; border-radius: 18px;
  background: #1E2620; color: var(--cream); text-decoration: none !important; outline: none;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.8);
  clip-path: inset(0 0 0 100%);
}
.tz-home .tz-jl__item.is-prev .tz-jl__media { clip-path: inset(0); z-index: 1; }
.tz-home .tz-jl__item.is-active .tz-jl__media { clip-path: inset(0); z-index: 2; transition: clip-path 950ms cubic-bezier(0.76, 0, 0.24, 1); }
.tz-home .tz-jl:not(.tz-jl--live) .tz-jl__item:hover .tz-jl__media { clip-path: inset(0); z-index: 3; }
.tz-home .tz-jl__media img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.08); }
.tz-home .tz-jl__item.is-prev .tz-jl__media img { transform: none; }
.tz-home .tz-jl__item.is-active .tz-jl__media img { transform: none; transition: transform 1700ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-jl__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,24,20,0.38) 0%, rgba(20,24,20,0) 26%, rgba(20,24,20,0) 36%, rgba(20,24,20,0.7) 66%, rgba(20,24,20,0.95) 100%);
}
.tz-jl__media--empty { background-image: repeating-linear-gradient(45deg, rgba(250,247,242,0.04) 0 2px, rgba(250,247,242,0) 2px 14px); }
.tz-jl__no { position: absolute; left: 28px; top: 18px; z-index: 1; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 64px; line-height: 1; color: rgba(250,247,242,0.94); text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.tz-jl__cap { position: absolute; left: 30px; right: 30px; bottom: 28px; z-index: 1; display: grid; gap: 10px; justify-items: start; }
.tz-jl__cap-meta { font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.tz-jl__cap-text { max-width: 52ch; font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--cream); }
.tz-jl__cap-go, .tz-jl__go { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); }
.tz-jl__cap-go i, .tz-jl__go i { position: relative; flex: none; width: 22px; height: 1px; background: currentColor; transition: width 300ms ease; }
.tz-jl__cap-go i::after, .tz-jl__go i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.tz-jl__media:hover .tz-jl__cap-go i { width: 34px; }
.tz-jl__go { display: none; }

/* the rows (right) */
.tz-jl__body {
  grid-column: 2; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 14px; align-items: center;
  padding: 25px 0; border-top: 1px solid rgba(250,247,242,0.16);
}
.tz-jl__item:last-child .tz-jl__body { border-bottom: 1px solid rgba(250,247,242,0.16); }
.tz-jl__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; }
.tz-jl__bar i { display: block; width: 100%; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.tz-jl__num { align-self: start; padding-top: 1px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 25px; line-height: 1.2; color: rgba(217,165,106,0.6); transition: color 350ms ease; }
.tz-jl__txt { transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-home .tz-jl__meta { margin: 0 0 7px; font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(250,247,242,0.56); }
.tz-home .tz-jl__name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.16; letter-spacing: 0; }
.tz-home .tz-jl__link, .tz-home .tz-jl__link:hover, .tz-home .tz-jl__link:focus { color: rgba(250,247,242,0.62); text-decoration: none !important; outline: none; box-shadow: none; transition: color 350ms ease; }
.tz-jl__link::after { content: ''; position: absolute; inset: 0; }   /* the whole row is the link */
.tz-jl__link:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.tz-home .tz-jl__excerpt { display: none; }
.tz-jl__arrow { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(250,247,242,0.26); color: rgba(250,247,242,0.7); transition: background-color 350ms ease, border-color 350ms ease, color 350ms ease, transform 450ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-jl__arrow::before { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translate(-70%, -50%) rotate(45deg); }

.tz-home .tz-jl__item.is-active .tz-jl__link, .tz-home .tz-jl:not(.tz-jl--live) .tz-jl__item:hover .tz-jl__link { color: var(--cream); }
.tz-jl__item.is-active .tz-jl__num { color: var(--gold); }
.tz-jl__item.is-active .tz-jl__txt { transform: translateX(6px); }
.tz-jl__item.is-active .tz-jl__arrow { background: var(--gold); border-color: var(--gold); color: #241F1A; transform: translateX(-4px); }

/* the line that runs while an article is in the frame */
.tz-jl--live.is-in .tz-jl__item.is-active .tz-jl__bar i { animation: tz-jl-fill var(--hold, 6000ms) linear both; }
.tz-jl.is-paused .tz-jl__bar i, .tz-jl.is-offscreen .tz-jl__bar i, .tz-jl__stage:hover .tz-jl__bar i, .tz-jl__stage:focus-within .tz-jl__bar i { animation-play-state: paused !important; }
.tz-jl--solo .tz-jl__bar { display: none; }
@keyframes tz-jl-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the caption comes up with its picture */
.tz-jl--live.is-in .tz-jl__item.is-active .tz-jl__cap > *, .tz-jl--live.is-in .tz-jl__item.is-active .tz-jl__no { animation: tz-jl-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.tz-jl--live.is-in .tz-jl__item.is-active .tz-jl__no { animation-delay: 320ms; }
.tz-jl--live.is-in .tz-jl__item.is-active .tz-jl__cap > :nth-child(1) { animation-delay: 420ms; }
.tz-jl--live.is-in .tz-jl__item.is-active .tz-jl__cap > :nth-child(2) { animation-delay: 500ms; }
.tz-jl--live.is-in .tz-jl__item.is-active .tz-jl__cap > :nth-child(3) { animation-delay: 580ms; }
@keyframes tz-jl-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* pause / play */
.tz-home .tz-jl__toggle, .tz-home .tz-jl__toggle:hover, .tz-home .tz-jl__toggle:focus {
  position: absolute; z-index: 5; top: 18px; left: calc((100% - var(--gap)) * 0.5556 - 60px); width: 42px; height: 42px; min-width: 0; margin: 0; padding: 0;
  border-radius: 50%; border: 1px solid rgba(250,247,242,0.45); background: rgba(20,24,20,0.5); color: var(--cream); box-shadow: none; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 250ms ease;
}
.tz-home .tz-jl__toggle[hidden] { display: none; }
.tz-home .tz-jl__toggle:hover { background: rgba(20,24,20,0.8); }
.tz-home .tz-jl__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tz-jl__toggle::before, .tz-jl__toggle::after { content: ''; position: absolute; top: 50%; width: 3px; height: 12px; margin-top: -6px; background: currentColor; border-radius: 1px; }
.tz-jl__toggle::before { left: 15px; }
.tz-jl__toggle::after { right: 15px; }
.tz-jl__toggle[aria-pressed="true"]::before { left: 16px; width: 0; height: 0; margin-top: -7px; background: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; border-radius: 0; }
.tz-jl__toggle[aria-pressed="true"]::after { display: none; }

/* ---------- Arrival on screen (JS adds .is-in) ---------- */
.tz-jl--live .tz-jl__w > span { transform: translateY(112%); transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.tz-jl--live.is-in .tz-jl__w > span { transform: none; }
.tz-jl--live .tz-jl__eyebrow, .tz-jl--live .tz-jl__lead, .tz-jl--live .tz-jl__more { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-jl--live .tz-jl__lead { transition-delay: 380ms; }
.tz-jl--live .tz-jl__more { transition-delay: 520ms; }
.tz-jl--live.is-in .tz-jl__eyebrow, .tz-jl--live.is-in .tz-jl__lead, .tz-jl--live.is-in .tz-jl__more { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .tz-home .tz-jl--live:not(.is-in) .tz-jl__item .tz-jl__media { clip-path: inset(0 0 0 100%); }
  .tz-jl--live .tz-jl__body { opacity: 0; transform: translateX(28px); transition: opacity 700ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(420ms + var(--i, 0) * 110ms); }
  .tz-jl--live.is-in .tz-jl__body { opacity: 1; transform: none; }
  .tz-jl--live:not(.is-in) .tz-jl__toggle { opacity: 0; }
}

/* ---------- Phones and small tablets: cards to slide ---------- */
@media (max-width: 899px) {
  .tz-jl { padding: 78px 0 86px; }
  .tz-jl__inner { display: block; }
  .tz-jl__head { padding: 0 20px; margin-bottom: 28px; }
  .tz-home .tz-jl__lead { font-size: 16.5px; }
  .tz-home .tz-jl__list {
    display: flex; gap: 16px; overflow-x: auto; padding: 4px 20px 18px; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tz-jl__list::-webkit-scrollbar { display: none; }
  .tz-jl__item {
    display: flex; flex-direction: column; flex: 0 0 min(82vw, 400px); scroll-snap-align: start; overflow: hidden; border-radius: 16px;
    background: rgba(250,247,242,0.06); border: 1px solid rgba(250,247,242,0.14);
  }
  .tz-home .tz-jl__media, .tz-home .tz-jl__media:hover, .tz-home .tz-jl__media:focus,
  .tz-home .tz-jl__item.is-prev .tz-jl__media, .tz-home .tz-jl__item.is-active .tz-jl__media { flex: none; min-height: 0; aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; clip-path: none; z-index: 0; transition: none; }
  .tz-home .tz-jl__media img, .tz-home .tz-jl__item.is-active .tz-jl__media img { transform: none; transition: none; }
  .tz-jl__media::after { background: linear-gradient(180deg, rgba(20,24,20,0.4) 0%, rgba(20,24,20,0) 45%); }
  .tz-jl__cap { display: none; }
  .tz-jl__no { left: 16px; top: 10px; font-size: 40px; animation: none !important; }
  .tz-jl__body, .tz-jl__item:last-child .tz-jl__body { display: block; flex: 1 1 auto; padding: 18px 18px 22px; border: 0; }
  .tz-jl__bar, .tz-jl__num, .tz-jl__arrow, .tz-home .tz-jl__toggle { display: none; }
  .tz-jl__item.is-active .tz-jl__txt { transform: none; }
  .tz-home .tz-jl__name { font-size: 24px; }
  .tz-home .tz-jl__link, .tz-home .tz-jl__link:hover, .tz-home .tz-jl__link:focus { color: var(--cream); }
  .tz-home .tz-jl__excerpt { display: block; margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: rgba(250,247,242,0.78); }
  .tz-jl__go { display: inline-flex; margin-top: 14px; color: var(--gold); }
  .tz-jl__more { padding: 10px 20px 0; }
  .tz-home .tz-jl__more .tz-btn { width: 100%; max-width: 420px; justify-content: center; }
  .tz-jl--live .tz-jl__item { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(260ms + var(--i, 0) * 110ms); }
  .tz-jl--live.is-in .tz-jl__item { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-jl--live.is-in .tz-jl__item.is-active .tz-jl__bar i, .tz-jl--live.is-in .tz-jl__item.is-active .tz-jl__cap > *, .tz-jl--live.is-in .tz-jl__item.is-active .tz-jl__no { animation: none; }
  .tz-jl__bar, .tz-home .tz-jl__toggle { display: none; }
  .tz-jl--live .tz-jl__w > span, .tz-jl--live .tz-jl__eyebrow, .tz-jl--live .tz-jl__lead, .tz-jl--live .tz-jl__more, .tz-jl--live .tz-jl__body, .tz-jl--live .tz-jl__item,
  .tz-home .tz-jl__item.is-active .tz-jl__media, .tz-home .tz-jl__item.is-active .tz-jl__media img, .tz-jl__txt, .tz-jl__arrow { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* ===================================================================
   SECTION 19 - OUR RUGS, IN MOTION (short films, above the Journal)
   A row of upright cards (9:16) that slides sideways with the browser's
   own scrolling and snapping: light, and natural under a finger.
   Without JS: a plain row, each card opens its film on YouTube.
   With JS (.tz-vd--live): tz-home.js writes two numbers on every card
   while the row moves, --d (how many cards it is from the middle, with
   its sign) and --a (the same without sign, 0 to 1). The CSS turns them
   into the arc: the middle card stands tall, the others sink, shrink,
   lean and dim. On arrival (.is-in) the cards are dealt in one by one
   and the row glides to its starting film.
   A click plays the film inside its card (.is-playing).
   =================================================================== */

.tz-vd {
  position: relative; overflow: hidden; padding: 104px 0 104px;
  background-color: #EFE3D3;
  background-image:
    radial-gradient(60% 46% at 50% 62%, rgba(152,69,47,0.14) 0%, rgba(152,69,47,0) 72%),
    linear-gradient(180deg, #F4EDE3 0%, #EFE3D3 100%);
}

/* ---------- Heading ---------- */
.tz-vd__head { max-width: 760px; margin: 0 auto 6px; padding: 0 24px; text-align: center; }
.tz-home .tz-vd__eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 16px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terracotta);
}
.tz-vd__eyebrow::before, .tz-vd__eyebrow::after { content: ''; flex: none; width: 30px; height: 1px; background: currentColor; opacity: 0.6; }
.tz-home .tz-vd__title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 4.6vw, 62px); line-height: 1.06; letter-spacing: -0.01em; color: var(--dark); }
.tz-vd__w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.07em 0.16em; margin: -0.04em -0.07em -0.16em; }
.tz-vd__w > span { display: inline-block; }
.tz-home .tz-vd__lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }

/* ---------- The row ---------- */
.tz-vd__stage { position: relative; }
.tz-home .tz-vd__track {
  --cw: clamp(210px, 19.5vw, 280px);
  position: relative; list-style: none; margin: 0; display: flex; gap: 26px;
  padding: 50px max(24px, calc(50% - var(--cw) / 2)) 96px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none;
}
.tz-vd__track::-webkit-scrollbar { display: none; }
.tz-vd__track:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -6px; border-radius: 12px; }
.tz-vd__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.tz-vd__track.is-dragging .tz-vd__open { pointer-events: none; }

.tz-vd__card {
  --d: 0; --a: 0;
  position: relative; flex: 0 0 var(--cw); margin: 0; padding: 0; scroll-snap-align: center;
  transform: translateY(calc(var(--a) * 30px)) scale(calc(1 - var(--a) * 0.13)) rotate(calc(var(--d) * 2.4deg));
  transform-origin: 50% 100%; will-change: transform;
}
.tz-vd__in {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: #241F1A;
  box-shadow: 0 2px 4px rgba(36,31,26,0.14), 0 36px 60px -32px rgba(36,31,26,0.7);
}
/* the cards away from the middle are a little darker */
.tz-vd__in::after { content: ''; position: absolute; inset: 0; z-index: 2; background: #241F1A; opacity: calc(var(--a) * 0.36); pointer-events: none; }
.tz-home .tz-vd__open, .tz-home .tz-vd__open:hover, .tz-home .tz-vd__open:focus { position: absolute; inset: 0; display: block; color: var(--cream); text-decoration: none !important; outline: none; }
.tz-home .tz-vd__open:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 22px; }
.tz-home .tz-vd__open img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1); -webkit-user-drag: none; user-select: none; }
.tz-vd__open::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,31,26,0) 55%, rgba(36,31,26,0.55) 100%); }
@media (hover: hover) { .tz-home .tz-vd__open:hover img { transform: scale(1.06); } }

.tz-vd__play {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%;
  background: rgba(250,247,242,0.94); box-shadow: 0 10px 26px -8px rgba(0,0,0,0.6);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), background-color 250ms ease;
}
.tz-vd__play::before { content: ''; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -7px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--terracotta); }
.tz-vd__play::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(250,247,242,0.9); opacity: 0; }
.tz-vd__open:hover .tz-vd__play { transform: scale(1.1); background: #FFFFFF; }
.tz-vd__card.is-current .tz-vd__play::after { animation: tz-vd-ring 2400ms cubic-bezier(0.22, 1, 0.36, 1) infinite; }
@keyframes tz-vd-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.75); } }
.tz-vd__no { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 26px; line-height: 1; color: rgba(250,247,242,0.95); text-shadow: 0 1px 10px rgba(0,0,0,0.45); }

/* the film itself */
.tz-vd__player { position: absolute; inset: 0; z-index: 3; display: none; background: #000; }
.tz-vd__card.is-playing .tz-vd__player { display: block; }
.tz-vd__player iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; }
.tz-vd__card.is-playing .tz-vd__in::after { opacity: 0; }
.tz-home .tz-vd__close, .tz-home .tz-vd__close:hover, .tz-home .tz-vd__close:focus {
  position: absolute; z-index: 5; top: -15px; right: -13px; width: 40px; height: 40px; min-width: 0; margin: 0; padding: 0; border-radius: 50%;
  border: 2px solid var(--cream); background: var(--dark); color: var(--cream); box-shadow: 0 8px 18px -8px rgba(0,0,0,0.6); cursor: pointer;
}
.tz-home .tz-vd__close[hidden] { display: none; }
.tz-vd__close::before, .tz-vd__close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -0.75px 0 0 -8px; background: currentColor; transform: rotate(45deg); }
.tz-vd__close::after { transform: rotate(-45deg); }
.tz-home .tz-vd__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Arrows and dots ---------- */
.tz-vd__nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: -50px; padding: 0 24px; }
.tz-vd__nav[hidden] { display: none; }
.tz-home .tz-vd__arrow, .tz-home .tz-vd__arrow:hover, .tz-home .tz-vd__arrow:focus {
  position: relative; flex: none; width: 48px; height: 48px; min-width: 0; margin: 0; padding: 0; border-radius: 50%;
  border: 1px solid rgba(36,31,26,0.24); background: transparent; color: var(--dark); box-shadow: none; cursor: pointer;
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease, opacity 250ms ease;
}
.tz-home .tz-vd__arrow:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--cream); }
.tz-home .tz-vd__arrow:disabled, .tz-home .tz-vd__arrow:disabled:hover { opacity: 0.32; cursor: default; background: transparent; border-color: rgba(36,31,26,0.24); color: var(--dark); }
.tz-home .tz-vd__arrow:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.tz-vd__arrow::before { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translate(-70%, -50%) rotate(45deg); }
.tz-vd__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.tz-vd__dots { display: flex; align-items: center; gap: 2px; }
.tz-home .tz-vd__dot, .tz-home .tz-vd__dot:hover, .tz-home .tz-vd__dot:focus {
  position: relative; flex: none; width: 20px; height: 28px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tz-vd__dot::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 8px; margin-top: -4px; border-radius: 999px; background: rgba(36,31,26,0.24); transition: background-color 300ms ease; }
.tz-home .tz-vd__dot.is-current { width: 40px; }
.tz-vd__dot.is-current::before { background: var(--terracotta); }
.tz-home .tz-vd__dot:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 0; border-radius: 6px; }

.tz-home .tz-vd__more { margin: 30px 0 0; padding: 0 24px; text-align: center; }
.tz-home .tz-vd__more a, .tz-home .tz-vd__more a:hover, .tz-home .tz-vd__more a:focus {
  display: inline-flex; align-items: center; gap: 10px; padding-bottom: 3px; font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terracotta); text-decoration: none !important; border-bottom: 1px solid rgba(152,69,47,0.4); box-shadow: none;
}
.tz-vd__more i { position: relative; flex: none; width: 18px; height: 1px; background: currentColor; transition: width 300ms ease; }
.tz-vd__more i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.tz-vd__more a:hover i { width: 28px; }

/* ---------- Arrival on screen (JS adds .is-in) ---------- */
.tz-vd--live .tz-vd__track { cursor: grab; }
.tz-vd--live .tz-vd__w > span { transform: translateY(112%); transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.tz-vd--live.is-in .tz-vd__w > span { transform: none; }
.tz-vd--live .tz-vd__eyebrow, .tz-vd--live .tz-vd__lead, .tz-vd--live .tz-vd__nav, .tz-vd--live .tz-vd__more { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 800ms cubic-bezier(0.22, 1, 0.36, 1); }
.tz-vd--live .tz-vd__lead { transition-delay: 320ms; }
.tz-vd--live .tz-vd__nav, .tz-vd--live .tz-vd__more { transition-delay: 900ms; }
.tz-vd--live.is-in .tz-vd__eyebrow, .tz-vd--live.is-in .tz-vd__lead, .tz-vd--live.is-in .tz-vd__nav, .tz-vd--live.is-in .tz-vd__more { opacity: 1; transform: none; }
/* the cards are dealt in, one after the other */
.tz-vd--live .tz-vd__in { opacity: 0; transform: translateY(80px) rotate(calc((var(--i, 0) - 2) * -5deg)); transition: opacity 600ms ease, transform 1100ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(180ms + var(--i, 0) * 85ms); }
.tz-vd--live.is-in .tz-vd__in { opacity: 1; transform: none; }

/* ---------- Phones ---------- */
@media (max-width: 599px) {
  .tz-vd { padding: 76px 0 80px; }
  .tz-home .tz-vd__eyebrow { font-size: 12px; letter-spacing: 0.2em; gap: 10px; }
  .tz-vd__eyebrow::before, .tz-vd__eyebrow::after { width: 20px; }
  .tz-home .tz-vd__lead { font-size: 16px; }
  .tz-home .tz-vd__track { --cw: min(62vw, 250px); gap: 14px; padding-top: 38px; padding-bottom: 88px; }
  .tz-vd__in { border-radius: 18px; }
  .tz-vd__play { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .tz-vd__nav { gap: 10px; margin-top: -46px; }
  .tz-home .tz-vd__arrow { width: 44px; height: 44px; }
  .tz-home .tz-vd__dot { width: 16px; }
  .tz-vd__dot::before { left: 4px; right: 4px; }
  .tz-home .tz-vd__dot.is-current { width: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-vd__card { transform: none; }
  .tz-vd__in::after { opacity: 0; }
  .tz-vd__card.is-current .tz-vd__play::after { animation: none; }
  .tz-vd--live .tz-vd__w > span, .tz-vd--live .tz-vd__eyebrow, .tz-vd--live .tz-vd__lead, .tz-vd--live .tz-vd__nav, .tz-vd--live .tz-vd__more, .tz-vd--live .tz-vd__in,
  .tz-home .tz-vd__open img, .tz-home .tz-vd__dot { transition-duration: 1ms !important; transition-delay: 0s !important; }
}