/* Kareva: home page sections. */

@property --kl-navy { syntax: "<color>"; inherits: true; initial-value: #f3eee4; }
@property --kl-orange { syntax: "<color>"; inherits: true; initial-value: #f0996b; }
@property --kl-shade-1 { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,.22); }
@property --kl-shade-2 { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,.13); }
@property --kl-shade-3 { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,.05); }
.kl-shine {
      pointer-events: none;
    }
.kl-accent-spark {
      transform-box: fill-box;
      transform-origin: 50% 50%;
      animation: klSpark var(--kl-interval) cubic-bezier(.4, 0, .2, 1) infinite;
    }
@media (prefers-reduced-motion: reduce) {
.kl-shine {
        display: none;
      }
.kl-accent-spark {
        animation: none;
      }
}
.hero-scroll {

      position: relative;

      height:
        520vh;

      background:
        #000;
    }
.hero-sticky {

      position: sticky;

      top: 0;

      width: 100%;
      height: 100vh;

      overflow: hidden;

      background:
        #000;
    }
.canvas-wrap {

      position: absolute;

      inset: -3%;

      width: 106%;
      height: 106%;

      z-index: 1;

      will-change:
        transform,
        opacity;
    }
#heroCanvas {

      display: block;

      width: 100%;
      height: 100%;

      transform:
        scale(1.015);
    }
.dark-overlay {

      position: absolute;

      inset: 0;

      z-index: 2;

      pointer-events: none;

      background:

        linear-gradient(
          90deg,
          rgba(0,0,0,.75) 0%,
          rgba(0,0,0,.34) 46%,
          rgba(0,0,0,.08) 100%
        );
    }
.cloud-layer {

      position: absolute;

      inset: -10%;

      z-index: 3;

      opacity: .62;

      pointer-events: none;

      will-change:
        transform,
        opacity;
    }
.cloud {

      position: absolute;

      left: -650px;

      width: 520px;
      height: 200px;

      filter:
        blur(12px);
    }
.cloud::before,
    .cloud::after {

      content: "";

      position: absolute;

      border-radius: 50%;

      background:
        rgba(255,255,255,.87);
    }
.cloud::before {

      width: 290px;
      height: 125px;

      left: 30px;
      top: 55px;
    }
.cloud::after {

      width: 240px;
      height: 155px;

      left: 210px;
      top: 10px;
    }
.cloud-core {

      position: absolute;

      width: 360px;
      height: 105px;

      left: 80px;
      top: 80px;

      border-radius:
        999px;

      background:
        rgba(255,255,255,.84);
    }
.cloud-1 {
      top: 5%;
      opacity: .18;
    }
.cloud-2 {
      top: 31%;
      opacity: .12;
    }
.cloud-3 {
      top: 59%;
      opacity: .10;
    }
.cloud-4 {
      top: 77%;
      opacity: .15;
    }
.haze {

      position: absolute;

      inset: -15%;

      z-index: 4;

      opacity: .28;

      pointer-events: none;

      background:

        radial-gradient(
          circle at 76% 20%,
          rgba(255,255,255,.25),
          transparent 34%
        ),

        radial-gradient(
          circle at 15% 72%,
          rgba(255,255,255,.10),
          transparent 38%
        );
    }
.light-beam {

      position: absolute;

      top: -40%;
      right: 5%;

      z-index: 4;

      width: 28%;
      height: 180%;

      opacity: .10;

      pointer-events: none;

      background:

        linear-gradient(
          180deg,
          transparent,
          rgba(255,255,255,.28),
          transparent
        );

      filter:
        blur(35px);

      transform:
        rotate(15deg);
    }
.vignette {

      position: absolute;

      inset: 0;

      z-index: 5;

      pointer-events: none;

      background:

        radial-gradient(
          circle at center,
          transparent 42%,
          rgba(0,0,0,.35)
        );
    }
.white-transition {

      position: absolute;

      inset: 0;

      z-index: 6;

      background:
        #f7f4ed;

      opacity: 0;

      pointer-events: none;
    }
.hero-content-layer {

      position: absolute;

      inset: 0;

      z-index: 7;

      display: flex;
      align-items: center;

      padding:
        6vw;

      pointer-events: none;
    }
.hero-content {

      max-width:
        920px;
    }
.hero-eyebrow {

      margin-bottom:
        25px;

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        14px;

      line-height: 1;

      font-weight:
        500;

      letter-spacing:
        .22em;

      text-transform:
        uppercase;

      opacity: .68;
    }
.hero-title {

      font-family:
        "Parkinsans",
        sans-serif;

      font-size:

        clamp(
          72px,
          6vw,
          148px
        );

      line-height:
        .92;

      letter-spacing:
        -.035em;

      font-weight:
        var(--h-weight);
    }
.hero-description {

      max-width:
        620px;

      margin-top:
        34px;

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        18px;

      line-height:
        1.65;

      font-weight:
        400;

      opacity:
        .76;
    }
.scroll-hint {

      position: absolute;

      left: 8vw;
      bottom: 40px;

      z-index: 8;

      display: flex;
      align-items: center;

      gap: 14px;

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        13px;

      font-weight:
        500;

      letter-spacing:
        .14em;

      text-transform:
        uppercase;

      opacity:
        .5;
    }
.scroll-line {

      position: relative;

      width: 60px;
      height: 1px;

      overflow:
        hidden;

      background:
        rgba(255,255,255,.25);
    }
.scroll-line::after {

      content: "";

      position: absolute;

      top: 0;
      left: -50%;

      width: 50%;
      height: 100%;

      background: #fff;

      animation:
        scrollLine
        1.6s
        linear
        infinite;
    }
.progress-wrap {

      position: absolute;

      right: 38px;
      bottom: 38px;

      z-index: 8;

      display: flex;
      align-items: center;

      gap: 12px;
    }
.progress-track {

      width: 120px;
      height: 1px;

      background:
        rgba(255,255,255,.20);
    }
.progress-bar {

      width: 0%;
      height: 100%;

      background:
        #fff;
    }
.progress-text {

      min-width:
        34px;

      font-size:
        13px;

      font-weight:
        500;

      opacity:
        .65;
    }
.loader {

      position: absolute;

      inset: 0;

      z-index:
        2000;

      display: flex;
      align-items: center;
      justify-content: center;

      background:
        #000;

      transition:
        opacity .65s ease,
        visibility .65s ease;
    }
.loader.loaded {

      opacity: 0;

      visibility:
        hidden;
    }
.loader-title {

      margin-bottom:
        16px;

      text-align:
        center;

      font-size:
        13px;

      letter-spacing:
        .16em;

      text-transform:
        uppercase;

      opacity:
        .55;
    }
.loader-track {

      width:
        220px;

      height:
        1px;

      overflow:
        hidden;

      background:
        rgba(255,255,255,.16);
    }
