/* ==========================================================================
   DigiTalents — Our Work page
   Depends on dt-core.css for tokens, reset and shared chrome.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Helpers
   -------------------------------------------------------------------------- */

.is-hidden { display: none !important; }

.work-relaxed { line-height: 1.625; }
.work-c-primary { color: var(--c-primary); }
.work-c-mid2 { color: var(--c-gradient-mid-2); }
.work-c-white { color: var(--c-text-premium-white); }
.work-dot--mid2 { background-color: var(--c-gradient-mid-2); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.work-hero {
  position: relative;
  width: 100%;
  padding-inline: var(--margin-lg);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xxl);
  overflow: hidden;
}

.work-glow {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.work-glow--a {
  top: -8rem;
  right: 25%;
  width: 24rem;
  height: 24rem;
  background-color: rgb(167 75 247 / 0.15);
  filter: blur(120px);
}

.work-glow--b {
  top: 5rem;
  left: 2.5rem;
  width: 420px;
  height: 420px;
  background-color: rgb(241 62 245 / 0.1);
  filter: blur(140px);
}

.work-hero__inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: var(--container);
  margin-inline: auto;
}

.work-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background-color: var(--c-surface-card);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-md);
}

.work-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  width: 100%;
  align-items: end;
}

@media (min-width: 1024px) {
  .work-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .work-hero__headline { grid-column: span 8 / span 8; }
  .work-hero__aside    { grid-column: span 4 / span 4; }
}

.work-hero__title {
  max-width: 56rem;
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--c-text-premium-white);
}

.work-hero__title-line { display: block; }

.work-hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.work-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
  color: rgb(181 167 206 / 0.7);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.work-hero__meta-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: var(--radius-full);
  background-color: var(--c-primary);
  flex: none;
}

/* Filters */
.work-filterbar {
  width: 100%;
  padding-top: var(--space-md);
}

.work-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs);
  border-radius: var(--radius-full);
  background-color: var(--c-surface-card);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-lg);
}

.work-filter {
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  color: var(--c-on-surface-variant);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  font-weight: 600;
  cursor: pointer;
  transition: all 300ms var(--ease);
}

.work-filter:hover {
  background-color: var(--c-surface-elevated);
  color: var(--c-text-premium-white);
}

.work-filter.is-active {
  background-color: var(--c-primary-container);
  color: var(--c-on-primary-container);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   Macro stats strip
   -------------------------------------------------------------------------- */

.work-stats {
  width: 100%;
  padding-inline: var(--margin-lg);
  padding-block: var(--space-lg);
  background-color: var(--c-surface-container-lowest);
  box-shadow: var(--shadow-md);
}

.work-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: var(--container);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .work-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.work-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.work-stat__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.work-stat__value {
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--c-text-premium-white);
}

.work-stat__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  flex: none;
}

.work-stat__dot--accent  { background-color: var(--c-gradient-mid-1); animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.work-stat__dot--primary { background-color: var(--c-primary); }
.work-stat__dot--mid2    { background-color: var(--c-gradient-mid-2); }
.work-stat__dot--pink    { background-color: var(--c-secondary); }

.work-stat__label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-text-muted-lilac);
}

/* --------------------------------------------------------------------------
   Portfolio
   -------------------------------------------------------------------------- */

.work-portfolio {
  width: 100%;
  padding-inline: var(--margin-lg);
  padding-block: var(--space-xxl);
}

.work-portfolio__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
  max-width: var(--container);
  margin-inline: auto;
}

.work-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .work-pair { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .work-project--half   { grid-column: span 6 / span 6; }
  .work-project--wide   { grid-column: span 7 / span 7; }
  .work-project--narrow { grid-column: span 5 / span 5; }
}

.work-project {
  position: relative;
  width: 100%;
  border-radius: 1rem;
  background-color: var(--c-surface-card);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transition: all 500ms var(--ease);
}

.work-project:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.work-project--half,
.work-project--wide,
.work-project--narrow {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.work-project__aura {
  position: absolute;
  top: 0;
  right: 0;
  width: 20rem;
  height: 20rem;
  background-color: rgb(241 62 245 / 0.1);
  filter: blur(64px);
  pointer-events: none;
}

.work-project__split {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .work-project__split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .work-project__panel  { grid-column: span 7 / span 7; }
  .work-project__visual { grid-column: span 5 / span 5; }
}

.work-project__panel {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-xl);
}

@media (min-width: 1024px) {
  .work-project__panel { padding: var(--space-xxl); }
}

.work-project__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
}

.work-project__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.work-brand {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  background-color: var(--c-surface-container-high);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
}

