/* ==========================================================================
   Z&S ENTERPRISES — GLOBAL STYLESHEET
   ========================================================================== */

:root {
  /* ---- inherited brand tokens (kept identical to navbar/footer) ---- */
  --zs-bg: #14231D;
  --zs-mocha: #1D3027;
  --zs-mocha-2: #284238;
  --zs-ivory: #F4F0E7;
  --zs-text-muted: #B8C1B9;
  --zs-gold: #C9A66B;
  --zs-gold-hover: #DFC38E;
  --zs-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- new light-system tokens for the homepage body ---- */
  --zs-cream: #FBF8F1;          /* page background — lightest */
  --zs-sand: #EFE7D8;           /* soft beige — alt section bg */
  --zs-sand-2: #E6DBC6;         /* deeper beige — hairlines on sand */
  --zs-charcoal: #221D17;       /* primary text */
  --zs-charcoal-soft: #5B5347;  /* secondary / muted text on light bg */
  --zs-forest: #1F3328;         /* deep muted green — dark sections, text accents */
  --zs-forest-soft: #2C4A3A;
  --zs-mocha-warm: #6E4B32;     /* warm brown / muted mocha accent */
  --zs-mocha-warm-soft: #8A6A4C;

  --zs-line: rgba(34, 29, 23, 0.12);       /* hairline border on light bg */
  --zs-line-soft: rgba(34, 29, 23, 0.07);
  --zs-gold-line: rgba(201, 166, 107, 0.5);

  /* ---- type ---- */
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ---- layout ---- */
  --zs-container: 1360px;
  --zs-gutter: clamp(20px, 5vw, 64px);
  --zs-nav-clearance: 118px;
}

/* ==========================================================================
   RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--zs-cream);
  color: var(--zs-charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { display: block; overflow-x: hidden; }

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

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, p, figure { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

address { font-style: normal; }

/* ==========================================================================
   TYPE PRIMITIVES
   ========================================================================== */

.zs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
}

.zs-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--zs-gold);
}

.zs-heading-xl {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.98;
  color: var(--zs-charcoal);
}

.zs-heading-lg {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.04;
  color: var(--zs-charcoal);
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.zs-container {
  width: 100%;
  max-width: var(--zs-container);
  margin: 0 auto;
  padding: 0 var(--zs-gutter);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.zs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;

  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;

  transition: background 260ms var(--zs-ease), color 260ms var(--zs-ease),
    border-color 260ms var(--zs-ease), transform 260ms var(--zs-ease),
    box-shadow 260ms var(--zs-ease);
}

.zs-btn--primary {
  background: var(--zs-forest);
  color: var(--zs-ivory);
  box-shadow: 0 10px 26px rgba(31, 51, 40, 0.18);
}

.zs-btn--primary:hover {
  background: var(--zs-gold);
  color: #211A14;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(201, 166, 107, 0.30);
}

.zs-btn--ghost {
  background: transparent;
  border-color: var(--zs-line);
  color: var(--zs-charcoal);
}

.zs-btn--ghost:hover {
  border-color: var(--zs-mocha-warm);
  background: var(--zs-sand);
  transform: translateY(-2px);
}

.zs-btn--on-dark {
  background: var(--zs-gold);
  color: #211A14;
  box-shadow: 0 10px 26px rgba(201, 166, 107, 0.22);
}

.zs-btn--on-dark:hover {
  background: var(--zs-gold-hover);
  transform: translateY(-2px);
}

.zs-btn--text {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--zs-charcoal);
  font-weight: 600;
  gap: 8px;
}

.zs-btn--text .zs-arrow { transition: transform 260ms var(--zs-ease); }
.zs-btn--text:hover .zs-arrow { transform: translateX(4px); }
.zs-btn--text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

/* ==========================================================================
   FOCUS ACCESSIBILITY
   ========================================================================== */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--zs-mocha-warm);
  outline-offset: 3px;
}

/* ==========================================================================
   SCROLL-REVEAL PRIMITIVE (shared attribute, no section-specific rules)
   Sections opt in with [data-reveal] and toggle .is-in via their own JS.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 820ms var(--zs-ease), transform 820ms var(--zs-ease);
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Z&S HOME PAGE — SECTION STYLES
   Consolidated from assets/css/home/*.css during architecture cleanup.
   Namespaces preserved: zs-h- (hero), zs-in- (intro), zs-sol- (solutions),
   zs-ind- (industries teaser), zs-why-, zs-proc- (process), zs-show-
   (showcase), zs-cta- (final CTA). Used only by index.html.
   ========================================================================== */

/* ==========================================================================
   Z&S HOME — HERO SECTION
   Namespace: zs-h-*   (isolated: no rules outside .zs-h-hero)
   ========================================================================== */

.zs-h-hero {
  position: relative;
  overflow: hidden;

  padding: calc(var(--zs-nav-clearance) + 30px) 0 0;

  background:
    radial-gradient(1200px 640px at 86% -12%, rgba(201, 166, 107, 0.14), transparent 58%),
    var(--zs-cream);
}

.zs-h-layout {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;

  padding-left: 46px;
  padding-bottom: 56px;
}

/* ---------------------------- copy column ---------------------------- */

.zs-h-copy { max-width: 620px; }

.zs-h-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 30px;

  opacity: 0;
  transform: translateY(14px);
}

.zs-h-title {
  font-size: clamp(46px, 6.2vw, 96px);
  margin-bottom: 30px;
}

.zs-h-line {
  display: block;
  overflow: hidden;
}

.zs-h-line-mask {
  display: block;
  transform: translateY(105%);
  opacity: 0;
}

.zs-h-hero.is-loaded .zs-h-line:nth-child(1) .zs-h-line-mask { animation: zsHLineUp 900ms var(--zs-ease) 160ms forwards; }
.zs-h-hero.is-loaded .zs-h-line:nth-child(2) .zs-h-line-mask { animation: zsHLineUp 900ms var(--zs-ease) 280ms forwards; }
.zs-h-hero.is-loaded .zs-h-line:nth-child(3) .zs-h-line-mask { animation: zsHLineUp 900ms var(--zs-ease) 400ms forwards; }

.zs-h-line--accent {
  color: var(--zs-forest);
  padding-left: 0.9em;
}

.zs-h-title em {
  font-style: normal;
  color: var(--zs-charcoal);
  position: relative;
  width: fit-content;
}

.zs-h-title em::after {
  content: "";
  position: absolute;
  left: 2px;
  right: -6px;
  bottom: 0.1em;
  height: 0.28em;
  background: rgba(201, 166, 107, 0.34);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
}

.zs-h-hero.is-loaded .zs-h-title em::after {
  animation: zsHUnderline 900ms var(--zs-ease) 1050ms forwards;
}

.zs-h-desc {
  font-size: 17px;
  line-height: 1.75;
  color: var(--zs-charcoal-soft);
  max-width: 460px;
  margin-bottom: 40px;

  opacity: 0;
  transform: translateY(18px);
}

.zs-h-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;

  opacity: 0;
  transform: translateY(18px);
}

.zs-h-actions .zs-arrow { display: inline-flex; }

/* ---------------------------- visual column ---------------------------- */

.zs-h-visual {
  position: relative;
  opacity: 0;
  transform: translateY(30px);
}

.zs-h-stack {
  position: relative;
  transform: translateY(var(--zs-h-float-y, 0px)) translateX(var(--zs-h-tilt-x, 0px));
  transition: transform 140ms linear;
}

.zs-h-photo {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--zs-line);
  background: rgba(255, 255, 255, 0.4);
}

.zs-h-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 1500ms var(--zs-ease);
}

.zs-h-hero.is-loaded .zs-h-photo img { transform: scale(1); }

.zs-h-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,51,40,0.1), transparent 40%, rgba(20,17,12,0.2));
  pointer-events: none;
}

.zs-h-photo-mask {
  position: absolute;
  inset: 0;
  background: var(--zs-forest);
  transform-origin: right;
  z-index: 2;
}

.zs-h-photo--back {
  width: 78%;
  aspect-ratio: 4 / 5;
  margin-left: auto;
  border-radius: 4px;
  filter: saturate(0.85);
}

.zs-h-hero.is-loaded .zs-h-photo--back .zs-h-photo-mask {
  animation: zsHRevealWipe 1000ms var(--zs-ease) 300ms forwards;
}

.zs-h-photo--front {
  width: 60%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  position: absolute;
  left: -6%;
  bottom: -13%;
  box-shadow: 0 30px 60px rgba(34, 29, 23, 0.22);
  transform: rotate(-2.5deg);
}

.zs-h-hero.is-loaded .zs-h-photo--front .zs-h-photo-mask {
  animation: zsHRevealWipe 1000ms var(--zs-ease) 560ms forwards;
}

/* technical label plate, attached to the front (foreground) photo */
.zs-h-plate {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;

  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 11px 15px;
  background: var(--zs-forest);
  color: var(--zs-ivory);
  border-left: 2px solid var(--zs-gold);

  font-family: var(--font-mono);

  opacity: 0;
  transform: translateX(-12px);
}

.zs-h-hero.is-loaded .zs-h-plate {
  animation: zsHSlideIn 700ms var(--zs-ease) 950ms forwards;
}

.zs-h-plate-top {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zs-gold);
}

.zs-h-plate-bottom { font-size: 12px; color: var(--zs-ivory); }

/* corner ticks, framing the whole layered composition */
.zs-h-tick {
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--zs-gold);
  border-style: solid;
  border-width: 0;
  opacity: 0;
  z-index: 3;
}

.zs-h-hero.is-loaded .zs-h-tick { animation: zsHFade 600ms var(--zs-ease) 1150ms forwards; }

.zs-h-tick--tl { top: -8px; right: 10%; border-top-width: 1.5px; border-right-width: 1.5px; }
.zs-h-tick--br { bottom: -20%; left: -6%; border-bottom-width: 1.5px; border-left-width: 1.5px; }

/* fold-line + registration marks connecting the two photo layers */
.zs-h-dieline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.zs-h-hero.is-loaded .zs-h-dieline { animation: zsHFade 600ms var(--zs-ease) 1250ms forwards; }

.zs-h-dieline-path {
  stroke: var(--zs-mocha-warm);
  fill: none;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
}

.zs-h-hero.is-loaded .zs-h-dieline-path--fold {
  animation: zsHDraw 1300ms var(--zs-ease) 1300ms forwards;
}

.zs-h-dieline-path--crop {
  stroke: var(--zs-gold);
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}

.zs-h-hero.is-loaded .zs-h-dieline-path--crop {
  animation: zsHDraw 500ms var(--zs-ease) 1400ms forwards;
}

.zs-h-dieline-reg {
  fill: var(--zs-cream);
  stroke: var(--zs-mocha-warm);
  stroke-width: 1.2;
}

.zs-h-dim {
  position: absolute;
  left: 4%;
  bottom: 30%;
  z-index: 3;

  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--zs-mocha-warm);
  transform: rotate(-90deg);
  transform-origin: left bottom;
  white-space: nowrap;

  opacity: 0;
}

.zs-h-hero.is-loaded .zs-h-dim { animation: zsHFade 600ms var(--zs-ease) 1450ms forwards; }

.zs-h-tag {
  position: absolute;
  top: 6%;
  right: 6%;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 12px;
  background: rgba(251, 248, 241, 0.92);
  border: 1px solid var(--zs-line);
  border-radius: 999px;
  backdrop-filter: blur(6px);

  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zs-charcoal-soft);
  white-space: nowrap;

  opacity: 0;
  transform: translateY(-10px);
}

.zs-h-hero.is-loaded .zs-h-tag { animation: zsHUp 700ms var(--zs-ease) 1150ms forwards; }

.zs-h-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--zs-gold);
  flex-shrink: 0;
}

/* ---------------------------- specs strip ---------------------------- */

.zs-h-specs {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: 26px 0;
  padding-left: 46px;
  border-top: 1px solid var(--zs-line);

  opacity: 0;
  transform: translateY(16px);
}

.zs-h-hero.is-loaded .zs-h-specs { animation: zsHUp 800ms var(--zs-ease) 700ms forwards; }

.zs-h-spec {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.zs-h-spec-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--zs-gold);
}

.zs-h-spec-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--zs-charcoal-soft);
}

.zs-h-scroll {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;

  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zs-charcoal-soft);
}

.zs-h-scroll-line {
  width: 30px;
  height: 1px;
  background: var(--zs-line);
  position: relative;
  overflow: hidden;
}

.zs-h-scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--zs-gold);
  transform: translateX(-100%);
}

.zs-h-hero.is-loaded .zs-h-scroll-line::after {
  animation: zsHScrollLine 1800ms var(--zs-ease) 1600ms infinite;
}

/* ---------------------------- entrance sequencing ---------------------------- */

.zs-h-hero.is-loaded .zs-h-eyebrow-row { animation: zsHUp 760ms var(--zs-ease) 60ms forwards; }
.zs-h-hero.is-loaded .zs-h-desc { animation: zsHUp 820ms var(--zs-ease) 560ms forwards; }
.zs-h-hero.is-loaded .zs-h-actions { animation: zsHUp 820ms var(--zs-ease) 660ms forwards; }
.zs-h-hero.is-loaded .zs-h-visual { animation: zsHVisualIn 1000ms var(--zs-ease) 260ms forwards; }

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

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

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

@keyframes zsHRevealWipe {
  to { transform: scaleX(0); }
}

@keyframes zsHFade { to { opacity: 1; } }

@keyframes zsHSlideIn { to { opacity: 1; transform: translateX(0); } }

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

@keyframes zsHUnderline { to { transform: scaleX(1); } }

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

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
  .zs-h-layout { grid-template-columns: 1fr; padding-left: var(--zs-gutter); gap: 56px; }
  .zs-h-copy { max-width: 100%; }
  .zs-h-visual { max-width: 460px; margin: 0 auto; }
  .zs-h-specs { padding-left: var(--zs-gutter); }
}

@media (max-width: 900px) {
  .zs-h-title { font-size: clamp(40px, 9vw, 60px); }
  .zs-h-specs { flex-wrap: wrap; row-gap: 14px; }
  .zs-h-scroll { display: none; }
}

@media (max-width: 640px) {
  .zs-h-hero { padding-top: calc(var(--zs-nav-clearance) + 14px); }
  .zs-h-layout { padding-bottom: 40px; }
  .zs-h-desc { font-size: 15.5px; }
  .zs-h-actions { gap: 18px 26px; }
  .zs-h-visual { max-width: 320px; }
  .zs-h-tag { display: none; }
  .zs-h-dim { display: none; }
  .zs-h-plate { padding: 9px 12px; left: 10px; bottom: 10px; }
  .zs-h-specs { gap: 20px; padding: 20px 20px; }
  .zs-h-spec-label { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .zs-h-hero * { animation: none !important; transition: none !important; }
  .zs-h-hero [class*="zs-h-"] { opacity: 1 !important; transform: none !important; }
  .zs-h-line-mask { transform: none !important; }
  .zs-h-photo-mask { display: none; }
  .zs-h-photo img { transform: none !important; }
  .zs-h-photo--front { transform: none; }
  .zs-h-scroll-line::after { display: none; }
}


/* ==========================================================================
   Z&S HOME — INTRODUCTION / ABOUT SECTION
   Namespace: zs-in-*
   ========================================================================== */

.zs-in-intro {
  position: relative;
  padding: 128px 0 32px;
  background: var(--zs-cream);
}

.zs-in-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}

.zs-in-copy { max-width: 620px; }

.zs-in-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.zs-in-eyebrow { margin-bottom: 0; }

.zs-in-index {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--zs-mocha-warm);
}

.zs-in-statement {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.28;
  color: var(--zs-charcoal);
  margin-bottom: 30px;
}

.zs-in-statement strong {
  font-weight: 700;
  color: var(--zs-forest);
}

.zs-in-body {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--zs-charcoal-soft);
  margin-bottom: 34px;
  max-width: 520px;
}

.zs-in-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--zs-forest);
  border-bottom: 1px solid var(--zs-line-soft);
  padding-bottom: 3px;
  transition: border-color 220ms var(--zs-ease), gap 220ms var(--zs-ease), color 220ms var(--zs-ease);
}

.zs-in-link:hover {
  border-color: var(--zs-mocha-warm);
  color: var(--zs-mocha-warm);
  gap: 13px;
}

/* ---------------------------- visual ---------------------------- */

.zs-in-visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 420px;
}

.zs-in-block {
  position: absolute;
  top: 22px;
  right: -22px;
  bottom: -22px;
  left: 22px;
  z-index: 0;
  border: 1px solid var(--zs-gold-line);
  border-radius: 4px;
}

.zs-in-frame {
  position: relative;
  z-index: 1;
  border: 1px solid var(--zs-line);
  padding: 14px;
  background: var(--zs-sand);
  border-radius: 4px;
}

.zs-in-tick {
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--zs-gold);
  border-style: solid;
  border-width: 0;
  z-index: 2;
}

.zs-in-tick--tl { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; }
.zs-in-tick--br { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.zs-in-photo {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 1 / 1.08;
}

.zs-in-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94);
  transition: transform 900ms var(--zs-ease);
}

.zs-in-visual:hover .zs-in-photo img { transform: scale(1.035); }

.zs-in-photo::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  background: linear-gradient(160deg, rgba(31,51,40,0.10), transparent 55%);
}

.zs-in-plate {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 3px;

  padding: 9px 13px;
  background: var(--zs-forest);
  color: var(--zs-ivory);
  border-left: 2px solid var(--zs-gold);

  font-family: var(--font-mono);
}

.zs-in-plate-top {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zs-gold);
}

.zs-in-plate-bottom { font-size: 11.5px; color: var(--zs-ivory); }

.zs-in-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding: 0 2px;

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm-soft);
}

.zs-in-line {
  position: absolute;
  background: var(--zs-gold-line);
}

.zs-in-line--v {
  width: 1px;
  top: -28px;
  bottom: -28px;
  left: -28px;
}

.zs-in-line--h {
  height: 1px;
  left: -28px;
  right: 70%;
  bottom: -28px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
  .zs-in-inner {
    grid-template-columns: 1fr;
  }

  .zs-in-visual { max-width: 380px; justify-self: start; order: -1; }
  .zs-in-copy { max-width: 100%; }
  .zs-in-intro { padding: 92px 0 28px; }
}

@media (max-width: 560px) {
  .zs-in-statement { font-size: 25px; }
  .zs-in-line--v, .zs-in-line--h, .zs-in-block { display: none; }
  .zs-in-plate { padding: 7px 10px; left: 8px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .zs-in-photo img { transition: none; }
  .zs-in-visual:hover .zs-in-photo img { transform: none; }
}

/* ==========================================================================
   Z&S HOME — PACKAGING SOLUTIONS SECTION
   Namespace: zs-sol-*
   ========================================================================== */

.zs-sol-solutions {
  position: relative;
  padding: 128px 0;
  background: var(--zs-sand);
  border-top: 1px solid var(--zs-line);
  border-bottom: 1px solid var(--zs-line);
}

.zs-sol-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
}

.zs-sol-heading {
  font-size: clamp(32px, 4vw, 52px);
  max-width: 480px;
}

.zs-sol-intro {
  max-width: 360px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--zs-charcoal-soft);
  padding-bottom: 6px;
}

.zs-sol-body {
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

/* ---------------------------- list ---------------------------- */

.zs-sol-list {
  border-top: 1px solid var(--zs-line);
}

.zs-sol-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 22px;
  gap: 20px;
  align-items: center;

  padding: 26px 4px;
  border-bottom: 1px solid var(--zs-line);

  cursor: pointer;
  background: none;
  border-left: none; border-right: none; border-top: none;
  width: 100%;
  text-align: left;

  transition: padding-left 320ms var(--zs-ease);
}

