.works-page {
  background: #ffffff;
}

/* ------------------------------
   Hero
------------------------------ */
.works-hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: stretch;
  color: #ffffff;
  background:
    linear-gradient(115deg, rgba(9,15,22,.95) 0%, rgba(9,15,22,.78) 48%, rgba(9,15,22,.42) 100%),
    url('/img/parallax.jpg') center center / cover no-repeat;
  overflow: hidden;
}

.works-hero::before {
  content: "";
  position: absolute;
  inset: auto -120px -220px auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 0 90px rgba(255,255,255,.035), 0 0 0 180px rgba(255,255,255,.02);
}

.works-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.25), transparent 58%);
}

.works-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 150px;
  padding-bottom: 178px;
}

.works-eyebrow,
.works-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.works-eyebrow {
  color: rgba(255,255,255,.70);
}

.works-kicker {
  color: #5f6670;
}

.works-hero h1 {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-size: clamp(52px, 6.3vw, 84px);
  line-height: 1.06;
  letter-spacing: .025em;
  text-wrap: balance;
}

.works-title-line {
  display: block;
  white-space: nowrap;
}

.works-title-line + .works-title-line {
  margin-top: .08em;
}

.works-hero-lead {
  max-width: 920px;
  margin: 30px 0 0;
  color: rgba(255,255,255,.92);
  font-size: clamp(18px, 1.75vw, 23px);
  line-height: 1.8;
  text-wrap: pretty;
}

.works-lead-chunk {
  display: inline-block;
  margin-right: .22em;
}

.works-lead-chunk:last-child {
  margin-right: 0;
}

.works-hero-actions {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.works-hero .button.primary {
  background: #ffffff;
  color: #111111;
}

/* ------------------------------
   Shared sections and headings
------------------------------ */
.works-section {
  padding: 88px 0;
}

.works-muted {
  background: #f5f7fa;
}

.works-stack {
  display: grid;
  gap: 32px;
}

.works-heading {
  max-width: 920px;
  margin: 0 auto;
}

.works-heading h2,
.works-intro-card h2,
.works-cta-card h2 {
  margin: 0;
  font-size: clamp(30px, 3.75vw, 48px);
  line-height: 1.28;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.works-heading > p:last-child {
  max-width: 780px;
  margin: 18px auto 0;
  color: #5f6670;
  text-wrap: pretty;
}

.works-intro-title span,
.works-approach-title span {
  display: block;
}

/* ------------------------------
   Metrics + introduction
------------------------------ */
.works-intro-section {
  padding-top: 0;
}

.works-metrics {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: -78px;
}

.works-metric-card {
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 28px 24px;
  border: 1px solid rgba(17,17,17,.09);
  border-radius: 24px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 60px rgba(17,17,17,.11);
}

.works-metric-card strong {
  display: block;
  white-space: nowrap;
  font-size: clamp(38px, 4.3vw, 58px);
  line-height: 1;
  letter-spacing: -.04em;
}

.works-metric-card strong span {
  margin-left: 3px;
  font-size: .46em;
}

.works-metric-card p {
  margin: 22px 0 0;
  color: #1d2530;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.works-metric-card small {
  display: inline-block;
  margin-top: 2px;
  color: #5f6670;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}

.works-intro-card {
  padding: 44px;
}

.works-intro-card h2 {
  max-width: 980px;
  margin-bottom: 22px;
  font-size: clamp(30px, 3.3vw, 46px);
}

.works-note {
  padding-top: 18px;
  border-top: 1px solid rgba(17,17,17,.10);
  color: #6c7480 !important;
  font-size: 13px;
}

/* ------------------------------
   Domains
------------------------------ */
.works-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.works-domain-card {
  position: relative;
  min-height: 100%;
  padding: 30px;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(17,17,17,.055);
  overflow: hidden;
}

.works-domain-card::after {
  content: "";
  position: absolute;
  top: -44px;
  right: -44px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: #f0f2f5;
}

.works-domain-no {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 24px;
  color: #8a929d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.works-domain-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-size: 23px;
  line-height: 1.4;
  text-wrap: balance;
}

.works-domain-card p {
  margin: 0;
  color: #4d5662;
}

.works-domain-card ul {
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(17,17,17,.09);
  list-style: none;
}

.works-domain-card li {
  position: relative;
  padding-left: 1.45em;
  color: #1d2530;
  font-size: 14px;
}

.works-domain-card li + li {
  margin-top: 8px;
}

.works-domain-card li::before {
  content: "";
  position: absolute;
  left: .1em;
  top: .45em;
  width: .35em;
  height: .65em;
  border-right: 2px solid #111111;
  border-bottom: 2px solid #111111;
  transform: rotate(45deg);
}

/* ------------------------------
   Experience bridge
------------------------------ */
.works-trend-section {
  color: #ffffff;
  background: linear-gradient(180deg, #0c1117, #131d28);
}

.works-trend-section .works-kicker,
.works-trend-section .works-heading > p:last-child {
  color: rgba(255,255,255,.62);
}

.works-bridge-list {
  display: grid;
  gap: 12px;
}

.works-bridge-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.055);
}

.works-bridge-item span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255,255,255,.52);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.works-bridge-item h3 {
  margin: 0;
  font-size: clamp(17px, 2.2vw, 23px);
  line-height: 1.4;
  text-wrap: balance;
}

.works-bridge-item b {
  text-align: center;
  color: rgba(255,255,255,.45);
  font-size: 26px;
}

/* ------------------------------
   Approach and CTA
------------------------------ */
.works-approach-section {
  background: #ffffff;
}

.works-approach-section .works-heading {
  max-width: 1060px;
}

.works-approach-title {
  font-size: clamp(30px, 3.5vw, 46px) !important;
}

.works-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.works-process li {
  min-height: 232px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 42px;
  padding: 28px;
  border: 1px solid rgba(17,17,17,.09);
  border-radius: 24px;
  background: #f7f8fa;
}

.works-process li > span {
  color: #9aa1aa;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.works-process li > div {
  display: grid;
  gap: 10px;
}

.works-process h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 25px);
  line-height: 1.2;
}

