/* ============================================================================
   work.css — page-specific styles for work.html
   ============================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   1. HERO
   ────────────────────────────────────────────────────────────────────────── */

.work-hero {
  padding-block-start: var(--space-40);
  padding-block-end: var(--space-24);
  text-align: center;
}

.work-hero__logo {
  display: block;
  height: 96px;
  width: auto;
  margin: var(--space-6) auto 0;
}

.work-hero__title {
  margin: 0 auto;
  max-width: 30ch;
  font-size: clamp(2.25rem, 4.5vw + 0.5rem, 3.75rem);
  line-height: 1.05;
}

.work-hero__sub {
  margin-top: var(--space-6);
  margin-inline: auto;
  max-width: 56ch;
}

@media (max-width: 767px) {
  .work-hero__logo {
    height: 72px;
    margin-top: var(--space-4);
    margin-bottom: 0;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   2. WORKFLOW TABS — replaces featured + additional cards
   ────────────────────────────────────────────────────────────────────────── */

.work-tabs {
  padding-block: var(--space-16);
}

.work-tabs__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  max-width: var(--max-w-hero);
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.work-tabs__intro .kicker {
  margin-bottom: 0;
}

.work-tabs__h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

.work-tabs__sub {
  font-size: var(--fs-body-lead);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
  max-width: 60ch;
}

/* ── Tab strip ──────────────────────────────────────────────────────────── */

.work-tabs__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
  .work-tabs__list {
    flex-direction: row;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
}

.work-tabs__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-ink-56);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: var(--transition-color), transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.work-tabs__trigger:hover {
  color: var(--color-ink);
  background: var(--color-accent-soft);
}

.work-tabs__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.work-tabs__trigger[aria-selected="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
  box-shadow: var(--shadow-cta);
}

.work-tabs__trigger[aria-selected="true"]:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #FFFFFF;
}

.work-tabs__icon {
  flex-shrink: 0;
  color: currentColor;
}

/* ── Panel container ──────────────────────────────────────────────────────── */

.work-tabs__panels {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
}

@media (min-width: 768px) {
  .work-tabs__panels {
    padding: var(--space-12);
  }
}

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

.work-tabs__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

.work-tabs__panel[hidden] { display: none; }

@media (min-width: 1024px) {
  .work-tabs__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}

.work-tabs__panel.is-active .work-tabs__text,
.work-tabs__panel.is-active .work-tabs__mockup {
  animation: workTabsFadeIn var(--duration-slow) var(--ease-out) both;
}

@keyframes workTabsFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Text column ──────────────────────────────────────────────────────────── */

.work-tabs__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
  align-items: flex-start;
}

.work-tabs__title {
  font-size: clamp(1.625rem, 2.4vw + 0.6rem, 2.25rem);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

.work-tabs__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-56);
}

.work-tabs__metrics-dot {
  color: var(--color-ink-40);
  user-select: none;
}

.work-tabs__body {
  color: var(--color-ink-72);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 60ch;
}

.work-tabs__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-2);
}

/* ──────────────────────────────────────────────────────────────────────────
   2A. MOCKUP — CHATBOT
   ────────────────────────────────────────────────────────────────────────── */

.work-tabs__mockup {
  width: 100%;
  align-self: center;
}

.mockup-chat__window {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: var(--font-body);
}

.mockup-chat__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.mockup-chat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ink-40);
}

.mockup-chat__title {
  margin-left: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-ink-72);
}

.mockup-chat__body {
  padding: var(--space-5, 20px) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-bg);
}

.mockup-chat__msg {
  max-width: 78%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.mockup-chat__msg--user {
  align-self: flex-end;
  background: var(--color-accent);
  color: #FFFFFF;
  border-bottom-right-radius: var(--radius-sm);
}

.mockup-chat__msg--bot {
  align-self: flex-start;
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
}

.mockup-chat__cite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: var(--fs-caption);
  color: var(--color-ink-72);
  font-family: var(--font-mono);
}

.mockup-chat__cite svg {
  color: var(--color-accent);
}

.mockup-chat__input {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink-40);
  font-size: var(--fs-body-sm);
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────────────────────
   2B. MOCKUP — CRM
   ────────────────────────────────────────────────────────────────────────── */