.zs-sol-item:hover,
.zs-sol-item:focus-visible,
.zs-sol-item.is-active {
  padding-left: 16px;
}

.zs-sol-num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--zs-mocha-warm);
  transition: color 260ms var(--zs-ease);
}

.zs-sol-item.is-active .zs-sol-num,
.zs-sol-item:hover .zs-sol-num { color: var(--zs-charcoal); }

.zs-sol-text { display: block; }

.zs-sol-text-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--zs-charcoal);
  margin-bottom: 6px;
}

.zs-sol-text-desc {
  display: block;
  font-size: 14px;
  line-height: 1.65;
  color: var(--zs-charcoal-soft);
  max-width: 360px;

  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 380ms var(--zs-ease), opacity 300ms var(--zs-ease);
}

.zs-sol-item.is-active .zs-sol-text-desc {
  max-height: 60px;
  opacity: 1;
  margin-top: 2px;
}

.zs-sol-arrow {
  color: var(--zs-mocha-warm);
  transition: transform 300ms var(--zs-ease), color 260ms var(--zs-ease);
}

.zs-sol-item:hover .zs-sol-arrow,
.zs-sol-item.is-active .zs-sol-arrow {
  transform: translateX(4px) rotate(-45deg);
  color: var(--zs-gold);
}

/* ---------------------------- visual stage ---------------------------- */

.zs-sol-stage {
  position: sticky;
  top: calc(var(--zs-nav-clearance) - 30px);

  border: 1px solid var(--zs-line);
  border-radius: 4px;
  padding: 12px;
  background: var(--zs-cream);
}

.zs-sol-tick {
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--zs-gold);
  border-style: solid;
  border-width: 0;
  z-index: 2;
}

.zs-sol-tick--tl { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; }
.zs-sol-tick--br { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.zs-sol-stage-photo {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4 / 3.1;
}

.zs-sol-stage-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transform: scale(1.06);
  transition: opacity 560ms var(--zs-ease), transform 900ms var(--zs-ease);
}

.zs-sol-stage-photo img.is-active {
  opacity: 1;
  transform: scale(1);
  position: relative;
}

.zs-sol-stage-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 2px;

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm-soft);
}

.zs-sol-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 0 2px;
}

.zs-sol-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--zs-line);
  transition: background 260ms var(--zs-ease), width 260ms var(--zs-ease), border-radius 260ms var(--zs-ease);
}

.zs-sol-dot.is-active {
  width: 20px;
  border-radius: 3px;
  background: var(--zs-gold);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
  .zs-sol-body { grid-template-columns: 1fr; }
  .zs-sol-stage { position: static; order: -1; margin-bottom: 20px; }
  .zs-sol-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .zs-sol-solutions { padding: 92px 0; }
}

@media (max-width: 560px) {
  .zs-sol-item { grid-template-columns: 40px 1fr 18px; padding: 20px 2px; }
  .zs-sol-text-title { font-size: 20px; }
}

/* ==========================================================================
   Z&S HOME — INDUSTRIES SECTION
   Namespace: zs-ind-*
   ========================================================================== */

.zs-ind-industries {
  position: relative;
  padding: 132px 0 108px;
  background: var(--zs-cream);
}

.zs-ind-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 52px;
}

.zs-ind-heading {
  font-size: clamp(30px, 3.6vw, 46px);
  max-width: 560px;
}

.zs-ind-note {
  max-width: 300px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--zs-charcoal-soft);
  padding-bottom: 4px;
}

.zs-ind-media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--zs-line);
}

.zs-ind-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
}

.zs-ind-media-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 17, 12, 0.72) 0%, rgba(20, 17, 12, 0.18) 42%, transparent 68%);
}

.zs-ind-media-tag {
  position: absolute;
  left: 26px;
  bottom: 24px;

  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zs-ivory);
}

.zs-ind-media-tag span { color: var(--zs-gold); }

.zs-ind-tick {
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--zs-gold);
  border-style: solid;
  border-width: 0;
  z-index: 2;
}

.zs-ind-tick--tl { top: 12px; left: 12px; border-top-width: 1.5px; border-left-width: 1.5px; }
.zs-ind-tick--br { bottom: 12px; right: 12px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.zs-ind-media-count {
  position: absolute;
  top: 20px;
  right: 26px;
  z-index: 1;

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(244, 240, 231, 0.72);
}

.zs-ind-media-count span { color: var(--zs-ivory); }

/* ---------------------------- overlapping tag row ---------------------------- */

.zs-ind-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin: 22px 18px 0;
  padding: 0;
}

.zs-ind-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid var(--zs-line);
  background: var(--zs-cream);
  box-shadow: 0 10px 26px rgba(34, 29, 23, 0.08);

  font-size: 14px;
  font-weight: 600;
  color: var(--zs-charcoal);

  transition: border-color 240ms var(--zs-ease), background 240ms var(--zs-ease), transform 240ms var(--zs-ease);
}

.zs-ind-tag:hover {
  border-color: var(--zs-gold-line);
  background: var(--zs-sand);
  transform: translateY(-3px);
}

.zs-ind-tag.is-active {
  background: var(--zs-forest);
  border-color: var(--zs-forest);
  color: var(--zs-ivory);
  transform: translateY(-3px);
}

.zs-ind-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--zs-mocha-warm);
  flex-shrink: 0;
  transition: background 240ms var(--zs-ease);
}

.zs-ind-tag.is-active .zs-ind-tag-dot { background: var(--zs-gold); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
  .zs-ind-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .zs-ind-media { aspect-ratio: 4 / 3.2; }
  .zs-ind-tags { margin: 18px 8px 0; gap: 10px; }
  .zs-ind-tag { padding: 11px 18px; font-size: 13px; }
  .zs-ind-industries { padding: 92px 0 84px; }
}

/* ==========================================================================
   Z&S HOME — WHY Z&S SECTION (dark interlude)
   Namespace: zs-why-*
   ========================================================================== */

.zs-why-section {
  position: relative;
  overflow: hidden;
  padding: 132px 0;
  background: var(--zs-forest);
  color: var(--zs-ivory);
}

.zs-why-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  mix-blend-mode: luminosity;
}

.zs-why-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--zs-forest) 8%, transparent 55%, var(--zs-forest) 100%);
}

.zs-why-inner {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.zs-why-copy { max-width: 480px; }

.zs-why-eyebrow { color: var(--zs-gold); margin-bottom: 24px; }
.zs-why-eyebrow::before { background: var(--zs-gold); }

.zs-why-heading {
  font-size: clamp(30px, 3.6vw, 46px);
  color: var(--zs-ivory);
  margin-bottom: 24px;
}

.zs-why-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--zs-text-muted);
}

/* ---------------------------- list ---------------------------- */

.zs-why-list {
  border-top: 1px solid rgba(244, 240, 231, 0.14);
  transform: scaleX(0);
  transform-origin: left;
}

.zs-why-list.is-in { transform: scaleX(1); transition: transform 900ms var(--zs-ease); }

.zs-why-item {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;

  padding: 26px 4px;
  border-bottom: 1px solid rgba(244, 240, 231, 0.14);

  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms var(--zs-ease), transform 560ms var(--zs-ease);
}

.zs-why-list.is-in .zs-why-item { opacity: 1; transform: translateY(0); }

.zs-why-list.is-in .zs-why-item:nth-child(1) { transition-delay: 80ms; }
.zs-why-list.is-in .zs-why-item:nth-child(2) { transition-delay: 180ms; }
.zs-why-list.is-in .zs-why-item:nth-child(3) { transition-delay: 280ms; }
.zs-why-list.is-in .zs-why-item:nth-child(4) { transition-delay: 380ms; }
.zs-why-list.is-in .zs-why-item:nth-child(5) { transition-delay: 480ms; }

.zs-why-item-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--zs-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 420ms var(--zs-ease);
}

.zs-why-item:hover .zs-why-item-bar { transform: scaleY(1); }

.zs-why-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: var(--zs-gold);
  opacity: 0.5;
  padding-top: 2px;
  transition: opacity 320ms var(--zs-ease), color 320ms var(--zs-ease);
}

.zs-why-item:hover .zs-why-num { opacity: 1; color: var(--zs-gold-hover); }

.zs-why-item-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--zs-ivory);
  margin-bottom: 6px;

  transition: transform 320ms var(--zs-ease), color 260ms var(--zs-ease);
}

.zs-why-item:hover .zs-why-item-title {
  transform: translateX(6px);
  color: var(--zs-gold-hover);
}

.zs-why-item-desc {
  display: block;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--zs-text-muted);
  max-width: 460px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .zs-why-inner { grid-template-columns: 1fr; }
  .zs-why-copy { max-width: 100%; }
  .zs-why-section { padding: 92px 0; }
}

@media (max-width: 560px) {
  .zs-why-item { grid-template-columns: 44px 1fr; gap: 14px; padding: 20px 2px; }
  .zs-why-num { font-size: 24px; }
  .zs-why-item-title { font-size: 19px; }
}

/* ==========================================================================
   Z&S HOME — PROCESS SECTION ("From Idea to Packaging")
   Namespace: zs-proc-*
   ========================================================================== */

.zs-proc-process {
  position: relative;
  padding: 128px 0 140px;
  background: var(--zs-cream);
}

.zs-proc-head {
  max-width: 620px;
  margin: 0 auto 84px;
  text-align: center;
}

.zs-proc-eyebrow {
  justify-content: center;
  margin-bottom: 22px;
}

.zs-proc-heading {
  font-size: clamp(30px, 3.6vw, 46px);
}

.zs-proc-track { position: relative; }

.zs-proc-line {
  position: absolute;
  left: 0; right: 0;
  top: 9px;
  height: 1px;
  background: var(--zs-line);
}

.zs-proc-line-fill {
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  width: 0%;
  background: var(--zs-gold);
  transition: width 1400ms var(--zs-ease);
}

.zs-proc-line-fill::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--zs-gold);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 200ms var(--zs-ease) 1200ms;
}

.zs-proc-track.is-in .zs-proc-line-fill { width: 100%; }
.zs-proc-track.is-in .zs-proc-line-fill::after { opacity: 1; }

.zs-proc-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.zs-proc-step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms var(--zs-ease), transform 620ms var(--zs-ease);
}

/* editorial zig-zag rhythm on wide viewports */
.zs-proc-step:nth-child(even) { margin-top: 34px; }

.zs-proc-track.is-in .zs-proc-step { opacity: 1; transform: translateY(0); }

.zs-proc-track.is-in .zs-proc-step:nth-child(1) { transition-delay: 120ms; }
.zs-proc-track.is-in .zs-proc-step:nth-child(2) { transition-delay: 280ms; }
.zs-proc-track.is-in .zs-proc-step:nth-child(3) { transition-delay: 440ms; }
.zs-proc-track.is-in .zs-proc-step:nth-child(4) { transition-delay: 600ms; }
.zs-proc-track.is-in .zs-proc-step:nth-child(5) { transition-delay: 760ms; }

.zs-proc-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--zs-cream);
  border: 1.5px solid var(--zs-mocha-warm);
  margin-bottom: 26px;
  position: relative;
  transition: border-color 320ms var(--zs-ease), background 320ms var(--zs-ease);
}

.zs-proc-dot i {
  width: 18px;
  height: 18px;
  color: var(--zs-mocha-warm);
  transition: color 320ms var(--zs-ease);
}

.zs-proc-track.is-in .zs-proc-dot {
  background: var(--zs-forest);
  border-color: var(--zs-gold);
}

.zs-proc-track.is-in .zs-proc-dot i { color: var(--zs-gold); }

.zs-proc-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--zs-mocha-warm);
  margin-bottom: 10px;
}

.zs-proc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--zs-charcoal);
  margin-bottom: 8px;
}

.zs-proc-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--zs-charcoal-soft);
  max-width: 220px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .zs-proc-steps { grid-template-columns: 1fr; gap: 34px; }
  .zs-proc-step:nth-child(even) { margin-top: 0; }
  .zs-proc-line { display: none; }
  .zs-proc-step { padding-left: 20px; border-left: 1px solid var(--zs-line); }
  .zs-proc-dot { width: 36px; height: 36px; }
  .zs-proc-dot i { width: 15px; height: 15px; }
  .zs-proc-desc { max-width: 100%; }
  .zs-proc-process { padding: 92px 0 100px; }
  .zs-proc-head { margin-bottom: 54px; text-align: left; }
  .zs-proc-eyebrow { justify-content: flex-start; }
}

/* ==========================================================================
   Z&S HOME — INDUSTRIAL SHOWCASE SECTION
   Namespace: zs-show-*
   ========================================================================== */

.zs-show-showcase {
  position: relative;
  overflow: hidden;
  height: min(86vh, 780px);
  min-height: 460px;

  display: flex;
  align-items: flex-end;
}

.zs-show-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.zs-show-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1600ms var(--zs-ease);
  filter: saturate(0.9);
}

.zs-show-showcase.is-in .zs-show-media img { transform: scale(1); }

.zs-show-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 22, 17, 0.86) 0%, rgba(15, 22, 17, 0.42) 46%, rgba(15, 22, 17, 0.18) 100%);
}

/* ---------------------------- technical framing motif ---------------------------- */

.zs-show-frame {
  position: absolute;
  z-index: 1;
  inset: 20px;
  border: 1px solid rgba(244, 240, 231, 0.22);
  pointer-events: none;
}

.zs-show-corner {
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.zs-show-corner--tl {
  top: 12px; left: 12px;
  border-top: 1.5px solid var(--zs-gold);
  border-left: 1.5px solid var(--zs-gold);
}

.zs-show-corner--br {
  bottom: 12px; right: 12px;
  border-bottom: 1.5px solid var(--zs-gold);
  border-right: 1.5px solid var(--zs-gold);
}

.zs-show-coord {
  position: absolute;
  z-index: 1;
  top: 30px;
  right: 42px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(244, 240, 231, 0.55);
}

.zs-show-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: 76px;
}

.zs-show-eyebrow {
  color: var(--zs-gold);
  margin-bottom: 22px;
}

.zs-show-eyebrow::before { background: var(--zs-gold); }

.zs-show-statement {
  font-size: clamp(32px, 5vw, 62px);
  color: var(--zs-ivory);
  max-width: 780px;
  margin-bottom: 34px;
}

.zs-show-row {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}


.zs-show-showcase .zs-btn--text {
  color: var(--zs-ivory);
}

.zs-show-showcase .zs-btn--text::after { background: rgba(244, 240, 231, 0.5); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 640px) {
  .zs-show-showcase { height: 74vh; min-height: 420px; }
  .zs-show-inner { padding-bottom: 52px; }
  .zs-show-row { gap: 20px; }
  .zs-show-frame { inset: 12px; }
  .zs-show-coord { display: none; }
}

/* ==========================================================================
   Z&S HOME — FINAL CTA SECTION
   Namespace: zs-cta-*
   ========================================================================== */

.zs-cta-section {
  position: relative;
  overflow: hidden;
  padding: 128px 0 140px;
  background: var(--zs-forest);
  color: var(--zs-ivory);
}

.zs-cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 420px at 12% 15%, rgba(201, 166, 107, 0.14), transparent 65%);
  pointer-events: none;
}

.zs-cta-coord {
  position: absolute;
  z-index: 1;
  top: 32px;
  right: var(--zs-gutter);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(244, 240, 231, 0.4);
}

.zs-cta-corner {
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.zs-cta-corner--tl {
  top: 20px; left: 20px;
  border-top: 1.5px solid rgba(201, 166, 107, 0.5);
  border-left: 1.5px solid rgba(201, 166, 107, 0.5);
}

.zs-cta-corner--br {
  bottom: 20px; right: 20px;
  border-bottom: 1.5px solid rgba(201, 166, 107, 0.5);
  border-right: 1.5px solid rgba(201, 166, 107, 0.5);
}

.zs-cta-inner {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}

.zs-cta-copy { max-width: 620px; }

.zs-cta-eyebrow {
  color: var(--zs-gold);
  margin-bottom: 28px;
}

.zs-cta-eyebrow::before { background: var(--zs-gold); }

.zs-cta-heading {
  font-size: clamp(34px, 4.8vw, 62px);
  color: var(--zs-ivory);
  margin-bottom: 22px;
}

.zs-cta-body {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--zs-text-muted);
  max-width: 480px;
  margin-bottom: 44px;
}

.zs-cta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.zs-cta-section .zs-btn--text { color: var(--zs-ivory); }
.zs-cta-section .zs-btn--text::after { background: rgba(244, 240, 231, 0.5); }

/* ---------------------------- dieline graphic ---------------------------- */

.zs-cta-dieline {
  width: 100%;
  max-width: 300px;
  height: auto;
  justify-self: center;
  overflow: visible;
}

.zs-cta-dieline rect,
.zs-cta-dieline path {
  stroke: rgba(201, 166, 107, 0.55);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1100ms var(--zs-ease);
}

.zs-cta-dieline.is-in rect:nth-of-type(1) { transition-delay: 100ms; }
.zs-cta-dieline.is-in rect:nth-of-type(2) { transition-delay: 220ms; }
.zs-cta-dieline.is-in rect:nth-of-type(3) { transition-delay: 340ms; }
.zs-cta-dieline.is-in rect:nth-of-type(4) { transition-delay: 460ms; }
.zs-cta-dieline.is-in rect:nth-of-type(5) { transition-delay: 580ms; }
.zs-cta-dieline.is-in path { transition-delay: 700ms; }

.zs-cta-dieline.is-in rect,
.zs-cta-dieline.is-in path {
  stroke-dashoffset: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
  .zs-cta-section { padding: 100px 0 112px; }
  .zs-cta-inner { grid-template-columns: 1fr; text-align: left; }
  .zs-cta-copy { max-width: 100%; }
  .zs-cta-dieline { max-width: 200px; justify-self: start; order: -1; margin-bottom: 8px; opacity: 0.7; }
  .zs-cta-coord { display: none; }
}

@media (max-width: 640px) {
  .zs-cta-section { padding: 92px 0 104px; }
  .zs-cta-actions { gap: 20px; }
  .zs-cta-corner { width: 16px; height: 16px; }
}

/* ==========================================================================
   Z&S HOME — WHAT WE MAKE SECTION
   Namespace: zs-make-*  (isolated: no rules outside .zs-make-section)
   ========================================================================== */

.zs-make-section {
  position: relative;
  padding: 120px 0 128px;
  background: var(--zs-cream);
}

.zs-make-head {
  max-width: 620px;
  margin: 0 auto 56px;
  text-align: center;
}

.zs-make-eyebrow { justify-content: center; margin-bottom: 20px; }

.zs-make-heading { font-size: clamp(30px, 3.8vw, 48px); margin-bottom: 16px; }

.zs-make-intro {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--zs-charcoal-soft);
}

.zs-make-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 130px;
  gap: 14px;
}

.zs-make-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--zs-line);
  transition: border-color 320ms var(--zs-ease);
}

@media (hover: hover) {
  .zs-make-card:hover { border-color: var(--zs-gold-line); }
}

.zs-make-card-num {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;

  padding: 5px 10px;
  background: rgba(20, 17, 12, 0.4);
  backdrop-filter: blur(4px);
  border-radius: 999px;

  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--zs-ivory);

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 300ms var(--zs-ease), transform 300ms var(--zs-ease);
}

@media (hover: hover) {
  .zs-make-card:hover .zs-make-card-num { opacity: 1; transform: translateY(0); }
}

.zs-make-card--a .zs-make-card-num {
  opacity: 1;
  transform: none;
  top: 18px;
  left: 20px;
  font-size: 11px;
  padding: 6px 12px;
}

