/* ===========================================================================
   LUMA LAB — holding page
   Palette sampled from the supplied logo artwork and the four approved renders:
   limestone plaster, travertine, oiled timber, bronze signage, warm near-black.
   =========================================================================== */

:root {
  /* surfaces */
  --limestone:  #F4EDE4;   /* page field — warm plaster */
  --plaster:    #EAE0D3;   /* recessed stone field */
  --ink:        #1C1714;   /* warm near-black, from the equipment and shadows */

  /* line + type */
  --stone:      #D3C7B8;   /* hairlines on light */
  --taupe:      #87796B;   /* secondary type on light */
  --bronze:     #9D5F33;   /* the logo bronze */
  --cream:      #F4EDE4;   /* type on dark */
  --cream-dim:  rgba(244, 237, 228, 0.58);
  --cream-rule: rgba(244, 237, 228, 0.26);

  /* type */
  --sans:  "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;

  /* measure */
  --pad:  clamp(22px, 5.2vw, 96px);
  --maxw: 1720px;
  --col-gap: clamp(14px, 2.2vw, 30px);

  /* Distance from the viewport edge to the content grid. Past --maxw the grid
     stops growing and centres, so anything that should reach the screen edge has
     to travel the gutter *and* the leftover margin. */
  --edge: calc(var(--pad) + max(0px, (100vw - var(--maxw)) / 2));

  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, p, figure, figcaption { margin: 0; }

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

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
}

.hero :focus-visible,
.close :focus-visible,
.skip-link:focus-visible {
  outline-color: var(--cream);
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 20;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
}
.skip-link:focus { inset-inline-start: 0; }


/* ─────────────────────────────────  HERO  ───────────────────────────────── */

.hero {
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  background: var(--ink);
}

/* Fallback for browsers without svh — the dynamic unit wins where supported. */
@supports not (height: 100svh) {
  .hero { height: 100vh; }
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The master is 854×480, so it is always being scaled up. A hair of scale
     past the edge hides the softest pixels at the frame boundary. */
  transform: scale(1.02);
}

/* Warm, not grey, and deliberately light — the footage is graded amber and a
   heavy filter kills it. Two narrow bands carry the type at the top and foot,
   and one very soft pool sits behind the mark. No edge vignette. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(20, 14, 10, 0.34) 0%,
      rgba(20, 14, 10, 0.06) 17%,
      rgba(20, 14, 10, 0.00) 34%,
      rgba(20, 14, 10, 0.00) 58%,
      rgba(20, 14, 10, 0.30) 82%,
      rgba(20, 14, 10, 0.56) 100%),
    radial-gradient(62% 44% at 50% 42%,
      rgba(20, 14, 10, 0.30) 0%,
      rgba(20, 14, 10, 0.16) 48%,
      rgba(20, 14, 10, 0.00) 76%);
}

.hero__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding:
    max(var(--pad), env(safe-area-inset-top))
    max(var(--edge), env(safe-area-inset-right))
    max(var(--pad), env(safe-area-inset-bottom))
    max(var(--edge), env(safe-area-inset-left));
}

.hero__top {
  display: flex;
  justify-content: flex-end;
}

.hero__mark {
  align-self: center;
  justify-self: center;
  /* Sits a touch above true centre — the foot block balances the lower half. */
  margin-block-end: 6vh;
}

.hero__mark img {
  width: clamp(252px, 29vw, 430px);
  height: auto;
}

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}


/* status — a quiet indicator, not a headline */
.status { color: var(--cream); }

.status__now {
  display: block;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.status__where {
  display: block;
  margin-block-start: 5px;
  font-size: 13px;
  color: var(--cream-dim);
}


/* CTA — a ruled text link. No pills anywhere on this page. */
.cta {
  display: inline-block;
  padding-block: 13px 9px;
  border-block-end: 1px solid var(--cream-rule);
  color: var(--cream);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.45s var(--ease);
}

.cta:hover { border-block-end-color: var(--cream); }


/* language selector */
.lang {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lang__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--cream-dim);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.35s var(--ease);
}