.loader-progress {

      width:
        0%;

      height:
        100%;

      background:
        #fff;

      transition:
        width .12s linear;
    }
.loader-percent {

      margin-top:
        12px;

      text-align:
        center;

      font-size:
        13px;

      opacity:
        .45;
    }
.impact-section {

      position: relative;

      min-height:
        1050px;

      overflow:
        hidden;

      background:
        #f7f4ed;

      color:
        #161513;
    }
.impact-mountains {

      position: absolute;

      left: 0;
      bottom: 0;

      width:
        61vw;

      height:
        48%;

      z-index:
        0;

      background-image:
        url("../images/impact-mountains.png");

      background-repeat:
        no-repeat;

      background-position:
        left bottom;

      background-size:
        contain;

      opacity:
        .72;

      pointer-events:
        none;

      will-change:
        transform;
    }
.impact-ambient {

      position: absolute;

      left: 13%;
      bottom: 12%;

      width:
        380px;

      height:
        380px;

      border-radius:
        50%;

      background:

        radial-gradient(
          circle,
          rgba(255,241,204,.85) 0%,
          rgba(255,241,204,.30) 40%,
          transparent 72%
        );

      filter:
        blur(10px);

      opacity:
        .65;

      z-index:
        1;

      pointer-events:
        none;
    }
.impact-container {

      position: relative;

      z-index: 4;

      width:

        min(
          1480px,
          calc(100% - 100px)
        );

      min-height:
        920px;

      margin:
        0 auto;

      display:
        grid;

      grid-template-columns:
        47% 53%;

      column-gap:
        30px;

      padding-top:
        170px;
    }
.impact-left {

      position: relative;

      padding-left:
        16px;

      padding-top:
        22px;
    }
.impact-kicker {

      display: flex;
      align-items: center;

      gap: 18px;

      margin-bottom:
        35px;

      color:
        rgba(0,0,0,.43);

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        14px;

      font-weight:
        500;

      line-height: 1;

      letter-spacing:
        .20em;

      text-transform:
        uppercase;
    }
.impact-kicker i {

      display: block;

      width:
        54px;

      height:
        1px;

      background:
        rgba(0,0,0,.22);
    }
.impact-title {

      max-width:
        700px;

      font-family:
        "Parkinsans",
        sans-serif;

      font-size:

        var(--h2);

      line-height:
        .94;

      letter-spacing:
        -.035em;

      font-weight:
        var(--h-weight);
    }
.impact-description {

      max-width:
        510px;

      margin-top:
        42px;

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        18px;

      line-height:
        1.6;

      font-weight:
        400;

      color:
        rgba(0,0,0,.62);
    }
.impact-work-link {
      margin-top: 44px;
    }
.impact-journey {

      position: relative;

      height:
        760px;

      margin-top:
        -18px;
    }
.impact-path-svg {

      position: absolute;

      left:
        -110px;

      top:
        -145px;

      width:
        560px;

      height:
        860px;

      overflow:
        visible;

      pointer-events:
        none;
    }
.impact-path-base,
    .impact-path-live {

      fill:
        none;

      stroke-width:
        1;
    }
.impact-path-base {

      stroke:
        rgba(61,65,58,.13);
    }
.impact-path-live {

      stroke:
        rgba(73,79,66,.58);

      stroke-linecap:
        round;
    }
.impact-service {

      position: absolute;

      left: 0;

      width:
        100%;

      display:
        grid;

      grid-template-columns:
        72px
        minmax(300px,1fr)
        110px;

      column-gap:
        22px;

      align-items:
        center;

      opacity:
        .20;

      transform:
        translateY(35px);
    }
.service-one {

      top:
        0;
    }
.service-two {

      top:
        190px;

      left:
        -48px;
    }
.service-three {

      top:
        390px;

      left:
        -100px;
    }
.service-four {

      top:
        590px;

      left:
        -148px;
    }
.service-node {

      width:
        64px;

      height:
        64px;

      display:
        flex;

      align-items:
        center;

      justify-content:
        center;

      border-radius:
        50%;

      color:
        #282923;
    }
.service-node svg {

      width:
        28px;

      height:
        28px;
    }
.node-green {

      background:
        #dfe4d6;
    }
.node-peach {

      background:
        #eee0d0;
    }
.node-blue {

      background:
        #d8e0e3;
    }
.node-olive {

      background:
        #d7dfca;
    }
.service-number {

      display: block;

      margin-bottom:
        10px;

      color:
        rgba(0,0,0,.38);

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        13px;

      font-weight:
        500;

      letter-spacing:
        .16em;
    }
.service-content h3 {

      margin:
        0 0 8px;

      font-family:
        "Parkinsans",
        sans-serif;

      font-size:
        25px;

      line-height:
        1.25;

      letter-spacing:
        -.015em;

      font-weight:
        400;
    }
.service-content p {

      max-width:
        370px;

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        16px;

      line-height:
        1.55;

      color:
        rgba(0,0,0,.56);
    }
.service-word {

      justify-self:
        end;

      color:
        rgba(0,0,0,.32);

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        13px;

      font-weight:
        500;

      letter-spacing:
        .11em;

      text-transform:
        uppercase;
    }
.impact-bird {

      position: absolute;

      left:
        -235px;

      bottom:
        44px;

      width:
        39px;

      color:
        #514b42;

      opacity:
        .82;

      transform:
        rotate(-9deg);

      z-index:
        5;
    }
.impact-bird svg {

      display:
        block;

      width:
        100%;
    }
.hero-actions {

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;

  pointer-events: auto;
}
.impact-bottom {

      position: absolute;

      right:
        6.5vw;

      bottom:
        48px;

      z-index:
        5;

      width:
        38%;

      display:
        flex;

      justify-content:
        space-between;

      padding-top:
        20px;

      border-top:
        1px solid
        rgba(0,0,0,.12);

      color:
        rgba(0,0,0,.38);

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        13px;

      font-weight:
        500;

      letter-spacing:
        .11em;

      text-transform:
        uppercase;
    }
.work-section {

      position: relative;

      padding:
        12vw 0 10vw;

      background:
        #171717;

      color:
        #fff;
    }
.work-container {

      width:
        min(
          1480px,
          calc(100% - 100px)
        );

      margin:
        0 auto;
    }
.work-head {

      margin-bottom:
        20vh;
    }
.work-kicker {

      display: flex;
      align-items: center;

      gap: 18px;

      margin-bottom:
        35px;

      color:
        rgba(255,255,255,.45);

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        14px;

      font-weight:
        500;

      line-height: 1;

      letter-spacing:
        .20em;

      text-transform:
        uppercase;
    }
.work-kicker i {

      display: block;

      width:
        54px;

      height:
        1px;

      background:
        rgba(255,255,255,.25);
    }
