/* ==========================================================================
   Home Page Styles (Modular Section Architecture)
   File: assets/css/pages/home.css
   Sections:
     1. Hero Section (#hero)
     2. S.01 About WINHUB & United Carriers Expect Scroll (#about / .career-expect)
     3. S.02 Core Architecture (Cominvi Native Image Parallax + 2x3 Stats & Recent Works)
     4. S.03 WINHUB Partner Cylinder (#partners / .section_partners)
     5. S.04 CTA Banner (#contact / .wh-s04-cta)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* --------------------------------------------------------------------------
   0. Common Section Intro, Eyebrow Tags & Left-Aligned Headlines
   -------------------------------------------------------------------------- */
.wh-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  line-height: 1;
}

.wh-eyebrow-pill.is-dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}

.wh-eyebrow-pill.is-light {
  background: rgba(21, 21, 21, 0.05);
  border: 1px solid rgba(21, 21, 21, 0.12);
  color: #151515;
}

.wh-eyebrow-pill__dot {
  width: 5px;
  height: 5px;
  background-color: #FF6B00;
  display: inline-block;
  flex-shrink: 0;
}

/* Override Cominvi's float:left on .eyebrows & padding-right on .intro
   so section headlines left-align flush with the eyebrow tag above them */
.wh-s01-dark > .intro,
.wh-s02-light > .intro,
.wh-s03-partners > .intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 1.35rem !important;
  padding-right: 0 !important;
  width: 100% !important;
}