/* asymmetric editorial placement — explicit start/end lines.
   (Previously used only `span N`, which let the browser's auto-placement
   algorithm hunt for non-overlapping slots — card c couldn't fit under
   a+b, got pushed down, which cascaded into d/e/f, inflating the grid's
   total height with partially-empty rows. Explicit lines remove the
   ambiguity entirely.) */
.zs-make-card--a { grid-column: 1 / 4; grid-row: 1 / 5; }
.zs-make-card--b { grid-column: 4 / 7; grid-row: 1 / 3; }
.zs-make-card--c { grid-column: 4 / 7; grid-row: 3 / 5; }
.zs-make-card--d { grid-column: 1 / 3; grid-row: 5 / 7; }
.zs-make-card--e { grid-column: 3 / 5; grid-row: 5 / 7; }
.zs-make-card--f { grid-column: 5 / 7; grid-row: 5 / 7; }

.zs-make-card-img {
  position: absolute;
  inset: 0;
}

.zs-make-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms var(--zs-ease);
}

.zs-make-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 17, 12, 0.72) 0%, rgba(20, 17, 12, 0.06) 55%, transparent 75%);
  transition: opacity 320ms var(--zs-ease);
}

.zs-make-card-label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  color: var(--zs-ivory);
  transition: transform 320ms var(--zs-ease);
}

.zs-make-card-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  padding-top: 10px;
}

.zs-make-card-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 22px;
  background: var(--zs-gold);
  transform-origin: left;
  transition: width 380ms var(--zs-ease);
}

.zs-make-card .zs-arrow {
  flex-shrink: 0;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 260ms var(--zs-ease), transform 260ms var(--zs-ease);
}

@media (hover: hover) {
  .zs-make-card:hover .zs-make-card-img img { transform: scale(1.055) translateY(-4px); }
  .zs-make-card:hover .zs-make-card-label { transform: translateY(-2px); }
  .zs-make-card:hover .zs-make-card-bar { width: 44px; }
  .zs-make-card:hover .zs-arrow { opacity: 1; transform: translate(0, 0); }
}

@media (max-width: 980px) {
  .zs-make-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .zs-make-card--a, .zs-make-card--b, .zs-make-card--c,
  .zs-make-card--d, .zs-make-card--e, .zs-make-card--f {
    grid-column: span 1; grid-row: span 1;
  }
  .zs-make-section { padding: 88px 0 96px; }
}

@media (max-width: 560px) {
  .zs-make-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .zs-make-card-num { opacity: 1; transform: none; top: 12px; left: 12px; font-size: 10px; padding: 4px 9px; }
}

/* ==========================================================================
   Z&S HOME — INDUSTRIES EXPLORER (additive states)
   Namespace: zs-ind-*  (extends existing rules above)
   ========================================================================== */

.zs-ind-media img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 420ms var(--zs-ease), transform 500ms var(--zs-ease);
}

.zs-ind-media img.is-active {
  position: relative;
  opacity: 1;
  transform: scale(1);
}

.zs-ind-tags li { display: contents; }

.zs-ind-tag {
  border: 1px solid var(--zs-line);
  background: var(--zs-cream);
  cursor: pointer;
  font: inherit;
}

.zs-ind-tag.is-active {
  border-color: var(--zs-gold-line);
  background: var(--zs-forest);
  color: var(--zs-ivory);
}

.zs-ind-tag.is-active .zs-ind-tag-dot { background: var(--zs-gold); }

.zs-ind-desc {
  max-width: 480px;
  margin: 20px 18px 26px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--zs-charcoal-soft);
}

.zs-ind-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 18px 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--zs-charcoal);
}

.zs-ind-link .zs-arrow { transition: transform 260ms var(--zs-ease); }
.zs-ind-link:hover .zs-arrow { transform: translateX(4px); }

@media (max-width: 860px) {
  .zs-ind-desc, .zs-ind-link { margin-left: 8px; margin-right: 8px; }
}

/* ==========================================================================
   Z&S HOME — PACKAGING STRUCTURE SECTION
   Namespace: zs-struct-*  (isolated: no rules outside .zs-struct-section)
   ========================================================================== */

.zs-struct-section {
  position: relative;
  padding: 108px 0 96px;
  background: var(--zs-sand);
  border-top: 1px solid var(--zs-line);
  border-bottom: 1px solid var(--zs-line);
  overflow: hidden;
}

.zs-struct-head-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 52px;
}

.zs-struct-head { max-width: 560px; }

.zs-struct-eyebrow { margin-bottom: 18px; }

.zs-struct-heading { font-size: clamp(28px, 3.6vw, 44px); }

.zs-struct-hint {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm-soft);
  padding-bottom: 6px;
}

/* ---------------------------- staggered filmstrip ---------------------------- */

.zs-struct-strip {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--zs-gutter);
  padding: 6px var(--zs-gutter) 28px;
  margin: 0 calc(var(--zs-gutter) * -1);

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.zs-struct-strip::-webkit-scrollbar { display: none; }

.zs-struct-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(168px, 15.5vw, 208px);
}

.zs-struct-item--lead {
  width: clamp(268px, 24vw, 336px);
  margin-bottom: 34px;
}

.zs-struct-item-img {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--zs-line);
  background: var(--zs-cream);
  margin-bottom: 16px;
}

.zs-struct-item--lead .zs-struct-item-img { aspect-ratio: 1 / 1; }

.zs-struct-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--zs-ease);
}

/* subtle registration-mark corners — dieline motif */
.zs-struct-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 320ms var(--zs-ease), transform 320ms var(--zs-ease);
  pointer-events: none;
}

.zs-struct-corner--tl {
  top: 8px; left: 8px;
  border-top: 1.5px solid var(--zs-gold-hover);
  border-left: 1.5px solid var(--zs-gold-hover);
  transform: translate(4px, 4px);
}

.zs-struct-corner--br {
  bottom: 8px; right: 8px;
  border-bottom: 1.5px solid var(--zs-gold-hover);
  border-right: 1.5px solid var(--zs-gold-hover);
  transform: translate(-4px, -4px);
}

@media (hover: hover) {
  .zs-struct-item:hover .zs-struct-item-img img { transform: scale(1.06); }
  .zs-struct-item:hover .zs-struct-corner { opacity: 1; transform: translate(0, 0); }
}

.zs-struct-item-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.zs-struct-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--zs-mocha-warm);
  flex-shrink: 0;
}

.zs-struct-item-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--zs-charcoal);
}

.zs-struct-item--lead .zs-struct-item-title { font-size: 19px; }

.zs-struct-item-tag {
  display: block;
  width: 100%;
  font-size: 12.5px;
  color: var(--zs-charcoal-soft);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms var(--zs-ease), opacity 260ms var(--zs-ease), margin-top 320ms var(--zs-ease);
}

@media (hover: hover) {
  .zs-struct-item:hover .zs-struct-item-tag {
    max-height: 40px;
    opacity: 1;
    margin-top: 2px;
  }
}

@media (hover: none) {
  .zs-struct-item-tag { max-height: 40px; opacity: 1; margin-top: 2px; }
}

@media (max-width: 900px) {
  .zs-struct-section { padding: 84px 0 76px; }
  .zs-struct-head-wrap { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 38px; }
  .zs-struct-item { width: 44vw; }
  .zs-struct-item--lead { width: 62vw; margin-bottom: 26px; }
}

@media (max-width: 480px) {
  .zs-struct-item { width: 58vw; }
  .zs-struct-item--lead { width: 76vw; }
}

/* ==========================================================================
   Z&S HOME — MANUFACTURING SHOWCASE — CAPABILITY LABELS
   Namespace: zs-show-cap*  (extends existing .zs-show-showcase rules)
   ========================================================================== */

.zs-show-body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--zs-text-muted);
  max-width: 540px;
  margin-bottom: 34px;
}

.zs-show-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(244, 240, 231, 0.22);
}

.zs-show-cap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 26px;
  color: var(--zs-ivory);
}

.zs-show-cap-num {
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(244, 240, 231, 0.4);
}

.zs-show-cap i {
  width: 18px;
  height: 18px;
  color: var(--zs-gold);
  flex-shrink: 0;
}

.zs-show-cap span {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.zs-show-cap small {
  font-size: 12px;
  color: var(--zs-text-muted);
}

@media (max-width: 640px) {
  .zs-show-caps { gap: 18px 22px; margin-bottom: 30px; padding-top: 20px; }
  .zs-show-cap small { display: none; }
}

/* ==========================================================================
   Z&S HOME — GALLERY PREVIEW SECTION
   Namespace: zs-glp-*  (isolated: no rules outside .zs-glp-section)
   ========================================================================== */

.zs-glp-section {
  position: relative;
  padding: 120px 0 128px;
  background: var(--zs-cream);
}

.zs-glp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 44px;
}

.zs-glp-eyebrow { margin-bottom: 18px; }

.zs-glp-heading { font-size: clamp(28px, 3.6vw, 44px); }

.zs-glp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--zs-charcoal);
  padding-bottom: 4px;
}

.zs-glp-link .zs-arrow { transition: transform 260ms var(--zs-ease); }
.zs-glp-link:hover .zs-arrow { transform: translateX(4px); }

.zs-glp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 110px;
  gap: 12px;
}

.zs-glp-item--a { grid-column: span 3; grid-row: span 3; }
.zs-glp-item--b { grid-column: span 3; grid-row: span 2; }
.zs-glp-item--c { grid-column: span 2; grid-row: span 2; }
.zs-glp-item--d { grid-column: span 2; grid-row: span 3; }
.zs-glp-item--e { grid-column: span 2; grid-row: span 3; }
.zs-glp-item--f { grid-column: span 3; grid-row: span 2; }
.zs-glp-item--g { grid-column: span 3; grid-row: span 2; }

.zs-glp-item a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.zs-glp-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 480ms var(--zs-ease);
}

.zs-glp-caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--zs-ivory);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms var(--zs-ease), transform 260ms var(--zs-ease);
}

.zs-glp-item a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 17, 12, 0.62) 0%, transparent 46%);
  opacity: 0;
  transition: opacity 260ms var(--zs-ease);
}

@media (hover: hover) {
  .zs-glp-item:hover img { transform: scale(1.06); }
  .zs-glp-item:hover a::after { opacity: 1; }
  .zs-glp-item:hover .zs-glp-caption { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .zs-glp-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .zs-glp-item--a, .zs-glp-item--b, .zs-glp-item--c, .zs-glp-item--d,
  .zs-glp-item--e, .zs-glp-item--f, .zs-glp-item--g { grid-column: span 1; grid-row: span 1; }
  .zs-glp-section { padding: 88px 0 96px; }
}

@media (max-width: 560px) {
  .zs-glp-grid { grid-template-columns: 1fr; }
  .zs-glp-caption { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .zs-make-card-img img, .zs-struct-item-img img, .zs-glp-item img,
  .zs-ind-media img { transition: none !important; }

  .zs-struct-corner, .zs-struct-item-tag,
  .zs-why-list, .zs-why-item, .zs-why-num,
  .zs-proc-dot, .zs-proc-dot i, .zs-proc-line, .zs-proc-line-fill, .zs-proc-line-fill::after,
  .zs-show-media img {
    transition: none !important;
  }

  .zs-show-media img { transform: scale(1) !important; }

  .zs-why-list { transform: none !important; }
  .zs-why-item { opacity: 1 !important; transform: none !important; }
  .zs-struct-item-tag { max-height: none !important; opacity: 1 !important; }

  .zs-cta-dieline rect, .zs-cta-dieline path {
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ==========================================================================
   Z&S ABOUT PAGE — "PACKAGING EXPERIENCE" REBUILD
   ========================================================================== */

.zs-ab-page { overflow-x: clip; background: var(--zs-cream); }

/* ==========================================================================
   ABOUT — 01 MANIFESTO HERO
   ========================================================================== */

.zs-ab-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--zs-nav-clearance) + 30px) 0 90px;
  background: var(--zs-bg);
  color: var(--zs-ivory);
}

.zs-ab-hero-image { position: absolute; inset: 0; z-index: 0; }

.zs-ab-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  transform: scale(1.06);
  transition: opacity 1400ms var(--zs-ease), transform 1400ms var(--zs-ease);
}

.zs-ab-hero.is-loaded .zs-ab-hero-image img { opacity: 0.34; }

.zs-ab-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 35, 29, 0.85) 0%, rgba(20, 35, 29, 0.55) 46%, rgba(15, 25, 20, 0.9) 100%);
}

.zs-ab-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(244, 240, 231, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 240, 231, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
}

.zs-ab-hero-marks {
  position: absolute;
  inset: 22px;
  z-index: 2;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  pointer-events: none;
  stroke: rgba(244, 240, 231, 0.4);
}

.zs-ab-hero-inner { position: relative; z-index: 3; width: 100%; }

.zs-ab-hero-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(20px, 4vw, 40px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 760ms var(--zs-ease) 120ms, transform 760ms var(--zs-ease) 120ms;
}

.zs-ab-hero.is-loaded .zs-ab-hero-top { opacity: 1; transform: translateY(0); }

.zs-ab-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zs-gold);
}

.zs-ab-hero-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--zs-text-muted);
  padding-left: 18px;
  border-left: 1px solid rgba(244, 240, 231, 0.24);
}

.zs-ab-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.92;
  font-size: clamp(46px, 9.5vw, 132px);
  color: var(--zs-ivory);
  margin: 0 0 clamp(30px, 5vw, 56px);
  text-transform: uppercase;
}

.zs-ab-hw {
  display: block;
  width: max-content;
  max-width: 96%;
  margin-left: var(--ml, 0%);
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms var(--zs-ease), transform 700ms var(--zs-ease);
}

.zs-ab-hero.is-loaded .zs-ab-hw { opacity: 1; transform: translateY(0); }
.zs-ab-hero.is-loaded .zs-ab-hw:nth-of-type(1) { transition-delay: 60ms; }
.zs-ab-hero.is-loaded .zs-ab-hw:nth-of-type(2) { transition-delay: 140ms; }
.zs-ab-hero.is-loaded .zs-ab-hw:nth-of-type(3) { transition-delay: 220ms; }
.zs-ab-hero.is-loaded .zs-ab-hw:nth-of-type(4) { transition-delay: 300ms; }
.zs-ab-hero.is-loaded .zs-ab-hw:nth-of-type(5) { transition-delay: 380ms; color: var(--zs-gold); }

.zs-ab-hero-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  max-width: 980px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms var(--zs-ease) 560ms, transform 800ms var(--zs-ease) 560ms;
}

.zs-ab-hero.is-loaded .zs-ab-hero-bottom { opacity: 1; transform: translateY(0); }

.zs-ab-hero-desc {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--zs-text-muted);
  max-width: 440px;
  margin: 0;
}

.zs-ab-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  padding-top: 4px;
}

.zs-ab-hero-meta-item { display: flex; flex-direction: column; gap: 8px; }

.zs-ab-hero-meta-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zs-gold);
}

.zs-ab-hero-meta-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--zs-ivory);
}

.zs-ab-hero-scroll {
  position: absolute;
  left: var(--zs-gutter);
  bottom: 30px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: zsAbFade 700ms var(--zs-ease) 1000ms forwards;
}

.zs-ab-hero-scroll-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zs-text-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.zs-ab-hero-scroll-line {
  position: relative;
  width: 1px;
  height: 50px;
  background: rgba(244, 240, 231, 0.24);
  overflow: hidden;
}

.zs-ab-hero-scroll-dot {
  position: absolute;
  left: -1.5px;
  top: -14px;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--zs-gold);
  animation: zsAbScrollDot 2000ms var(--zs-ease) infinite;
}

@keyframes zsAbFade { to { opacity: 1; } }
@keyframes zsAbScrollDot { 0% { top: -14px; } 55% { top: 50px; } 100% { top: 50px; opacity: 0; } }

/* ==========================================================================
   ABOUT — 02 UNFOLDING STORY
   ========================================================================== */

.zs-ab-story { padding: 130px 0; background: var(--zs-cream); }

.zs-ab-story-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }

.zs-ab-story-heading { font-size: clamp(32px, 4.2vw, 52px); margin: 16px 0 22px; }
.zs-ab-story-heading em { font-style: normal; color: var(--zs-mocha-warm); }

.zs-ab-story-lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--zs-charcoal-soft);
}

.zs-ab-fold {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--zs-line);
  border: 1px solid var(--zs-line);
  perspective: 1600px;
}

.zs-ab-fold-lines { display: none; }

.zs-ab-fold-panel {
  position: relative;
  background: var(--zs-cream);
  padding: 44px 34px 40px;
  transform-origin: left center;
  transform: perspective(1600px) rotateY(-82deg);
  opacity: 0;
  transition: transform 900ms var(--zs-ease), opacity 700ms var(--zs-ease);
  transition-delay: calc(var(--d, 0) * 180ms);
  backface-visibility: hidden;
}

.zs-ab-fold-panel.is-in { transform: perspective(1600px) rotateY(0deg); opacity: 1; }

.zs-ab-fold-panel-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--zs-mocha-warm);
  margin-bottom: 18px;
}

.zs-ab-fold-panel-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zs-charcoal-soft);
  opacity: 0.6;
  margin-bottom: 10px;
}

.zs-ab-fold-panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--zs-charcoal);
  margin-bottom: 14px;
}

.zs-ab-fold-panel-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--zs-charcoal-soft);
}

.zs-ab-fold-panel--media { background: var(--zs-forest); color: var(--zs-ivory); }
.zs-ab-fold-panel--media .zs-ab-fold-panel-num,
.zs-ab-fold-panel--media .zs-ab-fold-panel-tag { color: var(--zs-gold); opacity: 0.85; }
.zs-ab-fold-panel--media .zs-ab-fold-panel-title { color: var(--zs-ivory); }
.zs-ab-fold-panel--media .zs-ab-fold-panel-desc { color: var(--zs-text-muted); }

.zs-ab-fold-panel-media {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid rgba(244, 240, 231, 0.2);
}

.zs-ab-fold-panel-media img { width: 100%; height: 130px; object-fit: cover; display: block; }

/* ==========================================================================
   ABOUT — 03 INSIDE THE MIND OF Z&S (KINETIC TYPOGRAPHY)
   ========================================================================== */

.zs-ab-mind { background: var(--zs-sand); padding: 110px 0 20px; }

.zs-ab-mind-head { text-align: center; margin-bottom: 20px; }

.zs-ab-mind-intro { font-size: clamp(26px, 3.4vw, 40px); margin-top: 16px; }

.zs-ab-mind-word {
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-top: 1px solid var(--zs-line);
}

.zs-ab-mind-word:last-child { border-bottom: 1px solid var(--zs-line); }

.zs-ab-mind-word[style*="--side:1"] { justify-content: flex-end; }

.zs-ab-mind-word-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  width: 100%;
  padding: 0 var(--zs-gutter);
  opacity: 0;
  transform: translateX(calc(var(--side, 1) * 70px));
  transition: opacity 780ms var(--zs-ease), transform 780ms var(--zs-ease);
}

.zs-ab-mind-word[style*="--side:1"] .zs-ab-mind-word-inner {
  align-items: flex-end;
  text-align: right;
}

.zs-ab-mind-word.is-in .zs-ab-mind-word-inner { opacity: 1; transform: translateX(0); }

.zs-ab-mind-word-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--zs-mocha-warm);
  letter-spacing: 0.1em;
}

.zs-ab-mind-word-text {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.9;
  font-size: clamp(52px, 11vw, 168px);
  color: var(--zs-charcoal);
  text-transform: uppercase;
  margin: 0;
  transition: color 600ms var(--zs-ease);
}

.zs-ab-mind-word.is-in .zs-ab-mind-word-text { color: var(--zs-forest); }

