/**
 * Premium minimal portfolio — custom layers
 * Tailwind loads via CDN; this file handles motion, prefers-reduced-motion, and fine-tuning.
 */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 1.25rem;
  /* Shared palette — ink/navy base, restrained action, warm neutrals */
  --ink-navy: #1a2332;
  --ink-navy-soft: #2c3a4d;
  --action: #2f5d7c;
  --action-hover: #244a63;
  --surface-warm: #f7f5f1;
  --frost-warm: #faf8f5;
  --line-warm: #ddd9d1;
  --muted-warm: #5c6570;
  --accent-blue: #e8eef4;
  --accent-sage: #eef4ef;
  --accent-ivory: #f8f3e8;
}

/* Reusable layout & accent utilities */
.section-pad {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 1024px) {
  .section-pad {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid rgb(210 210 215 / 0.85);
  background-color: #fff;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(44 44 46);
  white-space: nowrap;
}

.chip--blue {
  border-color: rgb(186 214 247 / 0.55);
  background-color: var(--accent-blue);
}

.chip--sage {
  border-color: rgb(186 220 200 / 0.55);
  background-color: var(--accent-sage);
}

.chip--ivory {
  border-color: rgb(230 210 170 / 0.45);
  background-color: var(--accent-ivory);
}

.panel-accent-blue {
  background-color: var(--accent-blue);
}

.panel-accent-sage {
  background-color: var(--accent-sage);
}

.panel-accent-ivory {
  background-color: var(--accent-ivory);
}

/* Static availability indicator — no animation */
.availability-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(44 44 46);
}

.availability-dot {
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #34a853;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-delay-1 {
  transition-delay: 80ms;
}
.reveal-delay-2 {
  transition-delay: 140ms;
}
.reveal-delay-3 {
  transition-delay: 200ms;
}
.reveal-delay-4 {
  transition-delay: 260ms;
}

/* Insights — long-form reading column */
.article-prose {
  color: rgb(108 112 117);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.article-prose > * + * {
  margin-top: 1.25rem;
}

.article-prose h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgb(28 28 30);
}

.article-prose h2:first-child {
  margin-top: 0;
}

.article-prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.65rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: rgb(44 44 46);
}

.article-prose p {
  margin-top: 0;
  margin-bottom: 0;
}

.article-prose ul,
.article-prose ol {
  margin-top: 0.75rem;
  margin-bottom: 0;
  padding-left: 1.35rem;
}

.article-prose li {
  margin-top: 0.5rem;
  padding-left: 0.2rem;
}

.article-prose li::marker {
  color: rgb(90 107 122);
}

.article-prose blockquote {
  margin: 1.75rem 0;
  padding: 1rem 0 1rem 1.25rem;
  border-left: 2px solid rgb(210 210 215);
  font-style: normal;
  color: rgb(44 44 46);
}

.article-prose a {
  color: rgb(28 28 30);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgb(210 210 215);
}

.article-prose a:hover {
  text-decoration-color: rgb(108 112 117);
}

.article-prose hr {
  margin: 2.75rem 0;
  border: none;
  border-top: 1px solid rgb(210 210 215 / 0.65);
}

/* Reading progress — inner bar width set via JS */
.reading-progress-track {
  background-color: rgb(210 210 215 / 0.45);
}

.reading-progress-bar {
  transition: width 140ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .reading-progress-bar {
    transition: none;
  }
}

/* Outcome cards — editorial insight numbers */
.outcome-card__number {
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgb(210 210 215 / 0.95);
  font-variant-numeric: tabular-nums;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 100;
  border-radius: 0.375rem;
  background-color: #1c1c1e;
  color: #fff;
  font-size: 0.875rem;
  text-decoration: none;
}

/* Focus visible for keyboard users */
:focus-visible {
  outline: 2px solid #3d4f5f;
  outline-offset: 3px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   Visual refinement — project accents, interface previews, work rhythm
   -------------------------------------------------------------------------- */

:root {
  --tone-g4tv: #5c6180;
  --tone-g4tv-soft: #eceef5;
  --tone-jubilant: #7a6a52;
  --tone-jubilant-soft: #f3eee6;
  --tone-recruit: #4f6f5e;
  --tone-recruit-soft: #eef7f2;
  --tone-oizys: #7a6870;
  --tone-oizys-soft: #f4eef1;
  --tone-quason: #566270;
  --tone-quason-soft: #eef1f4;
}

.tone-g4tv {
  --tone: var(--tone-g4tv);
  --tone-soft: var(--tone-g4tv-soft);
}
.tone-jubilant {
  --tone: var(--tone-jubilant);
  --tone-soft: var(--tone-jubilant-soft);
}
.tone-recruit {
  --tone: var(--tone-recruit);
  --tone-soft: var(--tone-recruit-soft);
}
.tone-oizys {
  --tone: var(--tone-oizys);
  --tone-soft: var(--tone-oizys-soft);
}
.tone-quason {
  --tone: var(--tone-quason);
  --tone-soft: var(--tone-quason-soft);
}

.tone-label {
  color: var(--tone, #5a6b7a);
}

.tone-panel {
  background-color: var(--tone-soft, #f5f5f7);
}

/* Hero — portrait */
.hero-stage {
  position: relative;
  isolation: isolate;
}

.hero-stage::before {
  content: '';
  position: absolute;
  inset: -12% -8% auto auto;
  width: min(42vw, 22rem);
  height: min(42vw, 22rem);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgb(234 243 255 / 0.95), rgb(238 247 242 / 0.35) 55%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.hero-portrait {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 22rem;
  margin-inline: auto;
  border-radius: 1.35rem;
  overflow: hidden;
  border: 1px solid rgb(210 210 215 / 0.85);
  background: #f0f0f2;
  box-shadow: 0 2px 28px rgb(0 0 0 / 0.04);
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 737 / 960;
  object-fit: cover;
  object-position: center 8%;
}

@media (min-width: 1024px) {
  .hero-portrait {
    max-width: none;
    margin-inline: auto 0;
    width: min(100%, 22.5rem);
    transform: translateY(-1.1rem);
  }

  .hero-portrait img {
    max-height: 28rem;
    width: 100%;
    object-fit: cover;
  }
}

/* Compact selected-work preview */
.work-preview {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 768px) {
  .work-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

.work-preview-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 1.15rem;
  border: 1px solid rgb(210 210 215 / 0.95);
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
}

.work-preview-card:hover,
.work-preview-card:focus-visible {
  border-color: rgb(28 28 30 / 0.14);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.05);
}

.work-preview-card:focus-visible {
  outline: 2px solid #3d4f5f;
  outline-offset: 3px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .work-preview-card:hover {
    transform: translateY(-2px);
  }
}

.work-preview-card__visual {
  position: relative;
  background: var(--tone-soft, #f5f5f7);
  border-bottom: 1px solid rgb(210 210 215 / 0.75);
}

.work-preview-card__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  object-position: center;
  background: var(--tone-soft, #f5f5f7);
}

.work-preview-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.05rem 1.15rem;
}

.work-preview-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: rgb(28 28 30);
}

.work-preview-card__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(110 110 115);
}

.cs-engagement-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.75rem;
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid rgb(210 210 215 / 0.7);
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(110 110 115);
}

.cs-engagement-line__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(90 107 122);
}

.cs-engagement-line__text {
  color: rgb(90 90 95);
}

/* From idea → working interface */
.idea-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .idea-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 0.5rem;
    align-items: start;
  }
}

