/* Xchainge case study. Shared pieces: case-study.css, case-contact.css.
   Steel and ice glass. Signature: the split-flap FX board in the hero flips pairs and rates
   (illustrative, case-xchainge.js). The product images are small (624-764px), so they sit at
   their own size inside glass frames and are never stretched. Part 2: case-xchainge-2.css. */

:root {
  --accent: #0f5f7a;
  --xc-teal: #0f5f7a;
  --xc-ice: #d7effb;
  --xc-ice-2: #eef7fc;
  --xc-deep: #0b2531;
  --xc-glow: #8fdcf5;
  --xc-up: #5be3b5;
  --xc-down: #ff8a80;
  --xc-mono: 'JetBrains Mono', ui-monospace, monospace;
  --cs-ink: #0b2531;
  --cs-muted: #4d6470;
  --cs-faint: #7f939d;
  --cs-line: rgb(11 37 49 / 12%);
  --cs-bg: #f7fbfd;
  --cs-dark: #0b2531;
  --cs-dot: #0f5f7a;
  --cs-dot-dark: #8fdcf5;
  --cs-dot-radius: 2px;
  --cf-dots: rgb(11 37 49 / 9%);
  --cf-glow: rgb(15 95 122 / 16%);
  --cf-btn: #0b2531;
  --cf-btn-icon: #8fdcf5;
  --cf-btn-icon-fg: #0b2531;
  --cf-sent: #0b2531;
  --cf-sent-fg: #8fdcf5;
}

a:hover { color: var(--accent); }

/* ---------- hero: steel glass, the board beside the portal ---------- */
.xc-hero { position: relative; overflow: clip; padding: 80px var(--gutter) 32px; background: radial-gradient(50% 60% at 85% 10%, rgb(143 220 245 / 22%), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgb(27 79 156 / 35%), transparent 70%), linear-gradient(160deg, #0a2430, #0f3f52 60%, #12566e); color: var(--white); }
.xc-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 96px); pointer-events: none; }
.xc-hero__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 5vw, 96px); align-items: end; }
.xc-hero__copy { display: grid; gap: 22px; }
.xc-tag { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin: 0; padding: 7px 16px 7px 7px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px; background: rgb(255 255 255 / 8%); font-size: 13px; font-weight: 600; color: rgb(255 255 255 / 85%); }
.xc-tag > span:first-child { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--xc-glow); font-size: 13px; font-weight: 800; color: var(--xc-deep); }
.xc-hero__title { font-weight: 600; font-size: clamp(38px, 4.4vw, 70px); line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.xc-hero .cs-accent { color: var(--xc-glow); }
.xc-hero__lead { margin: 0; color: rgb(255 255 255 / 72%); }
.xc-terminal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 784px); gap: clamp(24px, 3vw, 40px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }

/* the split-flap board */
.xc-board { margin: 0; padding: 18px 18px 14px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 18px; background: #071a22; box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), 0 40px 70px -36px rgb(0 0 0 / 70%); }
.xc-board__head { display: flex; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgb(255 255 255 / 8%); font-family: var(--xc-mono); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--xc-glow); }
.xc-board__clock { letter-spacing: .08em; color: rgb(255 255 255 / 70%); font-variant-numeric: tabular-nums; }
.xc-board__rows { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 7px clamp(10px, 1.2vw, 16px); align-items: center; margin: 0; padding: 0; list-style: none; }
.xc-board__labels, .xc-row { display: contents; }
.xc-board__labels span { font-family: var(--xc-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / 40%); }
.xc-board__labels span:last-child { justify-self: end; }
.xc-f { font-family: var(--xc-mono); font-size: clamp(14px, 1.3vw, 20px); font-weight: 600; letter-spacing: .2em; color: #eaf6fb; white-space: nowrap; }
.xc-f.is-split { display: inline-flex; gap: 2px; letter-spacing: 0; }
.xc-c { position: relative; display: inline-grid; place-items: center; width: 1.12em; height: 1.6em; border-radius: 3px; background: linear-gradient(180deg, #15394a 0 50%, #102f3d 50% 100%); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 40%); transform-origin: 50% 50%; }
.xc-c::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgb(0 0 0 / 60%); }
.xc-c.is-flip { animation: xc-flap .11s linear; }
.xc-mv { justify-self: end; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 4px; background: #102f3d; font-size: clamp(11px, .9vw, 13px); }
.xc-mv.is-up { color: var(--xc-up); }
.xc-mv.is-down { color: var(--xc-down); }
.xc-board__note { margin-top: 14px; font-size: 12.5px; color: rgb(255 255 255 / 50%); }
@keyframes xc-flap { 0% { transform: perspective(180px) rotateX(0); } 50% { transform: perspective(180px) rotateX(-80deg); filter: brightness(1.5); } 100% { transform: perspective(180px) rotateX(0); } }

/* glass frames hold the small images at their own size */
.xc-glass { width: fit-content; max-width: 100%; margin: 0; padding: 10px; border: 1px solid rgb(255 255 255 / 24%); border-radius: 22px; background: rgb(255 255 255 / 10%); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 50%); backdrop-filter: blur(10px); }
.xc-glass img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 14px; }
.xc-glass--hero { justify-self: end; }

.xc-meta { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; margin: 80px 0 0; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 16%); }
.xc-meta dt { margin-bottom: 6px; font-family: var(--xc-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgb(143 220 245 / 75%); }
.xc-meta dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--white); }

/* ---------- the brief + project manifest ---------- */
.xc-audit { background: linear-gradient(180deg, var(--xc-ice-2), var(--cs-bg)); }
.xc-manifest { padding: clamp(26px, 3vw, 36px); border-radius: 24px; background: var(--xc-deep); color: var(--white); box-shadow: 0 40px 70px -40px rgb(11 37 49 / 60%); }
.xc-manifest__head { margin: 0 0 8px; font-family: var(--xc-mono); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--xc-glow); }
.xc-manifest dl { margin: 0; }
.xc-manifest dl > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.xc-manifest dt { font-size: 15px; color: rgb(255 255 255 / 72%); }
.xc-manifest dd { display: flex; gap: 4px; margin: 0; }
.xc-tile { position: relative; display: grid; place-items: center; width: 40px; height: 52px; border-radius: 5px; background: linear-gradient(180deg, #15394a 0 50%, #102f3d 50% 100%); font-family: var(--xc-mono); font-size: 26px; font-weight: 600; color: #eaf6fb; }
.xc-tile::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgb(0 0 0 / 60%); }
.xc-manifest__foot { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: rgb(255 255 255 / 62%); }

.xc-out__art { display: block; width: 100%; max-width: 1733px; height: auto; margin-top: 32px; }