.zs-ab-mind-word-desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--zs-charcoal-soft);
  max-width: 460px;
  margin: 0;
}

.zs-ab-mind-word[style*="--side:1"] .zs-ab-mind-word-inner { align-self: flex-end; text-align: right; align-items: flex-end; }

/* ==========================================================================
   ABOUT — 04 PACKAGING MACHINE (PINNED HORIZONTAL)
   ========================================================================== */

.zs-ab-machine {
  position: relative;
  background: var(--zs-bg);
  color: var(--zs-ivory);
  height: 340vh;
}

.zs-ab-machine-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.zs-ab-machine-head { margin-bottom: 30px; }
.zs-ab-machine-head .zs-eyebrow { color: var(--zs-gold); }
.zs-ab-machine-head .zs-eyebrow::before { background: var(--zs-gold); }

.zs-ab-machine-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 42px);
  color: var(--zs-ivory);
  margin: 14px 0 0;
}

.zs-ab-machine-ruler {
  position: relative;
  height: 1px;
  background: rgba(244, 240, 231, 0.16);
  margin: 0 var(--zs-gutter) 40px;
}

.zs-ab-machine-ruler-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--zs-gold);
  transition: width 60ms linear;
}

.zs-ab-machine-ruler::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(244, 240, 231, 0.3) 0, rgba(244, 240, 231, 0.3) 1px, transparent 1px, transparent 40px);
}

.zs-ab-machine-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-left: var(--zs-gutter);
  will-change: transform;
}

.zs-ab-machine-stage {
  flex: 0 0 min(78vw, 520px);
  padding: 0 40px 0 0;
  margin-right: 40px;
  border-left: 1px solid rgba(244, 240, 231, 0.16);
  padding-left: 28px;
  opacity: 0.4;
  transform: scale(0.94);
  transition: opacity 500ms var(--zs-ease), transform 500ms var(--zs-ease);
}

.zs-ab-machine-stage.is-active { opacity: 1; transform: scale(1); }

.zs-ab-machine-stage-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--zs-gold);
  margin-bottom: 14px;
}

.zs-ab-machine-stage-media {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid rgba(244, 240, 231, 0.14);
}

.zs-ab-machine-stage-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zs-ab-machine-stage-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--zs-ivory);
  margin-bottom: 10px;
}

.zs-ab-machine-stage-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--zs-text-muted);
  max-width: 380px;
}

/* ==========================================================================
   ABOUT — 05 STANDARDS MATRIX
   ========================================================================== */

.zs-ab-matrix { padding: 130px 0; background: var(--zs-cream); }

.zs-ab-matrix-head { max-width: 640px; margin: 0 auto 60px; text-align: center; }
.zs-ab-matrix-heading { font-size: clamp(30px, 3.8vw, 46px); margin: 16px 0 16px; }
.zs-ab-matrix-sub { font-family: var(--font-body); font-size: 16px; color: var(--zs-charcoal-soft); line-height: 1.7; }

.zs-ab-matrix-rows { border-top: 1px solid var(--zs-line); }

.zs-ab-matrix-row {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr auto 24px;
  align-items: center;
  gap: 24px;
  padding: 34px 4px;
  border-bottom: 1px solid var(--zs-line);
  cursor: pointer;
  transition: padding-left 320ms var(--zs-ease), background 320ms var(--zs-ease);
}

.zs-ab-matrix-row:hover,
.zs-ab-matrix-row:focus-within,
.zs-ab-matrix-row.is-open {
  padding-left: 16px;
  background: var(--zs-sand);
  outline: none;
}

.zs-ab-matrix-row-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--zs-sand-2);
  transition: color 320ms var(--zs-ease);
}

.zs-ab-matrix-row:hover .zs-ab-matrix-row-num,
.zs-ab-matrix-row.is-open .zs-ab-matrix-row-num { color: var(--zs-mocha-warm); }

.zs-ab-matrix-row-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--zs-charcoal);
  margin-bottom: 6px;
}

.zs-ab-matrix-row-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--zs-charcoal-soft);
  max-width: 480px;
}

.zs-ab-matrix-row-tech {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--zs-mocha-warm);
  opacity: 0.7;
}

.zs-ab-matrix-row-frame {
  position: relative;
  display: flex;
  width: 0;
  height: 76px;
  overflow: hidden;
  transition: width 420ms var(--zs-ease);
  border-radius: 2px;
}

.zs-ab-matrix-row:hover .zs-ab-matrix-row-frame,
.zs-ab-matrix-row:focus-within .zs-ab-matrix-row-frame,
.zs-ab-matrix-row.is-open .zs-ab-matrix-row-frame { width: 200px; }

.zs-ab-matrix-slice {
  position: relative;
  flex: 1 1 25%;
  height: 100%;
  background-image: var(--bg);
  background-size: 400% 100%;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 460ms var(--zs-ease), opacity 300ms var(--zs-ease);
}

.zs-ab-matrix-slice:nth-child(1) { background-position: 0% 0; transition-delay: 0ms; }
.zs-ab-matrix-slice:nth-child(2) { background-position: 33.33% 0; transition-delay: 60ms; transform: translateY(100%); }
.zs-ab-matrix-slice:nth-child(3) { background-position: 66.66% 0; transition-delay: 120ms; }
.zs-ab-matrix-slice:nth-child(4) { background-position: 100% 0; transition-delay: 180ms; transform: translateY(100%); }

.zs-ab-matrix-row:hover .zs-ab-matrix-slice,
.zs-ab-matrix-row:focus-within .zs-ab-matrix-slice,
.zs-ab-matrix-row.is-open .zs-ab-matrix-slice { transform: translateY(0); opacity: 1; }

.zs-ab-matrix-row-arrow {
  color: var(--zs-charcoal-soft);
  transform: translate(-6px, 6px);
  opacity: 0;
  transition: transform 320ms var(--zs-ease), opacity 320ms var(--zs-ease);
}

.zs-ab-matrix-row:hover .zs-ab-matrix-row-arrow,
.zs-ab-matrix-row:focus-within .zs-ab-matrix-row-arrow,
.zs-ab-matrix-row.is-open .zs-ab-matrix-row-arrow { transform: translate(0, 0); opacity: 1; }

/* ==========================================================================
   ABOUT — 06 PACKAGING ARCHIVE
   ========================================================================== */

.zs-ab-archive { padding: 130px 0; background: var(--zs-sand); }

.zs-ab-archive-head { max-width: 620px; margin: 0 auto 60px; text-align: center; }
.zs-ab-archive-heading { font-size: clamp(28px, 3.6vw, 42px); margin: 16px 0 16px; }
.zs-ab-archive-sub { font-family: var(--font-body); font-size: 15.5px; color: var(--zs-charcoal-soft); line-height: 1.7; }

.zs-ab-archive-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 130px;
  gap: 16px;
}

.zs-ab-archive-item {
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
  margin: 0;
  overflow: hidden;
  background: var(--zs-mocha);
  border: 1px solid var(--zs-line);
  clip-path: inset(14% 14% 14% 14%);
  opacity: 0;
  transform: rotate(0deg) scale(0.96);
  transition: clip-path 760ms var(--zs-ease), opacity 600ms var(--zs-ease), transform 760ms var(--zs-ease);
}

.zs-ab-archive-item.is-in {
  opacity: 1;
  clip-path: inset(0% 0% 0% 0%);
  transform: rotate(var(--r, 0deg)) scale(1);
}

.zs-ab-archive-item--tall { grid-row: span 3; }
.zs-ab-archive-item--wide { grid-column: span 3; }

.zs-ab-archive-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--zs-ease); }
.zs-ab-archive-item:hover img { transform: scale(1.06); }

.zs-ab-archive-item figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zs-ivory);
  background: rgba(20, 35, 29, 0.55);
  padding: 6px 10px;
}

.zs-ab-archive-item figcaption span { color: var(--zs-gold); font-size: 10px; }

/* ==========================================================================
   ABOUT — 07 WHY Z&S
   ========================================================================== */

.zs-ab-why {
  position: relative;
  padding: 150px 0;
  background: var(--zs-cream);
  overflow: hidden;
}

.zs-ab-why-inner { position: relative; min-height: 640px; }

.zs-ab-why-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(160px, 26vw, 420px);
  line-height: 1;
  color: var(--zs-sand-2);
  z-index: 0;
  white-space: nowrap;
  user-select: none;
  will-change: transform;
}

.zs-ab-why-center {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 0;
}

.zs-ab-why-statement { font-size: clamp(30px, 4vw, 48px); margin: 16px 0 18px; }

.zs-ab-why-sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--zs-charcoal-soft);
  margin-bottom: 28px;
}

.zs-ab-why-tags {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 30px;
  margin-top: 90px;
}

.zs-ab-why-tag { will-change: transform; }

.zs-ab-why-tag-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--zs-mocha-warm);
  margin-bottom: 6px;
}

.zs-ab-why-tag-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--zs-charcoal);
  margin-bottom: 6px;
}

.zs-ab-why-tag-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--zs-charcoal-soft);
}

/* ==========================================================================
   ABOUT — 08 FINAL REVEAL
   ========================================================================== */

.zs-ab-future {
  position: relative;
  overflow: hidden;
  padding: 150px 0;
  background: var(--zs-bg);
  color: var(--zs-ivory);
  text-align: center;
}

.zs-ab-future .zs-eyebrow { color: var(--zs-gold); justify-content: center; }
.zs-ab-future .zs-eyebrow::before { background: var(--zs-gold); }

.zs-ab-future-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(244, 240, 231, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 240, 231, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}

.zs-ab-future-frame { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); pointer-events: none; }
.zs-ab-future-frame-rect { stroke: rgba(244, 240, 231, 0.18); }

.zs-ab-future-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }

.zs-ab-future-pretitle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(46px, 9vw, 110px);
  line-height: 1;
  color: var(--zs-ivory);
  margin: 0;
  letter-spacing: -0.01em;
  transition: opacity 700ms var(--zs-ease), transform 700ms var(--zs-ease), margin 700ms var(--zs-ease), height 700ms var(--zs-ease);
  overflow: hidden;
}

.zs-ab-future.is-in .zs-ab-future-pretitle {
  opacity: 0;
  transform: scale(0.5);
  height: 0;
  margin: 0;
}

.zs-ab-future-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--zs-ease) 200ms, transform 800ms var(--zs-ease) 200ms;
}

.zs-ab-future.is-in .zs-ab-future-reveal { opacity: 1; transform: translateY(0); }

.zs-ab-future-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 60px);
  color: var(--zs-ivory);
  line-height: 1.05;
  margin: 18px 0 20px;
}

.zs-ab-future-heading em { font-style: normal; color: var(--zs-gold); }

.zs-ab-future-desc {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--zs-text-muted);
  max-width: 480px;
  margin: 0 auto 40px;
}

.zs-ab-future-box {
  position: relative;
  width: 74px;
  height: 50px;
  margin: 0 auto 44px;
  transform-style: preserve-3d;
}

.zs-ab-future-box-top,
.zs-ab-future-box-front,
.zs-ab-future-box-side {
  position: absolute;
  border: 1px solid var(--zs-gold);
  transition: transform 900ms var(--zs-ease), background 900ms var(--zs-ease), opacity 900ms var(--zs-ease);
}

.zs-ab-future-box-front {
  left: 0; bottom: 0; width: 74px; height: 40px;
  transform: scaleY(0.02);
  transform-origin: bottom;
  background: transparent;
}

.zs-ab-future-box-top {
  left: 0; top: 0; width: 74px; height: 20px;
  transform: rotateX(90deg) scaleY(0.02);
  transform-origin: top;
  opacity: 0;
}

.zs-ab-future-box-side {
  right: -1px; bottom: 0; width: 16px; height: 40px;
  transform: scaleX(0.02);
  transform-origin: right;
  opacity: 0;
  background: rgba(201, 166, 107, 0.12);
}

.zs-ab-future.is-in .zs-ab-future-box-front { transform: scaleY(1); background: rgba(201, 166, 107, 0.08); }
.zs-ab-future.is-in .zs-ab-future-box-top { transform: rotateX(60deg) scaleY(1); opacity: 1; }
.zs-ab-future.is-in .zs-ab-future-box-side { transform: scaleX(1); opacity: 1; }

.zs-ab-future-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.zs-ab-future-link { color: var(--zs-ivory); }

/* ==========================================================================
   ABOUT — REDUCED MOTION
   Currently scoped to the About page (zs-ab-*).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .zs-ab-hw,
  .zs-ab-hero-top,
  .zs-ab-hero-bottom,
  .zs-ab-fold-panel,
  .zs-ab-mind-word-inner,
  .zs-ab-machine-stage,
  .zs-ab-archive-item,
  .zs-ab-future-pretitle,
  .zs-ab-future-reveal,
  .zs-ab-future-box-top,
  .zs-ab-future-box-front,
  .zs-ab-future-box-side {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    height: auto !important;
  }

  .zs-ab-hero-image img { opacity: 0.34 !important; }
  .zs-ab-machine-pin { position: static; height: auto; }
  .zs-ab-machine { height: auto; }
  .zs-ab-machine-track { transform: none !important; flex-direction: column; padding: 0 var(--zs-gutter); }
  .zs-ab-machine-stage { margin: 0 0 40px; padding-left: 20px; flex: 1 1 auto; }
  .zs-ab-why-mark,
  .zs-ab-why-tag { transform: none !important; }
  .zs-ab-future.is-in .zs-ab-future-pretitle { height: auto; margin: 0 0 20px; }
}

/* ==========================================================================
   ABOUT — RESPONSIVE OVERRIDES
   Breakpoints: laptop <=1439px, tablet <=1023px, mobile <=767px,
   small mobile <=479px.
   ========================================================================== */

@media (max-width: 1439px) {
  .zs-ab-hero-title { font-size: clamp(42px, 8.6vw, 100px); }
  .zs-ab-why-mark { font-size: clamp(130px, 24vw, 320px); }
}

@media (max-width: 1023px) {
  /* ---- HERO ---- */
  .zs-ab-hero { min-height: auto; padding: calc(var(--zs-nav-clearance) + 24px) 0 80px; }
  .zs-ab-hero-title { font-size: clamp(38px, 10vw, 76px); }
  .zs-ab-hero-bottom { flex-direction: column; align-items: flex-start; }

  /* ---- FOLD ---- */
  .zs-ab-fold { grid-template-columns: 1fr; }
  .zs-ab-fold-panel { transform-origin: top center; transform: perspective(1200px) rotateX(-40deg); }
  .zs-ab-fold-panel.is-in { transform: perspective(1200px) rotateX(0deg); }

  /* ---- MIND ---- */
  .zs-ab-mind-word { min-height: 46vh; justify-content: flex-start !important; }
  .zs-ab-mind-word[style*="--side:1"] .zs-ab-mind-word-inner { align-items: flex-start; text-align: left; }

  /* ---- MACHINE stays pinned on tablet, narrower cards ---- */
  .zs-ab-machine-stage { flex-basis: min(84vw, 420px); }

  /* ---- ARCHIVE ---- */
  .zs-ab-archive-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 110px; }
  .zs-ab-archive-item--wide { grid-column: span 4; }

  /* ---- WHY ---- */
  .zs-ab-why-mark { font-size: clamp(110px, 30vw, 260px); }
  .zs-ab-why-tags { grid-template-columns: repeat(2, 1fr); margin-top: 60px; }
}

@media (max-width: 767px) {
  /* ---- HERO ---- */
  .zs-ab-hero-title { font-size: clamp(32px, 12vw, 54px); }
  .zs-ab-hw { margin-left: 0 !important; }
  .zs-ab-hero-desc { font-size: 15.5px; }
  .zs-ab-hero-scroll { display: none; }

  /* ---- STORY ---- */
  .zs-ab-story { padding: 80px 0; }

  /* ---- MIND ---- */
  .zs-ab-mind { padding: 70px 0 10px; }
  .zs-ab-mind-word { min-height: auto; padding: 40px 0; }
  .zs-ab-mind-word-text { font-size: clamp(44px, 16vw, 80px); }

  /* ---- MACHINE: convert horizontal pin to vertical stack ---- */
  .zs-ab-machine { height: auto; background: var(--zs-bg); padding: 80px 0; }
  .zs-ab-machine-pin { position: static; height: auto; padding: 0 var(--zs-gutter); }
  .zs-ab-machine-head { padding: 0; margin-bottom: 40px; }
  .zs-ab-machine-ruler { display: none; }
  .zs-ab-machine-track {
    flex-direction: column;
    padding-left: 0;
    transform: none !important;
    gap: 46px;
  }
  .zs-ab-machine-stage {
    flex-basis: auto;
    margin-right: 0;
    opacity: 1;
    transform: none;
    padding-left: 20px;
  }
  .zs-ab-machine-stage-media { height: 220px; }

  /* ---- MATRIX ---- */
  .zs-ab-matrix { padding: 80px 0; }
  .zs-ab-matrix-row { grid-template-columns: 44px 1fr; gap: 14px; padding: 24px 2px; }
  .zs-ab-matrix-row-frame,
  .zs-ab-matrix-row-arrow { display: none; }
  .zs-ab-matrix-row:hover,
  .zs-ab-matrix-row:focus-within { padding-left: 2px; }
  .zs-ab-matrix-row-num { font-size: 24px; }

  /* ---- ARCHIVE ---- */
  .zs-ab-archive { padding: 80px 0; }
  .zs-ab-archive-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .zs-ab-archive-item--wide { grid-column: span 2; }
  .zs-ab-archive-item--tall { grid-row: span 2; }

  /* ---- WHY ---- */
  .zs-ab-why { padding: 90px 0; }
  .zs-ab-why-mark { position: static; transform: none; display: block; text-align: center; font-size: clamp(64px, 22vw, 120px); margin-bottom: 20px; }
  .zs-ab-why-tags { grid-template-columns: 1fr; margin-top: 40px; gap: 24px; }
  .zs-ab-why-tag { transform: none !important; }

  /* ---- FUTURE ---- */
  .zs-ab-future { padding: 100px 0; }
  .zs-ab-future-heading { font-size: clamp(30px, 9vw, 44px); }
  .zs-ab-future-actions { flex-direction: column; gap: 20px; }
}

@media (max-width: 479px) {
  .zs-ab-hero-eyebrow, .zs-ab-hero-tag { font-size: 10.5px; }
  .zs-ab-fold-panel { padding: 34px 22px 30px; }
  .zs-ab-mind-word-text { font-size: clamp(38px, 17vw, 62px); }
  .zs-ab-archive-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .zs-ab-archive-item--wide,
  .zs-ab-archive-item--tall { grid-column: span 1; grid-row: span 1; }
}

/* ==========================================================================
   Z&S PRODUCTS PAGE
   ========================================================================== */

.zs-products { overflow-x: hidden; background: var(--zs-cream); }

/* --------------------------------------------------------------------------
   01 — HERO / 3D PRODUCT STAGE
   -------------------------------------------------------------------------- */

.zs-products-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--zs-nav-clearance) + 22px) 0 100px;
  background:
    radial-gradient(900px 560px at 10% -10%, rgba(201, 166, 107, 0.13), transparent 60%),
    var(--zs-cream);
}

.zs-products-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg, var(--zs-line-soft) 0, var(--zs-line-soft) 1px, transparent 1px, transparent 46px);
  -webkit-mask-image: radial-gradient(70% 60% at 85% 20%, rgba(0,0,0,0.55), transparent 72%);
  mask-image: radial-gradient(70% 60% at 85% 20%, rgba(0,0,0,0.55), transparent 72%);
  opacity: 0.7;
}

.zs-products-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}

.zs-products-hero-copy { max-width: 600px; }

.zs-products-hero-title {
  font-size: clamp(40px, 5.4vw, 68px);
  margin: 24px 0 26px;
}

