:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: #8a8a8a;
  --card: #f5f5f5;
  --border: #e7e7e7;
  --radius-card: 1rem;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Micro-interactions & entrance animations
   ========================================================================== */

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes breatheShadow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.08);
  }
  50% {
    box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.18);
  }
}

/* Elements tagged with .reveal start hidden and animate in when observed */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}

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

/* Staggered children within a reveal container */
.reveal.is-visible > .reveal-child {
  animation: fadeUp 0.6s var(--ease-out) both;
}

.reveal.is-visible > .reveal-child:nth-child(1) { animation-delay: 0.05s; }
.reveal.is-visible > .reveal-child:nth-child(2) { animation-delay: 0.12s; }
.reveal.is-visible > .reveal-child:nth-child(3) { animation-delay: 0.19s; }
.reveal.is-visible > .reveal-child:nth-child(4) { animation-delay: 0.26s; }
.reveal.is-visible > .reveal-child:nth-child(5) { animation-delay: 0.33s; }
.reveal.is-visible > .reveal-child:nth-child(6) { animation-delay: 0.40s; }

/* Hero entrance (runs immediately on load) */
.hero > * {
  animation: fadeUp 0.75s var(--ease-out) both;
}

.hero .avatar { animation-delay: 0s; }
.hero .eyebrow { animation-delay: 0.08s; }
.hero .hero-title { animation-delay: 0.16s; }
.hero .languages { animation-delay: 0.26s; }
.hero .hero-cta { animation-delay: 0.34s; }

/* Case page entrance */
.case-page > .back-link,
.case-page > .case-title,
.case-page > .case-subtitle,
.case-page > .case-meta,
.case-page > .case-hero {
  animation: fadeUp 0.65s var(--ease-out) both;
}
.case-page > .back-link { animation-delay: 0s; }
.case-page > .case-title { animation-delay: 0.06s; }
.case-page > .case-subtitle { animation-delay: 0.14s; }
.case-page > .case-meta { animation-delay: 0.22s; }
.case-page > .case-hero { animation-delay: 0.3s; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out),
    background-color 0.3s var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(255, 255, 255, 0.92);
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand {
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.nav-link {
  font-size: 0.875rem;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  transition: opacity 0.2s var(--ease-out);
}

.nav-link:hover {
  opacity: 0.6;
}

.nav-link:hover .arrow {
  transform: translate(2px, -2px);
}

.nav-link .arrow {
  font-size: 0.75rem;
  opacity: 0.7;
  transition: transform 0.25s var(--ease-out);
}

.lang-pill {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b6b6b;
  transition: background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out);
}

.lang-pill:hover:not(.is-active) {
  color: #000;
  background: #f2f2f2;
}

.lang-pill.is-active {
  background: #000;
  color: #fff;
}

/* Main container */
.page {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* Hero */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  background: #eee;
}

.eyebrow {
  margin: 0.75rem 0 1.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.hero-title {
  margin: 0;
  font-size: clamp(1.75rem, 3.8vw, 3rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.025em;
  max-width: 50rem;
}

.languages {
  margin: 1.25rem 0 1.5rem;
  font-size: 0.875rem;
  color: var(--fg);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.languages .muted {
  color: var(--muted);
}

.languages .dot {
  color: var(--muted);
}

.hero-cta {
  display: inline-flex;
  gap: 0.625rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out),
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.35);
}

.btn:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

.btn-primary {
  background: #000;
  color: #fff;
}

.btn-primary:hover {
  background: #1a1a1a;
}

.btn-outline {
  background: transparent;
  color: #000;
  border-color: var(--border);
}

.btn-outline:hover {
  background: #fafafa;
  border-color: #d0d0d0;
}

/* Projects */
/* ==========================================================================
   Project cards — 2-column grid of image-dominant cards with caption
   overlay at bottom-left and a tag line below. Inspired by innarenard.com.
   ========================================================================== */

.projects-intro {
  text-align: center;
  margin: 4.5rem 0 0;
}

.projects-intro .section-title {
  margin: 0.25rem 0 2rem;
}

.projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1.25rem;
  margin-top: 0.5rem;
}

.project-card {
  display: flex;
  flex-direction: column;
}

.project-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.project-card-body {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  transition: transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}

.project-card-link:hover .project-card-body {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.22);
}

.project-card-art {
  display: block;
  /* Cap height so portrait device shots never reach the caption row.
     Width auto keeps the aspect ratio. */
  max-height: 92%;
  max-width: 70%;
  width: auto;
  height: auto;
  transition: transform 0.8s var(--ease-out);
  will-change: transform;
}

.project-card-link:hover .project-card-art {
  transform: scale(1.03);
}