.idea-flow__stage {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.idea-flow__visual {
  border-radius: 0.9rem;
  border: 1px solid rgb(210 210 215 / 0.9);
  background: #fff;
  padding: 0.7rem;
  min-height: 5.25rem;
  display: flex;
  align-items: stretch;
}

.idea-flow__ui {
  flex: 1;
  border-radius: 0.55rem;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: center;
}

.idea-flow__ui--notes {
  background: linear-gradient(180deg, rgb(255 248 236 / 0.7), #fff 70%);
}

.idea-flow__note {
  display: block;
  height: 0.35rem;
  border-radius: 999px;
  background: rgb(210 210 215 / 0.95);
  width: 88%;
}

.idea-flow__note--mid {
  width: 68%;
}

.idea-flow__note--short {
  width: 48%;
}

.idea-flow__ui--wire {
  background: linear-gradient(180deg, rgb(234 243 255 / 0.7), #fff 70%);
  gap: 0.4rem;
}

.idea-flow__wire-bar {
  display: block;
  height: 0.32rem;
  width: 42%;
  border-radius: 999px;
  background: rgb(90 107 122 / 0.35);
}

.idea-flow__wire-block {
  display: block;
  height: 1.65rem;
  border-radius: 0.35rem;
  border: 1px dashed rgb(186 214 247 / 0.95);
  background: rgb(234 243 255 / 0.55);
}

.idea-flow__wire-row {
  display: block;
  height: 0.32rem;
  width: 72%;
  border-radius: 999px;
  background: rgb(210 210 215 / 0.9);
}

.idea-flow__ui--design {
  background: linear-gradient(180deg, rgb(238 247 242 / 0.65), #fff 70%);
  gap: 0.4rem;
}

.idea-flow__chrome {
  display: flex;
  gap: 0.22rem;
}

.idea-flow__chrome i {
  display: block;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: rgb(210 210 215);
  font-style: normal;
}

.idea-flow__card {
  display: block;
  height: 1.45rem;
  border-radius: 0.35rem;
  border: 1px solid rgb(210 210 215 / 0.85);
  background: #fff;
}

.idea-flow__btn {
  display: block;
  height: 0.55rem;
  width: 38%;
  border-radius: 999px;
  background: rgb(28 28 30 / 0.82);
}

.idea-flow__ui--code {
  background: linear-gradient(180deg, rgb(245 245 247 / 0.95), #fff 70%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.58rem;
  line-height: 1.45;
  color: rgb(90 107 122);
  gap: 0.15rem;
  justify-content: center;
}

.idea-flow__ui--code code {
  display: block;
  font: inherit;
  color: inherit;
}

.idea-flow__label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgb(28 28 30);
  text-align: center;
}

@media (min-width: 768px) {
  .idea-flow__label {
    text-align: left;
  }
}

.idea-flow__connector {
  display: none;
}

@media (min-width: 768px) {
  .idea-flow__connector {
    display: block;
    align-self: center;
    width: 1.25rem;
    height: 1px;
    margin-top: 2.35rem;
    background: rgb(210 210 215);
    position: relative;
  }

  .idea-flow__connector::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-right: 1px solid rgb(174 174 178);
    border-top: 1px solid rgb(174 174 178);
    transform: translateY(-50%) rotate(45deg);
  }
}

@media (max-width: 767px) {
  .idea-flow__connector {
    display: block;
    width: 1px;
    height: 0.75rem;
    margin: 0 auto;
    background: rgb(210 210 215);
    position: relative;
  }

  .idea-flow__connector::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 5px;
    height: 5px;
    border-right: 1px solid rgb(174 174 178);
    border-bottom: 1px solid rgb(174 174 178);
    transform: translateX(-50%) rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .idea-flow__stage.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Work section rhythm */
.work-rail {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

@media (min-width: 1024px) {
  .work-rail {
    gap: 2.25rem;
  }
}

.work-feature {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgb(210 210 215 / 0.95);
  background: #fff;
  transition:
    border-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    transform 0.35s var(--ease-out);
}

.work-feature:hover,
.work-feature:focus-within {
  border-color: rgb(28 28 30 / 0.14);
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.055);
}

.work-feature__inner {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
}

@media (min-width: 1024px) {
  .work-feature__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 2rem;
    padding: 2rem 2rem 2rem 2.25rem;
    align-items: center;
  }
}

.work-feature__previews {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .work-feature__previews {
    grid-template-columns: 1fr 1fr;
  }
}

.work-split {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .work-split {
    grid-template-columns: 1.35fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
  }

  .work-split--flip {
    grid-template-columns: 1fr 1.25fr;
  }

  .work-split--flip > .work-card:first-child {
    order: 2;
  }
}

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 1.35rem;
  border: 1px solid rgb(210 210 215 / 0.95);
  background: #fff;
  overflow: hidden;
  transition:
    border-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}

.work-card:hover,
.work-card:focus-within {
  border-color: rgb(28 28 30 / 0.12);
  box-shadow: 0 10px 32px rgb(0 0 0 / 0.05);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .work-feature:hover,
  .work-card:hover {
    transform: translateY(-2px);
  }
}

.work-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.35rem 1.4rem 1.5rem;
}

.work-card--compact .work-card__body {
  padding: 1.25rem 1.3rem 1.4rem;
}

.work-card--tall {
  min-height: 100%;
}

.work-card__link {
  margin-top: auto;
  padding-top: 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(28 28 30);
  text-decoration: underline;
  text-decoration-color: rgb(210 210 215);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s var(--ease-out);
}

.work-card__link:hover {
  text-decoration-color: rgb(28 28 30);
}

.work-card__link:focus-visible {
  outline: 2px solid #3d4f5f;
  outline-offset: 4px;
  border-radius: 0.25rem;
}

.work-accent-bar {
  height: 3px;
  width: 100%;
  background: var(--tone, #5a6b7a);
  opacity: 0.85;
}

/* Interface preview frames — illustrative compositions only */
.hero-title-mobile {
  display: inline;
}

.hero-title-desktop {
  display: none;
}

@media (min-width: 768px) {
  .hero-title-mobile {
    display: none;
  }

  .hero-title-desktop {
    display: inline;
  }
}

/* Prevent accidental horizontal overflow */
.work-rail,
.hero-stage,
main {
  max-width: 100%;
  overflow-x: clip;
}

/* Case study media — responsive illustrative frames */
.cs-media {
  margin: 0;
}

.cs-media__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid rgb(210 210 215 / 0.85);
  background: #fff;
  object-fit: contain;
  object-position: center;
}

.cs-media__caption {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgb(110 110 115);
}

.cs-media-stack {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

/* Recruitment Bricks case study — section tones, icons, cards */
.cs-heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgb(28 28 30);
}

.cs-heading__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.55rem;
  color: var(--cs-accent, #0f766e);
  background: var(--cs-accent-soft, rgb(240 253 250));
}

.cs-tone--challenge {
  --cs-accent: #0f766e;
  --cs-accent-soft: #ecfdf8;
  background:
    linear-gradient(180deg, rgb(236 253 248 / 0.55) 0%, #fff 72%);
  border-left: 0;
}

.cs-tone--approach {
  --cs-accent: #1e3a5f;
  --cs-accent-soft: #eef3f8;
  background:
    linear-gradient(180deg, rgb(238 243 248 / 0.7) 0%, #fff 78%);
}

.cs-tone--decisions {
  --cs-accent: #0d9488;
  --cs-accent-soft: #f0fdfa;
  background:
    linear-gradient(180deg, rgb(240 253 250 / 0.6) 0%, #fff 78%);
}

.cs-callout {
  border-radius: 0.9rem;
  border: 1px solid rgb(15 118 110 / 0.18);
  background: rgb(255 255 255 / 0.88);
  padding: 1rem 1.15rem;
}

.cs-callout__label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f766e;
}

.cs-callout__text {
  margin: 0.45rem 0 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgb(44 44 46);
}

.cs-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cs-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }

  .cs-tone--decisions .cs-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 42rem;
  }
}

.cs-decision-card {
  border-radius: 1rem;
  border: 1px solid rgb(210 210 215 / 0.9);
  background: #fff;
  padding: 1.15rem 1.2rem 1.25rem;
}

.cs-decision-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.5rem;
  color: var(--cs-accent, #0f766e);
  background: var(--cs-accent-soft, #ecfdf8);
}

.cs-decision-card__title {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: rgb(28 28 30);
}

.cs-decision-card__text {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgb(110 110 115);
}

.cs-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cs-step-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .cs-step-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cs-step-card {
  border-radius: 1rem;
  border: 1px solid rgb(30 58 95 / 0.12);
  background: #fff;
  padding: 1.1rem 1.15rem 1.2rem;
}

.cs-step-card__num {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0f766e;
}

.cs-step-card__title {
  margin: 0.45rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: rgb(28 28 30);
}

.cs-step-card__text {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(110 110 115);
}

.cs-outcome-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.cs-outcome-list li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.35rem;
  border-radius: 0.85rem;
  border: 1px solid rgb(210 210 215 / 0.85);
  background: #fff;
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgb(44 44 46);
}