.zs-products-hero-title em { font-style: normal; color: var(--zs-forest); }

.zs-products-hero-desc {
  font-size: 17px;
  line-height: 1.75;
  color: var(--zs-charcoal-soft);
  max-width: 480px;
  margin-bottom: 36px;
}

.zs-products-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}

.zs-products-hero-visual { position: relative; }

.zs-products-hero-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.zs-products-hero-index li {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--zs-line);
  background: var(--zs-cream);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--zs-mocha-warm);
}

/* ---- 3D stage ----
   Source photography is full-bleed lifestyle imagery (no alpha channel),
   so layers are built as distinct offset "cards" — each with its own
   frame — rather than stacked at identical bounds. */

.zs-stage { position: relative; padding: 10px 10px 26px; perspective: 1800px; }

.zs-stage-3d {
  position: relative;
  aspect-ratio: 5 / 6;
  perspective: 1400px;
  transform-style: preserve-3d;
  transition: transform 500ms var(--zs-ease);
}

.zs-stage-shadow {
  position: absolute;
  left: 14%;
  right: 10%;
  bottom: 2%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34,29,23,0.26), transparent 78%);
  filter: blur(3px);
}

.zs-stage-layer {
  position: absolute;
  transform-style: preserve-3d;
  border-radius: 6px;
  padding: 8px;
  background: var(--zs-cream);
  border: 1px solid var(--zs-line);
  box-shadow: 0 20px 34px rgba(34, 29, 23, 0.16);
  transition: transform 620ms var(--zs-ease), box-shadow 620ms var(--zs-ease);
  will-change: transform;
}

.zs-stage-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.zs-stage-layer--base {
  top: 0;
  right: 0;
  width: 56%;
  aspect-ratio: 4 / 4.6;
  transform: translateZ(-80px) rotate(7deg);
  z-index: 1;
}

.zs-stage-layer--mid {
  bottom: 6%;
  left: 0;
  width: 60%;
  aspect-ratio: 4 / 4.4;
  transform: translateZ(-20px) rotate(-6deg);
  z-index: 2;
}

.zs-stage-layer--top {
  top: 16%;
  left: 20%;
  width: 62%;
  aspect-ratio: 4 / 4.4;
  transform: translateZ(50px) rotate(1deg);
  z-index: 3;
  box-shadow: 0 26px 44px rgba(34, 29, 23, 0.22);
}

.zs-stage:hover .zs-stage-layer--base,
.zs-stage.is-active .zs-stage-layer--base {
  transform: translateZ(-120px) translate(6%, -6%) rotate(10deg);
}

.zs-stage:hover .zs-stage-layer--mid,
.zs-stage.is-active .zs-stage-layer--mid {
  transform: translateZ(-10px) translate(-6%, 6%) rotate(-9deg);
}

.zs-stage:hover .zs-stage-layer--top,
.zs-stage.is-active .zs-stage-layer--top {
  transform: translateZ(80px) translateY(-3%) rotate(-1deg);
}

.zs-stage-tick {
  position: absolute;
  width: 16px; height: 16px;
  border-style: solid;
  border-color: var(--zs-gold);
  border-width: 0;
  z-index: 2;
}

.zs-stage-tick--tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.zs-stage-tick--br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.zs-stage-plate {
  position: absolute;
  left: -2px;
  bottom: 14%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 15px;
  background: var(--zs-forest);
  color: var(--zs-ivory);
  border-left: 2px solid var(--zs-gold);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.zs-stage-plate span:first-child {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zs-gold);
}

.zs-stage-hint {
  margin: 14px 2px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zs-charcoal-soft);
  opacity: 0.7;
}

/* ---- hero entrance sequencing ---- */

.zs-products-hero-copy .zs-eyebrow,
.zs-products-hero-title,
.zs-products-hero-desc,
.zs-products-hero-actions,
.zs-products-hero-visual {
  opacity: 0;
  transform: translateY(22px);
}

.zs-products-hero.is-loaded .zs-products-hero-copy .zs-eyebrow { animation: zsProductsHeroUp 720ms var(--zs-ease) 40ms forwards; }
.zs-products-hero.is-loaded .zs-products-hero-title { animation: zsProductsHeroUp 820ms var(--zs-ease) 140ms forwards; }
.zs-products-hero.is-loaded .zs-products-hero-desc { animation: zsProductsHeroUp 800ms var(--zs-ease) 300ms forwards; }
.zs-products-hero.is-loaded .zs-products-hero-actions { animation: zsProductsHeroUp 800ms var(--zs-ease) 440ms forwards; }
.zs-products-hero.is-loaded .zs-products-hero-visual { animation: zsProductsHeroUp 900ms var(--zs-ease) 260ms forwards; }

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

/* --------------------------------------------------------------------------
   02 — PRODUCT TYPE SELECTOR
   -------------------------------------------------------------------------- */

.zs-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.zs-selector-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  padding: 44px var(--zs-gutter);
  background: var(--zs-forest);
  isolation: isolate;
}

.zs-selector-panel--print { background: var(--zs-mocha-warm); }

.zs-selector-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.zs-selector-media img {
  position: absolute;
  width: 42%;
  max-width: 260px;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.35)) saturate(0.9);
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  transition: opacity 560ms var(--zs-ease), transform 560ms var(--zs-ease);
}

.zs-selector-media img:nth-child(1) { top: 8%; right: 6%; transition-delay: 40ms; }
.zs-selector-media img:nth-child(2) { bottom: -6%; right: 22%; transition-delay: 140ms; }
.zs-selector-media img:nth-child(3) { top: 30%; right: 40%; transition-delay: 220ms; }

.zs-selector-panel:hover .zs-selector-media img,
.zs-selector-panel:focus-visible .zs-selector-media img {
  opacity: 0.9;
  transform: translateY(0) scale(1);
}

.zs-selector-inner { position: relative; z-index: 1; color: var(--zs-ivory); width: 100%; }

.zs-selector-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--zs-gold-hover);
  margin-bottom: 10px;
}

.zs-selector-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  margin-bottom: 14px;
  transition: gap 260ms var(--zs-ease);
}

.zs-selector-title svg { color: var(--zs-gold-hover); transition: transform 260ms var(--zs-ease); flex-shrink: 0; }
.zs-selector-panel:hover .zs-selector-title { gap: 20px; }
.zs-selector-panel:hover .zs-selector-title svg { transform: translateX(4px); }

.zs-selector-list {
  display: block;
  max-width: 480px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(244,240,231,0.72);
}

/* --------------------------------------------------------------------------
   03 — STRUCTURE EXPLORER
   -------------------------------------------------------------------------- */

.zs-explorer { padding: 120px 0 130px; }

.zs-explorer-head { max-width: 640px; margin-bottom: 56px; }
.zs-explorer-head-desc { margin-top: 18px; font-size: 16px; line-height: 1.75; color: var(--zs-charcoal-soft); }

.zs-explorer-body {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}

.zs-explorer-list {
  position: sticky;
  top: calc(var(--zs-nav-clearance) - 20px);
  border-top: 1px solid var(--zs-line);
}

.zs-explorer-item {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  padding: 17px 6px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--zs-line);
  text-align: left;
  cursor: pointer;
}

.zs-explorer-item-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--zs-mocha-warm);
  transition: color 240ms var(--zs-ease);
}

.zs-explorer-item-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 25px);
  color: var(--zs-charcoal-soft);
  letter-spacing: -0.005em;
  transition: color 240ms var(--zs-ease), transform 240ms var(--zs-ease);
}

.zs-explorer-item:hover .zs-explorer-item-name { color: var(--zs-charcoal); transform: translateX(4px); }

.zs-explorer-item.is-active .zs-explorer-item-num,
.zs-explorer-item.is-active .zs-explorer-item-name { color: var(--zs-forest); }

.zs-explorer-item.is-active .zs-explorer-item-name { transform: translateX(8px); }

.zs-explorer-stage { position: relative; min-height: 560px; }

.zs-structure-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.zs-structure-panel[hidden] { display: none; }

/* assembly transition: slice-together entrance */
.zs-structure-panel.is-entering .zs-structure-media,
.zs-structure-panel.is-entering .zs-structure-info { animation: zsStructureAssemble 620ms var(--zs-ease) both; }
.zs-structure-panel.is-entering .zs-structure-info { animation-delay: 70ms; }

@keyframes zsStructureAssemble {
  0% { opacity: 0; clip-path: inset(0 45% 0 0); transform: translateX(-14px); }
  60% { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
}

.zs-structure-media {
  position: relative;
  background: var(--zs-sand);
}

.zs-structure-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--zs-line);
}

.zs-structure-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.zs-structure-lines line {
  stroke: var(--zs-gold);
  stroke-width: 1.2;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  opacity: 0.85;
}

.zs-structure-panel.is-active .zs-structure-lines line {
  animation: zsLineDraw 900ms var(--zs-ease) forwards;
}

.zs-structure-lines line:nth-child(1) { animation-delay: 260ms !important; }
.zs-structure-lines line:nth-child(2) { animation-delay: 380ms !important; }
.zs-structure-lines line:nth-child(3) { animation-delay: 500ms !important; }
.zs-structure-lines line:nth-child(4) { animation-delay: 620ms !important; }

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

.zs-structure-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -100%);
  z-index: 2;
  padding: 4px 9px;
  background: var(--zs-forest);
  color: var(--zs-ivory) !important;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 2px;
  opacity: 0;
}

.zs-structure-panel.is-active .zs-structure-label {
  animation: zsLabelIn 480ms var(--zs-ease) forwards;
}

.zs-structure-label:nth-of-type(1) { animation-delay: 140ms !important; }
.zs-structure-label:nth-of-type(2) { animation-delay: 260ms !important; }
.zs-structure-label:nth-of-type(3) { animation-delay: 380ms !important; }
.zs-structure-label:nth-of-type(4) { animation-delay: 500ms !important; }

@keyframes zsLabelIn { from { opacity: 0; transform: translate(-50%, -80%); } to { opacity: 1; transform: translate(-50%, -100%); } }

.zs-structure-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--zs-mocha-warm);
  margin-bottom: 14px;
}

.zs-structure-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 38px);
  color: var(--zs-charcoal);
  margin-bottom: 16px;
}

.zs-structure-desc {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--zs-charcoal-soft);
  margin-bottom: 26px;
  max-width: 46ch;
}

.zs-structure-specs { margin-bottom: 30px; }

.zs-structure-specs > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--zs-line);
}

.zs-structure-specs dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
}

.zs-structure-specs dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--zs-charcoal);
}

/* --------------------------------------------------------------------------
   04 — BOXES BY PURPOSE (INDUSTRY RAIL)
   -------------------------------------------------------------------------- */

.zs-industry-rail { padding: 100px 0 0; }

.zs-industry-rail-head { max-width: 620px; margin-bottom: 44px; }

.zs-industry-rail-body { background: var(--zs-forest); padding: 0 0 0; }

.zs-industry-rail-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 480px;
}

.zs-industry-rail-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 40px 0;
  border-right: 1px solid rgba(244,240,231,0.14);
}

.zs-industry-btn {
  text-align: left;
  padding: 12px 28px 12px 0;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  padding-left: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: rgba(244,240,231,0.5);
  cursor: pointer;
  transition: color 240ms var(--zs-ease), border-color 240ms var(--zs-ease), padding-left 240ms var(--zs-ease);
}

.zs-industry-btn:hover { color: rgba(244,240,231,0.85); }

.zs-industry-btn.is-active {
  color: var(--zs-ivory);
  border-left-color: var(--zs-gold);
  padding-left: 30px;
  font-size: 20px;
}

.zs-industry-visual { position: relative; overflow: hidden; }

.zs-industry-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 30px;
  padding: 40px var(--zs-gutter) 40px 50px;
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transform: translateX(6%);
  transition: opacity 520ms var(--zs-ease), clip-path 620ms var(--zs-ease), transform 620ms var(--zs-ease);
}

.zs-industry-frame.is-active {
  position: relative;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateX(0);
}

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

.zs-industry-frame-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--zs-ivory);
  margin-bottom: 12px;
}

.zs-industry-frame figcaption p { font-size: 14.5px; line-height: 1.7; color: rgba(244,240,231,0.68); max-width: 32ch; }

/* --------------------------------------------------------------------------
   05 — NOT JUST BOXES (PRINT & BRANDING "DESK")
   -------------------------------------------------------------------------- */

.zs-print-table { padding: 120px 0; background: var(--zs-sand); }

.zs-print-table-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}

.zs-print-table-copy { max-width: 420px; }
.zs-print-table-desc { margin-top: 18px; font-size: 15.5px; line-height: 1.8; color: var(--zs-charcoal-soft); }

.zs-print-table-field {
  position: relative;
  min-height: 300px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
}

.zs-print-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 320ms var(--zs-ease);
}

.zs-print-item--1 { transform: rotate(-4deg) translateY(6px); }
.zs-print-item--2 { transform: rotate(3deg) translateY(-10px); }
.zs-print-item--3 { transform: rotate(-2deg) translateY(2px); }
.zs-print-item--4 { transform: rotate(4deg) translateY(-4px); }

.zs-print-item-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--zs-cream);
  border: 1px solid var(--zs-line);
  box-shadow: 0 14px 26px rgba(34,29,23,0.10);
  transition: box-shadow 320ms var(--zs-ease);
}

.zs-print-item-media img { width: 100%; height: 100%; object-fit: contain; padding: 14%; }

.zs-print-item-media--type {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  color: var(--zs-mocha-warm);
}

.zs-print-item-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--zs-charcoal-soft);
}

.zs-print-item:hover,
.zs-print-item.is-active {
  transform: translateY(-14px) rotate(0deg) scale(1.04);
  z-index: 2;
}

.zs-print-item:hover .zs-print-item-media,
.zs-print-item.is-active .zs-print-item-media {
  box-shadow: 0 24px 40px rgba(34,29,23,0.20);
}

.zs-print-table-field:has(.zs-print-item:hover) .zs-print-item:not(:hover),
.zs-print-table-field:has(.zs-print-item.is-active) .zs-print-item:not(.is-active) {
  transform: translateY(6px) scale(0.96);
  opacity: 0.7;
}

.zs-print-table-panel {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--zs-line-soft);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 20px 30px;
}

.zs-print-table-panel-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--zs-charcoal-soft);
  max-width: 52ch;
}

.zs-print-table-panel-text[hidden] { display: none; }

/* --------------------------------------------------------------------------
   06 — CUSTOMIZATION LAYER STACK
   -------------------------------------------------------------------------- */

.zs-layer-stack {
  position: relative;
  padding: 130px 0;
  background: var(--zs-forest);
  color: var(--zs-ivory);
  overflow: hidden;
}

.zs-layer-stack-inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
}

.zs-layer-stack-copy { max-width: 480px; }
.zs-layer-stack-eyebrow { color: var(--zs-gold); }
.zs-layer-stack-eyebrow::before { background: var(--zs-gold); }
.zs-layer-stack-heading { color: var(--zs-ivory); margin: 22px 0 20px; }
.zs-layer-stack-heading em { font-style: normal; color: var(--zs-gold-hover); }
.zs-layer-stack-desc { font-size: 16px; line-height: 1.8; color: var(--zs-text-muted); margin-bottom: 32px; }

.zs-layer-stack-visual {
  position: relative;
  perspective: 1200px;
  min-height: 340px;
}

.zs-layer {
  position: absolute;
  left: 6%;
  right: 6%;
  height: 62px;
  top: calc(50% - 31px + (var(--i) - 2) * 8px);
  display: flex;
  align-items: center;
  padding: 0 26px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(244,240,231,0.10), rgba(244,240,231,0.04));
  border: 1px solid rgba(244,240,231,0.18);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--i) * -18px)) translateY(calc(var(--i) * 2px));
  transition: transform 700ms var(--zs-ease), border-color 400ms var(--zs-ease);
}

.zs-layer span {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zs-ivory);
}

.zs-layer-stack-visual.is-split .zs-layer {
  transform: translateZ(calc(var(--i) * -18px)) translateY(calc((var(--i) - 2) * 44px));
  border-color: var(--zs-gold-line);
}

/* --------------------------------------------------------------------------
   07 — FROM FLAT TO FORM
   -------------------------------------------------------------------------- */

.zs-flat-form { padding: 120px 0; }

.zs-flat-form-head { text-align: center; max-width: 560px; margin: 0 auto 50px; }

.zs-flat-form-strip {
  position: relative;
  max-width: 620px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.zs-flat-form-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 620ms var(--zs-ease), transform 620ms var(--zs-ease), clip-path 620ms var(--zs-ease);
  clip-path: inset(0 0 100% 0);
}

.zs-flat-form-frame.is-active {
  opacity: 1;
  transform: scale(1);
  clip-path: inset(0 0 0 0);
}

.zs-flat-form-frame img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(34,29,23,0.14));
}

.zs-flat-form-label {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--zs-forest);
  color: var(--zs-ivory);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   08 — WHICH STRUCTURE FITS?
   -------------------------------------------------------------------------- */

.zs-fit-finder { padding: 100px 0 130px; background: var(--zs-sand); }

.zs-fit-finder-inner {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.zs-fit-finder-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 30px;
}

.zs-fit-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 22px;
  background: var(--zs-cream);
  border: 1px solid var(--zs-line);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--zs-charcoal);
  text-align: left;
  cursor: pointer;
  transition: border-color 240ms var(--zs-ease), background 240ms var(--zs-ease);
}

.zs-fit-btn::after {
  content: "→";
  color: var(--zs-mocha-warm);
  opacity: 0;
  transition: opacity 240ms var(--zs-ease), transform 240ms var(--zs-ease);
  transform: translateX(-6px);
}

.zs-fit-btn:hover { border-color: var(--zs-gold-line); }

.zs-fit-btn.is-active {
  border-color: var(--zs-forest);
  background: var(--zs-forest);
  color: var(--zs-ivory);
}

.zs-fit-btn.is-active::after { opacity: 1; transform: translateX(0); color: var(--zs-gold-hover); }

.zs-fit-finder-result {
  position: relative;
  padding: 34px;
  background: var(--zs-cream);
  border: 1px solid var(--zs-line);
  border-radius: 6px;
  text-align: center;
}

.zs-fit-finder-media {
  aspect-ratio: 1 / 1;
  max-width: 260px;
  margin: 0 auto 22px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--zs-sand);
}

.zs-fit-finder-media img { width: 100%; height: 100%; object-fit: contain; padding: 10%; transition: opacity 260ms var(--zs-ease); }

.zs-fit-finder-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
  margin-bottom: 8px;
}

.zs-fit-finder-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--zs-charcoal);
  margin-bottom: 12px;
}

.zs-fit-finder-reason {
  font-size: 14px;
  line-height: 1.7;
  color: var(--zs-charcoal-soft);
  max-width: 40ch;
  margin: 0 auto 24px;
}

/* --------------------------------------------------------------------------
   09 — PRODUCT DIRECTORY
   -------------------------------------------------------------------------- */

.zs-directory { padding: 120px 0; }

.zs-directory-head { margin-bottom: 40px; }

.zs-directory-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 28px;
}

.zs-directory-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid var(--zs-line);
  border-radius: 999px;
  color: var(--zs-charcoal-soft);
  min-width: 280px;
  flex: 1 1 280px;
  max-width: 380px;
}

.zs-directory-search input {
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--zs-charcoal);
  width: 100%;
}

.zs-directory-filter { display: flex; gap: 8px; flex-wrap: wrap; }

.zs-directory-filter-btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--zs-line);
  background: var(--zs-cream);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--zs-charcoal-soft);
  cursor: pointer;
  transition: background 220ms var(--zs-ease), color 220ms var(--zs-ease), border-color 220ms var(--zs-ease);
}

