/* ============================================================
   brand-v3.css — natural.com-inspired minimal identity skin.
   Loaded LAST on every page; rebrands the whole site at the
   token level (warm-monochrome ground, restrained green accent,
   no dither, no all-caps, ink primary buttons, Söhne kept).
   Structural/bespoke per-page polish is layered on top of this.
   ============================================================ */

/* ---- palette (warm monochrome + restrained green) ---- */
body.zs26,
:root, .zs26 {
  --canvas:#FBFAF7;
  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --surface-2:#F4F2EC;
  --ink:#17140D;
  --ink-2:#57534A;
  --ink-3:#948F84;
  --hairline:rgba(23,20,13,.10);
  --hairline-2:rgba(23,20,13,.18);
  --green:#2E7A57;          /* restrained accent — used sparingly */
  --green-deep:#245C43;
  --green-tint:#EAF2EC;
  --brand-green:#2E7A57;
  --glass-v4:rgba(251,250,247,.72);
  --glass-v4-bd:rgba(23,20,13,.10);
}
[data-theme="dark"] body.zs26,
[data-theme="dark"].zs26, [data-theme="dark"] .zs26 {
  --canvas:#0C0B08;
  --paper:#0C0B08;
  --surface:#141210;
  --surface-2:#1B1915;
  --ink:#F3F0E9;
  --ink-2:#B8B3A8;
  --ink-3:#8B867A;
  --hairline:rgba(255,255,255,.12);
  --hairline-2:rgba(255,255,255,.22);
  --green:#57A882;
  --green-deep:#4A9070;
  --green-tint:rgba(87,168,130,.14);
  --brand-green:#57A882;
  --glass-v4:rgba(16,15,12,.62);
  --glass-v4-bd:rgba(255,255,255,.12);
}

/* ---- absolutely no all-caps (CSS-driven) ---- */
body.zs26 * { text-transform:none !important; }

/* ---- restrained green: primary actions become ink, not green ---- */
body.zs26 .btn-primary,
body.zs26 .btn-glow {
  background:var(--ink) !important; color:var(--canvas) !important;
  border-color:var(--ink) !important; box-shadow:0 10px 24px rgba(23,20,13,.16) !important;
}
body.zs26 .btn-primary:hover,
body.zs26 .btn-glow:hover { background:#000 !important; }
[data-theme="dark"] body.zs26 .btn-primary,
[data-theme="dark"] body.zs26 .btn-glow { background:var(--ink) !important; color:var(--canvas) !important; }
[data-theme="dark"] body.zs26 .btn-primary:hover { background:#fff !important; }

/* ---- remove the dither fields (can be re-enabled later) ---- */
body.zs26 .zs-dither,
body.zs26 [data-zs-dither],
body.zs26 .v4-dither-hero,
body.zs26 .v4-dither-fallback,
body.zs26 .v4-dither { display:none !important; }

/* ---- warmer selection ---- */
body.zs26 ::selection { background:var(--green-tint); color:var(--green-deep); }

/* ---- softer, calmer chips/kickers (no uppercase, gentle spacing) ---- */
body.zs26 .v4-kicker,
body.zs26 .eyebrow {
  letter-spacing:-.002em !important;
  color:var(--ink-2);
  background:transparent;
  border:1px solid var(--hairline);
}

/* ---- soften the heaviest shadows toward the airy look ---- */
body.zs26 { background:var(--canvas); }

/* ---- chips placed OVER imagery get a frosted-glass backing (site-wide rule) ---- */
/* not fully transparent — a soft dark glass + blur so labels read on any image */
body.zs26 .on-image .chip,
body.zs26 .chip-on-image {
  background: rgba(28,22,16,.30) !important;
  -webkit-backdrop-filter: blur(13px) saturate(155%);
  backdrop-filter: blur(13px) saturate(155%);
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 4px 16px rgba(0,0,0,.20) !important;  /* liquid-glass rim + lift */
}
body.zs26 .on-image a.chip:hover,
body.zs26 a.chip-on-image:hover {
  background: rgba(28,22,16,.42) !important;
  border-color: rgba(255,255,255,.42) !important;
}

/* ---- green status "dot" indicators pulse to feel live ---- */
@media (prefers-reduced-motion: no-preference){
  body.zs26 .dot { animation: zsLivePulse 2.6s ease-in-out infinite; }
}
@keyframes zsLivePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 52%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
}

/* ---- keep the header visible on mobile: never auto-hide it (no cursor to reveal) ---- */
@media (max-width:960px){
  body.zs26 .nav.nav-hidden { transform:none !important; }
}

/* stronger parallax (motion.js) needs more scale-overflow so image edges never show inside the frame */
body.zs26 [data-parallax] img { transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.14) !important; }

/* ---- ambient image aura: blurred colour copy behind each frame for depth ---- */
body.zs26 .zs-aura {
  position: absolute; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  filter: blur(56px) saturate(1.15); opacity: .28;   /* toned way down — a whisper of colour, not a halo */
  transform: scale(1.08);
}
[data-theme="dark"] body.zs26 .zs-aura { opacity: .36; filter: blur(60px) saturate(1.2); }