.case-mkb-site {
  --mkb-accent: #f5a15d;
  --mkb-accent-rgb: 245, 161, 93;
  --mkb-ink: #0a1012;
}

.case-mkb-site.case-nomas {
  --mkb-accent: #ef3038;
  --mkb-accent-rgb: 239, 48, 56;
}

.case-mkb-site.case-topkapi {
  --mkb-accent: #b82f36;
  --mkb-accent-rgb: 184, 47, 54;
}

.case-mkb-site.case-boccone {
  --mkb-accent: #c4a17b;
  --mkb-accent-rgb: 196, 161, 123;
}

.case-mkb-site .case-hero-image::after {
  background:
    linear-gradient(90deg, rgba(3, 7, 8, 0.12), rgba(3, 7, 8, 0.7)),
    linear-gradient(180deg, transparent 55%, rgba(3, 7, 8, 0.72));
}

.case-mkb-site .case-hero-image img {
  object-position: center;
}

.case-nomas .case-hero-image img {
  object-position: center 52%;
}

.case-topkapi .case-hero-image img {
  object-position: center 24%;
}

.case-boccone .case-hero-image img {
  object-position: center 18%;
}

.case-mkb-site .case-facts article::before,
.case-mkb-site .case-proof-card::before {
  background: linear-gradient(90deg, rgba(var(--mkb-accent-rgb), 0.95), rgba(99, 235, 214, 0.55));
}

.archive-status-grid,
.source-ledger,
.responsive-proof-grid {
  display: grid;
  gap: 1rem;
}

.archive-status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
}

.archive-status-card,
.source-ledger article {
  position: relative;
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(145deg, rgba(var(--mkb-accent-rgb), 0.09), transparent 56%),
    rgba(7, 15, 18, 0.74);
}

.archive-status-card::after,
.source-ledger article::after {
  position: absolute;
  right: -2rem;
  bottom: -2.5rem;
  width: 6.5rem;
  height: 6.5rem;
  border: 1px solid rgba(var(--mkb-accent-rgb), 0.22);
  border-radius: 50%;
  content: "";
}

.archive-status-card > span,
.source-ledger article > span,
.rebuild-label {
  display: inline-flex;
  margin-bottom: 0.85rem;
  color: var(--mkb-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.archive-status-card h3,
.source-ledger h3 {
  margin: 0 0 0.7rem;
}

.archive-status-card p,
.source-ledger p {
  margin: 0;
  color: var(--muted);
}

.archive-caveat {
  max-width: 76rem;
  margin: 1.25rem auto 0;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--mkb-accent);
  background: rgba(var(--mkb-accent-rgb), 0.07);
  color: var(--muted);
}

.archive-caveat strong {
  color: var(--text);
}

.rebuild-stage {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
}

.browser-mockup {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.15rem;
  background: #121819;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.3);
}

.browser-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  min-height: 3rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #111719;
}

.browser-dots {
  display: flex;
  gap: 0.35rem;
}

.browser-dots i {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.browser-dots i:first-child {
  background: var(--mkb-accent);
}

.browser-address {
  min-width: 0;
  padding: 0.42rem 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-chrome > small {
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.browser-screen {
  min-height: 34rem;
  color: #111;
}

.rebuild-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #111719;
  color: var(--muted);
}

.rebuild-caption span {
  color: var(--mkb-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.responsive-proof-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  margin-top: 2rem;
}

.device-shell {
  width: min(100%, 24rem);
  margin-inline: auto;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2.2rem;
  background: linear-gradient(145deg, #20282b, #080d0f);
  box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.35);
}

.device-shell::before {
  display: block;
  width: 28%;
  height: 0.35rem;
  margin: 0 auto 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  content: "";
}

.device-viewport {
  overflow: hidden;
  border-radius: 1.45rem;
  background: #fff;
}

.device-viewport img {
  display: block;
  width: 100%;
  height: auto;
}

.device-caption {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.mobile-proof-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: 2rem;
}

.mobile-proof-gallery figure {
  min-width: 0;
  margin: 0;
}

.mobile-proof-gallery .device-shell {
  width: 100%;
  max-width: 19rem;
}

.mobile-proof-gallery figcaption {
  max-width: 28rem;
  margin: 1rem auto 0;
  color: var(--muted);
  text-align: center;
}

.mobile-proof-gallery figcaption strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text);
}

.field-proof-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.field-proof-gallery figure {
  grid-column: span 4;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 15, 18, 0.76);
}

