/* One editorial system, with a distinct composition for each chapter. */
:root {
  --editorial-paper: #e8eee7;
  --editorial-ink: #17281e;
  --editorial-dark: #0c1010;
  --editorial-white: #f5f7f2;
}

/* Chapter type, rule, and left edge stay constant across color changes. */
#why-choied,
#approach,
#company {
  --chapter-ink: #eaf3ec;
  --chapter-rule: rgba(186, 229, 202, .22);
  color: var(--chapter-ink);
  background: var(--editorial-dark);
}
#why-choied {
  --chapter-ink: #17281e;
  --chapter-rule: rgba(30, 69, 46, .21);
  color: var(--chapter-ink);
  background: var(--editorial-white);
}
#approach,
.sequence-section,
.capabilities {
  background: #111a16;
}
#why-choied .chapter-title > span,
#approach .chapter-title > span,
#company .chapter-title > span {
  color: var(--chapter-ink);
}

/* Why Choied reads as one light editorial spread, from title to conclusion. */
.agency-section {
  padding-top: 58px;
  padding-bottom: 78px;
  background: var(--editorial-white);
  color: var(--editorial-ink);
}
.agency-section .why-motion {
  --why-white: #17281e;
  --why-green: #087f54;
  --why-duration: 2.7s;
  height: clamp(235px, 19vw, 250px);
  margin-bottom: 30px;
  padding: 26px 20px;
  border-color: rgba(30, 69, 46, .2);
  background: transparent;
}
.agency-section .agency-headline {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(15px, 2vw, 32px);
  margin: 0 0 40px;
  color: #17281e;
  font-family: "Manrope", Arial, sans-serif;
}
.agency-section .agency-headline-first {
  font-size: clamp(38px, 3.9vw, 54px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.agency-section .agency-headline-middle {
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.agency-section .agency-headline-last {
  color: #087f54;
  font-size: clamp(58px, 5.9vw, 82px);
  font-weight: 700;
  font-style: normal;
  line-height: .98;
  letter-spacing: -.06em;
  white-space: nowrap;
}
.agency-section.motion-ready .agency-perspectives,
.agency-section.motion-ready .agency-conclusion {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .55s ease, transform .7s cubic-bezier(.18,.7,.2,1);
}
.agency-section.motion-ready.is-copy-visible .agency-perspectives,
.agency-section.motion-ready.is-copy-visible .agency-conclusion {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.agency-section.motion-ready .agency-conclusion { transition-delay: .12s; }
.agency-section.motion-ready .agency-headline-first,
.agency-section.motion-ready .agency-headline-middle,
.agency-section.motion-ready .agency-headline-last { opacity: 0; }
.agency-section.motion-ready .agency-headline-first { transform: translate3d(-72px,0,0); }
.agency-section.motion-ready .agency-headline-middle { transform: translate3d(0,14px,0) scale(.94); }
.agency-section.motion-ready .agency-headline-last { transform: translate3d(72px,0,0) scale(.94); }
.agency-section.motion-ready.is-copy-visible .agency-headline-first,
.agency-section.motion-ready.is-copy-visible .agency-headline-middle,
.agency-section.motion-ready.is-copy-visible .agency-headline-last {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  transition: opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.agency-section.motion-ready.is-copy-visible .agency-headline-middle { transition-delay: .16s; }
.agency-section.motion-ready.is-copy-visible .agency-headline-last { transition-delay: .32s; }
.agency-section.motion-ready.is-copy-visible .agency-perspectives { transition-delay: .38s; }
.agency-section.motion-ready.is-copy-visible .agency-conclusion { transition-delay: .48s; }
.agency-section .agency-perspective,
.agency-section .agency-conclusion { border-color: rgba(30, 69, 46, .22); }
.agency-section .agency-perspective h3 { color: #17281e; }
.agency-section .agency-perspective h3 small {
  color: #087f54;
  font: 600 14px/1.3 "Noto Sans KR", sans-serif;
  letter-spacing: -.035em;
}
.agency-section .agency-conclusion h3 { color: #087f54; }
.agency-section .agency-perspective p { color: #496053; }
.agency-section .agency-perspective p + p,
.agency-section .agency-conclusion p { color: #213e2d; }
.agency-section .agency-perspectives { margin-bottom: 44px; }

/* The growth diagram is the feature image of a dark reading spread. */
.sequence-section { border-top: 1px solid rgba(186, 229, 202, .12); }

/* Client marks read as an archive rather than another dark feature panel. */
#clients,
.clients {
  background: var(--editorial-paper);
  color: var(--editorial-ink);
}
.clients-heading h2.type-reveal {
  color: var(--editorial-ink);
}
.client-roster .client-logo {
  isolation: isolate;
  background: #d9e3da;
  border-color: rgba(22, 63, 40, .16);
}
.client-roster .client-logo::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -35% -50%;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .08) 43%, rgba(255, 255, 255, .54) 50%, rgba(109, 238, 170, .21) 57%, transparent 65%);
  filter: blur(8px);
  opacity: 0;
  transform: translateX(-85%);
  pointer-events: none;
}
.client-roster.motion-ready .client-row.visible .client-logo {
  animation: client-arrival-glow .95s ease-out .26s both;
}
.client-roster.motion-ready .client-row.visible .client-logo::before {
  animation: client-arrival-glint 1.05s cubic-bezier(.2, .66, .24, 1) .33s both;
}
.client-roster.motion-ready .client-row.visible .client-logo:nth-child(2),
.client-roster.motion-ready .client-row.visible .client-logo:nth-child(2)::before { animation-delay: .45s; }
.client-roster.motion-ready .client-row.visible .client-logo:nth-child(3),
.client-roster.motion-ready .client-row.visible .client-logo:nth-child(3)::before { animation-delay: .57s; }
@keyframes client-arrival-glow {
  0%, 100% { box-shadow: inset 0 0 0 rgba(84, 225, 151, 0), 0 0 0 rgba(84, 225, 151, 0); }
  48% { box-shadow: inset 0 0 24px rgba(84, 225, 151, .27), 0 0 24px rgba(84, 225, 151, .25); }
}
@keyframes client-arrival-glint {
  0% { opacity: 0; transform: translateX(-85%); }
  25%, 60% { opacity: .72; }
  100% { opacity: 0; transform: translateX(85%); }
}

/* The final company spread returns to the opening's quiet dark field. */
#company {
  border-top-color: rgba(186, 229, 202, .22);
}
.company {
  border-top: 1px solid rgba(186, 229, 202, .16);
}

@media (min-width: 901px) {
  .clients-heading {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 52px;
  }
  .clients-heading h2.type-reveal {
    width: min(68%, 750px);
  }
}

@media (max-width: 900px) {
  .clients-heading {
    display: block;
  }
}

@media (max-width: 700px) {
  .agency-section { padding-top: 45px; padding-bottom: 68px; }
  .agency-section .why-motion { height: 265px; margin-bottom: 28px; padding: 18px 12px; }
  .agency-section .agency-headline { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 34px; }
  .agency-section .agency-headline-first { align-self: flex-start; font-size: clamp(30px, 7.8vw, 42px); }
  .agency-section .agency-headline-middle { align-self: center; font-size: clamp(28px, 7.1vw, 38px); }
  .agency-section .agency-headline-last { align-self: flex-end; font-size: clamp(39px, 10.3vw, 54px); }
  .agency-section .agency-perspectives { margin-bottom: 38px; }
  .clients-heading h2.type-reveal {
    font-size: clamp(26px, 8.1vw, 34px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-roster.motion-ready .client-row.visible .client-logo,
  .client-roster.motion-ready .client-row.visible .client-logo::before {
    animation: none;
  }
}