/* ==========================================================================
   IDEX 2027 v2
   Photography is the material. The interface gets out of its way.
   No cards in rows. No floating translucent panels. No background grids.
   No arrow on every link. No shadows.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-base);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
[dir="rtl"] body { font-family: var(--f-ar); }

img { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--c-red-text); outline-offset: 3px; }

.skip {
  position: absolute; top: -200px; inset-inline-start: var(--s4); z-index: 999;
  background: var(--c-red); color: var(--c-on-red);
  padding: var(--s3) var(--s5); text-decoration: none; font-weight: 700;
}
.skip:focus { top: var(--s4); }

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gut); }

/* Section labels. Small, tracked, quiet. Not an "eyebrow with a trailing rule". */
.lab {
  font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--c-text-3);
  font-weight: 600; margin: 0 0 var(--s5);
}
[dir="rtl"] .lab { text-transform: none; }
.lab-red { color: var(--c-red-text); }

h1, h2, h3 { font-family: var(--f-display); font-weight: 600; margin: 0; line-height: var(--lh-head); letter-spacing: var(--tr-head); }
.mega { font-size: var(--t-mega); line-height: var(--lh-mega); letter-spacing: var(--tr-mega); font-weight: 600; }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
.h4 { font-family: var(--f-body); font-size: var(--t-h4); font-weight: 700; letter-spacing: -0.01em; margin: 0; }

p { margin: 0 0 var(--s4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--c-text-2); }

/* --------------------------------------------------------------------------
   BUTTONS
   Two only. No arrow glyph: the anti-slop list calls the arrow-on-every-link
   the tell, and it was all over v1.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s6);
  font-family: var(--f-body); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: 0.01em; text-decoration: none; border: 0; cursor: pointer;
  border-radius: var(--r-ctl); transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
[dir="rtl"] .btn { font-family: var(--f-ar); }
.btn-red { background: var(--c-red); color: var(--c-on-red); }
.btn-red:hover { background: var(--c-red-hot); }
.btn-line { background: transparent; color: var(--c-text); border: 1px solid var(--c-line-str); }
.btn-line:hover { background: rgba(255,255,255,0.07); }
.btn-dark { background: var(--c-invert-txt); color: var(--c-invert); }
.btn-dark:hover { background: #1B2331; }

/* --------------------------------------------------------------------------
   HEADER
   Solid, not translucent. Language switch lives here, in the main nav,
   because a top utility strip is the place nobody reads.
   -------------------------------------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: 90; background: var(--c-base); border-bottom: 1px solid var(--c-line); }
.hdr .wrap { display: flex; align-items: center; gap: var(--s6); min-height: 82px; }

.brand { display: flex; align-items: center; gap: var(--s4); text-decoration: none; flex: none; }
.brand img { height: 50px; width: auto; }
.brand b { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; display: block; line-height: 1.1; }
.brand span { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-3); display: block; }
[dir="rtl"] .brand span { text-transform: none; letter-spacing: 0; }

.nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); }
.nav a { font-size: var(--t-sm); font-weight: 500; text-decoration: none; color: var(--c-text-2); padding: var(--s3) var(--s4); min-height: 44px; display: inline-flex; align-items: center; transition: color var(--dur) var(--ease); }
.nav a:hover { color: var(--c-text); }

.lang { display: flex; align-items: center; gap: 2px; margin-inline-start: var(--s4); padding-inline-start: var(--s4); border-inline-start: 1px solid var(--c-line); flex: none; }
.lang a { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-decoration: none; color: var(--c-text-3); padding: var(--s2) var(--s3); min-height: 40px; display: inline-flex; align-items: center; }
.lang a[aria-current="true"] { color: var(--c-text); }
.lang a:hover { color: var(--c-text); }
.hdr .btn { flex: none; margin-inline-start: var(--s4); min-height: 46px; padding-inline: var(--s5); }
.burger { display: none; }

/* --------------------------------------------------------------------------
   HERO
   Full-bleed photograph with the headline set on it like an exhibition
   poster, and an opaque data rail sitting on the bottom edge like a plinth.
   The rail is the countdown's home: it is part of the page structure, not a
   card hovering over the picture.
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--c-base); }
.hero-fig { position: relative; min-height: clamp(520px, 78vh, 820px); overflow: hidden; }
.hero-fig > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; filter: brightness(1.18) contrast(1.06) saturate(0.95); }

/* One scrim, bottom-weighted, doing one job: making the type legible on a
   photograph. Photographic convention, not a decorative gradient. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    /* start-side wedge: protects the copy column only, so the right two
       thirds of the photograph stay clear. Flips with direction. */
    linear-gradient(to var(--dir-end, right), rgba(7,9,13,0.90) 0%, rgba(7,9,13,0.66) 34%, rgba(7,9,13,0.12) 62%, rgba(7,9,13,0) 78%),
    /* bottom weight: seats the rail and holds the buttons */
    linear-gradient(to top, rgba(7,9,13,0.92) 0%, rgba(7,9,13,0.62) 20%, rgba(7,9,13,0.10) 48%, rgba(7,9,13,0) 72%, rgba(7,9,13,0.30) 100%);
}