.field-proof-gallery figure:first-child {
  grid-row: span 2;
}

.field-proof-gallery img {
  display: block;
  width: 100%;
  height: clamp(18rem, 30vw, 27rem);
  object-fit: cover;
}

.field-proof-gallery figure:first-child img {
  object-position: center 62%;
}

.field-proof-gallery figcaption {
  padding: 1rem 1.1rem;
  color: var(--muted);
}

.field-proof-gallery figcaption strong {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--text);
}

.service-connection {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: 2rem;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  border: 1px solid rgba(var(--mkb-accent-rgb), 0.25);
  background:
    radial-gradient(circle at 10% 15%, rgba(var(--mkb-accent-rgb), 0.12), transparent 34%),
    rgba(7, 15, 18, 0.78);
}

.service-connection h3 {
  margin: 0.4rem 0 0.8rem;
}

.service-connection p {
  color: var(--muted);
}

.service-connection a {
  color: var(--mkb-accent);
  font-weight: 800;
}

.service-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.service-flow span {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 5rem;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.service-flow span:not(:last-child)::after {
  position: absolute;
  right: -0.55rem;
  z-index: 1;
  color: var(--mkb-accent);
  content: "→";
}

.source-ledger {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2rem;
}

.case-mkb-site .case-insight-map article > span {
  color: var(--mkb-accent);
}

.case-mkb-site .case-skill-list span {
  border-color: rgba(var(--mkb-accent-rgb), 0.28);
  background: rgba(var(--mkb-accent-rgb), 0.08);
}

@media (max-width: 900px) {
  .archive-status-grid,
  .source-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-proof-gallery {
    grid-template-columns: 1fr;
  }

  .responsive-proof-grid {
    grid-template-columns: 1fr;
  }

  .field-proof-gallery figure {
    grid-column: span 6;
  }

  .field-proof-gallery figure:last-child {
    grid-column: 4 / span 6;
  }

  .service-connection {
    grid-template-columns: 1fr;
  }

  .responsive-proof-grid > .case-copy {
    order: -1;
  }
}

@media (max-width: 680px) {
  .archive-status-grid,
  .source-ledger {
    grid-template-columns: 1fr;
  }

  .browser-chrome {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .browser-chrome > small {
    display: none;
  }

  .browser-screen {
    min-height: 25rem;
  }

  .rebuild-caption {
    grid-template-columns: 1fr;
  }

  .field-proof-gallery {
    grid-template-columns: 1fr;
  }

  .field-proof-gallery figure,
  .field-proof-gallery figure:last-child {
    grid-column: auto;
  }

  .service-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-flow span:not(:last-child)::after {
    display: none;
  }
}

/* Il Boccone is an archival restaurant case. Its visual language deliberately
   moves from the portfolio's interface-blue toward Italian paper, espresso,
   terracotta and olive, while the shared shell stays recognizable. */
.case-mkb-site.case-boccone {
  --mkb-accent: #df9a55;
  --mkb-accent-rgb: 223, 154, 85;
  --boccone-espresso: #160f0d;
  --boccone-wine: #4b1e19;
  --boccone-terracotta: #a44831;
  --boccone-olive: #70714a;
  --boccone-paper: #f4e8d5;
  --boccone-cream: #fff7ea;
  --boccone-ink: #251712;
  background:
    radial-gradient(circle at 7% 15%, rgba(188, 91, 51, 0.22), transparent 28rem),
    radial-gradient(circle at 92% 34%, rgba(183, 139, 69, 0.15), transparent 26rem),
    linear-gradient(112deg, #120d0c 0%, #1e100d 49%, #100f0c 100%);
}

.case-boccone .case-hero {
  min-height: min(52rem, 78svh);
  isolation: isolate;
}

.case-boccone .case-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 10, 8, 0.95) 0%, rgba(22, 10, 8, 0.77) 37%, rgba(22, 10, 8, 0.24) 72%, rgba(12, 8, 7, 0.74) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02) 52%, rgba(10, 7, 6, 0.9));
  content: "";
}