.mockup-crm__window {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: var(--font-body);
}

.mockup-crm__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.mockup-crm__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

.mockup-crm__chip {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

.mockup-crm__table {
  display: flex;
  flex-direction: column;
}

.mockup-crm__row {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 0.7fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-body-sm);
  color: var(--color-ink);
}

.mockup-crm__row:last-child { border-bottom: none; }

.mockup-crm__row--head {
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-ink-56);
  font-weight: var(--fw-medium);
}

.mockup-crm__row--lapsed {
  color: var(--color-ink-56);
}

.mockup-crm__pill {
  justify-self: start;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}

.mockup-crm__pill--ok {
  background: rgba(22, 163, 74, 0.12);
  color: #16A34A;
}

.mockup-crm__pill--warn {
  background: rgba(217, 119, 6, 0.14);
  color: #B45309;
}

.mockup-crm__pill--lapsed {
  background: rgba(220, 38, 38, 0.10);
  color: #B91C1C;
}

/* ──────────────────────────────────────────────────────────────────────────
   2C. MOCKUP — CONTACT FORM PIPELINE
   ────────────────────────────────────────────────────────────────────────── */

.mockup-pipe {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-4);
}

@media (min-width: 540px) {
  .mockup-pipe {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3);
  }
}

.mockup-pipe__form,
.mockup-pipe__inbox {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: var(--font-body);
}

.mockup-pipe__form {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mockup-pipe__form-title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.mockup-pipe__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mockup-pipe__label {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-ink-56);
  font-weight: var(--fw-medium);
}

.mockup-pipe__input {
  display: block;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.mockup-pipe__input--select {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--color-ink-72);
}

.mockup-pipe__submit {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: #FFFFFF;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
}

.mockup-pipe__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  transform: rotate(90deg);
}

@media (min-width: 540px) {
  .mockup-pipe__arrow { transform: rotate(0deg); }
}

.mockup-pipe__inbox-bar {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-ink-72);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.mockup-pipe__inbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-body-sm);
  color: var(--color-ink-72);
}

.mockup-pipe__inbox-row:last-child { border-bottom: none; }

.mockup-pipe__inbox-row--unread { color: var(--color-ink); }

.mockup-pipe__inbox-row b {
  font-weight: var(--fw-medium);
  color: var(--color-accent);
}

.mockup-pipe__inbox-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.mockup-pipe__inbox-dot--read {
  background: var(--color-ink-40);
}

/* ──────────────────────────────────────────────────────────────────────────
   2D. MOCKUP — SOCIAL MEDIA APPROVAL
   ────────────────────────────────────────────────────────────────────────── */

.mockup-social__window {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: var(--font-body);
}

.mockup-social__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--fs-body-sm);
  color: var(--color-ink);
}

.mockup-social__bar-icon {
  color: var(--color-ink-56);
  font-weight: var(--fw-medium);
}