/* Title under the card image */
.project-card-title {
  margin: 0.95rem 0.25rem 0.2rem;
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg);
}

/* Outcome line under the title — leads with what the project achieved. */
.project-card-outcome {
  margin: 0 0.25rem 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fg);
}

/* Tag line below the title */
.project-card-tags {
  margin: 0;
  padding: 0 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Brand variants ---------------------------------------------------------- */

/* Per-card pastel surfaces. Each card gets its own soft tint so the four
   read as a coordinated set rather than a single block. */

/* CLM Platform — peach (RAKBANK red, dialled all the way down). */
.project-card-body--clm {
  background: linear-gradient(135deg, #fbe5d8 0%, #f5cfbb 100%);
}

/* Customer Risk Assessment — warm sand (sibling tone to CLM, softer
   yellow lean so the two RAKBANK cards aren't identical). */
.project-card-body--cram {
  background: linear-gradient(135deg, #f6ead4 0%, #ecd9b8 100%);
}

/* Balady+ — soft pastel mint, a muted echo of the map UI's teal accents. */
.project-card-body--balady {
  background: linear-gradient(135deg, #c8efe9 0%, #a6e3db 100%);
}

/* Kafu — soft pastel lime / yellow-green echoing the brand */
.project-card-body--kafu {
  background: linear-gradient(135deg, #d8f1c0 0%, #ebf2b4 100%);
}

/* Placeholder block used inside .mockup when no image is ready yet */
.mockup-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  padding: 3rem 1.5rem;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.03) 0,
    rgba(0, 0, 0, 0.03) 8px,
    transparent 8px,
    transparent 16px
  );
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Screenshot variant — UI screenshot (e.g. CLM dashboard) with rounded
   corners + shadow so it reads as a tile floating on the card. */
.project-card-art--screenshot {
  max-width: 90%;
  max-height: 80%;
  width: auto;
  height: auto;
  border-radius: 0.625rem;
  box-shadow:
    0 18px 40px -16px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Device mockup variant — image already includes a device bezel (iPad,
   browser chrome, etc.). drop-shadow follows the silhouette so
   transparent corners aren't squared off. */
.project-card-art--device {
  max-width: 92%;
  max-height: 88%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.18));
}

/* Edge-to-edge variant — image fills the card body, cropping as needed. */
.project-card-body .project-card-art--fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: 25% center;
}

/* "Under NDA" badge — dark pill on the light card surface. */
.nda-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: rgba(20, 20, 20, 0.9);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
}

.nda-badge svg {
  flex-shrink: 0;
}

/* Case page — interactive prototype embed */
.prototype-frame {
  margin: 1.5rem 0 2rem;
  background: #0e0a14;
  border-radius: 1.5rem;
  padding: 1.25rem 1rem 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.prototype-frame-caption {
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
  font-weight: 500;
}

.prototype-frame iframe {
  width: 100%;
  max-width: 440px;
  height: 880px;
  border: 0;
  background: #0e0a14;
  display: block;
}

/* Divider */
.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 5rem 0 4rem;
}

/* Expertise */
.expertise {
  text-align: center;
  margin-top: 5rem;
}

.section-title {
  margin: 0.25rem 0 2.5rem;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: left;
}

.exp-card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.35s var(--ease-out),
    background-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}

.exp-card:hover {
  transform: translateY(-3px);
  background: #f0f0f0;
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.25);
}

.exp-card .exp-icon {
  transition: transform 0.35s var(--ease-out);
}

.exp-card:hover .exp-icon {
  transform: scale(1.08) rotate(-3deg);
}

.exp-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--fg);
}

.exp-icon svg {
  width: 100%;
  height: 100%;
}

.exp-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.exp-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 2.5rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.footer-link {
  font-size: 0.8125rem;
  color: var(--muted);
  position: relative;
  transition: color 0.2s var(--ease-out);
}

.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}

.footer-link:hover {
  color: var(--fg);
}

.footer-link:hover::after {
  transform: scaleX(1);
}

.copy {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ==========================================================================
   Case Study Pages
   ========================================================================== */

.case-page {
  max-width: 56rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 3rem;
  transition: color 0.2s var(--ease-out), gap 0.25s var(--ease-out);
}

.back-link::before {
  content: "←";
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}

.back-link:hover {
  color: var(--fg);
  gap: 0.55rem;
}

.back-link:hover::before {
  transform: translateX(-3px);
}

.case-title {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.case-subtitle {
  margin: 0 0 2.5rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted);
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  margin: 0 0 3rem;
}

.case-meta dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 0.375rem;
}

.case-meta dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

