/* Sorivo Csapon - scroll driven frame animation. Scoped to body.sorivo-csapon */
.sorivo-csapon {
  --cs-bg: #0e0d0b;
  --cs-bg-2: #171512;
  --cs-ink: #f4f0ea;
  --cs-ink-dim: #b9b2a6;
  --cs-amber: #dd9933;
  --cs-amber-glow: rgba(221, 153, 51, 0.35);
  --cs-amber-soft: rgba(221, 153, 51, 0.1);
  --cs-olive: #657e21;
  --cs-line: rgba(244, 240, 234, 0.08);
  --cs-glass: rgba(244, 240, 234, 0.035);
  --cs-radius: 10px;
  --cs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--cs-bg);
}

.sorivo-csapon .site-content,
.sorivo-csapon #content,
.sorivo-csapon #content > .col-full { background: var(--cs-bg); }
.sorivo-csapon #content { padding-top: 0; padding-bottom: 0; }
.sorivo-csapon #content > .col-full { max-width: none; padding: 0; margin: 0; }

/* The theme sets overflow:auto on body and .site. A non-visible overflow on an
   ancestor makes that box the scrollport for position:sticky, and since those
   boxes never scroll the sticky stage would simply scroll away and leave an
   empty band behind it. Restore visible overflow on this page only. */
body.sorivo-csapon,
.sorivo-csapon .site,
.sorivo-csapon .site-content,
.sorivo-csapon #content,
.sorivo-csapon #content > .col-full,
.sorivo-csapon .cs { overflow: visible; }

/* The theme adds a large margin under the header, which reads as an empty
   black band above the animation stage on this dark page. */
.sorivo-csapon .site-header { margin-bottom: 0; }

.sorivo-csapon .site-header,
.sorivo-csapon .site-header .col-full,
.sorivo-csapon .site-footer,
.sorivo-csapon .site-footer .col-full,
.sorivo-csapon .footer-widgets,
.sorivo-csapon .site-info { background: #ffffff; }

.cs {
  font-family: var(--cs-font);
  color: var(--cs-ink);
  background: var(--cs-bg);
  -webkit-font-smoothing: antialiased;
}
.cs :where(h1, h2, h3, p, ul, li, a, figure) { margin: 0; padding: 0; color: inherit; font-family: inherit; }
.cs :where(ul) { list-style: none; }
.cs :where(a) { text-decoration: none; }

.cs-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cs-amber);
  margin-bottom: 14px;
}

/* ---------- Animation stage ---------- */
.cs-anim { position: relative; height: 1700vh; }
.cs-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--cs-bg);
}
#cs-canvas { display: block; width: 100%; height: 100%; }

