.case-page {
  background: var(--bg);
}

.case-page .page-transition {
  z-index: 10002;
}

.case-page .cursor-dot,
.case-page .cursor-ellipse {
  z-index: 10003;
}

.case-page .page-surface {
  overflow: visible;
}

.case-project {
  position: relative;
  z-index: 20;
  width: 100%;
  padding: calc(6.5rem + env(safe-area-inset-top, 0px)) var(--page-inset) 100px;
  background: var(--bg);
}

.case-project__layout {
  position: relative;
  display: grid;
  grid-template-columns: var(--col-split) minmax(0, 1fr);
  align-items: start;
  column-gap: 10vw;
  width: 100%;
}

.case-info {
  position: sticky;
  top: calc(6.5rem + env(safe-area-inset-top, 0px));
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding-right: 0;
}

.corner-frame {
  color: rgba(244, 239, 227, 0.45);
  background-color: transparent;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-size:
    20px 1px, 1px 20px,
    20px 1px, 1px 20px,
    20px 1px, 1px 20px,
    20px 1px, 1px 20px;
  transition: color 0.3s var(--ease), background-position 0.3s var(--ease);
}

.corner-frame:hover,
.corner-frame:focus-visible {
  color: var(--text);
  background-position:
    left 5px top 5px, left 5px top 5px,
    right 5px top 5px, right 5px top 5px,
    left 5px bottom 5px, left 5px bottom 5px,
    right 5px bottom 5px, right 5px bottom 5px;
}

a.case-back {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  height: 32px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.3s var(--ease);
}

a.case-back:hover,
a.case-back:focus-visible {
  opacity: 1;
}

.case-back .nav-link-line {
  transition: transform 0.3s ease-in-out;
}

.case-back:hover .nav-link-line,
.case-back:focus-visible .nav-link-line {
  transform: translateY(-105%);
}

.case-back:hover .nav-link-line:last-child,
.case-back:focus-visible .nav-link-line:last-child {
  transform: translateY(calc(-105% - 5px));
}

.case-back__icon {
  display: block;
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  transform: scaleX(-1);
}

.case-info__copy {
  width: 100%;
  margin-top: 30px;
}

.case-info__copy.has-sequence > .case-kicker {
  --case-copy-delay: 0s;
}

.case-info__copy.has-sequence > .case-title {
  --case-copy-delay: 0.2s;
}

.case-info__copy.has-sequence > .case-description {
  --case-copy-delay: 0.4s;
}

.case-info__copy.has-sequence > .case-meta {
  --case-copy-delay: 0.6s;
}

.case-info__copy.has-sequence > .case-actions {
  --case-copy-delay: 0.8s;
}

.case-info__copy.has-sequence > :is(.case-kicker, .case-title, .case-description, .case-meta, .case-actions) {
  opacity: 0;
}

.case-info__copy.has-sequence.is-sequence-visible > :is(.case-kicker, .case-title, .case-description, .case-meta, .case-actions) {
  animation: case-copy-block-in 0.7s var(--ease) both;
  animation-delay: var(--case-copy-delay);
}

/* Once the copy is in, drop the filled animation: a transform held on .case-actions keeps the CTA row on
   its own GPU layer, and Chrome could then stop clipping the visit link's rolling label (both lines at once). */
.case-info__copy.has-sequence.is-sequence-done > :is(.case-kicker, .case-title, .case-description, .case-meta, .case-actions) {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes case-copy-block-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.case-kicker {
  margin: 0 0 1.2rem;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.12em;
}

.case-title {
  grid-column: auto;
  width: 100%;
  max-width: 11ch;
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(2.4rem, 4.2vw, 5.4rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* The title stays on its own layer for good: when it gave the layer up after the blur, Safari left the blur's halo
   unrepainted, a soft glow beside the title that only a reload cleared. */
.case-title[data-reveal] {
  filter: blur(var(--reveal-blur));
  transition: filter var(--reveal-duration) var(--reveal-ease);
  will-change: filter;
}

.case-title[data-reveal].is-visible {
  filter: blur(0);
}

.case-title[data-reveal].is-visible.is-revealed {
  filter: none;
  transition: none;
  will-change: filter;
}

.case-description {
  max-width: 28rem;
  margin: 2rem 0 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.55;
}

.case-meta {
  display: grid;
  max-width: 30rem;
  margin: clamp(2.5rem, 6vh, 4.5rem) 0 0;
}

.case-meta > div {
  display: grid;
  grid-template-columns: minmax(4.5rem, 28%) minmax(0, 1fr);
  column-gap: 15px;
  padding-top: 0;
  border: 0;
}

.case-meta dt,
.case-meta dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.45;
}

.case-meta dt {
  color: rgba(244, 239, 227, 0.45);
  letter-spacing: 0.12em;
}

.case-meta dd {
  display: grid;
  gap: 0.45rem;
  color: var(--text);
}

.case-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 64px;
  padding: 0;
  border: 0;
  color: rgba(244, 239, 227, 0.6);
  font: 300 0.82rem/1 var(--font);
  letter-spacing: 0.14em;
}

.case-start .btn__line {
  transition: transform 0.3s ease-in-out;
}

.case-start:hover .btn__line,
.case-start:focus-visible .btn__line {
  transform: translateY(calc(-100% - 5px));
}

/* "You may also like": the Selected works slider of the home page, without the full-screen height. */
.works--related {
  min-height: 0;
  padding: 140px 0 120px;
}

@media (max-width: 800px) {
  .works--related {
    padding: 80px 0 80px;
  }
}

/* "visit this site": a social-style text link beside the CTA, opening the project in a new tab. */
.case-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 44px;
  margin-top: clamp(2rem, 5vh, 3rem);
}

