/* Lab-to-Market Showcase 2026
   Loads after the VentureOne theme CSS. Headings, buttons, banner, sections and cards
   use VentureOne's own classes (vo-*, btn--calypso, bg-*); this file only adds page
   layout and the few pieces the theme has no class for. Everything is scoped to .l2m.
   Values are measured from ventureone.ae on 2026-10-28 unless marked "derived". */

/* ==========================================================================
   Scroll: the page scrolls on the window, driven by one Lenis.
   The theme sets :root { scroll-behavior: smooth } site-wide; lenis.css only
   cancels it while a scroll is in progress, so the browser re-smoothed Lenis's
   last frames and every ScrollTrigger refresh (the flicker after a long scroll).
   ========================================================================== */

html.lenis { scroll-behavior: auto !important; }
html, body { overflow-x: clip; } /* clip, not hidden, so position: sticky keeps working */
html { scroll-padding-top: 77px; } /* anchors clear the VentureOne header without JS */
@media (min-width: 1200px) { html { scroll-padding-top: 99px; } }

/* ==========================================================================
   Tokens
   ========================================================================== */

.l2m {
  /* colour (measured from the VentureOne theme) */
  --color-ink: #140033;
  --color-accent: #6400ff;
  --color-purple: #5901e2;
  --color-magnolia: #f9f5ff;
  --color-deep: #311f4c;   /* footer colour; agenda fallback while its photo loads */
  --color-white: #ffffff;
  --color-line: rgba(20, 0, 51, 0.12);              /* derived */
  --color-line-strong: rgba(20, 0, 51, 0.5);        /* derived: control borders, 3:1+ on white and magnolia */
  --color-ink-muted: #4c3d66;                       /* derived: secondary text, 9.6:1 on white */
  --color-line-on-dark: rgba(255, 255, 255, 0.7);   /* matches whatwedo-card border */
  --color-divider-on-dark: rgba(255, 255, 255, 0.3); /* derived */
  --color-media-empty: #efe6ff;                     /* derived, shows while photos load */

  /* type: roles the theme has no class for */
  --fs-body: 18px;   --lh-body: 27px;   /* .vo-section p */
  --fs-body-s: 14px; --lh-body-s: 21px; /* .whatwedo-card p */
  --fs-overline: 16px; --lh-overline: 19.2px; --fw-overline: 400; --ls-overline: -0.36px; /* .mission-card__title; 18/21.6 from 992px */
  --fs-button: 16px; --lh-button: 24px; --fw-button: 400; /* .btn */
  --fs-numeral: 40px; --lh-numeral: 40px; --fw-numeral: 700; --ls-numeral: -1.6px; /* .mission-card__title span; 64/64, -3.2px from 992px */

  /* spacing */
  --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
  --space-70: 70px; --space-80: 80px;
  --space-gutter: calc(var(--bs-gutter-x, 1.5rem) * 0.5); /* Bootstrap .container padding */
  --grid-gap: var(--bs-gutter-x, 1.5rem);

  /* shape */
  --radius-md: 10px;  /* icon tiles */
  --radius-lg: 20px;  /* vo-card-2, whatwedo-card, images */
  --radius-pill: 50px; /* .btn */

  /* sizes */
  --header-h: 99px;   /* replaced at runtime with the measured VentureOne header */
  --control-h: 50px;  /* .btn on mobile */
  --control-px: 30px; /* .btn padding */
  --tap-min: 44px;
  --icon-sm: 16px;
  --icon-chip: 20px; /* Lucide, 24px grid */
  --icon-md: 24px;
  --icon-lg: 40px; /* mission-card__img icon */
  --tile: 48px;
  --slot-time-w: 128px;
  --zone-num-w: 72px;
  /* showcase directory: its own smaller, denser type (requested to differ from the theme) */
  --fs-dir-lg: 16px; --lh-dir-lg: 22px; --ls-dir-lg: -0.01em; /* entry name */
  --fs-dir-md: 14px; --lh-dir-md: 20px;                         /* description, filters, track names */
  --fs-dir-sm: 13px; --lh-dir-sm: 18px;                         /* tags, counts, labels: the 13px floor */
  --fw-dir-strong: 500;                                         /* Medium, a real font file */
  --track-dot: 32px; --track-step-min: 136px;
  --measure: 60ch;
  --hero-focus: 50% 60%;   /* keeps the booth rows centred behind the title */
  --agenda-focus: 30% 40%; /* keeps the two scientists in frame on narrow screens */

  /* motion */
  --duration: 0.3s;  /* theme transition */
  --ease: ease-in;
  --duration-reveal: 0.6s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 992px) {
  .l2m {
    --control-h: 64px; /* .btn on desktop */
    --fs-overline: 18px; --lh-overline: 21.6px;
    --fs-numeral: 64px; --lh-numeral: 64px; --ls-numeral: -3.2px;
    --fs-dir-lg: 17px; --lh-dir-lg: 24px;
  }
}


