/* =====================================================================
   Kareva: reusable sections
   1. What clients say  (.kv-voices)
   2. In numbers        (.kv-numbers)
   Both work on the home page and through the shortcodes.
   ===================================================================== */


/* =====================================================================
   1. WHAT CLIENTS SAY
   ===================================================================== */

.kv-voices {
  --kv-bg: #f7f4ed;
  --kv-ink: #161513;
  --kv-red: #e2333d;

  position: relative;
  overflow: hidden;
  overflow: clip;
  padding: clamp(96px, 10vw, 168px) 0 clamp(120px, 12vw, 200px);
  background: var(--kv-bg);
}

.kv-voices:has(+ .kv-numbers) {
  padding-bottom: clamp(40px, 5vw, 90px);
  color: var(--kv-ink);
}


/* ---------- branches around the section ---------- */

.kv-branch.kv-voices-sprig {
  position: absolute;
  z-index: 0;
}

/* enters from the right edge above the headline */
.kv-voices-sprig--right {
  top: clamp(10px, 2vw, 34px);
  right: -2vw;
  width: clamp(220px, 27vw, 470px);
  transform: scaleX(-1);
}

/* enters from the left edge, low behind the cards */
.kv-voices-sprig--left {
  bottom: clamp(30px, 5vw, 80px);
  left: -3vw;
  width: clamp(200px, 24vw, 420px);
  transform: rotate(-6deg);
  opacity: .9;
}

.kv-voices-head,
.kv-voices-cards {
  position: relative;
  z-index: 1;
}

/* ---------- headline + sticker ---------- */

.kv-voices-head {
  position: relative;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
}

.kv-voices-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: "Parkinsans", sans-serif;
  font-size: clamp(46px, 8.4vw, 120px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.045em;
  text-align: center;
  color: var(--kv-ink);
}

.kv-voices-line {
  display: block;
  white-space: nowrap;
  padding-bottom: .04em; /* room for descenders inside the letter masks */
}

/* letters rise out of their own masks (sections.js splits the text) */
.kv-l {
  display: inline-block;
  overflow: hidden;
  overflow: clip;
  vertical-align: top;
  padding: .06em .02em .26em;
  margin: -.06em -.02em -.26em;
}

.kv-l-i {
  display: inline-block;
  will-change: transform;
}

