/* Product-focused work and SignalBrief case study */

.project-frame-signal {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 12% 12%, rgba(80, 198, 255, .16), transparent 29rem),
    radial-gradient(circle at 88% 82%, rgba(128, 93, 255, .14), transparent 31rem),
    rgba(255, 255, 255, .035);
}

.project-frame-signal:not(.is-open):hover,
.project-frame-signal:not(.is-open):focus-within,
.project-frame-signal.is-open {
  border-color: rgba(119, 212, 255, .26);
}

.project-frame-signal .project-summary {
  min-height: 0;
}

.project-frame-signal .project-summary-main {
  min-height: 0;
  gap: 1.45rem;
  padding: clamp(1.8rem, 4vw, 3.2rem);
}

.project-frame-signal .project-summary-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

.project-frame-signal .project-summary h3 {
  max-width: 760px;
  font-size: clamp(2.4rem, 5.4vw, 5rem);
}

.project-frame-signal .project-summary-copy p {
  margin: 0;
  align-self: end;
}

.project-status-building::before {
  background: #78d8ff;
  box-shadow: 0 0 14px rgba(120, 216, 255, .55);
}

.working-title {
  color: #777782;
}

.project-preview-signal {
  min-height: 210px;
  padding: 1rem;
  opacity: .92;
}

.mail-preview {
  display: grid;
  grid-template-columns: minmax(170px, .48fr) minmax(0, 1.52fr);
  gap: .75rem;
}

.mail-preview-brief,
.mail-preview-item {
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(5, 8, 13, .48);
}

.mail-preview-brief {
  min-height: 146px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  border-radius: .9rem;
}

.mail-preview-brief small {
  color: #6f7a87;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mail-preview-brief strong {
  max-width: 190px;
  color: #d9eef8;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.mail-preview-items {
  display: grid;
  gap: .45rem;
}

.mail-preview-item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 2.4rem;
  gap: .65rem;
  align-items: center;
  min-height: 44px;
  padding: .55rem .65rem;
  border-radius: .72rem;
  color: #858d98;
}

.mail-preview-item > small {
  color: #59636f;
  font-size: .56rem;
}

.mail-preview-item > span {
  min-width: 0;
  display: grid;
  gap: .12rem;
}

.mail-preview-item strong,
.mail-preview-item em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-preview-item strong {
  color: #a8b1bc;
  font-size: .65rem;
  font-style: normal;
  font-weight: 570;
}

.mail-preview-item em {
  color: #5f6873;
  font-size: .55rem;
  font-style: normal;
}

.mail-preview-item b {
  color: #657484;
  font-size: .6rem;
  font-weight: 580;
  text-align: right;
}

.mail-preview-item.is-urgent {
  border-color: rgba(111, 214, 255, .18);
  background: linear-gradient(90deg, rgba(60, 160, 208, .1), rgba(85, 79, 187, .06));
}

.mail-preview-item.is-urgent strong {
  color: #ccebf7;
}

.mail-preview-item.is-urgent b {
  color: #79d8fb;
}

.project-frame-signal:not(.is-open):hover .mail-preview-item.is-urgent {
  animation: mail-priority-pulse 2.8s ease-in-out infinite;
}

@keyframes mail-priority-pulse {
  0%, 100% {
    border-color: rgba(111, 214, 255, .16);
  }

  50% {
    border-color: rgba(111, 214, 255, .34);
    box-shadow: 0 0 24px rgba(71, 178, 225, .08);
  }
}

.research-divider {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
  gap: 2rem;
  align-items: end;
  margin: clamp(4.5rem, 9vw, 8rem) 0 2rem;
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.research-divider h3 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 620;
}

.research-divider p:last-child {
  max-width: 360px;
  margin: 0;
  color: #85858d;
  font-size: .93rem;
  line-height: 1.6;
}

.case-study-stack {
  display: grid;
  gap: 1rem;
}

.signal-intro,
.signal-section,
.signal-recorder,
.signal-status-panel {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.3rem;
  background: rgba(0, 0, 0, .17);
}

.signal-intro {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(290px, .9fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.6rem, 4vw, 3.2rem);
  background:
    radial-gradient(circle at 4% 0%, rgba(83, 197, 244, .1), transparent 22rem),
    radial-gradient(circle at 100% 100%, rgba(135, 96, 255, .09), transparent 24rem),
    rgba(0, 0, 0, .17);
}

.signal-kicker {
  margin: 0 0 1rem;
  color: #6d7c88;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.signal-intro h4 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1;
  letter-spacing: -.05em;
}

.signal-intro-copy > p:last-child {
  max-width: 650px;
  margin: 1.2rem 0 0;
  color: #929ba5;
  font-size: .96rem;
  line-height: 1.7;
}

.signal-questions {
  display: grid;
  align-content: center;
  gap: .65rem;
}

.signal-question {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
  padding: .9rem 1rem;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .025);
  color: #aeb7c0;
  font-size: .82rem;
  line-height: 1.45;
}

.signal-question span {
  color: #62bee2;
  font-size: .62rem;
  letter-spacing: .08em;
}

.signal-section {
  padding: clamp(1.35rem, 3vw, 2.2rem);
}

.signal-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.5rem;
}

.signal-section-heading span {
  color: #69747f;
  font-size: .65rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.signal-section-heading h4 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  letter-spacing: -.035em;
}

.signal-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 1rem;
  overflow: hidden;
}

.signal-flow-step {
  position: relative;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-right: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .018);
}

.signal-flow-step:last-child {
  border-right: 0;
}

.signal-flow-step small {
  color: #557585;
  font-size: .6rem;
  letter-spacing: .09em;
}

.signal-flow-step strong {
  color: #c0c7ce;
  font-size: .86rem;
  line-height: 1.3;
}