/* ==========================================================================
   Scope reset: neutralise Bootstrap's element margins inside the page only
   ========================================================================== */

.l2m { color: var(--color-ink); overflow-x: clip; }
.l2m :where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd) { margin: 0; }
.l2m :where(ol, ul) { padding: 0; list-style: none; }
.l2m :where(dt) { font-weight: inherit; }
.l2m :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; hyphens: none; }
.l2m :where(p, dd, li) { text-wrap: pretty; }
.l2m-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.l2m :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.l2m .bg-purple :focus-visible, .l2m-agenda :focus-visible { outline-color: var(--color-white); }
/* The theme turns the arrow white on hover but not on keyboard focus, leaving purple on black (3.0:1) */
.l2m .btn.btn-white:focus .arrow-link path,
.l2m .btn.btn-white:focus-visible .arrow-link path { fill: var(--color-white); }

/* ==========================================================================
   Type roles
   ========================================================================== */

.l2m-body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); }
.l2m-body-s { font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.l2m-overline { font-size: var(--fs-overline); line-height: var(--lh-overline); font-weight: var(--fw-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; }

/* ==========================================================================
   Banner (vo-banner) stretched to the first screen
   ========================================================================== */

.l2m-hero {
  min-height: 100svh; /* the fixed VentureOne header overlays the banner, as on every inner page */
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate; /* photo and theme overlay sit behind the content but above the purple fallback */
}
.l2m-hero__bg { position: absolute; inset: 0; z-index: -2; }
.l2m-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus); }
.l2m-hero > .container { position: relative; z-index: 1; }
.l2m-hero__content { display: flex; flex-direction: column; align-items: center; }
/* Dates and venue: icon tile beside label + value. Stacked on a shared left edge on
   phones; from 768px two equal columns split by a divider on the centre line. */
.l2m-hero__meta {
  display: grid; justify-content: center; justify-items: start; gap: var(--space-20);
  margin-top: var(--space-32);
  text-align: left;
}
.l2m-hero__meta-item {
  display: grid;
  grid-template-columns: var(--tile) auto;
  grid-template-areas: "icon label" "icon value";
  column-gap: var(--space-16); row-gap: var(--space-4);
}
.l2m-hero__meta-item dt { display: contents; }
.l2m-hero__meta-icon { grid-area: icon; align-self: center; width: var(--tile); height: var(--tile); padding: 0; margin: 0; }
.l2m-hero__meta-icon .l2m-icon { color: var(--color-white); }
.l2m-hero__meta-label { grid-area: label; align-self: end; }
.l2m-hero__meta-item dd { grid-area: value; align-self: start; }

@media (min-width: 768px) {
  .l2m-hero__meta {
    grid-auto-flow: column; grid-auto-columns: 1fr; /* equal columns, sized by the wider item */
    justify-content: center; column-gap: 0;
  }
  .l2m-hero__meta-item:first-child { justify-self: end; padding-right: var(--space-40); }
  .l2m-hero__meta-item + .l2m-hero__meta-item {
    justify-self: start; padding-left: var(--space-40);
    border-left: 1px solid var(--color-divider-on-dark);
  }
}
.l2m-hero__actions { margin-top: var(--space-32); }

/* ==========================================================================
   Image slots
   ========================================================================== */

.l2m-media { display: block; position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-media-empty); }
.l2m-media img { width: 100%; height: 100%; object-fit: cover; }
.l2m-media > img { display: block; }

/* Venue map: Google Maps embed pinned to ATRC, with a directions link */
.l2m-map { display: grid; gap: var(--space-12); justify-items: start; }
.l2m-map__frame {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-magnolia);
}
.l2m-map__link {
  display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: var(--tap-min);
  font-size: var(--fs-button); line-height: var(--lh-button); font-weight: var(--fw-dir-strong);
  color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px;
}
.l2m-map__link:hover { color: var(--color-ink); }
.l2m-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 768px) {
  }

/* ==========================================================================
   What to expect
   ========================================================================== */

.l2m-expect__grid { display: grid; gap: var(--space-40); }
.l2m-expect__intro { display: grid; gap: var(--space-24); align-content: start; }
.l2m-expect__label { margin-bottom: var(--space-24); }

.l2m-zone {
  display: grid; grid-template-columns: var(--zone-num-w) 1fr; gap: var(--space-16);
  padding-block: var(--space-24);
  border-top: 1px solid var(--color-line);
}
.l2m-zone:first-child { border-top: 0; padding-top: 0; }
.l2m-zone > div { display: grid; gap: var(--space-8); }
.l2m-zone__num { font-size: var(--fs-numeral); line-height: var(--lh-numeral); font-weight: var(--fw-numeral); letter-spacing: var(--ls-numeral); color: var(--color-accent); }