.cs-outcome-list li::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 1.2rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #0f766e;
}

.cs-media__fullsize-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.cs-media__fullsize-hint {
  display: none;
}

.cs-card-grid--two {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cs-card-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 42rem;
  }
}

@media (max-width: 767px) {
  .cs-media__fullsize-link .cs-media__img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .cs-media__fullsize-hint {
    display: block;
    margin: 0;
    padding: 0.7rem 1rem;
    border: 1px solid rgb(210 210 215 / 0.85);
    border-top: 0;
    border-radius: 0 0 1rem 1rem;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e3a5f;
    text-align: center;
  }

  .cs-media__fullsize-link:focus-visible {
    outline: 2px solid #3d4f5f;
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-decision-card,
  .cs-step-card,
  .cs-callout {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-feature,
  .work-card {
    transition: none;
  }

  .work-feature:hover,
  .work-card:hover {
    transform: none;
  }
}

/* Jubilant case study — navy / cyan / green accents + process graphic */
.cs-jub {
  --jub-navy: #14335c;
  --jub-navy-soft: #eef3f8;
  --jub-cyan: #1e9bb8;
  --jub-cyan-soft: #e8f7fb;
  --jub-green: #2f9a6a;
  --jub-green-soft: #eaf7f1;
  --jub-yellow: #e6b800;
}

.cs-jub .cs-heading__icon,
.cs-jub .cs-decision-card__icon {
  color: var(--cs-accent, var(--jub-navy));
  background: var(--cs-accent-soft, var(--jub-navy-soft));
}

.cs-jub .cs-callout {
  border-color: rgb(20 51 92 / 0.16);
}

.cs-jub .cs-callout__label {
  color: var(--cs-accent, var(--jub-navy));
}

.cs-jub .cs-outcome-list li::before {
  background: var(--jub-navy);
}

.cs-jub-tone--challenge {
  --cs-accent: var(--jub-navy);
  --cs-accent-soft: var(--jub-navy-soft);
  background: linear-gradient(180deg, rgb(238 243 248 / 0.72) 0%, #fff 74%);
}

.cs-jub-tone--approach {
  --cs-accent: var(--jub-cyan);
  --cs-accent-soft: var(--jub-cyan-soft);
  background: linear-gradient(180deg, rgb(232 247 251 / 0.65) 0%, #fff 78%);
}

.cs-jub-tone--decisions {
  --cs-accent: var(--jub-green);
  --cs-accent-soft: var(--jub-green-soft);
  background: linear-gradient(180deg, rgb(234 247 241 / 0.6) 0%, #fff 78%);
}

.cs-jub-split {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .cs-jub-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

.cs-jub-panel {
  border-radius: 1rem;
  border: 1px solid rgb(210 210 215 / 0.9);
  background: #fff;
  padding: 1.35rem 1.3rem 1.4rem;
}

.cs-jub-panel--procure {
  border-top: 3px solid var(--jub-cyan);
}

.cs-jub-panel--leads {
  border-top: 3px solid var(--jub-green);
}

.cs-jub-panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jub-navy);
}

.cs-jub-panel--leads .cs-jub-panel__eyebrow {
  color: var(--jub-green);
}

.cs-jub-panel__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--jub-cyan);
  flex-shrink: 0;
}

.cs-jub-panel--leads .cs-jub-panel__dot {
  background: var(--jub-green);
}

.cs-jub-panel__title {
  margin: 0.7rem 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgb(28 28 30);
}

.cs-jub-panel__text {
  margin: 0.55rem 0 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgb(110 110 115);
}

.cs-jub-panel .cs-callout__label {
  color: inherit;
}

.cs-jub-panel--procure .cs-callout {
  border-color: rgb(30 155 184 / 0.22);
}

.cs-jub-panel--procure .cs-callout__label {
  color: var(--jub-cyan);
}

.cs-jub-panel--leads .cs-callout {
  border-color: rgb(47 154 106 / 0.22);
}

.cs-jub-panel--leads .cs-callout__label {
  color: var(--jub-green);
}

.cs-jub-flow,
.cs-jub-lead-flow {
  border-radius: 1.1rem;
  border: 1px solid rgb(20 51 92 / 0.12);
  background: #fff;
  padding: 1.35rem 1.25rem 1.45rem;
}

.cs-jub-flow {
  border-left: 3px solid var(--jub-cyan);
}

.cs-jub-lead-flow {
  border-left: 3px solid var(--jub-green);
}

.cs-jub-flow__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jub-cyan);
}

.cs-jub-flow__label--leads {
  color: var(--jub-green);
}

.cs-jub-flow__mark {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.cs-jub-flow__title {
  margin: 0.55rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--jub-navy);
}

.cs-jub-flow__note {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(110 110 115);
}

.cs-jub-process {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
  counter-reset: none;
}

@media (min-width: 640px) {
  .cs-jub-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cs-jub-process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

.cs-jub-process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-radius: 0.9rem;
  border: 1px solid rgb(20 51 92 / 0.1);
  background: var(--jub-navy-soft);
  padding: 0.95rem 1rem 1.05rem;
}

.cs-jub-process__step--highlight {
  border-color: rgb(230 184 0 / 0.55);
  box-shadow: inset 0 0 0 1px rgb(230 184 0 / 0.25);
  background: #fffdf5;
}

.cs-jub-process__num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--jub-cyan);
}

.cs-jub-process__step--highlight .cs-jub-process__num {
  color: #b8860b;
}

.cs-jub-process__name {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--jub-navy);
}

.cs-jub-process__desc {
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgb(110 110 115);
}

.cs-jub-lead-steps {
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

@media (min-width: 768px) {
  .cs-jub-lead-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

.cs-jub-lead-steps li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-radius: 0.9rem;
  border: 1px solid rgb(47 154 106 / 0.18);
  background: var(--jub-green-soft);
  padding: 0.95rem 1rem;
}

.cs-jub-lead-steps__num {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--jub-green);
  margin-top: 0.15rem;
}

.cs-jub-lead-steps__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--jub-navy);
}

.cs-jub-lead-steps__text {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgb(110 110 115);
}

.cs-jub-decision-block--leads {
  padding-top: 0.5rem;
  border-top: 1px solid rgb(210 210 215 / 0.75);
}

.cs-jub .cs-media__fullsize-hint {
  color: var(--jub-navy);
}

@media (prefers-reduced-motion: reduce) {
  .cs-jub-panel,
  .cs-jub-process__step,
  .cs-jub-lead-steps li,
  .cs-jub-flow,
  .cs-jub-lead-flow {
    transition: none;
  }
}

/* G4TV case study — navy / warm amber + illustrative compositions */
.cs-g4 {
  --g4-navy: #1c2740;
  --g4-navy-soft: #eef0f5;
  --g4-amber: #c9852a;
  --g4-amber-soft: #fbf4ea;
  --g4-slate: #5c6180;
}

.cs-g4 .cs-heading__icon,
.cs-g4 .cs-decision-card__icon {
  color: var(--cs-accent, var(--g4-navy));
  background: var(--cs-accent-soft, var(--g4-navy-soft));
}

.cs-g4 .cs-callout {
  border-color: rgb(28 39 64 / 0.16);
}

.cs-g4 .cs-callout__label {
  color: var(--cs-accent, var(--g4-navy));
}

.cs-g4 .cs-outcome-list li::before {
  background: var(--g4-amber);
}