.case-boccone .case-hero-image::after {
  background:
    linear-gradient(90deg, rgba(35, 13, 10, 0.5), transparent 56%),
    linear-gradient(180deg, transparent 44%, rgba(16, 9, 7, 0.78));
}

.case-boccone .case-hero-image img {
  filter: saturate(0.86) sepia(0.08) contrast(1.08);
  object-position: center 30%;
}

.case-boccone .case-hero-content {
  max-width: 48rem;
}

.case-boccone .case-hero-content .eyebrow,
.case-boccone .eyebrow,
.case-boccone .fact-label {
  color: #efb46c;
}

.case-boccone .case-hero h1,
.case-boccone h2,
.case-boccone .section-heading h2 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.04em;
}

.case-boccone .case-hero h1 {
  max-width: 9ch;
  color: var(--boccone-cream);
  font-size: clamp(3.8rem, 8vw, 7.5rem);
  line-height: 0.88;
  text-shadow: 0 0.2rem 2.2rem rgba(0, 0, 0, 0.46);
}

.case-boccone .hero-copy {
  max-width: 42rem;
  color: rgba(255, 245, 230, 0.85);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.5;
}

.case-boccone .case-breadcrumb {
  border-color: rgba(239, 180, 108, 0.38);
  background: rgba(31, 16, 12, 0.58);
  backdrop-filter: blur(0.65rem);
}

.case-boccone .case-breadcrumb a:hover,
.case-boccone .case-breadcrumb a:focus-visible {
  color: #ffd39b;
}

.case-boccone .case-summary {
  border-block-color: rgba(223, 154, 85, 0.22);
  background: linear-gradient(90deg, rgba(49, 23, 17, 0.96), rgba(19, 14, 11, 0.98));
}

.case-boccone .case-facts article {
  border-color: rgba(223, 154, 85, 0.28);
  background: linear-gradient(140deg, rgba(179, 79, 46, 0.14), rgba(19, 14, 11, 0.72));
}

.case-boccone .case-facts article::before,
.case-boccone .case-proof-card::before {
  background: linear-gradient(90deg, #d85a3d, #efbf72);
}

.case-boccone .case-section.section {
  position: relative;
}

.case-boccone .case-section.section::before {
  position: absolute;
  inset: 8% 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(121, 62, 38, 0.08), transparent 35%, rgba(109, 105, 65, 0.08));
  content: "";
  pointer-events: none;
}

.case-boccone .case-section.band {
  border-block-color: rgba(223, 154, 85, 0.22);
  background:
    radial-gradient(circle at 12% 30%, rgba(161, 70, 42, 0.14), transparent 24rem),
    linear-gradient(112deg, rgba(31, 18, 14, 0.98), rgba(15, 13, 10, 0.98));
}

.case-boccone .case-copy p {
  color: #eadaca;
  font-size: 1.06rem;
  line-height: 1.78;
}

.case-boccone .archive-status-card {
  min-height: 100%;
  border-color: rgba(223, 154, 85, 0.3);
  background:
    linear-gradient(145deg, rgba(163, 67, 39, 0.22), transparent 64%),
    rgba(30, 18, 14, 0.82);
}

.case-boccone .archive-status-card::after {
  border-color: rgba(223, 154, 85, 0.28);
}

.case-boccone .archive-status-card > span,
.case-boccone .rebuild-label {
  color: #f2bb71;
}

.case-boccone .archive-caveat {
  border-left-color: #d36947;
  background: rgba(163, 67, 39, 0.14);
}

.case-boccone .browser-mockup {
  border-color: rgba(230, 181, 111, 0.52);
  border-radius: 0.35rem;
  background: var(--boccone-espresso);
  box-shadow: 0 2.4rem 5.5rem rgba(0, 0, 0, 0.48), 0 0 0 0.45rem rgba(184, 91, 52, 0.08);
}

