/* Mesha case study. Shared pieces: case-study.css, case-contact.css.
   A dark page in Mesha's forest green and acid lime, with mono labels (the brand's
   Space Mono is not self-hosted, so JetBrains Mono stands in). The device switcher and
   its mock website live in case-mesha-2.css. */

:root {
  --accent: #c8f031;
  --mh-forest: #0f251f;
  --mh-night: #0a1b16;
  --mh-lime: #c8f031;
  --mh-yellow: #f7d84a;
  --mh-mono: 'JetBrains Mono', 'Space Mono', ui-monospace, 'SFMono-Regular', menlo, consolas, monospace;
  --cs-ink: #0f251f;
  --cs-muted: #4b5a55;
  --cs-faint: #7a8781;
  --cs-line: rgb(15 37 31 / 12%);
  --cs-bg: var(--mh-night);
  --cs-dark: #0a1b16;
  --cs-dot-radius: 0;
  --cs-dot-dark: #c8f031;
  --cf-dots: rgb(15 37 31 / 9%);
  --cf-glow: rgb(200 240 49 / 20%);
  --cf-btn: #0f251f;
  --cf-btn-icon: #c8f031;
  --cf-btn-icon-fg: #0f251f;
  --cf-sent: #0f251f;
  --cf-sent-fg: #c8f031;
}

/* every Mesha section is dark; the shared tail keeps its own colours */
.mh-hero, .mh-brief, .mh-fix, .mh-neon, .mh-screens, .mh-system, .mh-board, .mh-out {
  --cs-muted: rgb(255 255 255 / 68%);
  --cs-faint: rgb(255 255 255 / 50%);
  --cs-line: rgb(255 255 255 / 12%);
  color: var(--white);
}
a:hover { color: var(--accent); }
.mh-lime { color: var(--mh-lime); }
.mh-label { margin: 0; font-family: var(--mh-mono); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--mh-lime); }

/* ---------- hero: neon dashboard left, copy right ---------- */
.mh-hero { position: relative; overflow: hidden; padding: clamp(64px, 6vw, 104px) var(--gutter); background: radial-gradient(60% 80% at 22% 55%, rgb(200 240 49 / 14%), transparent 70%), linear-gradient(180deg, #071713, var(--mh-forest)); }
.mh-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 64px; align-items: center; }
.mh-hero__art { margin: 0 0 0 calc(var(--gutter) * -1); }
.mh-hero__art img { display: block; width: 100%; height: auto; mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent), linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent); mask-composite: intersect; }
.mh-hero__copy { display: grid; justify-items: start; gap: 24px; }
.mh-tag { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgb(200 240 49 / 10%); box-shadow: inset 0 0 0 1px rgb(200 240 49 / 30%); font-family: var(--mh-mono); font-size: 13px; color: var(--mh-lime); }
.mh-tag i { font-style: normal; opacity: .5; }
.mh-tag__mark { width: 20px; height: 20px; border-radius: 50%; background: var(--mh-lime); box-shadow: 0 0 18px rgb(200 240 49 / 70%); }
.mh-hero__title { margin: 0; font-weight: 600; font-size: clamp(36px, 3.6vw, 60px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.mh-hero__lead { max-width: 500px; margin: 0; font-size: 17px; line-height: 1.65; color: rgb(255 255 255 / 74%); }
.mh-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 100%; margin: 8px 0 0; border-top: 1px solid rgb(255 255 255 / 14%); }
.mh-spec > div { padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / 14%); }
.mh-spec > div:nth-child(odd) { padding-right: 16px; }
.mh-spec dt { font-family: var(--mh-mono); font-size: 11.5px; letter-spacing: .04em; color: rgb(200 240 49 / 80%); }
.mh-spec dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; }

