/* The S17 hero on every page and its live server stats band. Load after styles.css (it uses its tokens: --deep, --cyan, --yellow,
   --purple, --display, --ease-out, .container, .live-dot, .sr-only). Motion is always on: the owner wants the site animated. */

/* The hero is a column: the page content on top, the stats band pinned to its bottom edge. Art, shade, credit and scroll hint stay
   absolutely positioned, so the column only lays out the content and the band. */
.hero{display:flex;flex-direction:column}
.hero>.hero-content{flex:0 0 auto;padding-bottom:40px}

/* ---- Inner pages: breadcrumbs, title and description where the home headline sits ---- */
.hero--page>.hero-content{padding-top:96px}
.hero--page h1{font-size:clamp(50px,5.6vw,82px);max-width:16ch;text-wrap:balance;overflow-wrap:anywhere}
.hero--page h1:focus{outline:none}
.hero--page .hero-description{max-width:52ch}
.hero-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;padding:0;list-style:none;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#d2e6ff}
.hero-crumbs li+li::before{content:'/';margin-right:8px;color:#ffffff59}
.hero-crumbs a{color:inherit;text-decoration:none;transition:color 160ms ease}
.hero-crumbs a:hover,.hero-crumbs a:focus-visible{color:var(--yellow)}
.hero-crumbs [aria-current]{color:#fff}
.hero--page>.hero-content>*{animation:cd-stat-rise 700ms var(--ease-out) backwards}
.hero--page>.hero-content>h1{animation-delay:60ms}
.hero--page>.hero-content>.hero-description{animation-delay:120ms}

/* ---- Stats band ---- */
.hero-stats{--stat-cut:12px;position:relative;z-index:1;margin-top:auto;padding-bottom:64px}
.hero-stats-head{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-family:inherit;font-size:10px;font-weight:800;letter-spacing:2.4px;line-height:1.2;color:#d2e6ff}
.hero-stats-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}

.hero-stat{--stat-tone:var(--cyan);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon value" "icon label";align-items:center;column-gap:12px;row-gap:5px;min-height:76px;padding:14px 16px 13px;
  background:linear-gradient(160deg,#ffffff24,#ffffff08 62%),#0a132670;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  clip-path:polygon(var(--stat-cut) 0,100% 0,100% calc(100% - var(--stat-cut)),calc(100% - var(--stat-cut)) 100%,0 100%,0 var(--stat-cut));
  transition:transform 200ms var(--ease-out);animation:cd-stat-rise 600ms var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 70ms)}
/* The tone bar on the top edge; it runs the full width on hover. */
.hero-stat::before{content:'';position:absolute;top:0;left:var(--stat-cut);width:calc(100% - var(--stat-cut));height:3px;background:var(--stat-tone);transform:scaleX(.34);transform-origin:left;transition:transform 260ms var(--ease-out)}
/* A thin inner edge: box-shadow would be clipped away on the cut corners. */
.hero-stat::after{content:'';position:absolute;inset:0;border:1px solid #ffffff1f;clip-path:inherit;pointer-events:none}
.hero-stat:hover{transform:translateY(-3px)}
.hero-stat:hover::before{transform:scaleX(1)}

.hero-stat-icon{grid-area:icon;display:grid;place-items:center;width:38px;height:38px;font-size:16px;color:var(--stat-tone);background:color-mix(in srgb,var(--stat-tone) 16%,transparent);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:transform 200ms var(--ease-out)}
.hero-stat:hover .hero-stat-icon{transform:scale(1.08)}
.hero-stat-value{grid-area:value;display:block;min-width:0;min-height:1em;font-family:var(--display);font-size:clamp(24px,2.05vw,31px);line-height:1;letter-spacing:.5px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-stat-label{grid-area:label;font-size:10px;font-weight:800;letter-spacing:1.1px;line-height:1.25;text-transform:uppercase;color:#c9d6e8;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

.hero-stat:nth-child(1){--i:0;--stat-tone:var(--purple)}
.hero-stat:nth-child(2){--i:1;--stat-tone:var(--cyan)}
.hero-stat:nth-child(3){--i:2;--stat-tone:var(--yellow)}
.hero-stat:nth-child(4){--i:3;--stat-tone:#7fe0a8}
.hero-stat:nth-child(5){--i:4;--stat-tone:#ff8a70}
.hero-stat:nth-child(6){--i:5;--stat-tone:#f0f4fa}

/* Loading: a shimmer where each number will land. */
.hero-stats[aria-busy=true] .hero-stat-value{position:relative;width:min(100%,5.5ch);color:transparent;background:#ffffff1c}
.hero-stats[aria-busy=true] .hero-stat-value::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff47,transparent);transform:translateX(-100%);animation:cd-stat-shimmer 1.1s linear infinite}
/* A refresh that changed a number gives it a short pop. */
.hero-stat.is-updated .hero-stat-value{animation:cd-stat-pop 420ms var(--ease-out)}

@keyframes cd-stat-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes cd-stat-shimmer{to{transform:translateX(100%)}}
@keyframes cd-stat-pop{40%{transform:scale(1.06);color:var(--stat-tone)}}

@media(max-width:1180px){
  .hero-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:860px){
  .hero--page>.hero-content{padding-top:82px}
  .hero-stats{padding-bottom:58px}
  .hero-stats-grid{gap:10px}
}
@media(max-width:560px){
  .hero-stats{--stat-cut:9px}
  .hero-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hero-stat{column-gap:10px;min-height:68px;padding:11px 12px 10px}
  .hero-stat-icon{width:30px;height:30px;font-size:13px}
  .hero-stat-value{font-size:23px}
  .hero-stat-label{font-size:10px;letter-spacing:.5px}
}