.l2m-chip__icon { width: var(--icon-chip); height: var(--icon-chip); flex: none; color: var(--color-accent); }

@media (min-width: 992px) {
  .l2m-expect__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-80); row-gap: var(--space-48); }
  .l2m-expect__intro { position: sticky; top: calc(var(--header-h) + var(--space-40)); }
}

/* ==========================================================================
   Technology showcase: a guest directory. Title and intro use VentureOne
   classes; below them the section deliberately uses its own, smaller and
   denser pattern (requested): a stage track and sector filters over a
   three-column list. Same colours and typeface keep it cohesive.
   ========================================================================== */

.l2m-showcase__head { display: grid; gap: var(--space-24); margin-bottom: var(--space-40); }

/* Filter panel */
.l2m-dir__controls {
  display: grid; gap: var(--space-12);
  padding: var(--space-24);
  margin-bottom: var(--space-40);
  border-radius: var(--radius-lg);
  background: var(--color-magnolia);
}
.l2m-dir__label { font-size: var(--fs-dir-sm); line-height: var(--lh-dir-sm); font-weight: var(--fw-dir-strong); color: var(--color-ink-muted); }
.l2m-dir__label + .l2m-track, .l2m-dir__label + .l2m-filters { margin-bottom: var(--space-8); }

/* Stage track: the zones as a journey, one step per zone */
.l2m-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--track-step-min), 1fr);
  overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--space-24)); padding-inline: var(--space-24);
  scroll-padding-inline: var(--space-24);
}
.l2m-track::-webkit-scrollbar { display: none; }
.l2m-track__step {
  position: relative;
  display: grid; justify-items: start; align-content: start; gap: var(--space-4);
  padding: 0 var(--space-16) var(--space-8) 0;
  border: 0; background: none; color: var(--color-ink);
  font: inherit; text-align: left; cursor: pointer;
  min-height: var(--tap-min);
}
/* connector to the next step, drawn through the centre of the dots */
.l2m-track__step:not(:last-child)::after {
  content: ""; position: absolute;
  top: calc(var(--track-dot) / 2); left: var(--track-dot); right: 0;
  height: 1px; background: var(--color-line-strong);
}
.l2m-track__dot {
  display: grid; place-items: center;
  width: var(--track-dot); height: var(--track-dot); margin-bottom: var(--space-8);
  border: 1px solid var(--color-line-strong); border-radius: 50%;
  background: var(--color-white);
  font-size: var(--fs-dir-sm); line-height: 1; font-weight: var(--fw-dir-strong);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.l2m-track__name { font-size: var(--fs-dir-md); line-height: var(--lh-dir-md); font-weight: var(--fw-dir-strong); transition: color var(--duration) var(--ease); }
.l2m-track__step:hover .l2m-track__name { color: var(--color-accent); }
.l2m-track__step:hover .l2m-track__dot { border-color: var(--color-accent); }
.l2m-track__step[aria-pressed="true"] .l2m-track__dot { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.l2m-track__step[aria-pressed="true"] .l2m-track__name { color: var(--color-accent); }

.l2m-dir__zonedesc { max-width: var(--measure); font-size: var(--fs-dir-md); line-height: var(--lh-dir-md); margin-bottom: var(--space-8); }

/* Sector filters */
/* one swipeable row on phones, wrapping from 992px */
.l2m-filters {
  display: flex; gap: var(--space-8);
  overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--space-24)); padding-inline: var(--space-24);
  scroll-padding-inline: var(--space-24);
}
.l2m-filters::-webkit-scrollbar { display: none; }
.l2m-filter { flex: none; }
.l2m-filter {
  display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: var(--tap-min); padding-inline: var(--space-16);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill);
  background: var(--color-white); color: var(--color-ink);
  font: inherit; font-size: var(--fs-dir-md); line-height: var(--lh-dir-md);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.l2m-filter__icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; color: var(--color-accent); transition: color var(--duration) var(--ease); }
.l2m-filter[aria-pressed="true"] .l2m-filter__icon { color: var(--color-white); }
.l2m-filter:hover { border-color: var(--color-ink); }
.l2m-filter[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }
.l2m-filter:disabled { cursor: not-allowed; opacity: 0.45; }
.l2m-filter:disabled:hover { border-color: var(--color-line-strong); }

