@font-face{font-family:Anton;src:url(fonts/anton-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#f7f7f7;
  --ink:#414141;
  --blue:#2183ea;
  --cyan:#2a9cd6;
  --red:#dd2e2d;
  --maroon:#9e2b22;
  --yellow:#fbe303;
  --dark:#333233;
  --rule:#dedede;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#ededeb;
  color:var(--ink);
  font-family:Poppins,"Segoe UI",system-ui,sans-serif;
  font-size:16px;
  line-height:1.42;
}
.col{
  width:min(100%,780px);
  margin:0 auto;
  background:var(--paper);
  container-type:inline-size;
  overflow:hidden;
}
img{max-width:100%;height:auto}
img.full{display:block;width:100%}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

a{color:inherit}
a:focus-visible,.tile:focus-visible,.vtile:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------------------------------------------------------- headlines */
.hl{
  font-family:Anton,"Arial Narrow",Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.94;
  margin:.28em 0 .3em;
  letter-spacing:.005em;
}
.hl span{display:block}
.hl i{font-style:normal}
.hl.inline span{display:inline}
.hl.inline span+span{margin-left:.16em}
.hl.center{text-align:center}
.hl.right{text-align:right}
.hl.pull{margin-top:-1.2cqw}
h2,h3{margin:0}
.c-blue,.c-blue i{color:var(--blue)}
.c-cyan,.c-cyan i{color:var(--cyan)}
.c-ink,.c-ink i{color:var(--ink)}
.c-red,.c-red i{color:var(--red)}
.c-white{color:#fff}
.up{text-transform:uppercase}

/* ---------------------------------------------------------- body copy */
.body{
  margin:.55em 0;
  padding:0 6.2cqw;
  font-size:clamp(14px,2.3cqw,18px);
  line-height:1.45;
}
.body strong{font-weight:600}
.quote{color:var(--ink);margin-top:1.1em}
.quote .q{color:var(--red);font-weight:700}
.attrib{margin-top:.2em;font-size:clamp(13px,2.2cqw,17px)}

.rule{border:0;border-top:1px solid var(--rule);margin:clamp(18px,3.4cqw,38px) 6.2cqw}

.story{padding:clamp(6px,1.4cqw,18px) 0 clamp(10px,2cqw,24px)}

/* ---------------------------------------------------------- buttons */
.btn,.btn.as-span{
  display:inline-block;
  background:var(--yellow);
  color:#2b2b2b;
  text-decoration:none;
  font-weight:400;
  font-size:clamp(12px,2.05cqw,16px);
  letter-spacing:.02em;
  padding:.78em 1.7em;
  min-height:44px;
  line-height:1.55;
  border-radius:2px;
}
.btn b{font-weight:700}
.btn:hover{filter:brightness(.95)}
.center{text-align:center}

.videolink{display:block;text-align:center;text-decoration:none;margin:2.6cqw 0}
.videolink img{width:47%;margin:0 auto .9cqw;display:block;border-radius:2px}
.videolink.wide img{width:100%;border-radius:0;margin-bottom:0}
.videolink.wide .as-span{margin-top:-1px;border-radius:0}

/* ---------------------------------------------------------- split rows */
.split{display:flex;align-items:flex-start;gap:2.5cqw}
.split-img{flex:0 0 54%}
.split-img.w50{flex:0 0 50%}
.split-img.w38{flex:0 0 38%}
.split-txt{flex:1;min-width:0}
.split-hero .split-txt{padding-top:3cqw;padding-right:4cqw}
.split-mid{margin-top:2cqw;align-items:center}
.split-mid .split-txt{padding-right:6cqw}
.split-mid .body{padding:0;font-weight:400}
.split-mid .btn{margin-top:1.2cqw}

/* ---------------------------------------------------------- overlay heroes */
.overlay{position:relative}
.overlay .over{position:absolute;margin:0}
.over-6{left:7.2%;top:5.4%}
.over-7{left:9%;top:.2%}

/* ---------------------------------------------------------- eyebrow rule */
.eyebrow{display:flex;align-items:center;gap:2.4cqw;margin:clamp(16px,3.6cqw,40px) 6.2cqw}
.eyebrow:before,.eyebrow:after{content:"";flex:1;height:2px;background:var(--maroon)}
.eyebrow span{
  font-family:Anton,"Arial Narrow",Impact,sans-serif;
  color:var(--maroon);
  font-size:clamp(19px,4.4cqw,36px);
  letter-spacing:.03em;
  line-height:1;
}

/* ---------------------------------------------------------- showcase */
.hero-cap{display:block;text-decoration:none;margin-top:1.6cqw}
.hero-cap img{display:block;width:100%}
.hero-cap-txt{
  display:block;
  background:linear-gradient(180deg,#2b2624 0,#0d0d0c 42%,#0b0b0b 100%);
  font-family:Anton,"Arial Narrow",Impact,sans-serif;
  text-transform:uppercase;
  text-align:center;
  line-height:1.16;
  font-size:clamp(15px,3.5cqw,27px);
  padding:1.4cqw 7cqw 3.4cqw;
}
.tiles{display:grid;gap:2.4cqw;margin:2.6cqw 8.2%}
.tile{display:block;text-decoration:none}
.tile img{display:block;width:100%}
.tile .cap{
  display:block;
  background:#161616;
  color:#fff;
  font-size:clamp(10px,1.75cqw,14px);
  line-height:1.35;
  padding:.85em 1.2em;
  min-height:44px;
}
.subscribe{display:block;margin:3cqw 8.2%}
.subscribe img{display:block;width:100%}

/* ---------------------------------------------------------- dark bars + video grids */
.darkbar{
  background:var(--dark);
  color:#fff;
  text-align:center;
  font-weight:600;
  font-size:clamp(12px,2.15cqw,17px);
  line-height:1.35;
  padding:1.5cqw 2.4cqw;
  margin:clamp(16px,3.4cqw,36px) 8.4% clamp(10px,2.4cqw,24px);
  border-radius:2px;
}
.vtiles{display:grid;gap:2.6cqw 2.4cqw;margin:0 8.4% 2cqw}
.vtiles.three{grid-template-columns:repeat(3,1fr)}
.vtiles.two{grid-template-columns:repeat(2,1fr);gap:2.6cqw 3.6cqw}
.vtile{display:block;text-decoration:none}
.vtile img{display:block;width:100%;border-radius:2px}
.vcap{
  display:block;
  text-align:center;
  font-size:clamp(10px,1.6cqw,13px);
  line-height:1.35;
  margin-top:.6em;
  min-height:2.6em;
}

/* ---------------------------------------------------------- 2024 in numbers */
.numbers{
  display:flex;align-items:center;gap:4cqw;flex-wrap:wrap;
  margin:clamp(16px,3.4cqw,38px) 8.4% 0;
  padding:clamp(14px,3cqw,30px) clamp(14px,3.2cqw,32px);
  border-top:3px solid var(--cyan);
  background:#f1f1ef;
}
.numbers-title{flex:0 0 auto;margin:0;line-height:.88;text-align:left}
.numbers-title span{display:block}
.numbers-title .big{font-size:clamp(38px,8.4cqw,66px)}
.numbers-title .c-ink{font-size:clamp(15px,3.3cqw,26px)}
.numbers-list{list-style:none;margin:0;padding:0;flex:1 1 60%;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw 2cqw}
.numbers-list li{display:flex;flex-direction:column}
.n-label{font-size:clamp(10px,1.7cqw,13px);font-weight:500;line-height:1.25}
.n-value{
  font-family:Anton,"Arial Narrow",Impact,sans-serif;
  color:var(--cyan);
  font-size:clamp(22px,4.1cqw,34px);
  line-height:1.05;
}

/* ---------------------------------------------------------- footer */
.foot{padding-bottom:clamp(18px,3.4cqw,36px)}
.social{display:block;width:31%;margin:0 auto}

/* ---------------------------------------------------------- narrow screens */
@container (max-width:560px){
  .split{display:block}
  .split-img,.split-img.w50,.split-img.w38{width:66%;margin:0 auto}
  .split-hero .split-txt,.split-mid .split-txt{padding:2cqw 6.2cqw 0}
  .hl.right{text-align:center}
  .split-hero .hl{text-align:center}
  .split-mid{margin-top:3cqw}
  .split-mid .split-txt{text-align:center}
  .videolink img{width:74%}
  .numbers{display:block}
  .numbers-title{text-align:center;margin-bottom:3cqw}
  .numbers-list{grid-template-columns:repeat(2,1fr);gap:4cqw 3cqw}
}
@container (max-width:520px){
  .vtiles.three{grid-template-columns:repeat(2,1fr)}
}
@container (max-width:340px){
  .vtiles.three,.vtiles.two{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  a{transition:filter .15s ease}
}