.work-section h2 {

      font-family:
        "Parkinsans",
        sans-serif;

      font-size:
        var(--h2);

      line-height:
        .94;

      letter-spacing:
        -.03em;

      font-weight:
        var(--h-weight);
    }
.work-intro {

      max-width:
        510px;

      margin-top:
        42px;

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        18px;

      line-height:
        1.6;

      font-weight:
        400;

      color:
        rgba(255,255,255,.62);
    }
.work-item {

      --title-size:
        clamp(38px, 5vw, 80px);

      position: relative;

      display: grid;

      grid-template-columns:
        minmax(0, 62%)
        1fr;

      margin-bottom:
        24vh;

      perspective:
        1000px;
    }
.work-item:last-child {

      margin-bottom: 0;
    }
.work-item:nth-child(even) {

      grid-template-columns:
        1fr
        minmax(0, 62%);
    }
.work-media {

      position: relative;

      display: block;

      grid-area:
        1 / 1 / 3 / 2;

      aspect-ratio:
        var(--ar, 4 / 3);

      overflow: hidden;

      border-radius:
        4px;

      background:
        #222;

      transform-origin:
        50% 100%;

      will-change:
        transform;
    }
.work-item:nth-child(even)
    .work-media {

      grid-area:
        1 / 2 / 3 / 3;
    }
.work-media::after {

      content: "";

      position: absolute;

      inset: 0;

      z-index: 2;

      pointer-events: none;

      background:
        linear-gradient(
          to top,
          rgba(0,0,0,.55) 0%,
          rgba(0,0,0,0) 48%
        );
    }
.work-img {

      --overflow:
        50px;

      position: absolute;

      left: 0;

      top:
        calc(
          var(--overflow) * -1
        );

      width: 100%;

      height:
        calc(
          100% +
          var(--overflow) * 2
        );

      will-change:
        transform;
    }
.work-img::before {

      content: "";

      position: absolute;

      inset: 0;

      /* real image on top,
         gradient shows if the file is missing */

      background:
        var(--img)
        center / cover
        no-repeat,

        linear-gradient(
          135deg,
          var(--g1, #2b3a4a),
          var(--g2, #7c8fa3)
        );

      transition:
        transform .9s
        cubic-bezier(.2,.7,.2,1);
    }
.work-media:hover
    .work-img::before {

      transform:
        scale(1.05);
    }
.work-title {

      position: relative;

      z-index: 3;

      grid-area:
        3 / 1 / 4 / 3;

      justify-self:
        start;

      margin-top:
        calc(
          var(--title-size) * -.5
        );

      padding:
        0 3vw;

      font-family:
        "Parkinsans",
        sans-serif;

      font-size:
        var(--title-size);

      line-height:
        .94;

      letter-spacing:
        -.03em;

      font-weight:
        400;

      color:
        #fff;

      pointer-events: none;
    }
.work-item:nth-child(even)
    .work-title {

      justify-self:
        end;

      text-align:
        right;
    }
.work-info {

      grid-area:
        1 / 2 / 3 / 3;

      align-self:
        start;

      justify-self:
        start;

      width:
        min(
          100%,
          330px
        );

      padding:
        0 0 0 2.6rem;
    }
.work-item:nth-child(even)
    .work-info {

      grid-area:
        1 / 1 / 3 / 2;

      justify-self:
        end;

      padding:
        0 2.6rem 0 0;

      text-align:
        right;
    }
.work-meta {

      display: flex;
      align-items: center;

      gap: 16px;

      margin-bottom:
        26px;

      color:
        rgba(255,255,255,.45);

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        13px;

      font-weight:
        500;

      line-height: 1.3;

      letter-spacing:
        .16em;

      text-transform:
        uppercase;
    }
.work-meta i {

      display: block;

      flex: 0 0 34px;

      height:
        1px;

      background:
        rgba(255,255,255,.25);
    }
.work-item:nth-child(even)
    .work-meta {

      justify-content:
        flex-end;
    }
.work-desc {

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        17px;

      line-height:
        1.6;

      font-weight:
        400;

      color:
        rgba(255,255,255,.62);
    }
.work-tags {

      display: flex;
      flex-wrap: wrap;

      gap: 8px;

      margin-top:
        26px;

      list-style: none;
    }
.work-item:nth-child(even)
    .work-tags {

      justify-content:
        flex-end;
    }
.work-tags li {

      padding:
        8px 12px;

      border:
        1px solid
        rgba(255,255,255,.16);

      border-radius:
        8px;

      color:
        rgba(255,255,255,.62);

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        12px;

      font-weight:
        500;

      line-height: 1;

      letter-spacing:
        .11em;

      text-transform:
        uppercase;
    }
.work-link {
      margin-top: 36px;
    }
@media
    (max-width: 900px) {
.work-container {

        width:
          calc(100% - 44px);
      }
.work-head {

        margin-bottom:
          14vh;
      }
.work-item,
      .work-item:nth-child(even) {

        --title-size:
          clamp(36px, 9.5vw, 60px);

        grid-template-columns:
          100%;

        margin-bottom:
          16vh;
      }
.work-media,
      .work-item:nth-child(even)
      .work-media {

        grid-area:
          1 / 1 / 2 / 2;
      }
.work-title,
      .work-item:nth-child(even)
      .work-title {

        grid-area:
          2 / 1 / 3 / 2;

        justify-self:
          start;

        text-align:
          left;

        padding:
          0 12px;

        margin-top:
          calc(
            var(--title-size) * -.45
          );
      }
.work-info,
      .work-item:nth-child(even)
      .work-info {

        grid-area:
          3 / 1 / 4 / 2;

        justify-self:
          start;

        width:
          100%;

        max-width:
          460px;

        padding:
          24px 0 0;

        text-align:
          left;
      }
.work-item:nth-child(even)
      .work-meta,

      .work-item:nth-child(even)
      .work-tags {

        justify-content:
          flex-start;
      }
}
@media
    (max-width: 520px) {
.work-container {

        width:
          calc(100% - 36px);
      }
.work-section h2 {

        font-size:
          var(--h2);
      }
.work-img {

        --overflow:
          30px;
      }
}
.process-section {

      position: relative;

      padding:
        12vw 0 4vw;

      background:
        #0d0d0d;

      color:
        #fff;
    }
.process-container {

      width:
        min(
          1480px,
          calc(100% - 100px)
        );

      margin:
        0 auto;
    }
.process-head {

      padding-bottom:
        14vh;
    }
.process-kicker {

      display: flex;
      align-items: center;

      gap: 18px;

      margin-bottom:
        35px;

      color:
        rgba(255,255,255,.45);

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        14px;

      font-weight:
        500;

      line-height: 1;

      letter-spacing:
        .20em;

      text-transform:
        uppercase;
    }
.process-kicker i {

      display: block;

      width:
        54px;

      height:
        1px;

      background:
        rgba(255,255,255,.25);
    }
.process-title {

      max-width:
        1400px;

      font-family:
        "Parkinsans",
        sans-serif;

      font-size:
        var(--h2);

      line-height:
        .96;

      letter-spacing:
        -.03em;

      font-weight:
        var(--h-weight);
    }
.process-body {

      display: grid;

      grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

      column-gap:
        60px;

      align-items:
        start;
    }
.process-steps {

      position: relative;

      padding:
        6vh 0 12vh;
    }
.process-line {

      position: absolute;

      left: 6px;

      width: 1px;

      background:
        rgba(255,255,255,.16);
    }
.process-line-fill {

      position: absolute;

      left: 0;
      top: 0;

      width: 100%;
      height: 0;

      background:
        #fff;
    }
.process-step {

      position: relative;

      min-height:
        78vh;

      padding-left:
        72px;

      opacity:
        .22;

      transition:
        opacity .6s ease;
    }
.process-step:last-child {

      min-height:
        56vh;
    }
.process-step.is-past {

      opacity:
        .5;
    }
.process-step.is-current {

      opacity: 1;
    }
.process-node {

      position: absolute;

      z-index: 2;

      left: 0;
      top: 1px;

      width: 13px;
      height: 13px;

      border:
        1px solid
        rgba(255,255,255,.4);

      border-radius:
        50%;

      background:
        #0d0d0d;

      transition:
        background .4s ease,
        border-color .4s ease,
        box-shadow .5s ease;
    }
.process-step.is-past
    .process-node,

    .process-step.is-current
    .process-node {

      background: #fff;

      border-color: #fff;
    }
.process-step.is-current
    .process-node {

      box-shadow:
        0 0 0 8px
        rgba(255,255,255,.10),

        0 0 34px
        rgba(255,241,204,.65);
    }
.process-step-inner {

      transform:
        translateY(18px);

      transition:
        transform .7s
        cubic-bezier(.2,.7,.2,1);
    }
.process-step.is-past
    .process-step-inner,

    .process-step.is-current
    .process-step-inner {

      transform: none;
    }
.process-num {

      display: flex;
      align-items: center;

      gap: 16px;

      margin-bottom:
        22px;

      color:
        rgba(255,255,255,.45);

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        14px;

      font-weight:
        500;

      line-height: 1;

      letter-spacing:
        .20em;

      text-transform:
        uppercase;
    }
.process-num i {

      display: block;

      width:
        34px;

      height:
        1px;

      background:
        rgba(255,255,255,.25);
    }
.process-step h3 {

      font-family:
        "Parkinsans",
        sans-serif;

      font-size:
        clamp(34px, 3.8vw, 62px);

      line-height:
        .98;

      letter-spacing:
        .01em;

      font-weight:
        700;

      text-transform:
        lowercase;
    }
.process-step p {

      max-width:
        400px;

      margin-top:
        24px;

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        18px;

      line-height:
        1.6;

      font-weight:
        400;

      color:
        rgba(255,255,255,.62);
    }
.process-visual {

      position: sticky;

      top: 0;

      align-self:
        start;

      height:
        100vh;
    }
#processCanvas {

      display: block;

      width: 100%;
      height: 100%;

      opacity: 0;

      transition:
        opacity 1.2s ease;
    }
#processCanvas.is-ready {

      opacity: 1;
    }