.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(520px, 78vh, 820px); padding-block: var(--s8) var(--s8); }
.hero-copy .mega { max-width: 16ch; }
.hero-sub { margin-top: var(--s5); max-width: 50ch; color: #CBD5E1; }
.hero-act { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s7); }

/* The rail. Opaque, full width, flush under the image. */
.rail { background: var(--c-surface); border-top: 1px solid var(--c-line); }
.rail .wrap { display: flex; flex-wrap: wrap; }
.rail-i { flex: 1 1 0; min-width: 168px; padding: var(--s5) var(--s5) var(--s5) 0; border-inline-end: 1px solid var(--c-line); }
[dir="rtl"] .rail-i { padding: var(--s5) 0 var(--s5) var(--s5); }
.rail-i:last-child { border-inline-end: 0; }
.rail-i + .rail-i { padding-inline-start: var(--s5); }
.rail-k { display: block; font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--c-text-3); font-weight: 600; margin-bottom: var(--s2); }
[dir="rtl"] .rail-k { text-transform: none; }
.rail-v { display: block; font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.rail-v.is-red { color: var(--c-red-text); }

/* --------------------------------------------------------------------------
   ROUTES
   Four audiences, from ADNEC's own attendance composition. The insight was
   right in v1; four cards in a row was the wrong way to say it.
   Here each one is a full-width band with its own photograph, stacked, so
   they read as four doors rather than four products in a comparison grid.
   -------------------------------------------------------------------------- */
.routes { border-top: 1px solid var(--c-line); }
.route {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border-bottom: 1px solid var(--c-line); text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.route:hover { background: var(--c-raised); }
.route:nth-child(even) .route-img { order: 2; }
.route-img { position: relative; min-height: 300px; overflow: hidden; }
.route-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.route-txt { padding: var(--s8) var(--gut); display: flex; flex-direction: column; justify-content: center; }
.route-n { font-family: var(--f-display); font-size: var(--t-label); letter-spacing: var(--tr-label); color: var(--c-text-3); font-weight: 600; margin-bottom: var(--s4); }
.route-txt h3 { margin-bottom: var(--s3); }
.route-txt p { color: var(--c-text-2); font-size: var(--t-sm); margin-bottom: var(--s5); }
.route-meta { display: flex; align-items: baseline; gap: var(--s5); flex-wrap: wrap; font-size: var(--t-xs); }
.route-do { font-weight: 700; color: var(--c-red-text); }
.route-when { color: var(--c-text-3); letter-spacing: 0.06em; text-transform: uppercase; }
[dir="rtl"] .route-when { text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   PROOF
   The one light band on the page. It exists so the numbers read as a
   published record rather than more marketing over a photograph.
   "Every number has a source" was the right idea in v1; keeping it.
   -------------------------------------------------------------------------- */
.proof { background: var(--c-invert); color: var(--c-invert-txt); padding-block: var(--s10); }
.proof .lab { color: var(--c-invert-t2); }
.proof h2 { max-width: 20ch; }
.proof .lead { color: var(--c-invert-t2); margin-top: var(--s5); }
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); margin-top: var(--s9); }
.fig { border-top: 2px solid var(--c-invert-txt); padding-top: var(--s4); }
.fig b { display: block; font-family: var(--f-display); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; direction: ltr; text-align: start; }
.fig .fig-k { display: block; font-weight: 700; font-size: var(--t-sm); margin-top: var(--s3); }
.fig .fig-n { display: block; font-size: var(--t-xs); color: var(--c-invert-t2); margin-top: var(--s2); line-height: 1.5; }
.src { font-size: var(--t-xs); color: var(--c-invert-t2); margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--c-invert-ln); max-width: none; }