.cs-g4-tone--challenge {
  --cs-accent: var(--g4-navy);
  --cs-accent-soft: var(--g4-navy-soft);
  background: linear-gradient(180deg, rgb(238 240 245 / 0.75) 0%, #fff 74%);
}

.cs-g4-tone--approach {
  --cs-accent: var(--g4-slate);
  --cs-accent-soft: #eceef5;
  background: linear-gradient(180deg, rgb(236 238 245 / 0.7) 0%, #fff 78%);
}

.cs-g4-tone--decisions {
  --cs-accent: var(--g4-amber);
  --cs-accent-soft: var(--g4-amber-soft);
  background: linear-gradient(180deg, rgb(251 244 234 / 0.55) 0%, #fff 78%);
}

.g4-flow {
  border-radius: 1.1rem;
  border: 1px solid rgb(28 39 64 / 0.12);
  border-left: 3px solid var(--g4-amber);
  background: #fff;
  padding: 1.35rem 1.25rem 1.45rem;
}

.g4-flow__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g4-slate);
}

.g4-flow__label--amber {
  color: var(--g4-amber);
}

.g4-flow__mark {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.g4-flow__title {
  margin: 0.55rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--g4-navy);
}

.g4-flow__note {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(110 110 115);
}

.g4-process {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .g4-process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

.g4-process__step {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-radius: 0.9rem;
  border: 1px solid rgb(28 39 64 / 0.1);
  background: var(--g4-navy-soft);
  padding: 1rem 1.05rem 1.1rem;
}

.g4-process__step--highlight {
  border-color: rgb(201 133 42 / 0.45);
  box-shadow: inset 0 0 0 1px rgb(201 133 42 / 0.2);
  background: var(--g4-amber-soft);
}

.g4-process__num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--g4-amber);
}

.g4-process__name {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--g4-navy);
}

.g4-process__desc {
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgb(110 110 115);
}

@media (prefers-reduced-motion: reduce) {
  .g4-process__step,
  .g4-flow {
    transition: none;
  }
}

/* Jubilant LQE — compact approach callouts */
.cs-jub-callouts {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .cs-jub-callouts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

.cs-jub-callouts .cs-callout {
  margin: 0;
  border-color: rgb(47 154 106 / 0.22);
}

.cs-jub-callouts .cs-callout__label {
  color: var(--jub-green, #2f9a6a);
}

/* Oizys case study — lilac / sage / ivory */
.cs-oiz {
  --oiz-lilac: #7a6b8f;
  --oiz-lilac-soft: #f3eef7;
  --oiz-sage: #6d7f6a;
  --oiz-sage-soft: #eef3ec;
  --oiz-ivory: #f7f4ec;
  --oiz-ink: #2c2a32;
}

.cs-oiz .cs-heading__icon,
.cs-oiz .cs-decision-card__icon {
  color: var(--cs-accent, var(--oiz-lilac));
  background: var(--cs-accent-soft, var(--oiz-lilac-soft));
}

.cs-oiz .cs-callout {
  border-color: rgb(122 107 143 / 0.22);
  background: rgb(255 255 255 / 0.92);
}

.cs-oiz .cs-callout__label {
  color: var(--cs-accent, var(--oiz-lilac));
}

.cs-oiz .cs-outcome-list li::before {
  background: var(--oiz-sage);
}

.cs-oiz-tone--overview {
  --cs-accent: var(--oiz-lilac);
  --cs-accent-soft: var(--oiz-lilac-soft);
  background: linear-gradient(180deg, rgb(243 238 247 / 0.7) 0%, #fff 74%);
}

.cs-oiz-tone--contribution {
  --cs-accent: var(--oiz-sage);
  --cs-accent-soft: var(--oiz-sage-soft);
  background: linear-gradient(180deg, rgb(238 243 236 / 0.65) 0%, #fff 78%);
}

.cs-oiz-tone--decisions {
  --cs-accent: var(--oiz-lilac);
  --cs-accent-soft: var(--oiz-ivory);
  background: linear-gradient(180deg, rgb(247 244 236 / 0.75) 0%, #fff 78%);
}

.oiz-flow {
  border-radius: 1.1rem;
  border: 1px solid rgb(122 107 143 / 0.16);
  border-left: 3px solid var(--oiz-lilac);
  background: #fff;
  padding: 1.35rem 1.25rem 1.45rem;
}

.oiz-flow__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oiz-lilac);
}

.oiz-flow__mark {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.oiz-flow__title {
  margin: 0.55rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--oiz-ink);
}

.oiz-flow__note {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(110 110 115);
}

.oiz-process {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .oiz-process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

.oiz-process__step {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-radius: 0.9rem;
  border: 1px solid rgb(122 107 143 / 0.14);
  background: var(--oiz-lilac-soft);
  padding: 1rem 1.05rem 1.1rem;
}

.oiz-process__step--sage {
  border-color: rgb(109 127 106 / 0.22);
  background: var(--oiz-sage-soft);
}

.oiz-process__num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--oiz-lilac);
}

.oiz-process__step--sage .oiz-process__num {
  color: var(--oiz-sage);
}

.oiz-process__name {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--oiz-ink);
}

.oiz-process__desc {
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgb(110 110 115);
}

.cs-oiz .cs-media__fullsize-hint {
  color: var(--oiz-lilac);
}

@media (prefers-reduced-motion: reduce) {
  .oiz-flow,
  .oiz-process__step {
    transition: none;
  }
}

/* Quason case study — slate / navy / teal / amber */
.cs-qua {
  --qua-slate: #566270;
  --qua-slate-soft: #eef1f4;
  --qua-navy: #1f3348;
  --qua-navy-soft: #e8eef4;
  --qua-teal: #2f7a7c;
  --qua-teal-soft: #e6f2f2;
  --qua-amber: #c48a1a;
  --qua-amber-soft: #f8f0de;
  --qua-ink: #1c2430;
}

.cs-qua .cs-heading__icon,
.cs-qua .cs-decision-card__icon {
  color: var(--cs-accent, var(--qua-slate));
  background: var(--cs-accent-soft, var(--qua-slate-soft));
}

.cs-qua .cs-callout {
  border-color: rgb(86 98 112 / 0.22);
  background: rgb(255 255 255 / 0.94);
}

.cs-qua .cs-callout__label {
  color: var(--cs-accent, var(--qua-navy));
}

.cs-qua .cs-outcome-list li::before {
  background: var(--qua-teal);
}

.cs-qua-tone--overview {
  --cs-accent: var(--qua-navy);
  --cs-accent-soft: var(--qua-navy-soft);
  background: linear-gradient(180deg, rgb(232 238 244 / 0.72) 0%, #fff 74%);
}

.cs-qua-tone--contribution {
  --cs-accent: var(--qua-teal);
  --cs-accent-soft: var(--qua-teal-soft);
  background: linear-gradient(180deg, rgb(230 242 242 / 0.68) 0%, #fff 78%);
}

.cs-qua-tone--decisions {
  --cs-accent: var(--qua-slate);
  --cs-accent-soft: var(--qua-slate-soft);
  background: linear-gradient(180deg, rgb(238 241 244 / 0.78) 0%, #fff 78%);
}

.qua-flow {
  border-radius: 1.1rem;
  border: 1px solid rgb(86 98 112 / 0.16);
  border-left: 3px solid var(--qua-navy);
  background: #fff;
  padding: 1.35rem 1.25rem 1.45rem;
}

.qua-flow__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qua-navy);
}

.qua-flow__mark {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.qua-flow__title {
  margin: 0.55rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--qua-ink);
}

.qua-flow__note {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(110 110 115);
}

.qua-relate {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 900px) {
  .qua-relate {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0.55rem;
    align-items: stretch;
  }
}

.qua-relate__stage {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-radius: 0.9rem;
  border: 1px solid rgb(86 98 112 / 0.14);
  padding: 1rem 1.05rem 1.1rem;
  min-width: 0;
}

.qua-relate__stage--layout {
  background: var(--qua-navy-soft);
  border-color: rgb(31 51 72 / 0.14);
}

.qua-relate__stage--location {
  background: var(--qua-teal-soft);
  border-color: rgb(47 122 124 / 0.18);
}

.qua-relate__stage--props {
  background: var(--qua-amber-soft);
  border-color: rgb(196 138 26 / 0.2);
}

.qua-relate__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  margin-bottom: 0.15rem;
}

.qua-relate__stage--layout .qua-relate__icon {
  color: var(--qua-navy);
  background: rgb(255 255 255 / 0.75);
}

.qua-relate__stage--location .qua-relate__icon {
  color: var(--qua-teal);
  background: rgb(255 255 255 / 0.75);
}

.qua-relate__stage--props .qua-relate__icon {
  color: var(--qua-amber);
  background: rgb(255 255 255 / 0.75);
}

.qua-relate__kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qua-slate);
}