.cs-grad-left,
.cs-grad-bottom,
.cs-tint,
.cs-vignette,
.cs-grain { position: absolute; inset: 0; pointer-events: none; }
.cs-grad-left { z-index: 1; background: linear-gradient(90deg, rgba(14,13,11,0.88) 0%, rgba(14,13,11,0.45) 45%, rgba(14,13,11,0) 78%); }
.cs-grad-bottom { z-index: 1; background: linear-gradient(180deg, rgba(14,13,11,0.55) 0%, rgba(14,13,11,0) 28%, rgba(14,13,11,0.75) 100%); }
.cs-tint { z-index: 2; transition: background 1.2s ease; }
.cs-vignette { z-index: 3; background: radial-gradient(ellipse at center, rgba(14,13,11,0) 50%, rgba(14,13,11,0.45) 100%); }
.cs-grain { z-index: 4; opacity: 0.035; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/></filter><rect width='256' height='256' filter='url(%23n)'/></svg>"); }

#cs-particles { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0.4; }

/* ---------- Scroll text overlays ---------- */
.cs-text {
  position: absolute;
  z-index: 10;
  left: max(24px, calc((100% - 1180px) / 2));
  right: 24px;
  bottom: 12vh;
  max-width: 620px;
  opacity: 0;
  transform: translateX(-20px);
  filter: blur(6px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2,0.7,0.2,1), filter 0.8s ease;
  pointer-events: none;
}
.cs-text.visible { opacity: 1; transform: none; filter: blur(0); pointer-events: auto; }

.cs-title {
  font-size: clamp(30px, 4.6vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,0.55);
  margin-bottom: 18px;
}
.cs-lead { font-size: clamp(15px, 1.35vw, 18px); line-height: 1.6; color: var(--cs-ink-dim); }
.cs-sub { font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; line-height: 1.15; margin-bottom: 14px; }

.ltr { display: inline-block; opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
.cs-text.visible .ltr { opacity: 1; transform: none; }

/* Stat bar */
.cs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 26px;
  border-radius: var(--cs-radius);
  overflow: hidden;
  background: var(--cs-glass);
  border: 1px solid var(--cs-line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.cs-stat { flex: 1 1 90px; padding: 14px 16px; }
.cs-stat b { display: block; font-size: 22px; font-weight: 700; color: var(--cs-amber); line-height: 1.1; }
.cs-stat span { display: block; margin-top: 4px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cs-ink-dim); }

/* Quote */
.cs-quote { font-size: clamp(20px, 2.4vw, 32px); font-style: italic; line-height: 1.35; font-weight: 300; }
.cs-mark { font-size: 64px; line-height: 0.6; color: var(--cs-amber); opacity: 0.5; display: block; margin-bottom: 10px; }
.cs-rule { width: 64px; height: 1px; background: var(--cs-amber); margin: 22px 0 12px; }
.cs-attr { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--cs-ink-dim); }

/* Feature list */
.cs-list { margin-top: 20px; }
.cs-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--cs-line);
  font-size: 15px;
  color: var(--cs-ink-dim);
}
.cs-list li:last-child { border-bottom: 1px solid var(--cs-line); }
.cs-list li b { color: var(--cs-ink); font-weight: 600; }
.cs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cs-amber); flex-shrink: 0; }