/* ---------- brief + terminal readout ---------- */
.mh-brief { background: var(--mh-forest); }
.mh-brief__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 48px 64px; align-items: start; }
.mh-brief__body p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: rgb(255 255 255 / 74%); }
.mh-brief__body p:first-child { font-size: 19px; color: var(--white); }
.mh-readout { margin: 0; padding: 22px 24px; border-radius: 14px; background: #071713; box-shadow: inset 0 0 0 1px rgb(200 240 49 / 22%); font-family: var(--mh-mono); font-size: 14px; line-height: 2; color: rgb(255 255 255 / 60%); white-space: pre; overflow-x: auto; }
.mh-readout span { color: rgb(200 240 49 / 70%); }
.mh-readout b { font-weight: 600; color: var(--mh-lime); }

/* ---------- challenge: was / now cards ---------- */
.mh-fix { background: linear-gradient(180deg, var(--mh-forest), var(--mh-night)); }
.mh-fix__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 64px 0 0; padding: 0; list-style: none; }
.mh-fix__list li { display: grid; align-content: start; gap: 10px; padding: 28px 26px; border-radius: 20px; background: rgb(255 255 255 / 4%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); }
.mh-fix__list h3 { margin: 0 0 2px; font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.mh-fix__list p { margin: 0; font-size: 15px; line-height: 1.6; color: rgb(255 255 255 / 66%); }
.mh-fix__list p:last-child { color: var(--white); }
.mh-fix__list .mh-fix__was, .mh-fix__list .mh-fix__now { font-family: var(--mh-mono); font-size: 12px; letter-spacing: .06em; }
.mh-fix__list .mh-fix__was { color: rgb(255 255 255 / 45%); text-decoration: line-through; }
.mh-fix__list .mh-fix__now { margin-top: 12px; padding-top: 16px; border-top: 1px dashed rgb(200 240 49 / 35%); color: var(--mh-lime); }

/* ---------- real screens ---------- */
.mh-screens { background: var(--mh-night); }
.mh-screens .cs-inner { display: grid; gap: 24px; }
.mh-shot { position: relative; margin: 0; border-radius: 24px; overflow: hidden; background: var(--mh-forest); }
.mh-shot img { display: block; width: 100%; height: auto; }
.mh-shot figcaption { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; background: rgb(7 23 19 / 80%); backdrop-filter: blur(8px); font-size: 14px; }
.mh-shot figcaption span { font-family: var(--mh-mono); font-size: 12px; color: var(--mh-lime); }

/* ---------- type & colour: a proportional colour bar ---------- */
.mh-system { background: #071713; }
.mh-system__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 96px; align-items: center; }
.mh-system__kit { display: grid; gap: 20px; }
.mh-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mh-fonts li { display: grid; gap: 6px; padding: 20px 22px; border-radius: 16px; background: rgb(255 255 255 / 5%); font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; }
.mh-fonts li:first-child { font-family: var(--mh-mono); font-weight: 500; }
.mh-fonts span, .mh-bar span { font-family: var(--mh-mono); font-size: 11.5px; font-weight: 500; color: rgb(255 255 255 / 55%); }
.mh-bar { display: flex; min-height: 190px; margin: 0; padding: 0; border-radius: 16px; overflow: hidden; list-style: none; outline: 1px solid rgb(255 255 255 / 18%); outline-offset: -1px; }
.mh-bar li { display: flex; flex: var(--f) 1 0; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; padding: 16px; background: var(--c); font-family: var(--mh-mono); font-size: 12.5px; color: var(--t, var(--white)); }
.mh-bar li span { color: inherit; opacity: .75; }

/* ---------- billboard brand moment (full bleed) ---------- */
.mh-board { position: relative; display: flex; align-items: flex-end; min-height: clamp(560px, 64vw, 940px); padding: 0 var(--gutter); overflow: hidden; background: #0e1a24; }
.mh-board::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(7 23 19 / 70%) 0%, transparent 45%), linear-gradient(0deg, rgb(7 23 19 / 92%) 0%, rgb(7 23 19 / 35%) 30%, transparent 55%); }
.mh-board__copy { z-index: 1; display: grid; gap: 14px; padding-bottom: clamp(48px, 6vw, 88px); }
.mh-board__copy .cs-h2 { font-size: clamp(40px, 5vw, 84px); }
.mh-board__copy p:last-child { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.6; color: rgb(255 255 255 / 80%); }

/* ---------- results: a checklist in mono ---------- */
.mh-out { background: var(--mh-night); }
.mh-out__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 96px; align-items: start; }
.mh-out__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 14%); }
.mh-out__list li { display: flex; gap: 18px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid rgb(255 255 255 / 14%); font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; letter-spacing: -.01em; }
.mh-out__list span { flex: none; font-family: var(--mh-mono); font-size: 15px; color: var(--mh-lime); }

@media (max-width: 1100px) {
  .mh-brief__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mh-brief__grid > .cs-stack { grid-column: 1 / -1; }
  .mh-fix__list { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .mh-hero__grid, .mh-system__grid, .mh-out__grid { grid-template-columns: 1fr; }
  .mh-hero__grid { gap: 22px; justify-items: start; }
  .mh-hero__copy { display: contents; }
  .mh-hero__art { order: 1; justify-self: stretch; margin: 8px calc(var(--gutter) * -1); }
  .mh-spec { order: 2; }
}
@media (max-width: 720px) {
  .mh-brief__grid { grid-template-columns: 1fr; }
  .mh-spec dd { font-size: 14px; }
  .mh-shot { border-radius: 16px; }
  .mh-shot figcaption { position: static; border-radius: 0; background: var(--mh-forest); font-size: 13px; }
  .mh-bar { min-height: 150px; flex-wrap: wrap; }
  .mh-bar li { flex-basis: 40%; min-height: 90px; }
  .mh-board { min-height: 640px; }
}

/* the client logo (from the site logo set) on a white pill, readable on light and dark heroes */
.mh-brand { display: inline-flex; align-items: center; justify-self: start; margin: 0; padding: 10px 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 6%), 0 10px 24px -14px rgb(0 0 0 / 35%); }
.mh-brand img { display: block; width: auto; height: 30px; }