.process-counter {

      position: absolute;

      right: 0;
      bottom:
        7vh;

      color:
        rgba(255,255,255,.45);

      font-family:
        "Figtree",
        sans-serif;

      font-size:
        13px;

      font-weight:
        500;

      letter-spacing:
        .20em;

      text-transform:
        uppercase;
    }
.process-counter b {

      color: #fff;

      font-weight:
        500;
    }
.process-section.is-static
    .process-step {

      opacity: 1;
    }
.process-section.is-static
    .process-step-inner {

      transform: none;
    }
.process-section.is-static
    .process-node {

      background: #fff;

      border-color: #fff;
    }
.process-section.is-static
    .process-line-fill {

      height: 100% !important;
    }
.process-section.no-3d
    .process-body {

      grid-template-columns:
        minmax(0, 1fr);
    }
.process-section.no-3d
    .process-visual {

      display: none;
    }
@media
    (max-width: 900px) {
.process-container {

        width:
          calc(100% - 44px);
      }
.process-head {

        padding-bottom:
          8vh;
      }
.process-body {

        grid-template-columns:
          100%;
      }
.process-steps {

        grid-area:
          1 / 1;

        z-index: 2;
      }
.process-visual {

        grid-area:
          1 / 1;

        z-index: 1;

        opacity:
          .5;

        pointer-events:
          none;
      }
.process-step {

        min-height:
          72vh;

        padding-left:
          48px;
      }
.process-counter {

        display: none;
      }
}
@media
    (max-width: 520px) {
.process-container {

        width:
          calc(100% - 36px);
      }
.process-title {

        font-size:
          var(--h2);
      }
.process-step h3 {

        font-size:
          9.5vw;
      }
}
.diff-section {
      position: relative;
      padding: 12vw 0 12vw;
      background: #f7f4ed;
      color: #161513;
    }
.diff-container {
      width: min(1480px, calc(100% - 100px));
      margin: 0 auto;
    }
.diff-head {
      padding-bottom: 14vh;
    }
.diff-kicker {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 35px;
      color: rgba(0,0,0,.43);
      font-family: "Figtree", sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: .20em;
      text-transform: uppercase;
    }
.diff-kicker i {
      display: block;
      width: 54px;
      height: 1px;
      background: rgba(0,0,0,.22);
    }
.diff-title {
      max-width: 1000px;
      font-family: "Parkinsans", sans-serif;
      font-size: var(--h2);
      line-height: .96;
      letter-spacing: -.035em;
      font-weight: var(--h-weight);
    }
.diff-intro {
      max-width: 520px;
      margin-top: 42px;
      font-family: "Figtree", sans-serif;
      font-size: 18px;
      line-height: 1.6;
      font-weight: 400;
      color: rgba(0,0,0,.62);
    }
.diff-body {
      display: grid;
      grid-template-columns: 36% minmax(0, 1fr);
      column-gap: 70px;
      align-items: start;
    }
.diff-side {
      position: sticky;
      top: 0;
      align-self: start;
      height: 100vh;
      display: flex;
      flex-direction: column;
      padding: 14vh 0 7vh;
    }
.diff-num {
      height: 1em;
      overflow: hidden;
      font-family: "Figtree", sans-serif;
      font-weight: 700;
      font-size: clamp(90px, 9.5vw, 156px);
      line-height: 1;
      letter-spacing: -.04em;
      color: #161513;
    }
.diff-num-stack span {
      display: block;
      height: 1em;
      line-height: 1;
    }
