/* K13 Reviews: "What clients say" heading over a deck of review screenshots.
 * Without JavaScript (or with reduced motion) the deck is shown fanned out;
 * reviews.js pins the stage and deals the cards onto it while scrolling. */
.k13-tweets {
  --tweets-step: 1.9em;
  z-index: 1;
  position: relative;
  background-color: var(--color-light);
  padding: calc(var(--section-padding) * .6) 0 calc(var(--section-padding) * .75);
}
.k13-tweets.is--k13-stacking {
  padding: 0;
}
.k13-tweets.is--k13-stacking .k13-tweets__pin {
  height: calc(100svh + (var(--k13-tweets-count) - 1) * 55svh);
}
.k13-tweets__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--container-padding, 2.5em);
}
.k13-tweets.is--k13-stacking .k13-tweets__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  justify-content: center;
  padding-top: 4.5em;
  overflow: clip;
}

/* Heading */
.k13-tweets__head {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.k13-tweets p.k13-tweets__eyebrow {
  display: flex;
  align-items: center;
  gap: 1.6em;
  margin: 0 0 1.4em;
  font-size: .95em;
  font-weight: 500;
  letter-spacing: .32em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-dark);
}
.k13-tweets p.k13-tweets__eyebrow > span:not(.k13-tweets__eyebrow-line) {
  margin-right: -.32em; /* balance the trailing letter-spacing */
}
.k13-tweets__eyebrow-line {
  display: block;
  width: 3.6em;
  height: 1.5px;
  background-color: currentColor;
}
.k13-body .k13-tweets .k13-tweets__h2,
.k13-tweets .k13-tweets__h2 {
  margin: 0;
  font-size: min(8.25em, 13svh);
  font-weight: 500 !important;
  letter-spacing: -.055em !important;
  line-height: .95 !important;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--color-dark);
}

/* Deck */
.k13-tweets__deck {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-items: start;
  width: 100%;
  margin-top: 1.25em;
  padding-top: calc(var(--tweets-step) * 3); /* room for the cards fanned behind */
}
.k13-tweet-card.is--review {
  --r: -3deg;
  --x: 0em;
  grid-area: 1 / 1;
  z-index: var(--i);
  width: min(40em, 88%, 78svh);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform-origin: 50% 60%;
  /* Fanned resting state; reviews.js animates from here. */
  transform: translate(var(--x), calc(min(var(--d), 3) * var(--tweets-step) * -1)) rotate(var(--r)) scale(calc(1 - min(var(--d), 3) * .04));
  opacity: clamp(0, calc(4 - var(--d)), 1);
  /* No permanent will-change: it kept each card as a bitmap rasterised mid-animation,
     so the screenshots looked soft once the deck settled (Markup #137). */
}
.k13-tweets.is--k13-stacking .k13-tweet-card.is--review {
  transform: none;
  opacity: 1;
}
.k13-tweet-card.is--review:nth-child(5n + 2) { --r: 4deg;  --x: -1.4em; }
.k13-tweet-card.is--review:nth-child(5n + 3) { --r: -5deg; --x: 1.2em; }
.k13-tweet-card.is--review:nth-child(5n + 4) { --r: 2.5deg; --x: -.8em; }
.k13-tweet-card.is--review:nth-child(5n + 5) { --r: -1.5deg; --x: 1.6em; }
.k13-tweet-card__shot {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.25em 2em rgba(32, 73, 60, .13)) drop-shadow(0 .2em .4em rgba(32, 73, 60, .08));
}

@media screen and (max-width: 991px) {
  .k13-tweets .k13-tweets__h2 {
    font-size: min(6.5em, 11svh);
  }
}
@media screen and (max-width: 767px) {
  .k13-tweets {
    --tweets-step: 1.4em;
  }
  .k13-tweets__stage {
    padding: 0 1em;
  }
  .k13-tweets.is--k13-stacking .k13-tweets__stage {
    padding-top: 3.5em;
  }
  .k13-tweets p.k13-tweets__eyebrow {
    gap: 1em;
    font-size: .8em;
    letter-spacing: .26em;
  }
  .k13-tweets__eyebrow-line {
    width: 2.25em;
  }
  .k13-tweets .k13-tweets__h2 {
    font-size: min(4.25em, 9svh);
  }
  .k13-tweet-card.is--review {
    width: min(92%, 70svh);
  }
}