.qua-relate__stage--layout .qua-relate__kicker { color: var(--qua-navy); }
.qua-relate__stage--location .qua-relate__kicker { color: var(--qua-teal); }
.qua-relate__stage--props .qua-relate__kicker { color: var(--qua-amber); }

.qua-relate__name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--qua-ink);
}

.qua-relate__desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgb(110 110 115);
}

.qua-relate__viz {
  margin-top: 0.65rem;
  border-radius: 0.65rem;
  background: rgb(255 255 255 / 0.7);
  border: 1px solid rgb(86 98 112 / 0.1);
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  padding: 0.65rem 0.75rem;
}

.qua-relate__viz--plan {
  gap: 0.45rem;
}

.qua-relate__room {
  display: block;
  height: 1.75rem;
  width: 58%;
  border-radius: 0.3rem;
  border: 1.5px solid rgb(31 51 72 / 0.35);
  background: rgb(31 51 72 / 0.06);
}

.qua-relate__room--sm {
  width: 28%;
  height: 1.35rem;
}

.qua-relate__viz--nodes {
  gap: 0.2rem;
  justify-content: center;
}

.qua-relate__node {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--qua-teal);
  flex-shrink: 0;
}

.qua-relate__node--active {
  width: 0.85rem;
  height: 0.85rem;
  background: var(--qua-amber);
  box-shadow: 0 0 0 3px rgb(196 138 26 / 0.22);
}

.qua-relate__edge {
  width: 1.35rem;
  height: 0;
  border-top: 1.5px dashed rgb(47 122 124 / 0.55);
  flex-shrink: 0;
}

.qua-relate__viz--props {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.qua-relate__field {
  display: block;
  height: 0.45rem;
  border-radius: 999px;
  background: rgb(86 98 112 / 0.18);
  width: 100%;
}

.qua-relate__field--short {
  width: 62%;
}

.qua-relate__link {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 0.1rem;
}

@media (min-width: 900px) {
  .qua-relate__link {
    display: flex;
  }
}

.qua-relate__arrow {
  width: 1.1rem;
  height: 1.1rem;
  border-top: 2px solid rgb(86 98 112 / 0.35);
  border-right: 2px solid rgb(86 98 112 / 0.35);
  transform: rotate(45deg);
}

.cs-qua .cs-media__fullsize-hint {
  color: var(--qua-navy);
}

@media (prefers-reduced-motion: reduce) {
  .qua-flow,
  .qua-relate__stage,
  .qua-relate__node--active {
    transition: none;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   Case-study detail pages — shared design-system chrome
   Scoped to .cs-detail-page. Preserves project accent vars on labels/icons.
   -------------------------------------------------------------------------- */
.cs-detail-page {
  --home-ink: var(--ink-navy);
  --home-action: var(--action);
  --home-action-hover: var(--action-hover);
  --home-warm: var(--surface-warm);
  --home-frost: var(--frost-warm);
  overflow-x: clip;
}

.cs-detail-intro {
  background: linear-gradient(180deg, #faf8f5 0%, #f7f5f1 100%);
}

.cs-detail-close {
  background: linear-gradient(180deg, var(--frost-warm) 0%, var(--accent-blue) 100%);
  border-top: 1px solid rgb(26 35 50 / 0.08);
}

.cs-detail-page .section-pad {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 1024px) {
  .cs-detail-page .section-pad {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.cs-detail-page .cs-heading {
  color: var(--home-ink);
  font-size: 1.35rem;
}

.cs-detail-page .cs-heading__icon {
  border-radius: 0.4rem;
}

/* Neutral page washes — accents stay on icons, labels, and diagram cues */
.cs-detail-page .cs-tone--challenge,
.cs-detail-page .cs-tone--approach,
.cs-detail-page .cs-tone--decisions,
.cs-detail-page .cs-jub-tone--challenge,
.cs-detail-page .cs-jub-tone--approach,
.cs-detail-page .cs-jub-tone--decisions,
.cs-detail-page .cs-g4-tone--challenge,
.cs-detail-page .cs-g4-tone--approach,
.cs-detail-page .cs-g4-tone--decisions,
.cs-detail-page .cs-oiz-tone--overview,
.cs-detail-page .cs-oiz-tone--contribution,
.cs-detail-page .cs-oiz-tone--decisions,
.cs-detail-page .cs-qua-tone--overview,
.cs-detail-page .cs-qua-tone--contribution,
.cs-detail-page .cs-qua-tone--decisions {
  background: #fff;
}

.cs-detail-page .cs-media__img {
  border-radius: 0;
  border-color: rgb(26 35 50 / 0.1);
  background: #fff;
}

.cs-detail-page .cs-media__caption {
  color: var(--muted-warm);
  font-size: 0.85rem;
}

.cs-detail-page .cs-media__fullsize-hint {
  border-radius: 0;
  border-color: rgb(26 35 50 / 0.1);
  color: var(--home-action);
}

.cs-detail-page .cs-media__fullsize-link:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
}

.cs-detail-page .cs-callout {
  border-radius: 0;
  border: none;
  border-left: 2px solid var(--cs-accent, var(--action));
  background: transparent;
  padding: 0.1rem 0 0.1rem 1rem;
}

.cs-detail-page .cs-callout__text {
  color: var(--home-ink);
}

.cs-detail-page .cs-card-grid {
  gap: 0;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

.cs-detail-page .cs-decision-card {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
  background: transparent;
  padding: 1.2rem 0 1.25rem;
}

.cs-detail-page .cs-decision-card__icon {
  border-radius: 0.4rem;
}

.cs-detail-page .cs-decision-card__title {
  color: var(--home-ink);
}

.cs-detail-page .cs-decision-card__text {
  color: var(--muted-warm);
}

@media (min-width: 768px) {
  .cs-detail-page .cs-card-grid {
    gap: 0 1.75rem;
    border-top: 0;
  }

  .cs-detail-page .cs-decision-card {
    border-bottom: 0;
    border-top: 1px solid rgb(26 35 50 / 0.12);
    padding: 1.15rem 0 0.25rem;
  }
}

.cs-detail-page .cs-step-list {
  gap: 0;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

.cs-detail-page .cs-step-card {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
  background: transparent;
  padding: 1.15rem 0 1.2rem;
}

.cs-detail-page .cs-step-card__num {
  color: var(--cs-accent, var(--action));
}

.cs-detail-page .cs-step-card__title {
  color: var(--home-ink);
}

.cs-detail-page .cs-step-card__text {
  color: var(--muted-warm);
}

@media (min-width: 768px) {
  .cs-detail-page .cs-step-list {
    gap: 0 1.25rem;
    border-top: 0;
  }

  .cs-detail-page .cs-step-card {
    border-bottom: 0;
    border-top: 1px solid rgb(26 35 50 / 0.12);
    padding-top: 1.1rem;
  }
}

.cs-detail-page .cs-outcome-list {
  gap: 0;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

.cs-detail-page .cs-outcome-list li {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
  background: transparent;
  padding: 0.95rem 0 0.95rem 1.35rem;
  color: var(--home-ink);
}

.cs-detail-page .cs-outcome-list li::before {
  left: 0;
  top: 1.3rem;
  background: var(--cs-accent, var(--action));
}

/* Contained frames for diagrams / process visuals — keep structure, quiet chrome */
.cs-detail-page .cs-jub-flow,
.cs-detail-page .cs-jub-lead-flow,
.cs-detail-page .g4-flow,
.cs-detail-page .oiz-flow,
.cs-detail-page .qua-flow {
  border-radius: 0;
  border-color: rgb(26 35 50 / 0.1);
  background: var(--home-frost);
}

.cs-detail-page .cs-jub-panel {
  border-radius: 0;
  border-color: rgb(26 35 50 / 0.1);
}

.cs-detail-page .cs-jub-process__step,
.cs-detail-page .cs-jub-lead-steps li,
.cs-detail-page .g4-process__step,
.cs-detail-page .oiz-process__step,
.cs-detail-page .qua-relate__stage {
  border-radius: 0;
}

.cs-detail-page .cs-jub-flow__note,
.cs-detail-page .g4-flow__note,
.cs-detail-page .oiz-flow__note,
.cs-detail-page .qua-flow__note,
.cs-detail-page .cs-jub-panel__text,
.cs-detail-page .cs-jub-process__desc,
.cs-detail-page .cs-jub-lead-steps__text,
.cs-detail-page .g4-process__desc,
.cs-detail-page .oiz-process__desc,
.cs-detail-page .qua-relate__desc {
  color: var(--muted-warm);
}

.cs-detail-page header a:focus-visible,
.cs-detail-page footer a:focus-visible,
.cs-detail-page nav a:focus-visible,
.cs-detail-page .home-text-link:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cs-detail-page .cs-decision-card,
  .cs-detail-page .cs-step-card,
  .cs-detail-page .cs-callout,
  .cs-detail-page .cs-jub-panel,
  .cs-detail-page .cs-jub-process__step,
  .cs-detail-page .g4-process__step,
  .cs-detail-page .oiz-process__step,
  .cs-detail-page .qua-relate__stage {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Homepage conversion layout — scoped to .home-page / .home
   Does not restyle case-study pages.
   -------------------------------------------------------------------------- */
.home-page {
  --home-ink: var(--ink-navy);
  --home-action: var(--action);
  --home-action-hover: var(--action-hover);
  --home-warm: var(--surface-warm);
  --home-frost: var(--frost-warm);
}

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.75rem 1.65rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition:
    background-color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out);
}

.home-btn:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
}

.home-btn--solid {
  background: var(--home-action);
  color: #fff;
  border: 1px solid transparent;
}

.home-btn--solid:hover {
  background: var(--home-action-hover);
}

.home-btn--ghost {
  background: #fff;
  color: var(--home-ink);
  border: 1px solid var(--line-warm);
}

.home-btn--ghost:hover {
  border-color: rgb(26 35 50 / 0.28);
  background: var(--home-frost);
}

.home-link-quiet {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted-warm);
  text-decoration: underline;
  text-decoration-color: rgb(221 217 209 / 0.9);
  text-underline-offset: 4px;
  transition: color 0.2s var(--ease-out), text-decoration-color 0.2s var(--ease-out);
}

.home-link-quiet:hover,
.home-link-quiet:focus-visible {
  color: var(--home-ink);
  text-decoration-color: var(--home-ink);
}

.home-link-quiet:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.home-text-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--home-ink);
  text-decoration: underline;
  text-decoration-color: var(--line-warm);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s var(--ease-out);
}

.home-text-link:hover,
.home-text-link:focus-visible {
  text-decoration-color: var(--home-ink);
}

.home-text-link:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.home-kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--action);
}

.home-kicker--on-ink {
  color: rgb(180 205 220);
}

.home-hero {
  background:
    linear-gradient(180deg, #faf8f5 0%, #f7f5f1 72%, #f5f3ef 100%);
}

.home-section--warm {
  background: var(--home-warm);
}

.home-section--ink {
  background:
    linear-gradient(160deg, #1a2332 0%, #243447 58%, #2a4058 100%);
  color: #fff;
}

.home-situations {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

@media (min-width: 900px) {
  .home-situations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-situation {
  padding: 1.35rem 0 1.5rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
  border-radius: 0;
  box-shadow: none;
}

@media (min-width: 900px) {
  .home-situation {
    padding: 1.45rem 1.35rem 1.55rem 0;
    border-bottom: 0;
    border-right: 1px solid rgb(26 35 50 / 0.12);
  }

  .home-situation:first-child {
    padding-left: 0;
  }

  .home-situation:not(:first-child) {
    padding-left: 1.35rem;
  }

  .home-situation:last-child {
    border-right: 0;
    padding-right: 0;
  }
}

.home-situation__num {
  display: block;
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--action);
}

.home-situation__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--home-ink);
}

.home-situation__text {
  margin: 0.65rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.home-work {
  display: grid;
  gap: 1.75rem;
}

.home-work-more {
  margin-top: 2rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgb(221 217 209 / 0.9);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.home-work-more__invite {
  margin: 0;
  max-width: 36rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.home-work-more__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--home-ink);
  text-decoration: none;
  border-bottom: 1px solid rgb(26 35 50 / 0.28);
  padding-bottom: 0.1rem;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.home-work-more__link:hover,
.home-work-more__link:focus-visible {
  color: var(--home-action);
  border-bottom-color: var(--home-action);
}

.home-work-more__link:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 4px;
  border-radius: 2px;
}

.home-work-more__arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease-out);
}

.home-work-more__link:hover .home-work-more__arrow,
.home-work-more__link:focus-visible .home-work-more__arrow {
  transform: translateX(0.2rem);
}

@media (min-width: 640px) {
  .home-work-more {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
  }

  .home-work-more__link {
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-work-more__link,
  .home-work-more__arrow {
    transition: none;
  }
}

.home-work-card {
  display: grid;
  gap: 0;
  border-radius: 1.15rem;
  overflow: hidden;
  background: var(--tone-soft, var(--home-warm));
  border: 1px solid rgb(221 217 209 / 0.85);
}

@media (min-width: 900px) {
  .home-work-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
  }
}

.home-work-card__media-link {
  display: block;
  background: var(--tone-soft, #f0eeea);
  min-width: 0;
}

.home-work-card__media-link:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: -2px;
}

.home-work-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.home-work-card__body {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.3rem 1.5rem;
  background: #fff;
  min-width: 0;
}

@media (min-width: 900px) {
  .home-work-card__body {
    padding: 1.6rem 1.55rem 1.7rem;
  }
}

.home-work-card__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tone, var(--action));
}