.case-boccone .browser-chrome {
  border-bottom-color: rgba(249, 225, 187, 0.15);
  background: linear-gradient(90deg, #351710, #5a271b 52%, #2d1711);
}

.case-boccone .browser-dots i:nth-child(2) {
  background: #e1a74e;
}

.case-boccone .browser-dots i:nth-child(3) {
  background: #83905a;
}

.case-boccone .browser-address {
  border-color: rgba(247, 221, 181, 0.22);
  background: rgba(16, 8, 6, 0.38);
  color: rgba(255, 239, 214, 0.76);
}

.case-boccone .rebuild-caption {
  border-top-color: rgba(240, 184, 109, 0.22);
  background: #21120e;
  color: rgba(255, 238, 212, 0.72);
}

.case-boccone .rebuild-caption span {
  color: #efb46c;
}

.case-boccone .mobile-proof-gallery {
  position: relative;
  align-items: start;
  padding: clamp(1.5rem, 4vw, 3.6rem) clamp(0.8rem, 2.2vw, 2.2rem);
  border: 1px solid rgba(223, 154, 85, 0.3);
  background:
    radial-gradient(circle at 50% 12%, rgba(209, 132, 61, 0.2), transparent 22rem),
    linear-gradient(135deg, #2b1711, #130f0d 72%);
}

.case-boccone .mobile-proof-gallery::before {
  position: absolute;
  inset: 0.75rem;
  border: 1px solid rgba(255, 239, 214, 0.13);
  content: "";
  pointer-events: none;
}

.case-boccone .mobile-proof-gallery figure {
  position: relative;
  z-index: 1;
}

.case-boccone .mobile-proof-gallery figure:nth-child(2) {
  transform: none;
}

.case-boccone .mobile-proof-gallery .device-shell {
  max-width: 17.25rem;
  padding: 0.7rem;
  border-color: rgba(248, 211, 157, 0.5);
  border-radius: 2.05rem;
  background: linear-gradient(145deg, #733723, #160d0a 62%, #ba7940);
  box-shadow: 0 1.5rem 3.8rem rgba(0, 0, 0, 0.44);
}

.case-boccone .mobile-proof-gallery .device-shell::before {
  background: rgba(255, 240, 216, 0.58);
}

.case-boccone .mobile-proof-gallery .device-viewport {
  border-radius: 1.35rem;
}

.case-boccone .mobile-proof-gallery figcaption {
  max-width: 19rem;
  color: rgba(255, 237, 211, 0.72);
  font-size: 0.88rem;
}

.case-boccone .mobile-proof-gallery figcaption strong {
  color: #f6c47f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
}

.case-boccone .service-connection {
  border-color: rgba(223, 154, 85, 0.43);
  background:
    linear-gradient(112deg, rgba(100, 41, 27, 0.92), rgba(28, 20, 15, 0.94) 52%, rgba(75, 78, 43, 0.58));
}

.case-boccone .service-connection h3 {
  max-width: 18ch;
  color: var(--boccone-cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.3vw, 3.15rem);
  line-height: 1.04;
}

.case-boccone .service-flow {
  gap: 0.5rem;
}

.case-boccone .service-flow span {
  min-height: 6.5rem;
  border-color: rgba(245, 221, 181, 0.24);
  background: rgba(16, 10, 8, 0.38);
  color: #ffe5bc;
}

.case-boccone .service-flow span:nth-child(2) {
  border-color: rgba(223, 154, 85, 0.72);
  background: rgba(170, 70, 43, 0.42);
}

.case-boccone .service-flow span:nth-child(3) {
  border-color: rgba(167, 177, 99, 0.65);
  background: rgba(87, 92, 48, 0.35);
}

.case-boccone .service-flow span:not(:last-child)::after {
  color: #efb46c;
}

.case-boccone .field-proof-gallery {
  gap: clamp(0.8rem, 1.5vw, 1.35rem);
}

.case-boccone .field-proof-gallery figure {
  border: 1px solid rgba(223, 154, 85, 0.44);
  background: #21130f;
  box-shadow: 0 1.25rem 2.7rem rgba(0, 0, 0, 0.28);
}

.case-boccone .field-proof-gallery figure:first-child {
  border-color: rgba(214, 105, 66, 0.58);
}

.case-boccone .field-proof-gallery img {
  filter: saturate(0.9) contrast(1.04);
}

.case-boccone .field-proof-gallery figcaption {
  border-top: 1px solid rgba(223, 154, 85, 0.2);
  color: rgba(255, 235, 207, 0.72);
}

.case-boccone .field-proof-gallery figcaption strong {
  color: #f2bd77;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
}

.case-boccone .boccone-experience-map {
  position: relative;
  gap: 0;
  margin-top: 2.2rem;
  overflow: hidden;
  border: 1px solid rgba(223, 154, 85, 0.35);
  background: linear-gradient(135deg, #3c1d16, #1a110e 58%, #272618);
}

.case-boccone .boccone-experience-map::before {
  position: absolute;
  top: 3.15rem;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, #d16b47, #efb46c, #7f8b52);
  content: "";
}

.case-boccone .boccone-experience-map article {
  position: relative;
  min-height: 13rem;
  padding: 2rem clamp(1.2rem, 2.4vw, 2rem);
  border: 0;
  border-right: 1px solid rgba(250, 226, 190, 0.13);
  background: transparent;
}

.case-boccone .boccone-experience-map article:last-child {
  border-right: 0;
}

.case-boccone .boccone-experience-map article > span {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 1.25rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #25130f;
  color: #f2bc75;
}

.case-boccone .boccone-experience-map article:nth-child(2) > span {
  color: #e6965c;
}

.case-boccone .boccone-experience-map article:nth-child(3) > span {
  color: #f4ca83;
}

.case-boccone .boccone-experience-map article:nth-child(4) > span {
  color: #aeba73;
}

.case-boccone .boccone-experience-map h3 {
  color: var(--boccone-cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
}

.case-boccone .boccone-experience-map p {
  color: rgba(255, 235, 207, 0.72);
}

.case-boccone .case-skill-list {
  justify-content: center;
  margin-top: 1rem;
}

.case-boccone .case-skill-list span {
  border-color: rgba(223, 154, 85, 0.44);
  background: rgba(111, 52, 33, 0.32);
  color: #f8d6a0;
}

@media (max-width: 900px) {
  .case-boccone .case-hero {
    min-height: 42rem;
  }

  .case-boccone .mobile-proof-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-boccone .mobile-proof-gallery figure:nth-child(2) {
    transform: none;
  }

  .case-boccone .boccone-experience-map article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(250, 226, 190, 0.13);
  }

  .case-boccone .boccone-experience-map article:last-child {
    border-bottom: 0;
  }

  .case-boccone .boccone-experience-map::before {
    display: none;
  }
}

@media (max-width: 680px) {
  .case-boccone .case-hero {
    min-height: 39rem;
  }

  .case-boccone .case-hero h1 {
    font-size: clamp(3.35rem, 17vw, 5.5rem);
  }

  .case-boccone .case-hero-image img {
    object-position: 58% center;
  }

  .case-boccone .mobile-proof-gallery {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .case-boccone .mobile-proof-gallery figure:nth-child(2) {
    transform: none;
  }

  .case-boccone .mobile-proof-gallery .device-shell {
    max-width: 17rem;
  }
}

/* Nomas is presented as a warm editorial bistro case, built from preserved
   brand copy and imagery rather than a generic interface demonstration. */
.case-mkb-site.case-nomas {
  --mkb-accent: #d9a15a;
  --mkb-accent-rgb: 217, 161, 90;
  --nomas-olive: #414936;
  --nomas-olive-light: #87936f;
  --nomas-wine: #6f2631;
  --nomas-wine-dark: #35151a;
  --nomas-paper: #efe2c8;
  --nomas-cream: #fff6e6;
  --nomas-ink: #2c2118;
  background:
    radial-gradient(circle at 8% 14%, rgba(111, 38, 49, .22), transparent 28rem),
    radial-gradient(circle at 92% 38%, rgba(102, 113, 74, .18), transparent 26rem),
    linear-gradient(118deg, #15120e, #231711 48%, #121510);
}

.case-nomas .case-hero {
  isolation: isolate;
  min-height: min(54rem, 82svh);
}

.case-nomas .case-hero::before {
  background:
    linear-gradient(90deg, rgba(24, 15, 11, .96) 0%, rgba(26, 16, 12, .73) 38%, rgba(26, 16, 12, .16) 72%, rgba(13, 13, 10, .62) 100%),
    linear-gradient(180deg, transparent 44%, rgba(18, 12, 9, .9));
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.case-nomas .case-hero-image::after {
  background:
    linear-gradient(90deg, rgba(59, 24, 24, .44), transparent 55%),
    linear-gradient(180deg, transparent 48%, rgba(18, 12, 9, .8));
}

.case-nomas .case-hero-image img {
  filter: saturate(.84) contrast(1.06) sepia(.06);
  object-position: center 52%;
}

.case-nomas .case-hero-content {
  max-width: 50rem;
}

.case-nomas .case-hero h1,
.case-nomas h2,
.case-nomas .section-heading h2,
.case-nomas .nomas-menu-note h3 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
}

.case-nomas .case-hero h1 {
  color: var(--nomas-cream);
  font-size: clamp(4rem, 9vw, 8.2rem);
  line-height: .86;
  text-shadow: 0 .22rem 2.2rem rgba(0, 0, 0, .48);
}

.case-nomas .hero-copy {
  color: rgba(255, 244, 225, .86);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 1.7vw, 1.42rem);
  line-height: 1.55;
  max-width: 43rem;
}

.case-nomas .eyebrow,
.case-nomas .fact-label,
.case-nomas .archive-status-card > span,
.case-nomas .source-ledger article > span,
.case-nomas .rebuild-label {
  color: #e9b76f;
}

.case-nomas .case-breadcrumb {
  backdrop-filter: blur(.65rem);
  background: rgba(43, 24, 17, .62);
  border-color: rgba(233, 183, 111, .38);
}

.case-nomas .case-summary {
  background: linear-gradient(90deg, rgba(69, 29, 34, .95), rgba(25, 25, 18, .98));
  border-block-color: rgba(218, 162, 91, .24);
}

.case-nomas .case-facts article {
  background: linear-gradient(140deg, rgba(111, 38, 49, .2), rgba(24, 22, 16, .76));
  border-color: rgba(218, 162, 91, .28);
}

.case-nomas .case-facts article::before,
.case-nomas .case-proof-card::before {
  background: linear-gradient(90deg, var(--nomas-wine), #dda45b, var(--nomas-olive-light));
}

.case-nomas .case-section.band {
  background:
    radial-gradient(circle at 12% 24%, rgba(111, 38, 49, .13), transparent 24rem),
    linear-gradient(112deg, rgba(37, 24, 18, .98), rgba(17, 18, 13, .98));
  border-block-color: rgba(218, 162, 91, .22);
}

.case-nomas .case-copy p {
  color: #eadcc9;
  font-size: 1.06rem;
  line-height: 1.8;
}

.case-nomas .nomas-editorial-section {
  padding-block: clamp(4.5rem, 9vw, 9rem);
}

.case-nomas .nomas-editorial-heading {
  display: grid;
  gap: 1.2rem clamp(2rem, 8vw, 8rem);
  grid-template-columns: minmax(0, .9fr) minmax(18rem, .65fr);
  margin: 0 auto clamp(2.5rem, 5vw, 5rem);
  max-width: 1180px;
}

.case-nomas .nomas-editorial-heading .eyebrow {
  grid-column: 1 / -1;
  margin: 0;
}

.case-nomas .nomas-editorial-heading h2 {
  font-size: clamp(2.6rem, 5.8vw, 5.8rem);
  line-height: .98;
  margin: 0;
  max-width: 13ch;
}

.case-nomas .nomas-editorial-heading > p:last-child {
  align-self: end;
  color: #dfd0bb;
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 .35rem;
}

.case-nomas .nomas-editorial-spread {
  display: grid;
  gap: clamp(.75rem, 1.6vw, 1.4rem);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1260px;
  padding: clamp(.85rem, 2vw, 1.5rem);
  position: relative;
}

.case-nomas .nomas-editorial-spread::before {
  background:
    linear-gradient(90deg, rgba(111, 38, 49, .14) 1px, transparent 1px),
    linear-gradient(rgba(111, 38, 49, .1) 1px, transparent 1px),
    var(--nomas-paper);
  background-size: 32px 32px;
  box-shadow: 0 2.2rem 5rem rgba(0, 0, 0, .38);
  content: "";
  inset: 0;
  position: absolute;
  transform: rotate(-.35deg);
}

.case-nomas .nomas-editorial-spread figure,
.case-nomas .nomas-menu-note {
  margin: 0;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.case-nomas .nomas-editorial-spread figure {
  background: #211710;
  box-shadow: 0 1rem 2.2rem rgba(54, 29, 18, .25);
  overflow: hidden;
}

.case-nomas .nomas-editorial-spread img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: filter .28s ease, transform .45s ease;
  width: 100%;
}

.case-nomas .nomas-editorial-spread figure:hover img,
.case-nomas .nomas-editorial-spread figure:focus-within img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.025);
}

.case-nomas .nomas-editorial-spread figcaption {
  background: linear-gradient(180deg, transparent, rgba(24, 13, 9, .9));
  bottom: 0;
  color: rgba(255, 245, 225, .84);
  font-size: .86rem;
  left: 0;
  line-height: 1.45;
  padding: 3.2rem 1.15rem 1rem;
  position: absolute;
  right: 0;
}

.case-nomas .nomas-editorial-spread figcaption span {
  color: #f1bd72;
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: .28rem;
  text-transform: uppercase;
}

.case-nomas .nomas-editorial-people {
  grid-column: 1 / span 5;
  grid-row: 1 / span 6;
  transform: rotate(-1deg);
}

.case-nomas .nomas-editorial-people img {
  min-height: 36rem;
}

.case-nomas .nomas-editorial-dish {
  grid-column: 6 / span 7;
  grid-row: 1 / span 3;
}

.case-nomas .nomas-editorial-dish img {
  min-height: 19rem;
}

.case-nomas .nomas-menu-note {
  background: #fff6df;
  border: 1px solid rgba(90, 51, 30, .22);
  color: var(--nomas-ink);
  grid-column: 6 / span 4;
  grid-row: 4 / span 3;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  transform: rotate(.75deg);
}

.case-nomas .nomas-menu-kicker {
  color: var(--nomas-wine);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.case-nomas .nomas-menu-note h3 {
  color: var(--nomas-wine-dark);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: .94;
  margin: .9rem 0 1.4rem;
}

.case-nomas .nomas-menu-note ul {
  border-top: 1px solid rgba(90, 51, 30, .25);
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-nomas .nomas-menu-note li {
  border-bottom: 1px solid rgba(90, 51, 30, .18);
  display: grid;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  gap: .7rem;
  grid-template-columns: 1.7rem 1fr;
  padding: .65rem 0;
}

.case-nomas .nomas-menu-note li span {
  color: var(--nomas-wine);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 800;
  padding-top: .25rem;
}

.case-nomas .nomas-menu-note p {
  color: #6f5b49;
  font-size: .76rem;
  line-height: 1.55;
  margin: 1.1rem 0 0;
}

.case-nomas .nomas-editorial-special {
  grid-column: 10 / span 3;
  grid-row: 4 / span 3;
  transform: rotate(-.8deg);
}

.case-nomas .nomas-editorial-special img {
  min-height: 28rem;
}

.case-nomas .archive-status-card,
.case-nomas .source-ledger article {
  background:
    linear-gradient(145deg, rgba(111, 38, 49, .19), transparent 60%),
    rgba(31, 27, 20, .86);
  border-color: rgba(218, 162, 91, .3);
}

.case-nomas .browser-mockup {
  background: #19140f;
  border-color: rgba(218, 162, 91, .5);
  border-radius: .35rem;
  box-shadow: 0 2.4rem 5.5rem rgba(0, 0, 0, .46), 0 0 0 .45rem rgba(111, 38, 49, .08);
}

.case-nomas .browser-chrome {
  background: linear-gradient(90deg, var(--nomas-wine-dark), var(--nomas-wine) 50%, #2f351f);
  border-bottom-color: rgba(255, 240, 213, .16);
}

.case-nomas .browser-dots i:nth-child(2) { background: #dda45b; }
.case-nomas .browser-dots i:nth-child(3) { background: var(--nomas-olive-light); }

.case-nomas .browser-address {
  background: rgba(20, 11, 9, .34);
  border-color: rgba(255, 235, 200, .24);
  color: rgba(255, 240, 215, .78);
}

.case-nomas .rebuild-caption {
  background: #211611;
  border-top-color: rgba(218, 162, 91, .24);
  color: rgba(255, 239, 214, .72);
}

.case-nomas .device-shell {
  background: linear-gradient(145deg, #6f2631, #17130f 62%, #6f7854);
  border-color: rgba(238, 194, 127, .5);
  box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, .42);
}

.case-nomas .service-connection {
  background: linear-gradient(112deg, rgba(111, 38, 49, .8), rgba(34, 27, 19, .94) 52%, rgba(65, 73, 54, .78));
  border-color: rgba(218, 162, 91, .44);
}

.case-nomas .service-connection h3 {
  color: var(--nomas-cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.3vw, 3.15rem);
  line-height: 1.04;
  max-width: 18ch;
}

.case-nomas .service-flow span {
  background: rgba(22, 18, 13, .4);
  border-color: rgba(255, 236, 204, .22);
  color: #ffe4b8;
  min-height: 6rem;
}

.case-nomas .service-flow span:nth-child(2) {
  background: rgba(111, 38, 49, .4);
  border-color: rgba(204, 107, 111, .62);
}

.case-nomas .service-flow span:nth-child(3) {
  background: rgba(65, 73, 54, .46);
  border-color: rgba(145, 157, 111, .58);
}

.case-nomas .nomas-experience-map {
  background: linear-gradient(135deg, #3a171d, #1b1711 58%, #2e3525);
  border: 1px solid rgba(218, 162, 91, .36);
  gap: 0;
  margin-top: 2.2rem;
  overflow: hidden;
  position: relative;
}

.case-nomas .nomas-experience-map article {
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 234, 199, .13);
  min-height: 13rem;
  padding: 2rem clamp(1.2rem, 2.4vw, 2rem);
}

.case-nomas .nomas-experience-map article:last-child { border-right: 0; }

.case-nomas .nomas-experience-map article > span {
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  height: 2.35rem;
  margin-bottom: 1.25rem;
  place-items: center;
  width: 2.35rem;
}

.case-nomas .nomas-experience-map h3 {
  color: var(--nomas-cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
}

.case-nomas .nomas-experience-map p { color: rgba(255, 235, 207, .72); }

.case-nomas .case-skill-list span {
  background: rgba(91, 48, 43, .34);
  border-color: rgba(218, 162, 91, .4);
  color: #f7d5a1;
}

@media (max-width: 900px) {
  .case-nomas .nomas-editorial-heading { grid-template-columns: 1fr; }
  .case-nomas .nomas-editorial-heading .eyebrow { grid-column: auto; }
  .case-nomas .nomas-editorial-heading h2 { max-width: 16ch; }
  .case-nomas .nomas-editorial-heading > p:last-child { max-width: 44rem; }
  .case-nomas .nomas-editorial-people { grid-column: 1 / span 7; }
  .case-nomas .nomas-editorial-dish { grid-column: 8 / span 5; }
  .case-nomas .nomas-menu-note { grid-column: 8 / span 5; }
  .case-nomas .nomas-editorial-special { display: none; }
  .case-nomas .nomas-experience-map article {
    border-bottom: 1px solid rgba(255, 234, 199, .13);
    border-right: 0;
    min-height: 0;
  }
  .case-nomas .nomas-experience-map article:last-child { border-bottom: 0; }
}

@media (max-width: 680px) {
  .case-nomas .case-hero { min-height: 40rem; }
  .case-nomas .case-hero h1 { font-size: clamp(3.6rem, 18vw, 5.8rem); }
  .case-nomas .case-hero-image img { object-position: 58% center; }
  .case-nomas .nomas-editorial-spread { display: grid; gap: 1rem; grid-template-columns: 1fr; padding: 1rem; }
  .case-nomas .nomas-editorial-spread::before { transform: none; }
  .case-nomas .nomas-editorial-people,
  .case-nomas .nomas-editorial-dish,
  .case-nomas .nomas-menu-note,
  .case-nomas .nomas-editorial-special {
    display: block;
    grid-column: auto;
    grid-row: auto;
    transform: none;
  }
  .case-nomas .nomas-editorial-people img,
  .case-nomas .nomas-editorial-dish img,
  .case-nomas .nomas-editorial-special img { min-height: 19rem; }
  .case-nomas .nomas-editorial-special img { max-height: 24rem; }
}