.diff-progress {
      width: min(100%, 260px);
      height: 1px;
      margin-top: 34px;
      background: rgba(0,0,0,.14);
    }
.diff-progress span {
      display: block;
      width: 100%;
      height: 100%;
      background: #161513;
      transform: scaleX(.2);
      transform-origin: left center;
    }
.diff-index {
      margin-top: 30px;
      list-style: none;
    }
.diff-index button {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 9px 0;
      border: 0;
      background: none;
      color: rgba(0,0,0,.36);
      font-family: "Figtree", sans-serif;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.2;
      text-align: left;
      cursor: pointer;
      transition: color .4s ease, transform .5s cubic-bezier(.2,.7,.2,1);
    }
.diff-index button i {
      font-style: normal;
      font-size: 12px;
      letter-spacing: .16em;
    }
.diff-index button:hover {
      color: rgba(0,0,0,.7);
    }
.diff-index button.is-active {
      color: #161513;
      transform: translateX(10px);
    }
.diff-bird {
      margin-top: auto;
      width: clamp(105px, 9.8vw, 161px);
      pointer-events: none;
    }
.diff-bird svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }
@media (min-width: 901px) {
.diff-bird svg {
        transform: scaleX(-1);
      }
}
.diff-list {
      padding: 14vh 0 4vh;
    }
.diff-item {
      margin-bottom: 18vh;
    }
.diff-item:last-child {
      margin-bottom: 0;
    }
.diff-card {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 30px;
      padding: 40px 44px 44px;
      overflow: hidden;
      border: 1px solid rgba(22,21,19,.08);
      border-radius: 14px;
      background: #fffdf9;
      opacity: .55;
      transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        box-shadow .55s ease,
        border-color .55s ease,
        opacity .55s ease;
    }
.diff-card.is-active {
      opacity: 1;
    }
.diff-card:hover {
      opacity: 1;
      transform: translateY(-8px);
      border-color: rgba(22,21,19,.22);
      box-shadow: 0 34px 60px -24px rgba(22,21,19,.28);
    }
.diff-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      background:
        radial-gradient(
          420px circle at var(--mx, 50%) var(--my, 50%),
          rgba(255,231,180,.75),
          rgba(255,231,180,0) 62%
        );
      transition: opacity .45s ease;
    }
.diff-card:hover::before {
      opacity: 1;
    }
.diff-card::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background: #161513;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .7s cubic-bezier(.2,.7,.2,1);
    }
.diff-card:hover::after {
      transform: scaleX(1);
    }
.diff-icon-box {
      position: relative;
      z-index: 1;
      flex: 0 0 68px;
      width: 68px;
      height: 68px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(22,21,19,.14);
      border-radius: 16px;
      color: #161513;
      transition:
        transform .6s cubic-bezier(.34,1.56,.64,1),
        background .4s ease,
        color .4s ease,
        border-color .4s ease;
    }
.diff-card:hover .diff-icon-box {
      transform: rotate(-8deg) scale(1.08);
      background: #161513;
      border-color: #161513;
      color: #fff;
    }
.diff-icon {
      width: 30px;
      height: 30px;
    }
.diff-icon path {
      stroke-dasharray: 1;
      stroke-dashoffset: 0;
    }
.diff-card:hover .diff-icon path {
      animation: diffDraw .9s ease both;
    }
.diff-card-body {
      position: relative;
      z-index: 1;
      max-width: 520px;
    }
.diff-card h3 {
      font-family: "Parkinsans", sans-serif;
      font-size: clamp(26px, 2.2vw, 36px);
      line-height: 1.05;
      letter-spacing: -.02em;
      font-weight: 400;
      transition: transform .6s cubic-bezier(.2,.7,.2,1);
    }
.diff-card:hover h3 {
      transform: translateX(8px);
    }
.diff-card p {
      margin-top: 16px;
      font-family: "Figtree", sans-serif;
      font-size: 17px;
      line-height: 1.6;
      font-weight: 400;
      color: rgba(0,0,0,.62);
    }
.diff-card-num {
      position: absolute;
      right: 30px;
      bottom: -22px;
      z-index: 0;
      font-family: "Parkinsans", sans-serif;
      font-size: 110px;
      line-height: 1;
      letter-spacing: -.04em;
      color: rgba(22,21,19,.045);
      pointer-events: none;
      transition: transform .8s cubic-bezier(.2,.7,.2,1), color .6s ease;
    }
.diff-card:hover .diff-card-num {
      transform: translate(-12px, -12px);
      color: rgba(22,21,19,.09);
    }
@media (prefers-reduced-motion: reduce) {
.diff-card:hover .diff-icon path {
        animation: none;
      }
}
@media (max-width: 900px) {
.diff-container {
        width: calc(100% - 44px);
      }
.diff-head {
        padding-bottom: 6vh;
      }
.diff-body {
        display: block;
      }
.diff-side {
        position: static;
        height: auto;
        flex-direction: row;
        justify-content: flex-end;
        padding: 0;
      }
.diff-side-top {
        display: none;
      }
.diff-bird {
        margin-top: 0;
        width: 92px;
      }
.diff-list {
        padding: 2vh 0 0;
      }
.diff-item {
        margin-bottom: 8vh;
      }
.diff-card {
        opacity: 1;
        padding: 32px 30px 36px;
        gap: 22px;
      }
}
@media (max-width: 560px) {
.diff-container {
        width: calc(100% - 36px);
      }
.diff-title {
        font-size: var(--h2);
      }
.diff-card {
        flex-direction: column;
      }
.diff-card-num {
        font-size: 84px;
      }
}
.tt-section {
      --tt-accent: #e2333d;
      --tt-dur: 1.1s;
      --tt-ease: cubic-bezier(.7, 0, .2, 1);

      position: relative;
      padding: 9vw 0 8vw;
      overflow: hidden;
      background: #ede7db;
      color: #161513;
    }
.tt-container {
      width: min(1480px, calc(100% - 100px));
      margin: 0 auto;
    }
.tt-head {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      align-items: center;
      column-gap: 40px;
      margin-bottom: 4vw;
    }
.tt-kicker {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 30px;
      color: rgba(0,0,0,.5);
      font-family: "Figtree", sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: .20em;
      text-transform: uppercase;
    }
.tt-kicker i {
      display: block;
      width: 40px;
      height: 1px;
      background: var(--tt-accent);
    }
.tt-title {
      font-family: "Parkinsans", sans-serif;
      font-size: var(--h2);
      line-height: 1.02;
      letter-spacing: -.02em;
      font-weight: var(--h-weight);
    }
.tt-intro-wrap {
      display: flex;
      align-items: center;
      min-height: 125px;
      padding-left: clamp(28px, 8vw, 135px);
      border-left: 1px solid rgba(22,21,19,.16);
    }