.nps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); margin-top: var(--s7); }
.nps div { display: flex; align-items: baseline; gap: var(--s4); }
.nps b { font-family: var(--f-display); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; color: var(--c-red); direction: ltr; }
.nps span { font-size: var(--t-xs); line-height: 1.45; color: var(--c-invert-t2); }
.nps strong { display: block; color: var(--c-invert-txt); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   DOMAINS
   Four large photographs with the label set over them. A poster series,
   not an icon grid. These images are the single best asset IDEX has and v1
   replaced all four with a circle-and-a-shape SVG.
   -------------------------------------------------------------------------- */
.doms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--c-line); border-block: 1px solid var(--c-line); }
.dom { position: relative; min-height: 420px; overflow: hidden; text-decoration: none; display: block; background: var(--c-base); }
.dom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur) var(--ease); }
.dom::after {
  content: ""; position: absolute; inset: 0;
  /* Caption zone is the bottom ~40%. The sea in the naval frame and the sky
     in the land frame are bright, so the scrim has to be genuinely opaque
     there; above 70% it clears completely so the subject reads. */
  background: linear-gradient(to top,
    rgba(7,9,13,0.97) 0%,
    rgba(7,9,13,0.95) 28%,
    rgba(7,9,13,0.88) 44%,
    rgba(7,9,13,0.45) 62%,
    rgba(7,9,13,0.10) 82%,
    rgba(7,9,13,0) 100%);
}
.dom:hover img { opacity: 0.82; }
.dom-t { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: var(--s7); }
.dom-t h3 { font-size: clamp(1.75rem, 2.6vw, 2.4rem); margin-bottom: var(--s3); }
.dom-t p { color: #B6C2D2; font-size: var(--t-sm); max-width: 42ch; margin-bottom: var(--s3); }
.dom-t .dom-m { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; }
[dir="rtl"] .dom-t .dom-m { text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   PROGRAMME, rows with real thumbnails, and the access rule stated
   -------------------------------------------------------------------------- */
.prog { border-top: 1px solid var(--c-line); }
.prow { display: grid; grid-template-columns: 132px 1fr 1.35fr auto; gap: var(--s6); align-items: center; padding: var(--s5) 0; border-bottom: 1px solid var(--c-line); text-decoration: none; transition: background var(--dur) var(--ease); }
.prow:hover { background: var(--c-raised); }
.pthumb { width: 132px; height: 84px; object-fit: cover; }
.prow p { font-size: var(--t-sm); color: var(--c-text-2); margin: 0; }
.pacc { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
[dir="rtl"] .pacc { text-transform: none; letter-spacing: 0; }
.pacc.inc { color: var(--c-text-3); }
.pacc.sep { color: var(--c-red-text); }

/* --------------------------------------------------------------------------
   CLOSE / PARTNERS / FOOTER
   -------------------------------------------------------------------------- */
.close { position: relative; overflow: hidden; border-top: 1px solid var(--c-line); }
.close img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.close::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to var(--dir-end, right), rgba(7,9,13,0.95) 0%, rgba(7,9,13,0.80) 55%, rgba(7,9,13,0.55) 100%); }
.close .wrap { position: relative; z-index: 2; padding-block: var(--s10); }
.close h2 { max-width: 17ch; }
.close .lead { margin-top: var(--s5); }
.close .hero-act { margin-top: var(--s7); }

.partners { border-top: 1px solid var(--c-line); padding-block: var(--s9); }
.plist { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s6); margin-top: var(--s6); }
.plist div { border-top: 1px solid var(--c-line); padding-top: var(--s4); }
.plist span { display: block; font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; margin-bottom: var(--s2); }
[dir="rtl"] .plist span { text-transform: none; letter-spacing: 0; }
.plist b { font-size: var(--t-h4); font-weight: 700; }