/* Directory: compact entries, one hairline above each, no boxes */
.l2m-dir__zone + .l2m-dir__zone { margin-top: var(--space-40); }
.l2m-dir__zone[hidden] { display: none; }
.l2m-dir__zonehead {
  display: flex; align-items: baseline; gap: var(--space-10);
  padding-bottom: var(--space-12);
  font-size: var(--fs-dir-lg); line-height: var(--lh-dir-lg); font-weight: var(--fw-dir-strong); letter-spacing: var(--ls-dir-lg);
}
.l2m-dir__zonenum { color: var(--color-accent); }
.l2m-dir__list { display: grid; column-gap: var(--space-32); }
.l2m-entry {
  display: grid; align-content: start; gap: var(--space-6);
  padding-block: var(--space-16) var(--space-20);
  border-top: 1px solid var(--color-line);
}
.l2m-entry[hidden] { display: none; }
.l2m-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); margin-bottom: var(--space-4); }
.l2m-entry__sector {
  padding: var(--space-2) var(--space-10);
  border-radius: var(--radius-pill);
  background: var(--color-magnolia);
  font-size: var(--fs-dir-sm); line-height: var(--lh-dir-sm); color: var(--color-accent);
}
.l2m-entry__name { font-size: var(--fs-dir-lg); line-height: var(--lh-dir-lg); font-weight: var(--fw-dir-strong); letter-spacing: var(--ls-dir-lg); }
.l2m-entry__desc { font-size: var(--fs-dir-md); line-height: var(--lh-dir-md); color: var(--color-ink-muted); max-width: var(--measure); }

@media (min-width: 576px) { .l2m-dir__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
  .l2m-dir__controls { padding: var(--space-32); }
  .l2m-track { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .l2m-filters { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .l2m-entry { padding-block: var(--space-20) var(--space-24); }
  .l2m-dir__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  .l2m-dir.is-refreshed .l2m-entry:not([hidden]) { animation: l2m-entry-in 0.35s var(--ease-out) both; }
}
@keyframes l2m-entry-in { from { opacity: 0; transform: translateY(var(--space-6)); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Agenda (dark section like "What We Do", whatwedo-card day cards)
   ========================================================================== */

.l2m-agenda { background: var(--color-deep); color: var(--color-white); isolation: isolate; } /* deep shows until the photo loads */
.l2m-agenda__bg { object-position: var(--agenda-focus); }
.l2m-agenda__head { display: grid; gap: var(--space-24); margin-bottom: var(--space-40); }

.l2m-agenda__days { display: grid; gap: var(--grid-gap); }
.l2m-day { display: flex; flex-direction: column; gap: var(--space-24); }
.l2m-day__head { display: grid; gap: var(--space-8); }
.l2m-day__note {
  justify-self: start;
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-12);
  border: 1px solid var(--color-line-on-dark);
  border-radius: var(--radius-pill);
}

.l2m-slot {
  display: grid; gap: var(--space-8);
  padding-block: var(--space-20);
  border-top: 1px solid var(--color-divider-on-dark);
}
.l2m-slot:last-child { padding-bottom: 0; }
.l2m-slot > div { display: grid; gap: var(--space-4); }
.l2m-slot__time { font-size: var(--fs-body); line-height: var(--lh-body); font-variant-numeric: tabular-nums; }
.l2m-slot__time time { white-space: nowrap; }

.l2m-agenda__actions { margin-top: var(--space-40); }

@media (min-width: 768px) {
  .l2m-slot { grid-template-columns: var(--slot-time-w) 1fr; gap: var(--space-20); }
}
@media (min-width: 992px) {
  .l2m-agenda__days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Getting here
   ========================================================================== */

.l2m-visit__grid { display: grid; gap: var(--space-40); }
.l2m-visit__copy { display: grid; gap: var(--space-24); align-content: start; }
.l2m-visit__address { display: flex; align-items: center; gap: var(--space-10); }
.l2m-visit__address .l2m-icon { color: var(--color-accent); }
.l2m-visit__items { display: grid; gap: var(--space-32); margin-top: var(--space-16); }
.l2m-visit__item { display: grid; grid-template-columns: var(--tile) 1fr; gap: var(--space-16); }
.l2m-visit__item > div { display: grid; gap: var(--space-8); align-content: start; }
.l2m-icon { width: var(--icon-md); height: var(--icon-md); flex: none; }
.l2m-icon-tile {
  display: grid; place-items: center;
  width: var(--tile); height: var(--tile);
  border-radius: var(--radius-md);
  background: var(--color-magnolia);
  color: var(--color-accent);
}

@media (min-width: 992px) {
  .l2m-visit__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-80); align-items: start; }
  .l2m-map__frame { aspect-ratio: 16 / 10; } /* about the height of the text beside it */
}

/* ==========================================================================
   Closing note: one slim strip above the VentureOne footer
   ========================================================================== */

.l2m-closing { padding-block: var(--space-24); }
.l2m-closing__inner { color: var(--color-ink-muted); }