/* Zionic: manipula tour + body-effects illustration (blocks are divs, not sections:
   custom.css restyles every <section> with id-weighted :not() chains and !important).
   The long prefix "html body.template-zionic div.zs:not(#zs-n)" only outranks those rules. */

.zs {
  --ink: #15191c;
  --muted: #5b6469;
  --line: #d6dddd;
  --teal: #0a7c86;
  --cyan: #6dfcff;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 10; /* site sections slide over the sticky hero with z-index 10 */
  font-family: 'Inter', sans-serif;
}
.zs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.zs-wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }

html body.template-zionic div.zs:not(#zs-n) h2,
html body.template-zionic div.zs:not(#zs-n) h3 {
  font-family: 'Montserrat', sans-serif !important;
  text-transform: none !important;
  text-wrap: balance;
  margin: 0 !important;
}
html body.template-zionic div.zs:not(#zs-n) .zs-h2 {
  font-size: clamp(28px, 3.2vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
  max-width: 26ch;
  margin-inline: auto !important;
}
.zs-sub { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 66ch; margin: 18px auto 0; text-wrap: pretty; }

/* =========================== MANIPULA TOUR =========================== */
.zt { --hdr: 84px; background: #1b1c1e !important; color: #eef1f1; height: 720vh; }
.zt__pin {
  position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); overflow: hidden;
  display: grid; grid-template-columns: 1.2fr 1fr; align-items: center;
  /* soft studio light behind the device */
  background: radial-gradient(ellipse 46% 62% at 32% 52%, #3a3b3e 0%, #262729 52%, #1b1c1e 100%);
}
.zt__stage { position: relative; height: 100%; }
.zt__device, .zt__top { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.zt__device {
  height: min(74vh, 44vw); aspect-ratio: 1262 / 1248;
  /* move focal point (u,v) to the stage centre and scale around it; --out flies it away */
  transform: translate(-50%, -50%)
    translate(calc(var(--s, .92) * (.5 - var(--u, .5)) * 100%), calc(var(--s, .92) * (.5 - var(--v, .5)) * 100%))
    scale(var(--s, .92))
    translate(calc(var(--out, 0) * -42%), calc(var(--out, 0) * -18%))
    rotate(calc(var(--out, 0) * -22deg))
    scale(calc(1 - var(--out, 0) * .45));
  opacity: calc(1 - var(--out, 0) * 1.15);
  filter: blur(calc(var(--out, 0) * 8px));
}
.zt__side { width: 100%; height: 100%; transform: scaleX(-1); display: block; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .45)); }
/* top view: rises from lower left and turns into place while the side photo leaves */
.zt__top {
  height: min(58vh, 460px); width: auto;
  transform: translate(-50%, -50%) translate(14%, 20%)
    translate(calc((1 - var(--in, 0)) * -30%), calc((1 - var(--in, 0)) * 70%))
    rotate(calc((1 - var(--in, 0)) * -26deg))
    scale(calc(.45 + var(--in, 0) * .55));
  opacity: var(--in, 0);
  filter: blur(calc((1 - var(--in, 0)) * 10px)) drop-shadow(0 40px 60px rgba(0, 0, 0, .45));
}
/* lens marker sits at the stage centre, where the current focal point lands */
html body.template-zionic div.zs:not(#zs-n) .zt__focus { border-radius: 50% !important; }
.zt__focus {
  position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border: 1px solid rgba(109, 252, 255, .75);
  box-shadow: 0 0 0 1px rgba(109, 252, 255, .08), inset 0 0 40px rgba(109, 252, 255, .08);
  opacity: var(--ring, 0); transform: scale(calc(.85 + var(--ring, 0) * .15));
  pointer-events: none;
}
.zt__focus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--cyan); }

.zt__copy { position: relative; padding: 0 clamp(24px, 5vw, 96px) 0 0; max-width: 640px; }
html body.template-zionic div.zs:not(#zs-n) .zt__title {
  font-size: clamp(34px, 3.4vw, 58px) !important; font-weight: 700 !important; line-height: 1.02 !important;
  letter-spacing: -0.04em !important; color: #f4f6f6 !important;
}
.zt__steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; }
.zt__step { grid-area: 1 / 1; opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .9s var(--ease); pointer-events: none; }
.zt__step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.zt__step--intro p { font-size: clamp(18px, 1.45vw, 22px) !important; max-width: 34ch; }
html body.template-zionic div.zs:not(#zs-n) .zt__step h3 {
  font-size: clamp(28px, 2.6vw, 42px) !important; font-weight: 600 !important; letter-spacing: -0.03em !important;
  line-height: 1.1 !important; color: #f4f6f6 !important; margin-bottom: 18px !important;
}
.zt__step p { margin: 0 0 8px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: rgba(238, 241, 241, .78); }

