/* Kareva: home page sections. */

.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;
}
@keyframes scrollLine {

      to {
        left: 120%;
      }
}
.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: 0;

      top: 0;

      width: 100%;

      height: 100%;

      z-index: 0;

      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;

      z-index: 1;

      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: 0;

      top: 0;

      width: 50px;

      color: #2b2825;

      opacity: 0;

      z-index: 5;

      pointer-events: none;

      will-change: transform;

      filter: drop-shadow(0 6px 6px rgba(60, 40, 20, .16));
}
.impact-bird svg {

      display: block;

      width: 100%;

      overflow: visible;
}
.ib-wing {

      transform-box: view-box;

      transform-origin: 66px 35.5px;

      animation: ibFlap .26s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
.ib-wing-back {

      transform-origin: 60px 33px;

      animation-delay: -.09s;
}
@keyframes ibFlap {

      from { transform: scaleY(1); }

      to   { transform: scaleY(-.72); }
}
.ib-bob {

      transform-box: view-box;

      animation: ibBob .52s ease-in-out infinite;
}
@keyframes ibBob {

      0%, 100% { transform: translateY(0); }

      50%      { transform: translateY(-1.6px); }
}
@media (prefers-reduced-motion: reduce) {
  .ib-wing, .ib-bob { animation: none;
}
}
.take-flight {
  position: absolute;
  right: 12vw;
  bottom: 17vh;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 132px;
  padding: 0 0 0 158px;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.tf-orb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 132px;
  height: 132px;
  margin-top: -66px;
  animation: tfFloat 6.5s ease-in-out infinite;
}
.tf-halo {
  position: absolute;
  inset: -46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 196, .55) 0%, rgba(255, 214, 160, .22) 38%, rgba(255, 214, 160, 0) 68%);
  filter: blur(4px);
  animation: tfBreath 4.2s ease-in-out infinite;
  pointer-events: none;
}
.tf-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 248, 236, .34), rgba(255, 238, 214, .12) 62%, rgba(255, 255, 255, .05) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .38),
    inset 0 10px 24px rgba(255, 255, 255, .12),
    0 18px 50px rgba(120, 80, 40, .18);
  animation: tfSpin 18s linear infinite;
  overflow: visible;
}
.tf-ring text {
  fill: rgba(255, 252, 245, .95);
  font-family: "Figtree", sans-serif;
  font-size: 9.4px;
  font-weight: 600;
  letter-spacing: 1px;
}
.tf-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffdf7 0%, #fff1dc 45%, #f6d7ae 100%);
  color: #e2333d;
  box-shadow:
    0 0 0 6px rgba(255, 244, 226, .22),
    0 0 34px 10px rgba(255, 220, 170, .55),
    0 10px 26px rgba(150, 90, 40, .25);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}
