/* Calendar hero.
 *
 * EVERY CLASS PREFIXED ch-. site.css already defines .hero as a two-column
 * grid and .eyebrow in orange — an unprefixed hero on this page would inherit
 * both and look broken in a way that takes an hour to trace. Each name below
 * was grepped against every stylesheet before being used.
 *
 * @keyframes are NOT scoped — they are not selectors, and prefixing the
 * selector while scoping the animation name destroys the animation. The names
 * carry the ch- prefix instead so they cannot collide.
 */

/* Flush to the nav and edge to edge: no radius, no top margin, and the inner
   content constrained instead of the panel. 18px under it rather than 34 —
   the section below has its own padding and the two were stacking. */
.ch-hero{position:relative;overflow:hidden;background:var(--green-deep,#0A4231);
  color:#fff;padding:56px 0 52px;margin:0 0 18px}
.ch-hero>.ch-in{max-width:1240px;margin:0 auto;padding:0 24px}
.ch-in{position:relative;z-index:3;display:grid;
  grid-template-columns:.86fr 1.14fr;gap:52px;align-items:center}

/* ── abstract layer ─────────────────────────────────────────────── */
.ch-art{position:absolute;inset:0;z-index:1;pointer-events:none}
.ch-art svg{position:absolute;inset:0;width:100%;height:100%}
.ch-arcs{opacity:.07}
.ch-arcs path,.ch-arcs ellipse{fill:none;stroke:#fff;stroke-width:1.2;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:ch-draw 3.4s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes ch-draw{to{stroke-dashoffset:0}}

.ch-blob{position:absolute;border-radius:50%;filter:blur(58px);opacity:.2}
.ch-blob.a{width:460px;height:460px;background:#15764F;top:-170px;right:-110px;
  animation:ch-float1 22s ease-in-out infinite}
.ch-blob.b{width:340px;height:340px;background:#0B6B8A;bottom:-150px;left:34%;
  animation:ch-float2 27s ease-in-out infinite}
@keyframes ch-float1{50%{transform:translate(-46px,52px) scale(1.12)}}
@keyframes ch-float2{50%{transform:translate(58px,-38px) scale(.9)}}

.ch-art::after{content:"";position:absolute;inset:-40% -10%;opacity:.05;
  background-image:radial-gradient(circle,#fff 1.3px,transparent 1.4px);
  background-size:26px 26px;animation:ch-drift 34s linear infinite}
@keyframes ch-drift{to{transform:translate(26px,26px)}}

/* ── copy ───────────────────────────────────────────────────────── */
.ch-eyebrow{font:600 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:#54D19B;margin:0 0 16px;animation:ch-up .6s .1s backwards}
.ch-hero h1{margin:0 0 18px;font:800 52px/1.05 var(--body,inherit);letter-spacing:-.025em;color:#fff}
.ch-hero h1 span{display:block;animation:ch-up .7s backwards}
.ch-hero h1 span:nth-child(1){animation-delay:.18s}
.ch-hero h1 span:nth-child(2){animation-delay:.28s}
.ch-hero h1 span:nth-child(3){animation-delay:.38s;color:#54D19B}
@keyframes ch-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.ch-lead{margin:0 0 26px;font-size:16px;line-height:1.62;color:#C8DCD2;max-width:44ch;
  animation:ch-up .7s .48s backwards}
.ch-figs{display:flex;gap:30px;margin:0 0 30px;animation:ch-up .7s .58s backwards}
.ch-figs div b{display:block;font:800 30px/1 var(--body,inherit)}
.ch-figs div span{font:500 11.5px var(--mono);letter-spacing:.06em;color:#8FB3A4}
.ch-cta{display:flex;gap:10px;animation:ch-up .7s .68s backwards}
.ch-b{display:inline-flex;align-items:center;gap:7px;border-radius:10px;
  padding:13px 22px;font:600 14.5px var(--body,inherit);text-decoration:none;
  border:1px solid transparent;transition:transform .2s}
.ch-b:hover{transform:translateY(-2px)}
.ch-b.solid{background:#54D19B;color:#06281D}
.ch-b.out{border-color:rgba(255,255,255,.28);color:#fff}

/* ── the mini grid ──────────────────────────────────────────────── */
.ch-mini{position:relative;z-index:3;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:22px;
  animation:ch-up .8s .3s backwards}
.ch-mini-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:15px}
.ch-mini-top b{font:700 14.5px var(--body,inherit)}
.ch-mini-top span{font:500 11.5px var(--mono);color:#8FB3A4}
.ch-row{display:grid;grid-template-columns:104px repeat(21,1fr);gap:4px;margin-bottom:4px;
  align-items:center}
.ch-tk{font:600 11.5px var(--mono);color:#D6E7DF;white-space:nowrap;
  display:flex;align-items:center;gap:6px;overflow:hidden}
.ch-tk i{width:16px;height:11px;border-radius:2px;font:700 7px/11px var(--mono);
  text-align:center;color:#fff;font-style:normal;flex:none}
.ch-tk i.gb{background:#0E5B41}
.ch-tk i.au{background:#1D5BA6}
.ch-cell{height:21px;border-radius:3px;background:rgba(255,255,255,.055);
  opacity:0;transform:scale(.5);animation:ch-pop .55s cubic-bezier(.2,1.5,.4,1) forwards}
.ch-cell.on{background:#2E7D5B}
.ch-cell.hi{background:#54D19B}
.ch-cell.now{box-shadow:0 0 0 2px #54D19B;
  animation:ch-pop .55s cubic-bezier(.2,1.5,.4,1) forwards,
            ch-pulse 2.4s 2.6s ease-in-out infinite}
@keyframes ch-pop{to{opacity:1;transform:scale(1)}}
@keyframes ch-pulse{50%{box-shadow:0 0 0 4px rgba(84,209,155,.35)}}
.ch-foot{display:flex;gap:20px;margin-top:15px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);font:500 11px var(--mono);color:#8FB3A4}
.ch-foot i{display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:6px;vertical-align:-1px;font-style:normal}

/* ── mobile ─────────────────────────────────────────────────────── */
@media (max-width:980px){
  .ch-hero{padding:38px 24px}
  .ch-in{grid-template-columns:1fr;gap:30px}
  .ch-hero h1{font-size:36px}
  .ch-row{grid-template-columns:78px repeat(21,1fr);gap:2px}
  .ch-cell{height:14px}
  .ch-tk{font-size:10px}
  .ch-foot{flex-wrap:wrap;gap:10px}
}

/* Motion is decoration here. Anyone who has asked for less of it gets the
   finished state immediately rather than a hero that never settles. */
@media (prefers-reduced-motion:reduce){
  .ch-eyebrow,.ch-hero h1 span,.ch-lead,.ch-figs,.ch-cta,.ch-mini,.ch-cell{
    opacity:1;transform:none;animation:none}
  .ch-arcs path,.ch-arcs ellipse{stroke-dashoffset:0;animation:none}
  .ch-blob,.ch-art::after{animation:none}
}