html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --bg: #061009;
  --ink: #f2efe4;
  --soft: rgba(242,239,228,.72);
  --muted: rgba(242,239,228,.48);
  --accent: #b9df72;
  --line: rgba(242,239,228,.16);

  --x: clamp(24px,5vw,84px);

  --ease: cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  min-width: 320px;

  color: var(--ink);
  background: var(--bg);

  font-family: Arial, Helvetica, sans-serif;
}

body {
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}


/* =========================================================
   GLOBAL FOREST VIDEO
========================================================= */

.video-world {
  position: fixed;
  inset: 0;

  z-index: 0;

  overflow: hidden;

  background: #061009;
}

.forest-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center center;

  filter:
    brightness(.48)
    contrast(1.10)
    saturate(.90);
}

.video-grade,
.video-vignette {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

.video-grade {
  z-index: 2;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.26) 0%,
      rgba(0,0,0,.04) 38%,
      rgba(0,0,0,.30) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2,8,4,.18),
      transparent 22%,
      transparent 78%,
      rgba(2,8,4,.18)
    );
}

.video-vignette {
  z-index: 3;

  background:
    radial-gradient(
      circle at 50% 48%,
      transparent 42%,
      rgba(0,0,0,.18) 74%,
      rgba(0,0,0,.46) 100%
    );
}


/* =========================================================
   NAVBAR
========================================================= */

.topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  z-index: 100;

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

  padding:
    14px
    var(--x);
}

.brand-logo-link {
  display: flex;
  align-items: center;
}

.brand-logo {
  display: block;

  width: auto;
  height: 120px;

  object-fit: contain;
}

.main-nav {
  display: flex;
  align-items: center;

  gap:
    clamp(
      18px,
      2.2vw,
      36px
    );
}

.main-nav > a {
  position: relative;

  padding: 8px 0;

  color:
    rgba(242,239,228,.74);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .14em;

  text-transform: uppercase;

  transition:
    color .3s ease;
}

.main-nav > a:hover,
.main-nav > a.active {
  color: var(--accent);
}

.main-nav .nav-cta {
  padding:
    12px
    16px;

  border:
    1px solid
    rgba(242,239,228,.22);

  color: var(--ink);

  background:
    rgba(3,9,5,.20);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.main-nav .nav-cta:hover {
  color: #071009;

  background: var(--accent);
}


/* =========================================================
   MAIN
========================================================= */

main {
  position: relative;

  z-index: 10;
}


/* =========================================================
   SHARED
========================================================= */

.eyebrow {
  margin: 0;

  color: var(--soft);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .20em;

  text-transform: uppercase;
}


/* =========================================================
   SERVICES INTRO
========================================================= */

.services-intro {
  position: relative;

  min-height: 100vh;

  padding:
    140px
    var(--x)
    70px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.services-intro__number {
  position: absolute;

  top: 140px;
  right: var(--x);

  color: var(--muted);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .18em;
}

.services-intro__content {
  max-width: 1350px;
}

.services-intro h1 {
  margin:
    30px
    0
    55px;

  max-width: 1150px;

  font-size:
    clamp(
      70px,
      11vw,
      180px
    );

  font-weight: 900;

  line-height: .78;

  letter-spacing: -.075em;

  text-transform: uppercase;
}

.services-intro h1 span {
  color: var(--accent);
}

.intro-bottom {
  width:
    min(
      750px,
      100%
    );

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 45px;
}

.intro-bottom p {
  margin: 0;

  color: var(--soft);

  font-size:
    clamp(
      14px,
      1.15vw,
      18px
    );

  font-weight: 600;

  line-height: 1.55;
}

.scroll-indicator {
  position: absolute;

  right: var(--x);
  bottom: 50px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .18em;
}


/* =========================================================
   PHILOSOPHY STRIP
========================================================= */

.philosophy-strip {
  padding:
    25px
    var(--x);

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(3,9,5,.22);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}

.philosophy-line {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.philosophy-line span {
  font-size:
    clamp(
      10px,
      1vw,
      14px
    );

  font-weight: 900;

  letter-spacing: .14em;
}

.philosophy-line i {
  flex: 1;

  height: 1px;

  background:
    rgba(242,239,228,.18);
}


/* =========================================================
   SERVICES SHOWCASE
   FULL SCREEN REFERENCE STYLE
========================================================= */

.service-showcase {
  position: relative;

  width: 100%;
  height: 100vh;
  min-height: 700px;

  overflow: hidden;

  background: #061009;
}


/* =========================================================
   ACTIVE SERVICE BACKGROUND
========================================================= */

.service-background {
  position: absolute;
  inset: 0;

  z-index: 1;

  overflow: hidden;
}

.service-background img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center center;

  transform: scale(1.01);

  transition:
    opacity .55s ease,
    transform 1.3s var(--ease);
}

.service-showcase.is-changing
.service-background img {
  opacity: .25;

  transform: scale(1.055);
}

.service-dark-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.36) 35%,
      rgba(0,0,0,.12) 63%,
      rgba(0,0,0,.24) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.03) 52%,
      rgba(0,0,0,.52) 100%
    );
}


