/* Our journey to date: the bento page that opens out of pearl 01 (plan: JOURNEY-PLAN.md).
   A 12 × 8 grid, the TASMU logo "Launched 2019" at the centre, twelve milestone cards around it.
   Everything starts hidden; journey.js animates it with GSAP. */
.journey { position: absolute; inset: 0; z-index: 4; visibility: hidden; pointer-events: none; }
.journey.is-open { pointer-events: auto; }
.journey .j-bg {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(60% 55% at 50% 52%, rgba(166, 154, 255, 0.07), transparent 70%),
    linear-gradient(180deg, #08080c 0%, #040406 100%);
}

/* ---------- header: the section's number and title, and the way back ---------- */
.j-head {
  position: absolute; left: calc(var(--fx) + 28 * var(--dpx)); right: calc(var(--fx) + 28 * var(--dpx)); top: var(--fy); height: calc(84 * var(--dpx));
  display: flex; align-items: center; justify-content: space-between; opacity: 0;
}
.j-title { display: flex; align-items: center; gap: calc(18 * var(--dpx)); }
.j-title img { height: calc(44 * var(--dpx)); width: auto; display: block; filter: drop-shadow(0 0 calc(10 * var(--dpx)) rgba(166, 154, 255, 0.45)); }
.j-title .j-no {
  display: inline-flex; align-items: center; gap: calc(10 * var(--dpx));
  font-size: calc(14 * var(--dpx)); font-weight: 500; letter-spacing: 0.2em; color: var(--lilac-pale);
}
.j-title .j-no::before, .j-title .j-no::after { content: ""; width: calc(18 * var(--dpx)); height: 1px; background: rgba(255, 255, 255, 0.55); }
.j-title h2 { margin: 0; font-weight: 400; font-size: calc(28.8 * var(--dpx)); letter-spacing: -0.01em; }
.j-back { /* v0.11: solid glass, no backdrop blur (performance fix 3) */
  min-height: calc(52 * var(--dpx)); padding: 0 calc(22.4 * var(--dpx)); display: inline-flex; align-items: center; gap: 0.6em; cursor: pointer;
  font: 500 calc(16 * var(--dpx)) var(--font); color: var(--ink);
  background: rgba(14, 14, 20, 0.88); border: 1px solid rgba(214, 208, 255, 0.4); border-radius: calc(999 * var(--dpx));
  transition: background 180ms, border-color 180ms, transform 180ms var(--ease-out);
}
.j-back:hover { background: rgba(60, 44, 140, 0.6); border-color: var(--cta-edge); }
.j-back:active { transform: scale(0.97); }

/* ---------- the grid ---------- */
.j-grid {
  position: absolute; left: calc(var(--fx) + 28 * var(--dpx)); right: calc(var(--fx) + 28 * var(--dpx));
  top: calc(var(--fy) + 84 * var(--dpx)); bottom: calc(var(--fy) + 28 * var(--dpx));
  display: grid; gap: calc(12 * var(--dpx));
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  /* v0.4.2 (user: "i want the boxes of teh bento to be less homegenous similar to the apple one some small some
     big"): no ring around a centre; sizes differ card to card. v0.4.3 (user: "15 smart services and 669 should
     not be this big i want the sector impact and number of accelerators to be bigger so world cup ev health
     consultation and 107 startups"): those four are now the large cards; 15 and QAR 669M+ are thin strips. */
  grid-template-areas:
    "H H H A A A A A E E E E"
    "H H H A A A A A E E E E"
    "H H H A A A A A E E E E"
    "S S S A A A A A Q Q Q Q"
    "G G G G P P P P J J J J"
    "G G G G P P P P J J J J"
    "G G G G D D X X J J J J"
    "G G G G D D X X J J J J";
}

.tile {
  position: relative; overflow: hidden; border-radius: calc(22 * var(--dpx)); opacity: 0; visibility: hidden;
  background: #0c0b11; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(214, 208, 255, 0.13), 0 calc(18 * var(--dpx)) calc(40 * var(--dpx)) rgba(2, 1, 10, 0.45);
}
/* a faint edge of light along the top of every card */
.tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 22%);
  mix-blend-mode: screen;
}
.tile .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; will-change: transform; filter: saturate(0.82); }
/* the shade that keeps the copy legible: darkest at the bottom left, where the copy sits */
.tile .shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 5, 8, 0.92) 0%, rgba(5, 5, 8, 0.55) 38%, rgba(5, 5, 8, 0) 70%),
    linear-gradient(to right, rgba(5, 5, 8, 0.55) 0%, rgba(5, 5, 8, 0) 55%);
}
.tile .copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 calc(22 * var(--dpx)) calc(20 * var(--dpx)); }
.tile .kicker { /* v0.11: solid glass, no backdrop blur (performance fix 3) */
  position: absolute; left: calc(22 * var(--dpx)); top: calc(18 * var(--dpx)); z-index: 2; margin: 0;
  font-size: calc(13 * var(--dpx)); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #e4dfff;
  padding: calc(6 * var(--dpx)) calc(12 * var(--dpx)); border-radius: calc(999 * var(--dpx)); background: rgba(8, 8, 12, 0.78); border: 1px solid rgba(214, 208, 255, 0.22);
}
.tile .value {
  display: block; margin: 0; font-weight: 300; letter-spacing: -0.035em; line-height: 0.95;
  font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 2px calc(20 * var(--dpx)) rgba(5, 3, 20, 0.6);
}
.tile .label { margin: calc(8 * var(--dpx)) 0 0; font-size: calc(16 * var(--dpx)); line-height: 1.3; color: #ece9ff; max-width: 34ch; text-wrap: balance; }
.tile .foot { display: flex; flex-wrap: wrap; gap: calc(8 * var(--dpx)); margin: calc(14 * var(--dpx)) 0 0; padding: 0; list-style: none; }
.tile .foot li {
  font-size: calc(14 * var(--dpx)); font-weight: 500; color: #f2efff; padding: calc(6 * var(--dpx)) calc(12 * var(--dpx)); border-radius: calc(999 * var(--dpx));
  background: rgba(166, 154, 255, 0.16); border: 1px solid rgba(214, 208, 255, 0.28);
}

.tile.big .value { font-size: calc(107.52 * var(--dpx)); }
.tile.big .label { font-size: calc(18 * var(--dpx)); }
.tile.wide .value { font-size: calc(88.32 * var(--dpx)); }
.tile .stats { display: flex; gap: calc(40 * var(--dpx)); }
.tile .stat { min-width: 0; }
.tile.wide .label { max-width: 26ch; }
.tile.small .value { font-size: calc(59.52 * var(--dpx)); }
.tile.small .label { font-size: calc(15 * var(--dpx)); margin-top: calc(6 * var(--dpx)); }
.tile.small .copy { padding: 0 calc(18 * var(--dpx)) calc(16 * var(--dpx)); }

/* ---------- the centre: the TASMU logo and Launched 2019 ---------- */
.tile.t-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(214, 208, 255, 0.3), 0 0 calc(60 * var(--dpx)) rgba(120, 100, 255, 0.22), 0 calc(18 * var(--dpx)) calc(40 * var(--dpx)) rgba(2, 1, 10, 0.5); }
.t-hero .hero-bg {
  position: absolute; inset: -6%; z-index: 0; background: url("assets/pearls/journey.webp") center / cover;
  filter: blur(2px) saturate(1.1);
}
.t-hero .hero-shade { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(70% 60% at 50% 42%, rgba(14, 12, 26, 0.3), rgba(5, 5, 8, 0.82) 100%); }
.t-hero > :not(.hero-bg, .hero-shade) { position: relative; z-index: 2; }
/* v0.4.1: the era line is gone and the logo is bigger (the source PNG is 298 px tall, so it stays under that) */
.t-hero .hero-logo { width: auto; height: 54%; max-height: calc(290 * var(--dpx)); display: block;
  filter: drop-shadow(0 0 calc(28 * var(--dpx)) rgba(166, 154, 255, 0.6)); }