/* Phone: keep "client love" inside the screen. */
@media screen and (max-width: 767px) {
  .k13-body .k13-tweets .k13-tweets__h2,
  .k13-tweets .k13-tweets__h2 {
    font-size: min(4.25em, 9svh, 15vw);
  }
}

/* ------------------------------------------------------------------
 * Reel beside the deck (Markup #144): heading and cards on the left,
 * an Instagram-style phone on the right that stays in view while the
 * cards are dealt. Below 992px the reel follows the pinned deck.
 * ---------------------------------------------------------------- */
.k13-tweets.has--k13-reel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 2em;
  padding-right: var(--container-padding-l, 6.75em);
}
.k13-tweets.has--k13-reel:not(.is--k13-stacking) {
  align-items: center;
}
/* Narrower left column: keep "500+ Projects Completed" on one line. */
.k13-tweets.has--k13-reel p.k13-tweets__eyebrow {
  white-space: nowrap;
}
@media screen and (max-width: 1279px) {
  .k13-tweets.has--k13-reel p.k13-tweets__eyebrow {
    gap: 1em;
    letter-spacing: .24em;
  }
  .k13-tweets.has--k13-reel .k13-tweets__eyebrow-line {
    width: 2em;
  }
}
.k13-tweets.has--k13-reel.is--k13-stacking {
  padding-right: var(--container-padding-l, 6.75em);
}
.k13-tweets__reel-col {
  position: relative;
  min-width: 0;
}
.k13-tweets.is--k13-stacking .k13-tweets__reel-sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
  padding-top: 4.5em;
  box-sizing: border-box;
}

.k13-reel {
  --reel-ink: #FFFCF2;
  position: relative;
  height: min(44em, calc(100svh - 9em));
  aspect-ratio: 9 / 16;
  padding: .45em;
  border: 2px solid var(--color-green, #20493C);
  border-radius: 2.6em;
  background-color: var(--color-light, #FEFAF2);
  box-shadow: 0 2em 3.5em rgba(32, 73, 60, .16), 0 .3em .8em rgba(32, 73, 60, .08);
  box-sizing: border-box;
}
.k13-reel__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2.15em;
  background-color: #10221C;
  color: var(--reel-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  isolation: isolate;
}
.k13-reel.is--k13-embed .k13-reel__screen {
  background-color: #fff;
}
.k13-reel__video,
.k13-reel__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.k13-reel__video {
  object-fit: cover;
  cursor: pointer;
}
/* Soft shade top and bottom so the overlays stay readable on any frame. */
.k13-reel[data-k13-reel] .k13-reel__screen::before,
.k13-reel[data-k13-reel] .k13-reel__screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.k13-reel[data-k13-reel] .k13-reel__screen::before {
  top: 0;
  height: 22%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent);
}
.k13-reel[data-k13-reel] .k13-reel__screen::after {
  bottom: 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
}
.k13-reel__icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
}
/* Readable over light frames of the video too. */
.k13-reel__top,
.k13-reel__side,
.k13-reel__time,
.k13-reel__btn .k13-reel__icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