.tt-intro {
      max-width: 500px;
      font-family: "Figtree", sans-serif;
      font-size: 18px;
      line-height: 1.75;
      font-weight: 400;
      color: rgba(0,0,0,.6);
    }
.tt-viewport {
      width: 100%;
      padding: 30px 0 50px;
      overflow: hidden;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
      outline: none;
      cursor: grab;
    }
.tt-viewport:focus-visible {
      outline: 2px solid var(--tt-accent);
      outline-offset: -6px;
    }
.tt-track {
      --wa: clamp(760px, 60vw, 1000px);
      --wc: clamp(220px, 19.5vw, 300px);
      --ha: clamp(540px, 38vw, 600px);
      --hc: calc(var(--ha) * .855);
      --pa: 40px;
      --pc: 26px;
      --pwa: calc(var(--wa) * .382);
      --pwc: calc(var(--wc) - var(--pc) * 2);
      --gap: 24px;

      position: relative;
      display: flex;
      align-items: center;
      gap: var(--gap);
      width: max-content;
      min-height: var(--ha);
      transition: transform var(--tt-dur) var(--tt-ease);
      will-change: transform;
    }
.tt-probe {
      position: absolute;
      height: 0;
      visibility: hidden;
      pointer-events: none;
    }
.tt-probe-a { width: var(--wa); }
.tt-probe-c { width: var(--wc); }
.tt-slide {
      --pw: var(--pwc);

      position: relative;
      flex: 0 0 auto;
      display: flex;
      align-items: stretch;
      gap: 48px;
      width: var(--wc);
      height: var(--hc);
      padding: var(--pc);
      overflow: hidden;
      border: 1px solid rgba(22,21,19,.08);
      border-radius: 6px;
      background: #fffdf9;
      opacity: .5;
      transform: scale(.965);
      contain: layout style;
      cursor: pointer;
      transition:
        width var(--tt-dur) var(--tt-ease),
        height var(--tt-dur) var(--tt-ease),
        padding var(--tt-dur) var(--tt-ease),
        transform var(--tt-dur) var(--tt-ease),
        opacity .8s ease,
        box-shadow .25s ease;
    }
.tt-slide:not(.is-active):hover {
      opacity: .82;
    }
.tt-slide.is-active {
      --pw: var(--pwa);

      width: var(--wa);
      height: var(--ha);
      padding: var(--pa);
      opacity: 1;
      transform: none;
      cursor: default;
      transition:
        width var(--tt-dur) var(--tt-ease),
        height var(--tt-dur) var(--tt-ease),
        padding var(--tt-dur) var(--tt-ease),
        transform var(--tt-dur) var(--tt-ease),
        opacity .8s ease,
        box-shadow .3s ease .8s;
      box-shadow: 0 40px 70px -34px rgba(22,21,19,.34);
    }
.tt-photo {
      flex: 0 0 auto;
      width: var(--pw);
      overflow: hidden;
      border-radius: 8px;
      background: #d9d1c1;
      transition: width var(--tt-dur) var(--tt-ease);
    }
.tt-photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
    }
.tt-slide:not(.is-active):hover .tt-photo img {
      transform: scale(1.05);
    }
.tt-content {
      flex: 0 0 auto;
      width: calc(var(--wa) - var(--pa) * 2 - var(--pwa) - 48px);
      align-self: center;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
.tt-content > * {
      opacity: 0;
      transform: translateY(26px);
      filter: blur(4px);
      transition:
        opacity .35s ease,
        transform .35s ease,
        filter .35s ease;
    }
.tt-slide.is-active .tt-content > * {
      opacity: 1;
      transform: none;
      filter: none;
      transition:
        opacity .7s ease,
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .7s ease;
    }
.tt-slide.is-active .tt-content > :nth-child(1) { transition-delay: .26s; }
.tt-slide.is-active .tt-content > :nth-child(2) { transition-delay: .32s; }
.tt-slide.is-active .tt-content > :nth-child(3) { transition-delay: .38s; }
.tt-slide.is-active .tt-content > :nth-child(4) { transition-delay: .44s; }
.tt-mark {
      width: 34px;
      height: 30px;
      fill: var(--tt-accent);
    }
.tt-quote {
      margin: 20px 0 28px;
      font-family: "Parkinsans", sans-serif;
      font-size: clamp(20px, 1.7vw, 28px);
      line-height: 1.24;
      letter-spacing: -.005em;
      font-weight: 400;
      color: #161513;
    }
.tt-rule {
      width: 76px;
      height: 1px;
      margin-bottom: 26px;
      background: var(--tt-accent);
    }
.tt-name {
      font-family: "Figtree", sans-serif;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.2;
      color: #161513;
    }
.tt-role {
      margin-top: 8px;
      font-family: "Figtree", sans-serif;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(0,0,0,.45);
    }
.tt-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 42px;
    }
.tt-arrow {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(22,21,19,.4);
      border-radius: 50%;
      background: transparent;
      color: #161513;
      cursor: pointer;
      transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease,
        scale .25s ease;
    }
.tt-arrow:active {
      scale: .9;
    }
.tt-arrow svg {
      width: 20px;
      height: 20px;
      transition: transform .35s ease;
    }
.tt-arrow:hover {
      background: #161513;
      border-color: #161513;
      color: #fff;
    }
.tt-prev:hover svg { transform: translateX(-3px); }
.tt-next:hover svg { transform: translateX(3px); }
.tt-arrow:focus-visible,
    .tt-index button:focus-visible {
      outline: 2px solid var(--tt-accent);
      outline-offset: 3px;
    }
.tt-index {
      display: flex;
      gap: 26px;
    }
.tt-index button {
      position: relative;
      padding: 8px 2px 12px;
      border: 0;
      background: none;
      color: rgba(0,0,0,.4);
      font-family: "Figtree", sans-serif;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: .1em;
      cursor: pointer;
      transition: color .4s ease;
    }
.tt-index button::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: var(--tt-accent);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .35s ease;
    }
.tt-index button.is-active::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: rgba(22,21,19,.1);
    }
.tt-index button:hover {
      color: rgba(0,0,0,.75);
    }
.tt-index button.is-active {
      color: #161513;
    }
.tt-index button.is-active::after {
      transform: scaleX(var(--p, 1));
      transition: none;
    }
.tt-section.is-still *,
    .tt-section.is-still *::before,
    .tt-section.is-still *::after {
      transition: none !important;
    }