.home-work-card__title {
  margin: 0.45rem 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--home-ink);
}

.home-work-card__title a {
  color: inherit;
  text-decoration: none;
}

.home-work-card__title a:hover,
.home-work-card__title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-work-card__title a:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.home-work-card__problem,
.home-work-card__contrib {
  margin: 0.85rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.home-work-card__tag {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-ink);
}

.home-deliverables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 768px) {
  .home-deliverables {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

.home-deliverable {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1.15rem 1.2rem;
  border-radius: 0.95rem;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.1);
}

.home-deliverable__num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgb(180 205 220);
  padding-top: 0.2rem;
}

.home-deliverable__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
}

.home-deliverable__text {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.72);
}

.home-together__lead {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted-warm);
}

.home-together__close {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--muted-warm);
}

.home-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

@media (min-width: 768px) {
  .home-process {
    grid-template-columns: 1fr 1fr;
  }
}

.home-process li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 1.15rem 0;
  border: 0;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

@media (min-width: 768px) {
  .home-process li {
    padding: 1.25rem 1.25rem 1.25rem 0;
  }

  .home-process li:nth-child(even) {
    padding-left: 1.25rem;
    padding-right: 0;
    border-left: 1px solid rgb(26 35 50 / 0.1);
  }
}

.home-process__num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--action);
  padding-top: 0.15rem;
}

.home-process__copy {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.home-process__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--home-ink);
}

.home-process__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted-warm);
}

.home-trust__grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .home-trust__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
  }
}

.home-contact {
  background:
    linear-gradient(180deg, var(--home-frost) 0%, var(--accent-blue) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .home-btn,
  .home-link-quiet,
  .home-text-link {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   About page — continuation of homepage tokens; scoped to .about-page
   -------------------------------------------------------------------------- */
.about-page {
  --home-ink: var(--ink-navy);
  --home-action: var(--action);
  --home-action-hover: var(--action-hover);
  --home-warm: var(--surface-warm);
  --home-frost: var(--frost-warm);
}

.about-intro {
  background:
    linear-gradient(180deg, #faf8f5 0%, #f7f5f1 100%);
}

.about-lede {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-navy);
  font-weight: 500;
}

@media (min-width: 768px) {
  .about-lede {
    font-size: 1.125rem;
  }
}

.about-note {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted-warm);
}

.about-how {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgb(26 35 50 / 0.12);
  max-width: 42rem;
}

.about-how li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
}

.about-how__num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--action);
  padding-top: 0.2rem;
}