.works-process p {
  margin: 0;
  color: #4d5662;
  line-height: 1.65;
}

.works-cta-card {
  margin-top: 10px;
}

.works-cta-card h2 {
  margin-bottom: 18px;
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 1100px) {
  .works-hero {
    min-height: 720px;
  }

  .works-hero-inner {
    padding-bottom: 150px;
  }

  .works-hero h1 {
    font-size: clamp(50px, 7.2vw, 76px);
  }

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

  .works-metrics {
    margin-top: -64px;
  }

  .works-domain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .works-process li {
    min-height: 216px;
  }
}

@media (max-width: 760px) {
  .works-hero {
    min-height: 680px;
  }

  .works-hero-inner {
    padding-top: 126px;
    padding-bottom: 124px;
  }

  .works-hero h1 {
    font-size: clamp(42px, 13.5vw, 60px);
    line-height: 1.08;
  }

  .works-title-line {
    white-space: normal;
  }

  .works-hero-lead {
    max-width: 100%;
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.72;
  }

  .works-hero-actions {
    flex-direction: column;
    margin-top: 28px;
  }

  .works-section {
    padding: 68px 0;
  }

  .works-stack {
    gap: 24px;
  }

  .works-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: -44px;
  }

  .works-metric-card {
    min-height: 154px;
    padding: 20px;
    border-radius: 20px;
  }

  .works-metric-card strong {
    font-size: 38px;
  }

  .works-metric-card p {
    margin-top: 18px;
    font-size: 13px;
  }

  .works-heading h2,
  .works-intro-card h2,
  .works-cta-card h2,
  .works-approach-title {
    font-size: clamp(28px, 9.5vw, 40px) !important;
    line-height: 1.3;
  }

  .works-intro-title span,
  .works-approach-title span {
    display: inline;
  }

  .works-intro-card,
  .works-domain-card,
  .works-process li {
    padding: 24px;
  }

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

  .works-bridge-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px;
  }

  .works-bridge-item b {
    width: 24px;
    text-align: left;
    transform: rotate(90deg);
    transform-origin: center;
  }

  .works-process li {
    min-height: auto;
    gap: 22px;
  }
}

@media (max-width: 460px) {
  .works-hero {
    min-height: 720px;
  }

  .works-hero-inner {
    padding-bottom: 116px;
  }

  .works-metrics {
    margin-top: -34px;
  }

  .works-metric-card {
    min-height: 148px;
    padding: 18px;
  }
}

@media (max-width: 340px) {
  .works-metrics {
    grid-template-columns: 1fr;
  }
}