:root {
  --case-gutter: clamp(20px, 4.8vw, 72px);
  --case-max: 1540px;
  --case-ink: #0f1923;
  --case-surface: #162331;
  --case-surface-raised: #1a2a39;
  --case-light: #f5f6f2;
  --case-muted: rgba(245, 246, 242, 0.64);
  --case-line: rgba(245, 246, 242, 0.14);
}

.case-study-page {
  color: var(--case-light);
  background: var(--case-ink) !important;
}

.case-study-page main {
  overflow: clip;
}

.case-study-page .site-nav {
  max-width: 1320px;
}

.case-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 126px max(var(--case-gutter), calc((100vw - var(--case-max)) / 2)) 76px;
  overflow: hidden;
  grid-template-columns: minmax(470px, 0.92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: clamp(48px, 6.5vw, 112px);
  background:
    radial-gradient(circle at 86% 15%, rgba(78, 205, 196, 0.22), transparent 27rem),
    radial-gradient(circle at 15% 100%, rgba(78, 205, 196, 0.1), transparent 34rem),
    var(--case-ink);
}

.case-hero::before {
  position: absolute;
  right: -0.05em;
  bottom: -0.24em;
  z-index: -1;
  content: 'HCA';
  color: rgba(78, 205, 196, 0.052);
  font-size: clamp(18rem, 38vw, 43rem);
  font-weight: 900;
  letter-spacing: -0.12em;
  line-height: 0.72;
  pointer-events: none;
}

.case-hero-copy,
.case-hero-media {
  position: relative;
  z-index: 1;
}

.case-eyebrow {
  color: var(--clr-brand-turquoise);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.case-hero h1 {
  max-width: 760px;
  margin-top: 24px;
  color: var(--case-light);
  font-size: clamp(3.75rem, 4.15vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.078em;
  line-height: 0.87;
}

.case-hero h1 span {
  display: block;
  color: var(--clr-brand-turquoise);
}

.case-hero-sub {
  max-width: 590px;
  margin-top: 30px;
  color: var(--case-muted);
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.58;
}

.case-actions {
  display: flex;
  margin-top: 36px;
  flex-wrap: wrap;
  gap: 12px;
}

.case-study-page .button-primary {
  color: var(--case-ink);
  background: var(--clr-brand-turquoise);
}

.case-study-page .button-primary:hover {
  background: var(--case-light);
}

.case-study-page .button-secondary {
  color: var(--case-light);
  border-color: rgba(245, 246, 242, 0.24);
  background: rgba(245, 246, 242, 0.05);
}

.case-study-page .button-secondary:hover {
  color: var(--case-ink);
  border-color: var(--case-light);
  background: var(--case-light);
}

.case-hero-media {
  min-width: 0;
  margin: 0;
  perspective: 1500px;
}

.case-hero-media::before {
  position: absolute;
  inset: 7% -3% -6% 8%;
  z-index: -1;
  content: '';
  border-radius: 32px;
  background: var(--clr-brand-turquoise);
  opacity: 0.78;
  transform: rotate(3deg);
}

.case-browser-frame,
.case-shot {
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(245, 246, 242, 0.18);
  border-radius: 30px;
  background: rgba(245, 246, 242, 0.08);
  box-shadow: 0 42px 120px rgba(3, 10, 17, 0.42), inset 0 1px 0 rgba(245, 246, 242, 0.17);
}

.case-browser-frame {
  transform: rotateY(-5deg) rotateX(1deg) translateZ(0);
  transform-origin: right center;
  transition: transform 1.1s var(--ease-spring), box-shadow 1.1s var(--ease-spring);
}

.case-browser-frame:hover {
  box-shadow: 0 52px 140px rgba(3, 10, 17, 0.5), inset 0 1px 0 rgba(245, 246, 242, 0.2);
  transform: rotateY(-1deg) rotateX(0deg) translateY(-7px);
}

.case-browser-frame img,
.case-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  transition: transform 1.1s var(--ease-spring), filter 0.7s var(--ease-spring);
}

.case-browser-frame:hover img,
.case-shot:hover img {
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.018);
}

.case-hero-media figcaption,
.case-shot figcaption {
  display: none;
}

.case-facts {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(calc(100% - 32px), 1360px);
  margin: -38px auto 0;
  overflow: hidden;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  color: var(--case-ink);
  border-radius: 24px;
  background: var(--clr-brand-turquoise);
  box-shadow: 0 30px 80px rgba(3, 10, 17, 0.28);
}