/* =========================================================
   VERTICAL OUR SERVICES
========================================================= */

.services-vertical-label {
  position: absolute;

  z-index: 6;

  top: 50%;
  left: 8px;

  transform:
    translateY(-50%)
    rotate(-90deg);

  transform-origin:
    center center;

  color:
    rgba(242,239,228,.46);

  font-size:
    clamp(
      22px,
      2.2vw,
      38px
    );

  font-weight: 900;

  line-height: 1;

  letter-spacing: -.045em;

  white-space: nowrap;

  text-transform: uppercase;
}


/* =========================================================
   MAIN SERVICE CONTENT
========================================================= */

.service-content {
  position: absolute;

  z-index: 7;

  left:
    clamp(
      75px,
      7vw,
      120px
    );

  bottom:
    clamp(
      90px,
      13vh,
      160px
    );

  width:
    min(
      540px,
      39vw
    );
}

.service-content h2 {
  margin: 0;

  color: #fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      54px,
      5.6vw,
      96px
    );

  font-weight: 900;

  line-height: .84;

  letter-spacing: -.07em;

  text-transform: uppercase;

  text-shadow:
    0
    5px
    35px
    rgba(0,0,0,.30);

  transition:
    opacity .3s ease,
    transform .5s var(--ease);
}

.service-content p {
  max-width: 430px;

  margin:
    22px
    0
    0;

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

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      12px,
      1vw,
      15px
    );

  font-weight: 600;

  line-height: 1.5;

  transition:
    opacity .3s ease,
    transform .5s var(--ease);
}

.service-showcase.is-changing
.service-content h2,
.service-showcase.is-changing
.service-content p {
  opacity: 0;

  transform:
    translateY(16px);
}


/* =========================================================
   SERVICE STACK CARDS
========================================================= */

.service-card-stack {
  position: absolute;

  z-index: 8;

  right:
    clamp(
      40px,
      5vw,
      90px
    );

  bottom:
    clamp(
      105px,
      14vh,
      165px
    );

  display: flex;

  align-items: flex-end;

  gap:
    clamp(
      10px,
      1vw,
      18px
    );
}

.service-preview-card {
  position: relative;

  width:
    clamp(
      135px,
      12vw,
      205px
    );

  height:
    clamp(
      185px,
      18vw,
      285px
    );

  padding: 0;

  overflow: hidden;

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

  border-radius: 6px;

  background:
    #071009;

  cursor: pointer;

  box-shadow:
    0
    20px
    50px
    rgba(0,0,0,.25);

  transition:
    transform .55s var(--ease),
    opacity .4s ease,
    border-color .3s ease;
}

.service-preview-card:hover {
  transform:
    translateY(-12px);

  border-color:
    rgba(255,255,255,.55);
}