.zs-directory-filter-btn:hover { border-color: var(--zs-gold-line); }
.zs-directory-filter-btn.is-active { background: var(--zs-forest); border-color: var(--zs-forest); color: var(--zs-ivory); }

.zs-directory-list { border-top: 1px solid var(--zs-line); }

.zs-directory-row {
  display: grid;
  grid-template-columns: 44px 1fr auto 30px;
  align-items: center;
  gap: 18px;
  padding: 18px 6px;
  border-bottom: 1px solid var(--zs-line);
  cursor: pointer;
  transition: background 200ms var(--zs-ease), padding-left 200ms var(--zs-ease);
}

.zs-directory-row:hover,
.zs-directory-row:focus-visible { background: var(--zs-sand); padding-left: 14px; }

.zs-directory-num { font-family: var(--font-mono); font-size: 12px; color: var(--zs-mocha-warm); }

.zs-directory-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 23px);
  color: var(--zs-charcoal);
}

.zs-directory-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
  padding: 5px 12px;
  border: 1px solid var(--zs-line);
  border-radius: 999px;
}

.zs-directory-go { color: var(--zs-mocha-warm); transition: transform 200ms var(--zs-ease); text-align: right; }
.zs-directory-row:hover .zs-directory-go { transform: translateX(4px); }

.zs-directory-row.is-filtered-out { display: none; }

.zs-directory-empty { padding: 40px 0; text-align: center; color: var(--zs-charcoal-soft); }
.zs-directory-empty:not([hidden]) ~ .zs-directory-list,
.zs-directory-list:has(+ .zs-directory-empty:not([hidden])) { display: none; }

/* --------------------------------------------------------------------------
   10 — CURATED GALLERY
   -------------------------------------------------------------------------- */

.zs-showcase-gallery { padding: 40px 0 130px; }

.zs-showcase-gallery-head { max-width: 560px; margin-bottom: 44px; }

.zs-showcase-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 160px;
  gap: 14px;
}

.zs-sg-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--zs-line);
}

.zs-sg-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--zs-ease); }
.zs-sg-item:hover img { transform: scale(1.06); }

.zs-sg-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  background: linear-gradient(0deg, rgba(20,35,29,0.78), transparent);
  color: var(--zs-ivory);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms var(--zs-ease), transform 300ms var(--zs-ease);
}

.zs-sg-item:hover figcaption { opacity: 1; transform: translateY(0); }

.zs-sg-item--a { grid-column: span 2; grid-row: span 2; }
.zs-sg-item--b { grid-column: span 2; grid-row: span 1; }
.zs-sg-item--c { grid-column: span 2; grid-row: span 1; }
.zs-sg-item--d { grid-column: span 2; grid-row: span 1; }
.zs-sg-item--e { grid-column: span 2; grid-row: span 1; }
.zs-sg-item--f { grid-column: span 4; grid-row: span 1; }

.zs-showcase-gallery-link { margin-top: 36px; display: inline-flex; }

/* --------------------------------------------------------------------------
   11 — CUSTOM PACKAGING
   -------------------------------------------------------------------------- */

.zs-products-custom {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: var(--zs-forest);
  color: var(--zs-ivory);
}

.zs-products-custom-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.zs-products-custom-copy { max-width: 480px; }

.zs-products-custom-eyebrow { color: var(--zs-gold); }
.zs-products-custom-eyebrow::before { background: var(--zs-gold); }

.zs-products-custom-heading { color: var(--zs-ivory); margin: 22px 0; }
.zs-products-custom-heading em { font-style: normal; color: var(--zs-gold-hover); }

.zs-products-custom-desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--zs-text-muted);
  margin-bottom: 32px;
}

.zs-products-custom-list { border-top: 1px solid rgba(244,240,231,0.14); }

.zs-products-custom-list li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
  padding: 22px 4px;
  border-bottom: 1px solid rgba(244,240,231,0.14);
}

.zs-products-custom-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--zs-gold);
  padding-top: 3px;
}

.zs-products-custom-text {
  display: block;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--zs-text-muted);
}

.zs-products-custom-text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--zs-ivory);
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   12 — FINAL CTA
   -------------------------------------------------------------------------- */

.zs-products-cta {
  position: relative;
  overflow: hidden;
  padding: 128px 0 148px;
  background: var(--zs-forest);
  color: var(--zs-ivory);
  text-align: center;
  border-top: 1px solid rgba(244,240,231,0.1);
}

.zs-products-cta-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
}

.zs-products-cta-outline rect,
.zs-products-cta-outline line {
  fill: none;
  stroke: var(--zs-gold);
  stroke-width: 1.2;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}

.zs-products-cta.is-in .zs-products-cta-outline rect,
.zs-products-cta.is-in .zs-products-cta-outline line {
  animation: zsCtaOutline 2.4s var(--zs-ease) forwards;
}

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

.zs-products-cta-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }

.zs-products-cta-eyebrow { justify-content: center; color: var(--zs-gold); }
.zs-products-cta-eyebrow::before { background: var(--zs-gold); }

.zs-products-cta-heading { color: var(--zs-ivory); margin: 24px 0 20px; font-size: clamp(30px, 4.2vw, 52px); }

.zs-products-cta-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--zs-text-muted);
  max-width: 500px;
  margin: 0 auto 40px;
}

.zs-products-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}

.zs-products-cta .zs-btn--text { color: var(--zs-ivory); }
.zs-products-cta .zs-btn--text::after { background: rgba(244,240,231,0.5); }

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .zs-products-hero-copy .zs-eyebrow,
  .zs-products-hero-title,
  .zs-products-hero-desc,
  .zs-products-hero-actions,
  .zs-products-hero-visual { opacity: 1; transform: none; animation: none; }

  .zs-stage-layer,
  .zs-selector-media img,
  .zs-explorer-item-name,
  .zs-structure-panel.is-entering .zs-structure-media,
  .zs-structure-panel.is-entering .zs-structure-info,
  .zs-structure-lines line,
  .zs-structure-label,
  .zs-industry-frame,
  .zs-print-item,
  .zs-layer,
  .zs-flat-form-frame,
  .zs-sg-item img,
  .zs-products-cta-outline rect,
  .zs-products-cta-outline line {
    animation: none !important;
    transition: none !important;
  }

  .zs-stage-layer--base, .zs-stage-layer--mid, .zs-stage-layer--top { transform: none; }
  .zs-structure-lines line { stroke-dashoffset: 0; }
  .zs-structure-label { opacity: 1; transform: translate(-50%, -130%); }
  .zs-industry-frame { opacity: 1; clip-path: none; transform: none; position: relative; display: none; }
  .zs-industry-frame.is-active { display: grid; }
  .zs-flat-form-frame { opacity: 1; clip-path: none; transform: none; position: relative; display: none; }
  .zs-flat-form-frame.is-active { display: flex; }
  .zs-products-cta-outline rect, .zs-products-cta-outline line { stroke-dashoffset: 0; }
}

/* ==========================================================================
   PRODUCTS PAGE — RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
  .zs-explorer-body { grid-template-columns: 1fr; }
  .zs-explorer-list { position: static; display: flex; flex-wrap: wrap; gap: 0 24px; }
  .zs-explorer-item { width: auto; flex: 1 1 220px; }
  .zs-print-table-inner,
  .zs-fit-finder-inner,
  .zs-industry-rail-inner { grid-template-columns: 1fr; }
  .zs-industry-rail-nav { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid rgba(244,240,231,0.14); padding: 28px 0; }
  .zs-industry-btn { border-left: none; border-bottom: 2px solid transparent; padding: 8px 16px; }
  .zs-industry-btn.is-active { border-left: none; border-bottom-color: var(--zs-gold); padding-left: 16px; }
  .zs-industry-visual { min-height: 420px; }
}

@media (max-width: 1024px) {
  .zs-products-hero-inner { grid-template-columns: 1fr; }
  .zs-products-hero-visual { max-width: 460px; margin: 0 auto; }
  .zs-selector { grid-template-columns: 1fr; }
  .zs-showcase-gallery-grid { grid-auto-rows: 130px; }
}

@media (max-width: 860px) {
  .zs-layer-stack-inner { grid-template-columns: 1fr; }
  .zs-layer-stack-visual { min-height: 260px; order: -1; }
  .zs-products-custom-inner { grid-template-columns: 1fr; }
  .zs-products-custom-copy { max-width: 100%; }
  .zs-structure-panel { grid-template-columns: 1fr; }
  .zs-structure-media { max-width: 400px; margin: 0 auto; }
  .zs-print-table-field { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .zs-directory-controls { flex-direction: column; align-items: stretch; }
  .zs-directory-search { max-width: 100%; }
}

@media (max-width: 640px) {
  .zs-products-hero { padding: calc(var(--zs-nav-clearance) + 10px) 0 70px; }
  .zs-selector-panel { min-height: 260px; padding: 30px 20px; }
  .zs-explorer { padding: 90px 0 100px; }
  .zs-explorer-item { flex: 1 1 100%; }
  .zs-structure-label { font-size: 9px; padding: 3px 7px; }
  .zs-industry-rail { padding: 80px 0 0; }
  .zs-industry-frame { grid-template-columns: 1fr; padding: 28px 20px; gap: 16px; }
  .zs-print-table, .zs-layer-stack, .zs-flat-form, .zs-fit-finder, .zs-directory { padding: 80px 0; }
  .zs-showcase-gallery { padding: 20px 0 90px; }
  .zs-showcase-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .zs-sg-item { aspect-ratio: 4 / 3; }
  .zs-sg-item--a, .zs-sg-item--b, .zs-sg-item--c, .zs-sg-item--d, .zs-sg-item--e, .zs-sg-item--f { grid-column: span 1; grid-row: span 1; }
  .zs-products-custom, .zs-products-cta { padding: 80px 0 96px; }
  .zs-fit-finder-inner { gap: 40px; }
  .zs-structure-specs > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 400px) {
  .zs-print-table-field { grid-template-columns: repeat(2, 1fr); }
  .zs-directory-row { grid-template-columns: 30px 1fr 24px; }
  .zs-directory-tag { display: none; }
}

/* =========================================================
   Z&S CONTACT PAGE
   Namespace: zs-contact-* (page sections) / zs-cf-* (form configurator)
   Scoped under <main class="zs-contact">
   ========================================================= */

.zs-contact { background: var(--zs-cream); }

/* ---------------------------------------------------------
   01 — HERO
   --------------------------------------------------------- */

.zs-contact-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--zs-nav-clearance) + 30px) 0 90px;
  background:
    radial-gradient(1000px 560px at 88% -10%, rgba(201, 166, 107, 0.16), transparent 60%),
    var(--zs-cream);
}

.zs-contact-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--zs-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--zs-line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 78% 15%, #000, transparent 75%);
  opacity: 0.7;
}

.zs-contact-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center;
  gap: 40px;
}

.zs-contact-hero-copy { max-width: 560px; }

.zs-contact-hero-top { margin-bottom: 22px; }

.zs-contact-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.94;
  font-size: clamp(48px, 6.4vw, 92px);
  color: var(--zs-charcoal);
  margin: 0 0 24px;
}

.zs-contact-hero-title em { font-style: normal; color: var(--zs-mocha-warm); }

.zs-contact-hero-line { display: block; overflow: hidden; }

.zs-contact-hero-line-in {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  animation: zsContactLineIn 900ms var(--zs-ease) forwards;
}

.zs-contact-hero-line:nth-child(2) .zs-contact-hero-line-in { animation-delay: 140ms; }

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

.zs-contact-hero-desc {
  font-size: 18px;
  line-height: 1.6;
  color: var(--zs-charcoal-soft);
  max-width: 460px;
  margin-bottom: 32px;
}

.zs-contact-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 32px;
}

.zs-contact-hero-call { display: inline-flex; align-items: center; gap: 8px; }

.zs-contact-hero-labels {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--zs-line);
}

.zs-contact-hero-labels span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zs-charcoal-soft);
}

.zs-contact-hero-labels span:not(:last-child)::after { content: "\2022"; margin-left: 20px; color: var(--zs-gold); }

/* ---- hero visual "project desk" ---- */

.zs-contact-hero-visual {
  position: relative;
  justify-self: end;
  max-width: 380px;
  width: 100%;
  transform-style: preserve-3d;
  perspective: 1200px;
}

.zs-contact-hero-visual-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 80px rgba(34, 29, 23, 0.20);
  transform: translateZ(0);
  transition: transform 240ms var(--zs-ease);
}

.zs-contact-hero-visual-main img { width: 100%; height: 100%; object-fit: cover; }

.zs-contact-hero-visual-mask {
  position: absolute; inset: 0;
  background: var(--zs-cream);
  transform-origin: bottom;
  animation: zsContactMaskReveal 1100ms var(--zs-ease) 260ms forwards;
}

@keyframes zsContactMaskReveal { to { transform: scaleY(0); } }

.zs-contact-hero-visual-index {
  position: absolute;
  top: -30px; left: -6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 72px;
  color: var(--zs-charcoal);
  opacity: 0.08;
  line-height: 1;
}

.zs-contact-hero-visual-card {
  position: absolute;
  bottom: -30px; left: -46px;
  width: 128px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(34, 29, 23, 0.22);
  border: 4px solid var(--zs-cream);
  opacity: 0;
  transform: translateY(24px) translateZ(30px);
  animation: zsContactCardIn 720ms var(--zs-ease) 620ms forwards;
}

.zs-contact-hero-visual-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

@keyframes zsContactCardIn { to { opacity: 1; transform: translateY(0) translateZ(30px); } }

.zs-contact-hero-visual-doc {
  position: absolute;
  top: 26px; right: -22px;
  width: 76px;
  padding: 12px 10px;
  background: var(--zs-cream);
  border-radius: 8px;
  box-shadow: 0 16px 30px rgba(34, 29, 23, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(-16px) translateZ(46px);
  animation: zsContactDocIn 640ms var(--zs-ease) 820ms forwards;
}

.zs-contact-hero-visual-doc span { display: block; height: 3px; border-radius: 2px; background: var(--zs-line); }
.zs-contact-hero-visual-doc span:first-child { width: 70%; background: var(--zs-gold); }

@keyframes zsContactDocIn { to { opacity: 1; transform: translateY(0) translateZ(46px); } }

.zs-contact-hero-visual-plate {
  position: absolute;
  bottom: 18px; right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20, 35, 29, 0.82);
  backdrop-filter: blur(6px);
  color: var(--zs-ivory);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0;
  animation: zsContactPlateIn 600ms var(--zs-ease) 980ms forwards;
}

@keyframes zsContactPlateIn { to { opacity: 1; } }

.zs-contact-hero-visual-plate-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--zs-gold);
  box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.25);
}

.zs-contact-hero-scroll {
  position: absolute;
  left: var(--zs-gutter);
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.zs-contact-hero-scroll-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zs-charcoal-soft);
}

.zs-contact-hero-scroll-line {
  position: relative;
  width: 1px; height: 40px;
  background: var(--zs-line);
}

.zs-contact-hero-scroll-dot {
  position: absolute;
  left: -2px; top: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--zs-gold);
  animation: zsContactScrollDot 2200ms ease-in-out infinite;
}

@keyframes zsContactScrollDot {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 34px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .zs-contact-hero-line-in,
  .zs-contact-hero-visual-mask,
  .zs-contact-hero-visual-card,
  .zs-contact-hero-visual-doc,
  .zs-contact-hero-visual-plate { animation: none; opacity: 1; transform: none; }
  .zs-contact-hero-scroll-dot { animation: none; }
}

/* ---------------------------------------------------------
   02 — CONTACT CONSOLE
   --------------------------------------------------------- */

.zs-contact-console {
  padding: 90px 0;
  background: var(--zs-sand);
  border-top: 1px solid var(--zs-sand-2);
  border-bottom: 1px solid var(--zs-sand-2);
}

.zs-contact-console-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 60px;
}

.zs-contact-console-left { display: flex; flex-direction: column; gap: 22px; }

.zs-contact-console-statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.22;
  color: var(--zs-charcoal);
  max-width: 420px;
}

.zs-contact-console-statement strong { color: var(--zs-mocha-warm); font-weight: 700; }

.zs-contact-console-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--zs-gold-line);
  border-radius: 999px;
  color: var(--zs-mocha-warm);
}

.zs-contact-console-right { display: flex; flex-direction: column; }

.zs-contact-console-row { border-top: 1px solid var(--zs-sand-2); }
.zs-contact-console-row:last-child { border-bottom: 1px solid var(--zs-sand-2); }

.zs-contact-console-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 6px;
  transition: padding 320ms var(--zs-ease);
}

.zs-contact-console-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--zs-charcoal-soft);
  width: 24px;
  flex-shrink: 0;
}

.zs-contact-console-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }

.zs-contact-console-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
}

.zs-contact-console-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 26px);
  color: var(--zs-charcoal);
  transition: color 260ms var(--zs-ease);
  overflow-wrap: anywhere;
}

.zs-contact-console-arrow {
  flex-shrink: 0;
  color: var(--zs-charcoal-soft);
  transform: rotate(45deg) translate(-4px, 4px);
  opacity: 0;
  transition: transform 320ms var(--zs-ease), opacity 320ms var(--zs-ease), color 260ms var(--zs-ease);
}

.zs-contact-console-line {
  position: absolute;
  left: 6px; right: 6px; bottom: 0;
  height: 1px;
  background: var(--zs-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--zs-ease);
}

.zs-contact-console-link:hover,
.zs-contact-console-link:focus-visible {
  padding-left: 18px;
}

.zs-contact-console-link:hover .zs-contact-console-value,
.zs-contact-console-link:focus-visible .zs-contact-console-value { color: var(--zs-mocha-warm); }

.zs-contact-console-link:hover .zs-contact-console-arrow,
.zs-contact-console-link:focus-visible .zs-contact-console-arrow {
  opacity: 1;
  transform: rotate(0) translate(0, 0);
  color: var(--zs-mocha-warm);
}

.zs-contact-console-link:hover .zs-contact-console-line,
.zs-contact-console-link:focus-visible .zs-contact-console-line { transform: scaleX(1); }

/* ---------------------------------------------------------
   03 — PROJECT CONFIGURATOR FORM
   --------------------------------------------------------- */

.zs-contact-form-section { padding: 100px 0 60px; }

.zs-contact-form-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}

.zs-contact-form-head { position: sticky; top: calc(var(--zs-nav-clearance) - 20px); display: flex; flex-direction: column; gap: 18px; }

.zs-contact-form-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.08;
  color: var(--zs-charcoal);
}

.zs-contact-form-intro { font-size: 16px; line-height: 1.65; color: var(--zs-charcoal-soft); max-width: 380px; }

.zs-cf-steps-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
  border-top: 1px solid var(--zs-line);
}

.zs-cf-steps-nav li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--zs-line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zs-charcoal-soft);
  opacity: 0.45;
  transition: opacity 320ms var(--zs-ease), color 320ms var(--zs-ease);
}

.zs-cf-steps-nav li.is-active,
.zs-cf-steps-nav li.is-done { opacity: 1; color: var(--zs-charcoal); }

.zs-cf-steps-nav li.is-active { color: var(--zs-mocha-warm); }

.zs-cf-steps-nav-num { font-weight: 600; color: var(--zs-gold); }

/* ---- panel shell ---- */

.zs-cf-panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--zs-line);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 44px);
  box-shadow: 0 30px 70px rgba(34, 29, 23, 0.06);
}

.zs-cf-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }

.zs-cf-progress-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
  white-space: nowrap;
}

.zs-cf-progress-track { flex: 1; height: 3px; border-radius: 999px; background: var(--zs-line); overflow: hidden; }