/* Header */
.k13-reel__top {
  position: absolute;
  z-index: 2;
  top: 1.25em;
  left: 1.15em;
  right: 1.15em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75em;
}
.k13-reel__who {
  display: flex;
  align-items: center;
  gap: .75em;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.k13-reel__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.1em;
  height: 3.1em;
  overflow: hidden;
  border-radius: 50%;
  background-color: #fff;
}
.k13-reel__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.k13-reel__avatar img.is--k13-logo {
  width: 74%;
  height: auto;
  object-fit: contain;
  /* Cream logo file, shown green on the white disc. */
  filter: brightness(0) saturate(100%) invert(22%) sepia(17%) saturate(1105%) hue-rotate(110deg) brightness(93%) contrast(89%);
}
.k13-reel__names {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.k13-reel__name {
  font-size: 1.15em;
  font-weight: 600;
}
.k13-reel__sub {
  font-size: .78em;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}

/* Side actions */
.k13-reel__side {
  position: absolute;
  z-index: 2;
  right: .9em;
  bottom: 9.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.k13-reel__side li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2em;
  margin: 0;
  font-size: .8em;
}
.k13-reel__side .k13-reel__icon {
  width: 2.1em;
  height: 2.1em;
}
.k13-reel__share {
  color: inherit;
}

/* Caption */
.k13-reel p.k13-reel__caption {
  position: absolute;
  z-index: 2;
  left: 1em;
  right: 4.25em;
  bottom: 5.6em;
  margin: 0;
  padding: .7em .9em;
  border-radius: .75em;
  background-color: rgba(16, 34, 28, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: .95em;
  line-height: 1.35;
  color: var(--reel-ink);
}

/* Progress + controls */
.k13-reel__bar {
  position: absolute;
  z-index: 2;
  left: 1.1em;
  right: 1.1em;
  bottom: 1em;
}
.k13-reel__progress {
  display: flex;
  align-items: center;
  gap: .8em;
}
.k13-reel__track {
  position: relative;
  flex: 1 1 auto;
  height: 1.1em;
  cursor: pointer;
  touch-action: none;
}
.k13-reel__track::before,
.k13-reel__fill {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
}
.k13-reel__track::before {
  background-color: rgba(255, 252, 242, .35);
}
.k13-reel__fill {
  background-color: var(--reel-ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.k13-reel__track:focus-visible {
  outline: 2px solid var(--reel-ink);
  outline-offset: 2px;
  border-radius: 4px;
}
.k13-reel__time {
  flex: none;
  min-width: 2.6em;
  font-size: .85em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.k13-reel__controls {
  display: flex;
  align-items: center;
  gap: .35em;
  margin-top: .35em;
}
.k13-reel__spacer {
  flex: 1 1 auto;
}
.k13-reel .k13-reel__btn {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  margin: 0 -.4em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--reel-ink);
  cursor: pointer;
  transition: background-color .2s ease;
}
.k13-reel .k13-reel__btn:hover {
  background-color: rgba(255, 252, 242, .14);
}
.k13-reel .k13-reel__btn:focus-visible {
  outline: 2px solid var(--reel-ink);
  outline-offset: 1px;
}
.k13-reel__btn .k13-reel__icon {
  width: 1.6em;
  height: 1.6em;
}
.k13-reel[data-k13-reel-playing="true"] .k13-reel__btn .is--play,
.k13-reel[data-k13-reel-playing="false"] .k13-reel__btn .is--pause,
.k13-reel[data-k13-reel-muted="true"] .k13-reel__btn .is--sound,
.k13-reel[data-k13-reel-muted="false"] .k13-reel__btn .is--muted {
  display: none;
}

/* Tablet and phone: the reel follows the pinned deck, centred. */
@media screen and (max-width: 991px) {
  .k13-tweets.has--k13-reel,
  .k13-tweets.has--k13-reel.is--k13-stacking {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
  }
  .k13-tweets.is--k13-stacking .k13-tweets__reel-sticky {
    position: static;
    height: auto;
    padding-top: 0;
  }
  .k13-tweets__reel-sticky {
    display: flex;
    justify-content: center;
    padding: 3em 1em calc(var(--section-padding) * .5);
  }
  .k13-reel {
    width: min(24em, 86vw, calc(86svh * 9 / 16));
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .k13-reel {
    font-size: .9em;
    border-radius: 2.2em;
  }
  .k13-reel__screen {
    border-radius: 1.8em;
  }
}

/* Just the video (Markup #150): no phone frame, overlays or shading. */
.k13-reel.is--k13-plain {
  padding: 0;
  border: 0;
  border-radius: 1.6em;
  background-color: transparent;
  box-shadow: none;
}
.k13-reel.is--k13-plain .k13-reel__screen {
  border-radius: inherit;
}
.k13-reel.is--k13-plain .k13-reel__screen::before,
.k13-reel.is--k13-plain .k13-reel__screen::after {
  content: none;
}
/* Time bar + play / pause over the plain video (Markup #159). */
.k13-reel.is--k13-plain .k13-reel__bar {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5em 1.1em .7em;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  color: #FFFCF2;
  --reel-ink: #FFFCF2;
}
@media screen and (max-width: 767px) {
  .k13-reel.is--k13-plain {
    border-radius: 1.25em;
  }
}