.work-page {
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.work-page main {
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
  padding: clamp(12px, 3vh, 32px) 5vw calc(104px + env(safe-area-inset-bottom, 0px));
}
.work-page .service-selector {
  min-height: 0;
  height: 100%;
  grid-template-columns: clamp(210px, 22vw, 280px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.work-directory {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 12px clamp(16px, 2vw, 28px) 12px 6px;
  border-right: 1px solid #1a1a1a26;
}
.work-category h2 {
  margin: 0 0 22px;
  color: #62615f;
  font-size: clamp(12px, calc(1.15vw - 2px), 14px);
  font-weight: 300;
  line-height: 1.5;
}
.work-category + .work-category {
  margin-top: 56px;
  padding-top: 52px;
  border-top: 1px solid #1a1a1a20;
}
.work-directory .service-tabs {
  gap: clamp(8px, 2vh, 24px);
  padding: 0;
  border: 0;
}
.work-directory .service-tabs button {
  padding-left: 18px;
  font-size: clamp(18px, calc(2vw - 2px), 26px);
}
.work-directory .service-tabs button::before {
  width: 1px;
  height: 1em;
  transform: translateY(-50%) scaleY(.4);
  transform-origin: center;
}
.work-directory .service-tabs button[aria-selected="true"]::before {
  transform: translateY(-50%) scaleY(1);
}
.work-page .service-panels p {
  font-size: clamp(20px, calc(2.4vw - 2px), 32px);
}
.work-ide-label { display: inline-flex; align-items: center; gap: .12em; }
.work-ide-label .brand-prefix { margin: 0; }
.project-title { margin: 0; font-size: clamp(19px, calc(2.4vw - 3px), 31px); font-weight: 300; line-height: 1.27; letter-spacing: -.035em; text-wrap: pretty; }
.work-page .service-panels .project-subtitle { margin-top: 18px; color: #62615f; font-size: clamp(17px, calc(1.8vw - 2px), 20px); line-height: 1.6; letter-spacing: 0; }
.project-subtitle strong { font-weight: 400; }
.case-study-copy {
  display: grid;
  gap: 22px;
  max-width: 65ch;
  margin-top: 30px;
  color: #62615f;
  font-size: clamp(15px, calc(1.45vw - 2px), 18px);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0;
}
.work-page .service-panels .case-study-copy p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}
.case-study-copy ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 1.1em;
}
.case-study-copy li { padding-left: .25em; }
.case-study-copy li::marker { font-size: .7em; }
.case-study-statement { color: #1a1a1a; }
.case-study-outcome {
  display: grid;
  gap: 22px;
  padding-top: 3.3em;
  color: #1a1a1a;
}
.case-brand { white-space: nowrap; }
.case-brand .brand-prefix { margin-right: 0; }
.project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 46px; }
.project-link { display: inline-flex; align-items: center; min-height: 42px; margin-top: 18px; padding: 6px 0; font-family: Zen, "Zen Kaku Gothic New", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; color: #62615f; text-decoration: none; transition: color .2s ease; }
.project-link:hover, .project-link:focus-visible { color: #1a1a1a; text-decoration: underline; text-underline-offset: 5px; }
.work-page .metric {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 13px 19px;
  border: 1px solid #161616;
  border-radius: 30px;
  background: linear-gradient(160deg, #484644, #272625 45%, #171717);
  color: #faf8f4;
  font: 400 13px/1.4 BookingMono, monospace;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #ffffff40, inset 0 -1px 0 #00000055, 0 9px 21px #1a1a1a20;
}
.metric-group { display: inline-flex; align-items: center; gap: 6px; }
.product-hunt-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  color: #ff6154;
  text-decoration: none;
  padding: 8px 18px;
  border: 1px solid #ff6154;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 9px 21px #1a1a1a20;
}
.product-hunt-logo { flex-shrink: 0; width: 20px; height: 20px; }
.product-hunt-label { display: flex; flex-direction: column; font-family: Helvetica, Arial, sans-serif; font-weight: 700; white-space: nowrap; }
.product-hunt-featured { font-size: 9px; line-height: 12px; }
.product-hunt-name { font-size: 18px; line-height: 20px; }
.product-hunt-votes { position: relative; flex-shrink: 0; width: 36px; height: 32px; overflow: hidden; }
.product-hunt-votes img { position: absolute; left: -202px; top: -12px; width: 250px; max-width: none; height: 54px; }
.metric svg { flex-shrink: 0; }
.metric > svg { width: 20px; height: 20px; }
.project-video { width: 100%; max-width: 380px; margin: 30px 0 0; }
.project-video-wide { max-width: 100%; }
.project-video video { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 12px 40px #1a1a1a15; }
.project-video-letterbox { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: #0a0a0c; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 40px #1a1a1a15; }
.project-video-letterbox video { width: 56.25%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 0; box-shadow: none; }
.project-video figcaption { margin-top: 12px; color: #89837b; font: 11px/1.5 system-ui, sans-serif; }
.work-page .service-panels {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: stretch;
  padding: 12px 16px 24px clamp(28px, 4vw, 60px);
  scrollbar-gutter: stable;
}
.work-page .service-panels > [role="tabpanel"] {
  flex-shrink: 0;
  margin-block: 0;
}
.work-page .service-panels,
.work-directory {
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #1a1a1a40 transparent;
}
.work-page .service-panels::-webkit-scrollbar,
.work-directory::-webkit-scrollbar { width: 1px; height: 1px; }
.work-page .service-panels::-webkit-scrollbar-button,
.work-directory::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.work-page .service-panels::-webkit-scrollbar-track,
.work-directory::-webkit-scrollbar-track { background: transparent; }
.work-page .service-panels::-webkit-scrollbar-thumb,
.work-directory::-webkit-scrollbar-thumb { background: #1a1a1a40; border-radius: 3px; }
@supports selector(::-webkit-scrollbar) {
  .work-page .service-panels,
  .work-directory { scrollbar-width: auto; scrollbar-color: auto; }
}
.work-page [role="tabpanel"] { min-width: 0; }
@media (max-width: 760px) {
  .work-page main { padding-inline: 20px; }
  .work-page .service-selector { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 45%) minmax(0, 1fr); gap: 20px; }
  .work-directory { justify-content: flex-start; padding: 6px 8px 12px 6px; border: 0; border-bottom: 1px solid #1a1a1a26; }
  .work-directory .service-tabs { gap: 8px; }
  .work-directory .service-tabs button { padding-block: 8px; }
  .work-page .service-panels { padding-left: 18px; }
  .work-category + .work-category { margin-top: 48px; padding-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-link { transition: none; }
}