/* Codelith Lab — premium layer. Tier 1 (all users): opacity/colour. Tier 2: inside no-preference. */
:root {
  --clp-ease: cubic-bezier(.2, .8, .2, 1);
  --clp-deep: #061a17;
  --clp-mint: #62CFAE;
  --clp-accent: #0E9E7A;
  --clp-gutter: max(24px, calc((100vw - 1240px) / 2 + 24px));
}
@keyframes clpFade { from { opacity: 0; } to { opacity: 1; } }

/* ── header: floating glass pill (dark over the story, light after) ── */
body.home .site-header.clp-hdr {
  position: fixed; left: 0; right: 0; top: 0;
  padding-top: 16px; background: transparent !important; border: 0 !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transition: padding .35s var(--clp-ease);
}
body.home .clp-hdr .header-inner {
  height: 64px; max-width: min(1240px, calc(100% - 32px)); margin-inline: auto; padding-inline: 24px 12px;
  border-radius: 20px; border: 1px solid rgba(15, 46, 43, .08);
  background: rgba(251, 251, 247, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 2px rgba(10, 36, 33, .06), 0 8px 24px -12px rgba(10, 36, 33, .28);
  transition: height .35s var(--clp-ease), background-color .35s, border-color .35s, box-shadow .35s;
}
body.home .clp-hdr.clp-hdr-small { padding-top: 8px; }
body.home .clp-hdr.clp-hdr-small .header-inner { height: 56px; }
body.home .clp-hdr.clp-hdr-dark .header-inner,
body.cl-night.home .clp-hdr .header-inner {
  background: rgba(6, 26, 23, .55); border-color: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 32px -12px rgba(0, 0, 0, .55);
}
body.home .clp-hdr.clp-hdr-dark .brand-name { background: none; color: #fff; -webkit-text-fill-color: #fff; }
body.home .clp-hdr.clp-hdr-dark .nav-list a { color: rgba(255, 255, 255, .86); }
body.home .clp-hdr.clp-hdr-dark .nav-list a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
body.home .clp-hdr.clp-hdr-dark .intl-link { color: rgba(255, 255, 255, .7); }
body.home .clp-hdr.clp-hdr-dark .nav-toggle { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); }
body.home .clp-hdr.clp-hdr-dark .nav-toggle span { background: #fff; }
@media (max-width: 767px) {
  body.home .site-header.clp-hdr { padding-top: 8px; }
  body.home .clp-hdr .header-inner { height: 56px; max-width: calc(100% - 16px); padding-inline: 16px 8px; border-radius: 16px; }
}

/* ── hero → pinned 3D scroll story ── */
.hero.clp-story {
  display: block; height: 440vh; min-height: 0; margin-top: 0; padding: 0;
  overflow: visible; background: var(--clp-deep);
}
.clp-story > .hero-video, .clp-story > .hero-video-overlay, .clp-story > .hero-scroll { display: none; }
.clp-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background:
    radial-gradient(48% 52% at 72% 44%, rgba(14, 158, 122, .26), transparent 70%),
    var(--clp-deep);
}
.clp-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--clp-ease); }
.clp-3d.is-ready { opacity: 1; }
.clp-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 26, 23, .82) 0%, rgba(6, 26, 23, .45) 38%, rgba(6, 26, 23, 0) 60%);
}
.clp-story .clp-panel {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--clp-gutter);
  width: min(600px, calc(100vw - 48px)); max-width: none; margin: 0; padding: 96px 0 48px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  text-align: left; color: #fff;
}
.clp-story .clp-panel > * { margin-left: 0; margin-right: 0; }
.clp-story h1 { font-size: clamp(40px, 4.4vw, 68px); line-height: 1.04; letter-spacing: -.03em; }
.clp-story .hero-sub { font-size: clamp(16px, 1.25vw, 18px); max-width: 520px; }
.clp-story .hero-actions, .clp-panel-cta .hero-actions { justify-content: flex-start; }
.clp-story .hero-trustline { text-align: left; justify-content: flex-start; }
.clp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font: 700 12px/1 Sora, Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--clp-mint);
}
.clp-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.clp-panel h2 { margin: 0 0 16px; font: 800 clamp(36px, 4.2vw, 64px)/1.05 Sora, Inter, sans-serif; letter-spacing: -.035em; color: #fff; }
.clp-panel p { margin: 0; max-width: 480px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .76); }
.clp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.clp-chips span, .clp-now {
  padding: 8px 16px; border-radius: 999px; font: 600 14px/1.2 Inter, sans-serif; color: #E6F4EF;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.clp-now { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; }
.clp-now i { width: 8px; height: 8px; border-radius: 50%; background: var(--clp-mint); box-shadow: 0 0 0 4px rgba(98, 207, 174, .18); }
.clp-now b { color: #fff; }
.clp-panel-cta { margin-top: 32px; }
.clp-story .clp-panel .hero-glassbar { margin: 32px 0 0; width: 100%; max-width: 600px; }

.clp-chapters {
  position: absolute; z-index: 2; right: 24px; top: 50%;
  display: flex; flex-direction: column; gap: 16px; transform: translateY(-50%);
}
.clp-chapters span { display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 16px; }
.clp-chapters i { order: 2; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .28); transition: background-color .3s, box-shadow .3s; }
.clp-chapters b { display: none; }
.clp-chapters .is-on i { background: var(--clp-mint); box-shadow: 0 0 0 4px rgba(98, 207, 174, .2); }

.clp-cue {
  position: absolute; z-index: 2; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 600 11px/1 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.clp-cue span { width: 1px; height: 40px; background: linear-gradient(rgba(98, 207, 174, 0), var(--clp-mint)); }

.clp-cine-sec { background: var(--clp-deep); padding: 64px 0 96px; }

/* 3D failed after the story was built: unpin and stack the panels */
.clp-story.clp-nogl { height: auto; }
.clp-nogl .clp-stage { position: relative; height: auto; padding-top: 64px; }
.clp-nogl .clp-3d, .clp-nogl .clp-chapters, .clp-nogl .clp-cue { display: none; }
.clp-nogl .clp-panel { position: relative; left: auto; margin: 0 var(--clp-gutter) !important; padding: 48px 0; opacity: 1 !important; visibility: visible !important; translate: none !important; }

@media (max-width: 767px) {
  .hero.clp-story { height: 380vh; }
  .clp-stage { background: radial-gradient(80% 40% at 50% 78%, rgba(14, 158, 122, .28), transparent 70%), var(--clp-deep); }
  .clp-stage::after { background: linear-gradient(180deg, rgba(6, 26, 23, .88) 0%, rgba(6, 26, 23, .55) 46%, rgba(6, 26, 23, 0) 66%); }
  .clp-story .clp-panel { left: 16px; width: calc(100vw - 32px); justify-content: flex-start; padding-top: 96px; }
  .clp-story .clp-p0 { justify-content: flex-start; }
  .clp-story h1 { font-size: clamp(32px, 9vw, 40px); }
  .clp-story .hero-sub { font-size: 15px; }
  .clp-panel h2 { font-size: clamp(32px, 9vw, 40px); }
  .clp-chapters { display: none; }
  .clp-story .clp-panel .hero-glassbar { margin-top: 24px; }
}

/* no flash of the un-split hero headline; failsafe shows it if JS never runs */
.clp-js .hero h1:not(.clp-split) { opacity: 0; animation: clpFade 0s 2s forwards; }

/* ── word-mask headings ── */
.clp-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .1em; margin: 0 -.04em -.1em; }
.clp-wi { display: inline-block; opacity: 0; transition: opacity .7s var(--clp-ease) calc(var(--i, 0) * 60ms); }
.clp-in .clp-wi { opacity: 1; }

/* ── kinetic service band ── */
.clp-band {
  position: relative; overflow: hidden; padding: 40px 0;
  background: var(--cream, #FAF7F0);
  border-bottom: 1px solid var(--line, rgba(15, 46, 43, .1));
}
.clp-row { white-space: nowrap; line-height: 1.1; }
.clp-row + .clp-row { margin-top: 8px; }
.clp-track { display: inline-flex; align-items: center; gap: 32px; padding-right: 32px; will-change: transform; }
.clp-track span {
  font: 800 clamp(40px, 6.6vw, 96px)/1.1 Sora, Inter, sans-serif;
  letter-spacing: -.04em; color: var(--navy, #0F2E2B);
}
.clp-track span:nth-of-type(3n+2) {
  background: linear-gradient(100deg, #16443E 0%, #0E9E7A 30%, #62CFAE 50%, #0E9E7A 70%, #16443E 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: clpSheen 7s linear infinite;
}
.clp-track i { font-style: normal; font-size: clamp(20px, 3.2vw, 48px); color: var(--clp-accent); }
.clp-row--o span, .clp-row--o span:nth-of-type(3n+2) {
  background: none; color: transparent;
  -webkit-text-stroke: 1.5px rgba(15, 46, 43, .3);
}
@keyframes clpSheen { to { background-position: -200% 0; } }

/* ── scroll progress ── */
.clp-progress {
  position: fixed; left: 0; top: 0; z-index: 10001;
  width: 100%; height: 3px; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #0E9E7A, #62CFAE);
  box-shadow: 0 0 8px rgba(98, 207, 174, .5);
}

/* ── night mode ── */
body.cl-night .clp-band { background: #06201c; border-color: rgba(255, 255, 255, .06); }
body.cl-night .clp-track span { color: #E6F4EF; }
body.cl-night .clp-track span:nth-of-type(3n+2) {
  background-image: linear-gradient(100deg, #9FE3CC 0%, #0E9E7A 30%, #BCE9D9 50%, #0E9E7A 70%, #9FE3CC 100%);
}
body.cl-night .clp-row--o span,
body.cl-night .clp-row--o span:nth-of-type(3n+2) {
  background: none; color: transparent; -webkit-text-stroke-color: rgba(98, 207, 174, .4);
}

/* ════════ Tier 2 — full motion ════════ */
@media (prefers-reduced-motion: no-preference) {
  .clp-wi {
    transform: translateY(108%) rotate(3deg);
    transform-origin: 0 100%;
    transition: transform 1s var(--clp-ease) calc(var(--i, 0) * 60ms), opacity .6s var(--clp-ease) calc(var(--i, 0) * 60ms);
  }
  .clp-in .clp-wi { transform: none; }

  .clp-on .reveal:not(.in) { transform: perspective(1000px) translateY(48px) rotateX(10deg) scale(.97); }
  .clp-on .reveal {
    transform-origin: 50% 100%;
    transition: opacity .9s var(--clp-ease), transform 1.1s var(--clp-ease), box-shadow .35s, border-color .35s;
  }
  .clp-on .reveal.in { transition-delay: calc(var(--clp-i, 0) * 80ms); }

  .clp-tilt { will-change: transform; transition: transform .35s var(--clp-ease), box-shadow .35s, border-color .35s; }
  .clp-glare {
    position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
    background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .55), transparent 55%);
    mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s var(--clp-ease);
  }
  .clp-tilt:hover .clp-glare { opacity: 1; }

  .clp-mag { transition: transform .3s var(--clp-ease), box-shadow .3s, background .3s, color .3s, border-color .3s, translate .45s var(--clp-ease); }

  .cine-wrap { transform-origin: 50% 0; will-change: transform; }

  .clp-cursor { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; opacity: 0; transition: opacity .3s; }
  .clp-cursor.is-on { opacity: 1; }
  .clp-cursor::before {
    content: ""; position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
    border: 1.5px solid rgba(14, 158, 122, .7);
    transition: transform .35s var(--clp-ease), background-color .3s, border-color .3s;
  }
  .clp-cursor.is-hot::before { transform: scale(1.5); background-color: rgba(98, 207, 174, .14); border-color: rgba(98, 207, 174, .95); }
  .clp-cursor.is-live::before { transform: scale(2.4); background-color: var(--clp-accent); border-color: var(--clp-accent); }
  .clp-cursor::after {
    content: "LIVE \2197"; position: absolute; left: 0; top: 0;
    font: 700 11px/1 Sora, Inter, sans-serif; letter-spacing: .08em; color: #fff; white-space: nowrap;
    transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .25s, transform .35s var(--clp-ease);
  }
  .clp-cursor.is-live::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}