.case-visit {
  height: 32px;
}

/* Both sites share this file; the studio stylesheet has no clipping on the masks, so the rolling
   labels could show both lines at once while the hover animates. Clip them at the mask here. */
.case-page :is(.nav-link-mask, .social-link-mask, .btn__mask) {
  clip-path: inset(0);
  contain: paint;
}

.case-visual {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #f4f5f7;
}

.case-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.case-offer {
  position: fixed;
  left: 15px;
  bottom: 15px;
  z-index: 9998;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 30px;
  width: 700px;
  max-width: calc(100% - 30px);
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, calc(100% + 30px), 0);
  transition:
    transform 0.65s var(--ease),
    opacity 0.45s var(--ease),
    visibility 0s linear 0.65s;
}

.case-offer.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.case-offer__copy {
  max-width: 38rem;
}

.case-offer__title {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.case-offer__description {
  margin: 0.65rem 0 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.45;
}

.case-offer__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.case-offer__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.case-offer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 40px;
  padding: 0.5rem 1rem;
  border-radius: 0;
  color: #fff;
  font: 300 0.78rem/1 var(--font);
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}

a.case-offer__button {
  opacity: 1;
}

.case-offer__button--primary {
  border: 1px solid transparent;
  background: var(--accent);
}

.case-offer__button--primary:hover,
.case-offer__button--primary:focus-visible {
  background: color-mix(in srgb, var(--accent) 86%, #000);
}

.case-offer__button--secondary {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
}

.case-offer__button--secondary:hover,
.case-offer__button--secondary:focus-visible {
  border-color: #fff;
  color: #fff;
}

.case-offer__button:hover .nav-link-line,
.case-offer__button:focus-visible .nav-link-line {
  transform: translateY(-105%);
}

.case-offer__button:hover .nav-link-line:last-child,
.case-offer__button:focus-visible .nav-link-line:last-child {
  transform: translateY(calc(-105% - 5px));
}

.case-offer__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0.6;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.case-offer__close:hover,
.case-offer__close:focus-visible {
  opacity: 1;
  transform: rotate(90deg);
}

.case-offer__close img {
  display: block;
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.case-page .form-modal {
  z-index: 10001;
}

@media (prefers-reduced-motion: reduce) {
  .case-info__copy.has-sequence > :is(.case-kicker, .case-title, .case-description, .case-meta, .case-actions),
  .case-info__copy.has-sequence.is-sequence-visible > :is(.case-kicker, .case-title, .case-description, .case-meta, .case-actions) {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .case-title[data-reveal] {
    filter: none;
    transition: none;
    will-change: auto;
  }

  .case-offer {
    transition: none;
  }
}

@media (max-width: 730px) {
  .case-offer {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }

  .case-offer__controls {
    width: 100%;
  }
}

@media (max-width: 800px) {
  .case-project {
    padding: calc(5rem + env(safe-area-inset-top, 0px)) var(--page-inset) 80px;
  }

  .case-project__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-info {
    position: relative;
    top: auto;
    grid-column: 1;
    height: auto;
    padding: 0;
  }

  .case-info__copy {
    margin-top: 30px;
  }

  .case-title {
    max-width: none;
    font-size: clamp(2.4rem, 12vw, 4rem);
  }

  .case-description {
    margin-top: 1.5rem;
  }

  .case-meta {
    margin-top: 2.5rem;
    max-width: none;
  }

  .case-meta > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.75rem;
  }

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

  .case-start {
    width: 100%;
    max-width: none;
    align-self: stretch;
  }

  .case-visit {
    justify-content: center;
    height: 48px;
    margin: 0;
  }

  .case-visual {
    grid-column: 1;
    margin-top: 3rem;
  }

  .case-offer {
    width: 700px;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }

  .case-offer__copy {
    max-width: none;
    padding-right: 32px;
  }

  .case-offer__controls {
    position: static;
    width: 100%;
  }

  .case-offer__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .case-offer__button {
    min-width: 0;
    width: 100%;
    padding-inline: 0.65rem;
    white-space: normal;
    text-align: center;
  }

  .case-page button:not(.case-start),
  .case-page button:not(.case-start) * {
    animation: none !important;
    transition: none !important;
  }

  .case-page button:hover .nav-link-line,
  .case-page button:focus-visible .nav-link-line,
  .case-page button:hover .btn__line,
  .case-page button:focus-visible .btn__line {
    transform: none !important;
  }

  .case-start:hover,
  .case-start:focus-visible {
    color: rgba(244, 239, 227, 0.6);
    background-position:
      left top, left top,
      right top, right top,
      left bottom, left bottom,
      right bottom, right bottom;
  }

  .case-offer__close:hover,
  .case-offer__close:focus-visible {
    opacity: 0.6;
    transform: none;
  }

  .case-offer__close {
    position: absolute;
    top: 15px;
    right: 15px;
  }
}

/* Long-form case story (PandaWin): sections stacked beside the sticky case info. */
.case-story {
  grid-column: 2;
  display: grid;
  min-width: 0;
}

.case-story .case-visual {
  grid-column: auto;
  background: rgba(244, 239, 227, 0.06);
}

.case-section {
  display: grid;
  gap: 1.5rem;
  max-width: 44rem;
  margin-top: clamp(5rem, 14vh, 9rem);
}

.case-section__index {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.12em;
}

.case-section__title {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(2rem, 3.2vw, 3.6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.case-section__text {
  max-width: 36rem;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.55;
}

.case-section .case-meta {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 239, 227, 0.14);
  gap: 1rem;
}

.case-media {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  overflow: hidden;
  background: rgba(244, 239, 227, 0.06);
}

.case-media img,
.case-media-grid img {
  display: block;
  width: 100%;
  height: auto;
}

.case-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin: 15px 0 0;
}

.case-section + .case-media-grid {
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.case-media-grid > figure {
  margin: 0;
  overflow: hidden;
  background: rgba(244, 239, 227, 0.06);
}

.case-media img,
.case-media-grid > figure img {
  transform: scale(1.001);
  transition: transform 0.55s var(--ease);
}

.case-media:hover img,
.case-media-grid > figure:hover img {
  transform: scale(1.03);
}

.case-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 15px;
  margin: 1rem 0 0;
}

.case-scope > div {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid rgba(244, 239, 227, 0.14);
}

.case-scope dt {
  order: 2;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.case-scope dd {
  order: 1;
  margin: 0;
  color: var(--text);
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.case-story__end {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 239, 227, 0.14);
}

[data-case-fade].is-fade-pending {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

[data-case-fade].is-fade-pending.is-fade-visible {
  opacity: 1;
  transform: none;
}

.case-offer__actions:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 800px) {
  .case-story {
    grid-column: 1;
    margin-top: 3rem;
  }

  .case-story .case-visual {
    margin-top: 0;
  }

  .case-section {
    margin-top: 4.5rem;
    gap: 1.2rem;
  }

  .case-section__title {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .case-media-grid--stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-media:hover img,
  .case-media-grid > figure:hover img {
    transform: scale(1.001);
  }
}

@media (max-width: 480px) {
  .case-scope {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pointer interaction must never leave a browser focus ring on controls. */
:where(a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]):focus,
:where(a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]):focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
  border: 0;
}

/* Keeps the offer inside the dark area while the orange closing block is on screen (set by JS). */
.case-offer {
  bottom: calc(15px + var(--footer-overlap, 0px));
}

/* PandaWin for now: a "Coming soon" panel in place of the case story. */
.case-soon {
  align-content: start;
}

.case-soon__panel {
  display: grid;
  align-content: center;
  gap: 1.4rem;
  min-height: min(70vh, 640px);
  padding: clamp(2rem, 5vw, 5rem);
  background:
    radial-gradient(60% 70% at 85% 15%, rgba(255, 106, 26, 0.22), transparent 70%),
    rgba(244, 239, 227, 0.04);
}

.case-soon__kicker {
  margin: 0;
  color: var(--text-soft, rgba(244, 239, 227, 0.6));
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.case-soon__title {
  margin: 0;
  color: var(--text, #f4efe3);
  font-size: clamp(3rem, 9vw, 9rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.case-soon__text {
  max-width: 34rem;
  margin: 0;
  color: var(--text-soft, rgba(244, 239, 227, 0.6));
  font-size: 1rem;
  line-height: 1.55;
}