.about-how__copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.about-how__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-navy);
}

.about-how__text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.about-fit-section {
  background: var(--surface-warm);
}

.about-fit__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgb(26 35 50 / 0.12);
  max-width: 44rem;
}

@media (min-width: 768px) {
  .about-fit__list {
    grid-template-columns: 1fr 1fr;
  }
}

.about-fit__list li {
  position: relative;
  margin: 0;
  padding: 0.95rem 0 0.95rem 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink-navy);
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
  min-width: 0;
}

@media (min-width: 768px) {
  .about-fit__list li {
    padding: 1.05rem 1.15rem 1.05rem 0;
  }

  .about-fit__list li:nth-child(even) {
    padding-left: 1.15rem;
    padding-right: 0;
    border-left: 1px solid rgb(26 35 50 / 0.1);
  }
}

.about-fit__clarify {
  margin: 1.35rem 0 0;
  max-width: 36rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.about-close {
  background:
    linear-gradient(180deg, var(--frost-warm) 0%, var(--accent-blue) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .about-how li {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Case studies index — homepage tokens; scoped to .cs-index-page
   -------------------------------------------------------------------------- */
.cs-index-page {
  --home-ink: var(--ink-navy);
  --home-action: var(--action);
  --home-action-hover: var(--action-hover);
  --home-warm: var(--surface-warm);
  --home-frost: var(--frost-warm);
}

.csi-intro {
  background:
    linear-gradient(180deg, #faf8f5 0%, #f7f5f1 100%);
}

.csi-engagement {
  background: var(--surface-warm);
  border-top: 0;
}

.csi-engagement__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action);
}

.csi-engagement__title {
  margin: 0.65rem 0 0;
  max-width: 36rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--home-ink);
}

@media (min-width: 768px) {
  .csi-engagement__title {
    font-size: 1.75rem;
  }
}

.csi-engagement__company {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgb(47 93 124 / 0.35);
  transition:
    border-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out);
}

.csi-engagement__company:hover,
.csi-engagement__company:focus-visible {
  color: var(--action);
  border-bottom-color: var(--action);
}

.csi-engagement__company:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.csi-engagement__text {
  margin: 0.85rem 0 0;
  max-width: 38rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted-warm);
  padding-bottom: 0.15rem;
  border-bottom: 0;
}

@media (min-width: 768px) {
  .csi-engagement__text {
    max-width: 40rem;
  }
}

.csi-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tone, var(--action));
}

.csi-meta {
  margin: 0.7rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.csi-meta__k {
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-ink);
}

.csi-related {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted-warm);
}

.csi-featured {
  display: grid;
  gap: 1.5rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgb(26 35 50 / 0.12);
  padding-top: 1.5rem;
}

@media (min-width: 900px) {
  .csi-featured {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2rem;
    align-items: start;
  }
}

.csi-featured__visual {
  margin: 0;
  min-width: 0;
  background: var(--tone-soft, var(--surface-warm));
  padding: 0.65rem;
  border: 1px solid rgb(26 35 50 / 0.08);
}

.csi-featured__img,
.csi-item__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.csi-featured__title,
.csi-item__title {
  margin: 0.4rem 0 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--home-ink);
}

.csi-featured__title a,
.csi-item__title a {
  color: inherit;
  text-decoration: none;
}

.csi-featured__title a:hover,
.csi-item__title a:hover,
.csi-featured__title a:focus-visible,
.csi-item__title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.csi-featured__title a:focus-visible,
.csi-item__title a:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.csi-more {
  background: var(--surface-warm);
}

.csi-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

.csi-item {
  display: grid;
  gap: 1.15rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
  min-width: 0;
}

@media (min-width: 800px) {
  .csi-item {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 1.5rem;
    align-items: start;
    padding: 1.45rem 0;
  }
}

.csi-item__visual {
  margin: 0;
  min-width: 0;
  background: var(--tone-soft, #fff);
  padding: 0.5rem;
  border: 1px solid rgb(26 35 50 / 0.08);
}

.csi-item__title {
  font-size: 1.15rem;
}

.csi-concept {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted-warm);
}

.csi-close {
  background:
    linear-gradient(180deg, var(--frost-warm) 0%, var(--accent-blue) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .csi-featured,
  .csi-item {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Insights — homepage tokens; scoped to .insights-page
   Does not restyle homepage or case-study layouts.
   -------------------------------------------------------------------------- */
.insights-page {
  --home-ink: var(--ink-navy);
  --home-action: var(--action);
  --home-action-hover: var(--action-hover);
  --home-warm: var(--surface-warm);
  --home-frost: var(--frost-warm);
  overflow-x: clip;
}

.insights-intro,
.insights-article-intro {
  background: linear-gradient(180deg, #faf8f5 0%, #f7f5f1 100%);
}

.insights-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

.insights-item {
  margin: 0;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
  min-width: 0;
}

.insights-item--lead {
  padding-top: 1.65rem;
  padding-bottom: 1.75rem;
}

.insights-item__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted-warm);
}

.insights-item__title {
  margin: 0.55rem 0 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--home-ink);
}

.insights-item--lead .insights-item__title {
  margin-top: 0.7rem;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .insights-item__title {
    font-size: 1.28rem;
  }

  .insights-item--lead .insights-item__title {
    font-size: 1.55rem;
  }
}

.insights-item__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

.insights-item__title a:hover,
.insights-item__title a:focus-visible {
  color: var(--action);
}

.insights-item__title a:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.insights-item__takeaway {
  margin: 0.55rem 0 0;
  max-width: 38rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.insights-item--lead .insights-item__takeaway {
  margin-top: 0.7rem;
  font-size: 1.02rem;
  line-height: 1.6;
}

.insights-page .article-prose {
  color: var(--muted-warm);
}

.insights-page .article-prose h2 {
  color: var(--home-ink);
}

.insights-page .article-prose h3 {
  color: var(--ink-navy-soft);
}

.insights-page .article-prose li::marker {
  color: var(--action);
}

.insights-page .article-prose blockquote {
  border-left-color: var(--line-warm);
  color: var(--home-ink);
}

.insights-page .article-prose a {
  color: var(--home-ink);
  text-decoration-color: var(--line-warm);
}

.insights-page .article-prose a:hover,
.insights-page .article-prose a:focus-visible {
  text-decoration-color: var(--home-ink);
}

.insights-page .article-prose a:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.insights-page .article-prose hr {
  border-top-color: rgb(221 217 209 / 0.85);
}

.insights-page .reading-progress-track {
  background-color: rgb(221 217 209 / 0.55);
}

.insights-after {
  padding-top: 1.5rem;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

.insights-after__related {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.insights-after__related a {
  color: var(--home-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-warm);
  text-underline-offset: 4px;
  transition:
    color 0.2s var(--ease-out),
    text-decoration-color 0.2s var(--ease-out);
}

.insights-after__related a:hover,
.insights-after__related a:focus-visible {
  color: var(--action);
  text-decoration-color: var(--action);
}

.insights-after__related a:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.insights-after__contact {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.insights-after__contact a {
  color: var(--muted-warm);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgb(221 217 209 / 0.9);
  text-underline-offset: 4px;
  transition:
    color 0.2s var(--ease-out),
    text-decoration-color 0.2s var(--ease-out);
}

.insights-after__contact a:hover,
.insights-after__contact a:focus-visible {
  color: var(--home-ink);
  text-decoration-color: var(--home-ink);
}

.insights-after__contact a:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.insights-page header a:focus-visible,
.insights-page footer a:focus-visible,
.insights-page nav a:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Resume page — homepage tokens; scoped to .resume-page
   -------------------------------------------------------------------------- */
.resume-page {
  --home-ink: var(--ink-navy);
  --home-action: var(--action);
  --home-action-hover: var(--action-hover);
  --home-warm: var(--surface-warm);
  --home-frost: var(--frost-warm);
  overflow-x: clip;
}

.resume-intro {
  background: linear-gradient(180deg, #faf8f5 0%, #f7f5f1 100%);
}

.resume-lede {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-navy);
  font-weight: 500;
}

@media (min-width: 768px) {
  .resume-lede {
    font-size: 1.125rem;
  }
}

.resume-meta {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.resume-contribute {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 42rem;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

.resume-contribute li {
  padding: 1.15rem 0;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
}

.resume-contribute__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--home-ink);
}

.resume-contribute__text {
  margin: 0.45rem 0 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.resume-bandhan {
  background: var(--surface-warm);
}

.resume-bandhan__dates {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted-warm);
}

.resume-bandhan__title {
  margin: 0;
  max-width: 36rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--home-ink);
}

@media (min-width: 768px) {
  .resume-bandhan__title {
    font-size: 1.75rem;
  }
}

.resume-bandhan__company {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgb(47 93 124 / 0.35);
  transition:
    border-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out);
}

.resume-bandhan__company:hover,
.resume-bandhan__company:focus-visible {
  color: var(--action);
  border-bottom-color: var(--action);
}

.resume-bandhan__company:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.resume-bandhan__text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted-warm);
}

.resume-bandhan__note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.resume-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 46rem;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

.resume-timeline__item {
  display: grid;
  gap: 0.35rem 1.25rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
  min-width: 0;
}

@media (min-width: 720px) {
  .resume-timeline__item {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    align-items: start;
  }
}

.resume-timeline__item--lead {
  padding-top: 1.4rem;
  padding-bottom: 1.45rem;
}

.resume-timeline__date {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted-warm);
  font-variant-numeric: tabular-nums;
}

