.overlay-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1100px, calc(100vw - 2 * clamp(1rem, 3vw, 3rem)));
  max-width: calc(100vw - 2 * clamp(1rem, 3vw, 3rem));
  max-height: calc(100vh - 2 * clamp(1rem, 3vw, 3rem));
  height: auto;
  padding: 0;
  border: 1px solid var(--overlay-accent);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden;
  box-shadow: 0 12px 40px -12px oklch(0% 0 0 / 0.5);
}

.overlay-dialog[open] {
  display: flex;
  flex-direction: column;
}

.overlay-dialog::backdrop {
  background: oklch(8% 0.02 270 / 0.7);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.overlay-dialog__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}


@keyframes overlayIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes overlayBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.overlay-dialog[open] {
  animation: overlayIn var(--duration-base) var(--ease-out);
}

.overlay-dialog[open]::backdrop {
  animation: overlayBackdropIn var(--duration-base) var(--ease-out);
}

.overlay-dialog[data-closing] {
  animation: overlayIn var(--duration-fast) var(--ease-out) reverse forwards;
}

.overlay-dialog[data-closing]::backdrop {
  animation: overlayBackdropIn var(--duration-fast) var(--ease-out) reverse forwards;
}


.overlay-dialog__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / 0.18);
  background: oklch(15% 0.02 270 / 0.7);
  backdrop-filter: blur(8px);
  color: var(--color-text);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.overlay-dialog__close:hover,
.overlay-dialog__close:focus-visible {
  background: var(--overlay-accent);
  border-color: var(--overlay-accent);
  color: var(--color-bg);
  transform: rotate(90deg);
}


.overlay__hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3.5rem, 2.5rem + 5vw, 6.5rem) var(--gutter) clamp(2rem, 1.5rem + 3vw, 4rem);
}

.overlay__hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: oklch(16% 0.025 270);
}

.overlay__hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 80% at 12% 20%, color-mix(in oklch, var(--overlay-accent) 48%, transparent), transparent 70%),
    radial-gradient(55% 75% at 92% 0%, color-mix(in oklch, var(--overlay-accent) 28%, transparent), transparent 75%);
  filter: saturate(1.1);
}

.overlay__hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  filter: saturate(0.75);
}

.overlay__hero-inner {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
  flex-wrap: wrap;
}

.overlay__photo {
  flex: 0 0 auto;
  width: clamp(96px, 12vw, 160px);
  height: clamp(96px, 12vw, 160px);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--overlay-accent);
  box-shadow: var(--shadow-card);
}

.overlay__photo--boxed {
  border-radius: var(--radius-md);
  object-fit: contain;
  padding: 0.75rem;
  background: oklch(100% 0 0 / 0.92);
}

.overlay__photo--placeholder {
  display: inline-grid;
  place-items: center;
  background: var(--overlay-accent);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.overlay__kicker {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.overlay__kicker-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
}

.overlay__kicker-meta {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--overlay-accent);
}

.overlay__kicker-link {
  transition: color var(--duration-fast) var(--ease-out);
}

.overlay__kicker-link:hover {
  color: var(--overlay-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.overlay__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: 0.6rem;
}

.overlay__tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  color: var(--color-muted);
  max-width: 28ch;
}


.overlay__body {
  padding: clamp(2rem, 1.5rem + 3vw, 4rem) var(--gutter) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.overlay__intro {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 24ch;
}

.overlay__lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text);
  max-width: 60ch;
}

.overlay__prose {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: 1.65;
  max-width: 65ch;
}

.overlay__prose p + p { margin-top: 1rem; }
.overlay__prose h2,
.overlay__prose h3 {
  font-family: var(--font-display);
  color: var(--color-text);
  margin: 1.5rem 0 0.5rem;
}

.overlay__prose img,
.overlay__video {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1.25rem 0;
}

.overlay__video-caption {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.overlay__section-head {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}


.overlay-services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.overlay-services__item {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 1.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: oklch(18% 0.02 270 / 0.5);
}

.overlay-services__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 4px;
  border-radius: 2px;
  background: var(--overlay-accent);
}

.overlay-services__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.overlay-services__desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.55;
}


.overlay-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.overlay-pills__pill {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklch, var(--overlay-accent) 45%, var(--color-line));
  background: color-mix(in oklch, var(--overlay-accent) 10%, transparent);
  color: var(--color-text);
}


.overlay-credits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.overlay-credits__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  background: oklch(18% 0.02 270 / 0.5);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.overlay-credits__link:hover {
  border-color: var(--overlay-accent);
  transform: translateY(-2px);
}

.overlay-credits__photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.overlay-credits__link:not(:has(.overlay-credits__photo)) {
  padding-left: 0.9rem;
}


.overlay-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.overlay-gallery__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: oklch(18% 0.02 270);
}

.overlay-gallery__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.overlay-related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.overlay-related__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: oklch(17% 0.02 270);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.overlay-related__link:hover {
  transform: translateY(-4px);
  border-color: var(--overlay-accent);
}

.overlay-related__media {
  display: block;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(80% 80% at 20% 20%, color-mix(in oklch, var(--overlay-accent) 30%, transparent), transparent 70%),
    oklch(22% 0.02 270);
}

.overlay-related__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-related__text {
  padding: 0.9rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.overlay-related__title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.overlay-related__client {
  font-size: var(--text-sm);
  color: var(--color-muted);
}


.overlay__cta-wrap {
  display: flex;
}

.overlay__cta {
  --btn-bg: var(--overlay-accent);

  padding: 1rem 1.85rem;
  font-size: var(--text-lg);
}


.overlay--page {
  display: block;
}

.overlay--page .overlay__hero {
  padding-top: clamp(7rem, 5rem + 6vw, 10rem);
}

.overlay__back {
  padding: 0 var(--gutter) var(--space-section);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}


@media (max-width: 640px) {
  .overlay__hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .overlay-dialog {
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 0.75rem);
    height: calc(100dvh - 0.75rem);
    max-height: none;
    border-width: 1px 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .overlay-dialog[open] {
    animation-name: overlaySheetIn;
  }

  .overlay-dialog[data-closing] {
    animation-name: overlaySheetIn;
  }

  .overlay__body {
    padding-bottom: calc(clamp(3.5rem, 2.5rem + 4vw, 6.5rem) + env(safe-area-inset-bottom));
  }

  .overlay__hero {
    padding-top: 4.5rem;
  }
}

@keyframes overlaySheetIn {
  from { transform: translateY(100%); }
  to   { transform: none; }
}


@media (prefers-reduced-motion: reduce) {
  .overlay-dialog[open],
  .overlay-dialog[open]::backdrop,
  .overlay-dialog[data-closing],
  .overlay-dialog[data-closing]::backdrop {
    animation: none;
  }

  .overlay-dialog__close:hover,
  .overlay-dialog__close:focus-visible {
    transform: none;
  }
}