/* =====================================================================
   The Calibrex film (intro.js): a cinematic panel that draws itself as a line of light, then opens
   ===================================================================== */
html.cxf-lock{overflow:hidden}
.cxf{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--text);display:grid;place-items:center;overflow:hidden}
.cxf:not([open]){display:none}
.cxf::backdrop{background:#03050acc;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);opacity:0;transition:opacity .7s,backdrop-filter .9s,-webkit-backdrop-filter .9s}
.cxf.opening::backdrop,.cxf-host.live::backdrop{opacity:1;backdrop-filter:blur(14px) saturate(.7);-webkit-backdrop-filter:blur(14px) saturate(.7)}
.cxf.closing::backdrop{opacity:0;transition-delay:.25s}

.cxf-panel{position:relative;width:min(1120px,calc(100vw - 32px));height:min(660px,calc(100dvh - 32px));border-radius:26px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 120%,#1a1408 0%,transparent 55%),radial-gradient(90% 70% at 50% -10%,#0f1c33 0%,transparent 60%),#04060c;
  border:1px solid #e9bd7840;box-shadow:0 0 0 1px #ffffff08 inset,0 40px 120px #000c,0 0 80px #e9bd7818;
  clip-path:inset(0 round 26px)}
/* entrance: a hairline of gold light draws across, then the panel opens from it */
.cxf.opening .cxf-panel{animation:cxf-open 1.25s cubic-bezier(.77,0,.18,1) both}
.cxf.opening .cxf-panel:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;z-index:9;background:linear-gradient(90deg,transparent,#fff3d6 20%,#e9bd78 50%,#fff3d6 80%,transparent);box-shadow:0 0 24px 4px #e9bd78aa;animation:cxf-beam 1.25s ease both}
.cxf.closing .cxf-panel{animation:cxf-shut .75s cubic-bezier(.7,0,.3,1) both}
@keyframes cxf-open{0%{clip-path:inset(50% 50% 50% 50% round 2px);transform:scale(.96)}38%{clip-path:inset(calc(50% - 1px) 0 calc(50% - 1px) 0 round 2px);transform:scale(1)}100%{clip-path:inset(0 0 0 0 round 26px);transform:none}}
@keyframes cxf-beam{0%{opacity:0;transform:scaleX(0)}30%{opacity:1;transform:scaleX(1)}70%{opacity:1}100%{opacity:0;transform:scaleX(1.05)}}
@keyframes cxf-shut{0%{clip-path:inset(0 0 0 0 round 26px);opacity:1}55%{clip-path:inset(calc(50% - 1px) 0 calc(50% - 1px) 0 round 2px);opacity:1}100%{clip-path:inset(50% 50% 50% 50% round 2px);opacity:0}}

.cxf-canvas{position:absolute;inset:0;width:100%;height:100%}
.cxf-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(38% 26% at 50% 52%,#04060ce6 0%,#04060cb3 45%,transparent 100%),radial-gradient(70% 60% at 50% 50%,transparent 30%,#04060cd9 100%)}
.cxf-scene p{text-shadow:0 2px 24px #04060c,0 0 2px #04060c}
.cxf-scene em,.cxf-scene em .w,.cxf-camp em{text-shadow:none}
.cxf-scan{position:absolute;inset:0;pointer-events:none;opacity:.06;background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.cxf-top{position:absolute;left:0;right:0;top:0;z-index:5;background:linear-gradient(#04060cf2 0%,#04060cb3 70%,transparent);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:18px 22px;opacity:0;transition:opacity .6s .2s}
.cxf-host.live .cxf-top{opacity:1}
.cxf-brand{display:flex;align-items:center;gap:9px;font:400 10px Michroma,sans-serif;letter-spacing:3px;color:#dfe6f1;white-space:nowrap}
.cxf-brand i{font:500 9px 'DM Mono',monospace;font-style:normal;letter-spacing:2px;color:var(--gold);margin-left:4px}
.cxf-bars{display:flex;gap:6px}
.cxf-bars span{flex:1;height:3px;border-radius:3px;background:#ffffff1c;overflow:hidden}
.cxf-bars i{display:block;height:100%;background:linear-gradient(90deg,#fff1d8,var(--gold));transform:scaleX(0);transform-origin:left}
.cxf-ctrl{display:flex;gap:8px}
.cxf-ctrl button{height:34px;border-radius:99px;border:1px solid #ffffff26;background:#0a0e18b3;color:#eef2f8;font:800 12px Manrope,sans-serif;cursor:pointer;padding:0 14px;display:flex;align-items:center;gap:6px;transition:border-color .2s,background .2s}
.cxf-ctrl button:hover{border-color:#e9bd78;background:#141a28}
.cxf-pause{width:34px;padding:0!important;justify-content:center}
.cxf-pause span{width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.cxf-host.paused .cxf-pause span{border:0;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.cxf-host.at-end .cxf-pause{display:none}
.cxf-hint{position:absolute;left:0;right:0;bottom:14px;margin:0;text-align:center;font:500 9px 'DM Mono',monospace;letter-spacing:1.6px;color:#6f7e92;z-index:5;opacity:0;transition:opacity .6s 1s}
.cxf-host.live .cxf-hint{opacity:1}.cxf-host.at-end .cxf-hint{opacity:0}
@media (hover:none){.cxf-hint{display:none}}

/* scenes: words arrive out of a blur, one after another */
.cxf-stage{position:absolute;inset:70px 6% 46px;display:grid;place-items:center;z-index:4;pointer-events:none}
.cxf-scene{grid-area:1/1;text-align:center;max-width:900px;transition:opacity .6s,filter .6s,transform .6s}
.cxf-scene.out{opacity:0;filter:blur(14px);transform:scale(1.06)}
.cxf-scene p{margin:0}
.cxf-scene .f-s{font-size:clamp(15px,1.8vw,20px);color:#aeb9cb;margin-top:18px;line-height:1.5}
.cxf-scene .f-m{font-size:clamp(22px,3.4vw,40px);font-weight:600;letter-spacing:-1px;line-height:1.25;color:#e9eef6}
.cxf-scene .f-l{font-size:clamp(28px,4.6vw,56px);font-weight:700;letter-spacing:-1.8px;line-height:1.12}
.cxf-scene .f-xl{font-size:clamp(44px,8.4vw,108px);font-weight:800;letter-spacing:-3.5px;line-height:1.02;margin-top:6px}
.cxf-camp em,.cxf-scene em .w{background:linear-gradient(95deg,#fff7e8 0%,#e9bd78 55%,#cf9a4f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cxf-scene .w{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.35em) scale(1.04);animation:cxf-w .95s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d)}
@keyframes cxf-w{to{opacity:1;filter:blur(0);transform:none}}
.cxf-scene.glitchy .f-l{animation:cxf-glitch 2.6s steps(1) 1s infinite}
@keyframes cxf-glitch{0%,100%{text-shadow:none;transform:none}7%{text-shadow:-3px 0 #ff3b4e,3px 0 #3d8bff;transform:translateX(2px)}9%{text-shadow:none;transform:none}52%{text-shadow:2px 0 #ff3b4e,-2px 0 #3d8bff;transform:skewX(-4deg)}54%{text-shadow:none;transform:none}}
.cxf-host.paused .cxf-scene,.cxf-host.paused .cxf-scene *{animation-play-state:paused!important}

/* the end card */
.cxf-scene.is-end{pointer-events:auto}
.cxf-end{display:flex;flex-direction:column;align-items:center}
.cxf-mark{width:clamp(70px,10vw,112px);height:auto;opacity:0;transform:scale(.3) rotate(-120deg);filter:drop-shadow(0 0 40px #e9bd7899);animation:cxf-mark 1.3s cubic-bezier(.2,.9,.25,1.2) .9s forwards}
@keyframes cxf-mark{60%{opacity:1}to{opacity:1;transform:none}}
.cxf-camp{display:flex;flex-direction:column;align-items:center;margin:22px 0 0!important}
.cxf-camp span,.cxf-camp em{display:block;opacity:0;filter:blur(16px);letter-spacing:.3em;animation:cxf-camp 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.cxf-camp span{font-size:clamp(22px,3.3vw,40px);font-weight:600;color:#e9eef6;animation-delay:1.5s}
.cxf-camp em{font-size:clamp(40px,7vw,90px);font-weight:800;line-height:1.05;margin-top:4px;animation-delay:2.2s}
@keyframes cxf-camp{to{opacity:1;filter:blur(0);letter-spacing:-.03em}}
.cxf-sig{display:flex;gap:clamp(10px,2vw,26px);flex-wrap:wrap;justify-content:center;margin:20px 0 0!important;font:500 clamp(11px,1.3vw,14px) 'DM Mono',monospace;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold)}
.cxf-sig span{opacity:0;transform:translateY(8px);animation:cxf-up .7s ease forwards}
.cxf-sig span:nth-child(1){animation-delay:3.3s}.cxf-sig span:nth-child(2){animation-delay:3.65s}.cxf-sig span:nth-child(3){animation-delay:4s}
@keyframes cxf-up{to{opacity:1;transform:none}}
.cxf-pillars{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.cxf-pillars a{display:flex;flex-direction:column;gap:3px;padding:11px 16px;border:1px solid #ffffff1f;border-radius:14px;background:#0b101cb3;text-align:left;min-width:150px;opacity:0;animation:cxf-up .7s ease forwards;transition:border-color .2s,transform .2s}
.cxf-pillars a:hover{border-color:var(--gold);transform:translateY(-2px)}
.cxf-pillars a:nth-child(1){animation-delay:4.4s}.cxf-pillars a:nth-child(2){animation-delay:4.55s}.cxf-pillars a:nth-child(3){animation-delay:4.7s}
.cxf-pillars small{font:500 9px 'DM Mono',monospace;letter-spacing:1.6px;color:#8e9bb0}.cxf-pillars b{font-size:15px}
.cxf-ctas{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap;justify-content:center;opacity:0;animation:cxf-up .7s ease 5.1s forwards}
.cxf-replay{background:none;border:0;color:#a2adbf;font:700 12px Manrope,sans-serif;cursor:pointer;padding:10px}
.cxf-replay:hover{color:#fff}

@media (max-width:700px){
  .cxf-panel{width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:20px}
  .cxf-top{grid-template-columns:1fr auto;gap:12px;padding:14px}
  .cxf-bars{grid-column:1/-1;grid-row:2}
  .cxf-brand i{display:none}
  .cxf-stage{inset:96px 18px 24px}
  .cxf-scene .f-xl{letter-spacing:-2px}
  .cxf-pillars a{min-width:0;flex:1 1 30%;padding:9px 10px}.cxf-pillars b{font-size:13px}
  .cxf-ctas .button{min-height:44px}
}
@media (max-height:560px){.cxf-pillars{display:none}.cxf-camp em{font-size:44px}}
@media (prefers-reduced-motion:reduce){
  .cxf-scene .w,.cxf-mark,.cxf-camp span,.cxf-camp em,.cxf-sig span,.cxf-pillars a,.cxf-ctas{opacity:1!important;filter:none!important;transform:none!important;letter-spacing:normal}
}

/* "Watch the story" chip in the home hero */
.film-chip{display:inline-flex;align-items:center;gap:10px;margin:0 18px 10px 0;padding:6px 14px 6px 6px;border-radius:99px;border:1px solid #e9bd7855;background:linear-gradient(135deg,#e9bd781c,#ffffff05);color:#f3e3c4;font:700 12.5px Manrope,sans-serif;cursor:pointer;transition:border-color .2s,transform .2s}
.film-chip:hover{border-color:var(--gold);transform:translateY(-1px)}
.film-chip small{font:500 10px 'DM Mono',monospace;color:#a89670;letter-spacing:1px}
.film-play{position:relative;width:26px;height:26px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 #e9bd7888;animation:film-pulse 2.4s infinite}
.film-play:after{content:"";position:absolute;left:10px;top:8px;border-left:8px solid #17130d;border-top:5px solid transparent;border-bottom:5px solid transparent}
@keyframes film-pulse{0%{box-shadow:0 0 0 0 #e9bd7888}70%{box-shadow:0 0 0 12px #e9bd7800}100%{box-shadow:0 0 0 0 #e9bd7800}}
.hero-sub{display:flex;flex-wrap:wrap;align-items:center}



.footer-camp{display:block;color:#f2f5fb;font-weight:700;margin-bottom:4px}

/* ---------- Home hero: the story plays in the hero, then resolves into the headline ---------- */
.home-hero{overflow:hidden;isolation:isolate}
.hero-field{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity 1s;
  background:linear-gradient(90deg,#070a12f0 0%,#070a12c4 42%,#070a1240 72%,transparent 100%),linear-gradient(0deg,var(--bg) 0%,transparent 22%),linear-gradient(180deg,var(--bg) 0%,transparent 14%)}
.hero-intro{position:absolute;left:0;right:0;top:0;height:min(100%,calc(100svh - 90px));display:grid;place-items:center;padding:0 24px;z-index:2;pointer-events:none;text-align:center}
.hero-intro .cxf-scene{max-width:980px}
.hero-intro .cxf-scene p{text-shadow:0 2px 30px #070a12,0 0 2px #070a12}
.hero-intro .cxf-scene em,.hero-intro .cxf-scene em .w{text-shadow:none}
.hero-skip{display:none;position:absolute;left:50%;top:calc(min(100%, 100svh - 90px) - 76px);transform:translateX(-50%);z-index:3;border:1px solid #ffffff26;background:#0a0e18b3;color:#c8d1de;border-radius:99px;padding:9px 16px;font:700 12px Manrope,sans-serif;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-skip:hover{color:#fff;border-color:var(--gold)}
.hero-intro-on .hero-skip{display:block;animation:cxf-up .6s ease 1.2s both}
.hero-intro-on .home-hero{cursor:pointer}
.hero-intro-on .home-hero .hero-shade{opacity:.25}
/* while the story plays, the headline waits (it is in the page for readers and search, just not shown);
   if the script never runs, it appears anyway after 12 seconds */
.hero-intro-on .home-hero .hero-copy{opacity:0;pointer-events:none;animation:hero-failsafe 0s 12s forwards}
@keyframes hero-failsafe{to{opacity:1;pointer-events:auto}}
.home-hero.intro-leaving .hero-skip{display:none}
/* the reveal: each part of the headline arrives in turn */
.home-hero.intro-reveal .hero-copy>*{animation:hero-in .9s cubic-bezier(.2,.7,.2,1) both}
.home-hero.intro-reveal .hero-copy>:nth-child(1){animation-delay:.05s}
.home-hero.intro-reveal .hero-title .line{animation:hero-in 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:.15s}
.home-hero.intro-reveal .hero-title .line:nth-child(2){animation-delay:.45s}
.home-hero.intro-reveal .hero-copy>:nth-child(3){animation-delay:.8s}
.home-hero.intro-reveal .hero-copy>:nth-child(4){animation-delay:.95s}
.home-hero.intro-reveal .hero-copy>:nth-child(5){animation-delay:1.1s}
.home-hero.intro-reveal .hero-copy>:nth-child(6){animation-delay:1.25s}
@keyframes hero-in{from{opacity:0;transform:translateY(26px);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:950px){
  .hero-shade{background:linear-gradient(180deg,#070a1266 0%,#070a12b8 26%,#070a12e6 60%,var(--bg) 100%)}
  .home-hero .hero-grid{min-height:calc(100svh - 150px);align-content:center}
}
@media (prefers-reduced-motion:reduce){.home-hero.intro-reveal .hero-copy>*,.home-hero.intro-reveal .hero-title .line{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}}

/* ---------- The film, narrated: captions, sound, letterbox and grain ---------- */
.cxf-scene.low{align-self:end;margin-bottom:2%}
.cxf-scene.top{align-self:start;margin-top:3%}
.cxf-scene.low .f-l{font-size:clamp(24px,3.6vw,46px)}
.cxf-sound{width:34px;padding:0!important;justify-content:center}
.cxf-sound svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cxf-sound .spk{fill:currentColor;stroke:none}
.cxf-sound .x{display:none}
.cxf-sound[aria-pressed="false"] .x{display:block}
.cxf-sound[aria-pressed="false"] .wave{display:none}
.cxf-sound:disabled{opacity:.35;cursor:default}
.cxf-lb{position:absolute;left:0;right:0;height:0;background:#000;z-index:3;pointer-events:none;transition:height 1.2s cubic-bezier(.7,0,.2,1)}
.cxf-lb-top{top:0}.cxf-lb-bot{bottom:0}
.cxf-host.live .cxf-lb{height:7%}
.cxf-host.at-end .cxf-lb{height:0}
.cxf-grain{position:absolute;inset:-50%;z-index:4;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:cxf-grain .9s steps(6) infinite}
@keyframes cxf-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.cxf-host.paused .cxf-grain{animation-play-state:paused}
@media (max-width:700px){.cxf-host.live .cxf-lb{height:0}.cxf-scene.low{margin-bottom:6%}}
@media (prefers-reduced-motion:reduce){.cxf-grain{animation:none}}
.cxf-sig-top{margin:16px 0 0!important}
.cxf-camp-3 span{font-size:clamp(20px,2.8vw,34px)}
.cxf-camp-3 span+span{margin-top:2px}
.cxf-camp-3 em{font-size:clamp(30px,5.2vw,64px);margin-top:6px}