.kv-voices-badge {
  --tilt: -9deg;

  position: absolute;
  z-index: 3;
  top: 6%;
  left: -3%;
  margin: 0;
  padding: .62em 1.15em .58em;
  background: var(--kv-red);
  color: #fff;
  font-family: "Parkinsans", sans-serif;
  font-size: clamp(13px, 1.75vw, 28px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(var(--tilt));
  box-shadow: 0 18px 36px -18px rgba(120, 18, 24, .55);
}


/* ---------- cards ---------- */

.kv-voices-cards {
  /* card width shrinks with the number of cards so the fan always fits */
  --w: clamp(220px, calc((100vw - 140px) / (.8 * var(--n, 4) + .2)), 400px);
  --ov: calc(var(--w) * .2);

  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(56px, 7vw, 110px);
  padding: 40px 24px;
}

.kv-voices-cards + .kv-voices-cards {
  margin-top: 0;
}

.kv-card {
  --card-bg: #e9e3d8;
  --card-ink: #161513;
  --card-soft: rgba(22, 21, 19, .62);
  --star: var(--kv-red);

  position: relative;
  z-index: calc(var(--i, 0) + 1);
  flex: 0 0 var(--w);
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: var(--w);
  min-height: calc(var(--w) * 1.4);
  margin: 0 0 0 calc(var(--ov) * -1);
  padding: clamp(24px, calc(var(--w) * .08), 34px);
  border-radius: clamp(26px, calc(var(--w) * .1), 40px);
  background: var(--card-bg);
  color: var(--card-ink);
  transform: translateY(var(--lift, 0)) rotate(var(--r, 0deg));
  transform-origin: 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 34px 60px -34px rgba(22, 21, 19, .45);
}

.kv-card:first-child {
  margin-left: 0;
}

/* the hovered card (sections.js) */
.kv-card {
  transition: box-shadow .5s ease, filter .5s ease;
}

.kv-card.is-pop {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 60px 90px -40px rgba(22, 20, 84, .55),
    0 18px 36px -18px rgba(22, 21, 19, .35);
}

@media (hover: hover) and (min-width: 761px) {
  .kv-voices-cards:hover .kv-card:not(.is-pop) {
    filter: saturate(.85) brightness(.97);
  }
}

.kv-card--stone {
  --card-bg: #ece4d4;
}

.kv-card--ochre {
  --card-bg: #e8c58f;
  --card-ink: #2a1a12;
  --card-soft: rgba(42, 26, 18, .68);
}

.kv-card--brown {
  --card-bg: #995643;
  --card-ink: #fbf3e4;
  --card-soft: rgba(251, 243, 228, .72);
  --star: #f0c16f;
}

.kv-card--navy {
  --card-bg: #161454;
  --card-ink: #f3eee4;
  --card-soft: rgba(243, 238, 228, .66);
  --star: #f0c16f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 34px 60px -30px rgba(22, 20, 84, .6);
}

.kv-stars {
  display: flex;
  gap: 5px;
}

.kv-stars svg {
  width: clamp(17px, calc(var(--w) * .056), 22px);
  height: auto;
  fill: var(--star);
}

.kv-stars svg.is-off {
  opacity: .22;
}

.kv-quote {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  margin: 0;
}

.kv-quote p {
  margin: 0;
  font-family: "Figtree", sans-serif;
  font-size: clamp(15.5px, calc(var(--w) * .055), 22px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.005em;
}

.kv-person {
  display: flex;
  align-items: center;
  gap: 14px;
}

.kv-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(44px, calc(var(--w) * .14), 56px);
  height: clamp(44px, calc(var(--w) * .14), 56px);
  overflow: hidden;
  border-radius: 50%;
  background: rgba(22, 21, 19, .1);
  font-family: "Parkinsans", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.kv-card--navy .kv-avatar,
.kv-card--brown .kv-avatar {
  background: rgba(243, 238, 228, .14);
}

.kv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.kv-person-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.kv-name {
  font-family: "Parkinsans", sans-serif;
  font-size: clamp(15px, calc(var(--w) * .045), 18px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.kv-role {
  color: var(--card-soft);
  font-family: "Figtree", sans-serif;
  font-size: clamp(13px, calc(var(--w) * .036), 14.5px);
  line-height: 1.35;
}


/* ---------- phones: a loose stack ---------- */

@media (max-width: 760px) {

  .kv-voices-sprig--right {
    top: 18px;
    width: 220px;
    right: -60px;
  }

  .kv-voices-sprig--left {
    display: none;
  }

  .kv-voices-badge {
    left: -2%;
    top: -30%;
  }

  .kv-voices-cards {
    --w: 100%;

    flex-direction: column;
    align-items: stretch;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 20px 0;
  }

  .kv-card {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    margin: -14px 0 0;
    padding: 26px 24px 24px;
    border-radius: 28px;
    transform: rotate(calc(var(--r, 0deg) * .4));
  }

  .kv-card:first-child {
    margin-top: 0;
  }

  .kv-quote p {
    font-size: 17px;
  }

  .kv-stars svg {
    width: 19px;
  }

  .kv-avatar {
    width: 48px;
    height: 48px;
  }

  .kv-name {
    font-size: 16px;
  }

  .kv-role {
    font-size: 14px;
  }
}


/* =====================================================================
   2. IN NUMBERS
   Brand-navy band, softly curved edges, a branch with the perched sparrow
   along the top, cream cards with navy numbers and red suffixes.
   ===================================================================== */

.kv-numbers {
  --band: #161454;
  --edge-top: #f7f4ed;
  --edge-bottom: #f7f4ed;
  --cream: #f7f4ed;
  --ochre: #f0c16f;
  --kv-red: #e2333d;

  position: relative;
  background: var(--edge-top);
  color: var(--cream);
}

/* ---------- top: branch over a curved edge ---------- */

.kv-numbers-top {
  position: relative;
  padding-top: clamp(40px, 6vw, 90px);
  background: var(--edge-top);
}

/* straight after the testimonials, the branch tucks up under the cards */
.kv-voices + .kv-numbers .kv-numbers-top {
  padding-top: 0;
}

.kv-branch {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.kv-branch > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.kv-branch--long {
  width: min(100%, 1600px);
  margin-bottom: calc(clamp(30px, 4.2vw, 64px) * -1); /* leaves dip over the band */
}

.kv-edge {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: clamp(48px, 6.4vw, 92px);
  overflow: hidden;
}

.kv-edge--bottom {
  background: var(--band);
}

/* three wave layers drift sideways at different speeds; each path is two
   identical periods wide, so sliding it by one period loops seamlessly */
.kv-w {
  animation: kvDrift var(--dur, 24s) linear infinite;
  animation-direction: var(--dir, normal);
  will-change: transform;
}

@keyframes kvDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-1440px); }
}

/* the sparrow's small idle life: tail flicks, blinks, breathes, turns */
.kv-bird .bird-tail,
.kv-bird .bird-eye,
.kv-bird .bird-torso,
.kv-bird .bird-wing-near,
.kv-bird-turn {
  transform-box: fill-box;
}

.kv-bird .bird-tail {
  transform-origin: 0% 20%;
  animation: kvTail 5.5s ease-in-out infinite;
}

@keyframes kvTail {
  0%, 70%, 100% { transform: none; }
  74%           { transform: rotate(-9deg); }
  78%           { transform: rotate(3deg); }
  82%           { transform: none; }
}

.kv-bird .bird-eye {
  transform-origin: 50% 50%;
  animation: kvBlink 4.8s steps(1) infinite;
}

@keyframes kvBlink {
  0%, 96%, 100% { transform: none; }
  97%           { transform: scaleY(.1); }
}

.kv-bird .bird-torso {
  transform-origin: 50% 100%;
  animation: kvBreathe 3.2s ease-in-out infinite;
}

@keyframes kvBreathe {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.015, 1.03); }
}