.zs-cf-progress-fill {
  display: block; height: 100%;
  width: 20%;
  background: var(--zs-gold);
  border-radius: 999px;
  transition: width 420ms var(--zs-ease);
}

.zs-cf-form { overflow: hidden; }

.zs-cf-steps { position: relative; }

.zs-cf-step {
  display: none;
}

.zs-cf-step.is-active {
  display: block;
  animation: zsCfStepIn 420ms var(--zs-ease);
}

.zs-cf-step.is-leaving-back { animation: zsCfStepInReverse 420ms var(--zs-ease); }

@keyframes zsCfStepIn {
  from { opacity: 0; transform: translateX(36px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes zsCfStepInReverse {
  from { opacity: 0; transform: translateX(-36px); }
  to { opacity: 1; transform: translateX(0); }
}

.zs-cf-step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--zs-charcoal);
  margin-bottom: 6px;
}

.zs-cf-step-hint { font-size: 14px; color: var(--zs-charcoal-soft); margin-bottom: 20px; }

.zs-cf-optional {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zs-charcoal-soft);
  opacity: 0.7;
  margin-left: 4px;
}

.zs-cf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; margin-top: 18px; }
.zs-cf-step-title + .zs-cf-grid2 { margin-top: 22px; }

/* ---- shared floating-label field (reused across steps) ---- */

.zs-contact-field { position: relative; border-bottom: 1px solid var(--zs-line); }

.zs-contact-field-body { position: relative; padding-top: 22px; padding-bottom: 12px; }

.zs-contact-field input,
.zs-contact-field select,
.zs-contact-field textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--zs-charcoal);
  padding: 0;
  outline: none;
  appearance: none;
  resize: none;
}

.zs-contact-field textarea { min-height: 24px; line-height: 1.5; overflow: hidden; }

.zs-contact-field label {
  position: absolute;
  left: 0; top: 22px;
  font-size: 16px;
  color: var(--zs-charcoal-soft);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 220ms var(--zs-ease), color 220ms var(--zs-ease), top 220ms var(--zs-ease);
}

.zs-contact-field input:focus + label,
.zs-contact-field input:not(:placeholder-shown) + label,
.zs-contact-field select:focus + label,
.zs-contact-field select:valid + label,
.zs-contact-field textarea:focus + label,
.zs-contact-field textarea:not(:placeholder-shown) + label,
.zs-contact-field-label--static {
  top: 0;
  transform: scale(0.76);
  color: var(--zs-mocha-warm);
}

.zs-contact-field select:required:invalid { color: var(--zs-charcoal-soft); }

.zs-contact-field-line {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: var(--zs-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--zs-ease);
}

.zs-contact-field input:focus ~ .zs-contact-field-line,
.zs-contact-field select:focus ~ .zs-contact-field-line,
.zs-contact-field textarea:focus ~ .zs-contact-field-line { transform: scaleX(1); }

.zs-contact-field-chevron {
  position: absolute; right: 2px; top: 26px;
  color: var(--zs-charcoal-soft);
  pointer-events: none;
}

.zs-contact-field-hint {
  display: block;
  font-size: 12.5px;
  color: var(--zs-charcoal-soft);
  margin-top: 8px;
  line-height: 1.5;
}

.zs-contact-field-hint a { color: var(--zs-mocha-warm); text-decoration: underline; text-underline-offset: 2px; }

.zs-contact-field--file { padding: 18px 0; border-bottom: 1px solid var(--zs-line); }
.zs-contact-field--file .zs-contact-field-label--static { position: static; display: block; font-size: 13px; margin-bottom: 8px; transform: none; }
.zs-contact-field--file input[type="file"] { font-size: 13px; color: var(--zs-charcoal-soft); }

.zs-contact-field-error {
  display: block;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 12.5px;
  color: #A9432D;
  margin-top: 6px;
  transition: max-height 260ms var(--zs-ease), opacity 260ms var(--zs-ease), margin-top 260ms var(--zs-ease);
  opacity: 0;
}

.zs-contact-field.has-error { animation: zsCfFieldShift 260ms var(--zs-ease); }
.zs-contact-field.has-error .zs-contact-field-line { background: #A9432D; transform: scaleX(1); }
.zs-contact-field.has-error .zs-contact-field-error { max-height: 40px; opacity: 1; }

@keyframes zsCfFieldShift {
  0% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.zs-contact-group-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
  margin: 28px 0 4px;
}

.zs-contact-field--select select { cursor: pointer; }

.zs-contact-field--conditional {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 360ms var(--zs-ease), opacity 300ms var(--zs-ease), margin 360ms var(--zs-ease);
}

.zs-contact-field--conditional:not([hidden]) { max-height: 120px; opacity: 1; }

.zs-contact-dims-row { display: grid; grid-template-columns: 1fr 1fr 1fr 0.8fr; gap: 0 20px; }
.zs-contact-field--dim { border-bottom: 1px solid var(--zs-line); }

.zs-contact-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--zs-charcoal-soft);
  cursor: pointer;
}

.zs-contact-checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.zs-contact-checkbox-box {
  width: 18px; height: 18px;
  border: 1px solid var(--zs-line);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 220ms var(--zs-ease), border-color 220ms var(--zs-ease), color 220ms var(--zs-ease);
}

.zs-contact-checkbox input:checked + .zs-contact-checkbox-box {
  background: var(--zs-forest);
  border-color: var(--zs-forest);
  color: var(--zs-ivory);
}

.zs-contact-checkbox input:focus-visible + .zs-contact-checkbox-box { outline: 2px solid var(--zs-mocha-warm); outline-offset: 2px; }

.zs-contact-field--nonum .zs-contact-field-body { padding-top: 20px; }

.zs-contact-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* ---- step 2: service tiles ---- */

.zs-cf-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.zs-cf-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  text-align: left;
  padding: 16px 16px 14px;
  border: 1px solid var(--zs-line);
  border-radius: 12px;
  background: var(--zs-cream);
  transition: border-color 220ms var(--zs-ease), background 220ms var(--zs-ease), transform 220ms var(--zs-ease), box-shadow 220ms var(--zs-ease);
}

.zs-cf-tile-num { font-family: var(--font-mono); font-size: 11px; color: var(--zs-charcoal-soft); transition: color 220ms var(--zs-ease); }
.zs-cf-tile-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--zs-charcoal); }
.zs-cf-tile-plus {
  position: absolute; top: 14px; right: 14px;
  font-size: 15px; color: var(--zs-charcoal-soft);
  transition: transform 220ms var(--zs-ease), color 220ms var(--zs-ease);
}

.zs-cf-tile:hover { border-color: var(--zs-mocha-warm); transform: translateY(-2px); }

.zs-cf-tile.is-selected {
  border-color: var(--zs-forest);
  background: var(--zs-forest);
  box-shadow: 0 14px 28px rgba(31, 51, 40, 0.18);
  transform: translateY(-2px);
}

.zs-cf-tile.is-selected .zs-cf-tile-num,
.zs-cf-tile.is-selected .zs-cf-tile-name { color: var(--zs-ivory); }
.zs-cf-tile.is-selected .zs-cf-tile-plus { color: var(--zs-gold); transform: rotate(45deg); }

#cf-categories-error { display: block; font-size: 12.5px; color: #A9432D; margin-top: 10px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 260ms var(--zs-ease), opacity 260ms var(--zs-ease); }
.zs-cf-tiles.has-error ~ #cf-categories-error { max-height: 30px; opacity: 1; }

/* ---- step 3: structure selector ---- */

.zs-cf-structure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.zs-cf-structure-item {
  padding: 11px 18px;
  border: 1px solid var(--zs-line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--zs-charcoal-soft);
  background: var(--zs-cream);
  transition: transform 220ms var(--zs-ease), border-color 220ms var(--zs-ease), background 220ms var(--zs-ease), color 220ms var(--zs-ease);
}

.zs-cf-structure-item:hover { border-color: var(--zs-mocha-warm); color: var(--zs-charcoal); }

.zs-cf-structure-item.is-selected {
  background: var(--zs-gold);
  border-color: var(--zs-gold);
  color: #211A14;
  transform: translateY(-2px) scale(1.03);
}

/* ---- step 5: message + counter ---- */

.zs-cf-message { position: relative; margin-bottom: 22px; }

.zs-cf-message-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
  margin-bottom: 10px;
}

.zs-cf-message textarea {
  width: 100%;
  min-height: 150px;
  border: 1px solid var(--zs-line);
  border-radius: 14px;
  padding: 18px;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--zs-charcoal);
  background: var(--zs-cream);
  resize: vertical;
  outline: none;
  transition: border-color 220ms var(--zs-ease);
}

.zs-cf-message textarea:focus { border-color: var(--zs-gold); }

.zs-cf-message-count {
  position: absolute;
  right: 14px; bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--zs-charcoal-soft);
}

/* ---- step navigation ---- */

.zs-cf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--zs-line);
}

.zs-cf-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--zs-charcoal);
  transition: opacity 220ms var(--zs-ease), transform 220ms var(--zs-ease);
}

.zs-cf-nav-back:hover:not(:disabled) { transform: translateX(-3px); }
.zs-cf-nav-back:disabled { opacity: 0.3; cursor: default; }

.zs-cf-nav-continue,
.zs-cf-nav-submit {
  margin-left: auto;
  position: relative;
  min-width: 168px;
}

.zs-cf-nav-continue[hidden],
.zs-cf-nav-submit[hidden] { display: none; }

.zs-cf-nav-continue svg { transition: transform 220ms var(--zs-ease); }
.zs-cf-nav-continue:hover svg { transform: translateX(4px); }

.zs-cf-nav-submit-spinner {
  display: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(244, 240, 231, 0.35);
  border-top-color: var(--zs-ivory);
  animation: zsCfSpin 700ms linear infinite;
}

@keyframes zsCfSpin { to { transform: rotate(360deg); } }

.zs-cf-nav-submit.is-submitting { pointer-events: none; opacity: 0.85; }
.zs-cf-nav-submit.is-submitting .zs-cf-nav-submit-spinner { display: inline-block; }
.zs-cf-nav-submit.is-submitting svg { display: none; }

.zs-contact-form-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--zs-charcoal-soft);
  margin-top: 18px;
}

/* ---- form-level error state ---- */

.zs-cf-form-error {
  text-align: center;
  padding: 30px 10px 10px;
  animation: zsCfFadeUp 420ms var(--zs-ease);
}

.zs-cf-form-error-icon {
  display: inline-flex;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid #A9432D;
  margin-bottom: 18px;
  position: relative;
}

.zs-cf-form-error-icon::before,
.zs-cf-form-error-icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 16px;
  background: #A9432D;
}

.zs-cf-form-error-icon::before { transform: translate(-50%, -85%); }
.zs-cf-form-error-icon::after { width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, 40%); }

.zs-cf-form-error-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--zs-charcoal);
  margin-bottom: 10px;
}

.zs-cf-form-error-desc { font-size: 14.5px; color: var(--zs-charcoal-soft); max-width: 380px; margin: 0 auto 24px; line-height: 1.6; }

.zs-cf-form-error-actions { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }

/* ---- success state ---- */

.zs-cf-success { text-align: center; padding: 30px 10px 10px; animation: zsCfFadeUp 480ms var(--zs-ease); }

.zs-cf-success-mark {
  display: inline-flex;
  width: 60px; height: 60px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--zs-forest);
  margin-bottom: 20px;
}

.zs-cf-success-mark svg circle { stroke-dasharray: 88; stroke-dashoffset: 88; animation: zsCfCircle 620ms var(--zs-ease) forwards; }
.zs-cf-success-mark svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: zsCfCheck 420ms var(--zs-ease) 560ms forwards; }

@keyframes zsCfCircle { to { stroke-dashoffset: 0; } }
@keyframes zsCfCheck { to { stroke-dashoffset: 0; } }

.zs-cf-success-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  color: var(--zs-charcoal);
  margin-bottom: 12px;
}

.zs-cf-success-desc { font-size: 15px; color: var(--zs-charcoal-soft); max-width: 420px; margin: 0 auto 28px; line-height: 1.65; }

.zs-cf-success-actions { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }

@keyframes zsCfFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .zs-cf-step.is-active,
  .zs-cf-step.is-leaving-back,
  .zs-cf-form-error,
  .zs-cf-success { animation: none; }
  .zs-cf-success-mark svg circle,
  .zs-cf-success-mark svg path { animation: none; stroke-dashoffset: 0; }
  .zs-contact-field.has-error { animation: none; }
}

/* ---------------------------------------------------------
   04 — WHAT HAPPENS NEXT (process)
   --------------------------------------------------------- */

.zs-contact-process { padding: 110px 0; background: var(--zs-forest); color: var(--zs-ivory); }

.zs-contact-process-head { margin-bottom: 56px; max-width: 560px; }
.zs-contact-process .zs-eyebrow { color: var(--zs-gold); }
.zs-contact-process .zs-eyebrow::before { background: var(--zs-gold); }
.zs-contact-process-heading { color: var(--zs-ivory); margin-top: 12px; }

.zs-contact-process-track { position: relative; }

.zs-contact-process-line {
  position: absolute;
  top: 12px; left: 0; right: 0;
  height: 1px;
  background: rgba(244, 240, 231, 0.16);
}

.zs-contact-process-line-fill {
  display: block; height: 100%; width: 0%;
  background: var(--zs-gold);
  transition: width 1400ms var(--zs-ease);
}

.zs-contact-process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.zs-contact-process-step { position: relative; padding-top: 34px; opacity: 0.4; transition: opacity 420ms var(--zs-ease); }
.zs-contact-process-step.is-active { opacity: 1; }

.zs-contact-process-dot {
  position: absolute;
  top: 8px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(244, 240, 231, 0.3);
  transition: background 320ms var(--zs-ease), box-shadow 320ms var(--zs-ease);
}

.zs-contact-process-step.is-active .zs-contact-process-dot { background: var(--zs-gold); box-shadow: 0 0 0 4px rgba(201, 166, 107, 0.2); }

.zs-contact-process-num { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--zs-gold); margin-bottom: 10px; }
.zs-contact-process-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-bottom: 8px; }
.zs-contact-process-desc { font-size: 13.5px; line-height: 1.6; color: rgba(244, 240, 231, 0.7); }

/* ---------------------------------------------------------
   05 — PREFER TO TALK DIRECTLY
   --------------------------------------------------------- */

.zs-contact-direct { padding: 100px 0; }

.zs-contact-direct-heading { color: var(--zs-charcoal); margin-bottom: 30px; }

.zs-contact-direct-list { border-top: 1px solid var(--zs-line); }

.zs-contact-direct-item { border-bottom: 1px solid var(--zs-line); }

.zs-contact-direct-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px 4px;
}

.zs-contact-direct-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
  width: 120px;
  flex-shrink: 0;
}

.zs-contact-direct-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--zs-charcoal);
  transition: color 260ms var(--zs-ease);
}

.zs-contact-direct-rule {
  flex: 1;
  height: 1px;
  background: var(--zs-line);
  position: relative;
  overflow: hidden;
}

.zs-contact-direct-rule::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--zs-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--zs-ease);
}

.zs-contact-direct-arrow {
  flex-shrink: 0;
  color: var(--zs-charcoal-soft);
  transition: transform 320ms var(--zs-ease), color 260ms var(--zs-ease);
}

.zs-contact-direct-link:hover .zs-contact-direct-value,
.zs-contact-direct-link:focus-visible .zs-contact-direct-value { color: var(--zs-mocha-warm); }

.zs-contact-direct-link:hover .zs-contact-direct-rule::after,
.zs-contact-direct-link:focus-visible .zs-contact-direct-rule::after { transform: scaleX(1); }

.zs-contact-direct-link:hover .zs-contact-direct-arrow,
.zs-contact-direct-link:focus-visible .zs-contact-direct-arrow {
  transform: translate(4px, -4px);
  color: var(--zs-mocha-warm);
}

/* ---------------------------------------------------------
   06 — STUDIO LOCATION / MAP
   --------------------------------------------------------- */

.zs-contact-map { padding: 0 0 110px; }

.zs-contact-map-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 50px;
  align-items: stretch;
}

.zs-contact-map-info { display: flex; flex-direction: column; gap: 6px; align-self: center; }

.zs-contact-map-heading { color: var(--zs-charcoal); margin: 10px 0 16px; }

.zs-contact-map-address { font-size: 15px; line-height: 1.6; color: var(--zs-charcoal-soft); margin-bottom: 14px; }

.zs-contact-map-detail {
  font-size: 15px;
  font-weight: 600;
  color: var(--zs-charcoal);
  padding: 4px 0;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--zs-ease), color 220ms var(--zs-ease);
}

.zs-contact-map-detail:hover { color: var(--zs-mocha-warm); border-color: var(--zs-gold-line); }

.zs-contact-map-link { margin-top: 14px; }

.zs-contact-map-panel {
  position: relative;
  min-height: 380px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--zs-line);
}

.zs-contact-map-panel iframe { display: block; width: 100%; height: 100%; min-height: 380px; filter: grayscale(0.25) contrast(1.02); }

.zs-contact-map-mask {
  position: absolute; inset: 0;
  background: var(--zs-sand);
  transform-origin: left;
  z-index: 1;
  pointer-events: none;
  animation: zsContactMapMask 900ms var(--zs-ease) forwards;
  animation-play-state: paused;
}

.zs-contact-map-panel.is-in .zs-contact-map-mask { animation-play-state: running; }

@keyframes zsContactMapMask { to { transform: scaleX(0); } }

/* ---------------------------------------------------------
   07 — FINAL CTA
   --------------------------------------------------------- */

.zs-contact-cta {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.zs-contact-cta-media { position: absolute; inset: 0; }
.zs-contact-cta-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }

.zs-contact-cta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20, 35, 29, 0.92) 0%, rgba(20, 35, 29, 0.72) 46%, rgba(20, 35, 29, 0.34) 100%);
}

.zs-contact-cta-mask {
  position: absolute; inset: 0;
  background: var(--zs-cream);
  transform-origin: bottom;
}

.zs-contact-cta-inner { position: relative; max-width: 640px; }

.zs-contact-cta-eyebrow { color: var(--zs-gold); }
.zs-contact-cta-eyebrow::before { background: var(--zs-gold); }

.zs-contact-cta-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.03;
  color: var(--zs-ivory);
  margin: 14px 0 18px;
}

.zs-contact-cta-sub { font-size: 16px; color: rgba(244, 240, 231, 0.78); max-width: 420px; margin-bottom: 30px; }

.zs-contact-cta-actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }

.zs-contact-cta-link { color: var(--zs-ivory); }
.zs-contact-cta-link::after { background: var(--zs-ivory); }

/* ---------------------------------------------------------
   REDUCED MOTION (page-wide safety net)
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .zs-contact-cta-media img { transform: none; }
  .zs-contact-process-line-fill { transition: none; }
  .zs-contact-process-step { opacity: 1; }
}


/* =========================================================
   Z&S FAQ PAGE
   Namespace: zs-faq-*  (scoped under <main class="zs-faq">)
   ========================================================= */

.zs-faq { background: var(--zs-cream); }

/* ---------------------------------------------------------
   FAQ — HERO
   --------------------------------------------------------- */

.zs-faq-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--zs-nav-clearance) + 26px) 0 64px;
  border-bottom: 1px solid var(--zs-line);
  background:
    radial-gradient(760px 420px at 6% -20%, rgba(201, 166, 107, 0.13), transparent 62%),
    var(--zs-cream);
}

.zs-faq-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--zs-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--zs-line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 78%);
  opacity: 0.6;
}

.zs-faq-hero-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: 0.4;
  pointer-events: none;
}

.zs-faq-hero-corner::before,
.zs-faq-hero-corner::after {
  content: "";
  position: absolute;
  background: var(--zs-mocha-warm);
}

