@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 89%; ascent-override: 98%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Serif Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 88%; }
/* nasj.media — case studies (index + client pages). Same four colours, same type. */
.cs-page { background: var(--ice-light); color: var(--merlot); }
.cs-meta { font: 600 11px/1.3 Archivo, "Archivo Fallback", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgb(61 21 25 / .6); margin: 0; }
.cs-eyebrow { font: 600 11px/1 Archivo, "Archivo Fallback", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgb(61 21 25 / .6); margin: 0 0 14px; }
.cs-dark .cs-eyebrow { color: var(--ice); }
.cs-read { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 Archivo, "Archivo Fallback", sans-serif; }
.cs-read svg { width: 16px; height: 16px; transition: transform .2s; }
a:hover .cs-read svg { transform: translateX(4px); }

/* index hero */
.cs-index-hero { padding: 140px 0 40px; }
.cs-index-hero h1 { font: 300 clamp(36px, 5vw, 72px)/1.02 Archivo, "Archivo Fallback", sans-serif; margin: 0 0 14px; letter-spacing: -.01em; }
.cs-index-hero h1 em { font-family: "Instrument Serif", "Serif Fallback", Georgia, serif; font-style: italic; font-weight: 400; color: rgb(61 21 25 / .7); }
.cs-index-hero p { font: 300 18px/1.5 Archivo, "Archivo Fallback", sans-serif; max-width: 56ch; margin: 0; }