.mockup-social__title {
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

.mockup-social__title-sub {
  color: var(--color-ink-56);
  font-size: var(--fs-caption);
}

.mockup-social__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mockup-social__heading {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

.mockup-social__sub {
  font-size: var(--fs-caption);
  color: var(--color-ink-56);
}

.mockup-social__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.mockup-social__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
}

.mockup-social__card--linkedin  { border-left-color: #0A66C2; }
.mockup-social__card--x         { border-left-color: #1F2933; }
.mockup-social__card--facebook  { border-left-color: #1877F2; }
.mockup-social__card--instagram { border-left-color: #E4405F; }

.mockup-social__platform {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-ink-56);
  font-weight: var(--fw-medium);
}

.mockup-social__preview {
  font-size: var(--fs-body-sm);
  color: var(--color-ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mockup-social__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.mockup-social__btn {
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
}

.mockup-social__btn--approve {
  background: var(--color-accent);
  color: #FFFFFF;
}

.mockup-social__btn--reject {
  background: var(--color-bg);
  color: var(--color-ink-72);
  border: 1px solid var(--color-border);
}

/* ──────────────────────────────────────────────────────────────────────────
   2E. MOCKUP — MAGAZINE PRODUCTION DASHBOARD
   ────────────────────────────────────────────────────────────────────────── */

.mockup-mag__window {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: var(--font-body);
}

.mockup-mag__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.mockup-mag__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

.mockup-mag__chip {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

.mockup-mag__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mockup-mag__progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mockup-mag__progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-body-sm);
}

.mockup-mag__progress-label {
  color: var(--color-ink-72);
}

.mockup-mag__progress-num {
  color: var(--color-ink);
  font-weight: var(--fw-medium);
  font-family: var(--font-mono);
}

.mockup-mag__progress-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  overflow: hidden;
}

.mockup-mag__progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.mockup-mag__articles {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.mockup-mag__article-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-body-sm);
}

.mockup-mag__article-row:last-child { border-bottom: none; }

.mockup-mag__article-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

.mockup-mag__article-status--done {
  background: rgba(22, 163, 74, 0.14);
  color: #16A34A;
}

.mockup-mag__article-status--pending {
  background: rgba(217, 119, 6, 0.14);
  color: #B45309;
}

.mockup-mag__article-title {
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}

.mockup-mag__article-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--color-ink-56);
}

/* ──────────────────────────────────────────────────────────────────────────
   4. NEXT-CASE-CTA
   ────────────────────────────────────────────────────────────────────────── */

.work-next-cta__inner {
  max-width: var(--max-w-hero);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.work-next-cta__h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

.work-next-cta__body {
  font-size: var(--fs-body-lead);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
  max-width: 65ch;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. FINAL CTA
   ────────────────────────────────────────────────────────────────────────── */

.work-final-cta .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.work-final-cta h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

.work-final-cta__body {
  font-size: var(--fs-body-lead);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
  max-width: 56ch;
}

/* ──────────────────────────────────────────────────────────────────────────
   Responsive adjustments
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .work-hero {
    padding-block-start: var(--space-20);
    padding-block-end: var(--space-12);
  }

  .work-next-cta__h2,
  .work-final-cta h2 {
    font-size: var(--fs-h2);
  }

  .work-featured__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   2b. CASE STUDIES — EXPANDABLE CARD GRID + MODAL
   Replaces the work-tabs section. Click a tile, modal opens with a play
   button overlay; click play, Loom iframe loads in place of the poster.
   ────────────────────────────────────────────────────────────────────────── */

.work-cases {
  padding-block: var(--space-16);
}

.work-cases__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  max-width: var(--max-w-hero);
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.work-cases__intro .kicker { margin-bottom: 0; }

.work-cases__h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

.work-cases__sub {
  font-size: var(--fs-body-lead);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
  max-width: 60ch;
}

.work-cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}

@media (min-width: 768px) {
  .work-cases__grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (min-width: 1100px) {
  .work-cases__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .work-cases__grid > .case-tile:nth-child(4),
  .work-cases__grid > .case-tile:nth-child(5) {
    grid-column: span 1;
  }
  .work-cases__grid > .case-tile:nth-child(4) { grid-column: 1 / 2; }
  .work-cases__grid > .case-tile:nth-child(5) { grid-column: 2 / 3; }
}

/* ── Tile (collapsed card) ──────────────────────────────────────────────── */

.case-tile {
  display: flex;
  flex-direction: column;
}

.case-tile__open {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.case-tile__open:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}

.case-tile__open:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.case-tile__open:hover .case-tile__play {
  opacity: 1;
  transform: scale(1);
}

.case-tile__media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

.case-tile__media-glyph {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.case-tile__play {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink);
  opacity: 0.9;
  transform: scale(0.92);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  pointer-events: none;
}

.case-tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5, 20px) var(--space-6) var(--space-3);
  flex: 1;
}

.case-tile__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-ink-56);
}

.case-tile__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin: 0;
}

.case-tile__desc {
  font-size: var(--fs-body-sm);
  color: var(--color-ink-72);
  line-height: var(--lh-body);
  margin: 0;
}

.case-tile__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 28px;
  height: 28px;
  margin: 0 var(--space-6) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink-72);
  transition: var(--transition-color);
}

.case-tile__open:hover .case-tile__expand {
  background: var(--color-accent);
  color: #FFFFFF;
}

/* ── Single navy tone for all media ── */