.resume-timeline__role {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--home-ink);
}

.resume-timeline__item--lead .resume-timeline__role {
  font-size: 1.12rem;
}

.resume-timeline__org {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted-warm);
}

.resume-timeline__detail {
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.resume-skills-section {
  background: var(--surface-warm);
}

.resume-skills {
  display: grid;
  gap: 0;
  max-width: 46rem;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

.resume-skills__group {
  padding: 1.15rem 0;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
}

.resume-skills__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--home-ink);
}

.resume-skills__text {
  margin: 0.45rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.resume-creds {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 42rem;
  border-top: 1px solid rgb(26 35 50 / 0.12);
}

.resume-creds li {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgb(26 35 50 / 0.12);
}

.resume-creds__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--home-ink);
}

.resume-creds__meta {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted-warm);
}

.resume-creds__status {
  font-style: normal;
  font-weight: 600;
  color: var(--action);
}

.resume-close {
  background: linear-gradient(180deg, var(--frost-warm) 0%, var(--accent-blue) 100%);
}

.resume-page header a:focus-visible,
.resume-page footer a:focus-visible,
.resume-page nav a:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .resume-contribute li,
  .resume-timeline__item,
  .resume-skills__group,
  .resume-creds li {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Contact page — homepage tokens; scoped to .contact-page
   -------------------------------------------------------------------------- */
.contact-page {
  --home-ink: var(--ink-navy);
  --home-action: var(--action);
  --home-action-hover: var(--action-hover);
  --home-warm: var(--surface-warm);
  --home-frost: var(--frost-warm);
  overflow-x: clip;
}

.contact-panel {
  background: linear-gradient(180deg, #faf8f5 0%, #f7f5f1 72%, #f5f3ef 100%);
  min-height: calc(100vh - 11rem);
}

.contact-layout {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3rem;
    padding-top: 0.25rem;
  }
}

.contact-title {
  margin: 0;
  max-width: 22ch;
  font-size: 2.15rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--home-ink);
}

@media (min-width: 768px) {
  .contact-title {
    font-size: 2.5rem;
    max-width: 18ch;
  }
}

.contact-lede {
  margin: 1.15rem 0 0;
  max-width: 36rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--muted-warm);
}

.contact-email__addr {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.45;
  user-select: all;
}

.contact-email__link {
  color: var(--home-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-warm);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.contact-email__link:hover,
.contact-email__link:focus-visible {
  color: var(--action);
  text-decoration-color: var(--action);
}

.contact-email__link:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.contact-guide {
  margin: 0;
  max-width: 28rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted-warm);
}

.contact-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted-warm);
}

.contact-secondary {
  border-top: 1px solid rgb(26 35 50 / 0.12);
  padding-top: 1.35rem;
  min-width: 0;
}

@media (min-width: 900px) {
  .contact-secondary {
    border-top: 0;
    border-left: 1px solid rgb(26 35 50 / 0.12);
    padding-top: 0.35rem;
    padding-left: 2rem;
  }
}

.contact-secondary__heading {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action);
}

.contact-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.contact-list li {
  display: grid;
  gap: 0.25rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgb(26 35 50 / 0.1);
}

.contact-list li:first-child {
  padding-top: 0.35rem;
}

.contact-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.contact-list__label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted-warm);
}

.contact-list__value {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--home-ink);
  text-decoration: underline;
  text-decoration-color: var(--line-warm);
  text-underline-offset: 4px;
  word-break: break-word;
  transition: color 0.2s var(--ease-out), text-decoration-color 0.2s var(--ease-out);
}

.contact-list__value:hover,
.contact-list__value:focus-visible {
  color: var(--action);
  text-decoration-color: var(--action);
}

.contact-list__value:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.contact-page header a:focus-visible,
.contact-page footer a:focus-visible,
.contact-page nav a:focus-visible {
  outline: 2px solid var(--home-action);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Case-study image viewer — one shared lightbox for detail pages
   -------------------------------------------------------------------------- */
.cs-media__fullsize-link {
  cursor: zoom-in;
}

.cs-media__fullsize-link:focus-visible {
  outline: 2px solid var(--action, #2f5d7c);
  outline-offset: 3px;
}

html.cs-lightbox-open,
html.cs-lightbox-open body {
  overflow: hidden;
}

.cs-lightbox[hidden] {
  display: none !important;
}

.cs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

.cs-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(26 35 50 / 0.72);
}

.cs-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(96vw, 72rem);
  max-height: min(96vh, 100%);
  margin: auto;
  background: #faf8f5;
  border: 1px solid rgb(26 35 50 / 0.12);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
  outline: none;
}

.cs-lightbox__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgb(26 35 50 / 0.1);
  background: #fff;
}

.cs-lightbox__title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-navy, #1a2332);
}

.cs-lightbox__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.cs-lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: var(--action, #2f5d7c);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.cs-lightbox__close:hover {
  background: var(--action-hover, #244a63);
}

.cs-lightbox__close:focus-visible,
.cs-lightbox__zoom:focus-visible,
.cs-lightbox__original:focus-visible {
  outline: 2px solid var(--action, #2f5d7c);
  outline-offset: 3px;
}

.cs-lightbox__zoom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid var(--line-warm, #ddd9d1);
  background: #fff;
  color: var(--ink-navy, #1a2332);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.cs-lightbox__original {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-navy, #1a2332);
  text-decoration: underline;
  text-decoration-color: var(--line-warm, #ddd9d1);
  text-underline-offset: 4px;
}

.cs-lightbox__original:hover {
  color: var(--action, #2f5d7c);
  text-decoration-color: var(--action, #2f5d7c);
}

.cs-lightbox__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1rem;
  background: rgb(26 35 50 / 0.04);
  touch-action: pan-x pan-y;
}

.cs-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(96vh - 9.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgb(26 35 50 / 0.08);
}

.cs-lightbox__stage.is-zoomed .cs-lightbox__img {
  max-width: none;
  max-height: none;
  width: max(100%, 140vw);
  cursor: grab;
}

.cs-lightbox__caption {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid rgb(26 35 50 / 0.1);
  background: #fff;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted-warm, #5c6570);
}

@media (max-width: 767px) {
  .cs-lightbox {
    padding: 0.65rem;
    align-items: center;
  }

  .cs-lightbox__dialog {
    width: 100%;
    max-height: calc(100vh - 1.3rem);
    min-height: 0;
    border: 1px solid rgb(26 35 50 / 0.12);
  }

  .cs-lightbox__img {
    max-height: calc(100vh - 11.5rem);
  }

  .cs-lightbox__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-lightbox,
  .cs-lightbox__img {
    transition: none;
  }
}