.signal-flow-step p {
  margin: 0;
  color: #747d87;
  font-size: .72rem;
  line-height: 1.48;
}

.signal-flow-step::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1.15rem;
  right: -.2rem;
  width: .36rem;
  height: .36rem;
  border-radius: 50%;
  background: #66c7eb;
  box-shadow: 0 0 12px rgba(102, 199, 235, .55);
}

.signal-flow-step:last-child::after {
  display: none;
}

.signal-pillar-grid,
.signal-two-column,
.signal-metric-grid {
  display: grid;
  gap: .75rem;
}

.signal-pillar-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.signal-pillar {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: .95rem;
  background: rgba(255, 255, 255, .018);
}

.signal-pillar span {
  color: #5e91a8;
  font-size: .62rem;
  letter-spacing: .09em;
}

.signal-pillar h5 {
  margin: 0 0 .6rem;
  color: #c4cbd1;
  font-size: 1rem;
  letter-spacing: -.02em;
}

.signal-pillar p,
.signal-copy {
  margin: 0;
  color: #7d8790;
  font-size: .8rem;
  line-height: 1.6;
}

.signal-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signal-subpanel {
  padding: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .018);
}

.signal-subpanel > span {
  display: block;
  margin-bottom: 1rem;
  color: #697782;
  font-size: .63rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.signal-model-list,
.signal-eval-list,
.signal-scope-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.signal-model-list {
  display: grid;
  gap: .5rem;
}

.signal-model-list li {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: .65rem;
  align-items: baseline;
  padding: .62rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  color: #8a949d;
  font-size: .76rem;
  line-height: 1.45;
}

.signal-model-list li:last-child {
  border-bottom: 0;
}

.signal-model-list small {
  color: #5889a0;
  font-size: .58rem;
}

.signal-eval-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.signal-eval-list li {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .7rem;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: .7rem;
  color: #8e98a1;
  font-size: .72rem;
}

.signal-eval-list strong {
  color: #b9c5cc;
  font-size: .9rem;
  font-weight: 580;
}

.signal-recorder {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

.signal-recorder-copy {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background:
    radial-gradient(circle at 0% 0%, rgba(119, 87, 255, .12), transparent 18rem),
    rgba(255, 255, 255, .018);
}

.signal-recorder-copy h4 {
  margin: 0 0 .85rem;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -.04em;
}

.signal-recorder-copy p {
  margin: 0;
  color: #858e98;
  font-size: .84rem;
  line-height: 1.65;
}

.signal-replay {
  display: grid;
  gap: .55rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-left: 1px solid rgba(255, 255, 255, .07);
}

.signal-replay-row {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  padding-bottom: .55rem;
  color: #818b95;
  font-size: .75rem;
  line-height: 1.5;
}

.signal-replay-row span {
  color: #8a70eb;
  font-size: .6rem;
}

.signal-scope-list {
  display: grid;
  gap: .55rem;
}

.signal-scope-list li {
  position: relative;
  padding-left: 1.1rem;
  color: #838c95;
  font-size: .77rem;
  line-height: 1.5;
}

.signal-scope-list li::before {
  content: "";
  position: absolute;
  top: .57em;
  left: 0;
  width: .38rem;
  height: .38rem;
  border: 1px solid #527c8e;
  border-radius: 50%;
}

.signal-roadmap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 1rem;
}

.signal-roadmap-step {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-right: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .018);
}

.signal-roadmap-step:last-child {
  border-right: 0;
}

.signal-roadmap-step span {
  color: #5e7180;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.signal-roadmap-step strong {
  color: #adb7bf;
  font-size: .82rem;
  line-height: 1.4;
}

.signal-roadmap-step:first-child {
  background: linear-gradient(145deg, rgba(80, 198, 255, .08), rgba(128, 93, 255, .045));
}

.signal-roadmap-step:first-child span {
  color: #69c7e9;
}

.signal-status-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.2rem 1.35rem;
  border-color: rgba(120, 216, 255, .14);
  background: linear-gradient(100deg, rgba(67, 177, 220, .06), rgba(111, 82, 214, .04));
}

.signal-status-panel span {
  color: #6b8290;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.signal-status-panel p {
  max-width: 720px;
  margin: 0;
  color: #8f9aa3;
  font-size: .78rem;
  line-height: 1.55;
  text-align: right;
}

@media (max-width: 900px) {
  .project-frame-signal .project-summary-copy,
  .signal-intro,
  .signal-recorder {
    grid-template-columns: 1fr;
  }

  .project-frame-signal .project-summary-copy p {
    margin-top: 0;
  }

  .signal-flow,
  .signal-roadmap {
    grid-template-columns: 1fr;
  }

  .signal-flow-step,
  .signal-roadmap-step {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  .signal-flow-step:last-child,
  .signal-roadmap-step:last-child {
    border-bottom: 0;
  }

  .signal-flow-step::after {
    top: auto;
    right: auto;
    bottom: -.2rem;
    left: 1.15rem;
  }

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

  .signal-replay {
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .project-frame-signal,
  .research-divider {
    grid-column: auto;
  }

  .mail-preview,
  .research-divider,
  .signal-two-column {
    grid-template-columns: 1fr;
  }

  .project-preview-signal {
    min-height: 0;
  }

  .mail-preview-brief {
    min-height: 105px;
  }

  .research-divider {
    align-items: start;
    gap: 1.2rem;
  }

  .signal-section-heading,
  .signal-status-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .signal-pillar-grid,
  .signal-eval-list {
    grid-template-columns: 1fr;
  }

  .signal-pillar {
    min-height: 175px;
  }

  .signal-status-panel p {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-frame-signal:not(.is-open):hover .mail-preview-item.is-urgent {
    animation: none;
  }
}