/* author icons: thin cyan line, drawn in when their step becomes active */
.zt__icon { display: block; width: 60px; height: 60px; margin-bottom: 22px; fill: none; stroke: var(--cyan);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.zt symbol * { stroke-dasharray: 140; stroke-dashoffset: calc(var(--d, 0) * 140); transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.zt__step:not(.is-active) .zt__icon { --d: 1; }
/* icon sits on the heading's line; the rest of the step runs full width below */
.zt__step:not(.zt__step--intro) { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; align-content: start; }
.zt__step > * { grid-column: 1 / -1; }
.zt__step > .zt__icon { grid-column: 1; width: 52px; height: 52px; margin: 0; }
.zt__step > h3 { grid-column: 2; }
html body.template-zionic div.zs:not(#zs-n) .zt__step > h3 { margin-bottom: 0 !important; }
.zt__step > h3 + * { margin-top: 18px; }

.zt__figs { display: flex; gap: 44px; margin: 8px 0 18px; }
.zt__figs dt { font: 600 clamp(56px, 5vw, 84px)/1 'Montserrat', sans-serif; letter-spacing: -0.05em; color: var(--cyan); }
.zt__figs dd { margin: 10px 0 0; font-size: clamp(15px, 1.15vw, 18px); color: rgba(238, 241, 241, .78); }
.zt__nozzles { display: flex; align-items: flex-end; gap: 32px; margin-top: 22px; }
.zt__nozzles figure { margin: 0; text-align: center; }
.zt__nozzles img { display: block; margin-inline: auto; height: auto; }
.zt__nozzles figure:first-child img { width: 120px; }
.zt__nozzles figure:last-child img { width: 76px; }
.zt__nozzles figcaption { margin-top: 10px; font-size: 15px; color: rgba(238, 241, 241, .78); }

/* progress through the five parts */
.zt__rail { display: flex; gap: 6px; margin-top: 44px; }
.zt__rail i { height: 2px; flex: 1; background: rgba(255, 255, 255, .14); position: relative; overflow: hidden; }
.zt__rail i::after { content: ''; position: absolute; inset: 0; background: var(--cyan); transform-origin: left; transform: scaleX(var(--f, 0)); }

/* custom.css sets overflow-x:hidden on html/body under 991px, which turns body into a
   scroll container and silently disables position:sticky. clip trims the same overflow
   without creating a scroll container. */
@media (max-width: 991px) {
  html:has(.zt), html:has(.zt) body { overflow-x: clip !important; }
}

/* phones and tablets: same tour, device on top, copy underneath */
@media (max-width: 900px) {
  .zt { height: 640vh; }
  .zt__pin { grid-template-columns: 1fr; grid-template-rows: 56% 44%; align-items: stretch;
    background: radial-gradient(ellipse 80% 42% at 50% 28%, #3a3b3e 0%, #262729 55%, #1b1c1e 100%); }
  /* the zoomed photo stays inside its own band and never runs into the copy */
  .zt__stage { overflow: hidden; -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }
  .zt__device { height: min(36vh, 80vw); }
  .zt__top { height: min(28vh, 250px); }
  .zt__focus { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
  .zt__copy { padding: 10px 20px 0; max-width: none; align-self: stretch; }
  html body.template-zionic div.zs:not(#zs-n) .zt__title { font-size: 20px !important; }
  .zt__steps { margin-top: 10px; }
  .zt__step { column-gap: 12px; align-content: start; }
  .zt__step > h3 + * { margin-top: 8px; }
  .zt__step > .zt__icon { width: 40px; height: 40px; }
  html body.template-zionic div.zs:not(#zs-n) .zt__step h3 { font-size: 24px !important; margin-bottom: 8px !important; }
  .zt__step p, .zt__step--intro p { font-size: 16px !important; margin-bottom: 4px; }
  .zt__figs { gap: 28px; margin: 4px 0 8px; }
  .zt__figs dt { font-size: 44px; }
  .zt__figs dd { font-size: 14px; margin-top: 4px; }
  .zt__nozzles { margin-top: 8px; gap: 22px; }
  .zt__nozzles figure:first-child img { width: 58px; }
  .zt__nozzles figure:last-child img { width: 38px; }
  .zt__nozzles figcaption { font-size: 13px; margin-top: 4px; }
  .zt__rail { position: absolute; left: 20px; right: 84px; bottom: 16px; margin: 0; }
}

/* reduced motion: no pinning, everything listed */
@media (prefers-reduced-motion: reduce) {
  .zt { height: auto; padding: 72px 0 56px; }
  .zt__pin { position: static; height: auto; display: block; background: none; overflow: visible; }
  .zt__stage { height: auto; }
  .zt__device { position: static; transform: none; height: auto; width: min(380px, 80vw); margin: 0 auto; display: block; filter: none; opacity: 1; }
  .zt__top, .zt__focus, .zt__rail { display: none; }
  .zt__copy { padding: 0 16px; max-width: 560px; margin: 0 auto; }
  .zt__steps { gap: 32px; }
  .zt__step { grid-area: auto; opacity: 1; transform: none; }
  .zt__step .zt__icon { --d: 0; }
}

/* =========================== BODY EFFECTS =========================== */
.zb { background: #fff !important; padding: clamp(72px, 9vw, 128px) 0; }
.zb__head { text-align: center; margin-bottom: clamp(24px, 3vw, 40px); }
.zb__stage { position: relative; aspect-ratio: 1200 / 700; }
.zb__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.zb__orbit { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); }
.zb__skin { fill: url(#zb-sil); }
.zb__figs { opacity: calc(1 - var(--draw, 0)); }

.zb__node { cursor: pointer; }
.zb__disc { fill: #f3f6f6; stroke: var(--line); stroke-width: 1; transition: fill .4s, stroke .4s; }
.zb__node use { fill: #4a545c; transition: fill .4s; }
.zb__node.is-active .zb__disc { fill: #e8fbfc; stroke: var(--teal); }
.zb__node.is-active use { fill: var(--teal); }
.zb__ring { fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.zb__node.is-active .zb__ring { animation: zb-pulse 2.4s var(--ease) infinite; }

.zb__leader { fill: none; stroke: var(--teal); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.zb__leader.is-active { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); }
.zb__zone { opacity: 0; transition: opacity .4s; }
.zb__zone.is-active { opacity: 1; transition-delay: .5s; }
.zb__dot { fill: var(--cyan); stroke: #fff; stroke-width: 1.5; }
.zb__wave { fill: none; stroke: var(--cyan); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.zb__zone.is-active .zb__wave { animation: zb-wave 2.2s ease-out infinite; }
.zb__zone.is-active .zb__wave--2 { animation-delay: 1.1s; }
@keyframes zb-wave { from { transform: scale(1); opacity: .9; } to { transform: scale(5); opacity: 0; } }
@keyframes zb-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.35); opacity: 0; } }

.zb__list { list-style: none; margin: 0; padding: 0; }
.zb__item { position: absolute; cursor: default; }
html body.template-zionic div.zs:not(#zs-n) .zb__item h3 {
  font-size: clamp(16px, 1.5vw, 21px) !important; font-weight: 600 !important; letter-spacing: -0.015em !important;
  line-height: 1.25 !important; color: var(--ink) !important; margin-bottom: 8px !important; transition: color .4s;
}
html body.template-zionic div.zs:not(#zs-n) .zb__item.is-active h3 { color: var(--teal) !important; }
.zb__item p { margin: 0; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.zb__mini { display: none; }
/* label anchors from node centres in the 1200x700 viewBox (node r=58, 20 gap) */
.zb__item--top { left: 32%; width: 36%; top: 0; text-align: center; }
.zb__item--ur { left: 75.6%; top: 41%; width: 24%; }
.zb__item--lr { left: 68.4%; top: 80%; width: 31%; }
.zb__item--ll { right: 68.4%; top: 80%; width: 31%; text-align: right; }
.zb__item--ul { right: 75.6%; top: 41%; width: 24%; text-align: right; }

/* reveal: orbit and figures draw themselves, then nodes and labels follow round the ring */
.zb__stage.is-armed { --draw: 1; }
.zb__stage.is-armed .zb__node, .zb__stage.is-armed .zb__item { opacity: 0; }
.zb__stage.is-armed .zb__item { transform: translateY(10px); }
.zb__stage.is-in .zb__orbit { transition: stroke-dashoffset 1.8s var(--ease); }
.zb__stage.is-in .zb__figs { transition: opacity 1.2s var(--ease) .3s; }
.zb__stage.is-in .zb__node { transition: opacity .6s calc(.8s + var(--i) * .1s); }
.zb__stage.is-in .zb__item { transition: opacity .7s var(--ease) calc(1s + var(--i) * .1s), transform .7s var(--ease) calc(1s + var(--i) * .1s); }

@media (max-width: 860px) {
  .zb__stage { aspect-ratio: auto; }
  /* JS crops the viewBox to the ring on phones, so the diagram fills the width */
  .zb__svg { position: relative; display: block; height: auto; aspect-ratio: 594 / 570; }
  .zb__list { display: grid; gap: 22px; margin-top: 28px; }
  .zb__item, .zb__item--top, .zb__item--ur, .zb__item--lr, .zb__item--ll, .zb__item--ul {
    position: static; width: auto; text-align: left; display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; }
  html body.template-zionic div.zs:not(#zs-n) .zb__mini { display: block; grid-row: span 2; width: 56px; height: 56px; padding: 6px;
    border-radius: 50% !important; background: #f3f6f6; box-shadow: inset 0 0 0 1px var(--line); fill: #4a545c; }
  .zb__item.is-active .zb__mini { fill: var(--teal); }
}

@media (prefers-reduced-motion: reduce) {
  .zs *, .zs { animation: none !important; transition: none !important; }
}