.wh-s01-dark > .intro .eyebrows,
.wh-s02-light > .intro .eyebrows,
.wh-s03-partners > .intro .eyebrows {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

.wh-section-headline {
  font-family: 'Helvetica Now Display', 'Pretendard', Arial, sans-serif !important;
  font-size: clamp(2rem, 3.33vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  word-break: keep-all;
  max-width: 96rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  text-align: left !important;
}

.wh-section-headline.is-white {
  color: #ffffff !important;
}

.wh-section-headline.is-black {
  color: #151515 !important;
}

/* --------------------------------------------------------------------------
   1. Hero Section (.section_hero.wh-hero)
   Preserves Cominvi's native .hero-content vertical center (top: 50%; translateY(-50%))
   -------------------------------------------------------------------------- */
.section_hero.wh-hero .hero-content {
  z-index: 4;
}

.section_hero.wh-hero .hero-content_left {
  grid-column: 1 / span 9;
}

.section_hero.wh-hero .h1,
.section_hero.wh-hero .is-h1-span {
  text-transform: none !important;
  font-size: clamp(2.75rem, 4.8vw, 4.65rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
}

.wh-hero-scroll {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.25s ease, transform 0.25s ease;
}

.wh-hero-scroll:hover {
  color: #ffffff;
  transform: translateX(-50%) translateY(3px);
}

.wh-hero-scroll svg {
  width: 14px;
  height: 14px;
  animation: wh-scroll-bounce 2s ease-in-out infinite;
}

@keyframes wh-scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   2. S.01 Dark About + United Carriers Expect Section (.wh-s01-dark / .career-expect)
   -------------------------------------------------------------------------- */
.section_about.wh-s01-dark {
  background-color: #141414 !important;
  color: #ffffff !important;
  padding-top: var(--_spacings---site-margin, 2.667rem) !important;
  padding-bottom: 300px !important;
  grid-row-gap: 4rem !important;
  row-gap: 4rem !important;
  position: relative;
  z-index: 2;
}

.section_about.wh-s01-dark > .intro {
  padding-bottom: 1rem !important;
}

/* United Carriers Expect Section Core Layout */
.career-expect {
  position: relative;
  z-index: 2;
  background-color: #141414;
  color: #ffffff;
  --expect-bg: #141414;
  --expect-accent: #FF6B00;
  width: 100%;
  margin-left: calc(var(--_spacings---site-margin, 2.5rem) * -1);
  margin-right: calc(var(--_spacings---site-margin, 2.5rem) * -1);
  width: calc(100% + var(--_spacings---site-margin, 2.5rem) * 2);
}

.career-expect-main {
  position: relative;
  z-index: 2;
  padding-top: 220px !important;
  padding-bottom: 220px !important;
}

/* Top & Bottom Smooth Gradient Fade Masks over Scrolling Titles (like unitedcarriers.com/careers) */
.career-expect-main::before,
.career-expect-main::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 14rem;
  z-index: 3;
  pointer-events: none;
}

.career-expect-main::before {
  top: 0;
  background: linear-gradient(to bottom, #141414 30%, rgba(20, 20, 20, 0));
}

.career-expect-main::after {
  bottom: 0;
  background: linear-gradient(to top, #141414 30%, rgba(20, 20, 20, 0));
}

.career-expect-main-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 var(--_spacings---site-margin, 2.5rem);
}

.career-expect-grid {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
  column-gap: 1.5rem;
}

/* Sticky Left Circular Dial Wrapper (United Carriers 1:1 match)
   - Height: 100vh, position: sticky, top: 0
   - Negative margin centers the 16rem dial in the viewport when scroll hits the list
*/
.career-expect-stick-wrap {
  grid-row: 1 / 2;
  grid-column: 1 / -1;
  height: 100vh;
  margin-top: calc(-50vh - 8rem);
  margin-bottom: calc(-50vh - 8rem);
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 3;
  pointer-events: none;
}

.career-expect-stick {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: center;
  pointer-events: none;
}

.career-expect-ic {
  background-color: #141414;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 16rem;
  height: 16rem;
  display: flex;
  position: relative;
}

.career-expect-ic.main {
  grid-column: 2 / span 3;
  justify-self: center;
  will-change: transform, opacity;
}

.career-expect-ic-load {
  z-index: 2;
  background-color: #141414;
  outline: 1px solid rgba(255, 255, 255, 0.08);
  outline-offset: -1.15rem;
  pointer-events: auto;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  position: relative;
  will-change: transform, opacity;
}

.career-expect-ic-load-circ {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.career-expect-ic-load-circ img,
.career-expect-ic-load-circ svg {
  width: 100%;
  height: 100%;
  display: block;
}

.career-expect-ic-load-circ:first-child {
  opacity: 0.22;
}

.career-expect-ic-load-circ:last-child {
  --progress-comic: 0%;
  -webkit-mask: conic-gradient(from 0deg, #ffffff var(--progress-comic), transparent 0);
  mask: conic-gradient(from 0deg, #ffffff var(--progress-comic), transparent 0);
}

/* Center Active Icon Slot inside Sticky Dial (United Carriers Dot-Matrix + Multi-Path Keyframe Animation) */
.career-expect-ic.main .career-expect-ic-inner {
  z-index: 3;
  aspect-ratio: 1;
  border-radius: 50%;
  width: 46%;
  height: 46%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.career-expect-center-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6) rotate(-8deg);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  pointer-events: none;
  color: #FF6B00;
  will-change: transform, opacity;
}

.career-expect-center-icon.active {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.career-expect-center-icon.leaving {
  opacity: 0;
  transform: scale(0.65) rotate(8deg);
}

.career-expect-center-icon .icon {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.career-expect-center-icon .icon-df,
.career-expect-center-icon .icon-slot {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.career-expect-center-icon .icon-df {
  color: #2c2c2c;
  opacity: 0.45;
}

.career-expect-center-icon .icon-slot {
  color: #FF6B00;
  filter: drop-shadow(0 0 10px rgba(255, 107, 0, 0.55));
}

.career-expect-center-icon .icon-df svg,
.career-expect-center-icon .icon-slot svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Staggered glow pulse for active icon vectors */
.career-expect-center-icon.active .icon-slot path,
.career-expect-center-icon.active .icon-slot circle,
.career-expect-center-icon.active .icon-slot rect {
  animation: wh-icon-pulse 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--delay, 0s);
}

@keyframes wh-icon-pulse {
  0% {
    opacity: 0.15;
  }
  100% {
    opacity: 1;
  }
}

.career-expect-center-icon .icon-slot path:nth-child(8n + 1),
.career-expect-center-icon .icon-slot circle:nth-child(8n + 1) { --delay: 0.04s; }
.career-expect-center-icon .icon-slot path:nth-child(8n + 2),
.career-expect-center-icon .icon-slot circle:nth-child(8n + 2) { --delay: 0.12s; }
.career-expect-center-icon .icon-slot path:nth-child(8n + 3),
.career-expect-center-icon .icon-slot circle:nth-child(8n + 3) { --delay: 0.20s; }
.career-expect-center-icon .icon-slot path:nth-child(8n + 4),
.career-expect-center-icon .icon-slot circle:nth-child(8n + 4) { --delay: 0.08s; }
.career-expect-center-icon .icon-slot path:nth-child(8n + 5),
.career-expect-center-icon .icon-slot circle:nth-child(8n + 5) { --delay: 0.16s; }
.career-expect-center-icon .icon-slot path:nth-child(8n + 6),
.career-expect-center-icon .icon-slot circle:nth-child(8n + 6) { --delay: 0.24s; }
.career-expect-center-icon .icon-slot path:nth-child(8n + 7),
.career-expect-center-icon .icon-slot circle:nth-child(8n + 7) { --delay: 0.10s; }
.career-expect-center-icon .icon-slot path:nth-child(8n),
.career-expect-center-icon .icon-slot circle:nth-child(8n)     { --delay: 0.18s; }

/* Scrolling Expect Items List (Shares grid-row: 1 / 2 with .career-expect-stick-wrap) */
.career-expect-main-list {
  grid-row: 1 / 2;
  grid-column: 1 / -1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  position: relative;
  pointer-events: none;
}

.career-expect-main-item {
  position: relative;
  padding-top: 4.8rem;
  padding-bottom: 4.8rem;
  pointer-events: auto;
}

.career-expect-main-item-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: center;
  min-height: 20.8rem;
}

/* Item inline icon (hidden on desktop where sticky dial shows it, visible on mobile) */
.career-expect-main-item-ic {
  display: none;
}

.career-expect-main-item-title {
  grid-column: 5 / span 4;
  color: #ffffff;
  opacity: 0.16;
  transform: scale(0.97);
  transform-origin: left center;
  will-change: transform, opacity;
}

.career-expect-main-item.active .career-expect-main-item-title {
  opacity: 1;
  transform: scale(1);
}

.career-expect-main-item-title .heading {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: clamp(2rem, 3.8vw, 55px) !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.035em !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-transform: none !important;
}

@media screen and (min-width: 992px) {
  .career-expect-main-item-title .heading {
    font-size: 55px !important;
  }
}

.career-expect-main-item-desc {
  grid-column: 9 / span 4;
  color: rgba(255, 255, 255, 0.76);
}

.career-expect-main-item-desc .txt {
  font-size: clamp(1rem, 1.5vw, 22px);
  line-height: 1.58;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.78);
  word-break: keep-all;
}

@media screen and (min-width: 992px) {
  .career-expect-main-item-desc .txt {
    font-size: 22px !important;
  }
}

/* Word-by-word reveal animation (copied from unitedcarriers.com/careers) */
.career-expect-main-item-desc .word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-right: 0.26em;
}

.career-expect-main-item-desc .word {
  display: inline-block;
  opacity: 0;
  transition-delay: 0s;
  transform: translateY(55%);
  transition: opacity 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95),
              transform 0.6s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.career-expect-main-item.active .career-expect-main-item-desc .word {
  opacity: 1;
  transform: translateY(0%);
  transition-delay: var(--trans-delay, 0s);
}

.career-expect-main-item-line {
  display: none;
}

/* --------------------------------------------------------------------------
   3. S.02 Core Architecture (Cominvi Native Image Parallax + 2x3 Stats & Recent Works)
   -------------------------------------------------------------------------- */
.section_about.wh-s02-light {
  background-color: #ffffff !important;
  color: #151515 !important;
  padding: 42px var(--_spacings---site-margin, 2.5rem) 160px !important;
  grid-row-gap: 3.5rem !important;
  row-gap: 3.5rem !important;
  position: relative;
  z-index: 2;
}

/* Native Cominvi .content + .image-wrapper > .image-p.is-portrait + .stats (Figma Frame 15: 1836px x 1398px) */
.section_about.wh-s02-light > .content {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 26px !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 1200px;
}

.section_about.wh-s02-light > .content > .content_column {
  width: 100% !important;
  height: 100% !important;
}

.section_about.wh-s02-light > .content > .content_column:first-child {
  height: 100% !important;
}

.section_about.wh-s02-light > .content > .content_column.align-r {
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  height: 100% !important;
}

.section_about.wh-s02-light .image-wrapper {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
}

.section_about.wh-s02-light .image-wrapper .image-p.is-portrait {
  width: 100% !important;
  height: 120% !important;
  object-fit: cover !important;
  object-position: center center !important;
  position: absolute !important;
  top: -10% !important;
  left: 0 !important;
  will-change: transform !important;
}

.section_about.wh-s02-light .stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  column-gap: 26px !important;
  row-gap: 26px !important;
  width: 100% !important;
  height: 100% !important;
}

.section_about.wh-s02-light .stats-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 3rem 2rem !important;
  border-top: 1px solid rgba(21, 21, 21, 0.12) !important;
  min-height: 320px;
}

.section_about.wh-s02-light .stats-card:nth-child(1),
.section_about.wh-s02-light .stats-card:nth-child(2) {
  border-top: none !important;
  padding-top: 1.5rem !important;
}

.section_about.wh-s02-light .is-stat {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  gap: 1.5rem !important;
}

.section_about.wh-s02-light .stat_number {
  font-family: 'Helvetica Now Display', 'Pretendard', Arial, sans-serif !important;
  font-size: clamp(3rem, 4.44vw, 64px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #151515 !important;
  line-height: 1.1 !important;
}

.wh-stat-meta {
  display: flex;
  flex-direction: column;
}

.wh-stat-meta .eyebrow-m {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: clamp(1.2rem, 1.94vw, 28px) !important;
  font-weight: 500 !important;
  color: #999999 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase;
  line-height: 1.1 !important;
}

/* S.02 Part 2: RECENT WORKS Full Height Section (Figma Frame 48: 1920x1080 1:1) */
.wh-recent-works-section {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffff;
  color: #151515;
  padding: 100px var(--_spacings---site-margin, 2.5rem);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.wh-recent-works {
  width: 100%;
  max-width: 1836px;
  margin: 0 auto;
}

.wh-recent-works__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(21, 21, 21, 0.16);
}

.wh-recent-works__title {
  font-family: 'Helvetica Now Display', 'Pretendard', Arial, sans-serif;
  font-size: clamp(2.5rem, 4.44vw, 64px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #151515;
  margin: 0 0 0.5rem 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.wh-recent-works__subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1.1rem, 1.66vw, 24px);
  color: #151515;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.wh-recent-works__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #151515;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-right: 0.75rem;
  border-right: 2px solid #151515;
  line-height: 1.2;
  transition: opacity 0.2s ease;
}

.wh-recent-works__more:hover {
  opacity: 0.6;
}

.wh-recent-works__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wh-work-row {
  display: grid;
  grid-template-columns: 80px 380px 1fr 50px;
  align-items: center;
  column-gap: 2rem;
  min-height: 183px;
  padding: 1.5rem 0.5rem;
  border-bottom: 1px solid rgba(21, 21, 21, 0.12);
  text-decoration: none !important;
  color: #151515 !important;
  transition: background-color 0.25s ease, padding-left 0.25s ease;
}

.wh-work-row:hover {
  background-color: rgba(21, 21, 21, 0.02);
  padding-left: 1.2rem;
}

.wh-work-row__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1.8rem, 2.91vw, 42px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #151515;
}

.wh-work-row__client {
  font-family: 'Helvetica Now Display', 'Pretendard', Arial, sans-serif;
  font-size: clamp(1.8rem, 2.91vw, 42px);
  font-weight: 700;
  color: #151515;
  letter-spacing: -0.02em;
}

.wh-work-row__desc {
  font-family: 'Pretendard', sans-serif;
  font-size: clamp(1rem, 1.11vw, 16px);
  color: #151515;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.wh-work-row__arrow {
  justify-self: end;
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #151515;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wh-work-row__arrow img {
  width: 100%;
  height: 100%;
  display: block;
}

.wh-work-row:hover .wh-work-row__arrow {
  transform: translate(4px, -4px);
}

/* --------------------------------------------------------------------------
   4. S.03 WINHUB Partner Cylinder (.section_partners.wh-s03-partners)
   -------------------------------------------------------------------------- */
.section_partners.wh-s03-partners {
  background-color: #ffffff !important;
  color: #151515 !important;
  padding-top: 42px !important;
  padding-bottom: 220px !important;
}

.section_partners.wh-s03-partners .cylindar__text__item .body-xl {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase;
}

.section_partners.wh-s03-partners .cylindar__text__item .body-xl.is-active {
  color: #151515 !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   5. S.04 CTA Banner (.wh-s04-cta) - Figma Frame 50: 1920x1080 1:1
   -------------------------------------------------------------------------- */
.section_cta.wh-s04-cta {
  position: relative;
  background-color: #020617;
  color: #ffffff;
  min-height: 100vh;
  padding: 100px var(--_spacings---site-margin, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  z-index: 2;
  box-sizing: border-box;
}

.wh-s04-cta__bg {
  position: absolute;
  inset: -15% 0;
  height: 130%;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.wh-s04-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  will-change: transform;
}

.wh-s04-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 6, 23, 0.72) 0%,
    rgba(2, 6, 23, 0.45) 50%,
    rgba(2, 6, 23, 0.85) 100%
  );
  z-index: 1;
}

.wh-s04-cta__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1836px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.wh-s04-cta__top {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.wh-s04-cta__title {
  font-family: 'Helvetica Now Display', 'Pretendard', Arial, sans-serif;
  font-size: clamp(2.5rem, 4.44vw, 64px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.1;
  margin: 2rem 0 1.25rem 0;
  text-transform: uppercase;
}

.wh-s04-cta__sub {
  font-family: 'Pretendard', sans-serif;
  font-size: clamp(1.2rem, 1.94vw, 28px);
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
  word-break: keep-all;
  letter-spacing: -0.02em;
}

.wh-s04-cta__action {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5rem;
  margin-bottom: 2rem;
}

.wh-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #FFA800;
  color: #151515 !important;
  font-family: 'Pretendard', sans-serif;
  font-size: clamp(1.3rem, 2.22vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
  text-decoration: none !important;
  width: 100%;
  max-width: 533px;
  height: 109px;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(255, 168, 0, 0.28);
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.wh-cta-btn:hover {
  background-color: #FFB72B;
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(255, 168, 0, 0.45);
}

/* --------------------------------------------------------------------------
   6. Responsive Breakpoints (Tablet & Mobile)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .career-expect-ic.main {
    grid-column: 1 / span 4;
    width: 12.5rem;
    height: 12.5rem;
  }

  .career-expect-main-item-title {
    grid-column: 5 / span 4;
  }

  .career-expect-main-item-desc {
    grid-column: 9 / span 4;
  }

  .section_about.wh-s02-light > .content {
    grid-template-columns: 1fr !important;
    row-gap: 3rem !important;
  }

  .section_about.wh-s02-light .image-wrapper {
    min-height: 26rem;
    max-height: 32rem;
  }

  .wh-work-row {
    grid-template-columns: 3.5rem 11rem 1fr 2.5rem;
    column-gap: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .section_about.wh-s01-dark,
  .section_about.wh-s02-light {
    padding-top: 4.5rem !important;
  }

  .career-expect-main {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .career-expect-main::before,
  .career-expect-main::after {
    display: none;
  }

  .career-expect-stick-wrap {
    display: none;
  }

  .career-expect-main-item {
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .career-expect-main-item-inner {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
    min-height: auto;
  }

  .career-expect-main-item-ic {
    display: flex;
    justify-content: flex-start;
  }

  .career-expect-main-item-ic .career-expect-ic {
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  .career-expect-main-item-ic .career-expect-ic-inner {
    width: 60%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .career-expect-main-item-title,
  .career-expect-main-item-desc {
    grid-column: 1 / -1;
    opacity: 1 !important;
    transform: none !important;
  }

  .career-expect-main-item-desc .word {
    opacity: 1 !important;
    transform: none !important;
  }

  .wh-section-headline {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

  .wh-eyebrow-pill {
    font-size: 16px !important;
    padding: 0.25rem 0.5rem !important;
  }

  .section_about.wh-s02-light .stats {
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 1.25rem !important;
  }

  .section_about.wh-s02-light .stat_number {
    font-size: 32px !important;
    line-height: 35px !important;
  }

  .wh-stat-meta .eyebrow-m {
    font-size: 18px !important;
    line-height: 20px !important;
  }

  .section_about.wh-s02-light .stats-card:nth-child(1),
  .section_about.wh-s02-light .stats-card:nth-child(2) {
    border-top: 1px solid rgba(21, 21, 21, 0.12) !important;
    padding-top: 1.5rem !important;
  }

  .wh-recent-works__title {
    font-size: 32px !important;
    line-height: 35px !important;
  }

  .wh-recent-works__subtitle {
    font-size: 12px !important;
    line-height: 13px !important;
  }

  .wh-work-row {
    grid-template-columns: 2.5rem 1fr 2rem;
    row-gap: 0.4rem;
    padding: 1.35rem 0.25rem;
  }

  .wh-work-row__num {
    font-size: 32px !important;
    line-height: 35px !important;
  }

  .wh-work-row__client {
    font-size: 32px !important;
    line-height: 35px !important;
  }

  .wh-work-row__desc {
    grid-column: 2 / span 2;
    font-size: 18px !important;
    line-height: 20px !important;
  }

  .wh-work-row__arrow {
    grid-column: 3;
    grid-row: 1;
  }

  .section_cta.wh-s04-cta {
    min-height: 28rem;
    padding: 4.5rem var(--_spacings---site-margin, 1.25rem) 4rem;
  }

  .wh-s04-cta__title {
    font-size: 32px !important;
    line-height: 35px !important;
  }

  .wh-s04-cta__sub {
    font-size: 28px !important;
    line-height: 31px !important;
  }

  .wh-cta-btn {
    font-size: 24px !important;
    line-height: 26px !important;
    padding: 1rem 2.5rem !important;
  }
}