.work-brand--pink    { color: var(--c-secondary); }
.work-brand--primary { color: var(--c-primary); }
.work-brand--mid2    { color: var(--c-gradient-mid-2); }

.work-kind {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  background-color: rgb(223 183 255 / 0.1);
  color: var(--c-primary);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.work-kind--pink {
  background-color: rgb(255 175 214 / 0.1);
  color: var(--c-secondary);
}

.work-case-no {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-text-muted-lilac);
}

.work-project__title {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--c-text-premium-white);
  transition: color 150ms var(--ease);
}

.work-project__title--lg {
  font-size: 44px;
  line-height: 1.375;
  letter-spacing: -0.025em;
}

.work-project:hover .work-project__title { color: var(--c-primary); }

.work-project__kpis {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: var(--space-xl);
}

.work-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  background-color: var(--c-surface-container-low);
  box-shadow: var(--shadow-sm);
}

.work-kpi {
  display: flex;
  flex-direction: column;
}

.work-kpi__value {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--c-text-premium-white);
}

.work-project__foot,
.work-project__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.work-project__foot { padding-top: var(--space-xs); }

.work-project__actions {
  padding-inline: var(--space-xl);
  padding-bottom: var(--space-xl);
  padding-top: var(--space-sm);
}

.work-case-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--c-text-premium-white);
  transition: color 150ms var(--ease);
}

.work-case-link:hover { color: var(--c-primary); }

.work-case-link__icon { transition: transform 300ms var(--ease); }
.work-case-link:hover .work-case-link__icon { transform: translateX(-0.25rem); }

/* Feature visual panel */
.work-project__visual {
  position: relative;
  min-height: 420px;
  background-color: var(--c-surface-container);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .work-project__visual { min-height: 560px; }
}

.work-project__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.work-project:hover .work-project__img { transform: scale(1.05); }

.work-project__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, var(--c-surface-card), transparent, transparent);
}

@media (min-width: 1024px) {
  .work-project__scrim {
    background-image: linear-gradient(to right, var(--c-surface-card), transparent, transparent);
  }
}

.work-proof {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 20rem;
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  background-color: rgb(46 35 76 / 0.9);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-xl);
}

.work-proof__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-image: linear-gradient(to top right, var(--c-gradient-start), var(--c-gradient-end));
  color: var(--c-text-premium-white);
  box-shadow: var(--shadow-md);
  flex: none;
}

/* --------------------------------------------------------------------------
   AI terminal mock
   -------------------------------------------------------------------------- */

.work-terminal {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 16rem;
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  background-color: var(--c-surface-container-lowest);
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  overflow: hidden;
}

.work-terminal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-text-muted-lilac);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.work-terminal__title { margin-right: var(--space-xs); }

.work-led {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  flex: none;
}

.work-led--red    { background-color: rgb(239 68 68 / 0.8); }
.work-led--yellow { background-color: rgb(234 179 8 / 0.8); }
.work-led--green  { background-color: rgb(34 197 94 / 0.8); }

.work-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-xs);
  font-size: 13px;
  line-height: 20px;
}

.work-bubble {
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
}

.work-bubble--in {
  align-self: flex-start;
  max-width: 80%;
  background-color: var(--c-surface-container-high);
  color: var(--c-on-surface);
}

.work-bubble--out {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  align-self: flex-end;
  max-width: 85%;
  background-color: var(--c-primary-container);
  color: var(--c-on-primary-container);
  font-weight: 500;
}

.work-bubble__glyph { margin-top: 0.125rem; }

.work-terminal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xs);
  padding: 0.25rem var(--space-sm);
  border-radius: 0.375rem;
  background-color: rgb(45 41 59 / 0.6);
  color: var(--c-text-muted-lilac);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Metrics blocks
   -------------------------------------------------------------------------- */

.work-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  padding-top: var(--space-md);
}

.work-metric {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  background-color: var(--c-surface-container-low);
}

.work-metric__value {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--c-text-premium-white);
}

/* --------------------------------------------------------------------------
   Social still + waveform
   -------------------------------------------------------------------------- */

.work-still {
  position: relative;
  width: 100%;
  height: 16rem;
  border-radius: var(--radius-xl);
  background-color: var(--c-surface-container-lowest);
  overflow: hidden;
}

.work-still__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.work-project:hover .work-still__img { transform: scale(1.05); }

.work-still__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, var(--c-surface-card), transparent, transparent);
}