@media (prefers-reduced-motion: reduce) {
.tt-section {
        --tt-dur: .01s;
      }
.tt-content > *,
      .tt-slide.is-active .tt-content > * {
        transition: none;
        transition-delay: 0s;
      }
}
@media (max-width: 1100px) {
.tt-track {
        --wa: 86vw;
        --wc: 120px;
        --ha: 470px;
        --hc: 400px;
        --pa: 32px;
        --pc: 20px;
        --pwa: calc(var(--wa) * .36);
      }
.tt-content {
        width: calc(var(--wa) - var(--pa) * 2 - var(--pwa) - 40px);
      }
.tt-slide {
        gap: 40px;
      }
.tt-quote {
        font-size: 24px;
      }
}
@media (max-width: 900px) {
.tt-container {
        width: calc(100% - 44px);
      }
.tt-head {
        grid-template-columns: 100%;
        row-gap: 26px;
        margin-bottom: 6vw;
      }
.tt-intro-wrap {
        min-height: 0;
        padding-left: 0;
        border-left: 0;
      }
.tt-track {
        --wa: calc(100vw - 56px);
        --wc: 56px;
        --ha: auto;
        --hc: auto;
        --pa: 18px;
        --pc: 18px;
        --pwa: calc(100vw - 56px - 36px);
        --pwc: calc(100vw - 56px - 36px);
        --gap: 12px;

        align-items: stretch;
      }
.tt-slide {
        flex-direction: column;
        gap: 24px;
      }
.tt-photo {
        height: 260px;
      }
.tt-content {
        width: calc(100vw - 56px - 36px);
        align-self: flex-start;
      }
.tt-quote {
        margin: 18px 0 26px;
        font-size: 22px;
      }
.tt-controls {
        gap: 22px;
      }
}
@media (max-width: 520px) {
.tt-container {
        width: calc(100% - 36px);
      }
.tt-index {
        gap: 14px;
      }
}
.blog-section {
      --bl-accent: #e2333d;

      position: relative;
      padding: 9vw 0 10vw;
      background: #f7f4ed;
      color: #161513;
    }
.blog-container {
      width: min(1480px, calc(100% - 100px));
      margin: 0 auto;
    }
.blog-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 5vw;
    }
.blog-kicker {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 30px;
      color: rgba(0,0,0,.43);
      font-family: "Figtree", sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: .20em;
      text-transform: uppercase;
    }
.blog-kicker i {
      display: block;
      width: 54px;
      height: 1px;
      background: rgba(0,0,0,.22);
    }
.blog-title {
      font-family: "Parkinsans", sans-serif;
      font-size: var(--h2);
      line-height: 1.04;
      letter-spacing: -.03em;
      font-weight: var(--h-weight);
    }
.blog-all-wrap {
      flex: 0 0 auto;
    }
.blog-arrow {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #161513;
      color: #fff;
      font-size: 17px;
      transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .4s ease, color .4s ease;
    }
.blog-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
      gap: clamp(40px, 5vw, 90px);
      align-items: start;
    }
.blog-card {
      display: block;
      color: inherit;
      text-decoration: none;
    }
.blog-card:focus-visible {
      outline: 2px solid var(--bl-accent);
      outline-offset: 6px;
      border-radius: 14px;
    }
.blog-cover {
      position: relative;
      overflow: hidden;
      border-radius: 14px;
      background: #e6e0d3;
      box-shadow: 0 30px 50px -36px rgba(22,21,19,.5);
      transition: box-shadow .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);
    }
.blog-cover svg {
      display: block;
      width: 100%;
      height: 100%;
      transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
    }
.blog-card:hover .blog-cover {
      box-shadow: 0 40px 60px -30px rgba(22,21,19,.55);
    }
.blog-card:hover .blog-cover svg {
      transform: scale(1.07) rotate(-.6deg);
    }
.blog-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      color: rgba(0,0,0,.5);
      font-family: "Figtree", sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
.blog-tag {
      padding: 7px 12px;
      border: 1px solid rgba(22,21,19,.18);
      border-radius: 999px;
      color: #161513;
      line-height: 1;
      letter-spacing: .1em;
      transition: background .4s ease, color .4s ease, border-color .4s ease;
    }
.blog-card:hover .blog-tag {
      background: #161513;
      border-color: #161513;
      color: #fff;
    }
.blog-dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: currentColor;
    }
.blog-h {
      background-image: linear-gradient(currentColor, currentColor);
      background-repeat: no-repeat;
      background-position: 0 100%;
      background-size: 0% 1px;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      transition: background-size .7s cubic-bezier(.2,.7,.2,1);
    }
.blog-card:hover .blog-h {
      background-size: 100% 1px;
    }
.blog-feature .blog-cover {
      aspect-ratio: 5 / 4;
    }
.blog-feature .blog-meta {
      margin: 28px 0 18px;
    }
.blog-feature h3 {
      max-width: 640px;
      font-family: "Parkinsans", sans-serif;
      font-size: clamp(24px, 2.1vw, 34px);
      line-height: 1.14;
      letter-spacing: -.02em;
      font-weight: 400;
    }
.blog-excerpt {
      max-width: 560px;
      margin-top: 18px;
      font-family: "Figtree", sans-serif;
      font-size: 17px;
      line-height: 1.6;
      color: rgba(0,0,0,.62);
    }
.blog-list {
      border-bottom: 1px solid rgba(22,21,19,.14);
    }
.blog-row {
      border-top: 1px solid rgba(22,21,19,.14);
    }
.blog-row .blog-card {
      display: grid;
      grid-template-columns: clamp(104px, 11vw, 160px) minmax(0, 1fr) auto;
      align-items: center;
      gap: clamp(18px, 2vw, 30px);
      padding: 26px 0;
    }
.blog-row .blog-cover {
      aspect-ratio: 1 / 1;
      border-radius: 10px;
      box-shadow: none;
    }
.blog-row .blog-meta {
      margin-bottom: 12px;
    }
.blog-text {
      transition: transform .7s cubic-bezier(.2,.7,.2,1);
    }
.blog-card:hover .blog-text {
      transform: translateX(8px);
    }
.blog-row h3 {
      font-family: "Parkinsans", sans-serif;
      font-size: clamp(19px, 1.5vw, 24px);
      line-height: 1.2;
      letter-spacing: -.015em;
      font-weight: 400;
    }
.blog-row .blog-arrow {
      width: 44px;
      height: 44px;
      background: transparent;
      border: 1px solid rgba(22,21,19,.3);
      color: #161513;
      opacity: .55;
      transform: translateX(-6px);
    }
.blog-row .blog-card:hover .blog-arrow {
      opacity: 1;
      background: var(--bl-accent);
      border-color: var(--bl-accent);
      color: #fff;
      transform: translateX(0) rotate(45deg);
    }
.wm-fill {
      fill: url(#wmFade);
    }
.wm-shade {
      fill: rgba(255,255,255,.10);
    }
.wm-accent {
      fill: #ea885a;
    }
.wm-fill,
    .wm-shade {
      transition: fill .35s ease;
    }
.wm-letter:hover .wm-fill {
      fill: #ea885a;
    }
.has-reveal [data-reveal] {
      opacity: 0;
      transform: translateY(32px);
      transition:
        opacity .9s ease var(--d, 0s),
        transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d, 0s);
    }