.service-preview-card img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .65s var(--ease);
}

.service-preview-card:hover img {
  transform:
    scale(1.06);
}

.service-preview-card::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 42%,
      rgba(0,0,0,.74) 100%
    );
}

.service-preview-card span {
  position: absolute;

  z-index: 2;

  left: 13px;
  right: 13px;
  bottom: 14px;

  color: #fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      8px,
      .72vw,
      11px
    );

  font-weight: 900;

  line-height: 1.15;

  letter-spacing: -.02em;

  text-align: left;

  text-transform: uppercase;
}

.service-preview-card--1 {
  transform:
    translateY(-3px);
}

.service-preview-card--2 {
  transform:
    translateY(4px);
}

.service-preview-card--3 {
  transform:
    translateY(10px);
}

.service-preview-card--1:hover,
.service-preview-card--2:hover,
.service-preview-card--3:hover {
  transform:
    translateY(-12px);
}


/* =========================================================
   BOTTOM SLIDER CONTROLS
========================================================= */

.service-bottom-controls {
  position: absolute;

  z-index: 9;

  right:
    clamp(
      35px,
      4vw,
      70px
    );

  bottom: 24px;

  width:
    min(
      440px,
      42vw
    );

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 18px;
}

.service-arrows {
  display: flex;

  gap: 8px;
}

.service-arrows button {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  padding: 0;

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

  border-radius: 50%;

  color: #fff;

  background:
    rgba(0,0,0,.22);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  cursor: pointer;

  transition:
    color .3s ease,
    background .3s ease,
    transform .3s ease;
}

.service-arrows button:hover {
  color: #071009;

  background: var(--accent);

  transform:
    scale(1.08);
}

.service-progress {
  width: 100%;
}

.service-progress-track {
  width: 100%;
  height: 1px;

  overflow: hidden;

  background:
    rgba(255,255,255,.28);
}

.service-progress-fill {
  width: 14.285%;
  height: 100%;

  background: #fff;

  transform-origin:
    left center;

  transition:
    width .55s var(--ease);
}

.service-number {
  min-width: 45px;

  color: #fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      26px,
      3vw,
      46px
    );

  font-weight: 900;

  line-height: 1;

  letter-spacing: -.06em;
}


/* =========================================================
   WHY KORU / STATEMENT
========================================================= */

.agency-statement {
  padding:
    120px
    var(--x);

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    clamp(
      60px,
      10vw,
      160px
    );

  background:
    rgba(2,5,3,.70);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  border-top:
    1px solid
    rgba(242,239,228,.10);

  border-bottom:
    1px solid
    rgba(242,239,228,.10);
}

.agency-statement h2 {
  margin:
    25px
    0
    0;

  font-size:
    clamp(
      45px,
      6vw,
      90px
    );

  font-weight: 900;

  line-height: .82;

  letter-spacing: -.065em;

  text-transform: uppercase;
}

.agency-statement h2 span {
  color: var(--accent);
}

.agency-statement__right {
  align-self: end;
}

.agency-statement__right p {
  max-width: 560px;

  margin:
    0
    0
    25px;

  color: var(--soft);

  font-size:
    clamp(
      14px,
      1.15vw,
      17px
    );

  font-weight: 600;

  line-height: 1.65;
}

.lime-link {
  display: inline-flex;

  margin-top: 15px;

  padding:
    13px
    18px;

  color: #071009;

  background:
    var(--accent);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .13em;
}


/* =========================================================
   SERVICE DETAILS
========================================================= */

.service-details {
  padding:
    140px
    var(--x);
}

.details-heading {
  max-width: 1100px;

  margin-bottom: 100px;
}

.details-heading h2 {
  margin:
    25px
    0
    0;

  font-size:
    clamp(
      55px,
      8vw,
      125px
    );

  font-weight: 900;

  line-height: .82;

  letter-spacing: -.07em;

  text-transform: uppercase;
}