.foot { border-top: 1px solid var(--c-line); padding-block: var(--s9) var(--s6); font-size: var(--t-sm); color: var(--c-text-2); }
.fgrid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; gap: var(--s6); padding-bottom: var(--s7); border-bottom: 1px solid var(--c-line); }
.foot h2 { font-family: var(--f-body); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text); margin: 0 0 var(--s4); font-weight: 700; }
[dir="rtl"] .foot h2 { text-transform: none; letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { text-decoration: none; color: var(--c-text-2); display: inline-flex; min-height: 34px; align-items: center; }
.foot li a:hover { color: var(--c-text); }
.fbot { display: flex; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; padding-top: var(--s5); font-size: var(--t-xs); color: var(--c-text-3); }
.fbot ul { display: flex; gap: var(--s5); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.trade { display: inline-block; margin-top: var(--s5); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-red-text); }
[dir="rtl"] .trade { text-transform: none; letter-spacing: 0; }

/* Consent: opaque, full width, never over a CTA */
.consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 200; background: var(--c-invert); color: var(--c-invert-txt); border-top: 3px solid var(--c-red); padding: var(--s4) var(--gut); display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: center; }
.consent p { font-size: var(--t-xs); color: var(--c-invert-t2); margin: 0; max-width: 92ch; line-height: 1.5; }
.consent b { display: block; color: var(--c-invert-txt); font-size: var(--t-sm); margin-bottom: 2px; }
.consent-a { display: flex; gap: var(--s2); }
.consent .btn { min-height: 44px; padding-inline: var(--s5); }
.consent[hidden] { display: none; }

/* --------------------------------------------------------------------------
   RESPONSIVE, set where this layout breaks, not at device names
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: inline-flex; margin-inline-start: auto; }
  .hdr .btn-red { display: none; }
  .figs { grid-template-columns: repeat(2, 1fr); gap: var(--s7); }
  .nps { grid-template-columns: 1fr; gap: var(--s4); }
  .plist { grid-template-columns: repeat(2, 1fr); }
  .fgrid { grid-template-columns: 1fr 1fr 1fr; }
  .prow { grid-template-columns: 110px 1fr auto; }
  .prow p { grid-column: 2 / -1; }
  .pthumb { width: 110px; height: 72px; }
}
@media (max-width: 780px) {
  /* The copy column becomes the full width here, so the start-side wedge no
     longer protects it. Swap to a purely vertical scrim covering the whole
     lower half, where all the hero copy now sits. */
  .hero-scrim {
    background: linear-gradient(to top,
      rgba(7,9,13,0.96) 0%,
      rgba(7,9,13,0.92) 40%,
      rgba(7,9,13,0.58) 64%,
      rgba(7,9,13,0.18) 86%,
      rgba(7,9,13,0.34) 100%);
  }

  .route { grid-template-columns: 1fr; }
  .route:nth-child(even) .route-img { order: 0; }
  .route-img { min-height: 220px; }
  .route-txt { padding: var(--s7) var(--gut); }
  .doms { grid-template-columns: 1fr; }
  .dom { min-height: 340px; }
  .dom-t { padding: var(--s6); }
  .figs { grid-template-columns: 1fr; gap: var(--s6); }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .rail-i { flex: 1 1 50%; border-inline-end: 0; border-bottom: 1px solid var(--c-line); padding-inline: 0 !important; }
  .prow { grid-template-columns: 88px 1fr; gap: var(--s4); }
  .pthumb { width: 88px; height: 60px; }
  .pacc { grid-column: 2; }
  .prow p { grid-column: 2; }
  .consent { grid-template-columns: 1fr; }
  .consent-a .btn { flex: 1; }
  .hero-act .btn { flex: 1 1 100%; }
}
@media (max-width: 520px) {
  .brand span { display: none; }
  .brand img { height: 40px; }
  .fgrid { grid-template-columns: 1fr; gap: var(--s6); }
  .plist { grid-template-columns: 1fr; }
}