.case-hero {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 1.5rem;
  overflow: hidden;
  margin: 0 0 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-hero--rakbank {
  background: #e4002b;
}

.case-hero--rakbank img {
  width: 40%;
  max-width: 360px;
  height: auto;
}

.case-hero--balady {
  background: #003946;
}

.case-hero--balady img {
  width: 220px;
  height: 220px;
  border-radius: 48px;
}

.case-section {
  margin: 0 0 4rem;
}

.section-h {
  margin: 0 0 1.25rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.section-lead {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg);
}

.section-lead--muted {
  color: var(--muted);
}

.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 3rem 0;
}

/* Numbered list rows */
.numbered-list {
  display: flex;
  flex-direction: column;
}

.numbered-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}

.numbered-row:last-child {
  border-bottom: 0;
}

.numbered-row .num {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1aa856;
  padding-top: 0.15rem;
}

.numbered-list--plain .numbered-row {
  grid-template-columns: 1fr;
}

.numbered-list--plain .numbered-row p {
  max-width: none;
}

.numbered-row h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.numbered-row p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 36rem;
}

/* 3-col user / feature cards */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.info-card {
  background: var(--card);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-card .icon-chip {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef3fe;
  color: #2962ff;
}

.info-card .icon-chip--amber {
  background: #fff2df;
  color: #d97706;
}

.info-card .icon-chip--green {
  background: #e4f6e8;
  color: #16a34a;
}

.info-card .icon-chip--red {
  background: transparent;
  color: #dc2626;
}

.info-card .icon-chip svg {
  width: 20px;
  height: 20px;
}

.info-card h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.info-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Quote */
.case-quote {
  border-left: 2px solid var(--border);
  padding: 0.125rem 0 0.125rem 1.25rem;
  margin: 1.25rem 0;
}

.case-quote p {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--muted);
  font-style: italic;
}

.case-quote cite {
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Step cards */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.step-card {
  background: var(--card);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
}

.step-card .step-num {
  font-size: 0.75rem;
  font-weight: 600;
  color: #e4002b;
  margin-bottom: 0.5rem;
  display: block;
}

.step-card h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.step-card p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Mockup frame */
.mockup {
  background: var(--card);
  border-radius: 1rem;
  padding: 1rem;
  margin: 1.5rem 0 2rem;
}

/* Phone-sized variant — the frame spans the full case-page width,
   but the screenshot/placeholder inside is capped to a phone size and
   centred so portrait shots don't blow up. */
.mockup--phone img,
.mockup--phone video,
.mockup--phone .mockup-placeholder {
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.mockup .mockup-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem 0.75rem;
}

.mockup .mockup-dots {
  display: inline-flex;
  gap: 0.375rem;
}

.mockup .mockup-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #d4d4d4;
}

.mockup .mockup-caption {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-left: 0.5rem;
}

.mockup img,
.mockup video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
  background: #fff;
}

.case-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-hero--video {
  aspect-ratio: 16 / 10;
  padding: 0;
  overflow: hidden;
}

/* Feature/bullet list with arrow */
.feature-list {
  display: flex;
  flex-direction: column;
}

.feature-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.feature-row:last-child {
  border-bottom: 0;
}

.feature-row .arrow-cell {
  color: var(--muted);
  padding-top: 0.2rem;
}

.feature-list--plain .feature-row {
  grid-template-columns: 1fr;
}

.feature-row h5 {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.feature-row p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 40rem;
}

/* Before/after or considered/built duet */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

.ba-block {
  border-radius: 1rem;
  padding: 1.5rem;
}

.ba-block--plain {
  background: var(--card, #f5f5f5);
  border: 1px solid var(--border);
}

.ba-block h5 {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #000;
}

.ba-block p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #333;
}

.ba-block ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #2a2a2a;
}

.ba-block ul li + li {
  margin-top: 0.35rem;
}

.ba-block .ba-figure {
  margin: 0 0 1rem;
}

.ba-block .ba-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.cram-board-figure {
  margin: 0;
}

.cram-board-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid var(--border);
}

/* Impact metrics */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.metric {
  background: var(--card);
  border-radius: 1rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
}