.case-tile__media,
.case-modal__media--tone-navy,
.case-modal__media--tone-amber {
  background: linear-gradient(135deg, #1E3A5F 0%, #0F1E33 100%);
}

/* ── Modal (expanded view) ──────────────────────────────────────────────── */

/* Full-viewport overlay. The .case-modal itself is the scroll container so
   the entire panel — including its full content height — is reachable by
   scrolling the modal, not the page (which is locked). The panel sits
   inside as a normal block-flow child centered horizontally. */
.case-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-6);
  scrollbar-gutter: stable;
}

.case-modal.is-open {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.case-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: case-modal-backdrop-in 110ms var(--ease-standard);
}

/* Panel sits inside the modal as a flex child. The modal centers it
   horizontally via justify-content. flex-shrink: 0 prevents the flex
   parent from squeezing it when content is taller than the viewport. */
.case-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  flex-shrink: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-origin: top left;
  will-change: transform;
}

.case-modal.is-open .case-modal__panel {
  animation: case-modal-panel-in var(--duration-base) var(--ease-standard);
}

@keyframes case-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes case-modal-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close pinned to the top-right corner of the panel (absolute, over the
   media). Stays put as the modal scrolls because the modal container is
   what scrolls — the panel is in normal flow. */
.case-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition-color), transform var(--duration-fast) var(--ease-standard);
}

.case-modal__close:hover { background: #FFFFFF; transform: scale(1.04); }
.case-modal__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.case-modal__media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

.case-modal__media-glyph {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.case-modal__media.is-playing .case-modal__media-glyph,
.case-modal__media.is-playing .case-modal__play {
  display: none;
}

.case-modal__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: transparent;
  border: 0;
  color: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--duration-base) var(--ease-standard);
}

.case-modal__play:hover {
  background: rgba(15, 23, 42, 0.18);
}

.case-modal__play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-accent);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.case-modal__play:hover .case-modal__play-icon {
  transform: scale(1.06);
}

.case-modal__play-label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95);
}

/* Walkthrough not yet shipped: main.js adds .is-missing-video (proactive HEAD
   check on modal open + the <video> error handler). Hide the dead play/
   fullscreen controls and show a quiet caption so the card reads intentional
   rather than broken. Self-heals once the file lands in /assets/walkthroughs/. */
.case-modal__media.is-missing-video .case-modal__play,
.case-modal__media.is-missing-video .case-modal__fullscreen {
  display: none;
}

.case-modal__media.is-missing-video::after {
  content: "Walkthrough coming soon";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-4);
  z-index: 2;
  text-align: center;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
}

.case-modal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
  background: #000;
  object-fit: contain;
}

.case-modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-8) var(--space-12);
}

@media (max-width: 640px) {
  .case-modal__content {
    padding: var(--space-6) var(--space-6) var(--space-8);
  }
}

.case-modal__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-ink-56);
}

.case-modal__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin: 0;
}

.case-modal__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--fs-body-sm);
  color: var(--color-ink-72);
}

.case-modal__metric-dot {
  color: var(--color-ink-40);
}

.case-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--color-ink-72);
}

.case-modal__body p { margin: 0; }

.case-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-2);
}

/* Scroll-lock while modal is open. <html> has scrollbar-gutter:stable so the
   scrollbar gutter is reserved even when the bar is hidden — avoids the
   horizontal layout shift that caused the morph to jitter. */
body.case-modal-open {
  overflow: hidden;
}

/* ── Fullscreen button (visible while Loom iframe is playing) ─────────── */
.case-modal__fullscreen {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 4;
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: rgba(15, 23, 42, 0.78);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.case-modal__media.is-playing .case-modal__fullscreen {
  display: inline-flex;
}

.case-modal__fullscreen:hover {
  background: rgba(15, 23, 42, 0.92);
  transform: scale(1.04);
}

.case-modal__fullscreen:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* When the iframe itself is fullscreened by the browser, hide our overlay
   button so it doesn't sit in the corner of the fullscreen video. */
.case-modal__media iframe:fullscreen ~ .case-modal__fullscreen,
.case-modal__media iframe:-webkit-full-screen ~ .case-modal__fullscreen {
  display: none;
}

/* Hide the legacy tabbed section completely (kept for diff history) */
.work-tabs--legacy { display: none !important; }