.kv-bird .bird-wing-near {
  transform-origin: 10% 10%;
  animation: kvRuffle 9s ease-in-out infinite;
}

@keyframes kvRuffle {
  0%, 86%, 100% { transform: none; }
  89%           { transform: rotate(-6deg); }
  92%           { transform: rotate(2deg); }
  95%           { transform: none; }
}

/* sections.js flips the sparrow to face the way the page is scrolling */
.kv-bird-turn {
  transform-origin: 50% 50%;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}

.kv-bird-turn.is-turned {
  transform: scaleX(-1);
}

/* leaves sway from their base; the sparrow hops now and then */
.kv-branch .lf,
.kv-branch .lf-s {
  transform-box: view-box;
  transform-origin: 0 0;
}

.kv-branch .lf-s {
  animation: kvSway 6s ease-in-out infinite alternate;
}

.kv-branch g:nth-child(3n) > .lf > .lf-s { animation-duration: 7.5s; animation-delay: -2s; }
.kv-branch g:nth-child(3n+1) > .lf > .lf-s { animation-duration: 5.2s; animation-delay: -4s; }

@keyframes kvSway {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(6deg); }
}

.kv-bird {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: kvHop 7s cubic-bezier(.3, 0, .3, 1) infinite;
}

@keyframes kvHop {
  0%, 62%, 100% { transform: none; }
  66%           { transform: translateY(-7px) rotate(-3deg); }
  70%           { transform: none; }
  80%           { transform: rotate(4deg); }   /* a little peck */
  84%           { transform: none; }
}

/* ---------- the band ---------- */

.kv-numbers-body {
  position: relative;
  background: var(--band);
  margin: -1px 0;            /* no hairline between the edges and the band */
  padding: clamp(64px, 7vw, 120px) 0 clamp(64px, 7vw, 120px);
  overflow: hidden;
}

.kv-numbers-wrap {
  position: relative;
  width: min(1488px, calc(100% - clamp(32px, 5.6vw, 96px)));
  margin: 0 auto;
}

.kv-numbers-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 20px;
}

.kv-numbers-title {
  grid-column: 1 / span 7;
  margin: 0;
  font-family: "Parkinsans", sans-serif;
  font-size: clamp(40px, 4.4vw, 68px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--cream);
}

.kv-numbers-title span {
  display: block;
}

.kv-numbers-title span + span {
  color: var(--ochre);
}

.kv-numbers-intro {
  grid-column: 9 / span 4;
  max-width: 440px;
  margin: 0;
  font-family: "Figtree", sans-serif;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: rgba(247, 244, 237, .74);
}

.kv-numbers-cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 20px;
  margin: clamp(48px, 6.5vw, 100px) 0 0;
  padding: 0;
  list-style: none;
}

.kv-numbers-cards > li {
  display: flex;
}

.kv-num-card {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: clamp(300px, 25vw, 360px);
  padding: clamp(24px, 2.3vw, 34px);
  border-radius: 24px;
  background: var(--cream);
  color: #161454;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .55);
}

/* a single leaf in the corner, one colour per card */
.kv-num-leaf {
  position: absolute;
  top: clamp(24px, 2.3vw, 34px);
  right: clamp(24px, 2.3vw, 34px);
  width: 34px;
  height: auto;
  fill: #96a7af;
  transform: rotate(-32deg);
  transform-origin: 0 50%;
}