.details-heading h2 span {
  color: var(--accent);
}

.service-detail-list {
  border-top:
    1px solid
    var(--line);
}

.detail-row {
  display: grid;

  grid-template-columns:
    70px
    .8fr
    1.1fr
    1fr;

  gap: 35px;

  align-items: start;

  padding:
    45px
    0;

  border-bottom:
    1px solid
    var(--line);

  transition:
    background .35s ease,
    padding .35s var(--ease);
}

.detail-row:hover {
  padding-left: 15px;
  padding-right: 15px;

  background:
    rgba(3,9,5,.28);
}

.detail-number {
  color: var(--accent);

  font-size: 10px;
  font-weight: 900;
}

.detail-row h3 {
  margin: 0;

  font-size:
    clamp(
      26px,
      3vw,
      46px
    );

  font-weight: 900;

  line-height: .90;

  letter-spacing: -.04em;

  text-transform: uppercase;
}

.detail-row p {
  margin: 0;

  max-width: 450px;

  color: var(--soft);

  font-size: 14px;
  font-weight: 600;

  line-height: 1.6;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.detail-tags span {
  padding:
    7px
    9px;

  border:
    1px solid
    rgba(242,239,228,.15);

  color: var(--soft);

  background:
    rgba(3,9,5,.20);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .07em;
}


/* =========================================================
   PROCESS
========================================================= */

.process-section {
  padding:
    120px
    var(--x);

  border-top:
    1px solid
    var(--line);

  background:
    rgba(3,9,5,.27);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}

.process-heading {
  max-width: 1000px;
}

.process-heading h2 {
  margin:
    25px
    0
    80px;

  font-size:
    clamp(
      50px,
      7vw,
      110px
    );

  font-weight: 900;

  line-height: .82;

  letter-spacing: -.07em;

  text-transform: uppercase;
}

.process-heading h2 span {
  color: var(--accent);
}

.process-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid
    var(--line);
}

.process-grid article {
  min-height: 260px;

  padding:
    30px
    25px;

  border-right:
    1px solid
    var(--line);
}

.process-grid article:last-child {
  border-right: 0;
}

.process-grid article span {
  color: var(--accent);

  font-size: 9px;
  font-weight: 900;
}

.process-grid article h3 {
  margin:
    80px
    0
    15px;

  font-size:
    clamp(
      24px,
      2.5vw,
      36px
    );

  font-weight: 900;

  letter-spacing: -.04em;
}

.process-grid article p {
  margin: 0;

  max-width: 220px;

  color: var(--soft);

  font-size: 13px;

  line-height: 1.5;
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {
  min-height: 90vh;

  padding:
    130px
    var(--x);

  display: flex;

  flex-direction: column;

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

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(185,223,114,.14),
      transparent 42%
    );
}

.final-cta h2 {
  margin:
    30px
    0
    50px;

  font-size:
    clamp(
      60px,
      9vw,
      150px
    );

  font-weight: 900;

  line-height: .78;

  letter-spacing: -.075em;

  text-transform: uppercase;
}

.final-cta h2 span {
  color: var(--accent);
}

.final-actions {
  display: flex;

  gap: 12px;
}

.final-primary,
.final-secondary {
  display: inline-flex;

  padding:
    15px
    20px;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .12em;
}

.final-primary {
  color: #071009;

  background: var(--accent);
}