.case-facts div {
  min-height: 142px;
  padding: 28px 30px;
  border-left: 1px solid rgba(15, 25, 35, 0.18);
}

.case-facts div:first-child {
  border-left: 0;
}

.case-facts dt {
  color: rgba(15, 25, 35, 0.62);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-facts dd {
  max-width: 240px;
  margin-top: 34px;
  color: var(--case-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.case-section {
  width: min(100%, var(--case-max));
  margin: 0 auto;
  padding: clamp(104px, 10vw, 164px) var(--case-gutter);
}

.case-heading {
  max-width: 980px;
}

.case-heading h2,
.calculator-copy h2,
.solutions-copy h2,
.operations-lead h2,
.outcomes-copy h2,
.case-next h2 {
  color: var(--case-light);
  font-size: clamp(3.2rem, 5.9vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.92;
}

.case-heading > p,
.calculator-copy > p,
.solutions-copy > p,
.operations-lead > p,
.case-next-copy > p {
  max-width: 650px;
  margin-top: 30px;
  color: var(--case-muted);
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  line-height: 1.64;
}

.case-challenge {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(290px, 0.78fr);
  gap: clamp(48px, 8vw, 136px);
}

.case-challenge .case-heading {
  grid-column: 1 / -1;
}

.challenge-statement {
  padding-top: 30px;
  border-top: 1px solid rgba(245, 246, 242, 0.42);
}

.challenge-statement p {
  max-width: 860px;
  color: var(--case-light);
  font-size: clamp(2.6rem, 4.7vw, 5.2rem);
  font-weight: 500;
  letter-spacing: -0.064em;
  line-height: 0.98;
}

.challenge-notes {
  padding-top: 20px;
}

.challenge-notes p {
  color: var(--case-muted);
  font-size: 1.05rem;
  line-height: 1.68;
}

.challenge-notes p + p {
  margin-top: 28px;
}

.calculator-story {
  display: grid;
  width: min(calc(100% - 32px), 1480px);
  margin: 20px auto clamp(40px, 5vw, 78px);
  padding: clamp(42px, 6.2vw, 96px);
  grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
  border-radius: 30px;
  background: var(--clr-brand-turquoise);
  box-shadow: 0 34px 100px rgba(3, 10, 17, 0.3);
}

.calculator-copy h2,
.calculator-copy > p {
  color: var(--case-ink);
}

.calculator-copy > p {
  opacity: 0.72;
}

.calculator-copy > p + p {
  margin-top: 18px;
}

.calculator-story .case-shot {
  margin: 0;
  border-color: rgba(15, 25, 35, 0.16);
  background: rgba(15, 25, 35, 0.9);
  box-shadow: 0 34px 80px rgba(15, 25, 35, 0.25), inset 0 1px 0 rgba(245, 246, 242, 0.12);
}

.signal-flow {
  padding-top: clamp(80px, 8vw, 126px);
}

.signal-flow-list {
  display: grid;
  margin-top: 74px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(245, 246, 242, 0.42);
}

.signal-flow-list li {
  min-height: 320px;
  padding: 26px 28px 32px;
  border-left: 1px solid var(--case-line);
  transition: color 0.55s var(--ease-spring), background 0.55s var(--ease-spring), transform 0.55s var(--ease-spring);
}

.signal-flow-list li:first-child {
  border-left: 0;
}

.signal-flow-list li:hover {
  color: var(--case-ink);
  background: var(--clr-brand-turquoise);
  transform: translateY(-6px);
}

.signal-flow-list span {
  color: var(--clr-brand-turquoise);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 0.55s var(--ease-spring);
}

.signal-flow-list strong {
  display: block;
  margin-top: 74px;
  color: var(--case-light);
  font-size: clamp(1.45rem, 2vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.06;
  transition: color 0.55s var(--ease-spring);
}

.signal-flow-list p {
  margin-top: 22px;
  color: var(--case-muted);
  line-height: 1.6;
  transition: color 0.55s var(--ease-spring);
}

.signal-flow-list li:hover span,
.signal-flow-list li:hover strong,
.signal-flow-list li:hover p {
  color: var(--case-ink);
}

.solutions-story {
  display: grid;
  width: min(calc(100% - 32px), 1480px);
  margin: 0 auto clamp(50px, 6vw, 92px);
  padding: clamp(22px, 3vw, 42px);
  grid-template-columns: minmax(0, 1.38fr) minmax(300px, 0.62fr);
  align-items: end;
  gap: clamp(44px, 7vw, 110px);
  border: 1px solid var(--case-line);
  border-radius: 30px;
  background: var(--case-surface);
}

.solutions-story .case-shot {
  min-width: 0;
  margin: 0;
  border-color: rgba(245, 246, 242, 0.12);
  box-shadow: 0 30px 90px rgba(3, 10, 17, 0.28), inset 0 1px 0 rgba(245, 246, 242, 0.12);
}

.solutions-copy {
  padding: 0 clamp(8px, 2vw, 28px) clamp(10px, 2vw, 28px) 0;
}

.operations-layer {
  padding-top: clamp(80px, 8vw, 124px);
}

.operations-lead {
  max-width: 930px;
}

.operations-grid {
  display: grid;
  margin-top: 76px;
  grid-template-columns: 1.35fr 0.65fr 0.65fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.operations-grid article {
  padding: clamp(30px, 4vw, 56px);
  border: 1px solid var(--case-line);
  border-radius: 20px;
  background: var(--case-surface);
  transition: transform 0.65s var(--ease-spring), border-color 0.55s var(--ease-spring), background 0.55s var(--ease-spring);
}

.operations-grid article:hover {
  border-color: rgba(78, 205, 196, 0.42);
  background: var(--case-surface-raised);
  transform: translateY(-6px);
}

.operation-primary {
  grid-row: 1 / 3;
  min-height: 530px;
  background:
    radial-gradient(circle at 80% 82%, rgba(78, 205, 196, 0.22), transparent 18rem),
    var(--case-surface) !important;
}

.operation-primary > span {
  color: var(--clr-brand-turquoise);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.operations-grid h3 {
  color: var(--case-light);
  font-size: clamp(1.6rem, 2.5vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.052em;
  line-height: 1.04;
}

.operation-primary h3 {
  max-width: 680px;
  margin-top: clamp(104px, 13vw, 188px);
  font-size: clamp(2.6rem, 4.8vw, 5.2rem);
}

.operations-grid p {
  margin-top: 26px;
  color: var(--case-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.operation-primary p {
  max-width: 620px;
}

.operation-tech {
  grid-column: 2 / 4;
}

.case-outcomes {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(52px, 8vw, 144px);
}

.outcome-list {
  border-top: 1px solid rgba(245, 246, 242, 0.42);
}

.outcome-list article {
  display: grid;
  min-height: 166px;
  padding: 28px 0;
  grid-template-columns: minmax(150px, 0.58fr) minmax(0, 1.42fr);
  align-items: start;
  gap: 30px;
  border-bottom: 1px solid var(--case-line);
}

.outcome-list h3 {
  color: var(--clr-brand-turquoise);
  font-size: 1.1rem;
  font-weight: 700;
}

.outcome-list p {
  color: var(--case-muted);
  font-size: 1.04rem;
  line-height: 1.62;
}

.case-next {
  position: relative;
  display: grid;
  width: min(calc(100% - 32px), 1360px);
  margin: 30px auto 110px;
  padding: clamp(52px, 7vw, 98px);
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 52px;
  border: 1px solid rgba(78, 205, 196, 0.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 20%, rgba(78, 205, 196, 0.2), transparent 20rem),
    var(--case-surface);
}

.case-next-copy {
  max-width: 900px;
}

.case-next .button {
  margin-top: 36px;
}

.case-next-link {
  display: inline-flex;
  padding-bottom: 7px;
  align-items: center;
  gap: 10px;
  color: var(--case-light);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid rgba(245, 246, 242, 0.52);
  transition: color 0.35s var(--ease-spring), border-color 0.35s var(--ease-spring), transform 0.45s var(--ease-spring);
}

.case-next-link:hover {
  color: var(--clr-brand-turquoise);
  border-color: var(--clr-brand-turquoise);
  transform: translateY(-3px);
}

.case-study-page .site-footer {
  color: var(--case-light);
  border-color: var(--case-line);
  background: var(--case-ink);
}

.case-study-page .footer-brand,
.case-study-page .footer-links a,
.case-study-page .footer-top p,
.case-study-page .footer-bottom p {
  color: var(--case-light);
}

.case-study-page .footer-top p,
.case-study-page .footer-bottom p {
  opacity: 0.62;
}

@media (max-width: 1120px) {
  .case-hero {
    min-height: auto;
    padding-top: 140px;
    padding-bottom: 110px;
    grid-template-columns: 1fr;
  }

  .case-hero-copy {
    max-width: 880px;
  }

  .case-hero-media {
    width: 88%;
    margin-left: 12%;
  }

  .case-challenge,
  .calculator-story,
  .solutions-story,
  .case-outcomes {
    grid-template-columns: 1fr;
  }

  .calculator-copy,
  .solutions-copy {
    max-width: 760px;
  }

  .solutions-copy {
    order: -1;
    padding: 20px 14px 0;
  }

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

  .signal-flow-list li:nth-child(3) {
    border-top: 1px solid var(--case-line);
    border-left: 0;
  }

  .signal-flow-list li:nth-child(4) {
    border-top: 1px solid var(--case-line);
  }

  .operations-grid {
    grid-template-columns: 1fr 1fr;
  }

  .operation-primary {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .operation-tech {
    grid-column: 1 / -1;
  }

  .case-next {
    grid-template-columns: 1fr;
  }

  .case-next-link {
    justify-self: start;
  }
}

@media (max-width: 680px) {
  :root {
    --case-gutter: 20px;
  }

  .case-hero {
    padding-top: 118px;
    padding-bottom: 92px;
    gap: 54px;
  }

  .case-hero h1 {
    font-size: clamp(3.45rem, 16vw, 5rem);
    line-height: 0.9;
  }

  .case-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .case-actions .button {
    width: 100%;
  }

  .case-hero-media {
    width: 100%;
    margin-left: 0;
  }

  .case-hero-media::before {
    inset: 6% -2% -5% 6%;
    border-radius: 20px;
  }

  .case-browser-frame,
  .case-shot {
    padding: 6px;
    border-radius: 20px;
  }

  .case-browser-frame {
    transform: none;
  }

  .case-browser-frame img,
  .case-shot img {
    border-radius: 14px;
  }

  .case-facts {
    width: calc(100% - 24px);
    margin-top: -42px;
    grid-template-columns: 1fr 1fr;
    border-radius: 18px;
  }

  .case-facts div,
  .case-facts div:first-child {
    min-height: 132px;
    padding: 22px 18px;
    border-bottom: 1px solid rgba(15, 25, 35, 0.16);
    border-left: 0;
  }

  .case-facts div:nth-child(even) {
    border-left: 1px solid rgba(15, 25, 35, 0.16);
  }

  .case-facts dd {
    margin-top: 20px;
    font-size: 0.88rem;
  }

  .case-section {
    padding-top: 94px;
    padding-bottom: 94px;
  }

  .case-heading h2,
  .calculator-copy h2,
  .solutions-copy h2,
  .operations-lead h2,
  .outcomes-copy h2,
  .case-next h2 {
    font-size: clamp(2.9rem, 13.5vw, 4.4rem);
  }

  .challenge-statement p {
    font-size: clamp(2.4rem, 11vw, 3.6rem);
  }

  .calculator-story,
  .solutions-story {
    width: calc(100% - 24px);
    padding: 52px 18px 18px;
    border-radius: 20px;
  }

  .solutions-story {
    padding-top: 18px;
  }

  .solutions-copy {
    padding: 28px 4px 20px;
  }

  .signal-flow-list {
    margin-top: 52px;
    grid-template-columns: 1fr;
  }

  .signal-flow-list li,
  .signal-flow-list li:first-child,
  .signal-flow-list li:nth-child(3) {
    min-height: 0;
    padding: 26px 0 34px;
    border-top: 0;
    border-bottom: 1px solid var(--case-line);
    border-left: 0;
  }

  .signal-flow-list strong {
    margin-top: 38px;
  }

  .signal-flow-list li:hover {
    padding-right: 18px;
    padding-left: 18px;
  }

  .operations-grid {
    margin-top: 52px;
    grid-template-columns: 1fr;
  }

  .operation-primary,
  .operation-tech {
    grid-column: auto;
  }

  .operation-primary {
    min-height: 480px;
  }

  .operation-primary h3 {
    margin-top: 98px;
  }

  .outcome-list article {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .case-next {
    width: calc(100% - 24px);
    margin-bottom: 70px;
    padding: 56px 22px;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-browser-frame,
  .case-browser-frame img,
  .case-shot img,
  .signal-flow-list li,
  .operations-grid article,
  .case-next-link {
    transition: none;
  }

  .case-browser-frame:hover,
  .case-browser-frame:hover img,
  .case-shot:hover img,
  .signal-flow-list li:hover,
  .operations-grid article:hover,
  .case-next-link:hover {
    transform: none;
  }
}