.lang__btn--ar {
  font-family: var(--arabic);
  font-size: 14px;
  letter-spacing: 0;
}

.lang__btn[aria-pressed="true"] { color: var(--cream); }
.lang__btn:hover { color: var(--cream); }

.lang__sep {
  width: 1px;
  height: 11px;
  background: var(--cream-rule);
}


/* ───────────────────────────────  STATEMENT  ────────────────────────────── */

/* One slim information row between the hero and the strip: what it is on the
   left, where and when on the right, both on the content-grid edges. */
.statement {
  padding-block: 36px;
  padding-inline: var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
}

.statement__lead {
  font-weight: 500;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.4;
  color: var(--ink);
}

.statement__detail {
  text-align: end;
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 1.4;
  color: var(--taupe);
}


/* ──────────────────────────────────  RAIL  ──────────────────────────────────
   A slim filmstrip of the four rooms — no boxes, no cards, no captions.

   Default (narrow) is a native swipe rail. From 1280px up all four fit the
   viewport at once: flex-grow is set to each image's own aspect ratio over a
   zero basis, so the widths divide the row in proportion and one shared height
   falls out of the arithmetic at any viewport. The four together are 5.15x
   their height, which is why this only turns on once there is room for it.  */

.rail {
  padding-block: 0 56px;
}