.kv-numbers-cards > li:nth-child(4n+2) .kv-num-leaf { fill: #d19559; transform: rotate(-18deg); }
.kv-numbers-cards > li:nth-child(4n+3) .kv-num-leaf { fill: #afbec5; transform: rotate(-40deg); }
.kv-numbers-cards > li:nth-child(4n+4) .kv-num-leaf { fill: #e0b06f; transform: rotate(-26deg); }

.kv-num {
  display: flex;
  align-items: flex-end;
  margin: 0;
  font-family: "Parkinsans", sans-serif;
  font-size: clamp(64px, 6.6vw, 104px);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.055em;
  color: #161454;
}

/* the final value sits invisibly underneath, so counting never shifts the layout */
.kv-num-figure {
  display: inline-grid;
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

.kv-num-ghost,
.kv-num-value {
  grid-area: 1 / 1;
}

.kv-num-ghost {
  visibility: hidden;
}

.kv-num-affix {
  margin-left: .1em;
  font-size: .5em;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--kv-red);
}

.kv-num-affix:first-child {
  margin: 0 .06em 0 0;
}

.kv-num-text {
  max-width: 300px;
  margin: 0;
  font-family: "Figtree", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #5d5650;
}

@media (max-width: 1100px) {

  .kv-numbers-title {
    grid-column: 1 / span 6;
  }

  .kv-numbers-intro {
    grid-column: 7 / span 6;
  }

  .kv-numbers-cards {
    grid-template-columns: repeat(min(var(--cols, 4), 2), minmax(0, 1fr));
  }
}

@media (max-width: 680px) {

  /* on phones the branch is cropped to the sparrow and its nearest leaves */
  .kv-numbers-top {
    overflow: hidden;
  }

  .kv-branch--long {
    width: 210%;
    margin-left: -64%;
  }

  .kv-numbers-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .kv-numbers-title,
  .kv-numbers-intro {
    grid-column: 1;
  }

  .kv-numbers-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .kv-num-card {
    min-height: 0;
    gap: 22px;
    padding: 24px 22px 26px;
    border-radius: 22px;
  }

  .kv-num {
    font-size: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv-branch .lf-s,
  .kv-bird,
  .kv-bird *,
  .kv-w,
  .kv-voices-sprig .lf-s {
    animation: none !important;
  }
}


/* =====================================================================
   Inside page content (shortcodes in a normal page or post)
   Break out of the reading column to full width and keep the article
   typography (blockquote rules, list markers, heading margins) out.
   ===================================================================== */

.prose .kv-voices,
.prose .kv-numbers {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  font-size: 16px;
  line-height: 1.5;
}

.prose > .kv-voices,
.prose > .kv-numbers,
.prose > * + .kv-voices,
.prose > * + .kv-numbers {
  margin-top: clamp(48px, 6vw, 96px);
}

.prose .kv-voices + .kv-numbers,
.prose .kv-numbers + .kv-voices {
  margin-top: 0;
}

.prose .kv-voices h2,
.prose .kv-numbers h2,
.prose .kv-numbers h3,
.prose .kv-voices h2 + *,
.prose .kv-numbers h2 + *,
.prose .kv-numbers h3 + * {
  margin-top: 0;
  scroll-margin-top: 0;
}

.prose .kv-voices-title {
  font-size: clamp(46px, 8.4vw, 120px);
  line-height: .92;
  letter-spacing: -.045em;
}

.prose .kv-numbers-title {
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.prose .kv-num {
  font-size: clamp(64px, 6.6vw, 104px);
  line-height: .86;
  letter-spacing: -.055em;
}

.prose .kv-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Figtree", sans-serif;
  font-size: inherit;
  letter-spacing: 0;
  color: inherit;
}

.prose .kv-card {
  margin: 0 0 0 calc(var(--ov) * -1);
}

.prose .kv-card:first-child {
  margin-left: 0;
}

/* the hovered card (sections.js) */
.kv-card {
  transition: box-shadow .5s ease, filter .5s ease;
}

.kv-card.is-pop {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 60px 90px -40px rgba(22, 20, 84, .55),
    0 18px 36px -18px rgba(22, 21, 19, .35);
}

@media (hover: hover) and (min-width: 761px) {
  .kv-voices-cards:hover .kv-card:not(.is-pop) {
    filter: saturate(.85) brightness(.97);
  }
}

.prose .kv-person {
  margin: 0;
  color: inherit;
  font-size: inherit;
  text-align: left;
}

.prose .kv-numbers-cards {
  padding-left: 0;
}

.prose .kv-numbers-cards li + li {
  margin-top: 0;
}

.prose .kv-numbers-cards li::marker {
  content: none;
}

.prose .kv-avatar img {
  border-radius: 0;
  max-width: none;
}

@media (max-width: 760px) {
  .prose .kv-card {
    margin: -14px 0 0;
  }

  .prose .kv-card:first-child {
    margin-top: 0;
  }
}

@media (max-width: 680px) {
  .prose .kv-num {
    font-size: 72px;
  }
}


/* =====================================================================
   Branches growing in (sections.js adds .will-grow, then .is-grown)
   ===================================================================== */

.will-grow .lf,
.will-grow .br {
  transform: scale(0);
  transition: transform .9s cubic-bezier(.34, 1.56, .64, 1);
}

.will-grow .br {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

.will-grow.is-grown .lf,
.will-grow.is-grown .br {
  transform: none;
}

.will-grow .kv-bird {
  opacity: 0;
  transition: opacity .8s ease .5s;
}

.will-grow.is-grown .kv-bird {
  opacity: 1;
}