/* cards (index + homepage) */
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 120px; }
.cs-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 0; }
.cs-card { display: flex; flex-direction: column; background: #fff; color: var(--merlot); border-radius: 18px; overflow: hidden; text-decoration: none; box-shadow: 0 20px 50px -34px rgb(61 21 25 / .6); transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.cs-card:hover { transform: translateY(-4px); }
.cs-card-media { aspect-ratio: 5 / 4; overflow: hidden; background: rgb(61 21 25 / .08); }
.cs-grid.two .cs-card-media { aspect-ratio: 5 / 4; }
.cs-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.cs-card:hover .cs-card-media img { transform: scale(1.04); }
.cs-card-body { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 26px; flex: 1; }
.cs-card .cs-meta { color: rgb(61 21 25 / .6); }
.cs-card h3 { color: var(--merlot); font: 400 clamp(20px, 1.8vw, 24px)/1.2 Archivo, "Archivo Fallback", sans-serif; margin: 0; }
.cs-card-dek { font: 400 15px/1.5 Archivo, "Archivo Fallback", sans-serif; color: rgb(61 21 25 / .7) !important; margin: 0; }
.cs-card-stats { list-style: none; margin: 4px 0 6px; padding: 14px 0 0; border-top: 1px solid rgb(61 21 25 / .1); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-card-stats b { display: block; font: 600 22px/1.1 Archivo, "Archivo Fallback", sans-serif; letter-spacing: -.02em; }
.cs-card-stats span { font: 400 12px/1.35 Archivo, "Archivo Fallback", sans-serif; color: rgb(61 21 25 / .6); }
.cs-card .cs-read { margin-top: auto; }

/* client page hero: a band in the client's own dark tone */
.cs-hero { background: var(--merlot); color: var(--ice-light); padding: 132px 0 56px; overflow: hidden; }
.cs-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; min-height: 460px; }
.cs-back { font: 400 14px/1 Archivo, "Archivo Fallback", sans-serif; color: var(--ice-light); text-decoration: none; opacity: .7; display: inline-block; margin-bottom: 28px; }
.cs-back:hover { opacity: 1; }
.cs-hero .cs-meta { color: var(--ice); }
.cs-hero h1 { font: 300 clamp(34px, 4.2vw, 60px)/1.06 Archivo, "Archivo Fallback", sans-serif; letter-spacing: -.015em; margin: 16px 0 20px; max-width: 17ch; }
.cs-dek { font: 300 19px/1.55 Archivo, "Archivo Fallback", sans-serif; margin: 0; max-width: 50ch; color: rgb(215 228 238 / .82); }
.cs-fan { position: relative; height: 460px; }
.cs-fan figure { position: absolute; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .6); background: rgb(255 255 255 / .06); }
.cs-fan img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-fan-0 { width: 46%; aspect-ratio: 4 / 5; left: 0; top: 40px; transform: rotate(-6deg); }
.cs-fan-1 { width: 50%; aspect-ratio: 4 / 5; left: 25%; top: 0; z-index: 2; transform: rotate(1deg); }
.cs-fan-2 { width: 46%; aspect-ratio: 4 / 5; right: 0; top: 56px; transform: rotate(7deg); }
.cs-stats { list-style: none; margin: 56px auto 0; padding-top: 28px; border-top: 1px solid rgb(215 228 238 / .16); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cs-stats li { display: flex; flex-direction: column; gap: 8px; }
.cs-stats b { font: 300 clamp(30px, 3.4vw, 50px)/1 Archivo, "Archivo Fallback", sans-serif; letter-spacing: -.03em; color: #fff; }
.cs-stats span { font: 400 14px/1.4 Archivo, "Archivo Fallback", sans-serif; color: rgb(215 228 238 / .7); max-width: 24ch; }
.cs-note { font: 400 12.5px/1.5 Archivo, "Archivo Fallback", sans-serif; color: rgb(61 21 25 / .55); margin: 14px 0 0; }
.container.cs-note { margin-left: auto; margin-right: auto; }   /* a note that is also a .container keeps the page column (was drifting left) */
.cs-hero .cs-note { color: rgb(215 228 238 / .5); margin-top: 18px; }

/* sections */
.cs-section { padding: 96px 0; border-top: 1px solid rgb(61 21 25 / .1); }
.cs-section h2 { font: 300 clamp(28px, 3vw, 42px)/1.15 Archivo, "Archivo Fallback", sans-serif; max-width: 26ch; margin: 0; }
.cs-dark { background: var(--merlot); color: var(--ice-light); border-top: 0; }
.cs-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.cs-prose p { font: 300 18px/1.65 Archivo, "Archivo Fallback", sans-serif; margin: 0 0 18px; }
.cs-steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cs-steps li { background: rgb(215 228 238 / .06); border: 1px solid rgb(148 177 200 / .18); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cs-step-n { font: italic 400 34px/1 "Instrument Serif", "Serif Fallback", Georgia, serif; color: var(--ice); }
.cs-steps h3 { font: 400 19px/1.25 Archivo, "Archivo Fallback", sans-serif; margin: 0; }
.cs-steps p { font: 300 15px/1.55 Archivo, "Archivo Fallback", sans-serif; color: rgb(215 228 238 / .78); margin: 0; }
.cs-table-wrap { overflow-x: auto; margin-top: 32px; }
.cs-table { width: 100%; max-width: 720px; border-collapse: collapse; font: 400 17px/1.4 Archivo, "Archivo Fallback", sans-serif; }
.cs-table th { text-align: left; font: 600 11px/1 Archivo, "Archivo Fallback", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgb(61 21 25 / .55); padding: 0 0 12px; }
.cs-table td { padding: 16px 0; border-top: 1px solid rgb(61 21 25 / .12); }
.cs-table td:not(:first-child), .cs-table th:not(:first-child) { text-align: right; }
.cs-work .cs-block { display: block; padding: 40px 0 0; border-top: 0; }
.cs-block-title { font: 400 20px/1.2 Archivo, "Archivo Fallback", sans-serif; margin: 0 0 16px; }
.cs-work h2 { margin-bottom: 8px; }
.cs-next { display: flex; flex-direction: column; gap: 12px; background: var(--merlot); color: var(--ice-light); border-radius: 18px; padding: 28px; text-decoration: none; }
.cs-next .cs-meta { color: var(--ice); }
.cs-next b { font: 300 24px/1.25 Archivo, "Archivo Fallback", sans-serif; }

/* CTA at the bottom of every case study page */
.cs-cta { padding: 96px 0; }

@media (max-width: 1023px) {
  .cs-grid { grid-template-columns: 1fr 1fr; }
  .cs-hero-grid, .cs-two { grid-template-columns: 1fr; gap: 36px; }
  .cs-fan { height: 380px; max-width: 520px; }
  .cs-stats { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .cs-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cs-grid, .cs-grid.two { grid-template-columns: 1fr; }
  .cs-steps { grid-template-columns: 1fr; }
  .cs-hero { padding-top: 104px; }
  .cs-fan { height: 300px; }
  .cs-section { padding: 64px 0; }
}

.cs-bridge { font: 300 clamp(22px, 2.2vw, 30px)/1.35 Archivo, "Archivo Fallback", sans-serif; margin: 0; max-width: 34ch; }

/* what we did: alternating rows, the work beside the words */
.cs-did { background: var(--ice-light); }
.cs-rows { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 72px; }
.cs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.cs-row.flip .cs-row-media { order: 2; }
.cs-row-media { margin: 0; aspect-ratio: 4 / 5; max-height: 560px; border-radius: 20px; overflow: hidden; background: rgb(61 21 25 / .08); box-shadow: 0 30px 60px -40px rgb(61 21 25 / .6); }
.cs-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-row-copy { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.cs-row.flip .cs-row-copy { justify-self: end; }
.cs-row-copy .cs-step-n { color: rgb(61 21 25 / .45); font-size: 44px; }
.cs-row-copy h3 { font: 300 clamp(26px, 2.6vw, 36px)/1.15 Archivo, "Archivo Fallback", sans-serif; margin: 0; }
.cs-row-copy p { font: 300 18px/1.65 Archivo, "Archivo Fallback", sans-serif; margin: 0; color: rgb(61 21 25 / .8); }
.cs-work-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; }
.cs-all { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 Archivo, "Archivo Fallback", sans-serif; color: var(--merlot); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.cs-all svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .cs-row { grid-template-columns: 1fr; gap: 24px; }
  .cs-row.flip .cs-row-media { order: 0; }
  .cs-row.flip .cs-row-copy { justify-self: start; }
  .cs-rows { gap: 56px; }
}

/* homepage cards: eyebrow, title, stats and link only */
#cs-home .cs-card-dek { display: none; }

.cs-card h3, .cs-hero h1, .cs-section h2 { text-wrap: balance; }
/* results table + its source note share one 720px grid; note sits on the last row divider, left edge = first column */
.cs-result { max-width: 720px; }
.cs-result .cs-table { max-width: none; }
.cs-table-note { margin: 0; padding: 14px 0 0; border-top: 1px solid rgb(61 21 25 / .12); font-size: 12.5px; line-height: 1.6; text-align: left; }
.cs-result .cs-table-note { max-width: none; width: 100%; box-sizing: border-box; }
@media (max-width: 600px) {
  /* fits the screen, no sideways scroll (Aman 2026-09-15): header labels wrap, figures stay on one line */
  .cs-table { font-size: 12.5px; min-width: 0; table-layout: auto; }
  .cs-table th { font-size: 9px; letter-spacing: .04em; line-height: 1.25; white-space: normal; vertical-align: bottom; padding-bottom: 10px; }
  .cs-table td { padding: 13px 0; white-space: nowrap; }
  .cs-table td:not(:first-child), .cs-table th:not(:first-child) { padding-left: 8px; }
  .cs-table-wrap { -webkit-overflow-scrolling: touch; }
}
.cs-row-note { display: block; margin-top: 3px; font: 400 12px/1.3 Archivo, "Archivo Fallback", sans-serif; color: rgb(61 21 25 / .55); }
.cs-hero h1 { text-wrap: balance; }
.cs-calc { font: 400 12px/1.5 Archivo, "Archivo Fallback", sans-serif; color: rgb(215 228 238 / .5); margin: 14px 0 0; max-width: 60ch; }
.cs-stats:has(li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cs-stats:has(li:nth-child(5)) b { font-size: clamp(28px, 2.9vw, 44px); }
@media (max-width: 900px) { .cs-stats:has(li:nth-child(5)) { grid-template-columns: 1fr 1fr; } .cs-stats li:nth-child(5):last-child { grid-column: 1 / -1; } }