.metric .metric-value {
  display: block;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.metric .metric-label {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Figure placeholder — used on case pages when the spec describes an image
   that hasn't been produced yet. Reads as a deliberate wireframe slot,
   not a broken image. */
.figure-placeholder {
  margin: 2rem 0;
  border: 1px dashed var(--border);
  border-radius: 0.875rem;
  background: var(--card);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.figure-placeholder .fp-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.figure-placeholder .fp-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  max-width: 44rem;
}

.figure-placeholder--tall {
  padding: 3.25rem 1.5rem;
}

/* Status pill — used to label decisions (PICKED / KILLED) on hypothesis or
   exploration cards. */
.status-pill {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

.status-pill--picked {
  background: #e4f4e9;
  color: #1f6b34;
}

.status-pill--killed {
  background: #fce8e8;
  color: #8a2a2a;
}

/* Decision card — used for hypotheses and exploration directions. */
.decision-card {
  background: var(--card);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.decision-card h4 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.decision-card p {
  margin: 0 0 0.65rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #2a2a2a;
}

.decision-card p:last-child {
  margin-bottom: 0;
}

.decision-card .dc-label {
  font-weight: 600;
  color: #111;
}

/* Mobile */
@media (max-width: 768px) {
  .case-page {
    padding: 1rem 1rem 3rem;
  }

  .cards-3,
  .ba-grid,
  .steps,
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .numbered-row {
    grid-template-columns: 40px 1fr;
    gap: 1rem;
  }

  .numbered-list--plain .numbered-row {
    grid-template-columns: 1fr;
  }

  .case-hero {
    aspect-ratio: 4 / 3;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .site-header {
    padding: 0.875rem 1rem;
  }

  .nav-left,
  .nav-right {
    gap: 0.75rem;
  }

  .page {
    padding: 1.5rem 1rem 2rem;
  }

  .projects {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Deterministic mobile layout — fixed height instead of aspect-ratio.
     iOS Safari has subtle bugs combining aspect-ratio with flex children
     that use percentage-based max-height, which can cause images to
     appear off-centered. */
  .project-card-body {
    aspect-ratio: auto;
    height: 280px;
    padding: 1rem;
  }

  .project-card-art {
    max-width: 88%;
    max-height: 88%;
  }

  .project-card-art--screenshot {
    max-width: 92%;
    max-height: 86%;
  }

  .project-card-art--device {
    max-width: 94%;
    max-height: 90%;
  }

  .project-card-title {
    font-size: 1.125rem;
    margin-top: 0.75rem;
  }

  .expertise-grid {
    grid-template-columns: 1fr;
  }

  .divider {
    margin: 3rem 0 2.5rem;
  }
}

/* ==========================================================================
   Customer Journey Map diagram — used in the Kafu case study
   ========================================================================== */

.cjm-diagram {
  margin: 1.5rem 0 0;
  font-family: var(--font-sans), "Inter", sans-serif;
  color: var(--fg);
}

.cjm-chart-wrap {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: stretch;
  margin: 1rem 0 0.5rem;
}

.cjm-row-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding-top: 2px;
}

.cjm-chart {
  position: relative;
  height: 180px;
}
.cjm-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cjm-y-axis {
  position: absolute;
  inset: 0 auto 0 -110px;
  width: 90px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 12px;
  color: var(--muted);
}
.cjm-y-axis li { margin: 0; }

.cjm-row {
  display: grid;
  grid-template-columns: 140px repeat(4, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
}

.cjm-stage-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.cjm-stage-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.cjm-cell-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 6px;
  line-height: 1.4;
}
.cjm-cell-body {
  font-size: 13px;
  color: #5f5e5a;
  margin: 0;
  line-height: 1.5;
}

.cjm-opp {
  padding-left: 14px;
  border-left: 2px solid #2FFA80;
}
.cjm-opp-tag {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1aa856;
  font-weight: 600;
  margin: 0 0 10px;
}

@media (max-width: 768px) {
  .cjm-chart-wrap { grid-template-columns: 1fr; }
  .cjm-chart { height: 140px; }
  .cjm-y-axis { position: static; flex-direction: row; gap: 12px; padding: 0 0 8px; width: auto; align-items: flex-start; }
  .cjm-row { grid-template-columns: 1fr; gap: 16px; padding: 16px 0; }
  .cjm-row-label { padding-top: 0; margin-bottom: -8px; }
}

/* ==========================================================================
   Cluster cards — used in the Kafu research section
   ========================================================================== */

.cluster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.cluster-card {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 3.25rem;
  background: var(--card, #f5f5f5);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: border-color 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
}
.cluster-card:hover {
  border-color: #d0d0d0;
  transform: translateY(-2px);
}

.cluster-num {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #1aa856;
}

.cluster-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.cluster-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 720px) {
  .cluster-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Flow steps grid — used in the Kafu Design Process section
   ========================================================================== */

.flow-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.flow-step {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.flow-step-frame {
  aspect-ratio: 720 / 1624;
  background: var(--card, #f5f5f5);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.03) 0,
    rgba(0, 0, 0, 0.03) 8px,
    transparent 8px,
    transparent 16px
  );
}
.flow-step-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.flow-step-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--fg);
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.flow-step-num {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: #1aa856;
  font-weight: 500;
}

@media (max-width: 900px) {
  .flow-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .flow-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Kafu hero figure — the bezeled iPhone screenshot displayed on its own,
   no frame chrome, no striped placeholder behind it. Sized to roughly
   match a flow-step card so it sits in the same visual rhythm. */
.kafu-hero-figure {
  margin: 1.5rem auto 2rem;
  max-width: 16rem;
}
.kafu-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
}


/* ==========================================================================
   Narrative case layout — storytelling card style
   ========================================================================== */

body.n-bg {
  background: #f5f5f7;
  color: #171717;
}

body.n-bg .site-header {
  background: rgba(245, 245, 247, 0.82);
}

body.n-bg .site-header.is-scrolled {
  background: rgba(245, 245, 247, 0.95);
}

.n-page {
  max-width: 74rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
}

.n-page > .back-link {
  margin-bottom: 1.25rem;
}

.n-tagline {
  text-align: center;
  font-size: clamp(1.0625rem, 2vw, 1.5rem);
  font-weight: 600;
  color: #171717;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 1.5rem;
}

/* Vertical stack with consistent gap */
.n-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Base white card — flat, generous radius (and-tanya signature) */
.n-card {
  background: #fff;
  border-radius: 2rem;
  padding: 2.75rem;
}

/* Two-column equal grid */
.n-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* ── Hero card — text left, large screenshot bleeding off the right edge ── */
.n-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 2.75rem 4rem;
  gap: 0;
}

.n-hero-logo {
  height: 36px;
  width: auto;
  display: block;
  margin: 0 auto 1.75rem;
}

.n-hero-title {
  font-size: 2.75rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: #171717;
  margin: 0 0 1rem;
  line-height: 1.1;
}

.n-hero-desc {
  font-size: 1rem;
  color: #555;
  line-height: 1.65;
  margin: 0 0 0.625rem;
  max-width: 34em;
}

.n-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
  margin-top: 2.25rem;
}

.n-hero-tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  background: #f5f5f5;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.3em 0.75em;
}

.n-hero-img {
  padding: 1.5rem;
}

.n-hero-img .n-screen {
  border-radius: 0.75rem;
}

/* Contained screenshot block inside a card — sits below text.
   Padding here is the single source of breathing room around every
   screenshot, so the images themselves stay trimmed tight to content. */
.n-img-block {
  margin-top: 2rem;
  border-radius: 0.875rem;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  background-color: rgb(222, 222, 226);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
}

.n-img-block img,
.n-img-block video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

/* Single phone mockup — centered and height-constrained so a tall, narrow
   screenshot sits on the mat instead of stretching the full card width. */
.n-img-block--phone {
  display: flex;
  justify-content: center;
  /* Center (don't stretch) on the cross axis — iOS Safari otherwise
     stretches the auto-height image past its max-height and the parent's
     overflow:hidden clips the bottom of the mockup. */
  align-items: center;
}
.n-img-block--phone img {
  width: auto;
  max-width: 100%;
  max-height: 620px;
  border-radius: 0;
}

/* Kafu — images sit flush with no grey mat behind them. */
.n-kafu .n-img-block {
  background-color: transparent;
  border: none;
  padding: 0;
}

/* Flush modifier — drop the grey mat for an image that already reads clean.
   Square corners by default: rounding a borderless screenshot just looks
   like a chopped corner against the white card. */
.n-img-block--flush {
  background-color: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
}
.n-img-block--flush img,
.n-img-block--flush video {
  border-radius: 0;
}
/* Opt-in hairline — for a flush screenshot (e.g. a light dashboard) that
   would otherwise blend into the white card. The border defines the edge,
   so here a rounded corner reads cleanly rather than cut. */
.n-img-block--ring {
  border: 1px solid #e6e6e6;
  border-radius: 1rem;
}

/* Two images side by side (stacks on narrow screens). */
.n-img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 2rem;
  /* Stretch both cells to the taller image's height. */
  align-items: stretch;
}
.n-img-pair .n-img-block {
  margin-top: 0;
  border-radius: 1rem;
  /* Grey mat matches the screenshots' own background. A small inset lets
     the images float on it, so the rounded outer corners are pure grey
     (never cutting into the image content) and the shorter image extends
     with grey to equal height. */
  background: #f2f2f2;
  padding: clamp(0.875rem, 2vw, 1.25rem);
}
.n-img-pair .n-img-block img {
  border-radius: 0.5rem;
}
@media (max-width: 700px) {
  .n-img-pair {
    grid-template-columns: 1fr;
  }
}

/* Phone-screen flow grid (e.g. Kafu budgeting steps) — left-aligned,
   4 per row then 3, so each screen reads larger than a single strip. */
.n-flow-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: start;
}
.n-flow-grid img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 760px) {
  .n-flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Filmstrip auto-scroll ── */
.n-film {
  margin-top: 2rem;
  border-radius: 0.875rem;
  overflow: hidden;
  background: #1DBDB4;
  padding: clamp(1.25rem, 3.5vw, 2rem) 0;
  cursor: default;
}

.n-film-track {
  display: flex;
  gap: 1rem;
  padding: 0 clamp(1.25rem, 3.5vw, 2rem);
  width: max-content;
  animation: n-film-scroll 22s linear infinite;
  will-change: transform;
}

.n-film:hover .n-film-track,
.n-film:focus-within .n-film-track {
  animation-play-state: paused;
}

.n-film-track img {
  height: clamp(300px, 36vw, 480px);
  width: auto;
  flex-shrink: 0;
  display: block;
  border-radius: 0.75rem;
}

@keyframes n-film-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 0.5rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .n-film-track {
    animation: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }
  .n-film-track img {
    scroll-snap-align: start;
  }
}