.tf-core svg {
  width: 22px;
  height: 22px;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.tf-mote {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 246, 230, .9);
  box-shadow: 0 0 8px rgba(255, 230, 190, .9);
  opacity: 0;
  animation: tfMote 7s ease-in-out infinite;
  pointer-events: none;
}
.tf-mote.m1 { left: 8%;  top: 70%; animation-delay: 0s;
}
.tf-mote.m2 { left: 82%; top: 22%; width: 3px; height: 3px; animation-delay: -1.4s;
}
.tf-mote.m3 { left: 96%; top: 64%; animation-delay: -2.8s;
}
.tf-mote.m4 { left: 18%; top: 8%;  width: 3px; height: 3px; animation-delay: -4.2s;
}
.tf-mote.m5 { left: 55%; top: 102%; width: 5px; height: 5px; animation-delay: -5.6s;
}
.tf-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  text-shadow: 0 2px 18px rgba(80, 50, 20, .35);
}
.tf-caption b {
  font-family: "Parkinsans", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  color: #fffaf2;
}
.tf-caption i {
  font-family: "Figtree", sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255, 248, 236, .8);
}
.take-flight:hover .tf-core,
.take-flight:focus-visible .tf-core {
  transform: scale(1.1);
  box-shadow:
    0 0 0 8px rgba(255, 244, 226, .28),
    0 0 52px 18px rgba(255, 220, 170, .7),
    0 10px 26px rgba(150, 90, 40, .25);
}
.take-flight:hover .tf-core svg,
.take-flight:focus-visible .tf-core svg {
  transform: translate(3px, -3px);
}
.take-flight:focus-visible {
  outline: none;
}
.take-flight:focus-visible .tf-ring {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), 0 0 0 3px rgba(255, 244, 226, .9);
}
.take-flight.is-flying {
  pointer-events: none;
}
.take-flight.is-flying .tf-core {
  animation: tfLaunch 1s cubic-bezier(.55, 0, .3, 1) forwards;
}
.take-flight.is-flying .tf-ring,
.take-flight.is-flying .tf-mote,
.take-flight.is-flying .tf-caption {
  transition: opacity .55s ease, transform .7s ease;
  opacity: 0;
  transform: scale(1.08);
}
.take-flight.is-flying .tf-halo {
  animation: tfFlare 1s ease-out forwards;
}
@keyframes tfSpin {
  to { transform: rotate(360deg); }
}
@keyframes tfFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes tfBreath {
  0%, 100% { transform: scale(.92); opacity: .75; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes tfMote {
  0%   { transform: translate(0, 0); opacity: 0; }
  20%  { opacity: .9; }
  80%  { opacity: .6; }
  100% { transform: translate(26px, -34px); opacity: 0; }
}
@keyframes tfLaunch {
  0%   { transform: scale(1.1) translate(0, 0); opacity: 1; }
  25%  { transform: scale(.94) translate(-3px, 3px); opacity: 1; }
  100% { transform: scale(.4) translate(160px, -260px); opacity: 0; }
}
@keyframes tfFlare {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.35); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 900px) {
  .take-flight {
    right: 22px;
    bottom: 64px;
    width: 100px;
    min-height: 100px;
    padding: 0;
}
  .tf-orb {
    width: 100px;
    height: 100px;
    margin-top: -50px;
}
  .tf-halo {
    inset: -34px;
}
  .tf-core {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
}
  .tf-caption {
    display: none;
}
}
@media (prefers-reduced-motion: reduce) {
  .tf-orb,
  .tf-ring,
  .tf-halo,
  .tf-mote {
    animation: none;
}
}
.hero-actions {

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

  gap: 14px;

  margin-top: 74px;

  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;

      /* the cards scale as they scroll; keep that from widening the page on phones */
      overflow-x: clip;

      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;

      

      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;
}
/* 1.3.1: the edge-fade mask (the dark gradient frame) is gone; particles show edge to edge */
#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(79px, 7.35vw, 121px);
      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;
}
@keyframes diffDraw {
      from { stroke-dashoffset: 1; }
      to   { stroke-dashoffset: 0; }
}
.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: 69px;
}
  .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: #e2333d;
}
.wm-fill,
    .wm-shade {
      transition: fill .35s ease;
}
.wm-letter:hover .wm-fill {
      fill: #e2333d;
}
.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);
}
@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; }
}
@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;
}
}
@media (min-width: 901px) {
  .impact-mountains {
        left: -70px;
        width: calc(61vw + 70px);
}
}
.impact-mountains {
      -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 14%), linear-gradient(to left, transparent 0%, #000 22%);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(to top, transparent 0%, #000 14%), linear-gradient(to left, transparent 0%, #000 22%);
      mask-composite: intersect;
}
@media (min-width: 901px) {
  .impact-section { min-height: 1000px;
}
  .impact-container { padding-top: 120px; min-height: 870px;
}
  .work-section { padding-top: 120px; padding-bottom: 120px;
}
  .work-head { margin-bottom: 120px;
}
  .process-section { padding-top: 120px;
}
  .process-head { padding-bottom: 120px;
}
  .diff-section { padding-top: 120px; padding-bottom: 120px;
}
  .diff-head { padding-bottom: 120px;
}
  .tt-section { padding-top: 120px;
}
  .blog-section { padding-top: 120px; padding-bottom: 120px;
}
  .cta-inner { padding-top: 120px; padding-bottom: 120px;
}
  .scroll-hint { left: 6vw;
}
}
.work-all {
  display: flex;
  justify-content: center;
  margin-top: 6vw;
}
.work-img:not([style]) {
  background: linear-gradient(135deg, var(--g1, #2b3a4a), var(--g2, #7c8fa3));
}

/* Built differently: flight map beside the heading */
.diff-decor {
  display: none;
}

@media (min-width: 901px) {
  .diff-head {
    position: relative;
    padding-bottom: 0;
  }

  .diff-decor {
    display: block;
    position: absolute;
    right: -2%;
    top: -40px;
    width: min(46%, 660px);
    pointer-events: none;
  }

  .diff-decor svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
}

.dd-orbit {
  fill: none;
  stroke: rgba(22, 21, 19, .16);
  stroke-width: 1;
  stroke-dasharray: 3 9;
}

.dd-orbits {
  transform-box: view-box;
  transform-origin: 455px 175px;
}

.dd-orbit-a { stroke: rgba(22, 21, 19, .22); }

.dd-orbit-dot {
  transform-box: view-box;
  transform-origin: 455px 175px;
  animation: ddSpin 26s linear infinite;
}

.dd-orbit-b {
  transform-box: view-box;
  transform-origin: 455px 175px;
  animation: ddSpin 60s linear infinite reverse;
}

.dd-path {
  fill: none;
  stroke: rgba(22, 21, 19, .3);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 2 8;
}

.dd-path-draw {
  fill: none;
  stroke: #e2333d;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .7;
  animation: ddDraw 7s cubic-bezier(.55, 0, .35, 1) infinite;
}

.dd-dot {
  fill: #fffdf9;
  stroke: rgba(22, 21, 19, .45);
  stroke-width: 1.2;
}

.dd-pulse {
  fill: none;
  stroke: #e2333d;
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ddPulse 3.5s ease-out infinite;
}

.dd-node.n2 .dd-pulse { animation-delay: 1.2s; }
.dd-node.n3 .dd-pulse { animation-delay: 2.4s; }

.dd-label {
  font-family: "Figtree", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  fill: rgba(22, 21, 19, .45);
}

@keyframes ddSpin { to { transform: rotate(360deg); } }

@keyframes ddDraw {
  0%   { stroke-dashoffset: 1; opacity: .7; }
  80%  { stroke-dashoffset: 0; opacity: .7; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes ddPulse {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(3.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-orbit-dot, .dd-orbit-b, .dd-path-draw, .dd-pulse { animation: none; }
  .dd-path-draw { stroke-dashoffset: 0; }
  .dd-comet { display: none; }
}


/* =====================================================================
   SELECTED WORK (1.3.1)
   Smaller images, and the project name moved out of the photo into the
   text column: bold, high-contrast, with a red underline accent.
   ===================================================================== */

.work-item,
.work-item:nth-child(even) {
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 110px);
  align-items: center;
  margin-bottom: 18vh;
}

.work-item:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
}

.work-media {
  grid-area: 1 / 1 / 2 / 2;
  border-radius: 14px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}

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

/* no dark fade needed now that the name isn't on the photo */
.work-media::after {
  background: linear-gradient(to top, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 40%);
}

.work-info,
.work-item:nth-child(even) .work-info {
  grid-area: 1 / 2 / 2 / 3;
  align-self: center;
  justify-self: start;
  width: min(100%, 470px);
  padding: 0;
  text-align: left;
}

.work-item:nth-child(even) .work-info {
  grid-area: 1 / 1 / 2 / 2;
  justify-self: end;
  text-align: right;
}

.work-title,
.work-item:nth-child(even) .work-title {
  grid-area: auto;
  justify-self: auto;
  margin: 0 0 22px;
  padding: 0;
  font-family: "Parkinsans", sans-serif;
  font-size: clamp(34px, 3.5vw, 56px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #fff;
  pointer-events: auto;
}

.work-title a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .5s cubic-bezier(.2, .7, .2, 1), color .3s ease;
}

.work-title a:hover,
.work-title a:focus-visible {
  background-size: 100% 2px;
}

.work-item:nth-child(even) .work-title a {
  background-position: 100% 100%;
}

/* short red accent under the name */
.work-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 18px;
  border-radius: 3px;
  background: #e2333d;
}

.work-item:nth-child(even) .work-title::after {
  margin-left: auto;
}

.work-meta {
  margin-bottom: 18px;
}

@media (max-width: 900px) {

  .work-item,
  .work-item:nth-child(even) {
    grid-template-columns: 100%;
    row-gap: 26px;
    margin-bottom: 14vh;
  }

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

  .work-info,
  .work-item:nth-child(even) .work-info {
    grid-area: 2 / 1 / 3 / 2;
    justify-self: start;
    max-width: 520px;
    padding: 0;
    text-align: left;
  }

  .work-item:nth-child(even) .work-title::after {
    margin-left: 0;
  }

  .work-item:nth-child(even) .work-title a {
    background-position: 0 100%;
  }

  .work-title,
  .work-item:nth-child(even) .work-title {
    font-size: clamp(30px, 8vw, 44px);
    margin-top: 0;
  }
}

/* phones and tablets: no "Visit website" button; the project name and image still link to the site */
@media (max-width: 900px) {
  .work-link {
    display: none;
  }
}