.zs-faq-hero-corner::before { top: 0; left: 0; width: 100%; height: 1px; }
.zs-faq-hero-corner::after { top: 0; left: 0; width: 1px; height: 100%; }

.zs-faq-hero-corner--tl { top: 26px; left: var(--zs-gutter); }

.zs-faq-hero-corner--br {
  bottom: 26px;
  right: var(--zs-gutter);
  transform: rotate(180deg);
}

.zs-faq-hero-inner { position: relative; z-index: 1; }

.zs-faq-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--zs-ease), transform 700ms var(--zs-ease);
}

.zs-faq-hero-top.is-in { opacity: 1; transform: translateY(0); }

.zs-faq-hero-count {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--zs-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--zs-charcoal-soft);
}

.zs-faq-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.06;
  font-size: clamp(38px, 5.6vw, 70px);
  text-transform: uppercase;
  color: var(--zs-charcoal);
  max-width: 760px;

  opacity: 0;
  transform: translateY(18px);
  transition: opacity 780ms var(--zs-ease), transform 780ms var(--zs-ease);
  transition-delay: var(--d, 0ms);
}

.zs-faq-hero-title.is-in { opacity: 1; transform: translateY(0); }

.zs-faq-hero-title em {
  font-style: normal;
  color: var(--zs-mocha-warm);
}

.zs-faq-hero-desc {
  margin-top: 22px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--zs-charcoal-soft);
  max-width: 460px;

  opacity: 0;
  transform: translateY(18px);
  transition: opacity 780ms var(--zs-ease), transform 780ms var(--zs-ease);
  transition-delay: var(--d, 0ms);
}

.zs-faq-hero-desc.is-in { opacity: 1; transform: translateY(0); }

/* ---- floating question fragments — layered knowledge space ---- */
.zs-faq-hero-fragments {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.zs-faq-fragment {
  position: absolute;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--zs-charcoal-soft);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--zs-line);
  padding: 8px 14px;
  border-radius: 999px;
  max-width: 230px;
  cursor: pointer;
  opacity: 0;
  animation: zsFaqFragmentIn 900ms var(--zs-ease) forwards;
  transition: transform 280ms var(--zs-ease), border-color 280ms var(--zs-ease), color 280ms var(--zs-ease), background 280ms var(--zs-ease);
  will-change: transform;
}

.zs-faq-fragment:hover,
.zs-faq-fragment:focus-visible {
  color: var(--zs-charcoal);
  border-color: var(--zs-gold);
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}

.zs-faq-fragment:focus-visible { outline: 2px solid var(--zs-gold); outline-offset: 2px; }

@keyframes zsFaqFragmentIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 0.85; transform: translateY(0); }
}

.zs-faq-fragment-a { top: 8%;  right: 6%;  animation-delay: 300ms; }
.zs-faq-fragment-b { top: 26%; right: 24%; animation-delay: 440ms; }
.zs-faq-fragment-e { top: 44%; right: 4%;  animation-delay: 580ms; }
.zs-faq-fragment-c { top: 60%; right: 22%; animation-delay: 720ms; }
.zs-faq-fragment-f { top: 76%; right: 3%;  animation-delay: 860ms; }
.zs-faq-fragment-d { top: 90%; right: 22%; animation-delay: 1000ms; }

@media (max-width: 1080px) {
  .zs-faq-hero-fragments { display: none; }
}

.zs-faq-q-text mark { background: rgba(201, 166, 107, 0.35); color: inherit; border-radius: 2px; }

/* ---------------------------------------------------------
   FAQ — START HERE (featured questions)
   --------------------------------------------------------- */

.zs-faq-start { padding: 8px 0 74px; }

.zs-faq-start-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 18px;
}

.zs-faq-start-card {
  all: unset;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  min-height: 168px;
  padding: 26px 24px;
  background: var(--zs-ivory);
  border: 1px solid var(--zs-line);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 280ms var(--zs-ease), border-color 280ms var(--zs-ease), box-shadow 280ms var(--zs-ease);
}

.zs-faq-start-card--lg { grid-row: span 1; min-height: 168px; }

.zs-faq-start-card:hover,
.zs-faq-start-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--zs-gold);
  box-shadow: 0 20px 40px -22px rgba(20, 24, 21, 0.22);
}

.zs-faq-start-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--zs-mocha-warm);
  transition: font-size 280ms var(--zs-ease);
}

.zs-faq-start-card:hover .zs-faq-start-num { font-size: 15px; }

.zs-faq-start-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.28;
  color: var(--zs-charcoal);
  text-transform: uppercase;
}

.zs-faq-start-card--lg .zs-faq-start-q { font-size: clamp(20px, 2vw, 27px); max-width: 90%; }

.zs-faq-start-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zs-charcoal-soft);
}

.zs-faq-start-explore span {
  display: inline-block;
  transition: transform 280ms var(--zs-ease);
}

.zs-faq-start-card:hover .zs-faq-start-explore span { transform: translateX(4px); }

.zs-faq-start-card:focus-visible { outline: 2px solid var(--zs-gold); outline-offset: 2px; }

/* jump-target flash — draws the eye to the answer the card opened */
.zs-faq-item.is-jumped { animation: zsFaqJumpFlash 1400ms var(--zs-ease); }

@keyframes zsFaqJumpFlash {
  0%   { background: rgba(201, 166, 107, 0.16); }
  100% { background: transparent; }
}

/* ---------------------------------------------------------
   FAQ — MAIN (NAV + PANEL)
   --------------------------------------------------------- */



.zs-faq-main { padding: 64px 0 100px; }

.zs-faq-main-inner {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

.zs-faq-nav {
  position: sticky;
  top: calc(var(--zs-nav-clearance) + 24px);
}

.zs-faq-nav-list {
  position: relative;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--zs-line);
}

.zs-faq-nav-indicator {
  position: absolute;
  left: -1px;
  width: 2px;
  top: var(--ind-y, 0px);
  height: var(--ind-h, 0px);
  background: var(--zs-gold);
  transition: top 380ms var(--zs-ease), height 380ms var(--zs-ease);
}

.zs-faq-nav-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 0 14px 22px;
  background: none;
  border: none;
  text-align: left;
  color: var(--zs-charcoal-soft);
  cursor: pointer;
  transition: color 220ms var(--zs-ease);
}

.zs-faq-nav-btn:hover { color: var(--zs-charcoal); }
.zs-faq-nav-btn.is-active { color: var(--zs-charcoal); }

.zs-faq-nav-btn:focus-visible {
  outline: 2px solid var(--zs-mocha-warm);
  outline-offset: 2px;
}

.zs-faq-nav-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--zs-mocha-warm);
  transition: color 220ms var(--zs-ease);
  flex-shrink: 0;
}

.zs-faq-nav-btn.is-active .zs-faq-nav-num { color: var(--zs-charcoal); }

.zs-faq-nav-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.3;
}

.zs-faq-panel { min-width: 0; }

.zs-faq-panel-head {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--zs-line);
}

.zs-faq-panel-kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 28px);
  text-transform: uppercase;
  color: var(--zs-charcoal);
  margin-bottom: 8px;
}

.zs-faq-panel-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
}

.zs-faq-list { position: relative; }

.zs-faq-group { display: none; }
.zs-faq-group.is-active { display: block; }

/* group headers only make sense when several categories are visible at once */
.zs-faq-group-title {
  display: none;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
  padding-top: 34px;
}

.zs-faq-group:first-child .zs-faq-group-title { padding-top: 0; }

.zs-faq-list.is-all-mode .zs-faq-group-title { display: flex; }

.zs-faq-group-title-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--zs-mocha-warm);
}

.zs-faq-group-title-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zs-charcoal-soft);
}

.zs-faq-group.is-entering {
  animation: zsFaqGroupIn 420ms var(--zs-ease) forwards;
}

@keyframes zsFaqGroupIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.zs-faq-item {
  border-bottom: 1px solid var(--zs-line);
  transition: opacity 320ms var(--zs-ease);
}

.zs-faq-item:first-child { border-top: 1px solid var(--zs-line); }

.zs-faq-group.has-open .zs-faq-item:not(.is-open) { opacity: 0.42; }

.zs-faq-q {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 22px 4px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.zs-faq-q:focus-visible {
  outline: 2px solid var(--zs-mocha-warm);
  outline-offset: -2px;
  border-radius: 4px;
}

.zs-faq-q-num {
  flex-shrink: 0;
  width: 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--zs-mocha-warm);
  transition: color 220ms var(--zs-ease);
}

.zs-faq-q-text {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(16.5px, 1.7vw, 20px);
  line-height: 1.32;
  color: var(--zs-charcoal);
  transition: color 220ms var(--zs-ease);
}

.zs-faq-q:hover .zs-faq-q-text { color: var(--zs-mocha-warm); }

.zs-faq-item.is-open .zs-faq-q-num,
.zs-faq-item.is-open .zs-faq-q-text { color: var(--zs-mocha-warm); }

.zs-faq-q-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 320ms var(--zs-ease);
}

.zs-faq-q-icon::before,
.zs-faq-q-icon::after {
  content: "";
  position: absolute;
  background: var(--zs-charcoal-soft);
}

.zs-faq-q-icon::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.zs-faq-q-icon::after { top: 0; left: 50%; width: 1.5px; height: 100%; transform: translateX(-50%); }

.zs-faq-item.is-open .zs-faq-q-icon { transform: rotate(45deg); }

.zs-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--zs-ease);
}

.zs-faq-item.is-open .zs-faq-a { grid-template-rows: 1fr; }

.zs-faq-a-inner { overflow: hidden; }

.zs-faq-a-inner p {
  padding: 0 4px 26px 46px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--zs-charcoal-soft);
  max-width: 640px;
}

.zs-faq-a-inner a {
  color: var(--zs-mocha-warm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- related questions — curated links between existing FAQ entries ---- */
.zs-faq-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 4px 4px 26px 46px;
  padding-top: 16px;
  max-width: 640px;
  border-top: 1px solid var(--zs-line-soft);
}

.zs-faq-related-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
  margin-right: 2px;
}

.zs-faq-related-link {
  all: unset;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--zs-charcoal-soft);
  background: var(--zs-sand);
  border: 1px solid var(--zs-line);
  border-radius: 999px;
  padding: 6px 13px;
  transition: color 220ms var(--zs-ease), border-color 220ms var(--zs-ease), background 220ms var(--zs-ease);
}

.zs-faq-related-link:hover,
.zs-faq-related-link:focus-visible {
  color: var(--zs-charcoal);
  border-color: var(--zs-gold);
  background: var(--zs-ivory);
}

.zs-faq-related-link:focus-visible { outline: 2px solid var(--zs-mocha-warm); outline-offset: 2px; }

/* ---- "question to question" — injected by JS after each answer ---- */
.zs-faq-next {
  margin: 4px 4px 26px 46px;
  padding-top: 16px;
  border-top: 1px solid var(--zs-line-soft);
  max-width: 640px;
}

.zs-faq-next-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zs-mocha-warm);
  margin-bottom: 6px;
}

.zs-faq-next-btn {
  all: unset;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--zs-charcoal);
  transition: color 220ms var(--zs-ease);
}

.zs-faq-next-btn span:last-child { transition: transform 220ms var(--zs-ease); }
.zs-faq-next-btn:hover { color: var(--zs-mocha-warm); }
.zs-faq-next-btn:hover span:last-child { transform: translateX(4px); }
.zs-faq-next-btn:focus-visible { outline: 2px solid var(--zs-mocha-warm); outline-offset: 3px; }

/* ---------------------------------------------------------
   FAQ — FLOATING INDEX (catalogue-style indicator)
   --------------------------------------------------------- */

.zs-faq-float-index {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  background: rgba(20, 24, 21, 0.88);
  border: 1px solid rgba(244, 240, 231, 0.15);
  border-radius: 999px;
  color: var(--zs-ivory);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms var(--zs-ease), transform 320ms var(--zs-ease);
  pointer-events: none;
}

.zs-faq-float-index.is-visible { opacity: 1; transform: translateY(0); }

.zs-faq-float-index-cat { color: var(--zs-gold-hover); }
.zs-faq-float-index-count { color: rgba(244, 240, 231, 0.6); }

@media (max-width: 640px) { .zs-faq-float-index { display: none; } }

/* ---------------------------------------------------------
   FAQ — KNOWLEDGE MAP (browse by topic group)
   --------------------------------------------------------- */

.zs-faq-map { padding: 84px 0 96px; background: var(--zs-sand); border-top: 1px solid var(--zs-line); border-bottom: 1px solid var(--zs-line); }
.zs-faq-map h2 { margin-top: 14px; font-size: clamp(26px, 3vw, 38px); }
.zs-faq-map-intro { margin-top: 16px; max-width: 480px; font-size: 15.5px; line-height: 1.7; color: var(--zs-charcoal-soft); }

.zs-faq-map-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.zs-faq-map-branch {
  position: relative;
  padding-left: 20px;
  border-left: 1px solid var(--zs-gold-line);
}

.zs-faq-map-branch-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--zs-charcoal);
  margin-bottom: 18px;
}

.zs-faq-map-leaves { display: flex; flex-direction: column; gap: 2px; }

.zs-faq-map-leaf {
  all: unset;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  padding: 9px 0 9px 18px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--zs-charcoal-soft);
  transition: color 220ms var(--zs-ease), padding-left 220ms var(--zs-ease);
}

.zs-faq-map-leaf::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 1px;
  background: var(--zs-gold-line);
  transition: width 220ms var(--zs-ease), background 220ms var(--zs-ease);
}

.zs-faq-map-leaf-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--zs-mocha-warm);
  flex-shrink: 0;
}

.zs-faq-map-leaf:hover,
.zs-faq-map-leaf:focus-visible {
  color: var(--zs-charcoal);
  padding-left: 22px;
}

.zs-faq-map-leaf:hover::before,
.zs-faq-map-leaf:focus-visible::before {
  width: 15px;
  background: var(--zs-gold);
}

.zs-faq-map-leaf:focus-visible { outline: 2px solid var(--zs-mocha-warm); outline-offset: 2px; }

/* ---------------------------------------------------------
   FAQ — UNDERSTANDING PACKAGING (visual break)
   --------------------------------------------------------- */

.zs-faq-visual { padding: 90px 0; background: var(--zs-sand); border-top: 1px solid var(--zs-line); border-bottom: 1px solid var(--zs-line); }

.zs-faq-visual-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.zs-faq-visual-copy h2 { margin-top: 14px; font-size: clamp(26px, 3vw, 38px); }
.zs-faq-visual-copy p { margin-top: 16px; font-size: 15.5px; line-height: 1.75; color: var(--zs-charcoal-soft); max-width: 420px; }

.zs-faq-visual-frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3.2;

  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 800ms var(--zs-ease), transform 800ms var(--zs-ease);
}

.zs-faq-visual-frame.is-in { opacity: 1; transform: translateY(0) scale(1); }

.zs-faq-visual-frame img { width: 100%; height: 100%; object-fit: cover; }

.zs-faq-visual-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zs-charcoal);
  background: rgba(250, 247, 240, 0.92);
  border: 1px solid var(--zs-line);
  padding: 6px 12px;
  border-radius: 999px;

  opacity: 0;
  transition: opacity 500ms var(--zs-ease), transform 500ms var(--zs-ease);
}

.zs-faq-visual-frame.is-in .zs-faq-visual-label { opacity: 1; }

.zs-faq-visual-label--top    { top: 16px; left: 16px;  transform: translateY(-8px); transition-delay: 300ms; }
.zs-faq-visual-label--right  { top: 46%;  right: 16px; transform: translateX(8px);  transition-delay: 460ms; }
.zs-faq-visual-label--bottom { bottom: 16px; left: 16px; transform: translateY(8px); transition-delay: 620ms; }

.zs-faq-visual-frame.is-in .zs-faq-visual-label--top,
.zs-faq-visual-frame.is-in .zs-faq-visual-label--right,
.zs-faq-visual-frame.is-in .zs-faq-visual-label--bottom { transform: translate(0, 0); }

/* ---------------------------------------------------------
   FAQ — HOW IT WORKS (process)
   --------------------------------------------------------- */

.zs-faq-process { padding: 92px 0; }
.zs-faq-process h2 { margin-top: 14px; font-size: clamp(26px, 3vw, 38px); }

.zs-faq-process-track {
  position: relative;
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.zs-faq-process-line {
  position: absolute;
  top: 11px;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--zs-line);
}

.zs-faq-process-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--zs-gold);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1400ms var(--zs-ease);
}

.zs-faq-process-track.is-in .zs-faq-process-line::after { transform: scaleX(1); }

.zs-faq-process-step {
  position: relative;
  padding-top: 34px;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--zs-ease), transform 600ms var(--zs-ease);
}

.zs-faq-process-track.is-in .zs-faq-process-step { opacity: 1; transform: translateY(0); }
.zs-faq-process-track.is-in .zs-faq-process-step:nth-child(2) { transition-delay: 160ms; }
.zs-faq-process-track.is-in .zs-faq-process-step:nth-child(3) { transition-delay: 320ms; }
.zs-faq-process-track.is-in .zs-faq-process-step:nth-child(4) { transition-delay: 480ms; }
.zs-faq-process-track.is-in .zs-faq-process-step:nth-child(5) { transition-delay: 640ms; }

.zs-faq-process-step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--zs-cream);
  border: 2px solid var(--zs-gold);
}

.zs-faq-process-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--zs-mocha-warm);
  margin-bottom: 8px;
}

.zs-faq-process-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  color: var(--zs-charcoal);
  margin-bottom: 8px;
}

.zs-faq-process-step p { font-size: 13.5px; line-height: 1.6; color: var(--zs-charcoal-soft); }

.zs-faq-process-source { margin-top: 40px; font-size: 13px; color: var(--zs-charcoal-soft); }

.zs-faq-process-link {
  all: unset;
  cursor: pointer;
  color: var(--zs-mocha-warm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   FAQ — SUPPORT / CTA
   --------------------------------------------------------- */

.zs-faq-cta {
  padding: 90px 0;
  text-align: center;
  background: var(--zs-sand);
  border-top: 1px solid var(--zs-line);
}

.zs-faq-cta-inner {
  max-width: 560px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 780ms var(--zs-ease), transform 780ms var(--zs-ease);
}

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

.zs-faq-cta-title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.1;
  font-size: clamp(28px, 3.6vw, 42px);
  text-transform: uppercase;
  color: var(--zs-charcoal);
}

.zs-faq-cta-desc {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--zs-charcoal-soft);
}

.zs-faq-cta .zs-btn { margin-top: 30px; }

@media (prefers-reduced-motion: reduce) {
  .zs-faq-hero-top,
  .zs-faq-hero-title,
  .zs-faq-hero-desc,
  .zs-faq-cta-inner { opacity: 1; transform: none; transition: none; }

  .zs-faq-map-leaf,
  .zs-faq-map-leaf::before,
  .zs-faq-related-link { transition: none; }

  .zs-faq-fragment { animation: none !important; opacity: 0.85; transform: none !important; transition: none !important; }
  .zs-faq-start-card,
  .zs-faq-start-num,
  .zs-faq-start-explore span { transition: none; }
  .zs-faq-visual-frame,
  .zs-faq-visual-label,
  .zs-faq-process-line::after,
  .zs-faq-process-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .zs-faq-process-line::after { transform: scaleX(1) !important; }
  .zs-faq-float-index { transition: none; }

  .zs-faq-group.is-entering { animation: none; }
  .zs-faq-nav-indicator { transition: none; }
  .zs-faq-a { transition: none; }
  .zs-faq-q-icon { transition: none; }
  .zs-faq-item { transition: none; }
}