/* ── Section title ── */
.n-title {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 500;
  color: #171717;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 1.25rem;
}

/* ── Body text inside cards ── */
.n-card p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #3a3a3a;
  margin: 0 0 0.875rem;
}

.n-card p:last-child {
  margin-bottom: 0;
}

/* ── Callout bubble ── */
.n-callout {
  background: #f2f2f4;
  border-left: 3px solid #ed1c24;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1.125rem 0;
}

.n-callout p {
  color: #171717 !important;
  margin: 0 !important;
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* ── Middle-dot bullet list ── */
.n-dot-list {
  list-style: none;
  padding: 0;
  margin: 0.875rem 0 0;
}

.n-dot-list li {
  font-size: 1.0625rem;
  color: #3a3a3a;
  line-height: 1.55;
  padding: 0.2rem 0;
}

.n-dot-list li::before {
  content: "·\00a0";
  font-weight: 700;
  color: var(--fg);
}

/* ── Split layout: text left, visual right ── */
.n-split {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 3rem;
  align-items: start;
}

/* ── Alternating text / image rows ── */
.n-lead {
  max-width: none;
}
.n-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.n-row + .n-row {
  margin-top: 2.5rem;
}
/* Reversed row: image on the left, text on the right */
.n-row--rev .n-row-text {
  order: 2;
}
.n-row-h {
  font-size: 1.125rem;
  font-weight: 500;
  color: #171717;
  letter-spacing: -0.01em;
  margin: 0 0 0.875rem;
}
.n-row-text .n-dot-list {
  margin-top: 0;
}
.n-row-vis .n-screen-label {
  margin-top: 0.625rem;
}

/* ── Two screenshots side by side ── */
.n-screen-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* ── Screenshots stacked vertically ── */
.n-screen-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.n-screen-item {
  display: flex;
  flex-direction: column;
}

/* ── Screenshot / screen frame — flat with subtle grey ring ── */
.n-screen {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 1rem;
  overflow: hidden;
  box-sizing: border-box;
}

.n-screen img,
.n-screen video {
  width: 100%;
  height: auto;
  display: block;
}

.n-screen-label {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

/* ── Browser chrome frame (desktop mockup) ── */
.n-browser {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 1rem;
  overflow: hidden;
  box-sizing: border-box;
}

.n-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  background: #f0f0f0;
  border-bottom: 1px solid #ececec;
}

.n-browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.n-browser-dot:nth-child(1) { background: #ff5f57; }
.n-browser-dot:nth-child(2) { background: #febc2e; }
.n-browser-dot:nth-child(3) { background: #28c840; }

.n-browser img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Underline emphasis (RAKBANK red) ── */
.n-highlight {
  text-decoration: underline;
  text-decoration-color: #ed1c24;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* ── Metrics grid ── */
.n-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}

.n-metric-value {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  color: #171717;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.n-metric-label {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ==========================================================================
   Narrative motion system — choreographed scroll reveals
   ========================================================================== */

/* Section container rises as a unit when it enters the viewport */
.n-rise {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  will-change: opacity, transform;
}
.n-rise.in {
  opacity: 1;
  transform: none;
}

/* Individual elements stagger in (transition-delay assigned inline by JS) */
.n-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  will-change: opacity, transform;
}
.n-up.in {
  opacity: 1;
  transform: none;
}

/* Screens get a touch more travel + scale for depth */
.n-screen-item.n-up {
  transform: translateY(26px) scale(0.97);
}
.n-screen-item.n-up.in {
  transform: none;
}

/* Top-of-page fixed elements animate on load */
.n-page > .back-link { animation: fadeUp 0.65s var(--ease-out) both; }
.n-page > .n-tagline { animation: fadeUp 0.65s var(--ease-out) both; animation-delay: 0.08s; }

@media (prefers-reduced-motion: reduce) {
  .n-rise,
  .n-up,
  .n-screen-item.n-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Hero kicker line ── */
.n-hero-kicker {
  font-size: 1rem;
  font-weight: 500;
  color: #555;
  margin: 0;
}

/* ── Hand-drawn green underline (draws itself on reveal) ── */
.n-draw {
  position: relative;
  white-space: nowrap;
}
.n-draw > svg {
  position: absolute;
  left: 0;
  bottom: -0.3em;
  width: 100%;
  height: 0.45em;
  overflow: visible;
  pointer-events: none;
}
.n-draw path {
  fill: none;
  stroke: #ed1c24;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Balady+ brand accent — teal replaces the default red on this case */
.n-balady .n-draw path { stroke: #1DBDB4; }
.n-balady .n-callout { border-left-color: #1DBDB4; }
.n-balady .n-tl-dot { background: #1DBDB4; }

/* Kafu brand accent — vivid fintech green */
.n-kafu .n-draw path { stroke: #15C26B; }
.n-kafu .n-callout { border-left-color: #15C26B; }
.n-kafu .n-tl-dot { background: #15C26B; }

[data-reveal].in .n-draw path {
  animation: nDraw 0.7s var(--ease-out) forwards 0.5s;
}
@keyframes nDraw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .n-draw path { stroke-dashoffset: 0; animation: none; }
}

/* ── Big stat band ── */
.n-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3rem;
  text-align: center;
}
.n-stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 0 1 160px;
}
.n-stat-num {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #171717;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.n-stat-label {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Moment block (full-width pull quote) ── */
.n-moment {
  background: #ececef;
  text-align: center;
  padding: 3.5rem 3rem;
}
.n-moment-quote {
  font-size: clamp(1.375rem, 3vw, 2rem) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em;
  color: #171717 !important;
  max-width: 44rem;
  margin: 0 auto 1rem !important;
}
.n-moment-cite {
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: #6b6b6b !important;
  margin: 0 !important;
}

/* ── Timeline ── */
.n-timeline {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  position: relative;
}
.n-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 12px;
  width: 2px;
  background: #e6e6e6;
}
.n-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
}
.n-tl-item:last-child {
  padding-bottom: 0;
}
.n-tl-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ed1c24;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px #e6e6e6;
  margin-top: 3px;
}
.n-tl-item h4 {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #171717;
}
.n-tl-item p {
  margin: 0 !important;
  font-size: 0.9375rem !important;
  color: #555 !important;
}

/* ── Closing CTA ── */
.n-cta {
  text-align: center;
  padding: 3.5rem 3rem;
}
.n-cta .n-title {
  margin-bottom: 0.75rem;
}
.n-cta p {
  margin-bottom: 1.75rem;
}
.n-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #171717;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-pill);
  transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.n-pill:hover {
  transform: translateY(-2px);
  background: #000;
}

/* ══════════════════════════════════════════════════════════════════
   CLM "Designing for certainty" — narrative components
   ══════════════════════════════════════════════════════════════════ */

/* Small numbered eyebrow above a content section title */
.n-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ed1c24;
  margin: 0 0 0.85rem !important;
}
.n-eyebrow b {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

/* Section divider — minimal: a hairline rule with a small red label and a
   dark title sitting on the page background (no card fill). */
.n-divider {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--border);
  padding: clamp(2rem, 4vw, 2.75rem) 2.75rem clamp(0.5rem, 2vw, 1rem);
}
.n-divider .n-eyebrow {
  color: #ed1c24;
}
.n-divider-title {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: #171717;
  margin: 0;
}
.n-divider-sub {
  margin: 0.75rem 0 0 !important;
  color: #555 !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  max-width: 38rem;
}
@media (max-width: 600px) {
  .n-divider {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Platform architecture — control layer sitting on two systems */
.n-arch {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.n-arch-node {
  border: 1px solid #e6e6e6;
  border-radius: 1rem;
  padding: 1.4rem 1.6rem;
  background: #fafafa;
}
.n-arch-node--primary {
  background: #fff5f5;
  border-color: #f4c4c6;
}
.n-arch-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.n-arch-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
}
.n-arch-name strong {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #171717;
}
.n-arch-name span {
  font-size: 0.8125rem;
  color: var(--muted);
}
.n-arch-node p {
  margin: 0 !important;
  font-size: 0.9375rem !important;
  color: #555 !important;
  line-height: 1.5 !important;
}
.n-arch-rail {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b0b0b8;
}

/* Image placeholder — labelled drop-in target for a future upload */
.n-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-align: center;
  min-height: 230px;
  padding: 2.5rem 1.5rem;
  background: repeating-linear-gradient(45deg, #fff 0 13px, #f6f6f8 13px 26px);
  border: 2px dashed #c7c7d0;
  border-radius: 0.5rem;
  color: #6b6b6b;
}
.n-ph svg {
  width: 32px;
  height: 32px;
  color: #adadb8;
}
.n-ph-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #171717;
  background: #ececef;
  padding: 0.32em 0.72em;
  border-radius: 0.4rem;
}
.n-ph-note {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.45;
  max-width: 32rem;
}

/* Decision — the options we weighed */
.n-options {
  list-style: none;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  counter-reset: opt;
}
.n-options li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 1rem 1.2rem;
  border: 1px solid #e6e6e6;
  border-radius: 0.75rem;
  font-size: 1rem;
  color: #3a3a3a;
  line-height: 1.5;
}
.n-options li::before {
  counter-increment: opt;
  content: counter(opt, upper-alpha);
  font-weight: 700;
  font-size: 0.8125rem;
  color: #ed1c24;
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff5f5;
}
.n-options strong {
  color: #171717;
  font-weight: 600;
}

/* Journey — role label + horizontal step flow */
.n-role {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ed1c24;
  margin: 0 0 0.85rem !important;
}
.n-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.5rem;
}
.n-flow-step {
  flex: 1 1 150px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 0.875rem;
  padding: 1rem 1.1rem;
}
.n-flow-step b {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ed1c24;
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.n-flow-step p {
  margin: 0 !important;
  font-size: 0.9375rem !important;
  color: #3a3a3a !important;
  line-height: 1.45 !important;
}

/* Labelled meta pairs (Who it affected / Why it mattered) */
.n-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.n-meta-item {
  background: #f7f7f8;
  border-radius: 0.875rem;
  padding: 1.25rem 1.5rem;
}
.n-meta-item h4 {
  margin: 0 0 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.n-meta-item p {
  margin: 0 !important;
  font-size: 1rem !important;
  color: #171717 !important;
  line-height: 1.5 !important;
}

@media (max-width: 960px) {
  .n-arch-row,
  .n-meta {
    grid-template-columns: 1fr;
  }
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .n-hero {
    padding: 2.25rem;
  }

  .n-hero-title {
    font-size: 1.875rem;
  }

  .n-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .n-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .n-row + .n-row {
    margin-top: 2rem;
  }

  /* Always show text before its image when stacked */
  .n-row--rev .n-row-text {
    order: 0;
  }

  .n-grid-2 {
    grid-template-columns: 1fr;
  }

  .n-stats {
    gap: 2rem 2.5rem;
  }
}

@media (max-width: 600px) {
  .n-page {
    padding: 1.25rem 1rem 4rem;
  }

  .n-card {
    padding: 1.75rem 1.5rem;
    border-radius: 1.5rem;
  }

  .n-title {
    font-size: clamp(1.25rem, 6vw, 1.625rem);
  }

  .n-screen-pair {
    grid-template-columns: 1fr;
  }

  .n-metrics {
    grid-template-columns: 1fr;
  }

  .n-moment {
    padding: 2.5rem 1.5rem;
  }

  .n-cta {
    padding: 2.5rem 1.5rem;
  }
}

/* ==========================================================================
   Image lightbox — click any case-study image to view it full-size
   ========================================================================== */

/* Affordance: these images are clickable. */
.n-img-block img {
  cursor: zoom-in;
}

.n-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(15, 15, 18, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.n-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.n-lightbox-img {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  cursor: zoom-out;
  transform: scale(0.97);
  transition: transform 0.28s var(--ease-out);
}
.n-lightbox.is-open .n-lightbox-img {
  transform: scale(1);
}

.n-lightbox-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(1rem, env(safe-area-inset-bottom));
  margin: 0 auto;
  max-width: 70ch;
  padding: 0 1.25rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.875rem;
  line-height: 1.4;
  pointer-events: none;
}

.n-lightbox-close {
  position: absolute;
  top: clamp(0.75rem, 2.5vw, 1.5rem);
  right: clamp(0.75rem, 2.5vw, 1.5rem);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.n-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.26);
}
.n-lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.n-lightbox-close svg {
  width: 22px;
  height: 22px;
}

/* Lock background scroll while the lightbox is open. */
body.n-lightbox-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .n-lightbox,
  .n-lightbox-img {
    transition: none;
  }
  .n-lightbox .n-lightbox-img {
    transform: none;
  }
}

/* ==========================================================================
   Mobile hint toast (case pages, narrow viewports only)
   ========================================================================== */

.n-toast {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  background: rgba(20, 20, 20, 0.96);
  color: #fff;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5);
  /* Start hidden below the viewport edge until revealed. */
  opacity: 0;
  transform: translateY(140%);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.n-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.n-toast-text {
  margin: 0;
  flex: 1;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.n-toast-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.n-toast-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.n-toast-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.n-toast-close svg {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .n-toast {
    transition: none;
  }
}