.work-sound {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.25rem var(--space-sm);
  border-radius: var(--radius-full);
  background-color: rgb(46 35 76 / 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.work-wave {
  position: absolute;
  bottom: 1rem;
  inset-inline: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-lg);
  background-color: rgba(28, 22, 46, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.work-wave__bars {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.5rem;
}

.work-wave__bar {
  width: 0.25rem;
  border-radius: var(--radius-full);
}

.work-wave__bar--1 { height: 0.75rem; background-color: var(--c-gradient-start); animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.work-wave__bar--2 { height: 1.25rem; background-color: var(--c-gradient-mid-1); animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.work-wave__bar--3 { height: 0.5rem;  background-color: var(--c-gradient-mid-2); }
.work-wave__bar--4 { height: 1.5rem;  background-color: var(--c-gradient-end);   animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.work-wave__bar--5 { height: 1rem;    background-color: var(--c-primary); }
.work-wave__bar--6 { height: 1.25rem; background-color: var(--c-gradient-mid-1); }

/* --------------------------------------------------------------------------
   E-commerce showcase
   -------------------------------------------------------------------------- */

.work-shop {
  position: relative;
  width: 100%;
  height: 18rem;
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  background-color: var(--c-surface-container-lowest);
  overflow: hidden;
}

.work-shop__img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 150ms var(--ease);
}

.work-project:hover .work-shop__img { opacity: 0.95; }

.work-shop__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    var(--c-surface-card),
    rgba(35, 27, 58, 0.4),
    transparent
  );
}

.work-vitals {
  position: absolute;
  bottom: 1rem;
  inset-inline: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  background-color: rgb(46 35 76 / 0.9);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.work-vitals__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background-color: var(--c-primary-container);
  color: var(--c-on-primary-container);
  flex: none;
}

.work-revenue {
  padding: 0.25rem var(--space-sm);
  border-radius: var(--radius);
  background-color: var(--c-secondary-container);
  color: var(--c-on-secondary-container);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   ROAS chart
   -------------------------------------------------------------------------- */

.work-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 18rem;
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  background-color: var(--c-surface-container-lowest);
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

.work-chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-text-muted-lilac);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.work-chart__canvas {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 9rem;
}

.work-chart__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.work-chart__axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-xs);
  color: var(--c-text-muted-lilac);
  font-size: 13px;
  line-height: 20px;
}

/* --------------------------------------------------------------------------
   Acceleration framework
   -------------------------------------------------------------------------- */

.work-framework {
  position: relative;
  width: 100%;
  padding-inline: var(--margin-lg);
  padding-block: var(--space-xl);
  background-color: var(--c-surface-container-low);
  overflow: hidden;
}

.work-framework__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  max-width: var(--container);
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .work-framework__inner { flex-direction: row; }
}

.work-framework__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 36rem;
}

.work-framework__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  width: 100%;
}

@media (min-width: 1024px) {
  .work-framework__cards { width: auto; }
}

.work-fcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  background-color: var(--c-surface-card);
}

.work-fcard__icon { font-size: 28px; }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */

.work-cta-section {
  position: relative;
  width: 100%;
  padding-inline: var(--margin-lg);
  padding-block: var(--space-xxl);
  overflow: hidden;
}

.work-cta__glow {
  position: absolute;
  bottom: 0;
  left: 33.333333%;
  width: 500px;
  height: 350px;
  border-radius: var(--radius-full);
  background-color: rgb(241 62 245 / 0.15);
  filter: blur(140px);
  pointer-events: none;
}

.work-cta {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-xl);
  border-radius: 1.5rem;
  background-color: rgb(46 35 76 / 0.8);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  text-align: center;
}

@media (min-width: 1024px) {
  .work-cta { padding: var(--space-xxl); }
}

.work-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background-color: var(--c-surface-container-high);
}

.work-cta__title {
  max-width: 48rem;
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--c-text-premium-white);
}

.work-cta__lead { max-width: 36rem; }

.work-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-md);
}

@media (min-width: 640px) {
  .work-cta__actions { flex-direction: row; }
}

.work-btn-hero {
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  background-image: var(--dt-gradient-ltr);
  color: var(--c-on-primary);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  font-weight: 700;
  box-shadow: var(--shadow-xl);
  transition: all 300ms var(--ease);
}

.work-btn-hero:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.work-btn-soft {
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  background-color: var(--c-surface-container-high);
  color: var(--c-text-premium-white);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  font-weight: 600;
  transition: background-color 150ms var(--ease);
}

.work-btn-soft:hover { background-color: var(--c-surface-bright); }

.work-cta__notes {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-md);
  color: var(--c-text-muted-lilac);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  font-weight: 700;
}