.has-reveal [data-reveal].is-in {
      opacity: 1;
      transform: none;
    }
.has-reveal .wm-letter {
      transform: translateY(140px);
      transition: transform 1.3s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 85ms);
    }
.has-reveal .ft-wordmark.is-in .wm-letter {
      transform: none;
    }
@media (max-width: 900px) {
.blog-container,
      .cta-inner,
      .ft-container {
        width: calc(100% - 44px);
      }
.blog-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 28px;
        margin-bottom: 8vw;
      }
.blog-grid {
        grid-template-columns: 100%;
        gap: 44px;
      }
}
@media (max-width: 560px) {
.blog-container,
      .cta-inner,
      .ft-container {
        width: calc(100% - 36px);
      }
.blog-row .blog-card {
        grid-template-columns: 96px minmax(0, 1fr);
      }
.blog-row .blog-arrow {
        display: none;
      }
.blog-title {
        font-size: var(--h2);
      }
}
.btn:hover,
    .btn:focus-visible,
    .blog-card:hover .btn,
    .work-media:hover ~ .work-info .btn {
      background: var(--btn-hover-bg);
      translate: 0 -3px;
      box-shadow:
        inset 0 0 0 1px var(--btn-border),
        0 0 0 8px var(--btn-ring),
        0 30px 60px -20px var(--btn-glow);
    }
.btn:hover .btn-icon,
    .btn:focus-visible .btn-icon,
    .blog-card:hover .btn .btn-icon,
    .work-media:hover ~ .work-info .btn .btn-icon {
      background: var(--btn-accent);
      color: #fff;
      transform: rotate(45deg);
    }
.blog-read {
      margin-top: 26px;
    }
@media (max-width: 560px) {
.hero-actions .btn {
        width: 100%;
        justify-content: space-between;
      }
}
.tt-section.is-dragging .tt-track,
    .tt-section.is-dragging .tt-slide {
      transition: none !important;
    }
.tt-section.is-dragging,
    .tt-section.is-dragging * {
      cursor: grabbing !important;
    }
.tt-prev.is-push svg {
      animation: ttPushPrev .5s cubic-bezier(.5, 0, .2, 1);
    }
.tt-next.is-push svg {
      animation: ttPushNext .5s cubic-bezier(.5, 0, .2, 1);
    }
@media (prefers-reduced-motion: reduce) {
.tt-prev.is-push svg,
      .tt-next.is-push svg {
        animation: none;
      }
}
@media
    (max-width: 1200px) {
.impact-container {

        width:
          calc(100% - 60px);

        grid-template-columns:
          43% 57%;
      }
.impact-title {

        font-size:
          var(--h2);
      }
.service-two {

        left:
          -25px;
      }
.service-three {

        left:
          -45px;
      }
.service-four {

        left:
          -65px;
      }
}
@media
    (max-width: 900px) {
.hero-scroll {

        height:
          430vh;
      }
.hero-content-layer {

        padding:
          26px;
      }
.hero-eyebrow {

        font-size:
          13px;
      }
.hero-title {

        font-size:

          clamp(
            60px,
            18vw,
            92px
          );

        line-height:
          .95;
      }
.hero-description {

        max-width:
          430px;

        font-size:
          16px;

        line-height:
          1.6;
      }
.scroll-hint {

        left:
          26px;

        bottom:
          24px;

        font-size:
          12px;
      }
.progress-wrap {

        right:
          20px;

        bottom:
          22px;
      }
.progress-track {

        width:
          80px;
      }
.impact-section {

        min-height:
          auto;

        padding-bottom:
          110px;
      }
.impact-container {

        display:
          block;

        width:
          calc(100% - 48px);

        min-height:
          auto;

        padding-top:
          120px;
      }
.impact-left {

        padding:
          0;
      }
.impact-kicker {

        font-size:
          13px;
      }
.impact-title {

        font-size:

          var(--h2);

        line-height:
          .98;
      }
.impact-description {

        max-width:
          520px;

        font-size:
          16px;
      }
.impact-journey {

        height:
          auto;

        margin-top:
          90px;
      }
.impact-path-svg {

        display:
          none;
      }
.impact-service {

        position:
          relative;

        left:
          auto !important;

        top:
          auto !important;

        width:
          100%;

        grid-template-columns:
          60px
          1fr;

        gap:
          20px;

        padding:
          30px 0;

        border-top:
          1px solid
          rgba(0,0,0,.11);

        opacity:
          1;

        transform:
          none;
      }
.service-word {

        display:
          none;
      }
.service-node {

        width:
          54px;

        height:
          54px;
      }
.service-content h3 {

        font-size:
          23px;
      }
.service-content p {

        font-size:
          16px;
      }
.impact-bird {

        display:
          none;
      }
.impact-mountains {

        width:
          120%;

        height:
          35%;

        opacity:
          .35;
      }
.impact-bottom {

        display:
          none;
      }
}
@media
    (max-width: 520px) {
.hero-title {

        font-size:
          17vw;
      }
.impact-title {

        font-size:
          var(--h2);
      }
.impact-container {

        width:
          calc(100% - 36px);
      }
.service-content h3 {

        font-size:
          21px;
      }
}
@media
    (prefers-reduced-motion: reduce) {
.scroll-line::after {

        animation:
          none;
      }
}
@keyframes klSpark {
      0%, 3%, 100% { transform: scale(1)     rotate(0deg);  filter: brightness(1)    drop-shadow(0 0 0 transparent); }
      5%           { transform: scale(1.34)  rotate(-9deg); filter: brightness(1.6)  drop-shadow(0 0 7px var(--kl-orange)); }
      8%           { transform: scale(1)     rotate(0deg);  filter: brightness(1)    drop-shadow(0 0 0 transparent); }
    }
@keyframes scrollLine {

      to {
        left: 120%;
      }

    }
@keyframes diffDraw {
      from { stroke-dashoffset: 1; }
      to   { stroke-dashoffset: 0; }
    }
@keyframes ttPushPrev {
      0%   { transform: translateX(0);     opacity: 1; }
      45%  { transform: translateX(-14px); opacity: 0; }
      46%  { transform: translateX(14px);  opacity: 0; }
      100% { transform: translateX(0);     opacity: 1; }
    }
@keyframes ttPushNext {
      0%   { transform: translateX(0);     opacity: 1; }
      45%  { transform: translateX(14px);  opacity: 0; }
      46%  { transform: translateX(-14px); opacity: 0; }
      100% { transform: translateX(0);     opacity: 1; }
    }

/* =========================================================
   THEME ADDITIONS (home)
========================================================= */

.work-all {
  display: flex;
  justify-content: center;
  margin-top: 6vw;
}

.work-img:not([style]) {
  background: linear-gradient(135deg, var(--g1, #2b3a4a), var(--g2, #7c8fa3));
}