/* the padding keeps the room the Launched line used to take in the flow, so the logo and 2019 stay exactly where they were */
.t-hero .since { position: relative; margin: calc(10 * var(--dpx)) 0 0; padding-top: calc(20 * var(--dpx)); display: flex; flex-direction: column; align-items: flex-start; }
.t-hero .since-row { margin: 0; display: flex; align-items: baseline; gap: calc(14 * var(--dpx)); }
/* v0.13: Launched 2017, smaller, above Activated 2019; v0.14 (user, 05/11/2026: "Launched 2017 should be even smaller
   and on the left side - aligned on the left with the activated 2019") */
.t-hero .since-row.is-small { gap: calc(10 * var(--dpx)); line-height: 1;
  /* v0.16 (user, 05/11/2026: "Launched 2017 is still high, i want to align on top with the 2019 that is currently in
     place (it should cover the free space above activated)"): it sits in the space above ACTIVATED, the top of its
     figures level with the top of 2019's */
  position: absolute; left: 0; top: calc(27 * var(--dpx)); z-index: 1; }
.t-hero .since-row.is-small span { font-size: calc(13 * var(--dpx)); }
.t-hero .since-row.is-small strong { font-size: calc(28 * var(--dpx)); }
.t-hero .since span { font-size: calc(24.96 * var(--dpx)); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lilac-pale); }
.t-hero .since strong { font-size: calc(84.48 * var(--dpx)); font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- the card kinds (v0.4.1): no two neighbours share a finish ---------- */
.tile .art { position: absolute; z-index: 1; pointer-events: none; }

/* light: a pale lilac card with a dark gradient number (the one light card on the page): the 15 smart services */
.tile.k-light { background: linear-gradient(150deg, #f6f3ff 0%, #e2dcff 55%, #cfc6ff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 calc(18 * var(--dpx)) calc(40 * var(--dpx)) rgba(2, 1, 10, 0.45); }
.k-light .glow { width: 70%; aspect-ratio: 1; right: -14%; top: -60%; border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 125, 255, 0.6), rgba(143, 125, 255, 0) 68%); }
.k-light .value { background: linear-gradient(120deg, #2a1a7a 10%, #6d55f0 90%); -webkit-background-clip: text; background-clip: text;
  color: transparent; text-shadow: none; font-weight: 500; }
.k-light .label { color: #2c2160; font-weight: 500; font-size: calc(19 * var(--dpx)); }
/* strips (v0.4.3): one row tall, the number and its line side by side */
.tile.strip .copy { top: 0; padding: 0 calc(22 * var(--dpx)); display: flex; align-items: center; }
.tile.strip .stat { display: flex; align-items: center; gap: calc(18 * var(--dpx)); }
.tile.strip .value { font-size: calc(65.28 * var(--dpx)); flex: none; }
.tile.strip .label { margin: 0; font-size: calc(16 * var(--dpx)); max-width: 24ch; }
.k-light .lights { right: calc(56 * var(--dpx)); top: 50%; width: calc(340 * var(--dpx)); height: auto; transform: translateY(-50%); overflow: visible; }
.tile.strip .lights { display: none; }
.k-light .lights circle { fill: #6d55f0; filter: drop-shadow(0 0 calc(6 * var(--dpx)) rgba(109, 85, 240, 0.55)); }
.k-light .lights circle:nth-child(odd) { fill: #8f7dff; }

/* gold: the startups' sales, on champagne gold with a sheen that passes every few seconds */
.tile.k-gold { background: linear-gradient(145deg, #f6e3b4 0%, #e3c07c 45%, #b98a3e 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 205, 0.55), 0 calc(18 * var(--dpx)) calc(40 * var(--dpx)) rgba(2, 1, 10, 0.45); }
.k-gold .shine { top: -20%; bottom: -20%; left: 0; width: 38%; transform: skewX(-18deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); mix-blend-mode: soft-light; }
.k-gold .value { color: #2a1a0a; text-shadow: none; font-weight: 500; }
.k-gold .label { color: #3b2710; font-weight: 600; letter-spacing: 0.01em; font-size: calc(18 * var(--dpx)); }

/* the abstract cards: flat deep indigo, the graphic does the work */
.tile:is(.k-dots, .k-modules) {
  background: radial-gradient(90% 80% at 85% 10%, rgba(166, 154, 255, 0.12), transparent 60%), #0b0a10; }

/* dots: one per dataset */
.k-dots .dots { left: calc(18 * var(--dpx)); right: calc(18 * var(--dpx)); top: calc(20 * var(--dpx)); width: calc(100% - calc(36 * var(--dpx))); height: auto; }
.k-dots .dots circle { fill: #d6d0ff; }

/* offices (v0.4.4): a lilac colour card, four rings in a square, one per office */
.tile.k-offices { background: linear-gradient(150deg, #b9b0ff 0%, #8f7dff 55%, #5b45d6 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 calc(18 * var(--dpx)) calc(40 * var(--dpx)) rgba(2, 1, 10, 0.45); }
.k-offices .offices { right: calc(20 * var(--dpx)); top: calc(18 * var(--dpx)); width: calc(96 * var(--dpx)); height: auto; overflow: visible; }
.k-offices .link { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; stroke-dasharray: 1; }
.k-offices .ring { fill: rgba(255, 255, 255, 0.14); stroke: #fff; stroke-width: 2; }
.k-offices .core { fill: #fff; }
.k-offices .value { color: #fff; text-shadow: 0 2px calc(16 * var(--dpx)) rgba(40, 20, 120, 0.4); font-weight: 400; }
.k-offices .label { color: #fff; font-weight: 500; }

/* modules: one per platform capability */
.k-modules .modules { right: calc(22 * var(--dpx)); top: calc(22 * var(--dpx)); width: calc(150 * var(--dpx)); height: auto; }
.k-modules .modules rect { fill: #a69aff; }
.k-modules .modules rect:nth-child(3n) { fill: #d6d0ff; }
.k-modules .modules rect:nth-child(7n) { fill: #6d55f0; }

/* the pearl in flight between the navigator and the centre card */
.j-portal {
  position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 6; pointer-events: none; overflow: hidden;
  visibility: hidden; opacity: 0; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(214, 208, 255, 0.5), 0 0 calc(60 * var(--dpx)) rgba(166, 154, 255, 0.55);
}
.j-portal .pimg { position: absolute; inset: -4%; background: url("assets/pearls/journey.webp") center / cover; }
.j-portal .pshade { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(70% 60% at 50% 42%, rgba(14, 12, 26, 0.3), rgba(5, 5, 8, 0.82) 100%); }
.j-portal .phl { position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.25), transparent 40%); }

/* ---------- breadcrumbs (v0.7.3, user: "can we adopt a breadcrumb navigation at top so we dont have too many
   sublines"): shared by the Journey, Vision and Offerings headers. Navigator › section › item; the current step is
   plain white, the steps behind it can be tapped. ---------- */
.j-crumbs { display: flex; align-items: center; gap: calc(12 * var(--dpx)); }
.j-crumbs img { height: calc(44 * var(--dpx)); width: auto; display: block; margin-right: calc(6 * var(--dpx)); filter: drop-shadow(0 0 calc(10 * var(--dpx)) rgba(166, 154, 255, 0.45)); }
.j-crumb { display: inline-flex; align-items: center; gap: calc(8 * var(--dpx)); min-height: calc(44 * var(--dpx)); padding: 0 calc(4 * var(--dpx)); border: 0; background: none; cursor: pointer;
  font: 400 calc(23 * var(--dpx)) var(--font); color: #bdb8d6; letter-spacing: -0.005em; transition: color 200ms; }
.j-crumb b { font-size: 0.66em; font-weight: 600; letter-spacing: 0.2em; color: var(--lilac-pale); }
.j-crumb:hover:not(:disabled):not(.is-current) { color: #fff; }
.j-crumb.is-current, .j-crumb:last-of-type:not(.j-crumb-home) { color: #fff; }
.j-crumb:disabled { cursor: default; opacity: 0.5; }
.j-crumb em { font-style: normal; font-size: calc(11 * var(--dpx)); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lilac-pale);
  padding: calc(5 * var(--dpx)) calc(10 * var(--dpx)); border-radius: calc(999 * var(--dpx)); border: 1px solid rgba(214, 208, 255, 0.4); margin-left: calc(6 * var(--dpx)); }
.j-sep { font-size: calc(22 * var(--dpx)); color: rgba(214, 208, 255, 0.45); }

/* ---------- the plug-in sections (04 to 08, sections/<slug>.js): an empty full-screen layer each, hidden until its
   module opens it (v0.8, sections/SECTIONS-CONTRACT.md) ---------- */
.sec-page { position: absolute; inset: 0; z-index: 4; visibility: hidden; opacity: 0; pointer-events: none; }
.sec-page.is-open { pointer-events: auto; }