/* Hop grid */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 20px;
  border-radius: var(--cs-radius);
  overflow: hidden;
  border: 1px solid var(--cs-line);
}
.cs-cell {
  padding: 18px 18px 20px;
  background: var(--cs-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 0.3s ease;
}
.cs-cell:hover { background: rgba(244, 240, 234, 0.07); }
.cs-cell b { display: block; font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.cs-cell span { font-size: 13px; line-height: 1.45; color: var(--cs-ink-dim); }

/* Dotted detail rows */
.cs-rows { margin-top: 20px; }
.cs-rows li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 15px; }
.cs-rows i { flex: 1; border-bottom: 1px dotted rgba(244,240,234,0.22); transform: translateY(-4px); }
.cs-rows span:first-child { color: var(--cs-ink-dim); }
.cs-rows span:last-child { color: var(--cs-ink); font-weight: 600; white-space: nowrap; }

/* CTA block */
.cs-text--cta {
  left: 50%;
  right: auto;
  transform: translate(-50%, 0) translateX(-20px);
  bottom: 16vh;
  max-width: 640px;
  width: min(640px, calc(100% - 48px));
  text-align: center;
}
.cs-text--cta.visible { transform: translate(-50%, 0); }
.cs-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.cs-btn {
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  border-radius: var(--cs-radius);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cs-btn--primary { background: var(--cs-amber); color: #1a1408; }
.cs-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 40px var(--cs-amber-glow); color: #1a1408; }
.cs-btn--ghost { border-color: rgba(244,240,234,0.25); color: var(--cs-ink); background: rgba(14,13,11,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cs-btn--ghost:hover { border-color: var(--cs-amber); color: var(--cs-ink); }
.cs-card {
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: var(--cs-radius);
  background: var(--cs-glass);
  border: 1px solid var(--cs-line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 14px;
  color: var(--cs-ink-dim);
  line-height: 1.6;
}
.cs-card b { display: block; color: var(--cs-ink); font-size: 15px; margin-bottom: 4px; }
.cs-card a { color: var(--cs-amber); }

/* ---------- Scroll hint ---------- */
/* Fixed, not absolute: the sticky stage hangs below the viewport while the
   theme header is still on screen, so an absolute hint would sit off screen.
   Bottom right keeps it clear of the hero copy and the stat bar. */
.cs-hint {
  position: fixed;
  right: 26px;
  bottom: 22px;
  z-index: 12;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #dd9933;
  pointer-events: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  animation: cs-blink 1.7s ease-in-out infinite;
  transition: opacity 0.5s ease;
}
.cs-hint svg { width: 15px; height: 15px; display: block; }
.cs-hint.is-off { opacity: 0; }

@keyframes cs-blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* ---------- Chapter markers ---------- */
.cs-chapters {
  position: absolute;
  z-index: 50;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ch-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(244,240,234,0.25); transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; }
.ch-dot.active { background: var(--cs-amber); box-shadow: 0 0 14px var(--cs-amber-glow); transform: scale(1.35); }
.ch-line { width: 1px; height: 34px; background: rgba(244,240,234,0.14); position: relative; }
.ch-line span { position: absolute; inset: 0 auto auto 0; width: 100%; height: 0; background: var(--cs-amber); }

/* ---------- Loader ---------- */
.cs-loader {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--cs-bg);
  transition: opacity 0.7s ease, filter 0.7s ease;
}
.cs-loader.done { opacity: 0; filter: blur(8px); pointer-events: none; }
.cs-loader__inner { text-align: center; }
.cs-loader__mark { font-size: 13px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: var(--cs-ink); }
.cs-loader__line { width: 54px; height: 1px; background: var(--cs-line); margin: 16px auto; }
.cs-bar { width: 140px; height: 2px; background: rgba(244,240,234,0.1); border-radius: 2px; overflow: hidden; margin: 0 auto; }
.cs-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cs-amber), #d4a0b0); transition: width 0.25s ease; }
.cs-pct { margin-top: 10px; font-size: 11px; letter-spacing: 0.2em; color: var(--cs-ink-dim); }

/* ---------- Outro with video background ---------- */
.cs-wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.cs-outro {
  position: relative;
  min-height: 78vh;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-top: 1px solid var(--cs-line);
  background: var(--cs-bg);
}
.cs-outro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cs-outro__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14,13,11,0.6) 0%, rgba(14,13,11,0.15) 40%, rgba(14,13,11,0.9) 100%),
    linear-gradient(90deg, rgba(14,13,11,0.7) 0%, rgba(14,13,11,0.15) 65%, rgba(14,13,11,0) 100%);
}
.cs-outro__inner { position: relative; z-index: 2; padding: 90px 0 80px; max-width: 640px; }
.cs-outro h2 { font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 16px; text-shadow: 0 2px 26px rgba(0,0,0,0.55); }
.cs-outro .cs-btns { justify-content: flex-start; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cs-anim { height: 650vh; }
  .cs-text { left: 20px; right: 20px; bottom: 8vh; max-width: none; }
  .cs-text--cta { left: 50%; width: calc(100% - 40px); }
  .cs-chapters { right: 12px; }
  .ch-line { height: 22px; }
  .cs-grid { grid-template-columns: 1fr; }
  .cs-stat b { font-size: 18px; }
  .cs-hint { right: 16px; bottom: 16px; font-size: 10px; letter-spacing: 0.24em; }
  .cs-outro { min-height: 70svh; }
  .cs-outro__inner { padding: 60px 0 56px; }
}
@media (max-width: 560px) {
  .cs-btns .cs-btn { width: 100%; justify-content: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cs-anim { height: auto; }
  .cs-stage { position: relative; height: auto; min-height: 100vh; }
  .cs-text { position: relative; opacity: 1; transform: none; filter: none; left: auto; right: auto; bottom: auto; margin: 0 auto 40px; width: min(1180px, calc(100% - 48px)); }
  .cs-text--cta { transform: none; left: auto; }
  .ltr { opacity: 1; transform: none; }
  #cs-particles, .cs-chapters, .cs-hint { display: none; }
}