/* Carousel slides, 1080 x 1350. Port of the WASC carousel composer v0.4 grammar:
   88 px margins, header with tick + label + count over a hairline at 145,
   headline at 188 (start 104 px, shrinks to fit 904), body 48/58,
   footer hairline at 1227 with the wordmark at 1251. Brand drives every colour and face. */
.sl {
  position: relative; width: 1080px; height: 1350px; overflow: hidden;
  background: var(--g); color: var(--i);
  font-family: var(--fb); font-size: 48px; line-height: 58px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.sl * { box-sizing: border-box; margin: 0; }

.sl-tick { position: absolute; left: 88px; top: 84px; width: 13px; height: 27px; background: var(--a); }
.sl-label { position: absolute; left: 119px; top: 80px; font: 650 28px/31px var(--fb); font-weight: 600; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; max-width: 700px; overflow: hidden; text-overflow: ellipsis; }
.sl-count { position: absolute; right: 88px; top: 80px; font: 400 28px/31px var(--fb); color: var(--muted); font-variant-numeric: tabular-nums; }
.sl-hair { position: absolute; left: 88px; width: 904px; height: 2px; background: var(--hair); }
.sl-hair.top { top: 145px; }
.sl-hair.bot { top: 1227px; }
.sl-foot { position: absolute; left: 88px; right: 88px; top: 1251px; height: 44px; display: flex; align-items: center; justify-content: space-between; }
.sl-foot img { height: 40px; width: auto; max-width: 420px; object-fit: contain; object-position: left center; display: block; }
.sl-foot .nm { font: 700 30px/1 var(--fh); letter-spacing: -.01em; }
.sl-foot .sw { font: 400 26px/1 var(--fb); color: var(--muted); }

.sl-c { position: absolute; left: 88px; top: 188px; width: 904px; height: 1000px; display: flex; flex-direction: column; }

.sl-h { font-family: var(--fh); font-weight: 700; font-size: 104px; line-height: .98; letter-spacing: -.03em; overflow-wrap: break-word; }
.sl-b { font-family: var(--fb); font-size: 48px; line-height: 1.21; letter-spacing: -.005em; max-width: 883px; }
.sl-mark {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  color: var(--on-a); padding: 0 .07em; margin: 0 -.03em;
  background: linear-gradient(-.5deg, transparent 13%, var(--a) 13%, var(--a) 92%, transparent 92%);
}

/* cover */
.k-cover .sl-c { justify-content: flex-start; }
.k-cover .sl-h { font-size: 128px; }
.k-cover .sl-b { margin-top: 59px; color: var(--i); font-size: 52px; }
.k-cover .swipe { margin-top: auto; align-self: flex-end; font: 500 30px/1 var(--fb); color: var(--muted); display: flex; align-items: center; gap: 14px; }
.k-cover .swipe i { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--a); color: var(--on-a); font-style: normal; font: 700 30px/1 var(--fh); }

/* point */
.k-point .num { align-self: flex-start; font: 700 300px/.9 var(--fh); letter-spacing: -.05em; font-variant-numeric: tabular-nums; margin-left: -.04em; }
.k-point .num span { padding: 0 .06em; }
.k-point .sl-h { margin-top: auto; font-size: 96px; }
.k-point .sl-b { margin-top: 44px; font-size: 50px; }

/* quote */
.k-quote .sl-c { justify-content: center; }
.k-quote .panel { margin-top: 0; background: var(--mineral); padding: 70px 64px 64px; position: relative; }
.k-quote .qm { position: absolute; left: 52px; top: -70px; font: 700 220px/1 var(--fh); color: var(--a); -webkit-text-stroke: 0; }
.k-quote .sl-h { font-size: 74px; line-height: 1.08; letter-spacing: -.02em; font-weight: 600; }
.k-quote .by { margin-top: 44px; font: 600 28px/1.2 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 16px; }
.k-quote .by::before { content: ""; width: 40px; height: 2px; background: var(--muted); }

/* end */
.k-end .sl-h { font-size: 112px; }
.k-end .logo { margin-top: auto; max-width: 620px; max-height: 150px; object-fit: contain; object-position: left center; display: block; }
.k-end .cta { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; background: var(--mineral); padding: 44px 48px; }
.k-end .logo + .cta { margin-top: 48px; }
.k-end .cta span { font: 700 50px/1.12 var(--fh); letter-spacing: -.015em; }
.k-end .cta i { flex: none; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--a); color: var(--on-a); font: 700 48px/1 var(--fh); font-style: normal; }
.k-end.no-logo .cta { margin-top: auto; }
.sl-foot img.sq { height: 76px; margin-top: -18px; }
.k-end .logo.sq { max-height: 220px; }