.final-secondary {
  border:
    1px solid
    rgba(242,239,228,.22);

  color: var(--ink);

  background:
    rgba(3,9,5,.30);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .main-nav > a:not(.nav-cta) {
    display: none;
  }

  .agency-statement {
    grid-template-columns: 1fr;
  }

  .detail-row {
    grid-template-columns:
      45px
      1fr
      1.4fr;
  }

  .detail-tags {
    grid-column:
      2 / -1;
  }

  .process-grid {
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  :root {
    --x: 20px;
  }

  .topbar {
    padding:
      12px
      20px;
  }

  .brand-logo {
    height: 46px;
  }

  .services-intro {
    min-height: 100svh;

    padding-top: 120px;
  }

  .services-intro__number {
    top: 110px;
  }

  .services-intro h1 {
    font-size: 17vw;
  }

  .intro-bottom {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .philosophy-line {
    overflow-x: auto;

    justify-content: flex-start;
  }

  .philosophy-line i {
    min-width: 50px;
  }


  /* =====================================================
     MOBILE SERVICE SLIDER
  ===================================================== */

  .service-showcase {
    height: 100svh;
    min-height: 700px;
  }

  .services-vertical-label {
    top: 38%;
    left: -18px;

    font-size: 22px;
  }

  .service-content {
    left: 54px;
    right: 20px;

    bottom: 285px;

    width: auto;
  }

  .service-content h2 {
    font-size: 13vw;
  }

  .service-content p {
    max-width: 320px;

    font-size: 11px;
  }

  .service-card-stack {
    left: 54px;
    right: 18px;

    bottom: 85px;

    gap: 7px;
  }

  .service-preview-card {
    flex: 1;

    width: auto;
    height: 150px;
  }

  .service-preview-card span {
    left: 7px;
    right: 7px;
    bottom: 8px;

    font-size: 7px;
  }

  .service-bottom-controls {
    left: 54px;
    right: 18px;

    bottom: 27px;

    width: auto;
  }


  /* =====================================================
     MOBILE CONTENT SECTIONS
  ===================================================== */

  .agency-statement,
  .service-details,
  .process-section {
    padding:
      80px
      20px;
  }

  .detail-row {
    grid-template-columns:
      35px
      1fr;

    gap: 20px;
  }

  .detail-row p,
  .detail-tags {
    grid-column: 2;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-grid article {
    min-height: 200px;

    border-right: 0;

    border-bottom:
      1px solid
      var(--line);
  }

  .process-grid article h3 {
    margin-top: 50px;
  }

  .final-cta {
    min-height: 75vh;

    padding:
      100px
      20px;
  }

  .final-cta h2 {
    font-size: 16vw;
  }

  .final-actions {
    flex-direction: column;
  }

}

/* =========================================================
   BIGGER SERVICE DETAIL SECTION
========================================================= */

.detail-row {
  grid-template-columns:
    80px
    .9fr
    1.25fr
    1.15fr !important;

  gap:
    42px !important;

  padding:
    58px 0 !important;
}


/* NUMBER */

.detail-number {
  font-size:
    12px !important;

  font-weight:
    900 !important;
}


/* SERVICE TITLE */

.detail-row h3 {
  font-size:
    clamp(32px, 3.2vw, 52px) !important;

  line-height:
    .9 !important;
}


/* DESCRIPTION */

.detail-row p {
  max-width:
    520px !important;

  font-size:
    clamp(16px, 1.15vw, 18px) !important;

  line-height:
    1.65 !important;

  font-weight:
    600 !important;
}


/* TAGS */

.detail-tags {
  gap:
    10px !important;
}


.detail-tags span {
  padding:
    10px 13px !important;

  font-size:
    10px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .07em !important;

  border:
    1px solid
    rgba(242,239,228,.22) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .detail-row {
    grid-template-columns:
      55px
      1fr
      1.35fr !important;

    gap:
      28px !important;
  }


  .detail-tags {
    grid-column:
      2 / -1;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .detail-row {
    grid-template-columns:
      38px
      1fr !important;

    gap:
      20px !important;

    padding:
      42px 0 !important;
  }


  .detail-row h3 {
    font-size:
      32px !important;
  }


  .detail-row p,
  .detail-tags {
    grid-column:
      2;
  }


  .detail-row p {
    font-size:
      16px !important;

    line-height:
      1.6 !important;
  }


  .detail-tags span {
    padding:
      9px 11px !important;

    font-size:
      9px !important;
  }

}