.rail__track {
  --rail-h: clamp(300px, 34vw, 430px);

  display: flex;
  align-items: flex-start;
  gap: 14px;

  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;

  padding-inline: var(--edge);
  scroll-padding-inline-start: var(--edge);

  cursor: grab;

  /* Functionality kept, chrome hidden. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail__track::-webkit-scrollbar { display: none; }

.rail__track:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 6px;
}

/* While a drag is in flight, snapping and smooth scrolling both fight the
   pointer — turn them off for the duration. */
.rail__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.rail__img {
  flex: none;
  height: var(--rail-h);
  width: auto;
  min-width: 0;
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-drag: none;
}

/* Full strip, edge to edge, nothing off-screen. */
@media (min-width: 1280px) {
  .rail__track {
    padding-inline: 0;
    overflow-x: hidden;
    cursor: default;
  }

  .rail__img {
    height: auto;
    width: auto;
  }
  /* grow = the image's own width/height, so every pane lands on one height. */
  .rail__img--wide { flex: 1.7769 0 0; aspect-ratio: 1672 / 941; }
  .rail__img--tall { flex: 0.80029 0 0; aspect-ratio: 1122 / 1402; }
}

/* ────────────────────────────────  CLOSING  ─────────────────────────────── */

.close {
  background: var(--ink);
  color: var(--cream);
  padding:
    60px
    max(var(--edge), env(safe-area-inset-right))
    22px
    max(var(--edge), env(safe-area-inset-left));
}

/* 1fr auto 1fr puts the middle block on the true centre of the page while the
   mark and the contact column sit on the outer edges of the content grid. */
.close__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.close__mark {
  justify-self: start;
  width: clamp(140px, 12vw, 172px);
  height: auto;
}

.close__place {
  justify-self: center;
  text-align: center;
  font-weight: 400;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.close__soon {
  display: block;
  margin-block-start: 2px;
  color: var(--cream-dim);
}

.close__actions {
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 12px;
  text-align: end;
}

.close__mail {
  font-size: 14px;
  color: rgba(244, 237, 228, 0.76);
  border-block-end: 1px solid rgba(244, 237, 228, 0.22);
  padding-block-end: 3px;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.close__mail:hover {
  color: var(--cream);
  border-block-end-color: var(--cream);
}

.colophon {
  margin-block-start: 44px;
  padding-block-start: 18px;
  border-block-start: 1px solid rgba(244, 237, 228, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--cream-dim);
}


/* ────────────────────────────────  ARABIC  ──────────────────────────────── */

html[lang="ar"] body { font-family: var(--arabic); }

html[lang="ar"] .close__place {
  line-height: 1.8;
}

/* Arabic only needs the extra leading; the sizes carry over unchanged. */
html[lang="ar"] .statement__lead,
html[lang="ar"] .statement__detail {
  line-height: 1.6;
}

html[lang="ar"] .status__now,
html[lang="ar"] .status__where,
html[lang="ar"] .close__mail {
  font-size: 14px;
}

/* Arabic has no uppercase and tracking only damages it. */
html[lang="ar"] .cta {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}

/* The brand, the domain and the email stay Latin in both languages. */
html[lang="ar"] .colophon,
html[lang="ar"] .close__mail {
  font-family: var(--sans);
}


/* ────────────────────────────────  MOTION  ──────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(16px);
}

.js .reveal {
  transition:
    opacity 1.1s var(--ease),
    transform 1.1s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* No JS: nothing should ever be stuck invisible. */
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * { scroll-behavior: auto !important; }
}


/* ────────────────────────────────  TABLET  ──────────────────────────────── */

/* Between the phone rule and a full desktop the mark would otherwise sit on its
   clamp floor and look stranded on a big tablet. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hero__mark img { width: min(44vw, 384px); }
}



/* ────────────────────────────────  MOBILE  ──────────────────────────────── */

@media (max-width: 760px) {

  .hero { min-height: 500px; }

  .hero__mark {
    margin-block-end: 4vh;
  }
  .hero__mark img { width: min(74vw, 320px); }

  /* The foot stacks, but keeps its hairline so it still reads as a bar
     rather than two loose lines. */
  .hero__foot {
    display: block;
  }
  .cta {
    display: block;
    margin-block-start: 22px;
    padding-block: 15px 13px;
    border-block-start: 1px solid var(--cream-rule);
    border-block-end: 0;
  }
  .cta:hover { border-block-end-color: transparent; }

  /* The row stacks, both lines on the left edge. */
  .statement {
    display: block;
    padding-block: 32px;
  }
  .statement__lead {
    font-size: 18px;
  }
  .statement__detail {
    margin-block-start: 10px;
    text-align: start;
  }

  /* The rail is the point of the phone layout: swipe reception -> training ->
     plunge -> vanity instead of scrolling four sections. Widths are set per
     orientation and the height is fixed, so object-fit does the cropping. A
     slice of the next image always shows, which is the affordance. */
  .rail { padding-block: 0 44px; }

  .rail__track {
    --rail-h: 320px;
    gap: 14px;
    scroll-snap-type: x mandatory;
  }

  /* Snapping to start (not centre) keeps every image on the same left inset as
     the copy above, and keeps the next one peeking in at the right. */
  .rail__img { object-fit: cover; }
  .rail__img--wide { width: 85vw; }
  .rail__img--tall { width: 66vw; }

  /* Only ~58% of a landscape frame survives this crop. The reception desk and
     its signage sit at about 80% across, so hold that side. */
  .rail__img--wide:first-child { object-position: 60% center; }

  /* Footer stacks: mark, place, contact, rule, copyright. */
  .close { padding-block: 44px 18px; }

  .close__row {
    display: block;
  }

  /* justify-self is honoured in block layout in current Chrome, so the desktop
     centre/end alignment has to be cleared or these boxes stay shrink-wrapped
     and offset instead of stacking flush left. */
  .close__mark,
  .close__place,
  .close__actions {
    justify-self: stretch;
  }

  .close__mark { width: 136px; }

  .close__place {
    margin-block-start: 24px;
    text-align: start;
    font-size: 18px;
  }

  /* justify-items here sets the default justify-self for the CTA inside it,
     so it has to be cleared as well. */
  .close__actions {
    display: block;
    justify-items: stretch;
    margin-block-start: 18px;
    text-align: start;
  }
  .close__mail {
    display: inline-block;
    margin-block-start: 20px;
  }

  .colophon { margin-block-start: 30px; }
}