/* OMAINTEC 2027 — header, hero and intro. Built by tools/build.mjs; edit src/css, not this file. */
/* ---- base.css ---- */
/* ===================================================================
   OMAINTEC 2027 — shared base for every block the plugin prints.

   HOW SCOPING WORKS
   Every block is printed inside <div class="omt">. tools/build.mjs prefixes
   every selector in these files with that wrapper, so nothing here can reach
   the WordPress theme, and the wrapper's doubled class lets these rules win
   over Astra / Elementor element styles without !important.

     :scope            -> the wrapper itself
     html[...] X       -> html[...] <wrapper> X   (theme + scrolled state)
     [dir="rtl"] X     -> [dir="rtl"] <wrapper> X (WPML sets dir on <html>)

   THEME
   html[data-omt-theme="dark" | "light"], written before first paint by the
   small boot script. Dark is the default; the visitor's choice is kept.
   =================================================================== */

.omt.omt{
  /* dark — the default */
  --ground:#1B0A47; --ground-2:#2A0F5C; --ground-3:#3A1470;
  --surface:#2A1266; --raised:#37187E;
  --line:#5A2FA8; --line-soft:#3F1E84;
  --ink:#FFFFFF; --ink-2:#D6C6F2; --ink-3:#A98FD8;
  --cyan:#22E3F5; --cyan-2:#03BDEE; --cyan-3:#07B1D4;
  --violet:#9C1EE2; --violet-2:#9246F5; --magenta:#D4177A;
  --on-cyan:#0B0526;
  --shell:#8FD8FF; --particle:#7FE4F7;

  --page-bg:#2A1A80;
  --accent-cyan:#22E3F5; --accent-ink:#22E3F5; --btn-violet:#22E3F5;
  --border-soft:color-mix(in srgb,#D6C6F2 14%,transparent);
  --border-mid:color-mix(in srgb,#D6C6F2 22%,transparent);
  --shadow-sm:0 1px 2px rgba(0,0,0,.34);
  --shadow-md:0 10px 26px -14px rgba(0,0,0,.6);
  --bridge:150px;

  --mo-ease:cubic-bezier(.22,.72,.24,1);
  --head-h:88px; --head-h-c:66px; --head-offset:84px;

  font-family:Cairo,"Segoe UI",system-ui,sans-serif;
  font-size:17px; line-height:1.8; color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-align:start;
}
[dir="ltr"] .omt.omt{font-size:16.5px;line-height:1.65}

html[data-omt-theme="light"] .omt.omt{
  --ground:#F1EFF8; --ground-2:#E6E2F4; --ground-3:#DCD6EF;
  --surface:#FFFFFF; --raised:#FAF9FD;
  --line:color-mix(in srgb,#3C1978 18%,transparent);
  --line-soft:color-mix(in srgb,#3C1978 10%,transparent);
  --ink:#130B42; --ink-2:#3B2A6E; --ink-3:#6B5B96;
  --page-bg:#F1EFF8;
  --accent-cyan:#04789A; --accent-ink:#311081;   /* a darker cyan on the light ground: small numbers and dates reach 4:1 (review 2026-10-21; was #0693B8) */ --btn-violet:#311081;
  --border-soft:color-mix(in srgb,#3C1978 11%,transparent);
  --border-mid:color-mix(in srgb,#3C1978 18%,transparent);
  --shadow-sm:0 1px 2px rgba(45,20,95,.05),0 2px 8px -5px rgba(45,20,95,.10);
  --shadow-md:0 3px 8px -5px rgba(45,20,95,.12),0 18px 40px -24px rgba(45,20,95,.24);
}

@media (max-width:760px){ .omt.omt{--head-h:74px;--head-h-c:60px;--head-offset:76px} }

/* ---- a local reset, so theme element styles stop at the wrapper ----
   :where() keeps these at the wrapper's own weight, so every component rule
   below still overrides them. */
.omt.omt *,.omt.omt *::before,.omt.omt *::after{box-sizing:border-box}
.omt.omt [hidden]{display:none!important}
.omt.omt :where(h1,h2,h3,p,ul,ol,li,figure,blockquote){
  margin:0;padding:0;font:inherit;color:inherit;letter-spacing:normal;text-transform:none;
}
.omt.omt :where(ul,ol){list-style:none}
.omt.omt :where(a){color:inherit;text-decoration:none;box-shadow:none;background:none}
.omt.omt :where(a:hover,a:focus){color:inherit;text-decoration:none}
.omt.omt :where(button){
  all:unset;box-sizing:border-box;cursor:pointer;
  font-family:inherit;-webkit-tap-highlight-color:transparent;
}
/* nothing in any of our blocks may widen the page sideways (light rays,
   running bands, drifting films, a ticking digit): on phones a few stray
   pixels let the whole page slide. clip, unlike hidden, keeps sticky parts
   working. The same guard on the document, for any page that carries us. */
.omt.omt{max-width:100%;overflow-x:clip}
html:has(.omt){overflow-x:clip}
html:has(.omt) .omt.omt body{overflow-x:clip}
.omt.omt :where(img,svg,video,canvas){max-width:100%;display:block;border:0;border-radius:0;box-shadow:none}
.omt.omt :where(img){height:auto}
.omt.omt :focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:8px}

.omt.omt .mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.omt.omt .wrap{max-width:1300px;margin:0 auto;padding:0 clamp(18px,4vw,44px);width:100%}
.omt.omt .vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- the theme switch: colours cross over, nothing moves ---- */
@media (prefers-reduced-motion:no-preference){
  .omt.omt .site-head,.omt.omt .sec,.omt.omt .btn{
    transition:background-color 300ms ease,border-color 300ms ease,
               color 300ms ease,box-shadow 300ms ease;
  }
}

/* an ordinal's letters always sit raised (24th, 23rd), on every page: omt_h()
   wraps them in sup.omt-ord. Raised without opening the line's height. */
.omt.omt sup.omt-ord{font-size:.62em;line-height:0;vertical-align:.52em;margin-inline-start:.04em;letter-spacing:.02em;font-weight:inherit}

/* never one word alone on the last line (user rule): headings and short labels
   share their words out evenly, paragraphs avoid a lone last word. Rules that
   set text-wrap for a particular element still win over these. */
.omt.omt h1,.omt.omt h2,.omt.omt h3,.omt.omt h4,.omt.omt h5,.omt.omt h6{text-wrap:balance}
.omt.omt p,.omt.omt li,.omt.omt dd,.omt.omt dt,.omt.omt figcaption,.omt.omt blockquote{text-wrap:pretty}
.omt.omt .omt-keep{white-space:nowrap}


/* ---- header.css ---- */
/* ============================ HEADER ============================
   Taken from the approved homepage. What changed for WordPress:
   - the links are the site's own menu (Appearance > Menus, translated by WPML),
     any length, with one level of submenu (Media Center > 2025 / 2026);
   - the scrolled state is html.omt-scrolled, set by the header script;
   - on pages other than the home page the header is printed "solid": it
     starts in its scrolled look and a spacer keeps the page content clear.

   Fixed, never hidden: only its ground, its ink and its logo change. */

.omt.omt .site-head{
  position:fixed;inset-inline:0;top:0;z-index:999;
  border-block-end:1px solid transparent;
  transition:background .34s ease,backdrop-filter .34s ease;
}
/* WordPress admin bar: the header sits under it, not behind it */
html.omt-adminbar .omt.omt .site-head{top:32px}
@media (max-width:782px){ html.omt-adminbar .omt.omt .site-head{top:46px} }
@media (max-width:600px){ html.omt-adminbar .omt.omt .site-head{top:0} }

.omt.omt .head-inner{
  max-width:1440px;margin-inline:auto;
  padding-inline:clamp(22px,3.4vw,52px);
  min-height:var(--head-h);
  transition:min-height .34s cubic-bezier(.2,.8,.3,1);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:clamp(16px,2.2vw,40px);
}
/* the header always sits on a dark ground at rest, so it takes the white mark */
.omt.omt .logo{position:relative;display:flex;align-items:center;justify-self:start}
.omt.omt .logo img{height:clamp(32px,2.6vw,42px);width:auto;display:block;transition:height .34s cubic-bezier(.2,.8,.3,1)}
.omt.omt .logo .logo-light{display:none}

/* navigation fills the middle column and centres itself in it */
.omt.omt .site-nav{
  grid-column:2;justify-self:center;
  display:flex;align-items:center;flex-wrap:nowrap;
  gap:clamp(0px,.4vw,6px);
  min-width:0;
}
.omt.omt .site-nav a{
  position:relative;display:inline-flex;align-items:center;white-space:nowrap;
  height:40px;padding-inline:clamp(8px,.8vw,11.5px);
  font-size:clamp(13px,.92vw,13.4px);font-weight:600;line-height:1;   /* capped at the 1440px bar's size: past it the bar stops growing (user, 2026-10-21: the English menu ran into the logo) */
  color:var(--ink-2);border-radius:10px;
  transition:color .28s ease;
}
.omt.omt .site-nav a::after{
  content:"";position:absolute;inset-block-end:6px;
  inset-inline-start:clamp(8px,.8vw,13px);inset-inline-end:clamp(8px,.8vw,13px);
  height:1.5px;border-radius:2px;background:var(--cyan);
  transform:scaleX(0);transform-origin:var(--o,right center);
  transition:transform .34s cubic-bezier(.65,0,.35,1);
}
[dir="ltr"] .omt.omt .site-nav a::after{--o:left center}
[dir="ltr"] .omt.omt .site-nav a{padding-inline:clamp(7px,.7vw,10px)}   /* English labels are longer */
.omt.omt .site-nav a:hover{color:var(--ink)}
.omt.omt .site-nav a:hover::after{transform:scaleX(1)}
.omt.omt .site-nav a[aria-current="page"]{color:var(--ink)}
.omt.omt .site-nav a[aria-current="page"]::after{transform:scaleX(1);opacity:.7}
/* the submenu's own links are not underlined like the bar */
.omt.omt .site-nav .nav-sub a::after{display:none}

/* ---- one level of submenu ----
   Opens on hover, on keyboard focus and on a tap. */
.omt.omt .nav-has{position:relative;display:inline-flex}
.omt.omt .nav-car{
  display:inline-block;width:5px;height:5px;margin-inline-start:7px;
  border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.7;
  transition:transform .3s var(--mo-ease),opacity .3s var(--mo-ease);
}
.omt.omt .nav-has.is-open .nav-car{transform:translateY(0) rotate(225deg);opacity:1}
.omt.omt .nav-sub{
  position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:-6px;
  min-width:180px;padding:8px;border-radius:12px;z-index:60;
  display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--ground-2) 94%,transparent);
  border:1px solid var(--line-soft);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.6);
  backdrop-filter:blur(14px) saturate(1.2);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .26s var(--mo-ease),transform .26s var(--mo-ease),visibility .26s;
}
/* a bridge over the 10px gap, so the pointer can travel into the panel */
.omt.omt .nav-sub::before{content:"";position:absolute;inset-inline:0;bottom:100%;height:12px}
.omt.omt .nav-has:hover .nav-sub,
.omt.omt .nav-has:focus-within .nav-sub,
.omt.omt .nav-has.is-open .nav-sub{opacity:1;visibility:visible;transform:none}
.omt.omt .nav-sub a{
  display:block;height:auto;padding:9px 12px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--ink-2);
  transition:background .2s,color .2s;
}
.omt.omt .nav-sub a:hover,.omt.omt .nav-sub a:focus-visible{
  background:color-mix(in srgb,var(--cyan) 12%,transparent);color:var(--cyan);
}

/* ---- controls: language + theme read as one component ---- */
.omt.omt .head-acts{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.omt.omt .ctl-group{
  display:flex;align-items:center;height:42px;
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--ground) 34%,transparent);
  backdrop-filter:blur(12px);
  overflow:hidden;
}
.omt.omt .ctl-sep{width:1px;height:20px;background:color-mix(in srgb,var(--ink) 18%,transparent);flex:none}
.omt.omt .ctl{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;min-width:44px;padding-inline:16px;
  border:0;background:none;color:var(--ink-2);
  font-family:inherit;font-size:13.5px;font-weight:600;line-height:1;white-space:nowrap;
  cursor:pointer;transition:color .26s ease,background .26s ease;
}
.omt.omt .ctl:hover{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.omt.omt .ctl:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:999px}
.omt.omt .ctl-lang[lang="ar"]{font-family:Cairo,"Segoe UI",sans-serif;font-size:14.5px}
.omt.omt .ctl-theme svg{display:block;width:17px;height:17px}
.omt.omt .ctl-theme .ic-sun{display:none}
html[data-omt-theme="light"] .omt.omt .ctl-theme .ic-sun{display:block}
html[data-omt-theme="light"] .omt.omt .ctl-theme .ic-moon{display:none}
.omt.omt .ctl-menu{
  display:none;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);
  border-radius:999px;background:color-mix(in srgb,var(--ground) 34%,transparent);
  backdrop-filter:blur(12px);min-width:46px;padding-inline:0;
}
.omt.omt .bars,.omt.omt .bars::before,.omt.omt .bars::after{
  content:"";display:block;width:17px;height:1.6px;border-radius:2px;background:currentColor;
  transition:transform .32s cubic-bezier(.65,0,.35,1),opacity .2s ease;
}
.omt.omt .bars{position:relative}
.omt.omt .bars::before{position:absolute;top:-5.5px}
.omt.omt .bars::after{position:absolute;top:5.5px}
.omt.omt [aria-expanded="true"] .bars{background:transparent}
.omt.omt [aria-expanded="true"] .bars::before{transform:translateY(5.5px) rotate(45deg)}
.omt.omt [aria-expanded="true"] .bars::after{transform:translateY(-5.5px) rotate(-45deg)}

/* ---- scrolled: tighter, a translucent violet ground, a hairline ---- */
.omt.omt .site-head::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:-1px;height:1px;
  background:linear-gradient(to right,transparent,
    color-mix(in srgb,var(--cyan) 30%,transparent),transparent);
  opacity:0;transition:opacity .4s ease;
}
html.omt-scrolled .omt.omt .site-head,
.omt.omt.omt-solid .site-head{
  background:color-mix(in srgb,#2A1880 84%,transparent);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
}
html.omt-scrolled .omt.omt .head-inner,.omt.omt.omt-solid .head-inner{min-height:var(--head-h-c)}
html.omt-scrolled .omt.omt .site-head::after,.omt.omt.omt-solid .site-head::after{opacity:1}
html.omt-scrolled .omt.omt .logo img,.omt.omt.omt-solid .logo img{height:clamp(28px,2.2vw,36px)}

/* on inner pages the content starts below the bar, not under it */
.omt.omt .omt-head-spacer{display:none}
.omt.omt.omt-solid .omt-head-spacer{display:block;height:var(--head-h-c)}

/* ---- the drawer ---- */
.omt.omt .site-menu{
  max-width:1440px;margin-inline:auto;
  padding:6px clamp(22px,3.4vw,52px) 18px;
  max-height:calc(100dvh - var(--head-h-c));overflow:auto;
}
.omt.omt .site-menu nav{
  display:grid;gap:2px;
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  border-radius:16px;padding:8px;
  background:color-mix(in srgb,#2A1880 95%,transparent);
  backdrop-filter:blur(16px);
}
.omt.omt .site-menu a{
  display:block;padding:13px 16px;border-radius:11px;
  font-size:15.5px;font-weight:600;color:var(--ink-2);
  transition:color .22s,background .22s;
}
.omt.omt .site-menu a:hover{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 9%,transparent)}
.omt.omt .site-menu a[aria-current="page"]{color:var(--cyan)}
.omt.omt .site-menu .sm-sub{display:grid;gap:2px;padding-inline-start:18px;
  border-inline-start:1px solid color-mix(in srgb,var(--ink) 14%,transparent);margin-inline-start:16px}
.omt.omt .site-menu .sm-sub a{padding-block:10px;font-size:14.5px;color:var(--ink-3)}
.omt.omt .site-menu .sm-sub a[aria-current="page"]{color:var(--cyan)}

/* the bar holds all links down to 1180px; below that the drawer takes them */
@media (max-width:1180px){
  .omt.omt .site-nav{display:none}
  .omt.omt .ctl-menu{display:inline-flex}
  .omt.omt .head-inner{grid-template-columns:auto 1fr;min-height:72px}
  .omt.omt .head-acts{grid-column:2}
  .omt.omt .logo img{height:38px}
}
/* English labels are longer: there the drawer takes over below 1240px, or the logo touches the
   first link between 1181 and 1230px (review 2026-10-21) */
@media (max-width:1240px){
  [dir="ltr"] .omt.omt .site-nav{display:none}
  [dir="ltr"] .omt.omt .ctl-menu{display:inline-flex}
  [dir="ltr"] .omt.omt .head-inner{grid-template-columns:auto 1fr;min-height:72px}
  [dir="ltr"] .omt.omt .head-acts{grid-column:2}
  [dir="ltr"] .omt.omt .logo img{height:38px}
}
@media (max-width:520px){
  .omt.omt .head-inner{min-height:64px;column-gap:12px;padding-inline:18px}
  .omt.omt .ctl{padding-inline:12px}
}

/* ---- light theme: once off the dark hero the bar becomes pale ---- */
html[data-omt-theme="light"].omt-scrolled .omt.omt .site-head,
html[data-omt-theme="light"] .omt.omt.omt-solid .site-head{
  --ink:#130B42; --ink-2:#3B2A6E; --ink-3:#6B5B96;
  --cyan:#0693B8; --ground:#F1EFF8; --ground-2:#FAF9FD;
  --line-soft:color-mix(in srgb,#3C1978 10%,transparent);
  background:#F1EFF8;backdrop-filter:none;-webkit-backdrop-filter:none;   /* solid: frosted over a dark section it turned a muddy grey */
  border-block-end:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
}
html[data-omt-theme="light"].omt-scrolled .omt.omt .logo .logo-dark,
html[data-omt-theme="light"] .omt.omt.omt-solid .logo .logo-dark{display:none}
html[data-omt-theme="light"].omt-scrolled .omt.omt .logo .logo-light,
html[data-omt-theme="light"] .omt.omt.omt-solid .logo .logo-light{display:block}
html[data-omt-theme="light"].omt-scrolled .omt.omt .nav-sub,
html[data-omt-theme="light"] .omt.omt.omt-solid .nav-sub{box-shadow:var(--shadow-md)}
html[data-omt-theme="light"] .omt.omt .site-menu nav{
  --ink:#130B42; --ink-2:#3B2A6E; --ink-3:#6B5B96; --cyan:#0693B8;
  background:color-mix(in srgb,#FAF9FD 96%,transparent);
  border-color:var(--border-soft);
  box-shadow:var(--shadow-md);
}


/* ---- scene.css ---- */
/* Hero scene — taken unchanged from the approved homepage (hero.css 262-886 + the generated layer block).
   Only the platform hotspot and the dead scroll-progress hooks were removed. */
/* ============================ HERO ============================
   Three bands: the conference title sits in the artwork's empty sky, the
   scene is shown whole at every width, and the practical details sit
   directly beneath it. */
.omt.omt .hero{
  position:relative;
  display:grid;
  /* the artwork's own top tone; the stage paints the field itself, and its
     ::after carries the floor colour below it */
  background:#301489;
  grid-template-rows:auto auto auto auto;
  justify-items:center;
  isolation:isolate;
  padding-block-end:clamp(22px,3.4vh,40px);
  --px:0; --py:0; --sp:0;

  /* ---- composition control, in one place ----
     The exported canvas is 1920x1080 and its highest object (Jeddah Tower)
     starts at 24.81% of that height, so the top quarter of the stage is empty
     sky. Rendering it would push the scene half a screen below the theme, so
     the stage is pulled up by exactly that empty band and given back one
     controlled gap. Nothing is cropped: the band removed contains no artwork.
     --sky = stage width x (1080/1920) x 0.2481 */
  --stage-w:min(97%,1450px);
  --sky:calc(var(--stage-w) * var(--sky-k));
  --scene-gap:clamp(8px,2.05svh,29px);
}

/* ---------------- the identity scene ----------------
   Layers keep their exported canvas positions as percentages inside a fixed
   16:9 stage, so the composition is identical at every width. The stage is
   never cropped and never scaled by hover — only the sphere reacts. */
.omt.omt .stage{
  grid-row:2;grid-column:1;
  position:relative;width:100%;
  display:grid;justify-items:center;
  pointer-events:none;z-index:1;
  /* the whole scene rises as one group — the internal relationships between
     the objects are untouched */
  margin-block-start:calc(var(--scene-gap) - var(--sky));
  isolation:isolate;
}
.omt.omt .stage::after{
  /* the floor colour continues below the artwork's frame, so the grounding
     zone does not stop at the stage's edge */
  content:"";position:absolute;inset-inline:0;top:100%;height:120vh;
  background:#130B42;z-index:-1;pointer-events:none;
}
.omt.omt .hero-scene{
  position:relative;
  width:var(--stage-w);
  aspect-ratio:var(--stage-ar);
  margin-inline:auto;
  /* Layers that are meant to run off the edge — the light plate, the solar
     array — are cut by the stage, which is the picture's own frame. Without
     this their overflow escaped every ancestor (all `visible`) and reached the
     document, where it became horizontal scroll. Clipping here is what "full
     bleed" means; it is not a crop, because the stage edge is the edge of the
     composition. `clip` keeps the block axis visible so the plate's glow can
     still spill upward. */
  overflow-x:clip;
  /* the stage itself never moves, scales or filters — rule 05 */
}
@supports not (overflow-x:clip){ .omt.omt .hero-scene{overflow:hidden} }
@media (min-width:1800px){ .omt.omt .hero{--stage-w:min(94%,1560px)} }

.omt.omt .ly,.omt.omt .fx{
  position:absolute;
  left:calc(var(--l)*1%); top:calc(var(--t)*1%);
  width:calc(var(--w)*1%); height:calc(var(--h)*1%);
  z-index:var(--z);
}
.omt.omt .ly-art{width:100%;height:100%;display:block;object-fit:contain;object-position:center}
.omt.omt .ly-bg{display:none}
/* the illuminated floor plate: pure light, so it screens onto the sky and
   breathes very slowly instead of sitting on the page as a flat cut-out */
.omt.omt .ly-ground{mix-blend-mode:screen;--dur:22s}
.omt.omt .ly-ground::after{
  content:"";position:absolute;inset:-60% -14% -30%;pointer-events:none;
  background:radial-gradient(46% 60% at 50% 62%, color-mix(in srgb,var(--cyan) 11%,transparent) 0%, transparent 72%);
}
.omt.omt .ly-ground .ly-art{animation:omt-plateBreathe var(--dur) ease-in-out infinite alternate}
@keyframes omt-plateBreathe{0%{opacity:.82;filter:brightness(.96)}100%{opacity:1;filter:brightness(1.1)}}



/* ---- turbine: only the rotor turns, around its measured hub ---- */
/* the sprite is a square centred exactly on the hub, so the origin is the
   element's own centre — no drift, no wobble, and the loop is seamless
   because a full turn returns to the identical frame */
.omt.omt .ly-rotor{--dur:11s}
.omt.omt .ly-rotor .ly-art{transform-origin:50% 50%;animation:omt-rotor var(--dur) linear infinite;will-change:transform}
@keyframes omt-rotor{to{transform:rotate(360deg)}}

/* ---- drones ----
   Two of them, the same artwork, the second mirrored so the pair face the
   sphere from either side. Their flight is four independent sine waves on four
   nested elements — vertical, horizontal, roll, pitch — each on its own period
   and all timed `linear`. Superposed, the path never repeats on a short cycle
   and never comes to rest, which is the difference between flying and hanging.
   No `alternate` and no easing to zero: those are exactly what made the old
   hover look like it was stopping in mid-air. Every period is a different
   length, so the two drones never fall into step with each other either. */
.omt.omt .dmir{position:absolute;inset:0;display:block}
.omt.omt .ly-drone2 .dmir{transform:scaleX(-1)}
.omt.omt .d-v,.omt.omt .d-h,.omt.omt .d-r,.omt.omt .d-p{position:absolute;inset:0;display:block;will-change:transform}
.omt.omt .d-v{animation:omt-dWaveV var(--tv) linear infinite}
.omt.omt .d-h{animation:omt-dWaveH var(--th) linear infinite}
.omt.omt .d-r{animation:omt-dWaveR var(--tr) linear infinite}
.omt.omt .d-p{animation:omt-dWaveP var(--tp) linear infinite}

.omt.omt .ly-drone  .d-v{--amp:3px;   --tv:6.7s}
.omt.omt .ly-drone  .d-h{--amp:2.5px; --th:8.9s}
.omt.omt .ly-drone  .d-r{--amp:1.2deg;--tr:7.3s}
.omt.omt .ly-drone  .d-p{--amp:0.7deg;--tp:5.9s}
.omt.omt .ly-drone2 .d-v{--amp:4px;   --tv:8.1s; animation-delay:-2.9s}
.omt.omt .ly-drone2 .d-h{--amp:3px;   --th:6.4s; animation-delay:-4.1s}
.omt.omt .ly-drone2 .d-r{--amp:1.5deg;--tr:9.2s; animation-delay:-1.7s}
.omt.omt .ly-drone2 .d-p{--amp:0.8deg;--tp:7.7s; animation-delay:-3.3s}


/* ---- the sphere breathes; 3–5px of float, nothing more ---- */
.omt.omt .ly-ball{--dur:7s}
.omt.omt .ly-ball .ly-art{animation:omt-ballFloat var(--dur) ease-in-out infinite alternate;will-change:transform}
@keyframes omt-ballFloat{0%{transform:translateY(-3px)}100%{transform:translateY(3px)}}

/* ---- train ---- */
.omt.omt .ly-train{--dur:34s}



/* ---- towers: light settles and lifts, never blinks ---- */
.omt.omt .ly-makkah{--dur:37s}.omt.omt .ly-jeddah{--dur:53s}
.omt.omt .ly-makkah .ly-art{animation:omt-cityLight var(--dur) ease-in-out infinite alternate}
.omt.omt .ly-jeddah .ly-art{animation:omt-cityLight var(--dur) ease-in-out infinite alternate reverse}
@keyframes omt-cityLight{0%{filter:brightness(.95)}100%{filter:brightness(1.08)}}

/* ================= motion built out of the artwork =================
   Three objects move because the object itself would, and each is driven by
   its own pixels rather than by a shape laid over it. Everything else in the
   scene is still. */
.omt.omt .fx{
  pointer-events:none;mix-blend-mode:screen;overflow:hidden;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* ---- water ----
   The outer span carries the mask and never moves, so the water's outline is
   exactly the artwork's. The inner element carries a copy of the layer's OWN
   pixels and is the only thing that translates — so what you see moving is the
   detail inside the water, not the shape of it. Each set runs as a pair half a
   cycle apart with an opacity envelope, which is what makes the loop endless
   rather than resetting.

   What translates is a FLOW TEXTURE, not the layer art: the raw fountain sprite
   ends in a lit basin deck and the raw plant sprite is mostly building, and
   translating either slides that hard edge up through the mask as a strange
   band. tools/water.py strips both to water only and feathers the result, so
   there is no edge anywhere in the moving copy to become visible. There is no
   scale and no bottom origin either — the water is already there; it is never
   revealed from below. */
.omt.omt .wtr{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  mix-blend-mode:overlay;
}
.omt.omt .wtr > i{
  position:absolute;inset:-16% 0;display:block;
  background-image:var(--tex);background-size:100% 100%;background-repeat:no-repeat;
  animation:omt-wtrFlow var(--dur) linear infinite;
  animation-delay:var(--dly,0s);
  will-change:transform,opacity;
}
.omt.omt .wtr-soft > i{filter:blur(var(--bl))}
/* the channels want their internal streaks to read, so the moving copy is
   pushed a little harder than the still one under it */
.omt.omt .wtr-chan > i{filter:contrast(1.3) brightness(1.12)}
/* the crown of the jet adds light rather than modulating it, so the top breaks
   up into mist instead of travelling as a solid column */
.omt.omt .wtr-spray{mix-blend-mode:screen}
.omt.omt .wtr-spray > i{filter:blur(var(--bl)) brightness(1.05)}
@keyframes omt-wtrFlow{
  0%  {transform:translateY(var(--from));opacity:0}
  22% {opacity:var(--o)}
  74% {opacity:var(--o)}
  100%{transform:translateY(var(--to));opacity:0}
}

/* ---- pylon: a discharge that follows the structure ----
   The path is the tower's own centre line, so the charge climbs the lattice.
   A short dash travels it; the cross-arms fire as it passes their height. It
   runs only when the scheduler says so, never on a free-running loop, so it can
   be kept out of the way of the drone's scan. */
.omt.omt .arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;mix-blend-mode:screen;opacity:0}
.omt.omt .arc path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.omt.omt .arc-halo{stroke:color-mix(in srgb,var(--cyan) 95%,transparent);stroke-width:11;filter:blur(4.2px)}
.omt.omt .arc-core{stroke:#F5FEFF;stroke-width:3.2}
.omt.omt .arc-b{stroke:color-mix(in srgb,#DDFAFF 95%,transparent);stroke-width:2.8;opacity:0;filter:blur(.6px)}
.omt.omt .ly-pylon.fire .arc{opacity:1}
.omt.omt .ly-pylon.fire .arc-halo,.omt.omt .ly-pylon.fire .arc-core{
  stroke-dasharray:55 400;stroke-dashoffset:55;
  animation:omt-arcRun 2.3s cubic-bezier(.4,.03,.5,1) both;
}
.omt.omt .ly-pylon.fire .arc-halo{animation-duration:2.45s;opacity:.72}
.omt.omt .ly-pylon.fire .arc-b{animation:omt-arcSpur .34s ease-out both;
  animation-delay:calc(2.3s * (0.30 + var(--i) * 0.27))}
@keyframes omt-arcRun{
  0%  {stroke-dashoffset:55}
  86% {stroke-dashoffset:-300}
  100%{stroke-dashoffset:-400;opacity:0}
}
@keyframes omt-arcSpur{0%{opacity:0}35%{opacity:1}100%{opacity:0}}

/* ---- the train: CONTINUOUS AMBIENT MOTION ----
   No event, no arrival, no trigger. The train simply never sits perfectly
   still: it drifts three pixels along the rail's own axis and back over seven
   seconds, with two faint suspension dips inside that cycle, and its lamp
   breathes on an unrelated rhythm. The keyframes start and end on the same
   transform, so the loop closes on itself — there is nothing to reset and
   nothing to see restart. Amplitude is deliberately below the level that reads
   as travel: it removes the stillness, it does not perform. */
.omt.omt .ly-train{
  --drift:3px;
  animation:omt-trainDrift 7.2s ease-in-out infinite;
}
@keyframes omt-trainDrift{
  0%  {transform:translate(0,0)}
  25% {transform:translate(calc(var(--drift) * var(--rail-x) * .42),
                           calc(var(--drift) * var(--rail-y) * .42 + .5px))}
  50% {transform:translate(calc(var(--drift) * var(--rail-x)),
                           calc(var(--drift) * var(--rail-y)))}
  75% {transform:translate(calc(var(--drift) * var(--rail-x) * .55),
                           calc(var(--drift) * var(--rail-y) * .55 + .45px))}
  100%{transform:translate(0,0)}
}

.omt.omt .trn{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  mix-blend-mode:screen;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* physical `right`, not logical: the sprite is fixed artwork and its nose does
   not swap ends when the page does */
.omt.omt .trn-lamp::before{
  content:"";position:absolute;right:1%;top:44%;width:14%;height:30%;
  background:radial-gradient(ellipse at 70% 50%, #FFFFFF 0%,
    color-mix(in srgb,var(--cyan) 48%,transparent) 34%, transparent 74%);
  animation:omt-lampBreath 3.6s ease-in-out infinite alternate;
}
@keyframes omt-lampBreath{from{opacity:.4}to{opacity:.58}}

/* just enough presence in front of the lamp to say it is lit */
.omt.omt .trn-beam{
  position:absolute;right:-6%;top:47%;width:15%;height:8%;
  transform:rotate(var(--rail-a));transform-origin:100% 50%;
  background:linear-gradient(90deg,
    color-mix(in srgb,#DDF8FF 20%,transparent) 0%,
    color-mix(in srgb,var(--cyan) 10%,transparent) 45%, transparent 100%);
  filter:blur(3px);pointer-events:none;mix-blend-mode:screen;
  animation:omt-beamBreath 4.4s ease-in-out infinite alternate;
}
@keyframes omt-beamBreath{from{opacity:.08}to{opacity:.17}}

/* ---- the communications dish: signal tracking ----
   Only the reflector moves. It is its own layer, cut from the scene canvas, and
   it turns about the point where it meets its mount — a pivot derived from
   where the head's lowest pixels still have base pixels beneath them, not one
   placed by eye. Five degrees each way, slow, with a real pause: calibration,
   not a radar sweep. Its own delay keeps it clear of every other event. */
.omt.omt .ly-telecom-head{
  animation:omt-dishTrack 13s ease-in-out 6.5s infinite;
  will-change:transform;
}
@keyframes omt-dishTrack{
  0%   {transform:rotate(0deg)}
  19%  {transform:rotate(5deg)}
  35%  {transform:rotate(0deg)}
  54%  {transform:rotate(-5deg)}
  70%  {transform:rotate(0deg)}
  100% {transform:rotate(0deg)}
}

/* ---- the drone's sensor ----
   A zero-size anchor that inherits the drone's hover keyframes. The scan reads
   this element's box every frame, so the beam cannot come adrift from the
   drone: there is no cached origin anywhere in the system. */
.omt.omt .drone-sensor{
  /* the gimbal camera's centre, measured on drone.webp (102,84 of 172x125) —
     not the bottom of the sprite, which is the landing skids */
  position:absolute;left:59.3%;top:67.6%;width:0;height:0;display:block;
  pointer-events:none;
}
.omt.omt .scanfx{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:13;pointer-events:none;mix-blend-mode:screen;
}

/* ---- the drone's blades ----
   Each blade is its own cut-out of the sprite, sitting on the drone's full box
   so it needs no placement of its own, and turning about the centroid of its
   own mass. They live inside the hover stack, so they ride every wave the body
   rides. Fast enough to read as a disc rather than as three ticking arms, and
   faded and softened for the same reason — a blade at this size is a blur in
   any photograph of a flying drone.

   The sweep happens inside the blade disc, not on the screen plane. The disc is
   a circle seen from below at an angle, so it draws as an ellipse: the least
   occluded blade covers 77x31 px of its own sprite, which puts the squash at
   0.40. Rotating flat instead was measured and looked it — the blades climbed
   away from their arms and read as broken off. */
.omt.omt .drot{
  position:absolute;inset:0;display:block;pointer-events:none;
  background:var(--src) center/100% 100% no-repeat;
  transform-origin:var(--px) var(--py);
  animation:omt-drotSpin var(--dur) linear infinite;
  /* no filter here on purpose. The blur is baked into the sprite along the
     blade's own sweep (tools/rotors.py), which is both cheaper — a CSS filter
     would cost six composited layers, and layer pressure is what made the hero
     flicker once already — and more correct, since it follows the squashed
     disc the blade turns in rather than the screen plane. */
  opacity:.5;
  --sq:.4;
}
@keyframes omt-drotSpin{
  from{transform:scaleY(var(--sq)) rotate(0deg)      scaleY(calc(1 / var(--sq)))}
  to  {transform:scaleY(var(--sq)) rotate(360deg)    scaleY(calc(1 / var(--sq)))}
}
@media (prefers-reduced-motion:reduce){ .omt.omt .drot{animation:none;opacity:1} }

/* ================= light climbing Jeddah Tower's own neon =================
   The building is drawn with cyan neon along its corner and along every floor
   step. A band of light travels up that neon and nothing else: the mask is the
   artwork's own lines, lifted by their colour rather than by brightness alone,
   so the lit glass and the purple facade behind them stay out of it.

   Same two passes as the floor, and for the same reason — the crisp band paints
   the line, the halo blurs on a wrapper because CSS runs a filter before a mask
   and blurring the masked layer would clip the bloom back onto its own line. */
.omt.omt .blf{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.omt.omt .blf-halo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  filter:blur(3px);opacity:.85}
.omt.omt .blf-line{mix-blend-mode:screen}
.omt.omt .climb{
  position:absolute;inset-inline:0;top:100%;height:30%;display:block;
  background:linear-gradient(to top,
    transparent 0,
    color-mix(in srgb,var(--c) 45%,transparent) 38%,
    var(--c) 62%,
    #DDFAFF 74%,
    color-mix(in srgb,var(--c) 55%,transparent) 86%,
    transparent 100%);
  animation:omt-climbUp var(--dur) linear infinite var(--dly);
}
.omt.omt .climb-cy{--c:#2FE8FF}
.omt.omt .climb-vi{--c:#A96BFF}
/* From clear of the podium to clear of the crown: the band is 30% tall and
   starts at the bottom edge, so it needs 100/30 plus a little to leave the top.

   The opacity ramp is not decoration. The crown carries 16% of all the neon in
   the artwork in its top tenth, so a band that stays lit to the end piles up
   there: the light stops travelling while the band is still moving, which
   measured as the centroid falling from 5% of the tower per step to 0.7%. Fading
   it out across the last stretch keeps the light moving the whole way. */
@keyframes omt-climbUp{
  0%  {transform:translateY(0);       opacity:0}
  9%  {opacity:1}
  78% {opacity:1}
  100%{transform:translateY(-380%);   opacity:0}
}
@media (prefers-reduced-motion:reduce){ .omt.omt .climb{animation:none;opacity:0} }

/* ================= data running out along the floor lines =================
   Each streak leaves the platform and runs outward down ONE of the plate's
   lines, toward the viewer — not a ring that lights every line at the same
   radius. The whole set is masked to the lit lines the artwork already has, so
   light only ever appears on a real line and the floor geometry never moves.
   The colours are the identity's own — cyan, violet, magenta.

   The streak PAINTS the line rather than screening onto it. Screen was tried
   first and measured as almost no change at all, for a good reason: the plate's
   lines are already near-white, so adding light to them has nowhere to go. What
   reads is the hue — a white line turning cyan is a large change on two
   channels — so the crisp pass blends normally and only the halo screens. */
.omt.omt .flow{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* the halo: the same streaks, blurred on a wrapper and added as light, so the
   coloured line carries a bloom around it instead of ending at its own edge.
   Two radii — a tight one for the core, a wide one for the spill. */
.omt.omt .flow-halo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.omt.omt .flow-halo-t{filter:blur(3px);opacity:.95}
.omt.omt .flow-halo-w{filter:blur(14px);opacity:.8}
.omt.omt .flow-line{mix-blend-mode:normal}
.omt.omt .ray{
  /* The ring expands outward from the platform, which is the only motion that
     follows the converging lines on a floor in perspective. Two masks cut it
     down: one keeps the near half only, so the light travels toward the viewer
     rather than away, and one keeps a single horizontal slice, so this is a
     streak on part of the floor and not a ring lighting all of it. A conic
     wedge was tried first and paints nothing — the plate is so flat that a
     downward sector encloses almost no pixels at all. */
  position:absolute;inset:0;display:block;
  transform-origin:var(--fx) var(--fy);
  background:radial-gradient(ellipse 41.7% 25.6% at var(--fx) var(--fy),
    transparent 0 26%,
    color-mix(in srgb,var(--c) 25%,transparent) 40%,
    color-mix(in srgb,var(--c) 80%,transparent) 55%,
    var(--c) 64%,
    color-mix(in srgb,var(--c) 70%,transparent) 74%,
    transparent 92%);
  -webkit-mask-image:
    linear-gradient(90deg, transparent var(--x1), #000 calc(var(--x1) + 5%),
                           #000 calc(var(--x2) - 5%), transparent var(--x2));
  mask-image:
    linear-gradient(90deg, transparent var(--x1), #000 calc(var(--x1) + 5%),
                           #000 calc(var(--x2) - 5%), transparent var(--x2));
  filter:saturate(1.35);
  animation:omt-rayOut var(--dur) linear infinite var(--dly);
}
.omt.omt .ray-cy{--c:#2FE8FF}
.omt.omt .ray-vi{--c:#A96BFF}
.omt.omt .ray-mg{--c:#FF4FC0}
@keyframes omt-rayOut{
  0%  {transform:scale(.3);opacity:0}
  18% {opacity:1}
  82% {opacity:.85}
  100%{transform:scale(2);opacity:0}
}

/* ================= the sphere's own light ================= */
/* Everything that belongs to the sphere is expressed as a multiple of its
   own radius and placed at its own centre, so the mobile composition moves and
   grows the whole apparatus by changing four numbers. */
.omt.omt .sph-glow{
  position:absolute;left:calc(var(--sph-x)*1%);top:calc(var(--sph-y)*1%);border-radius:50%;
  transform:translate(-50%,-50%);mix-blend-mode:screen;pointer-events:none;z-index:11;
}
.omt.omt .sph-halo{
  width:calc(var(--sph-r)*3.617%);aspect-ratio:1;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--cyan) calc(20% * var(--boost,1)),transparent) 0%,
    color-mix(in srgb,var(--violet-2) calc(10% * var(--boost,1)),transparent) 42%, transparent 70%);
  /* negative delay so the first painted frame is mid-breath, not the dim end */
  animation:omt-breathe 6.5s -3.25s ease-in-out infinite alternate;
}
.omt.omt .sph-core{
  width:calc(var(--sph-r)*1.277%);aspect-ratio:1;
  background:radial-gradient(circle,
    color-mix(in srgb,#FFFFFF calc(36% * var(--boost,1)),transparent) 0%,
    color-mix(in srgb,var(--cyan) calc(25% * var(--boost,1)),transparent) 34%, transparent 72%);
  animation:omt-breathe 4.3s -2.15s ease-in-out infinite alternate;
}
@keyframes omt-breathe{0%{opacity:.55;transform:translate(-50%,-50%) scale(.96)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}

/* ================= orbital data traces =================
   Not decoration: a few evenly-spaced marks per ring, uniform within a ring,
   drawn as short streaks travelling a thin trace. Each ring appears twice —
   once under the sphere, once over it clipped to the near half — so a mark
   passes behind the sphere on the far side of its path. */
.omt.omt .orbits{position:absolute;inset:0;pointer-events:none}
.omt.omt .orbits-back{z-index:10}
.omt.omt .orbits-front{z-index:12}
.omt.omt .orbit{
  position:absolute;left:calc(var(--sph-x)*1%);top:calc(var(--sph-y)*1%);
  width:calc(var(--sph-r)*var(--rk)*2%);aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(var(--tilt)) scaleY(var(--sq));
}
.omt.omt .orbit-front{clip-path:inset(50% -25% -25% -25%)}
.omt.omt .orbit-trace{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--cyan) 13%,transparent);
}
.omt.omt .op{
  position:absolute;inset:0;
  animation:omt-orbitSpin calc(var(--dur) / var(--speed,1)) linear infinite var(--dir);
  animation-delay:var(--d);
  will-change:transform;
}
@keyframes omt-orbitSpin{to{transform:rotate(360deg)}}
/* a short streak lying along the path, un-squashed so it keeps its weight */
.omt.omt .streak{
  position:absolute;left:50%;top:0;display:block;
  width:var(--len);height:1.6px;border-radius:2px;
  transform:translate(-50%,-50%) scaleY(calc(1 / var(--sq)));
  background:linear-gradient(to right,
    transparent 0%,
    color-mix(in srgb,var(--cyan) 48%,transparent) 45%,
    #A9E8F7 78%, transparent 100%);
  opacity:.7;
}
.omt.omt .orbit-2 .streak{background:linear-gradient(to right,transparent,
  color-mix(in srgb,var(--violet-2) 46%,transparent) 50%, #CDB6F0 82%, transparent)}
.omt.omt .orbit-3 .streak{height:1.2px;opacity:.6}

/* ================= signal network on the sphere =================
   Fixed chords that light in sequence — a system moving data, not sparkle. */
.omt.omt .signal{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:11;pointer-events:none;overflow:visible;mix-blend-mode:screen;
}
/* ---- the identity reveal ----
   The sphere's own printed mesh is the base state and is always there. This
   layer is the OMAINTEC mark's real outlines, undrawn at rest and drawn only
   when the pointer enters — never on load. Transitions rather than animations,
   on purpose: a transition is reversible, cannot restart while the pointer
   moves inside the sphere, and does not run at first paint. `pathLength="1"`
   normalises every outline so one dash rule draws them all, and the stagger
   runs largest shape first, so the badge resolves before the lettering. */
.omt.omt .omt-logo{
  position:absolute;left:calc(var(--sph-x)*1%);top:calc(var(--sph-y)*1%);
  width:calc(var(--sph-r)*1.62%);aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:12;pointer-events:none;overflow:visible;mix-blend-mode:screen;
}
.omt.omt .lg-p{
  fill:none;stroke:color-mix(in srgb,#CFF7FF 45%,var(--cyan));stroke-width:.58;
  stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  transition:stroke-dashoffset 640ms cubic-bezier(.3,.72,.32,1) calc(var(--i) * 28ms),
             opacity 180ms linear calc(var(--i) * 28ms);
}
.omt.omt .sph-hot .lg-p{stroke-dashoffset:0;opacity:1}
.omt.omt .lg-n{
  fill:#EAFDFF;opacity:0;
  transition:opacity 260ms ease calc(var(--i) * 28ms);
}
.omt.omt .sph-hot .lg-n{opacity:.85}
/* a violet cast under the cyan, kept to the identity and used sparingly */
.omt.omt .sph-hot .omt-logo{filter:drop-shadow(0 0 .9px color-mix(in srgb,var(--violet-2) 70%,transparent))}
/* leaving retracts, and quicker than it drew */
.omt.omt .hero-scene:not(.sph-hot) .lg-p{
  transition-duration:380ms,160ms;
  transition-delay:calc((39 - var(--i)) * 14ms), calc((39 - var(--i)) * 14ms + 190ms);
}
.omt.omt .hero-scene:not(.sph-hot) .lg-n{transition-duration:200ms;transition-delay:0ms}

/* ---- the same mark, found by the scan ----
   When the inspection plane travels down through the sphere the outlines fill
   in behind it, and when it climbs back out they retract with it: the identity
   is what the drone finds inside, not a second effect playing alongside. The
   progress is the plane's own height, written by the scan each frame, so there
   is no transition here to fight it — a transition would lag the plane and keep
   drawing after it had left. Hover still wins: it is a deliberate act. */
.omt.omt .sph-scan:not(.sph-hot) .lg-p{transition:none;stroke-dashoffset:0;opacity:1}
.omt.omt .sph-scan:not(.sph-hot) .lg-n{transition:none;opacity:.85}
/* Leaving the scan must not animate. The retract transition belongs to hover —
   a deliberate act with a visible ending — but when the circle closes and the
   scan class comes off, that same transition would replay the mark fully drawn
   and unmasked for 380ms. This is the one frame where it is switched off, so
   the mark is simply already gone when the circle is. */
.omt.omt .hero-scene.sph-cut .lg-p,
.omt.omt .hero-scene.sph-cut .lg-n{transition:none}
.omt.omt .sph-scan:not(.sph-hot) .omt-logo{
  filter:drop-shadow(0 0 .9px color-mix(in srgb,var(--violet-2) 70%,transparent));
  -webkit-mask-image:linear-gradient(180deg,
    #000 0 calc(var(--logo-y,0%) - 2.5%), transparent var(--logo-y,0%));
  mask-image:linear-gradient(180deg,
    #000 0 calc(var(--logo-y,0%) - 2.5%), transparent var(--logo-y,0%));
}

/* the only pointer target in the whole hero */
.omt.omt .sph-hit{
  position:absolute;left:calc(var(--sph-x)*1%);top:calc(var(--sph-y)*1%);
  width:calc(var(--sph-r)*2.34%);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:14;padding:0;border:0;background:none;cursor:pointer;
  pointer-events:auto;-webkit-tap-highlight-color:transparent;
}
.omt.omt .sph-hit:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}

/* ================= sphere hover =================
   The sphere does not move. Not a translate, not a scale, not a tilt, and the
   pointer is a trigger rather than a controller — nothing here reads the
   pointer's position. The whole response is light: the network draws, the nodes
   answer, and two glow layers rise. The hit area is a stable disc a little
   larger than the sphere, so travelling over a node cannot make it flicker. */
.omt.omt .hero-scene{--boost:1;--speed:1}

/* an aura that rises on entry, so the glow can ease in without touching the
   base light (whose gradient stops cannot be transitioned) */
.omt.omt .sph-aura,.omt.omt .sph-ignite{
  position:absolute;left:calc(var(--sph-x)*1%);top:calc(var(--sph-y)*1%);
  aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;z-index:11;mix-blend-mode:screen;
  opacity:0;
}
.omt.omt .sph-aura{
  width:calc(var(--sph-r)*4.3%);
  background:radial-gradient(circle,
    color-mix(in srgb,var(--cyan) 24%,transparent) 0%,
    color-mix(in srgb,var(--violet-2) 13%,transparent) 44%, transparent 72%);
  transition:opacity 430ms cubic-bezier(.3,.7,.3,1);
}
.omt.omt .sph-ignite{
  width:calc(var(--sph-r)*1.6%);
  background:radial-gradient(circle,
    color-mix(in srgb,#FFFFFF 55%,transparent) 0%,
    color-mix(in srgb,var(--cyan) 32%,transparent) 38%, transparent 72%);
  transition:opacity 380ms cubic-bezier(.3,.7,.3,1) 90ms;
}
.omt.omt .sph-hot .sph-aura{opacity:1}
.omt.omt .sph-hot .sph-ignite{opacity:.6}
/* the way back out is quicker than the way in */
.omt.omt .hero-scene:not(.sph-hot) .sph-aura{transition-duration:300ms}
.omt.omt .hero-scene:not(.sph-hot) .sph-ignite{transition-duration:260ms;transition-delay:0ms}

/* ================= generated by src/portal.mjs — do not hand-edit ================= */
.omt.omt .hero{--stage-ar:1920/1080;--sky-k:0.13958}
.omt.omt .stage{background:linear-gradient(180deg,
    #301489 0%,
    #2E1484 10%,
    #32157F 22%,
    #3B1A84 32%,
    #441D8C 40%,
    #4E2293 48%,
    #5D289F 56%,
    #6E31AC 63%,
    #7836B5 68%,
    #853CBE 72%,
    #8A3EC3 74%,
    #6A2EA0 76%,
    #411F76 78%,
    #251259 81%,
    #1A0D4D 85%,
    #180C48 90%,
    #170B45 95%,
    #130B42 100%)}
.omt.omt .ly-ground{--fx:49.886%;--fy:64.084%}
@keyframes omt-dWaveV{0.00%{transform:translateY(calc(var(--amp) * 0.0000))}4.17%{transform:translateY(calc(var(--amp) * 0.2588))}8.33%{transform:translateY(calc(var(--amp) * 0.5000))}12.50%{transform:translateY(calc(var(--amp) * 0.7071))}16.67%{transform:translateY(calc(var(--amp) * 0.8660))}20.83%{transform:translateY(calc(var(--amp) * 0.9659))}25.00%{transform:translateY(calc(var(--amp) * 1.0000))}29.17%{transform:translateY(calc(var(--amp) * 0.9659))}33.33%{transform:translateY(calc(var(--amp) * 0.8660))}37.50%{transform:translateY(calc(var(--amp) * 0.7071))}41.67%{transform:translateY(calc(var(--amp) * 0.5000))}45.83%{transform:translateY(calc(var(--amp) * 0.2588))}50.00%{transform:translateY(calc(var(--amp) * 0.0000))}54.17%{transform:translateY(calc(var(--amp) * -0.2588))}58.33%{transform:translateY(calc(var(--amp) * -0.5000))}62.50%{transform:translateY(calc(var(--amp) * -0.7071))}66.67%{transform:translateY(calc(var(--amp) * -0.8660))}70.83%{transform:translateY(calc(var(--amp) * -0.9659))}75.00%{transform:translateY(calc(var(--amp) * -1.0000))}79.17%{transform:translateY(calc(var(--amp) * -0.9659))}83.33%{transform:translateY(calc(var(--amp) * -0.8660))}87.50%{transform:translateY(calc(var(--amp) * -0.7071))}91.67%{transform:translateY(calc(var(--amp) * -0.5000))}95.83%{transform:translateY(calc(var(--amp) * -0.2588))}100.00%{transform:translateY(calc(var(--amp) * -0.0000))}}
@keyframes omt-dWaveH{0.00%{transform:translateX(calc(var(--amp) * 0.0000))}4.17%{transform:translateX(calc(var(--amp) * 0.2588))}8.33%{transform:translateX(calc(var(--amp) * 0.5000))}12.50%{transform:translateX(calc(var(--amp) * 0.7071))}16.67%{transform:translateX(calc(var(--amp) * 0.8660))}20.83%{transform:translateX(calc(var(--amp) * 0.9659))}25.00%{transform:translateX(calc(var(--amp) * 1.0000))}29.17%{transform:translateX(calc(var(--amp) * 0.9659))}33.33%{transform:translateX(calc(var(--amp) * 0.8660))}37.50%{transform:translateX(calc(var(--amp) * 0.7071))}41.67%{transform:translateX(calc(var(--amp) * 0.5000))}45.83%{transform:translateX(calc(var(--amp) * 0.2588))}50.00%{transform:translateX(calc(var(--amp) * 0.0000))}54.17%{transform:translateX(calc(var(--amp) * -0.2588))}58.33%{transform:translateX(calc(var(--amp) * -0.5000))}62.50%{transform:translateX(calc(var(--amp) * -0.7071))}66.67%{transform:translateX(calc(var(--amp) * -0.8660))}70.83%{transform:translateX(calc(var(--amp) * -0.9659))}75.00%{transform:translateX(calc(var(--amp) * -1.0000))}79.17%{transform:translateX(calc(var(--amp) * -0.9659))}83.33%{transform:translateX(calc(var(--amp) * -0.8660))}87.50%{transform:translateX(calc(var(--amp) * -0.7071))}91.67%{transform:translateX(calc(var(--amp) * -0.5000))}95.83%{transform:translateX(calc(var(--amp) * -0.2588))}100.00%{transform:translateX(calc(var(--amp) * -0.0000))}}
@keyframes omt-dWaveR{0.00%{transform:rotate(calc(var(--amp) * 0.0000))}4.17%{transform:rotate(calc(var(--amp) * 0.2588))}8.33%{transform:rotate(calc(var(--amp) * 0.5000))}12.50%{transform:rotate(calc(var(--amp) * 0.7071))}16.67%{transform:rotate(calc(var(--amp) * 0.8660))}20.83%{transform:rotate(calc(var(--amp) * 0.9659))}25.00%{transform:rotate(calc(var(--amp) * 1.0000))}29.17%{transform:rotate(calc(var(--amp) * 0.9659))}33.33%{transform:rotate(calc(var(--amp) * 0.8660))}37.50%{transform:rotate(calc(var(--amp) * 0.7071))}41.67%{transform:rotate(calc(var(--amp) * 0.5000))}45.83%{transform:rotate(calc(var(--amp) * 0.2588))}50.00%{transform:rotate(calc(var(--amp) * 0.0000))}54.17%{transform:rotate(calc(var(--amp) * -0.2588))}58.33%{transform:rotate(calc(var(--amp) * -0.5000))}62.50%{transform:rotate(calc(var(--amp) * -0.7071))}66.67%{transform:rotate(calc(var(--amp) * -0.8660))}70.83%{transform:rotate(calc(var(--amp) * -0.9659))}75.00%{transform:rotate(calc(var(--amp) * -1.0000))}79.17%{transform:rotate(calc(var(--amp) * -0.9659))}83.33%{transform:rotate(calc(var(--amp) * -0.8660))}87.50%{transform:rotate(calc(var(--amp) * -0.7071))}91.67%{transform:rotate(calc(var(--amp) * -0.5000))}95.83%{transform:rotate(calc(var(--amp) * -0.2588))}100.00%{transform:rotate(calc(var(--amp) * -0.0000))}}
@keyframes omt-dWaveP{0.00%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.0000))}4.17%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.2588))}8.33%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.5000))}12.50%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.7071))}16.67%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.8660))}20.83%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.9659))}25.00%{transform:perspective(620px) rotateX(calc(var(--amp) * 1.0000))}29.17%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.9659))}33.33%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.8660))}37.50%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.7071))}41.67%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.5000))}45.83%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.2588))}50.00%{transform:perspective(620px) rotateX(calc(var(--amp) * 0.0000))}54.17%{transform:perspective(620px) rotateX(calc(var(--amp) * -0.2588))}58.33%{transform:perspective(620px) rotateX(calc(var(--amp) * -0.5000))}62.50%{transform:perspective(620px) rotateX(calc(var(--amp) * -0.7071))}66.67%{transform:perspective(620px) rotateX(calc(var(--amp) * -0.8660))}70.83%{transform:perspective(620px) rotateX(calc(var(--amp) * -0.9659))}75.00%{transform:perspective(620px) rotateX(calc(var(--amp) * -1.0000))}79.17%{transform:perspective(620px) rotateX(calc(var(--amp) * -0.9659))}83.33%{transform:perspective(620px) rotateX(calc(var(--amp) * -0.8660))}87.50%{transform:perspective(620px) rotateX(calc(var(--amp) * -0.7071))}91.67%{transform:perspective(620px) rotateX(calc(var(--amp) * -0.5000))}95.83%{transform:perspective(620px) rotateX(calc(var(--amp) * -0.2588))}100.00%{transform:perspective(620px) rotateX(calc(var(--amp) * -0.0000))}}
.omt.omt .ly-telecom-head{transform-origin:43.443% 57.353%}
.omt.omt .ly-train{--rail-x:0.9955;--rail-y:0.0945;--rail-a:5.42deg;
  --gx:calc(var(--glide) * var(--rail-x));--gy:calc(var(--glide) * var(--rail-y))}
.omt.omt .hero-scene{--sph-x:49.9;--sph-y:60.2;--sph-r:9.4;--ped-y:80}
.omt.omt .ly-bg,.omt.omt .fx-on-bg{--l:0;--t:0;--w:100;--h:100;--z:0}
.omt.omt .ly-ground,.omt.omt .fx-on-ground{--l:6;--t:58.589;--w:88;--h:33.411;--z:1}
.omt.omt .ly-makkah,.omt.omt .fx-on-makkah{--l:81.6242;--t:32.7778;--w:18.2717;--h:55;--z:1}
.omt.omt .ly-jeddah,.omt.omt .fx-on-jeddah{--l:1.822;--t:24.8148;--w:23.5815;--h:54.4444;--z:2}
.omt.omt .ly-fountain,.omt.omt .fx-on-fountain{--l:12.8058;--t:25.5556;--w:21.9677;--h:56.2963;--z:3}
.omt.omt .ly-pylon,.omt.omt .fx-on-pylon{--l:78.2405;--t:52.6852;--w:5.6741;--h:27.5926;--z:4}
.omt.omt .ly-plant,.omt.omt .fx-on-plant{--l:56.5851;--t:52.5926;--w:24.4144;--h:28.0556;--z:5}
.omt.omt .ly-wind,.omt.omt .fx-on-wind{--l:25.0521;--t:53.1481;--w:17.3958;--h:24.2593;--z:6}
.omt.omt .ly-drone,.omt.omt .fx-on-drone{--l:33.5242;--t:32.3148;--w:8.9537;--h:11.5741;--z:7}
.omt.omt .ly-drone2,.omt.omt .fx-on-drone2{--l:57.33;--t:30.5;--w:8.9537;--h:11.5741;--z:7}
.omt.omt .ly-rotor,.omt.omt .fx-on-rotor{--l:25.4688;--t:37.8704;--w:15.9375;--h:28.3333;--z:7}
.omt.omt .ly-telecom,.omt.omt .fx-on-telecom{--l:29.9844;--t:68.5185;--w:9.5263;--h:12.5926;--z:8}
.omt.omt .ly-telecom-head,.omt.omt .fx-on-telecom-head{--l:29.9844;--t:68.5185;--w:9.5263;--h:12.5926;--z:8}
.omt.omt .ly-network,.omt.omt .fx-on-network{--l:36.0229;--t:63.3333;--w:4.3727;--h:13.9815;--z:9}
.omt.omt .ly-ball,.omt.omt .fx-on-ball{--l:21.8116;--t:42.8704;--w:56.0645;--h:48.6111;--z:10}
.omt.omt .ly-solar,.omt.omt .fx-on-solar{--l:0;--t:68.1287;--w:18.0115;--h:15.575;--z:11}
.omt.omt .ly-train,.omt.omt .fx-on-train{--l:70.9526;--t:71.3099;--w:29.0474;--h:26.0975;--z:12}

/* ---- mobile composition: the same layers, a different picture ---- */
@media (max-width:600px){
  .omt.omt .hero{--stage-ar:7/6;--sky-k:0.23535}
  .omt.omt .ly-ground{--fx:50.078%;--fy:50.615%}
  .omt.omt .hero-scene{--sph-x:50.084;--sph-y:62.242;--sph-r:14.084;--ped-y:81.711}
  .omt.omt .ly-ground,.omt.omt .fx-on-ground{--l:-4;--t:68.091;--w:108;--h:26.909;--z:1}
  .omt.omt .ly-makkah,.omt.omt .fx-on-makkah{--l:76;--t:32.591;--w:24;--h:47.409;--z:1}
  .omt.omt .ly-jeddah,.omt.omt .fx-on-jeddah{--l:0;--t:42.152;--w:23;--h:34.848;--z:2}
  .omt.omt .ly-fountain,.omt.omt .fx-on-fountain{--l:27;--t:42.001;--w:22;--h:36.999;--z:3}
  .omt.omt .ly-pylon,.omt.omt .fx-on-pylon{--l:66;--t:51.874;--w:8.5;--h:27.126;--z:4}
  .omt.omt .ly-plant,.omt.omt .fx-on-plant{--l:57;--t:60.885;--w:28;--h:21.115;--z:5}
  .omt.omt .ly-wind,.omt.omt .fx-on-wind{--l:6;--t:66.036;--w:24;--h:21.964;--z:6}
  .omt.omt .ly-drone,.omt.omt .fx-on-drone{--l:5;--t:27.458;--w:19.5;--h:16.542;--z:7}
  .omt.omt .ly-drone2,.omt.omt .fx-on-drone2{--l:72;--t:29.73;--w:18;--h:15.27;--z:7}
  .omt.omt .ly-telecom,.omt.omt .fx-on-telecom{--l:14;--t:74.59;--w:12;--h:10.41;--z:8}
  .omt.omt .ly-telecom-head,.omt.omt .fx-on-telecom-head{--l:14;--t:74.59;--w:12;--h:10.41;--z:8}
  .omt.omt .ly-network,.omt.omt .fx-on-network{--l:6;--t:73.959;--w:5.5;--h:11.541;--z:9}
  .omt.omt .ly-ball,.omt.omt .fx-on-ball{--l:8;--t:45.203;--w:84;--h:47.797;--z:10}
  .omt.omt .ly-solar,.omt.omt .fx-on-solar{--l:-2;--t:81.246;--w:26;--h:14.754;--z:11}
  .omt.omt .ly-train,.omt.omt .fx-on-train{--l:63;--t:75.185;--w:37;--h:21.815;--z:12}
  .omt.omt .ly-rotor,.omt.omt .fx-on-rotor{--l:6.575;--t:52.204;--w:21.988;--h:25.653;--z:7}
  .omt.omt .ly-bg,.omt.omt .fx-on-bg{--l:0;--t:0;--w:100;--h:100;--z:0}
}
/* ================= end generated ================= */


/* ---- hero.css ---- */
/* ============================ HERO — composition ============================
   The identity scene is untouched (scene.css). What is designed here is the
   type and the actions around it, in four bands:

     1  TOP     the conference's name and edition as one eyebrow line, then
                "Under the Theme:" and the theme itself — the headline
     2  ACT     the date and the venue on one line, and the two buttons, so the
                first screen always holds the offer and the way to take it
     3  STAGE   the scene, exactly as approved
     4  INFO    under the platform: the 20-hour CPD badge and its sentence on
                one side, the countdown on the other, divided by a cyan rule —
                no panel, only hairlines, so the band reads as part of the floor

   On phones the actions move under the scene (the picture still comes first
   after the headline) and the info band stacks. */

/* The stage paints its floor colour 120vh below itself; on WordPress the next
   block is not ours, so the hero clips at its own edge. */
.omt.omt .hero{overflow:clip;grid-template-rows:auto auto auto auto}
.omt.omt .stage{grid-row:3}

/* below the artwork the floor lifts from the art's own #130B42 into the
   page's royal violet, so the info band and the next block are not black */
.omt.omt .stage::after{background:linear-gradient(180deg,#130B42 0,#1A0F58 200px,#1C1060 340px)}

/* The hero keeps the identity's own colours whatever the page theme. */
.omt.omt .site-head,.omt.omt .hero{
  --ground:#1B0A47;--ground-2:#2A0F5C;--ground-3:#3A1470;
  --ink:#FFFFFF;--ink-2:#D6C6F2;--ink-3:#A98FD8;
  --cyan:#22E3F5;--violet-2:#9246F5;--magenta:#D4177A;--on-cyan:#0B0526;
  --shell:#8FD8FF;
  --line-soft:#3F1E84;
}

.omt.omt .hero-eyebrow,.omt.omt .theme-label,.omt.omt .hero h1 .lead,.omt.omt .hero h1 .tail,.omt.omt .hero-meta{
  text-shadow:0 2px 22px color-mix(in srgb,var(--ground) 78%,transparent),0 1px 3px color-mix(in srgb,var(--ground) 60%,transparent)}

/* ================================ 1 · TOP ================================ */
.omt.omt .hero-top{
  grid-row:1;grid-column:1;justify-self:center;
  position:relative;z-index:5;width:100%;
  padding-block:calc(var(--head-h) + clamp(18px,3.2svh,40px)) 0;
  text-align:center;
}
html.omt-adminbar .omt.omt .hero-top{padding-block-start:calc(var(--head-h) + clamp(18px,3.2svh,40px) + 32px)}
.omt.omt .hero-top .wrap{max-width:1080px;display:grid;justify-items:center}

/* the conference, named once: edition chip + full name on one line */
.omt.omt .hero-eyebrow{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 14px;margin:0;max-width:100%;
}
.omt.omt .ed-chip{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  height:28px;padding-inline:12px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--cyan) 55%,transparent);
  background:color-mix(in srgb,var(--cyan) 10%,transparent);
  color:var(--cyan);font-size:12.5px;font-weight:700;line-height:1;letter-spacing:.04em;
  text-shadow:none;
}
.omt.omt .ed-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 10px currentColor}
.omt.omt .ed-chip sup{font-size:.68em;line-height:0;vertical-align:.5em;margin-inline-start:1px}
[dir="rtl"] .omt.omt .ed-chip{letter-spacing:0;font-size:13px}
.omt.omt .hero-name{
  font-size:clamp(12px,.9vw,14px);font-weight:700;line-height:1.45;color:var(--ink);
  letter-spacing:.11em;text-transform:uppercase;
}
[dir="rtl"] .omt.omt .hero-name{letter-spacing:0;text-transform:none;font-size:clamp(14px,1.05vw,16.5px)}

/* "Under the Theme:" — cyan, between two hairlines */
.omt.omt .theme-label{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1.2vw,16px);
  margin:clamp(18px,2.6svh,30px) 0 clamp(6px,0.9svh,10px);
  font-size:clamp(12px,1.05vw,14px);font-weight:600;
  letter-spacing:.07em;color:var(--cyan);line-height:1.4;
}
[dir="rtl"] .omt.omt .theme-label{letter-spacing:0;font-weight:700}
.omt.omt .theme-label::before,.omt.omt .theme-label::after{
  content:"";height:1px;width:clamp(16px,2.6vw,32px);flex:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan) 75%,transparent));
}
.omt.omt .theme-label::after{transform:scaleX(-1)}

/* the theme: the headline of the page */
.omt.omt .hero h1{margin:0 auto;font-weight:800;text-wrap:balance;max-width:min(880px,94%);font-family:inherit}
[dir="rtl"] .omt.omt .hero h1{max-width:min(760px,94%)}
.omt.omt .hero h1 .lead{
  display:block;font-size:clamp(27px,3.2vw,46px);line-height:1.08;font-weight:800;
  letter-spacing:-.018em;color:var(--ink);
}
[dir="rtl"] .omt.omt .hero h1 .lead{line-height:1.32;letter-spacing:0;font-size:clamp(25px,3vw,42px)}
.omt.omt .hero h1 .tail{
  display:block;margin-block-start:.42em;
  font-size:clamp(16px,1.75vw,23px);line-height:1.3;font-weight:600;
  color:var(--ink-2);
}
[dir="rtl"] .omt.omt .hero h1 .tail{line-height:1.5;font-weight:700}

/* ================================ 2 · ACT ================================ */
.omt.omt .hero-act{
  grid-row:2;grid-column:1;position:relative;z-index:6;width:100%;
  margin-block-start:clamp(18px,2.6svh,30px);
  text-align:center;
}
.omt.omt .hero-act .wrap{display:grid;justify-items:center;gap:clamp(16px,2.2svh,24px)}

.omt.omt .hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 16px;margin:0;
  font-size:clamp(14.5px,1.08vw,17px);line-height:1.4;color:var(--ink);
}
.omt.omt .m-date{color:var(--cyan);font-weight:800;font-size:1.18em;letter-spacing:.005em;white-space:nowrap}
[dir="rtl"] .omt.omt .m-date{letter-spacing:0}
.omt.omt .m-sep{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--ink) 55%,transparent);flex:none}
.omt.omt .m-venue{font-weight:600}

.omt.omt .hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0;align-items:center}
.omt.omt .btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:54px;min-width:196px;padding:14px 30px;border-radius:14px;border:0;
  font-family:inherit;font-size:16.5px;font-weight:700;line-height:1.2;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s,color .3s,background-color .3s;
}
.omt.omt .btn .lb,.omt.omt .btn .arw{position:relative;z-index:2}
.omt.omt .btn .arw{transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.omt.omt .btn-1{background:var(--cyan);color:var(--on-cyan);
  box-shadow:0 14px 34px -14px color-mix(in srgb,var(--cyan) 70%,transparent)}
.omt.omt .btn-1::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(120deg,var(--cyan) 0%,var(--violet-2) 130%);opacity:0;transition:opacity .34s}
/* one slow sheen across the primary button every eight seconds — the only
   ambient motion outside the scene */
.omt.omt .btn-1::before{
  content:"";position:absolute;inset:-20% auto -20% -40%;width:34%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg) translateX(-140%);
  animation:omt-btnSheen 8s cubic-bezier(.45,0,.2,1) 3s infinite;
  pointer-events:none;
}
@keyframes omt-btnSheen{0%{transform:skewX(-18deg) translateX(-140%)}14%,100%{transform:skewX(-18deg) translateX(560%)}}
.omt.omt .btn-1:hover{color:var(--on-cyan);transform:translateY(-3px);box-shadow:0 20px 44px -14px color-mix(in srgb,var(--cyan) 82%,transparent)}
.omt.omt .btn-1:hover::after{opacity:1}
.omt.omt .btn-2{background:color-mix(in srgb,var(--ground) 40%,transparent);color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink) 34%,transparent);backdrop-filter:blur(10px)}
.omt.omt .btn-2:hover{transform:translateY(-3px);border-color:var(--cyan);color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 8%,transparent)}
[dir="rtl"] .omt.omt .btn:hover .arw{transform:translateX(-5px)}
[dir="ltr"] .omt.omt .btn:hover .arw{transform:translateX(5px)}

/* ================================ 4 · INFO ================================ */
.omt.omt .hero-info{
  grid-row:4;grid-column:1;position:relative;z-index:5;width:100%;
  /* the scene's last ~9% is bare floor under the platform: the band rises
     into it so it sits just under the base, not a screen's gap below */
  margin-block-start:clamp(-58px,-3.7vw,-18px);
}
.omt.omt .info-band{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(22px,3.2vw,48px);
  max-width:1020px;margin-inline:auto;
  padding-block:clamp(18px,2.4svh,26px);
}
/* a hairline above the band that fades at both ends — the floor's edge */
.omt.omt .info-band::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan) 45%,transparent) 30%,
    color-mix(in srgb,var(--violet-2) 50%,transparent) 70%,transparent);
}
.omt.omt .ib-sep{width:1px;align-self:stretch;
  background:linear-gradient(transparent,color-mix(in srgb,var(--cyan) 50%,transparent),transparent)}

/* CPD: the official badge and its sentence, read as one */
.omt.omt .hero-cpd{display:flex;align-items:center;gap:clamp(14px,1.4vw,20px);margin:0;text-align:start}
.omt.omt .hero-cpd p{
  margin:0;font-size:clamp(13.5px,.98vw,15px);line-height:1.6;font-weight:600;color:var(--ink-2);
  text-wrap:pretty;
}
[dir="rtl"] .omt.omt .hero-cpd p{line-height:1.85}
/* a parenthesis split across two lines mirrors badly in Arabic */
[dir="rtl"] .omt.omt .hero-cpd .nw{white-space:nowrap;unicode-bidi:isolate}
.omt.omt .cpd-badge{position:relative;flex:none;width:clamp(72px,6.2vw,92px);aspect-ratio:1;isolation:isolate;
  padding:0;border:0;background:none;border-radius:50%;cursor:pointer;color:inherit;font:inherit;
  transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.omt.omt .cpd-badge:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.omt.omt .cpd-badge::before{
  content:"";position:absolute;inset:-20%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 30%,transparent) 0%,
    color-mix(in srgb,var(--violet-2) 22%,transparent) 42%,transparent 70%);
  animation:omt-cpdHalo 6.5s -3.25s ease-in-out infinite alternate;
}
.omt.omt .cpd-badge img{width:100%;height:100%;display:block;
  filter:drop-shadow(0 6px 18px color-mix(in srgb,#0B0526 60%,transparent));
  animation:omt-cpdFloat 7s ease-in-out infinite alternate}
@keyframes omt-cpdFloat{0%{transform:translateY(-3px)}100%{transform:translateY(3px)}}
@keyframes omt-cpdHalo{0%{opacity:.45;transform:scale(.94)}100%{opacity:1;transform:scale(1.04)}}
/* every ten seconds: a light sweeps across the coin and a ring goes out from
   it — a calm nudge that it opens. On hover the coin lifts, the halo brightens
   and the ring keeps breathing; a click opens what CPD is (.cpd-pop). */
.omt.omt .cpd-badge::after{
  content:"";position:absolute;inset:7%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:160% 0;
  animation:omt-cpdShine 10s 2.5s ease-in-out infinite;
}
@keyframes omt-cpdShine{0%{background-position:160% 0}12%,100%{background-position:-60% 0}}
/* the pulse never stops (the user asked for it to keep drawing the eye): a
   ring goes out from the coin every 2.6 s, a second one half a beat behind */
.omt.omt .cpd-ring{position:absolute;inset:4%;border-radius:50%;pointer-events:none;
  border:1.5px solid color-mix(in srgb,var(--cyan) 80%,transparent);opacity:0;
  animation:omt-cpdRing 2.6s ease-out infinite}
.omt.omt .cpd-ring::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--violet-2) 75%,transparent);
  opacity:0;animation:omt-cpdRing 2.6s 1.3s ease-out infinite}
@keyframes omt-cpdRing{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.omt.omt .cpd-badge:hover{transform:translateY(-3px) scale(1.07)}
.omt.omt .cpd-badge:hover::before{opacity:1;transform:scale(1.12);animation-play-state:paused}
.omt.omt .cpd-badge:hover .cpd-ring{animation-duration:1.6s}
@keyframes omt-cpdRingHover{0%{transform:scale(.95);opacity:.85}100%{transform:scale(1.55);opacity:0}}
.omt.omt .cpd-badge:hover img{filter:drop-shadow(0 8px 22px color-mix(in srgb,var(--cyan) 45%,transparent))}

/* ---- the CPD popup ---- */
.omt.omt .cpd-pop{
  --ink:#FFFFFF;--ink-2:#D6C6F2;--cyan:#22E3F5;--violet-2:#9246F5;
  width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);margin:auto;padding:0;border:0;border-radius:24px;
  color:var(--ink);background:transparent;overflow:visible;
}
.omt.omt .cpd-pop::backdrop{background:rgba(8,4,32,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.omt.omt .cpd-pop-in{
  position:relative;display:grid;justify-items:center;text-align:center;gap:10px;
  padding:clamp(56px,7vw,64px) clamp(22px,4vw,40px) clamp(26px,4vw,34px);margin-top:56px;border-radius:24px;
  background:linear-gradient(180deg,#2A1A80 0%,#1C1060 100%);
  border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;
}
.omt.omt .cpd-pop-badge{position:absolute;top:-56px;left:50%;width:112px;height:112px;translate:-50% 0;
  filter:drop-shadow(0 10px 26px color-mix(in srgb,var(--cyan) 35%,transparent))}
.omt.omt .cpd-x{position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;padding:0;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#FFFFFF;cursor:pointer;
  transition:background .25s,border-color .25s}
.omt.omt .cpd-x svg{width:16px;height:16px}
.omt.omt .cpd-x:hover{background:rgba(34,227,245,.18);border-color:var(--cyan)}
.omt.omt .cpd-x:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.omt.omt .cpd-pop-k{margin:0;font-size:13px;font-weight:700;color:var(--cyan)}
.omt.omt .cpd-pop-t{margin:0;font-size:clamp(22px,2.4vw,28px);font-weight:800;line-height:1.3}
.omt.omt .cpd-pop-d{margin:4px 0 0;font-size:15.5px;line-height:1.8;color:var(--ink-2)}
.omt.omt .cpd-pop-b{margin:0;font-size:14.5px;font-weight:600;line-height:1.7;color:#FFFFFF}
[dir="rtl"] .omt.omt .cpd-pop-d{line-height:1.95}
.omt.omt .cpd-pop-by{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 6px;padding-top:14px;width:100%;
  border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:var(--ink-2)}
.omt.omt .cpd-pop-by img{height:34px;width:auto}
.omt.omt .cpd-pop .btn{margin-top:6px}
@media (prefers-reduced-motion:no-preference){
  .omt.omt .cpd-pop[open] .cpd-pop-in{animation:omt-cpdPopIn .45s cubic-bezier(.2,.8,.3,1)}
  .omt.omt .cpd-pop[open]::backdrop{animation:omt-cpdFade .3s ease}
}
@keyframes omt-cpdPopIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes omt-cpdFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .omt.omt .cpd-badge::after,.omt.omt .cpd-ring{animation:none} }

/* countdown */
.omt.omt .countdown{display:grid;justify-items:center;gap:9px;margin:0}
.omt.omt .cd-l{margin:0;font-size:12px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
[dir="rtl"] .omt.omt .cd-l{letter-spacing:0;text-transform:none;font-size:13.5px}
.omt.omt .cd-units{display:grid;grid-auto-flow:column;gap:clamp(8px,.9vw,12px)}
.omt.omt .cd-u{
  min-width:clamp(72px,5.6vw,92px);padding:10px 12px;border-radius:14px;text-align:center;
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  background:color-mix(in srgb,var(--ground) 42%,transparent);
  backdrop-filter:blur(8px);
  transition:border-color .28s,transform .28s;
}
.omt.omt .cd-u:hover{border-color:color-mix(in srgb,var(--cyan) 55%,transparent);transform:translateY(-2px)}
.omt.omt .cd-u .n{display:block;font-size:clamp(25px,2.1vw,32px);font-weight:600;color:var(--cyan);
  line-height:1.08;font-variant-numeric:tabular-nums;min-width:2.4ch;margin-inline:auto;white-space:nowrap}
.omt.omt .cd-u .u{display:block;font-size:12px;color:var(--ink-3);margin-block-start:4px}
/* the seconds count quietly: a calmer tone than the other three */
.omt.omt .cd-u[data-unit="seconds"] .n{color:color-mix(in srgb,var(--cyan) 55%,var(--ink-2))}
/* a changed digit slides in softly instead of jumping */
@media (prefers-reduced-motion:no-preference){
  .omt.omt .cd-u .n.tick{animation:omt-cdTick .45s cubic-bezier(.22,.72,.24,1)}
}
@keyframes omt-cdTick{from{opacity:.25;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ================================ seam ================================ */
.omt.omt .seam-fade{position:absolute;inset-inline:0;inset-block-end:0;height:160px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,#1C1060 94%)}

/* light theme: the hero stays a dark island with a clean foot — no white
   haze over it — closed by a hairline of the brand's cyan-violet sweep, as
   the intro band is */
html[data-omt-theme="light"] .omt.omt .hero::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:2px;
  pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,#22E3F5 28%,#9246F5 72%,transparent);
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px) and (min-width:941px){
  .omt.omt .hero{--stage-w:100%;--scene-gap:clamp(8px,2svh,26px)}
}
@media (max-width:940px){
  .omt.omt .hero{--stage-w:100%;--scene-gap:clamp(6px,1.4svh,16px)}
  .omt.omt .hero h1,[dir="rtl"] .omt.omt .hero h1{max-width:100%}
  .omt.omt .info-band{grid-template-columns:minmax(0,1fr);justify-items:center;gap:18px;text-align:center}
  .omt.omt .ib-sep{display:none}
  .omt.omt .hero-cpd{max-width:560px}
}
@media (max-width:600px){
  /* phones: headline, picture, then the offer and the details */
  .omt.omt .hero{--scene-gap:clamp(6px,1.2svh,14px);padding-block-end:clamp(26px,4vh,40px)}
  .omt.omt .hero-act{grid-row:4;margin-block-start:clamp(8px,1.4svh,14px)}
  .omt.omt .hero-info{grid-row:5;margin-block-start:clamp(16px,2.4svh,24px)}
  .omt.omt .hero-top{padding-block-start:calc(var(--head-h) + 6px)}

  .omt.omt .hero-eyebrow{flex-direction:column;gap:9px}
  .omt.omt .hero-name{font-size:11.5px;letter-spacing:.08em;max-width:30ch}
  [dir="rtl"] .omt.omt .hero-name{font-size:14px;max-width:26ch}
  .omt.omt .ed-chip{height:26px;font-size:12px}
  .omt.omt .theme-label{margin:14px 0 6px;font-size:11.5px;gap:9px}
  .omt.omt .theme-label::before,.omt.omt .theme-label::after{width:15px}
  .omt.omt .hero h1{max-width:34ch}
  [dir="rtl"] .omt.omt .hero h1{max-width:26ch}
  .omt.omt .hero h1 .lead{font-size:clamp(21px,5.8vw,26px);line-height:1.16;letter-spacing:-.01em}
  [dir="rtl"] .omt.omt .hero h1 .lead{font-size:clamp(20px,5.4vw,25px);line-height:1.44}
  .omt.omt .hero h1 .tail{font-size:clamp(14px,3.9vw,17px);line-height:1.3}
  [dir="rtl"] .omt.omt .hero h1 .tail{line-height:1.5}

  .omt.omt .hero-meta{flex-direction:column;gap:4px}
  .omt.omt .m-sep{display:none}
  .omt.omt .hero-cta{width:100%;gap:9px}
  .omt.omt .btn{width:100%;min-height:52px}
  .omt.omt .btn-1{box-shadow:0 8px 22px -14px color-mix(in srgb,var(--cyan) 55%,transparent)}

  .omt.omt .info-band{padding-block:18px 4px;gap:16px}
  .omt.omt .hero-cpd{gap:12px;text-align:start}
  .omt.omt .hero-cpd p{font-size:13px}
  .omt.omt .cpd-badge{width:60px}
  .omt.omt .cd-l{font-size:11.5px}
  .omt.omt .cd-u{min-width:0;padding:8px 10px;border-color:color-mix(in srgb,var(--ink) 12%,transparent);
    background:color-mix(in srgb,var(--ground) 32%,transparent)}
  .omt.omt .cd-u .n{font-size:21px}
  .omt.omt .cd-u .u{font-size:11px;margin-block-start:2px}

  /* fewer marks in the air, same motion language */
  .omt.omt .orbit-3{display:none}
  .omt.omt .orbit .op:nth-child(n+4){display:none}
  .omt.omt .wtr-soft{display:none}
  .omt.omt .omt-logo{display:none}
  .omt.omt .ly-train{--drift:1.5px}
  .omt.omt .ray:nth-of-type(2),.omt.omt .ray:nth-of-type(4),.omt.omt .ray:nth-of-type(6){display:none}
  .omt.omt .trn-beam{filter:blur(2px);width:12%}
}

/* ============================ ENTRANCE ============================
   One calm sequence on load, top to bottom: each line rises 12px out of a
   soft blur, 90ms after the one above it. It runs once, never on scroll, and
   only when scripts run (html.omt-js) — without them everything is simply
   there. Reduced motion skips it entirely. */
@media (prefers-reduced-motion:no-preference){
  html.omt-js .omt.omt .hero .in{
    opacity:0;transform:translateY(12px);filter:blur(6px);
    animation:omt-heroIn .9s cubic-bezier(.22,.72,.24,1) forwards;
    animation-delay:calc(.15s + var(--i,0) * 90ms);
  }
}
@keyframes omt-heroIn{to{opacity:1;transform:none;filter:none}}

/* off screen means off: every loop in the scene holds still until it returns */
.omt.omt .hero.omt-off *,.omt.omt .hero.omt-off *::before,.omt.omt .hero.omt-off *::after{animation-play-state:paused!important}
/* …except the one-time entrance: it always finishes, so nothing (the info
   band under the platform above all) is left invisible after a quick scroll */
.omt.omt .hero.omt-off .in.in{animation-play-state:running!important}
/* the CPD card lives in the hero but also opens from the call to action further down, while the hero
   is off screen: its entrance must run, or it stays at its first, invisible frame (user, 2026-10-21) */
.omt.omt .hero.omt-off .cpd-pop,.omt.omt .hero.omt-off .cpd-pop *,.omt.omt .hero.omt-off .cpd-pop *::before,.omt.omt .hero.omt-off .cpd-pop *::after{animation-play-state:running!important}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  .omt.omt .hero *,.omt.omt .hero *::before,.omt.omt .hero *::after{animation:none!important;transition-duration:.001ms!important}
  .omt.omt .ly-rotor .ly-art{transform:rotate(22deg)}
  .omt.omt .op{display:none}
  .omt.omt .sph-halo{opacity:.7}.omt.omt .sph-core{opacity:.85}
  .omt.omt .scanfx{display:none}
  .omt.omt .wtr{opacity:0}
  .omt.omt .arc{opacity:0}
}


/* ---- patronage.css ---- */
/* ================================ PATRONAGE ================================
   Directly under the hero: the patron's portrait, a cut-out, standing in a
   soft halo with the brand's orbit drawn round it; beside it the line
   "Under the patronage of HRH", the name — in Arabic the official calligraphy,
   used as a mask so it takes the theme's colour — and the title.

   Motion: once, as it comes into view, the portrait rises, the orbit draws
   and the calligraphy writes itself in from the start of the line. Then
   nothing moves but a very slow breath in the halo. */

.omt.omt .pt{
  position:relative;z-index:4;overflow:hidden;isolation:isolate;
  --ink:#FFFFFF;--ink-2:#E2D8FF;--ink-3:#A98FD8;--cyan:#22E3F5;--violet-2:#9246F5;
  color:var(--ink);
  background:linear-gradient(180deg,#1C1060 0%,#22146E 55%,#1E1262 100%);
  padding-block:clamp(36px,4.6vw,64px) 0;
}
/* a soft violet light behind the portrait side */
.omt.omt .pt-glow{position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(40% 80% at var(--pt-x,22%) 70%,rgba(146,70,245,.34),transparent 70%),
             radial-gradient(30% 60% at var(--pt-x,22%) 90%,rgba(34,227,245,.16),transparent 70%)}
[dir="rtl"] .omt.omt .pt-glow{--pt-x:78%}
/* the floor line runs over the portrait: he stands behind the band's edge */
.omt.omt .pt::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;z-index:6;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan) 55%,transparent),transparent)}

.omt.omt .pt-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:clamp(20px,4vw,64px)}

/* the portrait, anchored on the band's floor */
.omt.omt .pt-figure{position:relative;margin:0;display:grid;place-items:end center;align-self:end;max-width:460px;width:100%;justify-self:center}
/* the source photo cuts the shoulders off with straight edges at both sides;
   they fade out instead, so the figure dissolves into the band */
.omt.omt .pt-photo{-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 13%,#000 87%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 13%,#000 87%,transparent 100%)}
.omt.omt .pt-photo{position:relative;z-index:2;display:block;width:100%;height:auto;max-width:none;
  filter:drop-shadow(0 18px 40px rgba(10,4,40,.45))}
.omt.omt .pt-halo{position:absolute;z-index:0;left:50%;bottom:6%;width:92%;aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle,rgba(146,70,245,.45) 0%,rgba(34,227,245,.14) 46%,transparent 70%);
  animation:omt-ptBreath 9s ease-in-out infinite alternate}
@keyframes omt-ptBreath{from{opacity:.75;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}}
.omt.omt .pt-orbit{position:absolute;z-index:1;left:50%;bottom:4%;width:96%;translate:-50% 0;overflow:visible;pointer-events:none}
.omt.omt .pt-orbit ellipse{fill:none;stroke:rgba(34,227,245,.5);stroke-width:1;stroke-dasharray:100;stroke-dashoffset:0}
.omt.omt .pt-orbit .pt-orbit-2{stroke:rgba(255,255,255,.16);stroke-dasharray:.6 1.6}

/* the words */
.omt.omt .pt-copy{display:grid;justify-items:center;text-align:center;gap:clamp(10px,1.3vw,16px);
  padding-block:clamp(10px,2vw,28px) clamp(40px,5vw,72px)}
.omt.omt .pt-label{margin:0;font-size:clamp(17px,1.5vw,22px);font-weight:700;color:var(--cyan)}
.omt.omt .pt-name{margin:0;line-height:0;width:100%;display:grid;justify-items:center}
.omt.omt .pt-cal{display:block;width:min(100%,640px);aspect-ratio:var(--pt-ar,1600 / 299);
  background:linear-gradient(100deg,#FFFFFF 0%,#F1EBFF 45%,#C9F7FF 100%);
  -webkit-mask:var(--pt-name,url(../img/patronage-name.webp)) center / contain no-repeat;mask:var(--pt-name,url(../img/patronage-name.webp)) center / contain no-repeat;
  filter:drop-shadow(0 6px 22px rgba(34,227,245,.18))}
.omt.omt .pt-name-t{display:block;font-size:clamp(28px,3.2vw,46px);font-weight:800;line-height:1.2;letter-spacing:-.01em;color:#FFFFFF;text-wrap:balance}
.omt.omt .pt-title{margin:0;font-size:clamp(18px,1.6vw,24px);font-weight:700;color:var(--cyan)}
.omt.omt .pt-rule{display:block;width:clamp(120px,14vw,200px);height:2px;margin-top:6px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet-2),transparent)}

/* ---- once, on arrival ---- */
@media (prefers-reduced-motion:no-preference){
  html.omt-js .omt.omt .pt .pt-orbit ellipse:first-child{stroke-dashoffset:100}
  html.omt-js .omt.omt .pt.is-in .pt-orbit ellipse:first-child{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.22,.72,.24,1) .3s}
  /* the calligraphy writes in from where the line begins (the right in Arabic) */
  html.omt-js .omt.omt .pt .pt-cal{clip-path:inset(0 0 0 100%)}
  html.omt-js .omt.omt .pt.is-in .pt-cal{clip-path:inset(0 0 0 0);transition:clip-path 1.5s cubic-bezier(.45,0,.2,1) .35s}
}
@media (prefers-reduced-motion:reduce){ .omt.omt .pt-halo{animation:none} }

/* ---- light theme ---- */
html[data-omt-theme="light"] .omt.omt .pt{
  --ink:#130B42;--ink-2:#3B2A6E;--ink-3:#6B5B96;--cyan:#0693B8;--violet-2:#7A2CF0;
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F1FC 60%,#EEEAF9 100%);
}
html[data-omt-theme="light"] .omt.omt .pt-glow{
  background:radial-gradient(40% 80% at var(--pt-x,22%) 70%,rgba(146,70,245,.16),transparent 70%),
             radial-gradient(30% 60% at var(--pt-x,22%) 92%,rgba(6,147,184,.10),transparent 70%)}
html[data-omt-theme="light"] .omt.omt .pt-halo{background:radial-gradient(circle,rgba(146,70,245,.22) 0%,rgba(6,147,184,.08) 46%,transparent 70%)}
html[data-omt-theme="light"] .omt.omt .pt-orbit ellipse{stroke:rgba(90,43,196,.4)}
html[data-omt-theme="light"] .omt.omt .pt-orbit .pt-orbit-2{stroke:rgba(59,43,146,.18)}
html[data-omt-theme="light"] .omt.omt .pt-photo{filter:drop-shadow(0 16px 34px rgba(59,43,146,.22))}
html[data-omt-theme="light"] .omt.omt .pt-cal{background:linear-gradient(100deg,#3B2B92 0%,#6A2CD8 55%,#0693B8 100%);filter:none}
html[data-omt-theme="light"] .omt.omt .pt-name-t{color:#2A1A80}
html[data-omt-theme="light"] .omt.omt .pt-label,html[data-omt-theme="light"] .omt.omt .pt-title{color:#5A2BC4}

/* ---- narrow: portrait over the words ---- */
@media (max-width:760px){
  .omt.omt .pt{padding-block-start:28px}
  .omt.omt .pt-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .omt.omt .pt-figure{max-width:280px}
  /* the cut-out ends mid-band here, so its foot fades instead of stopping */
  .omt.omt .pt-photo{
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 13%,#000 87%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0%,#000 13%,#000 87%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent);
    mask-composite:intersect}
  .omt.omt .pt-copy{padding-block:18px 40px}
}


/* ---- partners.css ---- */
/* ===================== PARTNER GROUP (Elementor widget) =====================
   One label and a row of logos. Used for the strategic partners under the
   hero, and later for every partner category at the foot of the page, so the
   developer adds, removes and reorders logos in Elementor and the layout
   follows: any count, centred, wrapping, a hairline between neighbours.

   Each logo has a dark-theme file and, optionally, a light-theme file. Until a
   light file is supplied the dark one is shown darkened in the light theme so
   a white logo never disappears on the pale page. */

.omt.omt .pg{
  position:relative;z-index:4;
  --ink:#FFFFFF;--ink-2:#D6C6F2;--ink-3:#A98FD8;--cyan:#22E3F5;--violet-2:#9246F5;
  background:#1E1360;color:var(--ink);
  padding-block:clamp(36px,4.6vw,60px) clamp(44px,5.4vw,70px);
}
/* the strategic group sits on the hero's own floor colour, so it reads as the
   hero's last line rather than a new section */
.omt.omt .pg-strategic{background:linear-gradient(180deg,#1C1060 0%,#22176A 100%)}

.omt.omt .pg-title{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:0 0 clamp(20px,2.4vw,30px);
  font-size:clamp(12px,.92vw,13.5px);font-weight:700;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
[dir="rtl"] .omt.omt .pg-title{letter-spacing:0;text-transform:none;font-size:clamp(14px,1.05vw,16px)}
.omt.omt .pg-title::before,.omt.omt .pg-title::after{
  content:"";height:1px;width:clamp(28px,4vw,64px);flex:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan) 70%,transparent));
}
.omt.omt .pg-title::after{transform:scaleX(-1)}

.omt.omt .pg-logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,2vw,28px) clamp(36px,4.4vw,72px);
  margin:0;padding:0;list-style:none;
}
.omt.omt .pg-item{position:relative;display:flex;align-items:center;justify-content:center}
/* a hairline between neighbours, centred in the gap */
.omt.omt .pg-item + .pg-item::before{
  content:"";position:absolute;inset-inline-start:calc(clamp(36px,4.4vw,72px) / -2);
  top:15%;height:70%;width:1px;
  background:linear-gradient(transparent,color-mix(in srgb,var(--ink) 26%,transparent),transparent);
}
.omt.omt .pg-logo{display:block;line-height:0;transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s}
.omt.omt .pg-logo img{
  height:clamp(44px,4.2vw,62px);width:auto;max-width:clamp(150px,17vw,250px);
  object-fit:contain;display:block;
}
.omt.omt .pg-logo .pg-light{display:none}
.omt.omt a.pg-logo:hover{transform:translateY(-2px)}
.omt.omt a.pg-logo:focus-visible{outline:2px solid var(--cyan);outline-offset:8px;border-radius:6px}

/* ---- light theme ---- */
html[data-omt-theme="light"] .omt.omt .pg{
  --ink:#130B42;--ink-2:#3B2A6E;--ink-3:#6B5B96;--cyan:#0693B8;
  background:#F1EFF8;
}
html[data-omt-theme="light"] .omt.omt .pg-strategic{background:#F1EFF8}
html[data-omt-theme="light"] .omt.omt .pg-logo .pg-dark:not(.pg-auto){display:none}
html[data-omt-theme="light"] .omt.omt .pg-logo .pg-light{display:block}
/* no light file yet: the white artwork is shown as a deep-violet silhouette */
html[data-omt-theme="light"] .omt.omt .pg-auto{filter:brightness(0) saturate(100%) invert(8%) sepia(40%) saturate(5000%) hue-rotate(245deg) brightness(.9)}

/* ---- one reveal, once ---- */
@media (prefers-reduced-motion:no-preference){
  html.omt-js .omt.omt [data-omt-reveal] .rv{opacity:0;transform:translateY(14px)}
  html.omt-js .omt.omt [data-omt-reveal].is-in .rv{
    opacity:1;transform:none;
    transition:opacity .6s var(--mo-ease),transform .6s var(--mo-ease);
    transition-delay:calc(var(--i,0) * 80ms);
  }
}

@media (max-width:600px){
  .omt.omt .pg-logos{gap:22px 30px}
  .omt.omt .pg-item + .pg-item::before{display:none}
  .omt.omt .pg-logo img{height:40px;max-width:150px}
}

/* five ministries and authorities on one line on desktop: a tighter gap and
   a slightly smaller mark, the hairline kept centred in the new gap */
.omt.omt .pg-strategic .pg-logos{--pg-gap:clamp(26px,3vw,50px);column-gap:var(--pg-gap)}
.omt.omt .pg-strategic .pg-item + .pg-item::before{inset-inline-start:calc(var(--pg-gap) / -2)}
.omt.omt .pg-strategic .pg-logo img{height:clamp(40px,3.7vw,56px);max-width:clamp(128px,14vw,205px)}


/* ---- intro.css ---- */
/* ===================== INTRO (مقدمة) — the film section =====================
   From the approved homepage (sections.css "01 — about" + its light-theme
   bridges). The film fills the band, the copy stands in front of it, and four
   measured overlay layers sit between them. A dark island in both themes.

   Motion: the film is the motion. The copy rises in once (600ms, 60ms apart)
   and the title's rule draws once; nothing is tied to the scroll. */

.omt.omt .sec{
  position:relative;z-index:4;
  color:var(--ink);
}
.omt.omt .about{
  position:relative;overflow:hidden;isolation:isolate;
  --ab-pad:clamp(76px,9vw,132px);
  padding-block:var(--ab-pad);
  min-height:clamp(520px,52vw,760px);
  display:flex;align-items:center;
  background:#22136E;
  --ov:1;
  /* dark island: it keeps the dark palette whatever the page theme */
  --ink:#FFFFFF;--ink-2:#D6C6F2;--ink-3:#A98FD8;
  --cyan:#22E3F5;--cyan-2:#03BDEE;--violet-2:#9246F5;
  --ov-dir:right;
}
[dir="rtl"] .omt.omt .about{--ov-dir:left}

/* ---- the film ---- */
.omt.omt .ab-media{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.omt.omt .ab-film{
  position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;
  object-fit:cover;object-position:var(--yt-x,50%) var(--yt-y,50%);
  pointer-events:none;
}
.omt.omt .about{--yt-x:var(--yt-xd,50%);--yt-y:var(--yt-yd,50%)}
.omt.omt .ab-poster{position:absolute;inset:0;display:block;z-index:1;opacity:1;transition:opacity .5s ease}
.omt.omt .ab-poster img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 42%;display:block}
.omt.omt .about.is-playing .ab-poster{opacity:0}
/* the film reads clearly: only a light dim, the shade stays by the copy */
.omt.omt .ab-poster img{filter:brightness(.96) saturate(1.02)}
.omt.omt .ab-film{filter:brightness(.94) saturate(1.04)}

/* ---- the overlay stack ---- */
.omt.omt .ab-ov{position:absolute;inset:0;display:block;z-index:2}
.omt.omt .ab-ov-tint{
  background:linear-gradient(200deg,
    color-mix(in srgb,#2A0F5C 62%,transparent) 0%,
    color-mix(in srgb,#1B0A47 46%,transparent) 55%,
    color-mix(in srgb,#12063A 58%,transparent) 100%);
  opacity:calc(.34 * var(--ov));
}
.omt.omt .ab-ov-side{
  background:linear-gradient(to var(--ov-dir),
    color-mix(in srgb,#1E1066 88%,transparent) 0%,
    color-mix(in srgb,#22126E 66%,transparent) 34%,
    color-mix(in srgb,#2A1680 22%,transparent) 54%,
    transparent 70%);
  opacity:var(--ov);
}
.omt.omt .ab-ov-vig{
  background:radial-gradient(130% 116% at 50% 44%,
    transparent 42%, color-mix(in srgb,#1E1066 50%,transparent) 100%);
  opacity:calc(.45 * var(--ov));
}
.omt.omt .ab-ov-atmos{
  background:radial-gradient(70% 90% at 96% 24%,
    color-mix(in srgb,var(--cyan) 16%,transparent) 0%, transparent 62%);
  opacity:calc(.55 * var(--ov));
}
[dir="rtl"] .omt.omt .ab-ov-atmos{background:radial-gradient(70% 90% at 4% 24%,
  color-mix(in srgb,var(--cyan) 16%,transparent) 0%, transparent 62%)}

/* ---- the copy: a short story over the film ----
   The section stays about one screen tall. The title, then ONE paragraph at a
   time in large type, then a row of numbered progress bars: each fills while
   its paragraph is read and hands over to the next with a soft crossfade.
   Hover or keyboard focus pauses it, a click on a bar jumps to that paragraph,
   and off screen it stops. All paragraphs share one grid cell, so the band
   is as tall as the longest one and never jumps.
   Without scripts every paragraph is simply shown, one under the other. */
.omt.omt .about{align-items:center;--ab-pad:clamp(64px,7vw,104px);min-height:clamp(520px,44vw,640px)}
.omt.omt .ab-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr);width:100%}
.omt.omt .ab-copy{display:grid;justify-items:start;max-width:min(760px,58%)}

.omt.omt .sec-title{
  font-size:clamp(28px,3.2vw,44px);font-weight:800;line-height:1.2;
  margin:0 0 clamp(20px,2.2vw,30px);max-width:19ch;text-wrap:balance;color:#FFFFFF;
}
[dir="rtl"] .omt.omt .sec-title{line-height:1.42}
.omt.omt .ab-h-key{display:block;position:relative;width:fit-content;padding-block-end:8px}
.omt.omt .ab-h-key::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;height:2px;
  background:linear-gradient(to right,var(--cyan),color-mix(in srgb,var(--violet-2) 70%,transparent));
  transform:scaleX(var(--ab-rv,1));transform-origin:var(--ab-o,left) center;
}
[dir="rtl"] .omt.omt .ab-h-key::after{--ab-o:right}
[dir="rtl"] .omt.omt .ab-h-key::after{background:linear-gradient(to left,var(--cyan),color-mix(in srgb,var(--violet-2) 70%,transparent))}

.omt.omt .ab-story{width:100%}
.omt.omt .ab-slide{
  margin:0 0 18px;
  font-size:clamp(18px,1.55vw,23px);line-height:1.7;font-weight:500;color:#E3D8FA;
  text-wrap:pretty;
}
[dir="rtl"] .omt.omt .ab-slide{line-height:1.95;font-size:clamp(18px,1.5vw,22px)}
/* the phrases the official copy sets in bold: brighter and heavier, nothing more */
.omt.omt .ab-slide strong{color:#FFFFFF;font-weight:800}

html.omt-js .omt.omt .ab-slides{display:grid}
html.omt-js .omt.omt .ab-slide{
  grid-area:1/1;margin:0;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .7s var(--mo-ease),transform .7s var(--mo-ease),visibility 0s linear .7s;
}
html.omt-js .omt.omt .ab-slide.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .7s var(--mo-ease) .15s,transform .7s var(--mo-ease) .15s,visibility 0s;
}

/* numbered progress bars */
.omt.omt .ab-nav{display:none}
html.omt-js .omt.omt .ab-nav{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:clamp(8px,1vw,14px);margin-block-end:clamp(18px,2vw,26px);max-width:520px;
}
.omt.omt .ab-seg{
  display:grid;gap:8px;justify-items:start;padding-block:6px;cursor:pointer;
  color:#9F8CCB;transition:color .3s;
}
.omt.omt .ab-seg .n{font-size:12px;font-weight:600;letter-spacing:.06em}
.omt.omt .ab-seg .bar{position:relative;display:block;width:100%;height:2px;border-radius:2px;
  background:color-mix(in srgb,#FFFFFF 18%,transparent);overflow:hidden}
.omt.omt .ab-seg .bar i{position:absolute;inset:0;display:block;border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan),var(--violet-2));
  transform:scaleX(var(--p,0));transform-origin:left center;transition:transform .12s linear}
[dir="rtl"] .omt.omt .ab-seg .bar i{transform-origin:right center;background:linear-gradient(270deg,var(--cyan),var(--violet-2))}
.omt.omt .ab-seg:hover,.omt.omt .ab-seg.is-on{color:#FFFFFF}
.omt.omt .ab-seg.is-done .bar i{--p:1}
.omt.omt .ab-story.is-static .ab-seg.is-on .bar i{--p:1}
.omt.omt .ab-seg:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:6px}

/* ---- light theme: a clean dark island on the pale page — crisp edges (no
   white haze over the film), closed top and bottom by a hairline of the
   brand's cyan-violet sweep ---- */
html[data-omt-theme="light"] .omt.omt .about::before,
html[data-omt-theme="light"] .omt.omt .about::after{
  content:"";position:absolute;inset-inline:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,#22E3F5 28%,#9246F5 72%,transparent);
}
html[data-omt-theme="light"] .omt.omt .about::before{top:0}
html[data-omt-theme="light"] .omt.omt .about::after{bottom:0}

/* ---- one reveal, once ---- */
@property --ab-rv{syntax:"<number>";inherits:true;initial-value:1}
@media (prefers-reduced-motion:no-preference){
  html.omt-js .omt.omt .about .rv{opacity:0;transform:translateY(16px)}
  html.omt-js .omt.omt .about.is-in .rv{
    opacity:1;transform:none;
    transition:opacity .6s var(--mo-ease),transform .6s var(--mo-ease);
    transition-delay:calc(var(--i,0) * 60ms);
  }
  html.omt-js .omt.omt .about{--ab-rv:0}
  html.omt-js .omt.omt .about.is-in{--ab-rv:1;transition:--ab-rv .7s var(--mo-ease) .2s}
}

/* ---- narrow ---- */
@media (max-width:1024px){ .omt.omt .about{--yt-x:var(--yt-xt,50%);--yt-y:var(--yt-yt,50%)} }
@media (max-width:860px){
  .omt.omt .about{
    --yt-x:var(--yt-xm,50%);--yt-y:var(--yt-ym,50%);
    --ov-dir:bottom;
    min-height:clamp(480px,118vw,660px);
    align-items:flex-end;
  }
  [dir="rtl"] .omt.omt .about{--ov-dir:bottom}
  .omt.omt .ab-ov-side{
    background:linear-gradient(to top,
      color-mix(in srgb,#1E1066 92%,transparent) 0%,
      color-mix(in srgb,#22126E 80%,transparent) 42%,
      color-mix(in srgb,#2A1680 56%,transparent) 72%,
      color-mix(in srgb,#2A1680 30%,transparent) 100%);
    opacity:var(--ov);
  }
  .omt.omt .ab-copy{max-width:none}
  /* on phones the copy covers most of the film: a soft shadow keeps it clear */
  .omt.omt .ab-copy{text-shadow:0 1px 12px rgba(20,10,70,.55)}
  .omt.omt .ab-nav{max-width:none}
}


/* ---- sections.css ---- */
/* ===================== HOME SECTIONS — after the intro =====================
   One rhythm for all of them: a section is about one screen tall, opens with
   one title, and shows one item at a time — the list on one side, the
   picture of the item under the pointer on the other. Pictures crossfade;
   nothing moves with the scroll. Each section rises in once (data-omt-reveal).

   Two grounds alternate (.sx / .sx-alt) in both themes; the photo mosaic and
   the expo band are dark islands. */

.omt.omt .sx{
  position:relative;
  /* grounds run from deep indigo to royal violet, like the identity's own
     sky. Sections alternate direction so every seam meets its own tone:
     .sx goes dark -> light, .sx-alt light -> dark. */
  --sx-dark:#170D4C; --sx-light:#33268A; --sx-glow:rgba(134,51,201,.16);
  --ink-3:#BCA9EE; --line-soft:rgba(255,255,255,.14);
  background:radial-gradient(70% 50% at 50% 100%,var(--sx-glow),transparent 70%),
             linear-gradient(180deg,var(--sx-dark) 0%,var(--sx-light) 100%);
  color:var(--ink);
  padding-block:clamp(64px,7.5vw,112px);
}
.omt.omt .sx-alt{background:radial-gradient(70% 50% at 50% 0%,var(--sx-glow),transparent 70%),
  linear-gradient(180deg,var(--sx-light) 0%,var(--sx-dark) 100%)}
html[data-omt-theme="light"] .omt.omt .sx{--sx-dark:#E6E1F3;--sx-light:#F6F4FB;--sx-glow:transparent;--ink-3:#6B5B96;--line-soft:color-mix(in srgb,#3C1978 12%,transparent)}

/* ---- the one heading shape ---- */
.omt.omt .sx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;
  margin-block-end:clamp(28px,3.2vw,48px)}
.omt.omt .sx-title{
  position:relative;margin:0;padding-block-start:18px;
  font-size:clamp(28px,3.2vw,44px);font-weight:800;line-height:1.2;color:var(--ink);text-wrap:balance;
}
[dir="rtl"] .omt.omt .sx-title{line-height:1.4}
.omt.omt .sx-title::before{
  content:"";position:absolute;inset-inline-start:0;top:0;width:44px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--violet-2));
}
[dir="rtl"] .omt.omt .sx-title::before{background:linear-gradient(270deg,var(--cyan),var(--violet-2))}
.omt.omt .sx-intro{flex-basis:100%;margin:6px 0 0;max-width:72ch;font-size:clamp(16px,1.15vw,18px);line-height:1.75;color:var(--ink-2)}
[dir="rtl"] .omt.omt .sx-intro{line-height:1.95}
.omt.omt .sx-more{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px;color:var(--cyan);
  padding-block:6px;border-block-end:1.5px solid color-mix(in srgb,var(--cyan) 40%,transparent);transition:border-color .25s}
.omt.omt .sx-more:hover{color:var(--cyan);border-color:var(--cyan)}
.omt.omt .sx-more .arw{transition:transform .3s cubic-bezier(.2,.8,.3,1)}
[dir="ltr"] .omt.omt .sx-more:hover .arw{transform:translateX(4px)}
[dir="rtl"] .omt.omt .sx-more:hover .arw{transform:translateX(-4px)}
html[data-omt-theme="light"] .omt.omt .sx-more{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent-ink) 35%,transparent)}

/* switchable items share one focus ring */
.omt.omt .sw-i{cursor:pointer;outline:none}
.omt.omt .sw-i:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:12px}
.omt.omt .sw-p{transition:opacity .6s var(--mo-ease)}

/* ================================ OBJECTIVES ================================ */
.omt.omt .obj-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.omt.omt .obj-media{position:relative;border-radius:22px;overflow:hidden;min-height:420px;background:#2A1A7A;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.omt.omt .obj-media>.sw-p{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0}
.omt.omt .obj-media>.sw-p.is-on{opacity:1}
.omt.omt .obj-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,16,100,.8),transparent 46%);pointer-events:none}
.omt.omt .obj-big{position:absolute;inset-inline-start:24px;bottom:12px;z-index:2;line-height:1;
  font-size:clamp(64px,7vw,104px);font-weight:600;color:#FFFFFF}
.omt.omt .obj-big b{position:absolute;inset-inline-start:0;bottom:0;opacity:0;font-weight:600}
.omt.omt .obj-big b.is-on{opacity:1}
.omt.omt .obj-big b{text-shadow:0 6px 30px rgba(0,0,0,.5)}

.omt.omt .obj-list{display:grid;margin:0;padding:0;list-style:none;align-content:center}
.omt.omt .obj-row{
  position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:16px 18px;border-radius:14px;border-block-end:1px solid var(--line-soft);
  transition:background .35s,color .35s;
}
.omt.omt .obj-row:last-child{border-block-end-color:transparent}
.omt.omt .obj-thumb{display:none}
.omt.omt .obj-n{font-size:15px;font-weight:600;color:var(--ink-3);transition:color .35s}
.omt.omt .obj-t{font-size:clamp(15.5px,1.1vw,17px);line-height:1.65;color:var(--ink-2);transition:color .35s}
[dir="rtl"] .omt.omt .obj-t{line-height:1.85}
.omt.omt .obj-row.is-on{background:color-mix(in srgb,var(--cyan) 8%,transparent)}
.omt.omt .obj-row.is-on .obj-n{color:var(--cyan)}
.omt.omt .obj-row.is-on .obj-t{color:var(--ink)}
/* the time left on the objective in view: a line along its foot that fills */
.omt.omt .obj-bar{position:absolute;inset-inline:18px;bottom:-1px;height:2px;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .35s;pointer-events:none}
.omt.omt .obj-row.is-on .obj-bar{opacity:1}
.omt.omt .obj-bar i{position:absolute;inset:0;background:var(--cyan);transform:scaleX(var(--p,0));transform-origin:left center;transition:transform .12s linear}
[dir="rtl"] .omt.omt .obj-bar i{transform-origin:right center}
html[data-omt-theme="light"] .omt.omt .obj-bar i{background:var(--accent-ink)}
.omt.omt .obj-row::before{content:"";position:absolute;inset-inline-start:0;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--cyan),var(--violet-2));transform:scaleY(0);transition:transform .4s var(--mo-ease)}
.omt.omt .obj-row.is-on::before{transform:scaleY(1)}
html[data-omt-theme="light"] .omt.omt .obj-row.is-on{background:#FFFFFF;box-shadow:var(--shadow-sm)}
html[data-omt-theme="light"] .omt.omt .obj-row.is-on .obj-n{color:var(--accent-ink)}

/* ================================== TRACKS ================================== */
.omt.omt .tr-row{display:flex;gap:10px;margin:0;padding:0;list-style:none;height:clamp(420px,37vw,540px)}
.omt.omt .tr{
  position:relative;flex:1 1 0;min-width:0;border-radius:18px;overflow:hidden;background:#2A1A7A;
  transition:flex-grow .7s var(--mo-ease);
}
.omt.omt .tr .tr-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  transform:scale(1.02);transition:transform 1.2s var(--mo-ease),filter .6s;filter:saturate(.8) brightness(.8)}
.omt.omt .tr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(30,16,100,.95) 0%,rgba(30,16,100,.5) 42%,rgba(30,16,100,.08) 70%)}
.omt.omt .tr-n{position:absolute;z-index:2;top:16px;inset-inline-start:16px;font-size:13px;font-weight:600;color:var(--cyan)}
/* title, then (open panel only) the first topics and the full-track button;
   they unfold upwards from the foot once the panel has widened */
.omt.omt .tr-body{position:absolute;z-index:2;inset-inline:16px;bottom:18px;display:flex;flex-direction:column}
.omt.omt .tr-t{margin:0;font-size:15px;font-weight:700;line-height:1.35;color:#FFFFFF;text-wrap:balance;
  transition:font-size .5s var(--mo-ease)}
[dir="rtl"] .omt.omt .tr-t{line-height:1.6}
.omt.omt .tr-more{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .5s var(--mo-ease),opacity .3s ease,visibility 0s linear .5s}
.omt.omt .tr-more>div{min-height:0;overflow:hidden}
.omt.omt .tr-p{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.omt.omt .tr-p li{position:relative;padding-inline-start:14px;font-size:13.5px;line-height:1.55;color:#E2D8FF;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
[dir="rtl"] .omt.omt .tr-p li{line-height:1.75}
.omt.omt .tr-p li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.omt.omt .tr-go{display:inline-flex;align-items:center;gap:8px;margin-block-start:14px;padding:9px 16px;border-radius:999px;
  font-size:13.5px;font-weight:700;color:#0B0526;background:var(--cyan);text-decoration:none;
  transition:background .3s,transform .3s var(--mo-ease)}
.omt.omt .tr-go:hover{background:#FFFFFF}
.omt.omt .tr-go:hover .arw{transform:translateX(var(--arw-dx,3px))}
[dir="rtl"] .omt.omt .tr-go{--arw-dx:-3px}
.omt.omt .tr-go .arw{transition:transform .3s var(--mo-ease)}
.omt.omt .tr-go:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.omt.omt .tr.is-on{flex-grow:4}
.omt.omt .tr.is-on .tr-media{transform:scale(1.06);filter:saturate(1) brightness(1)}
.omt.omt .tr.is-on .tr-t{font-size:clamp(17px,1.5vw,22px)}
/* a closed card is narrow (about 70 px of text), so its title runs down the card's length,
   whole, instead of being cut at the edge (review 2026-10-21); it turns back once the card opens */
@media (min-width:981px){
  .omt.omt .tr:not(.is-on) .tr-body{inset-inline:auto;inset-inline-start:14px;top:52px;bottom:20px;justify-content:flex-end}
  .omt.omt .tr:not(.is-on) .tr-t{writing-mode:vertical-rl;max-height:100%;font-size:16px;line-height:1.45;text-wrap:wrap;
    overflow-wrap:normal;white-space:normal}
  [dir="rtl"] .omt.omt .tr:not(.is-on) .tr-t{line-height:1.55}
}
.omt.omt .tr.is-on .tr-more{grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .55s var(--mo-ease) .3s,opacity .5s ease .45s,visibility 0s}
.omt.omt .tr.is-on::after{background:linear-gradient(to top,rgba(30,16,100,.97) 0%,rgba(30,16,100,.8) 45%,rgba(30,16,100,.1) 80%)}

/* ================================== GALLERY =================================
   A cinematic stage: one photograph at a time, full width, drifting in very
   slowly (Ken Burns) and dissolving into the next. A rail of thumbnails along
   the foot shows where you are; the active one fills its bar while its photo
   is on screen, a click jumps, hovering the rail holds it. Each photo carries
   its edition and what it shows. */
.omt.omt .sx-gallery{padding-block:0;background:#170D4C;--ink:#FFFFFF;--ink-2:#E2D8FF;--cyan:#22E3F5;--violet-2:#9246F5}
.omt.omt .gal-stage{position:relative;height:clamp(460px,52vw,700px);overflow:hidden;isolation:isolate;background:#170D4C}
.omt.omt .gal-s{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity 1.1s var(--mo-ease),visibility 0s linear 1.1s}
.omt.omt .gal-s.is-on{opacity:1;visibility:visible;transition:opacity 1.1s var(--mo-ease),visibility 0s}
.omt.omt .gal-s img{width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.02);transform-origin:var(--kb-o,50% 50%)}
.omt.omt .gal-s.is-on img{animation:omt-galKB 6s linear forwards}
.omt.omt .gal-s:nth-child(3n+1){--kb-o:30% 40%}
.omt.omt .gal-s:nth-child(3n+2){--kb-o:70% 45%}
.omt.omt .gal-s:nth-child(3n){--kb-o:50% 30%}
@keyframes omt-galKB{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.omt.omt .gal-shade{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(23,13,76,.92) 0%,rgba(23,13,76,.45) 34%,transparent 60%),
             linear-gradient(to bottom,rgba(23,13,76,.72) 0%,rgba(23,13,76,.35) 14%,transparent 28%)}
.omt.omt .gal-s figcaption{position:absolute;z-index:2;inset-inline-start:max(clamp(18px,4vw,44px),calc((100% - 1300px) / 2 + clamp(18px,4vw,44px)));
  bottom:calc(clamp(96px,9vw,128px) + 18px);display:flex;align-items:center;gap:10px;color:#FFFFFF}
.omt.omt .gal-cat{font-size:clamp(14px,1.15vw,17px);font-weight:700;opacity:.92;text-shadow:0 2px 14px rgba(0,0,0,.45)}
/* arrows either side: back and on by hand */
.omt.omt .gal-nav{position:absolute;z-index:4;top:50%;width:50px;height:50px;margin-block-start:-25px;padding:0;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;color:#FFFFFF;background:rgba(23,13,76,.42);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s,border-color .3s,transform .3s var(--mo-ease)}
.omt.omt .gal-prev{inset-inline-start:clamp(12px,2vw,28px)}
.omt.omt .gal-next{inset-inline-end:clamp(12px,2vw,28px)}
.omt.omt .gal-nav svg{width:20px;height:20px}
.omt.omt .gal-prev svg{scale:-1 1}
[dir="rtl"] .omt.omt .gal-next svg{scale:-1 1}
[dir="rtl"] .omt.omt .gal-prev svg{scale:1 1}
.omt.omt .gal-next svg{animation:omt-galNudge 3.2s cubic-bezier(.45,0,.25,1) infinite}
.omt.omt .gal-prev svg{animation:omt-galNudge 3.2s cubic-bezier(.45,0,.25,1) 1.6s infinite}
@keyframes omt-galNudge{0%,30%,100%{transform:translateX(0)}12%{transform:translateX(5px)}20%{transform:translateX(2px)}}
.omt.omt .gal-nav:hover{background:rgba(34,227,245,.22);border-color:var(--cyan)}
.omt.omt .gal-nav:active{transform:scale(.94)}
.omt.omt .gal-nav:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.omt.omt .gal-stage{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.omt.omt .gal-stage.is-drag{cursor:grabbing}
.omt.omt .gal-stage .gal-nav,.omt.omt .gal-stage .gal-t{cursor:pointer}
.omt.omt .gal-rail{cursor:grab;touch-action:pan-x pan-y}
.omt.omt .gal-rail.is-drag,.omt.omt .gal-rail.is-drag .gal-t{cursor:grabbing}
.omt.omt .gal-rail.is-drag{scroll-behavior:auto}
/* while dragged the photo follows the pointer a little and dims towards the
   next; let go and it settles back as the next one dissolves in */
.omt.omt .gal-s.is-on{transition:opacity 1.1s var(--mo-ease),visibility 0s,translate .45s var(--mo-ease)}
.omt.omt .gal-stage.is-drag .gal-s.is-on{transition:none}
.omt.omt .gal-ui{position:absolute;z-index:3;inset-inline:0;inset-block:0;margin-inline:auto;display:flex;flex-direction:column;justify-content:space-between;
  padding-block:clamp(26px,2.8vw,42px) clamp(26px,3vw,40px);pointer-events:none}
.omt.omt .gal-title{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:800;color:#FFFFFF;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.omt.omt .gal-rail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;pointer-events:auto;padding-block:4px;
  mask-image:linear-gradient(to var(--rail-end,right),#000 88%,transparent);-webkit-mask-image:linear-gradient(to var(--rail-end,right),#000 88%,transparent)}
[dir="rtl"] .omt.omt .gal-rail{--rail-end:left}
.omt.omt .gal-rail::-webkit-scrollbar{display:none}
.omt.omt .gal-t{position:relative;flex:0 0 auto;width:clamp(84px,7.4vw,112px);aspect-ratio:8/5;border-radius:10px;overflow:hidden;cursor:pointer;
  opacity:.55;outline:1px solid rgba(255,255,255,.18);outline-offset:-1px;transition:opacity .35s,transform .35s var(--mo-ease),outline-color .35s}
.omt.omt .gal-t img{width:100%;height:100%;max-width:none;object-fit:cover}
.omt.omt .gal-t:hover{opacity:.9}
.omt.omt .gal-t.is-on{opacity:1;outline:2px solid var(--cyan);transform:translateY(-3px)}
.omt.omt .gal-t:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.omt.omt .gal-t .bar{position:absolute;inset-inline:6px;bottom:5px;height:3px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden;opacity:0}
.omt.omt .gal-t.is-on .bar{opacity:1}
.omt.omt .gal-t .bar i{position:absolute;inset:0;background:var(--cyan);transform:scaleX(var(--p,0));transform-origin:left center;transition:transform .12s linear}
[dir="rtl"] .omt.omt .gal-t .bar i{transform-origin:right center}

/* ================================= AUDIENCE =================================
   A wall of portraits of different sizes, each named over its picture. The
   chosen one (pointer, focus or tap) lifts, shows its line of description
   over the picture and the rest dim back. On phones the chosen one opens to
   the full width. */
.omt.omt .aud-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,13vw,195px);
  grid-auto-flow:dense;gap:10px;margin:0;padding:0;list-style:none}
.omt.omt .aud-i:nth-child(1),.omt.omt .aud-i:nth-child(6){grid-column:span 2}
.omt.omt .aud-i{position:relative;margin:0;border-radius:18px;overflow:hidden;cursor:pointer;background:#2A1A7A;isolation:isolate;
  outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;transition:outline-color .45s,box-shadow .45s}
.omt.omt .aud-i .aud-m{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,60%) 40%;
  transform:scale(1.02);filter:saturate(.85) brightness(.62);transition:transform 1.1s var(--mo-ease),filter .6s ease}
.omt.omt .aud-i::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(23,13,76,.92) 0%,rgba(23,13,76,.35) 46%,rgba(23,13,76,0) 72%);transition:opacity .5s}
.omt.omt .aud-n{position:absolute;z-index:2;top:14px;inset-inline-start:16px;font-size:12px;font-weight:600;color:rgba(255,255,255,.6);transition:color .4s}
.omt.omt .aud-c{position:absolute;z-index:2;inset-inline:16px;bottom:14px;display:flex;flex-direction:column}
.omt.omt .aud-t{margin:0;font-size:clamp(15px,1.1vw,17px);font-weight:800;line-height:1.35;color:#FFFFFF;text-wrap:balance;
  text-shadow:0 2px 14px rgba(0,0,0,.35)}
[dir="rtl"] .omt.omt .aud-t{line-height:1.55}
.omt.omt .aud-d{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--mo-ease),opacity .3s ease}
.omt.omt .aud-d>p{min-height:0;overflow:hidden;margin:0}
.omt.omt .aud-d>p>span{display:block;padding-block-start:8px;font-size:13.5px;line-height:1.6;color:#E6DEFF}
[dir="rtl"] .omt.omt .aud-d>p>span{line-height:1.8}
/* the chosen portrait */
.omt.omt .aud-i.is-on{outline-color:var(--cyan);box-shadow:0 18px 40px -18px rgba(34,227,245,.45)}
.omt.omt .aud-i.is-on .aud-m{transform:scale(1.07);filter:saturate(1) brightness(.78)}
.omt.omt .aud-i.is-on::after{background:linear-gradient(to top,rgba(23,13,76,.96) 0%,rgba(23,13,76,.7) 48%,rgba(23,13,76,.05) 85%)}
.omt.omt .aud-i.is-on .aud-n{color:var(--cyan)}
.omt.omt .aud-i.is-on .aud-d{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .55s var(--mo-ease) .1s,opacity .45s ease .2s}
.omt.omt .aud-i:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
/* where the people stand in each picture */
.omt.omt .aud-i:nth-child(1){--pos:72%}.omt.omt .aud-i:nth-child(2){--pos:78%}.omt.omt .aud-i:nth-child(3){--pos:42%}.omt.omt .aud-i:nth-child(4){--pos:74%}
.omt.omt .aud-i:nth-child(5){--pos:84%}.omt.omt .aud-i:nth-child(6){--pos:60%}.omt.omt .aud-i:nth-child(7){--pos:38%}.omt.omt .aud-i:nth-child(8){--pos:70%}
.omt.omt .aud-i:nth-child(9){--pos:32%}.omt.omt .aud-i:nth-child(10){--pos:64%}
html[data-omt-theme="light"] .omt.omt .aud-i{outline-color:rgba(59,43,146,.12)}
html[data-omt-theme="light"] .omt.omt .aud-i.is-on{outline-color:var(--accent-ink);box-shadow:0 18px 40px -18px rgba(59,43,146,.45)}

/* touch screens: a line under the intro saying the photos open, a pulsing
   tap mark beside it, and a small plus on every closed photo; the line fades
   once a photo has been opened */
.omt.omt .aud-hint,.omt.omt .aud-plus{display:none}
@media (hover:none),(max-width:600px){
  .omt.omt .aud-hint{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:7px 14px 7px 12px;border-radius:999px;
    font-size:13.5px;font-weight:600;color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent);
    border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent);transition:opacity .5s ease,max-height .5s ease,margin .5s ease}
  html[data-omt-theme="light"] .omt.omt .aud-hint{color:var(--accent-ink);background:rgba(59,43,146,.07);border-color:rgba(59,43,146,.25)}
  .omt.omt .aud-hint.is-used{opacity:0;max-height:0;margin:0;padding-block:0;border-width:0;overflow:hidden}
  .omt.omt .aud-tap{position:relative;flex:0 0 auto;width:16px;height:16px;display:grid;place-items:center}
  .omt.omt .aud-tap::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
  .omt.omt .aud-tap i{position:absolute;inset:0;border-radius:50%;border:1.5px solid currentColor;animation:omt-audTap 1.8s ease-out infinite}
  @keyframes omt-audTap{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.5);opacity:0}}
  .omt.omt .aud-plus{display:grid;place-items:center;position:absolute;z-index:2;top:9px;inset-inline-end:9px;width:26px;height:26px;border-radius:50%;
    background:rgba(23,13,76,.55);border:1px solid rgba(255,255,255,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:opacity .35s ease,transform .35s ease}
  .omt.omt .aud-plus::before,.omt.omt .aud-plus::after{content:"";position:absolute;width:11px;height:1.6px;border-radius:2px;background:#FFFFFF}
  .omt.omt .aud-plus::after{transform:rotate(90deg)}
  .omt.omt .aud-i.is-on .aud-plus{opacity:0;transform:rotate(45deg) scale(.6)}
}

/* =================================== WHY ====================================
   The brand sphere as the core, with the five reasons on an orbit around it.
   The chosen node lights and a beam of light runs to it from the core; the
   reason reads large beside it, under a count and over a progress line. */
.omt.omt .why-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.omt.omt .why-copy{display:flex;flex-direction:column;gap:clamp(16px,1.6vw,22px)}
.omt.omt .why-count{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--ink-3)}
.omt.omt .why-count b{font-size:clamp(40px,4vw,58px);font-weight:700;line-height:1;color:var(--cyan);letter-spacing:-.02em}
html[data-omt-theme="light"] .omt.omt .why-count b{color:var(--accent-ink)}
.omt.omt .why-slides{display:grid}
.omt.omt .why-s{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s ease,transform .6s var(--mo-ease),visibility 0s linear .45s}
.omt.omt .why-s.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .15s,transform .8s var(--mo-ease) .15s,visibility 0s}
.omt.omt .why-t{margin:0 0 12px;font-size:clamp(22px,2.1vw,32px);font-weight:800;line-height:1.3;color:var(--ink);text-wrap:balance}
.omt.omt .why-d{margin:0;max-width:56ch;font-size:clamp(15px,1.1vw,17px);line-height:1.8;color:var(--ink-2)}
[dir="rtl"] .omt.omt .why-d{line-height:1.95}
.omt.omt .why-ctrl{display:flex;align-items:center;gap:14px;margin-block-start:6px}
.omt.omt .why-arw{flex:0 0 auto;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  color:var(--ink);background:transparent;border:1px solid var(--line-soft);transition:background .3s,border-color .3s,color .3s}
.omt.omt .why-arw svg{width:18px;height:18px}
.omt.omt .why-prev svg{scale:-1 1}
[dir="rtl"] .omt.omt .why-next svg{scale:-1 1}
[dir="rtl"] .omt.omt .why-prev svg{scale:1 1}
.omt.omt .why-arw:hover{border-color:var(--cyan);color:var(--cyan)}
.omt.omt .why-arw:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
html[data-omt-theme="light"] .omt.omt .why-arw{border-color:var(--border-mid,rgba(59,43,146,.3))}
html[data-omt-theme="light"] .omt.omt .why-arw:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.omt.omt .why-prog{position:relative;flex:1 1 auto;max-width:260px;height:2px;border-radius:2px;background:var(--line-soft);overflow:hidden}
.omt.omt .why-prog i{position:absolute;inset:0;background:var(--cyan);transform:scaleX(var(--p,0));transform-origin:left center}
[dir="rtl"] .omt.omt .why-prog i{transform-origin:right center}
html[data-omt-theme="light"] .omt.omt .why-prog i{background:var(--accent-ink)}

/* the core and its orbit */
.omt.omt .why-orb{position:relative;width:100%}
.omt.omt .sx-why{overflow-x:clip}
/* the stage: a window cut from the hero's 1920 x 1080 stage (1270 x 670),
   so every piece keeps the hero's proportions; the core sits in it as there */
.omt.omt .why-orb-in{position:relative;aspect-ratio:1270 / 670;margin-block:2% 0;margin-inline:-6%}
.omt.omt .why-core{position:absolute;aspect-ratio:1077 / 525;animation:omt-whyFloat 7s ease-in-out infinite alternate}
@keyframes omt-whyFloat{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.omt.omt .why-halo{position:absolute;left:49.5%;top:34%;width:46%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(146,70,245,.42) 0%,rgba(34,227,245,.12) 45%,transparent 70%);filter:blur(8px)}
/* behind the core: the hero's own pieces, each placed and sized as in the
   hero and moving as it does there; the window's sides fade out */
.omt.omt .why-props{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%)}
.omt.omt .wp{position:absolute;display:block}
.omt.omt .wp img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.omt.omt .wp-rotor img{transform-origin:50% 50%;animation:omt-rotor 11s linear infinite}
.omt.omt .wp-dish{transform-origin:43.443% 57.353%;animation:omt-dishTrack 13s ease-in-out 2s infinite}
.omt.omt .wp-drone2 .dmir{transform:scaleX(-1)}
.omt.omt .wp-drone .d-v{--amp:3px;--tv:6.7s}
.omt.omt .wp-drone .d-h{--amp:2.5px;--th:8.9s}
.omt.omt .wp-drone .d-r{--amp:1.2deg;--tr:7.3s}
.omt.omt .wp-drone .d-p{--amp:.7deg;--tp:5.9s}
.omt.omt .wp-drone2 .d-v{--amp:4px;--tv:8.1s;animation-delay:-2.9s}
.omt.omt .wp-drone2 .d-h{--amp:3px;--th:6.4s;animation-delay:-4.1s}
.omt.omt .wp-drone2 .d-r{--amp:1.5deg;--tr:9.2s;animation-delay:-1.7s}
.omt.omt .wp-drone2 .d-p{--amp:.8deg;--tp:7.7s;animation-delay:-3.3s}
.omt.omt .why-ball{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.omt.omt .why-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.omt.omt .why-ring{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.6}
.omt.omt .why-ring2{fill:none;stroke:rgba(34,227,245,.38);stroke-width:1.2;stroke-dasharray:.6 1.8;animation:omt-whyDrift 60s linear infinite}
@keyframes omt-whyDrift{to{stroke-dashoffset:-100}}
html[data-omt-theme="light"] .omt.omt .why-ring{stroke:rgba(59,43,146,.38)}
html[data-omt-theme="light"] .omt.omt .why-ring2{stroke:rgba(59,43,146,.3)}
/* the drone's spotlight on the chosen reason: a soft cone from its camera,
   a pool of light where it lands, and the camera's lamp lit */
.omt.omt .why-cone{opacity:0;transition:opacity .45s ease}
.omt.omt .why-cone.is-on{opacity:1;transition:opacity .8s ease .15s}
.omt.omt .why-cone polygon{filter:blur(3px);animation:omt-whyBeam 3.2s ease-in-out infinite alternate}
@keyframes omt-whyBeam{from{opacity:.75}to{opacity:1}}
.omt.omt .why-pool{fill:#22E3F5;opacity:.28;filter:blur(6px)}
.omt.omt .why-lamp{fill:#E9FDFF;filter:drop-shadow(0 0 6px #22E3F5)}
html[data-omt-theme="light"] .omt.omt .why-pool{opacity:.22}
.omt.omt .why-node{position:absolute;z-index:2;width:40px;height:40px;padding:0;translate:-50% -50%;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  font-size:12px;font-weight:700;color:#FFFFFF;background:rgba(23,13,76,.7);border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .4s,color .4s,border-color .4s,scale .5s var(--mo-ease)}
/* the other reasons stay faint until chosen */
.omt.omt .why-node:not(.is-on){opacity:.4}
.omt.omt .why-node:not(.is-on):hover,.omt.omt .why-node:not(.is-on):focus-visible{opacity:.85}
.omt.omt .why-node{transition:background .4s,color .4s,border-color .4s,scale .5s var(--mo-ease),opacity .45s ease}
.omt.omt .why-node:hover{border-color:#22E3F5}
.omt.omt .why-node.is-on{scale:1.18;background:#22E3F5;color:#0B0526;border-color:#22E3F5;box-shadow:0 0 14px rgba(34,227,245,.45)}
/* the active node's timer: a ring that fills while its reason is shown */
.omt.omt .why-node::after{content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s;
  background:conic-gradient(var(--ring-on,#22E3F5) calc(var(--p,0) * 360deg),var(--ring-off,rgba(255,255,255,.22)) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px))}
.omt.omt .why-node.is-on::after{opacity:1}
.omt.omt .why-node:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
html[data-omt-theme="light"] .omt.omt .why-node{background:rgba(255,255,255,.9);color:var(--accent-ink,#3B2B92);border-color:rgba(59,43,146,.35)}
html[data-omt-theme="light"] .omt.omt .why-node.is-on{background:var(--accent-ink,#3B2B92);color:#FFFFFF;border-color:var(--accent-ink,#3B2B92);box-shadow:0 0 20px rgba(59,43,146,.45)}
html[data-omt-theme="light"] .omt.omt .why-node{--ring-on:var(--accent-ink,#3B2B92);--ring-off:rgba(59,43,146,.18)}
/* on the light ground the faint (40 %) nodes washed out (user, 2026-10-21: «الارقام لون الدائرة غير واضح»):
   solid white coins with a clear edge and dark numbers; the chosen one stays filled */
html[data-omt-theme="light"] .omt.omt .why-node:not(.is-on){opacity:1;background:#FFFFFF;color:#311081;border:1.5px solid rgba(49,16,129,.42);
  box-shadow:0 6px 16px -6px rgba(45,20,95,.35);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-omt-theme="light"] .omt.omt .why-node:not(.is-on):hover,html[data-omt-theme="light"] .omt.omt .why-node:not(.is-on):focus-visible{border-color:#311081;color:#311081}

/* =================================== EXPO =================================== */
.omt.omt .sx-expo{
  --ink:#FFFFFF;--ink-2:#E2D8FF;--cyan:#22E3F5;--violet-2:#9246F5;--on-cyan:#0B0526;
  background:#24156E;overflow:hidden;min-height:clamp(420px,38vw,540px);display:flex;align-items:center;
}
html[data-omt-theme="light"] .omt.omt .sx-expo{background:#24156E}
.omt.omt .expo-bg{position:absolute;inset:0}
.omt.omt .expo-bg img,.omt.omt .expo-bg .expo-film{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:saturate(.85) brightness(.85)}
/* the expo logo's own colours over the film: its cyan-violet-pink-amber
   sweep as a colour wash, and its deep navy as the shade behind the copy;
   a hairline of the same sweep closes the band */
.omt.omt .expo-ov{position:absolute;inset:0;display:block;pointer-events:none}
.omt.omt .expo-ov-tint{background:linear-gradient(120deg,#4CC6F5 0%,#8B3CF0 38%,#E0307A 72%,#F5A833 100%);mix-blend-mode:color;opacity:.42}
.omt.omt .expo-ov-side{background:linear-gradient(to var(--ex-dir,right),rgba(20,11,60,.95) 0%,rgba(20,11,60,.8) 38%,rgba(20,11,60,.25) 74%,rgba(20,11,60,.06)),
  linear-gradient(to top,rgba(20,11,60,.6),transparent 42%)}
[dir="rtl"] .omt.omt .expo-ov-side{--ex-dir:left}
.omt.omt .sx-expo::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(90deg,#4CC6F5,#8B3CF0 38%,#E0307A 72%,#F5A833)}
/* the expo's own call to action wears the expo logo's sweep; on hover the
   sweep turns round */
.omt.omt .sx-expo .btn-1{background:linear-gradient(100deg,#4CC6F5 0%,#8B3CF0 42%,#E0307A 78%,#F5A833 100%);color:#FFFFFF;
  text-shadow:0 1px 8px rgba(20,11,60,.35);box-shadow:0 14px 34px -14px rgba(139,60,240,.8)}
.omt.omt .sx-expo .btn-1::after{background:linear-gradient(100deg,#F5A833 0%,#E0307A 30%,#8B3CF0 64%,#4CC6F5 100%)}
.omt.omt .sx-expo .btn-1:hover{color:#FFFFFF;box-shadow:0 20px 44px -14px rgba(224,48,122,.75)}
.omt.omt .sx-expo .wrap{position:relative;z-index:2}
.omt.omt .expo-copy{display:grid;justify-items:start;gap:18px;max-width:min(620px,60%)}
/* the expo's mark: larger, with the FAM Expo page's effect (expo.css
   .ex-mark — it lifts and glows under the pointer, a light passes over it now
   and then, a press sends rings out), in the mark's own colours */
.omt.omt .sx-expo{--fx-cyan:#4CC6F5;--fx-violet:#8B3CF0;--fx-pink:#E0307A;--fx-amber:#F5A833}
.omt.omt .sx-expo .expo-logo{margin:0 0 clamp(16px,1.8vw,24px)}
.omt.omt .sx-expo .expo-logo img{height:clamp(72px,7.4vw,118px)}
.omt.omt .sx-expo .sx-title{padding:0;font-size:clamp(26px,2.8vw,40px)}
.omt.omt .sx-expo .sx-title::before{display:none}
.omt.omt .expo-text{margin:0;font-size:clamp(16px,1.2vw,18.5px);line-height:1.7;color:var(--ink-2)}
[dir="rtl"] .omt.omt .expo-text{line-height:1.9}

/* ================================== CLOSING ================================= */
.omt.omt .sx-close{text-align:center;overflow:hidden}
html[data-omt-theme="light"] .omt.omt .sx-close::before{display:none}   /* no blurred glow on the light ground (rule 1) */
.omt.omt .sx-close::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--violet-2) 22%,transparent),transparent 62%)}
.omt.omt .sx-close .wrap{position:relative;display:grid;justify-items:center;gap:clamp(16px,2vw,24px)}
/* the OMAINTEC 2027 mark itself, filled with the title's white-cyan-violet
   sweep; a bright spot and the sweep's angle follow the pointer anywhere in
   the section (sections.js sets --mx / --my / --ang), and drift slowly on
   their own when it is away. The mark is a mask, so its lettering stays cut
   out. */
.omt.omt .close-title{margin:0;line-height:0}
.omt.omt .close-logo{display:block;width:clamp(250px,32vw,460px);aspect-ratio:1400 / 796;margin-inline:auto;
  background:
    radial-gradient(circle at var(--mx,32%) var(--my,40%),#FFFFFF 0%,rgba(214,250,255,.9) 12%,rgba(34,227,245,.55) 30%,rgba(34,227,245,0) 58%),
    linear-gradient(var(--ang,100deg),#E8FDFF 0%,var(--cyan) 30%,#6C7BFF 62%,var(--violet-2) 82%,#C04BF5 100%);
  -webkit-mask:url(../img/logo-mark-mask.webp) center / contain no-repeat;mask:url(../img/logo-mark-mask.webp) center / contain no-repeat;
  filter:drop-shadow(0 10px 30px rgba(34,227,245,.18))}
html[data-omt-theme="light"] .omt.omt .close-logo{
  background:
    radial-gradient(circle at var(--mx,32%) var(--my,40%),rgba(6,147,184,.95) 0%,rgba(6,147,184,.5) 16%,rgba(6,147,184,0) 46%),
    linear-gradient(var(--ang,100deg),#130B42 0%,#311081 45%,#6C3BE0 75%,#0693B8 100%);
  filter:none}
.omt.omt .close-text{margin:0;max-width:62ch;font-size:clamp(17px,1.4vw,21px);line-height:1.7;color:var(--ink-2);text-wrap:balance}
[dir="rtl"] .omt.omt .close-text{line-height:1.9}
html[data-omt-theme="light"] .omt.omt .sx-close .btn-2{color:var(--ink);border-color:var(--border-mid);background:#FFFFFF}

/* ============================== SWIPE HINT ===============================
   Phones: a round arrow over the edge of a sideways row, nudging towards the
   hidden cards. A tap moves one card on; it fades once the row reaches its
   end. Placed and shown by sections.js. */
.omt.omt .swipe-hint{position:absolute;z-index:4;inset-inline-end:8px;width:44px;height:44px;margin-block-start:-22px;padding:0;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;color:#FFFFFF;
  background:rgba(23,13,76,.62);border:1px solid rgba(34,227,245,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 22px rgba(8,4,32,.45);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s;--dx:5px}
/* RTL mirrors the arrow, and the mirror also turns its nudge to the left */
.omt.omt .swipe-hint.is-on{opacity:1;visibility:visible;transition:opacity .4s ease}
.omt.omt .swipe-hint svg{width:20px;height:20px;animation:omt-swipeNudge 1.6s cubic-bezier(.45,0,.25,1) infinite}
[dir="rtl"] .omt.omt .swipe-hint svg{scale:-1 1}
.omt.omt .swipe-hint::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(34,227,245,.7);
  animation:omt-swipeRing 1.6s ease-out infinite;pointer-events:none}
.omt.omt .swipe-hint-sm{width:34px;height:34px;margin-block-start:-17px}
.omt.omt .swipe-hint-sm svg{width:16px;height:16px}
html[data-omt-theme="light"] .omt.omt .swipe-hint{background:rgba(255,255,255,.88);color:var(--accent-ink,#3B2B92);
  border-color:rgba(59,43,146,.35);box-shadow:0 6px 20px rgba(59,43,146,.18)}
html[data-omt-theme="light"] .omt.omt .swipe-hint::after{border-color:rgba(59,43,146,.45)}
/* the way back: on the near edge, quieter (no ring), pointing back */
.omt.omt .swipe-back{inset-inline-end:auto;inset-inline-start:8px;opacity:0}
.omt.omt .swipe-back.is-on{opacity:.88}
.omt.omt .swipe-back::after{display:none}
.omt.omt .swipe-back svg{scale:-1 1;animation:none}
[dir="rtl"] .omt.omt .swipe-back svg{scale:1 1}
html[data-omt-theme="light"] .omt.omt .sx-gallery .swipe-hint{background:rgba(23,13,76,.62);color:#FFFFFF;border-color:rgba(34,227,245,.55)}
@keyframes omt-swipeNudge{0%,100%{transform:translateX(0)}45%{transform:translateX(var(--dx))}60%{transform:translateX(calc(var(--dx) * .6))}}
@keyframes omt-swipeRing{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(1.45);opacity:0}}
/* phones and tablets: the line above a sideways row (objectives, tracks) — a
   pulsing dot, the hint, an arrow nudging the way the cards go. A tap moves
   one card on; it dims once the row reaches its last card. It shows wherever
   its row scrolls sideways: tracks up to 980 px, objectives up to 600 px. */
.omt.omt .swipe-note{display:none}
@media (max-width:980px){
  .omt.omt .swipe-note{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:8px 14px 8px 12px;border-radius:999px;
    font:inherit;font-size:13.5px;font-weight:600;line-height:1.4;text-align:start;cursor:pointer;color:var(--cyan);
    background:color-mix(in srgb,var(--cyan) 10%,transparent);border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent);
    -webkit-tap-highlight-color:transparent;transition:opacity .5s ease}
  html[data-omt-theme="light"] .omt.omt .swipe-note{color:var(--accent-ink);background:rgba(59,43,146,.07);border-color:rgba(59,43,146,.25)}
  .omt.omt .swipe-note.is-end{opacity:.45}
  .omt.omt .swipe-note.is-end .swipe-dot i,.omt.omt .swipe-note.is-end .swipe-go{animation:none}
  .omt.omt .swipe-dot{position:relative;flex:0 0 auto;width:16px;height:16px;display:grid;place-items:center}
  .omt.omt .swipe-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
  .omt.omt .swipe-dot i{position:absolute;inset:0;border-radius:50%;border:1.5px solid currentColor;animation:omt-swipeDot 1.8s ease-out infinite}
  .omt.omt .swipe-go{flex:0 0 auto;width:17px;height:17px;--dx:5px;animation:omt-swipeNudge 1.6s cubic-bezier(.45,0,.25,1) infinite}
  [dir="rtl"] .omt.omt .swipe-go{scale:-1 1}
}
@media (min-width:601px){.omt.omt .sx-obj .swipe-note{display:none}}
@keyframes omt-swipeDot{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.omt.omt .swipe-dot i,.omt.omt .swipe-go{animation:none}}

/* ================================ RESPONSIVE ================================ */
@media (max-width:980px){
  .omt.omt .obj-grid,.omt.omt .why-grid{grid-template-columns:minmax(0,1fr)}
  .omt.omt .aud-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .omt.omt .obj-media{min-height:0;aspect-ratio:16/10}
  .omt.omt .why-orb{order:-1;max-width:640px;margin-inline:auto}
  .omt.omt .expo-copy{max-width:none}
  /* tracks: a swipeable row */
  .omt.omt .tr-row{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:6px;scrollbar-width:none}
  .omt.omt .tr-row::-webkit-scrollbar{display:none}
  .omt.omt .tr,.omt.omt .tr.is-on{flex:0 0 clamp(250px,74vw,320px);height:clamp(440px,124vw,500px);scroll-snap-align:start}
  .omt.omt .tr .tr-media{filter:saturate(1) brightness(.92)}
  .omt.omt .tr-t,.omt.omt .tr.is-on .tr-t{font-size:17px}
  /* phones: every card carries its topics, two of them */
  .omt.omt .tr .tr-more{grid-template-rows:1fr;opacity:1;visibility:visible;transition:none}
  .omt.omt .tr-p li:nth-child(n+3){display:none}
  .omt.omt .tr-p li{font-size:13px}
  .omt.omt .tr::after,.omt.omt .tr.is-on::after{background:linear-gradient(to top,rgba(30,16,100,.97) 0%,rgba(30,16,100,.8) 50%,rgba(30,16,100,.1) 82%)}
  .omt.omt .gal-stage{height:clamp(420px,110vw,560px)}
  .omt.omt .gal-s figcaption{bottom:calc(84px + 16px)}
  .omt.omt .gal-nav{width:42px;height:42px;margin-block-start:-21px}
  .omt.omt .gal-nav svg{width:18px;height:18px}
}
@media (max-width:600px){
  /* objectives: six swipeable cards, each with its own picture */
  .omt.omt .obj-media{display:none}
  .omt.omt .obj-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(18px,4vw,44px));padding-inline:clamp(18px,4vw,44px)}
  .omt.omt .obj-list::-webkit-scrollbar{display:none}
  .omt.omt .obj-row,.omt.omt .obj-row.is-on{flex:0 0 80vw;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:10px 12px;
    padding:0 0 18px;border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;scroll-snap-align:center;
    background:color-mix(in srgb,var(--ink) 4%,transparent)}
  .omt.omt .obj-row::before{display:none}
  .omt.omt .obj-thumb{display:block;grid-column:1 / -1;width:100%;aspect-ratio:16/10;object-fit:cover;max-width:none}
  .omt.omt .obj-n{padding-inline-start:16px;color:var(--cyan)}
  .omt.omt .obj-t{padding-inline-end:16px;color:var(--ink)}
  .omt.omt .obj-bar{inset-inline:0;bottom:0;height:3px;border-radius:0}
  html[data-omt-theme="light"] .omt.omt .obj-row,html[data-omt-theme="light"] .omt.omt .obj-row.is-on{background:#FFFFFF}
  html[data-omt-theme="light"] .omt.omt .obj-n{color:var(--accent-cyan)}   /* the bright cyan was 1.6:1 on white */
  /* audience: two columns; the tapped portrait keeps its place and its
     description fills it over a deeper shade */
  .omt.omt .aud-wall{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(190px,56vw,220px);gap:8px}
  .omt.omt .aud-i:nth-child(1),.omt.omt .aud-i:nth-child(6){grid-column:span 1}
  .omt.omt .aud-c{inset-inline:12px;bottom:12px}
  .omt.omt .aud-n{top:10px;inset-inline-start:12px}
  .omt.omt .aud-t{font-size:14px}
  .omt.omt .aud-d>p>span,[dir="rtl"] .omt.omt .aud-d>p>span{padding-block-start:6px;font-size:12.5px;line-height:1.6}
  .omt.omt .aud-i.is-on .aud-n{opacity:0}
  .omt.omt .aud-i.is-on .aud-m{filter:saturate(1) brightness(.5)}
  .omt.omt .aud-i.is-on::after{background:linear-gradient(to top,rgba(23,13,76,.97) 0%,rgba(23,13,76,.85) 62%,rgba(23,13,76,.3) 100%)}
  .omt.omt .why-node{width:32px;height:32px;font-size:11px}
  .omt.omt .why-copy{gap:12px}
  .omt.omt .why-count b{font-size:36px}
  .omt.omt .why-copy{touch-action:pan-y}
  .omt.omt .sx-expo{min-height:0;padding-block:72px}
  .omt.omt .expo-ov-side{background:linear-gradient(to top,rgba(20,11,60,.96) 25%,rgba(20,11,60,.72) 70%,rgba(20,11,60,.4))}
}
@media (prefers-reduced-motion:reduce){
  .omt.omt .sx *,.omt.omt .sx *::before,.omt.omt .sx *::after{transition-duration:.001ms!important;animation:none!important}
}

/* ------------------------------------------------------------------ cta
   Above the gallery (user, 2026-10-21: «يجب ان يكون جذاب اكثر»): one deep band
   in the identity's colours, the same in both themes (like the expo band); a
   large CPD coin with rings of light going out from it without end; the CPD
   line as a headline with its hours in the identity
   gradient, the rest under it, then the two buttons. Calm motion only, none
   with reduced motion. */
.omt.omt .sx-cta{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(64px,7vw,116px);
  --ink:#FFFFFF;--ink-2:#DCCFF7;--cyan:#22E3F5;--violet-2:#9246F5;--on-cyan:#0B0526;--ground:#1B0A47;
  color:#FFFFFF;background:linear-gradient(118deg,#160940 0%,#250E62 42%,#36137C 68%,#1A0A4E 100%)}
.omt.omt .sx-cta::before,.omt.omt .sx-cta::after{content:"";position:absolute;inset-inline:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(34,227,245,.7) 28%,rgba(146,70,245,.7) 62%,rgba(212,23,122,.6) 82%,transparent)}
.omt.omt .sx-cta::before{top:0}
.omt.omt .sx-cta::after{bottom:0}
.omt.omt .cta-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.omt.omt .cta-glow{position:absolute;inset:0;
  background:radial-gradient(38% 75% at var(--gx,16%) 50%,rgba(34,227,245,.2),transparent 70%),
             radial-gradient(42% 80% at var(--gx2,92%) 110%,rgba(212,23,122,.22),transparent 70%),
             radial-gradient(30% 60% at var(--gx2,92%) -10%,rgba(146,70,245,.28),transparent 70%)}
[dir="rtl"] .omt.omt .cta-glow{--gx:84%;--gx2:8%}
.omt.omt .cta-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask:linear-gradient(var(--dd,90deg),#000 0%,transparent 55%);mask:linear-gradient(var(--dd,90deg),#000 0%,transparent 55%)}
[dir="rtl"] .omt.omt .cta-dots{--dd:270deg}
.omt.omt .cta-sweep{position:absolute;top:-40%;bottom:-40%;left:0;width:26%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:skewX(-18deg) translateX(-160%);
  animation:omt-ctaSweep 11s cubic-bezier(.45,0,.2,1) 2s infinite}
@keyframes omt-ctaSweep{0%{transform:skewX(-18deg) translateX(-160%)}30%,100%{transform:skewX(-18deg) translateX(520%)}}

.omt.omt .cta-in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(36px,5.4vw,104px)}
/* the coin, large, and its pulse: three rings of light go out from it in turn, without end */
.omt.omt .cta-coin{position:relative;width:clamp(230px,21vw,320px);aspect-ratio:1;display:grid;place-items:center}
.omt.omt .sx-cta .cta-badge{width:100%;z-index:1}
.omt.omt .sx-cta .cta-badge img{filter:drop-shadow(0 18px 40px rgba(11,5,38,.7))}
.omt.omt .cta-pulse{position:absolute;inset:6%;pointer-events:none}
.omt.omt .cta-pulse i{position:absolute;inset:0;border-radius:50%;opacity:0;
  border:2px solid rgba(34,227,245,.85);box-shadow:0 0 18px rgba(34,227,245,.35),inset 0 0 18px rgba(146,70,245,.25);
  animation:omt-ctaPulse 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.omt.omt .cta-pulse i:nth-child(2){animation-delay:1.2s;border-color:rgba(146,70,245,.85)}
.omt.omt .cta-pulse i:nth-child(3){animation-delay:2.4s;border-color:rgba(212,23,122,.75)}
@keyframes omt-ctaPulse{0%{transform:scale(.92);opacity:.95}100%{transform:scale(1.55);opacity:0}}
/* the coin itself breathes with the pulse */
.omt.omt .sx-cta .cta-badge img{animation:omt-ctaBreath 3.6s ease-in-out infinite}
@keyframes omt-ctaBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

.omt.omt .cta-copy{display:grid;gap:clamp(14px,1.4vw,20px);max-width:780px}
.omt.omt .cta-t{margin:0;font-size:clamp(28px,3.1vw,48px);font-weight:800;line-height:1.28;color:#FFFFFF;text-wrap:balance}
[dir="rtl"] .omt.omt .cta-t{line-height:1.5}
.omt.omt .cta-n{display:inline-block;font-size:1.55em;line-height:1;padding-inline:.06em;vertical-align:-.06em;
  background:linear-gradient(100deg,#22E3F5 0%,#9246F5 55%,#D4177A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 22px rgba(34,227,245,.35))}
.omt.omt .cta-sub{margin:0;max-width:60ch;font-size:clamp(15.5px,1.2vw,19px);line-height:1.8;color:#DCCFF7}
[dir="rtl"] .omt.omt .cta-sub{line-height:1.95}
[dir="rtl"] .omt.omt .cta-sub .nw{white-space:nowrap;unicode-bidi:isolate}
.omt.omt .cta-go{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(6px,1vw,14px)}
.omt.omt .cta-go .btn{min-height:58px;padding-inline:clamp(28px,2.4vw,40px);font-size:clamp(16px,1.15vw,17.5px)}
.omt.omt .cta-go .btn-1{box-shadow:0 18px 46px -14px rgba(34,227,245,.75)}
.omt.omt .sx-cta .btn-2,html[data-omt-theme="light"] .omt.omt .sx-cta .btn-2{color:#FFFFFF;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
.omt.omt .sx-cta .btn-2:hover,html[data-omt-theme="light"] .omt.omt .sx-cta .btn-2:hover{border-color:#22E3F5;color:#22E3F5;background:rgba(34,227,245,.08)}

@media (max-width:900px){
  .omt.omt .cta-in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:28px}
  .omt.omt .cta-coin{width:clamp(200px,56vw,260px)}
  .omt.omt .cta-copy{justify-items:center}
  .omt.omt .cta-go{justify-content:center}
  [dir="rtl"] .omt.omt .cta-glow,.omt.omt .cta-glow{--gx:50%;--gx2:50%}
  .omt.omt .cta-dots{-webkit-mask:linear-gradient(180deg,#000 0%,transparent 60%);mask:linear-gradient(180deg,#000 0%,transparent 60%)}
}
@media (max-width:520px){
  .omt.omt .cta-go{display:grid;width:100%}
  .omt.omt .cta-go .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .omt.omt .cta-sweep,.omt.omt .cta-pulse i,.omt.omt .sx-cta .cta-badge img{animation:none}
}


/* ---- tracks.css ---- */
/* ============================ TRACKS & TOPICS PAGE ============================
   An opening band, then one chapter per track.

   Opening   a dark island. On the reading side the title large and the
             index — number and name on hairlines, the one playing lit, its
             line filling until the next comes up; a click goes to the
             chapter. On the other side that track's clip, sharp, in a tall
             frame (the clips are portrait, so they are never stretched);
             behind everything the same scene, blurred, as the atmosphere.
   Chapters  the track's clip held in view beside the full list of topics, on
             the homepage's alternating grounds; the clip changes side every
             chapter. The line being read is lit and its hairline drawn.
   Rail      the track numbers in a slim column beside the chapters (wide
             screens), or a bar of names under the header (everything else),
             marking where the reader is; a click goes to that track.
   ============================================================================ */

/* ---------------------------------------------------------------- opening */
.omt.omt .tp-hero{position:relative;isolation:isolate;overflow:hidden;color:#FFFFFF;background:#170D4C;
  min-height:clamp(600px,86vh,900px);display:grid;align-content:end;
  padding-block:calc(var(--head-h-c) + clamp(32px,4vw,64px)) clamp(40px,4.5vw,72px);
  --ink:#FFFFFF;--ink-2:#E2D8FF;--ink-3:#BCA9EE;--cyan:#22E3F5;--violet-2:#9246F5}
.omt.omt .tp-hero-bg{position:absolute;inset:0;z-index:-1}
/* the atmosphere: the poster, blurred while small and then scaled up, so
   the browser blurs an eighth of the area (cheap, even on phones) */
.omt.omt .tp-hero-bg>.sw-p{position:absolute;left:0;top:0;width:12.5%;height:12.5%;max-width:none;object-fit:cover;opacity:0;
  filter:blur(4px) saturate(1.3) brightness(.68);transform:scale(8.4);transform-origin:0 0;transition:opacity 1.6s var(--mo-ease)}
.omt.omt .tp-hero-bg>.sw-p.is-on{opacity:.9}
.omt.omt .tp-ov{position:absolute;inset:0;pointer-events:none}
.omt.omt .tp-ov-tint{background:
  radial-gradient(60% 70% at 85% 10%,rgba(134,51,201,.28),transparent 70%),
  linear-gradient(180deg,rgba(23,13,76,.62) 0%,rgba(23,13,76,.28) 34%,rgba(23,13,76,.78) 72%,#170D4C 100%)}
.omt.omt .tp-ov-side{background:linear-gradient(90deg,rgba(23,13,76,.92) 0%,rgba(23,13,76,.62) 38%,rgba(23,13,76,.08) 72%,transparent 100%)}
[dir="rtl"] .omt.omt .tp-ov-side{background:linear-gradient(270deg,rgba(23,13,76,.92) 0%,rgba(23,13,76,.62) 38%,rgba(23,13,76,.08) 72%,transparent 100%)}
[dir="rtl"] .omt.omt .tp-ov-tint{background:
  radial-gradient(60% 70% at 15% 10%,rgba(134,51,201,.28),transparent 70%),
  linear-gradient(180deg,rgba(23,13,76,.62) 0%,rgba(23,13,76,.28) 34%,rgba(23,13,76,.78) 72%,#170D4C 100%)}

.omt.omt .tp-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 clamp(16px,2vw,24px);font-size:14.5px;font-weight:600;color:var(--ink-3)}
.omt.omt .tp-crumb a{color:var(--ink-2);transition:color .25s}
.omt.omt .tp-crumb a:hover{color:var(--cyan)}
.omt.omt .tp-crumb-sep{opacity:.6}
.omt.omt .tp-crumb [aria-current]{color:var(--ink)}

.omt.omt .tp-hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.2fr);gap:clamp(36px,6vw,110px);align-items:end}
.omt.omt .tp-hero-copy{min-width:0}
.omt.omt .tp-hero-in>.tp-crumb{grid-column:1 / -1;margin:0}
.omt.omt .tp-head{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.omt.omt .tp-title{position:relative;margin:0;padding-block-start:22px;max-width:16ch;
  font-size:clamp(36px,4.4vw,68px);font-weight:800;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;
  text-shadow:0 4px 40px rgba(8,4,32,.45)}
[dir="rtl"] .omt.omt .tp-title{line-height:1.3;letter-spacing:0}
.omt.omt .tp-title::before{content:"";position:absolute;inset-inline-start:0;top:0;width:56px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--cyan),var(--violet-2))}
[dir="rtl"] .omt.omt .tp-title::before{background:linear-gradient(270deg,var(--cyan),var(--violet-2))}
/* the count of tracks, as an outlined numeral */
.omt.omt .tp-count{flex:0 0 auto;margin-block-end:-.08em;font-size:clamp(110px,15vw,250px);font-weight:600;line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(34,227,245,.55);
  background:linear-gradient(180deg,rgba(34,227,245,.16),rgba(146,70,245,.04));-webkit-background-clip:text;background-clip:text;
  pointer-events:none;user-select:none}

/* the index: number and name on hairlines, two columns on wide screens */
.omt.omt .tp-index{display:grid;grid-template-columns:minmax(0,1fr);
  margin:clamp(22px,2.6vw,36px) 0 0;padding:0;list-style:none;max-width:720px}
.omt.omt .tp-ix{position:relative;border-block-start:1px solid rgba(255,255,255,.16)}
.omt.omt .tp-ix:last-child{border-block-end:1px solid rgba(255,255,255,.16)}

/* the clip of the track playing: sharp, in a tall frame, with its number */
.omt.omt .tp-frame{position:relative;margin:0;justify-self:end;width:100%;max-width:400px;aspect-ratio:9 / 16;max-height:calc(100vh - var(--head-h-c) - 190px);
  border-radius:28px;overflow:hidden;isolation:isolate;background:#2A1A7A;
  box-shadow:0 50px 90px -40px rgba(8,4,32,.9),0 0 0 1px rgba(255,255,255,.14),0 0 70px -10px rgba(34,227,245,.22)}
.omt.omt .tp-frame>.sw-p{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;z-index:-1;transition:opacity 1.2s var(--mo-ease)}
.omt.omt .tp-frame>.sw-p.is-on{opacity:1}
.omt.omt .tp-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(23,13,76,.85) 0%,rgba(23,13,76,.15) 34%,transparent 55%)}
.omt.omt .tp-frame-n{position:absolute;z-index:1;inset-inline-start:24px;bottom:16px;font-size:clamp(72px,7vw,108px);font-weight:600;line-height:1;letter-spacing:-.04em;color:#FFFFFF}
.omt.omt .tp-frame-n b{position:absolute;inset-inline-start:0;bottom:0;font-weight:600;opacity:0;transition:opacity .8s var(--mo-ease)}
.omt.omt .tp-frame-n b.is-on{position:relative;opacity:1}
.omt.omt .tp-frame-of{position:absolute;z-index:1;inset-inline-end:22px;bottom:26px;font-size:15px;font-weight:600;color:rgba(255,255,255,.75)}
[dir="rtl"] .omt.omt .tp-frame-n b{right:0;left:auto}
.omt.omt .tp-ix a{display:grid;grid-template-columns:44px minmax(0,1fr) 22px;align-items:center;gap:12px;
  padding:11px 2px;font-size:clamp(15.5px,1.1vw,18px);font-weight:700;line-height:1.45;color:rgba(255,255,255,.7);
  transition:color .35s}
.omt.omt .tp-ix-n{font-size:13.5px;font-weight:600;color:var(--ink-3);transition:color .35s}
.omt.omt .tp-ix-go{width:20px;height:20px;opacity:0;translate:0 -4px;transition:opacity .35s,translate .35s var(--mo-ease)}
.omt.omt .tp-ix-go svg{width:100%;height:100%}
.omt.omt .tp-ix.is-on a,.omt.omt .tp-ix a:hover,.omt.omt .tp-ix a:focus-visible{color:#FFFFFF}
.omt.omt .tp-ix.is-on .tp-ix-n{color:var(--cyan)}
.omt.omt .tp-ix.is-on .tp-ix-go,.omt.omt .tp-ix a:hover .tp-ix-go{opacity:1;translate:0 0}
.omt.omt .tp-ix a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:8px}
/* the time left on the track playing behind */
.omt.omt .sw-bar{position:absolute;inset-inline:0;bottom:-1px;height:2px;overflow:hidden;opacity:0;transition:opacity .35s;pointer-events:none}
.omt.omt .sw-i.is-on .sw-bar{opacity:1}
.omt.omt .sw-bar i{position:absolute;inset:0;background:var(--cyan);transform:scaleX(var(--p,0));transform-origin:left center;transition:transform .12s linear}
[dir="rtl"] .omt.omt .sw-bar i{transform-origin:right center}

/* ------------------------------------------------------------------ rail */
.omt.omt .tp-body{position:relative}
/* wide screens: numbers in a slim column beside the chapters */
.omt.omt .tp-rail{position:sticky;z-index:30;top:calc(var(--head-h-c) + 28px);height:0}
.omt.omt .tp-rail{--rail-x:max(14px,calc((100vw - 1300px) / 2 - 60px))}
.omt.omt .tp-rail-line{position:absolute;inset-inline-start:calc(var(--rail-x) + 19px);top:14px;width:1px;height:calc(8 * 44px - 28px);
  background:rgba(255,255,255,.16)}
.omt.omt .tp-rail-line i{position:absolute;inset:0;background:var(--cyan);transform:scaleY(var(--p,0));transform-origin:top;transition:transform .2s linear}
.omt.omt .tp-rail-i{position:absolute;inset-inline-start:var(--rail-x);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  color:var(--ink-3);background:rgba(23,13,76,.72);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:color .3s,border-color .3s,background .3s}
.omt.omt .tp-rail-i:nth-of-type(1){top:0}.omt.omt .tp-rail-i:nth-of-type(2){top:44px}.omt.omt .tp-rail-i:nth-of-type(3){top:88px}.omt.omt .tp-rail-i:nth-of-type(4){top:132px}
.omt.omt .tp-rail-i:nth-of-type(5){top:176px}.omt.omt .tp-rail-i:nth-of-type(6){top:220px}.omt.omt .tp-rail-i:nth-of-type(7){top:264px}.omt.omt .tp-rail-i:nth-of-type(8){top:308px}
.omt.omt .tp-rail-i:nth-of-type(9){top:352px}.omt.omt .tp-rail-i:nth-of-type(10){top:396px}
.omt.omt .tp-rail-n{font-size:12.5px;font-weight:600}
.omt.omt .tp-rail-i.is-on{color:#0B0526;background:var(--cyan);border-color:var(--cyan)}
.omt.omt .tp-rail-i:hover{color:#FFFFFF;border-color:var(--cyan)}
.omt.omt .tp-rail-i.is-on:hover{color:#0B0526}
/* its name slides out beside it on hover */
.omt.omt .tp-rail-t{position:absolute;inset-inline-start:calc(100% + 10px);top:50%;translate:0 -50%;white-space:nowrap;
  padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;color:#FFFFFF;background:rgba(23,13,76,.92);
  border:1px solid rgba(255,255,255,.14);opacity:0;scale:.94;pointer-events:none;transition:opacity .25s,scale .25s var(--mo-ease)}
.omt.omt .tp-rail-i:hover .tp-rail-t,.omt.omt .tp-rail-i:focus-visible .tp-rail-t{opacity:1;scale:1}
html[data-omt-theme="light"] .omt.omt .tp-rail-i{color:var(--ink-3);background:rgba(255,255,255,.86);border-color:var(--border-mid)}
html[data-omt-theme="light"] .omt.omt .tp-rail-i.is-on{color:#FFFFFF;background:var(--accent-ink);border-color:var(--accent-ink)}
html[data-omt-theme="light"] .omt.omt .tp-rail-line{background:var(--border-mid)}
html[data-omt-theme="light"] .omt.omt .tp-rail-line i{background:var(--accent-ink)}

/* -------------------------------------------------------------- chapters */
.omt.omt .tp-ch{scroll-margin-top:calc(var(--head-h-c) + 8px);padding-block:clamp(76px,8.5vw,128px)}
.omt.omt .tp-ch-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5.5vw,96px);align-items:start}
.omt.omt .tp-flip .tp-media{order:2}
/* the track's clip, held in view while the topics are read */
.omt.omt .tp-media{position:sticky;top:calc(var(--head-h-c) + 36px);margin:0;aspect-ratio:4 / 5;max-height:calc(100vh - var(--head-h-c) - 72px);
  width:100%;border-radius:26px;overflow:hidden;background:#2A1A7A;isolation:isolate;
  box-shadow:0 40px 80px -46px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.1)}
.omt.omt .tp-clip{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-1}
.omt.omt .tp-media::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top,rgba(23,13,76,.86) 0%,rgba(23,13,76,.2) 42%,transparent 62%)}
.omt.omt .tp-media-n{position:absolute;z-index:1;inset-inline-start:clamp(18px,2vw,28px);bottom:clamp(10px,1.4vw,18px);
  font-size:clamp(64px,7vw,116px);font-weight:600;line-height:1;color:#FFFFFF;letter-spacing:-.04em;text-shadow:0 8px 40px rgba(0,0,0,.45)}

.omt.omt .tp-copy{min-width:0;padding-block-start:clamp(4px,1vw,16px)}
.omt.omt .tp-eyebrow{display:flex;align-items:baseline;gap:8px;margin:0;font-size:14px;font-weight:600;color:var(--ink-3)}
.omt.omt .tp-eyebrow b{font-size:16px;color:var(--cyan)}
html[data-omt-theme="light"] .omt.omt .tp-eyebrow b{color:var(--accent-cyan)}
.omt.omt .tp-ch-t{position:relative;margin:12px 0 clamp(22px,2.6vw,36px);padding-block-start:18px;
  font-size:clamp(26px,2.7vw,40px);font-weight:800;line-height:1.25;color:var(--ink);text-wrap:balance}
[dir="rtl"] .omt.omt .tp-ch-t{line-height:1.45}
.omt.omt .tp-ch-t::before{content:"";position:absolute;inset-inline-start:0;top:0;width:44px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--violet-2))}
[dir="rtl"] .omt.omt .tp-ch-t::before{background:linear-gradient(270deg,var(--cyan),var(--violet-2))}

/* the topics: numbered lines on hairlines; the one being read is lit */
.omt.omt .tp-topics{margin:0;padding:0;list-style:none}
.omt.omt .tp-topic{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:baseline;
  padding:17px 0;border-block-start:1px solid var(--line-soft)}
.omt.omt .tp-topic:last-child{border-block-end:1px solid var(--line-soft)}
.omt.omt .tp-topic::before{content:"";position:absolute;inset-inline-start:0;top:-1px;width:100%;height:1px;
  background:linear-gradient(90deg,var(--cyan),var(--violet-2));transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--mo-ease)}
[dir="rtl"] .omt.omt .tp-topic::before{transform-origin:right center;background:linear-gradient(270deg,var(--cyan),var(--violet-2))}
.omt.omt .tp-tn{font-size:13.5px;font-weight:600;color:var(--ink-3);transition:color .45s}
.omt.omt .tp-topic p{margin:0;font-size:clamp(16px,1.12vw,18px);line-height:1.75;color:var(--ink-2);transition:color .45s}
[dir="rtl"] .omt.omt .tp-topic p{line-height:1.9}
.omt.omt .tp-topic.is-now::before{transform:scaleX(1)}
.omt.omt .tp-topic.is-now .tp-tn{color:var(--cyan)}
.omt.omt .tp-topic.is-now p{color:var(--ink)}
html[data-omt-theme="light"] .omt.omt .tp-topic.is-now .tp-tn{color:var(--accent-cyan)}

/* ---------------------------------------------- narrower: a bar of names */
@media (max-width:1399px){
  .omt.omt .tp-rail{position:sticky;top:var(--head-h-c);height:auto;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
    padding:10px max(14px,calc((100vw - 1300px) / 2 + clamp(18px,4vw,44px)));
    background:rgba(23,13,76,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-block-end:1px solid rgba(255,255,255,.1)}
  .omt.omt .tp-rail::-webkit-scrollbar{display:none}
  .omt.omt .tp-rail-line{display:none}
  .omt.omt .tp-rail-i,.omt.omt .tp-rail-i:nth-of-type(n){position:relative;inset:auto;top:auto;width:auto;height:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
    padding:7px 14px;border-radius:999px;background:transparent;border-color:transparent;color:rgba(255,255,255,.72);font-size:14px;font-weight:700}
  .omt.omt .tp-rail-t{position:static;translate:none;opacity:1;scale:1;padding:0;border:0;background:none;color:inherit;font-size:inherit}
  .omt.omt .tp-rail-i:hover{color:#FFFFFF;border-color:transparent;background:rgba(255,255,255,.07)}
  .omt.omt .tp-rail-i.is-on{color:#0B0526;background:var(--cyan);border-color:var(--cyan)}
  .omt.omt .tp-ch{scroll-margin-top:calc(var(--head-h-c) + 56px)}
  .omt.omt .tp-media{top:calc(var(--head-h-c) + 84px);max-height:calc(100vh - var(--head-h-c) - 120px)}
  html[data-omt-theme="light"] .omt.omt .tp-rail{background:rgba(255,255,255,.9);border-color:var(--border-soft)}
  html[data-omt-theme="light"] .omt.omt .tp-rail-i{color:var(--ink-2);background:transparent;border-color:transparent}
  html[data-omt-theme="light"] .omt.omt .tp-rail-i.is-on{color:#FFFFFF;background:var(--accent-ink)}
}
@media (max-width:900px){
  .omt.omt .tp-hero{min-height:0;padding-block:calc(var(--head-h-c) + 40px) 44px}
  .omt.omt .tp-head{align-items:flex-start}
  .omt.omt .tp-hero-in{grid-template-columns:minmax(0,1fr)}
  .omt.omt .tp-frame{display:none}
  .omt.omt .tp-ix a{padding:13px 2px}
  .omt.omt .tp-ch{padding-block:56px 64px}
  .omt.omt .tp-ch-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .omt.omt .tp-flip .tp-media{order:0}
  .omt.omt .tp-media{position:relative;top:auto;aspect-ratio:16 / 10;max-height:none;border-radius:20px}
  .omt.omt .tp-media-n{font-size:58px}
  .omt.omt .tp-topic{grid-template-columns:36px minmax(0,1fr);padding:14px 0}
}
@media (prefers-reduced-motion:reduce){
  .omt.omt .tp-hero-bg>.sw-p,.omt.omt .tp-topic::before,.omt.omt .tp-topic p,.omt.omt .tp-tn{transition:none}
}


/* ---- activities.css ---- */
/* ========================== CONFERENCE ACTIVITIES PAGE ==========================
   Opening   the conference stage, filmed, behind the title, the programme in
             a sentence and the marks of the programme's own events.
   Story     the activities told while scrolling: the list on the reading
             side — the activity being read full, the others resting — and
             beside it one stage that holds still while its picture changes
             to the activity being read (its event's mark on it where it has
             one); a thin line under the stage tells how far along the
             programme the reader is. On phones each activity carries its own
             picture above it.
   Award     the Arab Award on its own ground: black, gold and ivory, the
             trophy's scene playing behind its mark and its words.
   ============================================================================ */

/* ---------------------------------------------------------------- opening */
.omt.omt .ac-hero{position:relative;isolation:isolate;overflow:hidden;color:#FFFFFF;background:#170D4C;
  min-height:clamp(560px,84vh,880px);display:grid;align-content:end;
  padding-block:calc(var(--head-h-c) + clamp(40px,5vw,80px)) clamp(48px,5.5vw,84px);
  --ink:#FFFFFF;--ink-2:#E2D8FF;--ink-3:#BCA9EE;--cyan:#22E3F5;--violet-2:#9246F5}
.omt.omt .ac-hero-bg{position:absolute;inset:0;z-index:-1}
/* the portal sits away from the words: the film is wider than the band and
   overflows on the far side, so its centre falls at 65% from the reading side */
.omt.omt .ac-film{position:absolute;top:0;inset-inline-start:0;width:130%;height:100%;max-width:none;object-fit:cover;filter:saturate(1.04) brightness(.95)}
.omt.omt .ac-ov{position:absolute;inset:0;pointer-events:none}
.omt.omt .ac-ov-tint{background:linear-gradient(180deg,rgba(23,13,76,.55) 0%,rgba(23,13,76,.12) 32%,rgba(23,13,76,.62) 66%,#170D4C 100%)}
.omt.omt .ac-ov-side{background:linear-gradient(90deg,rgba(23,13,76,.86) 0%,rgba(23,13,76,.5) 40%,transparent 74%)}
[dir="rtl"] .omt.omt .ac-ov-side{background:linear-gradient(270deg,rgba(23,13,76,.86) 0%,rgba(23,13,76,.5) 40%,transparent 74%)}
.omt.omt .ac-hero-in>.tp-crumb{margin:0 0 clamp(14px,1.8vw,22px)}
.omt.omt .ac-title{position:relative;margin:0;padding-block-start:22px;max-width:16ch;
  font-size:clamp(38px,5vw,76px);font-weight:800;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 4px 40px rgba(8,4,32,.45)}
[dir="rtl"] .omt.omt .ac-title{line-height:1.3;letter-spacing:0}
.omt.omt .ac-title::before{content:"";position:absolute;inset-inline-start:0;top:0;width:56px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--cyan),var(--violet-2))}
[dir="rtl"] .omt.omt .ac-title::before{background:linear-gradient(270deg,var(--cyan),var(--violet-2))}
.omt.omt .ac-intro{margin:clamp(16px,1.8vw,24px) 0 0;max-width:62ch;font-size:clamp(16.5px,1.25vw,20px);line-height:1.75;color:var(--ink-2);
  text-shadow:0 2px 18px rgba(8,4,32,.5)}
[dir="rtl"] .omt.omt .ac-intro{line-height:1.95}
/* the marks of the conference and its events: a band across the foot of the
   opening that runs on slowly (the set twice, so it loops without a seam),
   holds under the pointer, can be dragged either way with the mouse or a
   finger, and fades out at both edges. The run is driven by sections.js. */
.omt.omt .ac-band{position:relative;margin:clamp(30px,3.6vw,52px) 0 0;padding-block:clamp(18px,2vw,26px);overflow:hidden;
  border-block:1px solid rgba(255,255,255,.14);background:rgba(14,8,46,.36);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.omt.omt .ac-band{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.omt.omt .ac-band.is-drag{cursor:grabbing}
.omt.omt .ac-band-track{display:flex;width:max-content;will-change:transform}
.omt.omt .ac-marks{display:flex;align-items:center;gap:clamp(56px,6vw,104px);margin:0;padding-inline-end:clamp(56px,6vw,104px);list-style:none}
.omt.omt .ac-marks li{flex:0 0 auto}
.omt.omt .ac-marks img{height:calc(clamp(54px,5vw,80px) * var(--s,1));width:auto;max-width:none;opacity:.95;pointer-events:none}

/* ------------------------------------------------------------------ story */
.omt.omt .ac-list{padding-block:clamp(64px,7vw,110px)}
.omt.omt .ac-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5.5vw,96px);align-items:start}
.omt.omt .ac-steps{min-width:0}
.omt.omt .ac-step{position:relative;min-height:58vh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(24px,3vw,40px);
  opacity:.34;transition:opacity .6s var(--mo-ease)}
.omt.omt .ac-step:first-child{min-height:44vh;justify-content:flex-start}
.omt.omt .ac-step:last-child{min-height:62vh}
.omt.omt .ac-step.is-on{opacity:1}
.omt.omt .ac-step-media{display:none}
.omt.omt .ac-n{display:block;font-size:clamp(40px,4vw,64px);font-weight:600;line-height:1;letter-spacing:-.03em;color:transparent;
  -webkit-text-stroke:1.2px color-mix(in srgb,var(--cyan) 70%,transparent);transition:color .6s}
.omt.omt .ac-step.is-on .ac-n{color:var(--cyan);-webkit-text-stroke-color:var(--cyan)}
html[data-omt-theme="light"] .omt.omt .ac-n{-webkit-text-stroke-color:color-mix(in srgb,var(--accent-cyan) 70%,transparent)}
html[data-omt-theme="light"] .omt.omt .ac-step.is-on .ac-n{color:var(--accent-cyan);-webkit-text-stroke-color:var(--accent-cyan)}
/* the event's own mark, above the title of the activity that has one */
.omt.omt .ac-step-logo{display:block;height:calc(clamp(46px,4vw,62px) * var(--s,1));width:auto;max-width:min(100%,calc(280px * var(--s,1)));margin:16px 0 2px;object-fit:contain;object-position:left center}
[dir="rtl"] .omt.omt .ac-step-logo{object-position:right center}
/* each mark has a colour version for the light theme */
.omt.omt .ac-step-logo.on-light{display:none}
html[data-omt-theme="light"] .omt.omt .ac-step-logo.on-dark{display:none}
html[data-omt-theme="light"] .omt.omt .ac-step-logo.on-light{display:block}
html[data-omt-theme="light"] .omt.omt .ac-step-logo:not(.on-dark):not(.on-light){filter:brightness(0) saturate(100%) invert(12%) sepia(55%) saturate(3900%) hue-rotate(245deg) brightness(.9)}
.omt.omt .ac-t{margin:14px 0 0;font-size:clamp(23px,2.3vw,34px);font-weight:800;line-height:1.3;color:var(--ink);text-wrap:balance}
[dir="rtl"] .omt.omt .ac-t{line-height:1.5}
.omt.omt .ac-d{margin:12px 0 0;max-width:56ch;font-size:clamp(16px,1.12vw,18px);line-height:1.8;color:var(--ink-2)}
[dir="rtl"] .omt.omt .ac-d{line-height:1.95}

/* the stage: one frame that holds still while its picture changes */
.omt.omt .ac-stage{position:sticky;top:calc(var(--head-h-c) + max(24px,(100vh - var(--head-h-c) - min(56vw,620px) * .5625 - 60px) / 2))}
.omt.omt .ac-frame{position:relative;aspect-ratio:16 / 9;border-radius:24px;overflow:hidden;isolation:isolate;background:#170D4C;
  box-shadow:0 44px 90px -46px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.1)}
.omt.omt .ac-frame>.ac-m{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-1;opacity:0;transition:opacity 1s var(--mo-ease)}
.omt.omt .ac-frame>.ac-m.is-on{opacity:1}
.omt.omt .ac-frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(to top,rgba(14,8,46,.82) 0%,rgba(14,8,46,.12) 40%,transparent 60%)}
.omt.omt .ac-frame-logo{position:absolute;z-index:1;inset-inline-end:clamp(16px,2vw,26px);bottom:clamp(14px,1.8vw,22px);height:clamp(40px,4vw,62px);width:44%}
.omt.omt .ac-logo{position:absolute;inset-inline-end:0;bottom:0;height:calc(100% * min(var(--s,1), 2.2));width:auto;max-width:100%;object-fit:contain;object-position:right bottom;opacity:0;transition:opacity .8s var(--mo-ease);
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.5))}
[dir="rtl"] .omt.omt .ac-logo{object-position:left bottom}
.omt.omt .ac-logo.is-on{opacity:1}
.omt.omt .ac-frame-n{position:absolute;z-index:1;inset-inline-start:clamp(18px,2vw,28px);bottom:clamp(12px,1.6vw,20px);display:flex;align-items:baseline;gap:8px;
  font-size:clamp(44px,4.4vw,72px);font-weight:600;line-height:1;letter-spacing:-.03em;color:#FFFFFF}
.omt.omt .ac-frame-n b{position:absolute;inset-inline-start:0;bottom:0;font-weight:600;opacity:0;transition:opacity .7s var(--mo-ease)}
.omt.omt .ac-frame-n b.is-on{position:relative;opacity:1}
.omt.omt .ac-frame-n i{font-style:normal;font-size:15px;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:0}
.omt.omt .ac-prog{display:block;position:relative;height:2px;margin-block-start:18px;border-radius:2px;background:var(--line-soft);overflow:hidden}
.omt.omt .ac-prog i{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--violet-2));transform:scaleX(var(--p,0));transform-origin:left center;transition:transform .2s linear}
[dir="rtl"] .omt.omt .ac-prog i{transform-origin:right center;background:linear-gradient(270deg,var(--cyan),var(--violet-2))}

/* ------------------------------------------------------------------ award */
.omt.omt .ac-award{position:relative;isolation:isolate;overflow:hidden;background:#07050C;color:#F4EDE0;
  min-height:clamp(560px,88vh,900px);display:grid;align-items:center;padding-block:clamp(72px,8vw,120px)}
.omt.omt .ac-award-bg{position:absolute;inset:0;z-index:-1}
/* the trophy stands on the far side from the words: the film overflows the
   band there, so the trophy falls about 70% from the reading side */
.omt.omt .ac-award-film{position:absolute;top:0;inset-inline-start:0;width:140%;height:100%;max-width:none;object-fit:cover}
.omt.omt .ac-award-ov{background:
  linear-gradient(90deg,rgba(7,5,12,.94) 0%,rgba(7,5,12,.78) 34%,rgba(7,5,12,.2) 64%,rgba(7,5,12,.35) 100%),
  linear-gradient(180deg,#07050C 0%,transparent 18%,transparent 80%,#07050C 100%)}
[dir="rtl"] .omt.omt .ac-award-ov{background:
  linear-gradient(270deg,rgba(7,5,12,.94) 0%,rgba(7,5,12,.78) 34%,rgba(7,5,12,.2) 64%,rgba(7,5,12,.35) 100%),
  linear-gradient(180deg,#07050C 0%,transparent 18%,transparent 80%,#07050C 100%)}
.omt.omt .ac-award-in{max-width:1300px}
.omt.omt .ac-award-in>*{max-width:600px}
.omt.omt .ac-award-logo{height:clamp(92px,9vw,140px);width:auto;margin:0 0 clamp(22px,2.6vw,34px)}
.omt.omt .ac-award-t{margin:0;font-size:clamp(28px,3vw,46px);font-weight:800;line-height:1.25;color:#F4EDE0;text-wrap:balance}
[dir="rtl"] .omt.omt .ac-award-t{line-height:1.45}
.omt.omt .ac-award-rule{display:block;width:72px;height:2px;margin:clamp(18px,2vw,26px) 0;border-radius:2px;
  background:linear-gradient(90deg,#8C6A2E,#E8CD8A,#B8913F)}
.omt.omt .ac-award-p{margin:0;font-size:clamp(16px,1.12vw,18px);line-height:1.85;color:rgba(244,237,224,.82)}
[dir="rtl"] .omt.omt .ac-award-p{line-height:2}

/* ------------------------------------------------------------- narrower */
@media (max-width:900px){
  .omt.omt .ac-hero{min-height:0;padding-block:calc(var(--head-h-c) + 36px) 40px}
  .omt.omt .ac-film{inset-inline-start:-15%}
  .omt.omt .ac-marks{gap:44px;padding-inline-end:44px}
  .omt.omt .ac-marks img{height:calc(44px * var(--s,1))}
  .omt.omt .ac-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .omt.omt .ac-stage{display:none}
  .omt.omt .ac-step,.omt.omt .ac-step:first-child,.omt.omt .ac-step:last-child{min-height:0;opacity:1;padding-block:22px 34px}
  .omt.omt .ac-step+.ac-step{border-block-start:1px solid var(--line-soft)}
  .omt.omt .ac-step-media{display:block;position:relative;aspect-ratio:16 / 9;margin:0 0 18px;border-radius:18px;overflow:hidden;background:#170D4C}
  .omt.omt .ac-sm{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
  .omt.omt .ac-step-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,8,46,.7),transparent 50%)}
  .omt.omt .ac-n{font-size:40px;color:var(--cyan);-webkit-text-stroke:0}
  html[data-omt-theme="light"] .omt.omt .ac-n{color:var(--accent-cyan)}
  .omt.omt .ac-award{min-height:0}
  .omt.omt .ac-award-ov,[dir="rtl"] .omt.omt .ac-award-ov{background:linear-gradient(180deg,#07050C 0%,rgba(7,5,12,.55) 30%,rgba(7,5,12,.86) 62%,#07050C 100%)}
  .omt.omt .ac-award-film{width:100%;object-position:50% 30%}
}
@media (prefers-reduced-motion:reduce){
  .omt.omt .ac-step,.omt.omt .ac-frame>.ac-m,.omt.omt .ac-logo,.omt.omt .ac-frame-n b{transition:none}
}


/* ---- expo.css ---- */
/* ================================ FAM EXPO PAGE ================================
   In the FAM Expo mark's own colours (its navy, and the cyan, violet, pink and
   amber of its X), not the conference's. Every picture is real footage or a
   still of the hall.
   Opening      the hall filmed (38 s) behind the mark; the title comes up
                word by word over slow glows in the mark's colours.
   Story        three chapters on one timeline that draws itself as the
                section scrolls by: 2002, 25 years, 2027.
   Marketplace  the sentence that says what it is; its key words in a slowly
                moving gradient of the mark's colours.
   Reach        the figures, counting up once; who takes part, as a band.
   Floor plan   the interactive plan edge to edge; stand sizes drawn to scale.
   Objectives   the five pillars one at a time beside their clip.
   Why exhibit  the reasons, numbered, beside the headline figure.
   Visits       the executive visit initiative over the officials' tours.
   Audiences    three full-height panels; the one under the pointer widens.
   Enquiry      the form in a glass panel with a slowly turning edge.
   Backgrounds drift a little against the scroll (sections.js sets --ex-p).
   ============================================================================ */

/* ----------------------------------------------------- the mark's colours */
.omt.omt.omt-expo{
  --fx-navy:#110942;--fx-deep:#0B0630;--fx-deep-2:#150C4E;   /* the FAM Expo mark's navy #110942 (BRAND/OMAINTEC 2027 - FAM EXPO LOGO.ai) and its deeper/lighter shades */
  --fx-cyan:#4CC6F5;--fx-blue:#6090F0;--fx-violet:#8B3CF0;--fx-pink:#E0307A;--fx-orange:#F09048;--fx-amber:#F5A833;
  --fx-cool:linear-gradient(90deg,var(--fx-cyan) 0%,var(--fx-blue) 45%,var(--fx-violet) 100%);
  --fx-warm:linear-gradient(90deg,var(--fx-pink) 0%,var(--fx-orange) 55%,var(--fx-amber) 100%);
  --fx-x:linear-gradient(90deg,var(--fx-cyan),var(--fx-violet) 35%,var(--fx-pink) 65%,var(--fx-amber));
  --cyan:var(--fx-cyan);--violet-2:var(--fx-violet);--on-cyan:var(--fx-navy);
  --ink-3:#B4AEE0;
  background:var(--fx-deep)}
html[data-omt-theme="light"] .omt.omt.omt-expo{--accent-cyan:#1A8FC9;--cyan:#1A8FC9;--ink-3:#5E5A8C;background:#F3F5FB}
/* the grounds of its sections (set on the sections, as .sx sets its own) */
.omt.omt.omt-expo .sx,.omt.omt.omt-expo .sx-alt{--sx-dark:var(--fx-deep);--sx-light:var(--fx-deep-2);--sx-glow:rgba(224,48,122,.09);--ink-3:#B4AEE0}
html[data-omt-theme="light"] .omt.omt.omt-expo .sx,html[data-omt-theme="light"] .omt.omt.omt-expo .sx-alt{--sx-dark:#EAF2FB;--sx-light:#F7F8FD;--sx-glow:transparent;--ink-3:#5E5A8C}
.omt.omt.omt-expo [id]{scroll-margin-top:calc(var(--head-h-c) + 16px)}
/* nothing on the page may widen it sideways (on phones a stray few pixels
   let the whole page slide); clip keeps the sticky parts working */
.omt.omt.omt-expo{max-width:100%;overflow-x:clip}
.omt.omt.omt-expo>section{max-width:100%;overflow-x:clip}
/* the page's sections take the mark's ground, not the conference violet */
.omt.omt.omt-expo .sx{background:radial-gradient(70% 50% at 50% 100%,var(--sx-glow),transparent 70%),linear-gradient(180deg,var(--sx-dark) 0%,var(--sx-light) 100%)}
.omt.omt.omt-expo .sx-alt{background:radial-gradient(70% 50% at 50% 0%,var(--sx-glow),transparent 70%),linear-gradient(180deg,var(--sx-light) 0%,var(--sx-dark) 100%)}
.omt.omt.omt-expo .sx-title::before,[dir="rtl"] .omt.omt.omt-expo .sx-title::before{background:var(--fx-x)}
.omt.omt.omt-expo .btn-1{background:var(--fx-cyan);color:var(--fx-navy)}
/* a section's line of introduction sits under its title */
.omt.omt.omt-expo .sx-head{flex-direction:column;align-items:flex-start;justify-content:flex-start}
.omt.omt.omt-expo .sx-intro{margin-top:4px}
.omt.omt.omt-expo .btn-1:hover{box-shadow:0 20px 44px -14px rgba(76,198,245,.75)}

/* the sections that always sit on the hall's own dark ground */
.omt.omt .ex-hero,.omt.omt .ex-market,.omt.omt .ex-exec,.omt.omt .ex-aud,.omt.omt .ex-inq{
  --ink:#FFFFFF;--ink-2:#DCE6FA;--ink-3:#A9B4E0;--cyan:var(--fx-cyan);
  --border-mid:rgba(255,255,255,.2);color:#FFFFFF;background:var(--fx-deep)}
.omt.omt .ex-ov{position:absolute;inset:0;pointer-events:none}

/* the mark in two versions: white on dark ground, colour on light */
.omt.omt.omt-expo .on-light{display:none}
html[data-omt-theme="light"] .omt.omt.omt-expo .ex-why .on-dark{display:none}
html[data-omt-theme="light"] .omt.omt.omt-expo .ex-why .on-light{display:block}

/* a figure keeps its sign on the left in both languages; on an Arabic page it
   still sits on the right, by its label, while it counts up in its held width */
.omt.omt .ex-stat-n,.omt.omt .ex-why-stat b{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .omt.omt .ex-stat-n,[dir="rtl"] .omt.omt .ex-why-stat b,[dir="rtl"] .omt.omt .ex-ch-n{text-align:right}

/* gradient type */
.omt.omt .ex-ch-n,.omt.omt .ex-stat-n,.omt.omt .ex-why-stat b{background:var(--fx-cool);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-omt-theme="light"] .omt.omt .ex-ch-n,html[data-omt-theme="light"] .omt.omt .ex-stat-n,html[data-omt-theme="light"] .omt.omt .ex-why-stat b{
  background-image:linear-gradient(90deg,#1A8FC9,#4B4FD8 50%,#7A26D9)}

/* the backgrounds that drift: --ex-p runs -1 (section below the screen) to 1
   (above it); sections.js sets it on [data-ex-scroll] */
.omt.omt .ex-drift{transform:translate3d(0,calc(var(--ex-p,0) * -6%),0) scale(1.14);will-change:transform}

/* ---------------------------------------------------------------- opening */
.omt.omt .ex-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(640px,100vh,1000px);display:grid;align-content:end;
  padding-block:calc(var(--head-h-c) + clamp(48px,6vw,96px)) clamp(56px,6vw,96px)}
.omt.omt .ex-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.omt.omt .ex-film{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:saturate(1.05) brightness(.92);
  transform:translate3d(0,calc(var(--ex-p,0) * 8%),0) scale(1.08);transform-origin:50% 40%}
.omt.omt .ex-ov-tint{background:linear-gradient(180deg,rgba(11,8,39,.62) 0%,rgba(11,8,39,.1) 28%,rgba(11,8,39,.5) 60%,var(--fx-deep) 100%)}
.omt.omt .ex-ov-side{background:linear-gradient(90deg,rgba(11,8,39,.9) 0%,rgba(11,8,39,.55) 42%,transparent 78%)}
[dir="rtl"] .omt.omt .ex-ov-side{background:linear-gradient(270deg,rgba(11,8,39,.9) 0%,rgba(11,8,39,.55) 42%,transparent 78%)}
/* three slow glows in the mark's colours, drifting behind the words */
.omt.omt .ex-aura{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55}
.omt.omt .ex-aura i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;
  background:radial-gradient(closest-side,var(--c),transparent 70%);opacity:.5;animation:omt-exAura 22s ease-in-out infinite alternate}
.omt.omt .ex-aura i:nth-child(1){--c:rgba(76,198,245,.45);left:-22vmax;bottom:-30vmax}
.omt.omt .ex-aura i:nth-child(2){--c:rgba(139,60,240,.45);left:12vmax;bottom:-36vmax;animation-duration:28s;animation-delay:-6s}
.omt.omt .ex-aura i:nth-child(3){--c:rgba(224,48,122,.32);left:-6vmax;bottom:-12vmax;animation-duration:34s;animation-delay:-12s}
[dir="rtl"] .omt.omt .ex-aura{transform:scaleX(-1)}
@keyframes omt-exAura{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6vmax,-4vmax,0) scale(1.08)}
  100%{transform:translate3d(-4vmax,3vmax,0) scale(.96)}}
.omt.omt .ex-hero-in{position:relative;z-index:2}
.omt.omt .ex-hero-in>.tp-crumb{margin:0 0 clamp(18px,2vw,28px)}
/* the mark answers the pointer: it lifts and glows in its own colours while
   a light runs over it (the light also passes now and then on its own); a
   press sends rings out from its X */
.omt.omt .ex-mark{position:relative;display:block;width:max-content;max-width:100%;margin:0 0 clamp(18px,2vw,30px);cursor:pointer;outline:none;
  -webkit-tap-highlight-color:transparent}
.omt.omt .ex-mark img{display:block;height:clamp(64px,7vw,116px);width:auto;max-width:100%;
  filter:drop-shadow(0 6px 28px rgba(8,4,32,.5));transition:transform .7s var(--mo-ease),filter .7s var(--mo-ease)}
.omt.omt .ex-mark:hover img,.omt.omt .ex-mark:focus-visible img{transform:translateY(-4px) scale(1.035);
  filter:drop-shadow(0 0 16px rgba(76,198,245,.55)) drop-shadow(0 0 34px rgba(139,60,240,.4)) drop-shadow(0 10px 40px rgba(224,48,122,.3))}
.omt.omt .ex-mark-sheen{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--mark) 0 0 / 100% 100% no-repeat;mask:var(--mark) 0 0 / 100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%);background-size:260% 100%;background-position:160% 0;
  transition:transform .7s var(--mo-ease);animation:omt-exSheenIdle 9s var(--mo-ease) 2.4s infinite}
.omt.omt .ex-mark:hover .ex-mark-sheen,.omt.omt .ex-mark:focus-visible .ex-mark-sheen{transform:translateY(-4px) scale(1.035);animation:omt-exSheen 1.2s var(--mo-ease)}
@keyframes omt-exSheen{from{background-position:160% 0}to{background-position:-60% 0}}
@keyframes omt-exSheenIdle{0%{background-position:160% 0}14%,100%{background-position:-60% 0}}
.omt.omt .ex-mark-ring{position:absolute;left:70%;top:46%;width:46%;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.2);
  background:conic-gradient(var(--fx-cyan),var(--fx-violet),var(--fx-pink),var(--fx-amber),var(--fx-cyan));
  -webkit-mask:radial-gradient(closest-side,transparent 82%,#000 84%,#000 98%,transparent);mask:radial-gradient(closest-side,transparent 82%,#000 84%,#000 98%,transparent)}
.omt.omt .ex-mark.is-pop .ex-mark-ring{animation:omt-exRing 1.1s cubic-bezier(.2,.7,.2,1)}
.omt.omt .ex-mark.is-pop .ex-mark-ring+.ex-mark-ring{animation-delay:.16s}
@keyframes omt-exRing{0%{opacity:.95;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}}
.omt.omt .ex-mark.is-pop img{animation:omt-exPop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes omt-exPop{0%{scale:1}35%{scale:.94}100%{scale:1}}
.omt.omt .ex-title{margin:0;max-width:17ch;font-size:clamp(42px,5.6vw,90px);font-weight:800;line-height:1.04;letter-spacing:-.015em;
  text-wrap:balance;text-shadow:0 4px 40px rgba(8,4,32,.45)}
[dir="rtl"] .omt.omt .ex-title{line-height:1.3;letter-spacing:0}
.omt.omt .ex-w{display:inline-block}
.omt.omt .ex-lead{margin:clamp(16px,1.8vw,24px) 0 0;max-width:58ch;font-size:clamp(17px,1.3vw,21px);line-height:1.7;color:var(--ink-2);
  text-shadow:0 2px 18px rgba(8,4,32,.55)}
[dir="rtl"] .omt.omt .ex-lead{line-height:1.9}
.omt.omt .ex-with{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:clamp(18px,2vw,28px) 0 0}
.omt.omt .ex-with-t{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
[dir="rtl"] .omt.omt .ex-with-t{font-size:15px;letter-spacing:0}
.omt.omt .ex-with-l{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.omt.omt .ex-with-l>i{width:1px;height:38px;background:rgba(255,255,255,.26)}
.omt.omt .ex-pt{display:block;line-height:0}
.omt.omt .ex-pt img{display:block;height:calc(clamp(40px,3.8vw,58px) * var(--k,1));width:auto;max-width:none;opacity:.92;transition:opacity .3s,transform .4s var(--mo-ease)}
.omt.omt .ex-pt:hover img{opacity:1;transform:translateY(-2px)}
.omt.omt .ex-presents{margin:clamp(18px,2vw,26px) 0 0;max-width:62ch;padding-inline-start:16px;border-inline-start:2px solid var(--fx-pink);
  font-size:clamp(16px,1.15vw,18.5px);line-height:1.75;color:var(--ink-2);text-shadow:0 2px 18px rgba(8,4,32,.55)}
[dir="rtl"] .omt.omt .ex-presents{line-height:1.95}
.omt.omt .ex-jump{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(24px,2.8vw,40px) 0 0}
.omt.omt .ex-jump .btn svg{width:18px;height:18px}
[dir="rtl"] .omt.omt .ex-jump .btn-1 svg{transform:scaleX(-1)}
html[data-omt-theme="light"] .omt.omt .ex-hero .btn-2{color:#FFFFFF;background:rgba(11,8,39,.35);border-color:rgba(255,255,255,.4)}
html[data-omt-theme="light"] .omt.omt .ex-hero .btn-2:hover{color:var(--fx-cyan);border-color:var(--fx-cyan)}

/* ------------------------------------------------------------------ story */
.omt.omt .ex-story{padding-block:clamp(80px,9vw,140px)}
.omt.omt .ex-chs{position:relative;list-style:none;margin:0;padding:clamp(40px,3.6vw,52px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.6vw,64px)}
/* the timeline: a hairline through the milestones, drawn by the scroll */
/* the timeline runs above the milestones, a dot on it over each one; it
   draws itself from the first to the last when the section comes in */
.omt.omt .ex-line{position:absolute;inset-inline:0;top:7px;height:2px;background:rgba(255,255,255,.12);pointer-events:none}
html[data-omt-theme="light"] .omt.omt .ex-line{background:rgba(18,14,62,.1)}
.omt.omt .ex-line i{position:absolute;inset:0;background:var(--fx-x);transform-origin:left center}
[dir="rtl"] .omt.omt .ex-line i{transform-origin:right center;background:linear-gradient(270deg,var(--fx-cyan),var(--fx-violet) 35%,var(--fx-pink) 65%,var(--fx-amber))}
.omt.omt .ex-ch{position:relative;display:flex;flex-direction:column;min-width:0}
.omt.omt .ex-ch-dot{position:absolute;inset-inline-start:0;top:calc(-1 * clamp(40px,3.6vw,52px));width:16px;height:16px;border-radius:50%;
  background:var(--fx-deep);border:2px solid var(--fx-cyan);box-shadow:0 0 0 6px rgba(76,198,245,.12)}
/* each dot breathes: a ring goes out from it and fades, the three in turn */
.omt.omt .ex-ch-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid currentColor;color:var(--fx-cyan);
  opacity:0;animation:omt-exPulse 2.8s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:calc(var(--i,0) * .9s + .6s)}
.omt.omt .ex-ch:nth-child(3) .ex-ch-dot::after{color:var(--fx-violet)}
.omt.omt .ex-ch:nth-child(4) .ex-ch-dot::after{color:var(--fx-pink)}
@keyframes omt-exPulse{0%{opacity:.85;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.8)}}
.omt.omt .ex-ch:nth-child(3) .ex-ch-dot{border-color:var(--fx-violet);box-shadow:0 0 0 6px rgba(139,60,240,.14)}
.omt.omt .ex-ch:nth-child(4) .ex-ch-dot{border-color:var(--fx-pink);box-shadow:0 0 0 6px rgba(224,48,122,.14)}
html[data-omt-theme="light"] .omt.omt .ex-ch-dot{background:#F7F8FD}
.omt.omt .ex-ch-n{display:block;align-self:flex-start;margin:0;font-size:clamp(40px,4.4vw,72px);font-weight:800;line-height:1.1;letter-spacing:-.02em}
[dir="rtl"] .omt.omt .ex-ch-n{letter-spacing:0}
.omt.omt .ex-ch-t{display:block;margin:10px 0 0;font-size:clamp(16px,1.25vw,19px);font-weight:700;color:var(--ink)}
.omt.omt .ex-ch-img{position:relative;margin:clamp(18px,2vw,26px) 0 0;border-radius:20px;overflow:hidden;aspect-ratio:16 / 10;background:#1A1450;box-shadow:var(--shadow-md)}
.omt.omt .ex-ch-img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.4s var(--mo-ease)}
.omt.omt .ex-ch:hover .ex-ch-img img{transform:scale(1.05)}
.omt.omt .ex-ch-p{margin:clamp(16px,1.8vw,22px) 0 0}
.omt.omt .ex-ch-p p{margin:0 0 .9em;font-size:clamp(15.5px,1.08vw,17px);line-height:1.8;color:var(--ink-2)}
.omt.omt .ex-ch-p p.ex-ch-more{font-size:clamp(14.5px,1vw,15.5px);color:var(--ink-2)}
/* what the reader must not miss: firmer, with a soft underline in the mark's colours */
.omt.omt .ex-ch-p strong,.omt.omt .ex-exec-in strong{font-weight:700;color:var(--ink);
  background:linear-gradient(90deg,rgba(76,198,245,.28),rgba(139,60,240,.24),rgba(224,48,122,.22)) no-repeat 0 92% / 100% .32em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
[dir="rtl"] .omt.omt .ex-ch-p strong,[dir="rtl"] .omt.omt .ex-exec-in strong{background-image:linear-gradient(270deg,rgba(76,198,245,.28),rgba(139,60,240,.24),rgba(224,48,122,.22))}
html[data-omt-theme="light"] .omt.omt .ex-ch-p strong{background-image:linear-gradient(90deg,rgba(26,143,201,.22),rgba(139,60,240,.2),rgba(224,48,122,.18))}
[dir="rtl"] .omt.omt .ex-ch-p p{line-height:1.95}

/* ------------------------------------------------------------ marketplace */
.omt.omt .ex-market{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(88px,9vw,140px)}
.omt.omt .ex-market-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.omt.omt .ex-market-bg img,.omt.omt .ex-market-film{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:brightness(.42) saturate(1.05) contrast(1.05)}
.omt.omt .ex-market-bg .ex-ov{background:linear-gradient(180deg,var(--fx-deep) 0%,rgba(11,8,39,.1) 22%,rgba(11,8,39,.1) 78%,var(--fx-deep) 100%),
  linear-gradient(90deg,rgba(11,8,39,.74),rgba(11,8,39,0) 72%)}
[dir="rtl"] .omt.omt .ex-market-bg .ex-ov{background:linear-gradient(180deg,var(--fx-deep) 0%,rgba(11,8,39,.1) 22%,rgba(11,8,39,.1) 78%,var(--fx-deep) 100%),
  linear-gradient(270deg,rgba(11,8,39,.74),rgba(11,8,39,0) 72%)}
.omt.omt .ex-state{margin:0;max-width:44ch;font-size:clamp(17px,1.35vw,21px);font-weight:600;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
[dir="rtl"] .omt.omt .ex-state{line-height:1.85}
/* the key words in the mark's colours, the gradient moving slowly through them */
.omt.omt .ex-state-hl{display:block;margin:.2em 0;font-size:clamp(34px,4vw,62px);font-weight:800;line-height:1.02;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--fx-cyan),var(--fx-violet),var(--fx-pink),var(--fx-amber),var(--fx-violet),var(--fx-cyan));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:omt-exFlow 14s linear infinite}
[dir="rtl"] .omt.omt .ex-state-hl{line-height:1.35;letter-spacing:0;padding-bottom:.25em;margin-bottom:-.05em}   /* room for the dots under ي: the gradient paints only the box */
@keyframes omt-exFlow{from{background-position:0% 50%}to{background-position:300% 50%}}
.omt.omt .ex-platform{margin:clamp(30px,3.2vw,48px) 0 0;max-width:64ch;font-size:clamp(16px,1.15vw,18.5px);line-height:1.75;color:var(--ink-2)}
[dir="rtl"] .omt.omt .ex-platform{line-height:1.95}
.omt.omt .ex-areas{list-style:none;margin:clamp(16px,1.8vw,24px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(20px,3vw,48px);border-top:1px solid rgba(255,255,255,.2)}
.omt.omt .ex-areas li{position:relative;display:flex;align-items:baseline;gap:14px;padding:clamp(16px,1.6vw,22px) 2px;border-bottom:1px solid rgba(255,255,255,.2)}
.omt.omt .ex-areas li::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;width:100%;height:1px;background:var(--fx-x);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--mo-ease)}
[dir="rtl"] .omt.omt .ex-areas li::after{transform-origin:right}
.omt.omt .ex-areas li:hover::after{transform:scaleX(1)}
.omt.omt .ex-area-n{font-size:13px;color:var(--fx-amber)}
.omt.omt .ex-area-t{font-size:clamp(18px,1.5vw,24px);font-weight:700;line-height:1.3;transition:transform .5s var(--mo-ease)}
.omt.omt .ex-areas li:hover .ex-area-t{transform:translateX(6px)}
[dir="rtl"] .omt.omt .ex-areas li:hover .ex-area-t{transform:translateX(-6px)}

/* ------------------------------------------------------------------ reach */
.omt.omt .ex-reach{padding-block:clamp(80px,9vw,130px) clamp(56px,6vw,90px);overflow-x:clip}
/* each figure takes the room it needs and the three spread across the line,
   so a long figure never runs into the next */
.omt.omt .ex-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:28px clamp(28px,4vw,64px)}
.omt.omt .ex-stat{position:relative;display:flex;flex-direction:column;gap:10px;padding-inline-start:clamp(16px,1.6vw,24px)}
.omt.omt .ex-stat::before{content:"";position:absolute;inset-inline-start:0;top:6%;bottom:6%;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--fx-cyan),var(--fx-violet),var(--fx-pink))}
.omt.omt .ex-stat-n{align-self:flex-start;font-size:clamp(44px,5.4vw,100px);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.omt.omt .ex-stat-t{font-size:clamp(15px,1.25vw,20px);font-weight:700;color:var(--ink-2)}
/* who takes part, running slowly; it holds under the pointer */
.omt.omt .ex-band{position:relative;margin:clamp(48px,5vw,80px) calc(50% - 50vw) 0;overflow:hidden;padding-block:clamp(16px,1.8vw,24px);
  border-block:1px solid var(--border-mid);
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.omt.omt .ex-band-track{display:flex;width:max-content;animation:omt-exBand 46s linear infinite}
html[data-omt-theme="light"] .omt.omt .ex-band{-webkit-mask:none;mask:none}   /* light theme: no fade at the ends (rule 1) */
.omt.omt .ex-band:hover .ex-band-track{animation-play-state:paused}
[dir="rtl"] .omt.omt .ex-band-track{animation-name:omt-exBandR}
.omt.omt .ex-band ul{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.omt.omt .ex-band li{display:flex;align-items:center;gap:clamp(28px,3vw,48px);padding-inline-end:clamp(28px,3vw,48px);white-space:nowrap;
  font-size:clamp(18px,1.6vw,26px);font-weight:700;color:var(--ink)}
.omt.omt .ex-band li::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--fx-x);flex:0 0 auto}
/* the logos in the hall under the plan: the same band, each logo on its own card (its
   background from the Floor Plan screen), sized by its shape (--k) and, for a ministry,
   larger (--big); a press opens that exhibitor */
.omt.omt .ex-band-logos{margin-top:clamp(40px,4.4vw,64px);padding-block:clamp(18px,2vw,26px)}
.omt.omt .ex-band-logos li{gap:0;padding-inline-end:clamp(14px,1.6vw,22px)}
.omt.omt .ex-band-logos li::after{display:none}
.omt.omt .ex-lg{display:flex;align-items:center;justify-content:center;height:clamp(70px,6.4vw,92px);padding:10px clamp(16px,1.8vw,26px);border-radius:16px;
  background:var(--bg,#FFFFFF);box-shadow:0 12px 30px -20px rgba(8,4,32,.6),inset 0 0 0 1px rgba(19,11,66,.06);transition:transform .4s var(--mo-ease),box-shadow .4s var(--mo-ease)}
.omt.omt a.ex-lg:hover{transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(76,198,245,.6),inset 0 0 0 1px rgba(19,11,66,.1)}
.omt.omt a.ex-lg:focus-visible{outline:2px solid var(--fx-cyan);outline-offset:3px}
.omt.omt .ex-lg img{display:block;width:auto;max-width:none;height:calc(clamp(30px,2.6vw,40px) * var(--k,1) * var(--big,1));max-height:100%;object-fit:contain}
@keyframes omt-exBand{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@keyframes omt-exBandR{from{transform:translateX(0)}to{transform:translateX(25%)}}
/* the logo band runs from sections.js (user, 2026-10-21): it can be dragged either way and
   has an arrow at each end; the wrapper carries the full-bleed margins so the arrows sit
   outside the band's faded edges */
.omt.omt .ex-lgband{position:relative;margin:clamp(40px,4.4vw,64px) calc(50% - 50vw) 0}
.omt.omt .ex-lgband > .ex-band{margin:0}
.omt.omt .ex-band-logos.is-run .ex-band-track{animation:none;will-change:transform}
.omt.omt .ex-band-logos{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.omt.omt .ex-band-logos.is-drag{cursor:grabbing}
.omt.omt .ex-band-logos.is-drag .ex-lg{pointer-events:none}
.omt.omt .ex-band-logos img{-webkit-user-drag:none}
.omt.omt .ex-lgband-a{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:48px;height:48px;margin-top:-24px;padding:0;border:0;border-radius:50%;cursor:pointer;
  color:#FFFFFF;background:rgba(11,8,39,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 10px 26px -12px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .3s,color .3s,box-shadow .3s,transform .3s var(--mo-ease)}
.omt.omt .ex-lgband-a svg{width:22px;height:22px}
.omt.omt .ex-lgband-a.is-l{left:clamp(10px,2.2vw,32px)}
.omt.omt .ex-lgband-a.is-r{right:clamp(10px,2.2vw,32px)}
.omt.omt .ex-lgband-a:hover,.omt.omt .ex-lgband-a:focus-visible{color:var(--fx-navy);background:var(--fx-cyan);box-shadow:0 10px 26px -10px rgba(76,198,245,.7)}
.omt.omt .ex-lgband-a:focus-visible{outline:2px solid var(--fx-cyan);outline-offset:3px}
.omt.omt .ex-lgband-a:active{transform:scale(.94)}
html[data-omt-theme="light"] .omt.omt .ex-lgband-a{color:#130B42;background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(19,11,66,.14),0 10px 26px -14px rgba(19,11,66,.45)}
html[data-omt-theme="light"] .omt.omt .ex-lgband-a:hover,html[data-omt-theme="light"] .omt.omt .ex-lgband-a:focus-visible{color:#FFFFFF;background:var(--fx-navy)}
@media (max-width:640px){
  .omt.omt .ex-lgband-a{width:38px;height:38px;margin-top:-19px}
  .omt.omt .ex-lgband-a svg{width:18px;height:18px}
  .omt.omt .ex-lgband-a.is-l{left:8px}
  .omt.omt .ex-lgband-a.is-r{right:8px}
}

/* ------------------------------------------------------------- floor plan */
.omt.omt .ex-plan{padding-block:clamp(64px,7vw,110px) clamp(56px,6vw,96px)}
.omt.omt .ex-plan .sx-head{margin-block-end:0}
.omt.omt .ex-plan-map{position:relative;width:min(1560px,100% - 2 * clamp(12px,2.6vw,36px));margin:clamp(24px,2.6vw,36px) auto 0;border-radius:24px;overflow:hidden;
  border:1px solid var(--border-mid);background:#0E0833;box-shadow:0 40px 90px -50px rgba(76,198,245,.45),var(--shadow-md)}
.omt.omt .ex-plan-map iframe{display:block;width:100%;border:0}
html[data-omt-theme="light"] .omt.omt .ex-plan-map{background:#F3F5FB;border-color:rgba(19,11,66,.12)}
.omt.omt .ex-plan-frame{height:min(82vh,880px)}
.omt.omt .ex-booths{list-style:none;margin:clamp(30px,3.2vw,48px) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(28px,4.6vw,72px)}
.omt.omt .ex-booth{display:flex;flex-direction:column;gap:12px;--m:clamp(26px,2.8vw,40px)}
.omt.omt .ex-booth-plot{display:block;width:calc(var(--w) * var(--m));height:calc(var(--d) * var(--m));border:1.5px solid var(--fx-cyan);border-radius:5px;
  background-color:rgba(76,198,245,.08);
  background-image:linear-gradient(to right,rgba(76,198,245,.32) 1px,transparent 1px),linear-gradient(to bottom,rgba(76,198,245,.32) 1px,transparent 1px);
  background-size:var(--m) var(--m);background-position:-1px -1px;transition:background-color .4s,transform .5s var(--mo-ease),border-color .4s}
.omt.omt .ex-booth:nth-child(2) .ex-booth-plot{border-color:var(--fx-violet);background-color:rgba(139,60,240,.08);
  background-image:linear-gradient(to right,rgba(139,60,240,.32) 1px,transparent 1px),linear-gradient(to bottom,rgba(139,60,240,.32) 1px,transparent 1px)}
.omt.omt .ex-booth:nth-child(3) .ex-booth-plot{border-color:var(--fx-pink);background-color:rgba(224,48,122,.08);
  background-image:linear-gradient(to right,rgba(224,48,122,.32) 1px,transparent 1px),linear-gradient(to bottom,rgba(224,48,122,.32) 1px,transparent 1px)}
.omt.omt .ex-booth:hover .ex-booth-plot{transform:translateY(-6px)}
.omt.omt .ex-booth-plot i{display:none}
.omt.omt .ex-booth-t{font-size:15.5px;font-weight:700;color:var(--ink)}

/* ------------------------------------------------------------- objectives */
.omt.omt .ex-obj{padding-block:clamp(72px,8vw,120px)}
.omt.omt .ex-obj .sx-head{margin-block-end:clamp(24px,2.6vw,40px)}
.omt.omt .ex-obj-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.omt.omt .ex-obj-stage{position:relative;margin:0;border-radius:24px;overflow:hidden;isolation:isolate;min-height:clamp(380px,38vw,580px);
  background:#1A1450;box-shadow:var(--shadow-md)}
.omt.omt .ex-obj-stage>.sw-p{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transform:scale(1.06);
  transition:opacity 1.1s var(--mo-ease),transform 6s ease-out}
.omt.omt .ex-obj-stage>.sw-p.is-on{opacity:1;transform:scale(1)}
.omt.omt .ex-obj-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(11,8,39,.72) 0%,transparent 42%)}
.omt.omt .ex-obj-big{position:absolute;inset-inline-start:clamp(18px,2vw,28px);bottom:clamp(12px,1.6vw,22px);z-index:1;width:3ch;height:1em;
  font-size:clamp(56px,6vw,96px);font-weight:600;line-height:1;letter-spacing:-.03em;color:#FFFFFF}
.omt.omt .ex-obj-big b{position:absolute;inset-inline-start:0;bottom:0;opacity:0;transform:translateY(14px);transition:opacity .6s,transform .8s var(--mo-ease)}
.omt.omt .ex-obj-big b.is-on{opacity:1;transform:none}
.omt.omt .ex-obj-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--border-mid)}
.omt.omt .ex-obj-i{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;padding:clamp(16px,1.6vw,22px) 2px;
  border-bottom:1px solid var(--border-mid);cursor:pointer;outline:none}
.omt.omt .ex-obj-i:focus-visible{box-shadow:inset 0 0 0 2px var(--fx-cyan);border-radius:8px}
.omt.omt .ex-obj-n{padding-top:.35em;font-size:14px;color:var(--ink-3);transition:color .4s}
.omt.omt .ex-obj-c h3{margin:0;font-size:clamp(17.5px,1.4vw,22px);font-weight:700;line-height:1.4;color:var(--ink-2);transition:color .4s}
.omt.omt .ex-obj-c p{margin:0;max-height:0;overflow:hidden;opacity:0;font-size:clamp(15px,1.05vw,16.5px);line-height:1.75;color:var(--ink-2);
  transition:max-height .8s var(--mo-ease),opacity .6s,margin .6s var(--mo-ease)}
[dir="rtl"] .omt.omt .ex-obj-c p{line-height:1.95}
.omt.omt .ex-obj-i.is-on .ex-obj-n{color:var(--fx-pink)}
.omt.omt .ex-obj-i.is-on .ex-obj-c h3{color:var(--ink)}
.omt.omt .ex-obj-i.is-on .ex-obj-c p{max-height:16em;opacity:1;margin-top:10px}
.omt.omt .ex-obj-i .sw-bar i{background:var(--fx-x)}

/* on desktop every objective stays open in the list and the page scrolls
   through them naturally; the picture holds beside them (sticky) and shows
   the objective being read — the one nearest the middle of the screen
   (sections.js) */
@media (min-width:901px){
  .omt.omt .ex-obj-grid{align-items:start}
  .omt.omt .ex-obj-stage{position:sticky;top:calc(var(--head-h-c) + max(24px,(100vh - var(--head-h-c) - min(58vh,580px)) / 2));min-height:0;height:min(58vh,580px)}
  .omt.omt .ex-obj[data-ex-steps] .ex-obj-i{padding-block:clamp(22px,2.4vw,34px);opacity:.45;transition:opacity .5s var(--mo-ease)}
  .omt.omt .ex-obj[data-ex-steps] .ex-obj-i.is-on{opacity:1}
  .omt.omt .ex-obj[data-ex-steps] .ex-obj-c p{max-height:none;opacity:1;margin-top:10px}
}

/* ------------------------------------------------------------ why exhibit */
.omt.omt .ex-why{padding-block:clamp(72px,8vw,120px)}
.omt.omt .ex-why-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.omt.omt .ex-why-head{position:sticky;top:calc(var(--head-h-c) + 32px)}
.omt.omt .ex-why-logo{display:block;height:clamp(56px,5.2vw,84px);width:auto;max-width:100%;margin:0 0 clamp(18px,2vw,28px)}
.omt.omt .ex-why-t{margin:0;font-size:clamp(30px,3.2vw,50px);font-weight:800;line-height:1.15;color:var(--ink);text-wrap:balance}
[dir="rtl"] .omt.omt .ex-why-t{line-height:1.45}
.omt.omt .ex-why-stat{display:flex;flex-direction:column;margin:clamp(24px,2.8vw,40px) 0 0}
.omt.omt .ex-why-stat b{align-self:flex-start;font-size:clamp(64px,7.4vw,124px);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.omt.omt .ex-why-stat span{margin-top:8px;font-size:clamp(16px,1.3vw,20px);font-weight:700;color:var(--ink-2)}
.omt.omt .ex-why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.2vw,52px)}
.omt.omt .ex-why-list li{position:relative;display:flex;gap:16px;padding:clamp(18px,1.8vw,24px) 0;border-top:1px solid var(--border-mid)}
.omt.omt .ex-why-list li::before{content:"";position:absolute;inset-inline-start:0;top:-1px;width:100%;height:1px;background:var(--fx-x);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--mo-ease)}
[dir="rtl"] .omt.omt .ex-why-list li::before{transform-origin:right}
.omt.omt .ex-why-list li:hover::before{transform:scaleX(1)}
.omt.omt .ex-why-n{flex:0 0 auto;min-width:2.2ch;font-size:clamp(22px,2vw,30px);font-weight:600;line-height:1;color:transparent;
  -webkit-text-stroke:1.1px var(--fx-cyan);transition:color .5s}
.omt.omt .ex-why-list li:nth-child(4n+2) .ex-why-n{-webkit-text-stroke-color:var(--fx-violet)}
html[data-omt-theme="light"] .omt.omt .ex-why-n{-webkit-text-stroke:1.5px #1A8FC9}
html[data-omt-theme="light"] .omt.omt .ex-why-list li:nth-child(4n+4) .ex-why-n{-webkit-text-stroke-color:#C46A12}
.omt.omt .ex-why-list li:nth-child(4n+3) .ex-why-n{-webkit-text-stroke-color:var(--fx-pink)}
.omt.omt .ex-why-list li:nth-child(4n+4) .ex-why-n{-webkit-text-stroke-color:var(--fx-amber)}
.omt.omt .ex-why-list li:hover .ex-why-n{color:var(--fx-cyan)}
.omt.omt .ex-why-list li:nth-child(4n+2):hover .ex-why-n{color:var(--fx-violet)}
.omt.omt .ex-why-list li:nth-child(4n+3):hover .ex-why-n{color:var(--fx-pink)}
.omt.omt .ex-why-list li:nth-child(4n+4):hover .ex-why-n{color:var(--fx-amber)}
.omt.omt .ex-why-list p{margin:0;font-size:clamp(15.5px,1.1vw,17.5px);line-height:1.7;color:var(--ink-2)}
[dir="rtl"] .omt.omt .ex-why-list p{line-height:1.9}

/* ----------------------------------------------------------------- visits */
.omt.omt .ex-exec{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(560px,88vh,880px);
  display:grid;align-items:center;padding-block:clamp(72px,8vw,120px)}
.omt.omt .ex-exec-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.omt.omt .ex-exec-film{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  transform:translate3d(0,calc(var(--ex-p,0) * -7%),0) scale(1.16)}
.omt.omt .ex-exec-bg .ex-ov{background:linear-gradient(90deg,rgba(11,8,39,.94) 0%,rgba(11,8,39,.78) 40%,rgba(11,8,39,.18) 74%,transparent 100%),
  linear-gradient(0deg,rgba(11,8,39,.55),transparent 40%)}
[dir="rtl"] .omt.omt .ex-exec-bg .ex-ov{background:linear-gradient(270deg,rgba(11,8,39,.94) 0%,rgba(11,8,39,.78) 40%,rgba(11,8,39,.18) 74%,transparent 100%),
  linear-gradient(0deg,rgba(11,8,39,.55),transparent 40%)}
.omt.omt .ex-exec-in>*{max-width:min(560px,52%)}
.omt.omt .ex-exec-t{position:relative;margin:0 0 clamp(18px,2vw,26px);padding-top:22px;font-size:clamp(34px,4vw,62px);font-weight:800;line-height:1.1;text-wrap:balance}
[dir="rtl"] .omt.omt .ex-exec-t{line-height:1.4}
.omt.omt .ex-exec-t::before{content:"";position:absolute;inset-inline-start:0;top:0;width:56px;height:4px;border-radius:4px;background:var(--fx-warm)}
.omt.omt .ex-exec-in p{margin:0 0 1em;font-size:clamp(16px,1.15vw,18.5px);line-height:1.8;color:var(--ink-2)}
[dir="rtl"] .omt.omt .ex-exec-in p{line-height:2}

/* -------------------------------------------------------------- audiences */
.omt.omt .ex-aud-row{display:flex;gap:2px;height:clamp(540px,84vh,840px)}
.omt.omt .ex-aud-i{position:relative;flex:1 1 0;min-width:0;overflow:hidden;isolation:isolate;outline:none;transition:flex-grow 1s var(--mo-ease)}
.omt.omt .ex-aud-row:hover .ex-aud-i{flex-grow:.85}
.omt.omt .ex-aud-row .ex-aud-i:hover,.omt.omt .ex-aud-row .ex-aud-i:focus-visible{flex-grow:1.45}
.omt.omt .ex-aud-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.06);
  transition:transform 1.6s var(--mo-ease),filter 1s}
.omt.omt .ex-aud-i:hover .ex-aud-img{transform:scale(1)}
.omt.omt .ex-aud-i::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(11,8,39,.95) 0%,rgba(11,8,39,.55) 38%,rgba(11,8,39,.08) 70%)}
.omt.omt .ex-aud-i::before{content:"";position:absolute;inset-inline:0;bottom:0;z-index:2;height:3px;background:var(--fx-x);transform:scaleX(0);transition:transform .9s var(--mo-ease)}
.omt.omt .ex-aud-i:hover::before,.omt.omt .ex-aud-i:focus-visible::before{transform:scaleX(1)}
.omt.omt .ex-aud-c{position:absolute;inset-inline:0;bottom:0;z-index:1;padding:clamp(22px,2.6vw,40px)}
.omt.omt .ex-aud-n{display:block;margin-bottom:10px;font-size:13px;color:var(--fx-amber)}
.omt.omt .ex-aud-c h3{margin:0;max-width:18ch;font-size:clamp(22px,2vw,32px);font-weight:800;line-height:1.2}
[dir="rtl"] .omt.omt .ex-aud-c h3{line-height:1.45}
.omt.omt .ex-aud-c p{margin:12px 0 0;max-width:42ch;font-size:clamp(15px,1.05vw,16.5px);line-height:1.7;color:var(--ink-2)}
[dir="rtl"] .omt.omt .ex-aud-c p{line-height:1.9}

/* ---------------------------------------------------------------- enquiry */
.omt.omt .ex-inq{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(84px,9vw,140px)}
.omt.omt .ex-inq-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.omt.omt .ex-inq-bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.42;
  transform:translate3d(0,calc(var(--ex-p,0) * -6%),0) scale(1.14)}
.omt.omt .ex-inq-bg .ex-ov{background:linear-gradient(180deg,var(--fx-deep) 0%,rgba(11,8,39,.72) 30%,rgba(11,8,39,.8) 70%,var(--fx-deep) 100%)}
.omt.omt .ex-inq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.omt.omt .ex-inq-t{margin:0;max-width:16ch;font-size:clamp(32px,3.6vw,56px);font-weight:800;line-height:1.12;text-wrap:balance}
[dir="rtl"] .omt.omt .ex-inq-t{line-height:1.4}
.omt.omt .ex-inq-cta{display:flex;align-items:center;gap:12px;margin:clamp(16px,1.8vw,24px) 0 0;font-size:clamp(17px,1.3vw,21px);font-weight:700;color:var(--fx-cyan)}
.omt.omt .ex-inq-cta svg{width:24px;height:24px;animation:omt-exNudge 2.6s ease-in-out infinite}
[dir="rtl"] .omt.omt .ex-inq-cta svg{transform:scaleX(-1);animation-name:omt-exNudgeR}
@keyframes omt-exNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes omt-exNudgeD{0%,100%{transform:rotate(90deg) translateX(0)}50%{transform:rotate(90deg) translateX(6px)}}
@keyframes omt-exNudgeR{0%,100%{transform:scaleX(-1) translateX(0)}50%{transform:scaleX(-1) translateX(6px)}}
/* the glass panel: its edge carries the mark's colours, turning slowly */
@property --ex-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.omt.omt .ex-form{position:relative;padding:clamp(22px,2.6vw,36px);border-radius:24px;background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
.omt.omt .ex-form::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ex-a),var(--fx-cyan),var(--fx-violet),var(--fx-pink),var(--fx-amber),var(--fx-cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.75;animation:omt-exTurn 10s linear infinite}
@keyframes omt-exTurn{to{--ex-a:360deg}}
.omt.omt .ex-form-mock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.omt.omt .ex-form-mock textarea,.omt.omt .ex-form-mock button{grid-column:1 / -1}
.omt.omt .ex-form-mock button{justify-self:start;border:0;cursor:pointer;font:inherit}
.omt.omt .ex-form p{margin:0 0 12px}
.omt.omt .ex-form input[type="text"],.omt.omt .ex-form input[type="email"],.omt.omt .ex-form input[type="tel"],.omt.omt .ex-form input[type="url"],.omt.omt .ex-form input[type="number"],.omt.omt .ex-form select,.omt.omt .ex-form textarea{display:block;width:100%;box-sizing:border-box;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);background:rgba(10,6,36,.5);color:#FFFFFF;font:inherit;font-size:15.5px;line-height:1.5;
  transition:border-color .25s,background-color .25s}
.omt.omt .ex-form textarea{min-height:120px;resize:vertical}
.omt.omt .ex-form ::placeholder{color:#AEB6E0;opacity:1}
.omt.omt .ex-form input:focus,.omt.omt .ex-form select:focus,.omt.omt .ex-form textarea:focus{outline:none;border-color:var(--fx-cyan);background:rgba(10,6,36,.72)}
.omt.omt .ex-form input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:0;border-radius:999px;
  background:var(--fx-cyan);color:var(--fx-navy);font:inherit;font-weight:800;font-size:15.5px;letter-spacing:.04em;cursor:pointer;
  transition:transform .3s,box-shadow .3s}
.omt.omt .ex-form input[type="submit"]:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(76,198,245,.8)}
.omt.omt .ex-form .wpcf7-not-valid-tip{margin-top:4px;font-size:13px;color:#FF9DBB}
.omt.omt .ex-form .wpcf7-response-output{margin:12px 0 0;border-radius:12px;color:var(--ink-2)}

/* ------------------------------------------------------- how things come in */
@media (prefers-reduced-motion:no-preference){
  /* the title, word by word */
  html.omt-js .omt.omt .ex-hero .ex-w{opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(6px)}
  html.omt-js .omt.omt .ex-hero.is-in .ex-w{opacity:1;transform:none;filter:none;
    transition:opacity .9s var(--mo-ease),transform 1.1s var(--mo-ease),filter .9s var(--mo-ease);transition-delay:calc(var(--w) * 110ms + 120ms)}
  html.omt-js .omt.omt .ex-hero .ex-film{animation:omt-exSettle 2.4s var(--mo-ease) both}
  @keyframes omt-exSettle{from{opacity:0;scale:1.08}to{opacity:1;scale:1}}
  /* the chapters rise one after another; their photos open from the timeline */
  html.omt-js .omt.omt .ex-story .ex-ch{opacity:0;transform:translateY(28px)}
  html.omt-js .omt.omt .ex-story.is-in .ex-ch{opacity:1;transform:none;transition:opacity .9s var(--mo-ease),transform 1s var(--mo-ease);transition-delay:calc(var(--i) * 180ms)}
  html.omt-js .omt.omt .ex-story .ex-ch-img{clip-path:inset(0 0 100% 0 round 20px)}
  html.omt-js .omt.omt .ex-story.is-in .ex-ch-img{clip-path:inset(0 0 0 0 round 20px);transition:clip-path 1.3s var(--mo-ease);transition-delay:calc(var(--i) * 180ms + 250ms)}
  html.omt-js .omt.omt .ex-story .ex-line i{transform:scaleX(0)}
  html.omt-js .omt.omt .ex-story.is-in .ex-line i{transform:scaleX(1);transition:transform 2.2s var(--mo-ease) .3s}
  html.omt-js .omt.omt .ex-story .ex-ch-dot{scale:0}
  html.omt-js .omt.omt .ex-story.is-in .ex-ch-dot{scale:1;transition:scale .6s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i) * 180ms + 100ms)}
  /* the plan opens from its middle */
  html.omt-js .omt.omt .ex-plan .ex-plan-map.rv{transform:scale(.96);clip-path:inset(6% 8% round 24px)}
  html.omt-js .omt.omt .ex-plan.is-in .ex-plan-map.rv{transform:none;clip-path:inset(0 0 round 24px);transition:opacity .8s var(--mo-ease),transform 1.2s var(--mo-ease),clip-path 1.2s var(--mo-ease);transition-delay:.15s}
  /* the audiences come up as a row */
  html.omt-js .omt.omt .ex-aud .ex-aud-i.rv{transform:translateY(40px)}
  html.omt-js .omt.omt .ex-aud.is-in .ex-aud-i.rv{transform:none;transition:opacity .9s var(--mo-ease),transform 1.1s var(--mo-ease),flex-grow 1s var(--mo-ease);transition-delay:calc(var(--i) * 140ms)}
  /* the booths step up */
  html.omt-js .omt.omt .ex-plan.is-in .ex-booth.rv{transition-delay:calc(var(--i) * 140ms + 400ms)}
}

/* ------------------------------------------------------------------ phones */
@media (max-width:1100px){
  .omt.omt .ex-why-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .omt.omt .ex-hero{min-height:92svh}
  .omt.omt .ex-ov-side,[dir="rtl"] .omt.omt .ex-ov-side{background:linear-gradient(0deg,rgba(11,8,39,.75) 0%,rgba(11,8,39,.25) 60%,transparent)}
  .omt.omt .ex-chs{grid-template-columns:minmax(0,1fr);gap:44px;padding:0;padding-inline-start:28px}
  .omt.omt .ex-line{inset-inline:auto;inset-inline-start:7px;top:10px;bottom:10px;width:2px;height:auto}
  .omt.omt .ex-line i,[dir="rtl"] .omt.omt .ex-line i{transform-origin:center top;
    background:linear-gradient(180deg,var(--fx-cyan),var(--fx-violet) 35%,var(--fx-pink) 65%,var(--fx-amber))}
  .omt.omt .ex-ch-dot{inset-inline-start:-28px;top:calc(clamp(40px,4.4vw,72px) * .55 - 8px)}
  html.omt-js .omt.omt .ex-story .ex-line i{transform:scaleY(0)}
  html.omt-js .omt.omt .ex-story.is-in .ex-line i{transform:scaleY(1)}
  .omt.omt .ex-obj-grid,.omt.omt .ex-why-grid,.omt.omt .ex-inq-grid{grid-template-columns:minmax(0,1fr)}
  .omt.omt .ex-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .omt.omt .ex-stats{flex-direction:column;gap:28px}
  .omt.omt .ex-plan-frame{height:78vh}
  .omt.omt .ex-obj-stage{min-height:0;aspect-ratio:16 / 10}
  .omt.omt .ex-why-head{position:static}
  .omt.omt .ex-exec{align-items:end;min-height:92svh}
  .omt.omt .ex-exec-bg .ex-ov,[dir="rtl"] .omt.omt .ex-exec-bg .ex-ov{background:linear-gradient(0deg,rgba(11,8,39,.96) 0%,rgba(11,8,39,.82) 46%,rgba(11,8,39,.25) 80%,transparent)}
  .omt.omt .ex-exec-in>*{max-width:none}
  .omt.omt .ex-aud-row{flex-direction:column;height:auto}
  .omt.omt .ex-aud-i{flex:none;height:min(78vh,560px)}
  .omt.omt .ex-aud-row:hover .ex-aud-i,.omt.omt .ex-aud-row .ex-aud-i:hover{flex-grow:0}
  .omt.omt .ex-form-mock{grid-template-columns:minmax(0,1fr)}
}
/* phones: the films are not hidden behind long text any more — the opening
   and the visits show their film as a band on top, fading into the ground,
   and the words follow below it; the audience panels get a firmer shade */
@media (max-width:900px){
  .omt.omt .ex-inq-cta svg,[dir="rtl"] .omt.omt .ex-inq-cta svg{transform:rotate(90deg);animation-name:omt-exNudgeD}
  .omt.omt .ex-hero{display:block;min-height:0;padding:0 0 clamp(40px,8vw,56px)}
  .omt.omt .ex-hero-bg{position:relative;inset:auto;z-index:0;height:min(66vw,440px)}
  .omt.omt .ex-hero-bg .ex-ov-tint{background:linear-gradient(180deg,rgba(11,8,39,.35) 0%,transparent 30%,rgba(11,8,39,.15) 60%,var(--fx-deep) 100%)}
  .omt.omt .ex-hero-bg .ex-ov-side{display:none}
  .omt.omt .ex-hero-in{margin-top:-28px}
  .omt.omt .ex-hero-in>.tp-crumb{margin-bottom:14px}
  .omt.omt .ex-mark img{height:clamp(80px,23vw,104px)}   /* the mark reads at a phone's width (user, 2026-10-20: «الشعار يجب ان يكون اكبر») */
  .omt.omt .ex-title{font-size:clamp(34px,9vw,48px)}
  .omt.omt .ex-lead,.omt.omt .ex-presents{font-size:16px}
  .omt.omt .ex-jump{flex-direction:column}
  .omt.omt .ex-jump .btn{justify-content:center}

  .omt.omt .ex-exec{display:block;min-height:0;padding:0 0 clamp(48px,9vw,64px)}
  .omt.omt .ex-exec-bg{position:relative;inset:auto;z-index:0;height:min(64vw,440px)}
  .omt.omt .ex-exec-bg .ex-ov,[dir="rtl"] .omt.omt .ex-exec-bg .ex-ov{background:linear-gradient(180deg,transparent 45%,var(--fx-deep) 100%)}
  .omt.omt .ex-exec-in{margin-top:-24px;position:relative}
  .omt.omt .ex-exec-t{font-size:clamp(28px,7.6vw,38px)}

  .omt.omt .ex-market{padding-block:72px}
  .omt.omt .ex-market-bg .ex-ov,[dir="rtl"] .omt.omt .ex-market-bg .ex-ov{background:linear-gradient(180deg,var(--fx-deep) 0%,rgba(11,8,39,.55) 20%,rgba(11,8,39,.6) 80%,var(--fx-deep) 100%)}

  .omt.omt .ex-aud-i{height:min(118vw,520px)}
  .omt.omt .ex-aud-i::after{background:linear-gradient(0deg,rgba(11,8,39,.97) 0%,rgba(11,8,39,.86) 34%,rgba(11,8,39,.2) 62%,transparent 80%)}
  .omt.omt .ex-aud-c{padding:22px 20px 26px}

  .omt.omt .ex-story{padding-block:64px}
  .omt.omt .ex-ch-img{aspect-ratio:16 / 10}
  .omt.omt .ex-plan-map{width:calc(100% - 36px);border-radius:18px}
}

@media (max-width:560px){
  .omt.omt .ex-areas{grid-template-columns:minmax(0,1fr)}
  /* the three stand sizes stay on one line, drawn to the same scale */
  .omt.omt .ex-booths{flex-wrap:nowrap;justify-content:space-between;gap:16px}
  .omt.omt .ex-booth{--m:19px;min-width:0}
  .omt.omt .ex-booth-t{font-size:13.5px;white-space:nowrap}
  .omt.omt .ex-with-l>i{height:28px}
}
/* phones and touch screens: no motion tied to the scroll, no continuous
   glows or turning edges (they cost battery and do not read on a small
   screen), the title without blur; the light-weight motions stay */
@media (max-width:900px),(hover:none){
  .omt.omt .ex-aura{display:none}
  .omt.omt .ex-film,.omt.omt .ex-exec-film,.omt.omt .ex-inq-bg img,.omt.omt .ex-market-film{transform:none}
  .omt.omt .ex-form::before{animation:none;background:linear-gradient(135deg,var(--fx-cyan),var(--fx-violet),var(--fx-pink))}
  .omt.omt .ex-mark-sheen{animation:none}
  .omt.omt .ex-aud-img{transform:none}
  html.omt-js .omt.omt .ex-hero .ex-w{filter:none}
}

@media (prefers-reduced-motion:reduce){
  .omt.omt .ex-aura i,.omt.omt .ex-state-hl,.omt.omt .ex-band-track,.omt.omt .ex-form::before,.omt.omt .ex-inq-cta svg,.omt.omt .ex-mark-sheen,.omt.omt .ex-ch-dot::after{animation:none}
  .omt.omt .ex-mark-ring{display:none}
  .omt.omt .ex-film,.omt.omt .ex-exec-film,.omt.omt .ex-inq-bg img{transform:none}
  .omt.omt .ex-line i{transform:none}
  .omt.omt .ex-obj-stage>.sw-p,.omt.omt .ex-obj-big b,.omt.omt .ex-obj-c p,.omt.omt .ex-aud-i,.omt.omt .ex-aud-img,.omt.omt .ex-booth-plot{transition:none}
}

/* the enquiry form's send button reads like the page's other buttons */
.omt.omt .ex-form input[type="submit"],.omt.omt .ex-form button[type="submit"],.omt.omt .ex-form .wpcf7-submit{font-weight:800;letter-spacing:.02em}

/* ===================================================================
   FAM EXPO NAVY ACROSS THE WHOLE PAGE (user, 2026-10-21: «صفحة المعرض لايجب
   ان تكون باللون البنفسجي وانما باللون الكحلي الخاص بالمعرض… مع مراعاة الخلفية
   الداكنة والفاتحة»). On a page that holds the FAM Expo or Exhibitors widget,
   every OMAINTEC block on it (header, closing, footer) takes the FAM Expo navy
   #110942 family instead of the conference violet, in both themes. Other pages
   keep the conference identity.
   =================================================================== */
html:has(.omt-expo) .omt.omt{
  --ground:#0B0630; --ground-2:#110942; --ground-3:#1A1157;
  --surface:#150C4C; --raised:#1D145B;
  --line:#3B3A8C; --line-soft:#262565;
  --ink-2:#D3D7F2; --ink-3:#9EA4D6;
  --page-bg:#110942;
  --border-soft:color-mix(in srgb,#D3D7F2 14%,transparent);
  --border-mid:color-mix(in srgb,#D3D7F2 22%,transparent);
}
html[data-omt-theme="light"]:has(.omt-expo) .omt.omt{
  --ground:#F1F2F8; --ground-2:#E5E7F2; --ground-3:#D9DCEC;
  --surface:#FFFFFF; --raised:#F8F9FC;
  --line:color-mix(in srgb,#110942 18%,transparent);
  --line-soft:color-mix(in srgb,#110942 10%,transparent);
  --ink:#110942; --ink-2:#2F3468; --ink-3:#5C6291;
  --page-bg:#F1F2F8;
  --accent-ink:#110942; --btn-violet:#110942;
  --border-soft:color-mix(in srgb,#110942 11%,transparent);
  --border-mid:color-mix(in srgb,#110942 18%,transparent);
  --shadow-sm:0 1px 2px rgba(17,9,66,.05),0 2px 8px -5px rgba(17,9,66,.10);
  --shadow-md:0 3px 8px -5px rgba(17,9,66,.12),0 18px 40px -24px rgba(17,9,66,.24);
}
/* the sections of the closing (and the page's own) on navy, with a cool glow */
html:has(.omt-expo) .omt.omt .sx,html:has(.omt-expo) .omt.omt .sx-alt{--sx-dark:var(--fx-deep,#0B0630);--sx-light:#160D50;--sx-glow:rgba(76,198,245,.07)}
html[data-omt-theme="light"]:has(.omt-expo) .omt.omt .sx,html[data-omt-theme="light"]:has(.omt-expo) .omt.omt .sx-alt{--sx-dark:#E6E9F3;--sx-light:#F7F8FC;--sx-glow:transparent;--ink-3:#5C6291;
  --line-soft:color-mix(in srgb,#110942 12%,transparent)}
/* the header bar once it turns solid */
html:has(.omt-expo).omt-scrolled .omt.omt .site-head,
html:has(.omt-expo) .omt.omt.omt-solid .site-head{background:color-mix(in srgb,#110942 92%,transparent)}
html[data-omt-theme="light"]:has(.omt-expo).omt-scrolled .omt.omt .site-head,
html[data-omt-theme="light"]:has(.omt-expo) .omt.omt.omt-solid .site-head{
  --ink:#110942; --ink-2:#2F3468; --ink-3:#5C6291; --ground:#F1F2F8; --ground-2:#F8F9FC;
  --line-soft:color-mix(in srgb,#110942 10%,transparent);
  background:#F1F2F8}
/* the footer */
html:has(.omt-expo) .omt.omt .ft{--ink-2:#D3D7F2;--ink-3:#9EA4D6;background:linear-gradient(180deg,#170D52 0%,#110942 46%,#0B0630 100%)}
html:has(.omt-expo) .omt.omt .ft--partners{background:linear-gradient(180deg,#170D52 0%,#130A48 100%)}
html:has(.omt-expo) .omt.omt .ft--main{background:linear-gradient(180deg,#130A48 0%,#0B0630 100%)}
html[data-omt-theme="light"]:has(.omt-expo) .omt.omt .ft{--ink:#110942;--ink-2:#2F3468;--ink-3:#5C6291;--line:rgba(17,9,66,.14);
  background:linear-gradient(180deg,#F7F8FC 0%,#EEF0F7 50%,#E6E9F3 100%)}
html[data-omt-theme="light"]:has(.omt-expo) .omt.omt .ft--partners{background:linear-gradient(180deg,#F7F8FC 0%,#EEF0F7 100%)}
html[data-omt-theme="light"]:has(.omt-expo) .omt.omt .ft--main{background:linear-gradient(180deg,#EEF0F7 0%,#E6E9F3 100%)}
html[data-omt-theme="light"]:has(.omt-expo) .omt.omt .ft--partners::before{background:linear-gradient(90deg,transparent,rgba(17,9,66,.3),transparent)}



/* ---- sponsor.css ---- */
/* ============================== SPONSORSHIP PAGE ==============================
   In OMAINTEC's own identity (its indigo, violet, magenta glow and cyan), on
   the FAM Expo page's building blocks (ex-hero, ex-obj, ex-market, ex-inq):
   the colour variables those use are set here to the conference's.
   Partnership  the two organisers' commitment beside a still of the hall.
   Packages     the four tiers as a ladder of light — a beam each, in its own
                metal, the first the tallest; a tier opens the form with its
                name in the subject.
   ============================================================================ */

.omt.omt.omt-sponsor{
  --fx-navy:#120A4A;--fx-deep:#170D4C;--fx-deep-2:#2A1A80;
  --fx-cyan:#22E3F5;--fx-blue:#6E7BFF;--fx-violet:#9246F5;--fx-pink:#C13CF5;--fx-orange:#D4177A;--fx-amber:#22E3F5;
  --fx-cool:linear-gradient(90deg,#22E3F5 0%,#6E7BFF 45%,#9246F5 100%);
  --fx-warm:linear-gradient(90deg,#9246F5 0%,#C13CF5 55%,#D4177A 100%);
  --fx-x:linear-gradient(90deg,#22E3F5,#6E7BFF 35%,#9246F5 65%,#C13CF5);
  --on-cyan:#0B0526;
  max-width:100%;overflow-x:clip;background:var(--fx-deep)}
.omt.omt.omt-sponsor [id]{scroll-margin-top:calc(var(--head-h-c) + 16px)}
.omt.omt.omt-sponsor>section{max-width:100%;overflow-x:clip}
.omt.omt.omt-sponsor .sx-title::before,[dir="rtl"] .omt.omt.omt-sponsor .sx-title::before{background:var(--fx-x)}
html[data-omt-theme="light"] .omt.omt.omt-sponsor{background:#F1EFF8}

/* the opening: the title sits a little larger, nothing else above it */
.omt.omt .sp-hero .ex-title{max-width:14ch}
.omt.omt .sp-hero .ex-presents{border-inline-start-color:var(--fx-cyan);max-width:68ch}
.omt.omt .sp-hero .ex-presents strong{color:#FFFFFF}

/* ------------------------------------------------------------ partnership */
.omt.omt .sp-about{padding-block:clamp(72px,8vw,120px)}
.omt.omt .sp-about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:center}
.omt.omt .sp-about-fig{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4 / 5;background:#1A1450;box-shadow:var(--shadow-md)}
.omt.omt .sp-about-fig img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.6s var(--mo-ease)}
.omt.omt .sp-about-fig:hover img{transform:scale(1.04)}
.omt.omt .sp-about-fig::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(23,13,76,.55),transparent 45%)}
.omt.omt .sp-about-copy p{margin:0 0 1.1em;font-size:clamp(16px,1.15vw,18.5px);line-height:1.85;color:var(--ink-2)}
.omt.omt .sp-about-copy p:first-child{font-size:clamp(18px,1.45vw,22px);line-height:1.7;color:var(--ink)}
[dir="rtl"] .omt.omt .sp-about-copy p{line-height:2}
.omt.omt .sp-about-copy p:last-child{margin-bottom:0}
.omt.omt .sp-about-copy strong,.omt.omt .sp-statement strong,.omt.omt .sp-hero .ex-presents strong{font-weight:700;color:var(--ink);
  background:linear-gradient(90deg,rgba(34,227,245,.28),rgba(146,70,245,.26),rgba(193,60,245,.22)) no-repeat 0 92% / 100% .32em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
[dir="rtl"] .omt.omt .sp-about-copy strong,[dir="rtl"] .omt.omt .sp-statement strong,[dir="rtl"] .omt.omt .sp-hero .ex-presents strong{
  background-image:linear-gradient(270deg,rgba(34,227,245,.28),rgba(146,70,245,.26),rgba(193,60,245,.22))}

/* --------------------------------------------------------------- benefits */
/* six live tiles, three by two, edge to edge with a hairline between them:
   every benefit readable at once over its own footage; the tile under the
   pointer plays its clip, lights its rule and lifts its words */
.omt.omt .sp-ben{padding-block:clamp(72px,8vw,120px)}
.omt.omt .sp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;
  border-radius:24px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:var(--shadow-md)}
.omt.omt .sp-cell{position:relative;min-height:clamp(300px,25vw,380px);overflow:hidden;isolation:isolate;outline:none;cursor:default;background:#170D4C}
.omt.omt .sp-cell-m{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-2;
  filter:saturate(.9) brightness(.8);transform:scale(1.04);transition:filter .8s var(--mo-ease),transform 1.6s var(--mo-ease)}
.omt.omt .sp-cell::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgba(14,8,46,.96) 0%,rgba(14,8,46,.78) 42%,rgba(14,8,46,.25) 78%,rgba(14,8,46,.1) 100%);transition:opacity .8s}
.omt.omt .sp-cell::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--fx-x);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--mo-ease)}
[dir="rtl"] .omt.omt .sp-cell::after{transform-origin:right}
.omt.omt .sp-cell-c{position:absolute;inset-inline:0;bottom:0;padding:clamp(20px,2vw,30px);transition:transform .8s var(--mo-ease)}
.omt.omt .sp-cell-n{display:block;margin-bottom:8px;font-size:13px;color:var(--cyan)}
.omt.omt .sp-cell h3{margin:0;font-size:clamp(18px,1.45vw,22px);font-weight:800;line-height:1.35;color:#FFFFFF}
.omt.omt .sp-cell p{margin:10px 0 0;font-size:clamp(14.5px,1vw,15.5px);line-height:1.7;color:#D8CEF6}
[dir="rtl"] .omt.omt .sp-cell p{line-height:1.85}
.omt.omt .sp-cell.is-on .sp-cell-m,.omt.omt .sp-cell:hover .sp-cell-m,.omt.omt .sp-cell:focus-visible .sp-cell-m{filter:saturate(1.05) brightness(.95);transform:scale(1)}
.omt.omt .sp-cell.is-on::after,.omt.omt .sp-cell:focus-visible::after{transform:scaleX(1)}
.omt.omt .sp-cell.is-on .sp-cell-c{transform:translateY(-4px)}

/* -------------------------------------------------------------- statement */
.omt.omt .sp-statement .sp-state-t{margin:0;font-size:clamp(46px,6.4vw,104px);line-height:1;letter-spacing:-.01em}
.omt.omt .sp-state-p{max-width:60ch;margin-top:clamp(18px,2vw,28px)}
.omt.omt .sp-state-p p{margin:0 0 .9em;font-size:clamp(17px,1.35vw,21px);line-height:1.75;color:var(--ink-2)}
[dir="rtl"] .omt.omt .sp-state-p p{line-height:1.95}

/* --------------------------------------------------------------- packages */
.omt.omt .sp-pk{padding-block:clamp(72px,8vw,120px)}
.omt.omt .sp-tiers{position:relative;list-style:none;margin:clamp(40px,4vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:end;gap:clamp(14px,2vw,28px);height:clamp(380px,40vw,520px);border-bottom:1px solid var(--border-mid)}
.omt.omt .sp-tier{position:relative;height:var(--h);min-width:0;
  --m1:#E2C6FF;--m2:#9A4DF5;--glow:rgba(154,77,245,.55)}
.omt.omt .sp-t1{--m1:#F2FBFF;--m2:#7FD3FF;--glow:rgba(127,211,255,.42)}
.omt.omt .sp-t2{--m1:#FFE7A3;--m2:#C98E2B;--glow:rgba(234,176,72,.42)}
.omt.omt .sp-t3{--m1:#F4F6FA;--m2:#97A3B5;--glow:rgba(190,200,215,.36)}
.omt.omt .sp-tier a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:0 clamp(12px,1.4vw,22px) clamp(18px,2vw,28px);
  color:inherit;text-decoration:none;outline:none;isolation:isolate}
/* a soft light along the floor line */
.omt.omt .sp-tiers::after{content:"";position:absolute;inset-inline:-4%;bottom:-1px;height:80px;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(146,70,245,.28),transparent 70%)}
/* the beam: the tier's metal rising from the floor line and fading upward */
.omt.omt .sp-tier-beam{position:absolute;inset:0;z-index:-1;border-radius:18px 18px 0 0;overflow:hidden;
  background:linear-gradient(0deg,color-mix(in srgb,var(--m2) 42%,transparent) 0%,color-mix(in srgb,var(--m2) 14%,transparent) 55%,transparent 100%);
  transition:filter .6s var(--mo-ease)}
.omt.omt .sp-tier-beam::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--m1),transparent)}
.omt.omt .sp-tier-beam::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);
  transform:translateX(-60%);transition:transform 1.2s var(--mo-ease)}
.omt.omt .sp-tier a:hover .sp-tier-beam,.omt.omt .sp-tier a:focus-visible .sp-tier-beam{filter:brightness(1.35) saturate(1.15)}
.omt.omt .sp-tier a:hover .sp-tier-beam::after,.omt.omt .sp-tier a:focus-visible .sp-tier-beam::after{transform:translateX(60%)}
/* the tier's sphere (from the identity) floats above its beam and turns
   slowly; under the pointer it rises and glows */
.omt.omt .sp-tier-gem{position:absolute;top:calc(clamp(64px,6vw,92px) / -2);inset-inline-start:clamp(12px,1.4vw,22px);
  width:clamp(64px,6vw,92px);height:clamp(64px,6vw,92px);filter:drop-shadow(0 10px 24px var(--glow));transition:transform .8s var(--mo-ease)}
.omt.omt .sp-tier-gem img{display:block;width:100%;height:100%;animation:omt-spSpin 18s linear infinite}
@keyframes omt-spSpin{to{transform:rotate(360deg)}}
.omt.omt .sp-tier a:hover .sp-tier-gem,.omt.omt .sp-tier a:focus-visible .sp-tier-gem{transform:translateY(-10px) scale(1.08)}
.omt.omt .sp-tier-n{font-size:14px;color:var(--m1);opacity:.85}
.omt.omt .sp-tier-t{display:block;margin-top:6px;font-size:clamp(22px,2.3vw,36px);font-weight:800;line-height:1.2;
  background:linear-gradient(180deg,var(--m1),var(--m2));-webkit-background-clip:text;background-clip:text;color:transparent}
.omt.omt .sp-tier-go{display:inline-flex;margin-top:12px;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;
  border:1px solid color-mix(in srgb,var(--m1) 55%,transparent);color:var(--m1);transition:transform .5s var(--mo-ease),background-color .4s}
.omt.omt .sp-tier-go svg{width:16px;height:16px}
[dir="rtl"] .omt.omt .sp-tier-go svg{transform:scaleX(-1)}
.omt.omt .sp-tier a:hover .sp-tier-go{transform:translateX(4px);background:color-mix(in srgb,var(--m2) 30%,transparent)}
[dir="rtl"] .omt.omt .sp-tier a:hover .sp-tier-go{transform:translateX(-4px)}
/* light theme: one ink for every tier's name, so the four read alike; each
   tier keeps its metal in its beam, number, arrow and cap, all at the same
   depth (the pale metals are taken down so none fades on the light ground) */
html[data-omt-theme="light"] .omt.omt .sp-tier{--m1:#7A35E0;--m2:#A56CF2;--deep:#6424C8}
html[data-omt-theme="light"] .omt.omt .sp-t1{--m1:#2E8FC8;--m2:#5DB4E6;--deep:#1C6FA8}
html[data-omt-theme="light"] .omt.omt .sp-t2{--m1:#C48A24;--m2:#E2B055;--deep:#94650F}
html[data-omt-theme="light"] .omt.omt .sp-t3{--m1:#7D8A9C;--m2:#A3AEBD;--deep:#4E5B6E}
html[data-omt-theme="light"] .omt.omt .sp-tier-t{background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
html[data-omt-theme="light"] .omt.omt .sp-tier-n{color:var(--deep);opacity:1}
html[data-omt-theme="light"] .omt.omt .sp-tier-go{color:var(--deep);border-color:color-mix(in srgb,var(--deep) 45%,transparent)}
/* light theme: solid pillars, no see-through or blur — each a clean tint of
   its metal, deepening toward the floor, with a firm cap in the metal's deep
   tone, a hairline edge and a soft shadow */
html[data-omt-theme="light"] .omt.omt .sp-tier-beam{border-radius:18px 18px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--m2) 12%,#FFFFFF) 0%,color-mix(in srgb,var(--m2) 26%,#FFFFFF) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep) 16%,transparent),0 18px 40px -26px color-mix(in srgb,var(--deep) 60%,transparent)}
html[data-omt-theme="light"] .omt.omt .sp-tier-beam::before{height:4px;background:var(--deep)}
html[data-omt-theme="light"] .omt.omt .sp-tier-beam::after{background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%)}
html[data-omt-theme="light"] .omt.omt .sp-tier a:hover .sp-tier-beam{filter:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep) 30%,transparent),0 26px 50px -24px color-mix(in srgb,var(--deep) 70%,transparent)}
html[data-omt-theme="light"] .omt.omt .sp-tiers::after{display:none}
html[data-omt-theme="light"] .omt.omt .sp-tiers{border-bottom-color:color-mix(in srgb,#3C1978 22%,transparent)}
html[data-omt-theme="light"] .omt.omt .sp-tier-gem{filter:drop-shadow(0 12px 18px color-mix(in srgb,var(--deep) 40%,transparent))}
@media (prefers-reduced-motion:no-preference){
  /* the beams rise from the floor line, the highest first */
  html.omt-js .omt.omt .sp-pk .sp-tier.rv{transform:scaleY(.2);transform-origin:bottom center;opacity:0}
  html.omt-js .omt.omt .sp-pk.is-in .sp-tier.rv{transform:none;opacity:1;transition:transform 1.1s var(--mo-ease),opacity .7s var(--mo-ease);transition-delay:calc(var(--i) * 140ms)}
}

/* ------------------------------------------------------------------ phones */
@media (max-width:1100px){
  .omt.omt .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .omt.omt .sp-grid{grid-template-columns:minmax(0,1fr);border-radius:18px}
  .omt.omt .sp-cell{min-height:300px}
  .omt.omt .sp-cell-m{filter:saturate(.95) brightness(.85);transform:none}
  .omt.omt .sp-about-grid{grid-template-columns:minmax(0,1fr)}
  .omt.omt .sp-about-fig{aspect-ratio:16 / 11}
  .omt.omt .sp-tiers{grid-template-columns:minmax(0,1fr);height:auto;gap:14px;border-bottom:0}
  .omt.omt .sp-tier{height:auto}
  .omt.omt .sp-tier a{flex-direction:row;align-items:center;gap:14px;padding:18px 16px;min-height:84px}
  .omt.omt .sp-tier-beam{border-radius:16px;background:linear-gradient(90deg,color-mix(in srgb,var(--m2) 40%,transparent),color-mix(in srgb,var(--m2) 8%,transparent))}
  [dir="rtl"] .omt.omt .sp-tier-beam{background:linear-gradient(270deg,color-mix(in srgb,var(--m2) 40%,transparent),color-mix(in srgb,var(--m2) 8%,transparent))}
  html[data-omt-theme="light"] .omt.omt .sp-tier-beam,html[data-omt-theme="light"][dir="rtl"] .omt.omt .sp-tier-beam{border-radius:16px;
    background:linear-gradient(90deg,color-mix(in srgb,var(--m2) 22%,#FFFFFF),color-mix(in srgb,var(--m2) 10%,#FFFFFF))}
  html[data-omt-theme="light"] .omt.omt .sp-tier-beam::before{width:4px;height:auto}
  .omt.omt .sp-tier-beam::before{inset:0 auto 0 0;width:2px;height:auto;background:linear-gradient(180deg,transparent,var(--m1),transparent)}
  [dir="rtl"] .omt.omt .sp-tier-beam::before{inset:0 0 0 auto}
  .omt.omt .sp-tier-gem{position:static;width:52px;height:52px;flex:0 0 auto}
  .omt.omt .sp-tier-t{margin:0;flex:1 1 auto;font-size:20px}
  .omt.omt .sp-tier-n{order:-1}
  .omt.omt .sp-tier-go{margin:0}
  html.omt-js .omt.omt .sp-pk .sp-tier.rv{transform:translateY(16px)}
}

@media (prefers-reduced-motion:reduce),(max-width:900px){
  .omt.omt .sp-tier-gem img{animation:none}
}


/* ---- success.css ---- */
/* =========================== SUCCESS PARTNERS PAGE ===========================
   OMAINTEC's identity. The marks are in full colour (most have no white
   version), so every mark sits on its own white plate, in both themes, at
   the same visual weight (--s per logo evens out wide and tall marks).
   Opening  the title over a living wall: the marks in three slow rows,
            alternate rows running the other way, holding under the pointer,
            fading at both ends.
   Wall     every mark at once on a calm grid; the plates rise in a wave,
            and the one under the pointer lifts and lights its rim.
   ============================================================================ */

.omt.omt.omt-success{max-width:100%;overflow-x:clip;background:#170D4C;
  --sc-plate:#FFFFFF;--sc-rim:linear-gradient(135deg,#22E3F5,#6E7BFF 40%,#9246F5 70%,#C13CF5)}
html[data-omt-theme="light"] .omt.omt.omt-success{background:#F1EFF8}
.omt.omt.omt-success>section{max-width:100%;overflow-x:clip}

/* ---------------------------------------------------------------- opening */
.omt.omt .sc-hero{position:relative;isolation:isolate;overflow:hidden;color:#FFFFFF;
  padding-block:calc(var(--head-h-c) + clamp(36px,4.6vw,72px)) clamp(48px,5vw,80px);
  background:radial-gradient(90% 70% at 50% 110%,rgba(193,60,245,.35),transparent 70%),
             radial-gradient(60% 60% at 85% 0%,rgba(34,227,245,.16),transparent 70%),
             linear-gradient(180deg,#1B105F 0%,#2A1580 55%,#3A189E 100%)}
.omt.omt .sc-hero-in>.tp-crumb{margin:0 0 clamp(14px,1.8vw,22px)}
.omt.omt .sc-hero .tp-crumb,.omt.omt .sc-hero .tp-crumb a{color:#D6C6F2}
.omt.omt .sc-hero .tp-crumb [aria-current]{color:#FFFFFF}
.omt.omt .sc-title{max-width:20ch;font-size:clamp(36px,4.6vw,72px)}

.omt.omt .sc-wall{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);margin-top:clamp(32px,3.6vw,56px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.omt.omt .sc-row{overflow:hidden}
.omt.omt .sc-track{display:flex;width:max-content;animation:omt-scRun var(--d,70s) linear infinite}
.omt.omt .sc-row-1 .sc-track{animation-direction:reverse}
.omt.omt .sc-wall:hover .sc-track{animation-play-state:paused}
.omt.omt .sc-track ul{display:flex;margin:0;padding:0;list-style:none}
.omt.omt .sc-track li{padding-inline-end:clamp(12px,1.4vw,18px)}
@keyframes omt-scRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .omt.omt .sc-track{animation-name:omt-scRunR}
@keyframes omt-scRunR{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* a plate: white, the mark centred in it at its evened-out size */
.omt.omt .sc-chip,.omt.omt .sc-plate{position:relative;display:flex;align-items:center;justify-content:center;background:var(--sc-plate);border-radius:14px}
.omt.omt .sc-chip{width:clamp(150px,13vw,200px);aspect-ratio:16 / 10;box-shadow:0 10px 30px -18px rgba(5,2,30,.7);transition:transform .5s var(--mo-ease)}
.omt.omt .sc-chip:hover{transform:translateY(-3px)}
.omt.omt .sc-chip img,.omt.omt .sc-plate img{display:block;width:auto;height:auto;max-width:calc(82% * var(--s,1));max-height:calc(64% * var(--s,1));object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}

/* ------------------------------------------------------------------- wall */
.omt.omt .sc-grid-sec{padding-block:clamp(56px,6vw,96px)}
.omt.omt .sc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,13vw,190px),1fr));gap:clamp(12px,1.3vw,18px)}
.omt.omt .sc-cell{position:relative}
.omt.omt .sc-plate{aspect-ratio:16 / 10;width:100%;box-shadow:0 12px 30px -20px rgba(5,2,30,.75);transition:transform .6s var(--mo-ease),box-shadow .6s var(--mo-ease)}
/* the rim: the identity's gradient, lit under the pointer */
.omt.omt .sc-plate::before{content:"";position:absolute;inset:-2px;border-radius:16px;padding:2px;background:var(--sc-rim);opacity:0;transition:opacity .45s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.omt.omt .sc-plate img{transition:transform .6s var(--mo-ease)}
.omt.omt .sc-cell:hover .sc-plate{transform:translateY(-6px);box-shadow:0 22px 44px -22px rgba(146,70,245,.65)}
.omt.omt .sc-cell:hover .sc-plate::before{opacity:1}
.omt.omt .sc-cell:hover .sc-plate img{transform:scale(1.05)}
html[data-omt-theme="light"] .omt.omt .sc-plate{box-shadow:0 0 0 1px color-mix(in srgb,#3C1978 12%,transparent),0 12px 28px -22px rgba(60,25,120,.45)}
html[data-omt-theme="light"] .omt.omt .sc-cell:hover .sc-plate{box-shadow:0 22px 40px -22px rgba(98,68,173,.5)}

@media (prefers-reduced-motion:no-preference){
  html.omt-js .omt.omt .sc-grid-sec .sc-cell{opacity:0;transform:translateY(18px) scale(.97)}
  html.omt-js .omt.omt .sc-grid-sec.is-in .sc-cell{opacity:1;transform:none;transition:opacity .7s var(--mo-ease),transform .8s var(--mo-ease);transition-delay:calc(var(--i) * 45ms)}
}

/* ------------------------------------------------------------------ phones */
@media (max-width:900px){
  .omt.omt .sc-row-2{display:none}
  .omt.omt .sc-chip{width:136px}
  .omt.omt .sc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .omt.omt .sc-plate{border-radius:10px}
  .omt.omt .sc-plate::before{border-radius:12px}
}
@media (max-width:420px){
  .omt.omt .sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .omt.omt .sc-track{animation:none}
}


/* ---- reg.css ---- */
/* ============================== REGISTRATION PAGE ==============================
   OMAINTEC's identity, on the FAM Expo page's opening (ex-hero); its colour
   variables are set here to the conference's.
   Opening   the session hall filmed behind the title and the invitation; the
             CPD seal and its line beside them.
   Includes  what the fee covers: its sentence under a row of drawn signs.
   Passes    each category as a conference pass hanging from its lanyard —
             a band on top (the line above the name), the name, the price,
             who it is for, and its own registration button. The passes
             sway a little when the pointer reaches them.
   ============================================================================ */

.omt.omt.omt-reg{
  --fx-navy:#120A4A;--fx-deep:#170D4C;--fx-deep-2:#2A1A80;
  --fx-cyan:#22E3F5;--fx-blue:#6E7BFF;--fx-violet:#9246F5;--fx-pink:#C13CF5;--fx-orange:#D4177A;--fx-amber:#22E3F5;
  --fx-x:linear-gradient(90deg,#22E3F5,#6E7BFF 35%,#9246F5 65%,#C13CF5);
  max-width:100%;overflow-x:clip;background:var(--fx-deep)}
html[data-omt-theme="light"] .omt.omt.omt-reg{background:#F1EFF8}
.omt.omt.omt-reg>section{max-width:100%;overflow-x:clip}
.omt.omt.omt-reg [id]{scroll-margin-top:calc(var(--head-h-c) + 16px)}

/* ---------------------------------------------------------------- opening */
.omt.omt .rg-hero{min-height:clamp(560px,86vh,860px)}
.omt.omt .rg-hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,64px);align-items:end}
.omt.omt .rg-hero .ex-title{max-width:14ch}
.omt.omt .rg-hero .ex-lead{max-width:62ch}
.omt.omt .rg-cpd{display:flex;flex-direction:column;align-items:center;gap:14px;width:clamp(200px,18vw,260px);padding:clamp(18px,2vw,26px);
  border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);text-align:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* the seal: the home page's CPD badge (hero.css .cpd-badge — halo, float,
   passing light and ring; it opens the CPD card), only larger */
.omt.omt .rg-cpd .cpd-badge{width:clamp(112px,9.4vw,140px)}
.omt.omt .rg-cpd p{margin:0;font-size:14.5px;font-weight:700;line-height:1.6;color:#FFFFFF}
[dir="rtl"] .omt.omt .rg-cpd p{font-size:15.5px;line-height:1.8}

/* --------------------------------------------------------------- includes */
.omt.omt .rg-main{padding-block:clamp(64px,7vw,110px)}
.omt.omt .rg-covers{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 auto clamp(48px,5vw,80px);max-width:880px}
.omt.omt .rg-signs{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.6vw,22px);margin:0 0 clamp(18px,2vw,26px);padding:0}
.omt.omt .rg-signs li{display:grid;place-items:center;width:clamp(56px,5vw,72px);aspect-ratio:1;border-radius:50%;color:var(--cyan);
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid var(--border-mid)}
.omt.omt .rg-signs svg{width:46%;height:46%}
html[data-omt-theme="light"] .omt.omt .rg-signs li{color:var(--accent-ink);background:#FFFFFF;box-shadow:var(--shadow-sm)}
.omt.omt .rg-covers-t{margin:0;font-size:clamp(17px,1.4vw,22px);font-weight:600;line-height:1.7;color:var(--ink)}
[dir="rtl"] .omt.omt .rg-covers-t{line-height:1.9}

/* ----------------------------------------------------------------- passes */
/* the passes in a row are all as tall as the tallest */
.omt.omt .rg-passes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:stretch;grid-auto-rows:1fr}
.omt.omt .rg-pass{position:relative;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;height:100%}
/* the lanyard: a strap in the identity's colours, from above to the pass */
.omt.omt .rg-strap{display:block;width:clamp(26px,2.4vw,34px);height:clamp(54px,6vw,84px);margin-bottom:-14px;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,transparent,#6E7BFF 30%,#9246F5);
  -webkit-mask:linear-gradient(90deg,#000 0 28%,transparent 28% 72%,#000 72%);mask:linear-gradient(90deg,#000 0 28%,transparent 28% 72%,#000 72%)}
.omt.omt .rg-card{position:relative;display:flex;flex-direction:column;flex:1 1 auto;width:100%;min-height:clamp(400px,34vw,470px);border-radius:22px;overflow:hidden;
  background:#FFFFFF;color:#130B42;box-shadow:0 30px 60px -36px rgba(5,2,30,.85);
  --band:linear-gradient(135deg,#2E1A8C,#4B2AD0)}
.omt.omt .rg-card.is-lead{--band:linear-gradient(135deg,#6A2BD9,#C13CF5)}
.omt.omt .rg-pass:nth-child(2) .rg-card{--band:linear-gradient(135deg,#0A7FA6,#22B8E0)}
.omt.omt .rg-pass:nth-child(3) .rg-card{--band:linear-gradient(135deg,#3A189E,#6E7BFF)}
.omt.omt .rg-pass:nth-child(4) .rg-card{--band:linear-gradient(135deg,#B0136A,#D4177A)}
.omt.omt .rg-hole{position:absolute;top:14px;left:50%;width:46px;height:9px;margin-left:-23px;border-radius:9px;background:#170D4C;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.omt.omt .rg-eyebrow{margin:0;padding:38px 22px 18px;background:var(--band);color:#FFFFFF;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center}
[dir="rtl"] .omt.omt .rg-eyebrow{letter-spacing:0;font-size:15.5px}
.omt.omt .rg-name{margin:18px 22px 0;font-size:clamp(20px,1.7vw,26px);font-weight:800;line-height:1.3;text-align:center;color:#130B42;text-wrap:balance}
[dir="rtl"] .omt.omt .rg-name{line-height:1.55;font-size:clamp(18px,1.45vw,23px)}
/* a body's logos in place of its name */
.omt.omt .rg-logos{display:flex;justify-content:center}
.omt.omt .rg-logos-in{display:flex;align-items:center;justify-content:center;gap:16px;min-height:clamp(52px,4.4vw,64px)}
.omt.omt .rg-logos-in img{display:block;width:auto;height:clamp(48px,4.2vw,62px);max-width:100%;object-fit:contain}
.omt.omt .rg-logos-in img{height:clamp(56px,4.8vw,72px)}
/* two bodies: one above the other, each at full width, a hairline between */
/* two bodies: one above the other at the same width, so they read as a pair */
.omt.omt .rg-logos-in.is-two{flex-direction:column;gap:12px;width:100%}
.omt.omt .rg-logos-in.is-two img{width:min(74%,210px);height:auto;max-height:none}
/* the second (SAFMMA) is taller for its width: a little narrower, so both
   carry the same weight */
.omt.omt .rg-logos-in.is-two img:last-child{width:min(61%,172px)}
.omt.omt .rg-logos-in i{flex:0 0 1px;align-self:stretch;background:rgba(19,11,66,.15)}
.omt.omt .rg-logos-in.is-two i{flex:0 0 1px;width:60%;align-self:center}
.omt.omt .rg-price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:14px 22px 0;direction:ltr}
[dir="rtl"] .omt.omt .rg-price{flex-direction:row-reverse}
.omt.omt .rg-price b{font-size:clamp(38px,3.6vw,54px);font-weight:800;line-height:1;letter-spacing:-.02em;
  background:var(--band);-webkit-background-clip:text;background-clip:text;color:transparent}
.omt.omt .rg-price span{font-size:15px;font-weight:700;color:#5E5A8C}
.omt.omt .rg-text{flex:1 1 auto;margin:14px 22px 0;font-size:15px;line-height:1.7;text-align:center;color:#4A4170}
[dir="rtl"] .omt.omt .rg-text{line-height:1.85}
/* the button: its text slides to the second line under the pointer */
.omt.omt .rg-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 18px 18px;min-height:52px;border-radius:999px;
  background:var(--band);color:#FFFFFF;font-weight:800;font-size:15.5px;text-decoration:none;overflow:hidden;
  transition:transform .4s var(--mo-ease),box-shadow .4s var(--mo-ease)}
.omt.omt .rg-btn-in{position:relative;display:grid;height:1.4em;overflow:hidden}
.omt.omt .rg-btn .lb,.omt.omt .rg-btn .lb2{grid-area:1 / 1;line-height:1.4;transition:transform .45s var(--mo-ease)}
.omt.omt .rg-btn .lb2{transform:translateY(110%)}
.omt.omt .rg-btn:hover .lb,.omt.omt .rg-btn:focus-visible .lb{transform:translateY(-110%)}
.omt.omt .rg-btn:hover .lb2,.omt.omt .rg-btn:focus-visible .lb2{transform:none}
.omt.omt .rg-btn .arw svg{width:18px;height:18px}
[dir="rtl"] .omt.omt .rg-btn .arw svg{transform:scaleX(-1)}
.omt.omt .rg-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(146,70,245,.8)}
.omt.omt .rg-btn:hover,.omt.omt .rg-btn:focus,.omt.omt .rg-btn:visited{color:#FFFFFF}
html[data-omt-theme="light"] .omt.omt .rg-card{box-shadow:0 0 0 1px color-mix(in srgb,#3C1978 10%,transparent),0 30px 60px -36px rgba(60,25,120,.5)}
html[data-omt-theme="light"] .omt.omt .rg-hole{background:#F1EFF8;box-shadow:inset 0 2px 4px rgba(60,25,120,.25)}

@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .omt.omt .rg-pass:hover{animation:omt-rgSway 1.6s cubic-bezier(.3,.6,.3,1)}
  @keyframes omt-rgSway{0%{transform:rotate(0)}25%{transform:rotate(1.6deg)}55%{transform:rotate(-1.1deg)}80%{transform:rotate(.5deg)}100%{transform:rotate(0)}}
  html.omt-js .omt.omt .rg-main .rg-pass.rv{transform:translateY(-40px) rotate(-2deg)}
  html.omt-js .omt.omt .rg-main.is-in .rg-pass.rv{transform:none;transition:opacity .8s var(--mo-ease),transform 1.2s cubic-bezier(.3,1.35,.45,1);transition-delay:calc(var(--k) * 140ms + 120ms)}
}

/* ------------------------------------------------------------------ phones */
@media (max-width:1100px){
  .omt.omt .rg-passes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .omt.omt .rg-hero-in{grid-template-columns:minmax(0,1fr)}
  .omt.omt .rg-cpd{flex-direction:row;width:auto;text-align:start}
  .omt.omt .rg-cpd .cpd-badge{width:88px}
}
@media (max-width:620px){
  .omt.omt .rg-passes{grid-template-columns:minmax(0,1fr)}
  .omt.omt .rg-card{min-height:0}
}



/* ---- media.css ---- */
/* ============================== MEDIA CENTER PAGE ==============================
   OMAINTEC's identity; every picture real (2025 and 2026).
   Opening   the title over a living wall: five columns of photos drifting up
             and down at different speeds, under a deep violet veil that
             clears toward the far side. Still on phones.
   Editions  each edition's media centre: its year set huge and outlined over
             its photo; the photo wakes and the year fills under the pointer.
   Film      the expo film, cinema-wide, a soft glow around the frame.
   Gallery   chips that filter by kind; a masonry whose photos rise in a
             wave; a photo opens full screen (arrows, keys, swipe).
   ============================================================================ */

.omt.omt.omt-media{max-width:100%;overflow-x:clip;background:#170D4C}
html[data-omt-theme="light"] .omt.omt.omt-media{background:#F1EFF8}
.omt.omt.omt-media>section{max-width:100%;overflow-x:clip}
.omt.omt.omt-media [id]{scroll-margin-top:calc(var(--head-h-c) + 16px)}

/* ---------------------------------------------------------------- opening */
.omt.omt .md-hero{position:relative;isolation:isolate;overflow:hidden;color:#FFFFFF;background:#120A3C;
  min-height:clamp(600px,96vh,960px);display:grid;align-content:end;
  padding-block:calc(var(--head-h-c) + 40px) clamp(56px,6vw,96px)}
.omt.omt .md-wall{position:absolute;inset:-10% -4%;z-index:-2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
  transform:rotate(-6deg) scale(1.08);transform-origin:50% 50%}
[dir="rtl"] .omt.omt .md-wall{transform:rotate(6deg) scale(1.08)}
.omt.omt .md-col{overflow:hidden}
.omt.omt .md-col-in{display:flex;flex-direction:column;gap:12px;animation:omt-mdUp var(--d,50s) linear infinite}
.omt.omt .md-col:nth-child(even) .md-col-in{animation-name:omt-mdDown}
.omt.omt .md-col img{display:block;width:100%;aspect-ratio:4 / 3;height:auto;max-width:none;object-fit:cover;border-radius:14px;filter:saturate(1.05)}
.omt.omt .md-col:nth-child(3n) img{aspect-ratio:3 / 4}
@keyframes omt-mdUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes omt-mdDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.omt.omt .md-hero-ov{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 85% 20%,transparent 0%,rgba(18,10,60,.35) 60%),
             linear-gradient(90deg,rgba(18,10,60,.94) 0%,rgba(18,10,60,.78) 38%,rgba(18,10,60,.35) 72%,rgba(18,10,60,.2) 100%),
             linear-gradient(0deg,#170D4C 0%,rgba(23,13,76,.4) 30%,transparent 55%)}
[dir="rtl"] .omt.omt .md-hero-ov{background:radial-gradient(70% 60% at 15% 20%,transparent 0%,rgba(18,10,60,.35) 60%),
             linear-gradient(270deg,rgba(18,10,60,.94) 0%,rgba(18,10,60,.78) 38%,rgba(18,10,60,.35) 72%,rgba(18,10,60,.2) 100%),
             linear-gradient(0deg,#170D4C 0%,rgba(23,13,76,.4) 30%,transparent 55%)}
.omt.omt .md-hero-in>.tp-crumb{margin:0 0 clamp(16px,2vw,24px)}
.omt.omt .md-hero .tp-crumb,.omt.omt .md-hero .tp-crumb a{color:#D6C6F2}
.omt.omt .md-hero .tp-crumb [aria-current]{color:#FFFFFF}
.omt.omt .md-title{max-width:14ch;font-size:clamp(44px,6vw,96px)}
.omt.omt .md-hero .ex-lead{color:#E2D8FF}
.omt.omt .md-scroll{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(22px,2.6vw,36px);padding:12px 20px 12px 22px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);color:#FFFFFF;font-weight:700;text-decoration:none;background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .3s,border-color .3s}
.omt.omt .md-scroll svg{width:18px;height:18px;animation:omt-mdBob 2.2s ease-in-out infinite}
.omt.omt .md-scroll:hover{background:rgba(34,227,245,.16);border-color:#22E3F5;color:#FFFFFF}
@keyframes omt-mdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* --------------------------------------------------------------- editions */
.omt.omt .md-eds{padding-block:clamp(64px,7vw,110px)}
.omt.omt .md-ed-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(16px,2vw,28px)}
.omt.omt .md-ed-a{position:relative;display:block;aspect-ratio:16 / 10;border-radius:26px;overflow:hidden;isolation:isolate;color:#FFFFFF;text-decoration:none;
  box-shadow:0 30px 60px -36px rgba(5,2,30,.85)}
.omt.omt .md-ed-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-2;filter:saturate(.75) brightness(.7);
  transform:scale(1.06);transition:transform 1.4s var(--mo-ease),filter .9s var(--mo-ease)}
.omt.omt .md-ed-a::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(14,8,46,.92) 0%,rgba(14,8,46,.2) 60%,transparent)}
.omt.omt .md-ed-y{position:absolute;inset-inline-start:clamp(18px,2vw,30px);top:clamp(6px,1vw,14px);font-size:clamp(84px,11vw,170px);font-weight:800;line-height:1;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85);transition:color .7s var(--mo-ease),-webkit-text-stroke-color .7s}
.omt.omt .md-ed-c{position:absolute;inset-inline:0;bottom:0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding:clamp(20px,2.4vw,32px)}
.omt.omt .md-ed-c strong{font-size:clamp(20px,1.9vw,28px);font-weight:800;line-height:1.3}
.omt.omt .md-ed-go{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#22E3F5;color:#0B0526;font-weight:800;font-size:15px;
  transition:transform .4s var(--mo-ease)}
.omt.omt .md-ed-go svg{width:16px;height:16px}
[dir="rtl"] .omt.omt .md-ed-go svg{transform:scaleX(-1)}
.omt.omt .md-ed-a:hover .md-ed-img,.omt.omt .md-ed-a:focus-visible .md-ed-img{transform:scale(1);filter:saturate(1.05) brightness(.85)}
.omt.omt .md-ed-a:hover .md-ed-y,.omt.omt .md-ed-a:focus-visible .md-ed-y{color:rgba(255,255,255,.95);-webkit-text-stroke-color:transparent}
.omt.omt .md-ed-a:hover .md-ed-go{transform:translateX(4px)}
[dir="rtl"] .omt.omt .md-ed-a:hover .md-ed-go{transform:translateX(-4px)}
.omt.omt .md-ed-y{background:linear-gradient(90deg,#22E3F5,#9246F5 60%,#C13CF5);-webkit-background-clip:text;background-clip:text}

/* ------------------------------------------------------------------- film */
.omt.omt .md-film{padding-block:clamp(64px,7vw,110px);background:radial-gradient(60% 50% at 50% 60%,rgba(146,70,245,.22),transparent 70%),#140B44}
html[data-omt-theme="light"] .omt.omt .md-film{background:radial-gradient(60% 50% at 50% 60%,rgba(146,70,245,.12),transparent 70%),#E9E5F6}
.omt.omt .md-film-frame{position:relative;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:16 / 9;background:#0E0833;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 120px -50px rgba(146,70,245,.7)}
.omt.omt .md-film-v{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}

/* ---------------------------------------------------------------- gallery */
.omt.omt .md-gal{padding-block:clamp(64px,7vw,110px)}
.omt.omt .md-gal .sx-head{margin-block-end:clamp(18px,2vw,26px)}
.omt.omt .md-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(22px,2.4vw,34px)}
.omt.omt .md-chip{padding:10px 20px;border-radius:999px;border:1px solid var(--border-mid);background:transparent;color:var(--ink-2);font:inherit;font-weight:700;font-size:15px;
  cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.omt.omt .md-chip:hover{border-color:var(--cyan);color:var(--ink)}
.omt.omt .md-chip.is-on{background:linear-gradient(90deg,#22E3F5,#6E7BFF 50%,#9246F5);border-color:transparent;color:#FFFFFF}
.omt.omt .md-grid{list-style:none;margin:0;padding:0;columns:4 240px;column-gap:14px}
.omt.omt .md-ph{break-inside:avoid;margin:0 0 14px}
.omt.omt .md-ph[hidden]{display:none}
.omt.omt .md-ph button{position:relative;display:block;width:100%;padding:0;border:0;border-radius:16px;overflow:hidden;background:#1A1450;cursor:zoom-in}
.omt.omt .md-ph img{display:block;width:100%;height:auto;max-width:none;transition:transform 1.2s var(--mo-ease),filter .6s}
.omt.omt .md-ph:nth-child(4n+1) img{aspect-ratio:4 / 5;object-fit:cover}
.omt.omt .md-ph:nth-child(6n+3) img{aspect-ratio:1;object-fit:cover}
.omt.omt .md-ph button::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .4s}
.omt.omt .md-ph button:hover img{transform:scale(1.06)}
.omt.omt .md-ph button:hover::after,.omt.omt .md-ph button:focus-visible::after{box-shadow:inset 0 0 0 2px #22E3F5}
.omt.omt .md-ph-cap{position:absolute;inset-inline:0;bottom:0;padding:22px 14px 12px;font-size:14px;font-weight:600;color:#FFFFFF;text-align:start;
  background:linear-gradient(0deg,rgba(14,8,46,.85),transparent);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--mo-ease)}
.omt.omt .md-ph button:hover .md-ph-cap{opacity:1;transform:none}

/* the full-screen photo */
.omt.omt .md-box{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(8,4,32,.94);color:#FFFFFF}
.omt.omt .md-box::backdrop{background:rgba(8,4,32,.6)}
.omt.omt .md-box[open]{display:grid;place-items:center;animation:omt-mdIn .35s var(--mo-ease)}
@keyframes omt-mdIn{from{opacity:0}to{opacity:1}}
.omt.omt .md-box-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(92vw,1600px)}
.omt.omt .md-box-fig img{display:block;max-width:100%;max-height:82dvh;width:auto;height:auto;border-radius:14px;box-shadow:0 40px 100px -40px rgba(0,0,0,.9)}
.omt.omt .md-box-fig img.is-in{animation:omt-mdImg .45s var(--mo-ease)}
@keyframes omt-mdImg{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.omt.omt .md-box-fig figcaption{font-size:15px;color:#D6C6F2}
.omt.omt .md-box-n{position:absolute;top:18px;inset-inline-start:22px;font-size:14px;color:#BCA9EE}
.omt.omt .md-box-x,.omt.omt .md-box-a{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#FFFFFF;cursor:pointer;transition:background-color .3s,border-color .3s}
.omt.omt .md-box-x:hover,.omt.omt .md-box-a:hover{background:rgba(34,227,245,.2);border-color:#22E3F5}
.omt.omt .md-box-x svg,.omt.omt .md-box-a svg{width:22px;height:22px}
.omt.omt .md-box-x{top:14px;inset-inline-end:16px}
.omt.omt .md-box-prev{inset-inline-start:16px;top:50%;margin-top:-24px}
.omt.omt .md-box-next{inset-inline-end:16px;top:50%;margin-top:-24px}
[dir="rtl"] .omt.omt .md-box-a svg{transform:scaleX(-1)}
.omt.omt .md-box{background:#0B0626}

@media (prefers-reduced-motion:no-preference){
  html.omt-js .omt.omt .md-gal .md-ph{opacity:0;transform:translateY(24px)}
  html.omt-js .omt.omt .md-gal.is-in .md-ph{opacity:1;transform:none;transition:opacity .8s var(--mo-ease),transform .9s var(--mo-ease);transition-delay:calc(var(--i) * 60ms)}
}

/* ------------------------------------------------------------------ phones */
@media (max-width:900px),(hover:none){
  .omt.omt .md-col-in{animation:none}
}
@media (max-width:900px){
  .omt.omt .md-hero{min-height:88svh}
  .omt.omt .md-wall{grid-template-columns:repeat(3,minmax(0,1fr));inset:-6% -20%}
  .omt.omt .md-col-3,.omt.omt .md-col-4{display:none}
  .omt.omt .md-hero-ov,[dir="rtl"] .omt.omt .md-hero-ov{background:linear-gradient(0deg,#170D4C 0%,rgba(18,10,60,.88) 40%,rgba(18,10,60,.45) 75%,rgba(18,10,60,.3))}
  .omt.omt .md-grid{columns:2 140px;column-gap:10px}
  .omt.omt .md-ph{margin-bottom:10px}
  .omt.omt .md-ph-cap{opacity:1;transform:none;font-size:12.5px}
  .omt.omt .md-box-a{top:auto;bottom:18px;margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .omt.omt .md-col-in,.omt.omt .md-scroll svg{animation:none}
}

/* an edition's document (the final statement), under its panel */
.omt.omt .md-ed{display:flex;flex-direction:column;gap:10px}
.omt.omt .md-ed-doc{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:8px 4px;color:var(--ink-2);font-weight:700;font-size:15px;text-decoration:none}
.omt.omt .md-ed-doc svg{width:22px;height:22px;color:var(--cyan)}
html[data-omt-theme="light"] .omt.omt .md-ed-doc svg{color:var(--accent-ink)}
.omt.omt .md-ed-doc:hover{color:var(--cyan)}

/* ----------------------------------------------------------------- press */
.omt.omt .md-press{padding-block:clamp(64px,7vw,110px)}
.omt.omt .md-pr{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3.4vw,56px);align-items:start}
.omt.omt .md-pr-lead a{display:block;color:inherit;text-decoration:none}
.omt.omt .md-pr-img{display:block;border-radius:24px;overflow:hidden;aspect-ratio:16 / 10;background:#1A1450;box-shadow:var(--shadow-md)}
.omt.omt .md-pr-img img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.4s var(--mo-ease)}
.omt.omt .md-pr-lead a:hover .md-pr-img img{transform:scale(1.04)}
.omt.omt .md-pr-c{display:block;margin-top:clamp(16px,1.8vw,22px)}
.omt.omt .md-pr-d{display:block;font-size:13.5px;color:var(--cyan)}
html[data-omt-theme="light"] .omt.omt .md-pr-d{color:var(--accent-cyan)}
.omt.omt .md-pr-lead h3{margin:8px 0 0;font-size:clamp(22px,2vw,30px);font-weight:800;line-height:1.35;color:var(--ink)}
[dir="rtl"] .omt.omt .md-pr-lead h3{line-height:1.6}
.omt.omt .md-pr-lead p{margin:10px 0 0;font-size:16px;line-height:1.75;color:var(--ink-2)}
.omt.omt .md-pr-go{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-weight:800;color:var(--cyan)}
html[data-omt-theme="light"] .omt.omt .md-pr-go{color:var(--accent-ink)}
.omt.omt .md-pr-go svg,.omt.omt .md-pr-list .arw svg{width:16px;height:16px}
[dir="rtl"] .omt.omt .md-pr-go svg,[dir="rtl"] .omt.omt .md-pr-list .arw svg{transform:scaleX(-1)}
.omt.omt .md-pr-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-mid)}
.omt.omt .md-pr-list li{border-bottom:1px solid var(--border-mid)}
.omt.omt .md-pr-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;padding:clamp(16px,1.8vw,22px) 2px;color:inherit;text-decoration:none}
.omt.omt .md-pr-list .md-pr-d{grid-column:1 / -1}
.omt.omt .md-pr-t{font-size:clamp(16px,1.25vw,19px);font-weight:700;line-height:1.5;color:var(--ink);transition:color .3s}
.omt.omt .md-pr-list .arw{align-self:center;color:var(--cyan);transition:transform .4s var(--mo-ease)}
.omt.omt .md-pr-list a:hover .md-pr-t{color:var(--cyan)}
html[data-omt-theme="light"] .omt.omt .md-pr-list a:hover .md-pr-t{color:var(--accent-ink)}
.omt.omt .md-pr-list a:hover .arw{transform:translateX(4px)}
[dir="rtl"] .omt.omt .md-pr-list a:hover .arw{transform:translateX(-4px)}

/* the media registration: a glass card in the opening */
.omt.omt .md-reg{display:flex;align-items:center;gap:16px;width:min(560px,100%);margin-top:clamp(18px,2vw,26px);padding:16px 20px;border-radius:20px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#FFFFFF;text-decoration:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s,border-color .3s,transform .4s var(--mo-ease)}
.omt.omt .md-reg:hover{background:rgba(34,227,245,.14);border-color:#22E3F5;transform:translateY(-2px);color:#FFFFFF}
.omt.omt .md-reg-ic{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#22E3F5,#9246F5)}
.omt.omt .md-reg-ic svg{width:26px;height:26px}
.omt.omt .md-reg-c{display:flex;flex-direction:column;gap:2px;flex:1 1 auto}
.omt.omt .md-reg-c strong{font-size:18px;font-weight:800}
.omt.omt .md-reg-c span{font-size:14.5px;color:#D6C6F2}
.omt.omt .md-reg .arw svg{width:20px;height:20px}
[dir="rtl"] .omt.omt .md-reg .arw svg{transform:scaleX(-1)}

/* ----------------------------------------------------------------- videos */
.omt.omt .md-vids{padding-block:clamp(64px,7vw,110px)}
.omt.omt .md-v-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(14px,1.6vw,22px)}
.omt.omt .md-v button{position:relative;display:block;width:100%;aspect-ratio:16 / 9;padding:0;border:0;border-radius:18px;overflow:hidden;background:#1A1450;cursor:pointer;color:#FFFFFF;text-align:start}
.omt.omt .md-v img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.2s var(--mo-ease)}
.omt.omt .md-v button::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,8,46,.9),rgba(14,8,46,.1) 60%)}
.omt.omt .md-v-play{position:absolute;left:50%;top:44%;z-index:1;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .5s var(--mo-ease),background-color .4s}
.omt.omt .md-v-play::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(34,227,245,.7);animation:omt-mdPulse 2.4s ease-out infinite}
@keyframes omt-mdPulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.omt.omt .md-v-play svg{width:26px;height:26px;margin-inline-start:3px}
.omt.omt .md-v-t{position:absolute;inset-inline:0;bottom:0;z-index:1;padding:14px 16px;font-size:15.5px;font-weight:700;line-height:1.45}
.omt.omt .md-v-k{position:absolute;top:12px;inset-inline-start:12px;z-index:1;padding:4px 10px;border-radius:999px;background:rgba(14,8,46,.6);font-size:12.5px;font-weight:700}
.omt.omt .md-v-k:empty{display:none}
.omt.omt .md-v button:hover img{transform:scale(1.06)}
.omt.omt .md-v button:hover .md-v-play{transform:scale(1.1);background:linear-gradient(135deg,#22E3F5,#9246F5)}
.omt.omt .md-vbox-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.omt.omt .md-vbox-in{width:min(92vw,1280px,calc((100dvh - 150px) * 16 / 9));aspect-ratio:16 / 9;border-radius:16px;overflow:hidden;background:#000}
.omt.omt .md-vbox-yt{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;font-size:14.5px;font-weight:700;color:#FFFFFF;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:background-color .3s,box-shadow .3s}
.omt.omt .md-vbox-yt:hover,.omt.omt .md-vbox-yt:focus-visible{background:rgba(34,227,245,.16);box-shadow:inset 0 0 0 1px #22E3F5}
.omt.omt .md-vbox-yt[hidden]{display:none}
.omt.omt .md-vbox-in iframe,.omt.omt .md-vbox-in video{display:block;width:100%;height:100%;border:0}

@media (max-width:900px){
  .omt.omt .md-pr{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .omt.omt .md-v-play::before{animation:none}
}


/* ---- contact.css ---- */
/* =============================== CONTACT US PAGE ===============================
   OMAINTEC's identity, on the expo page's opening (ex-hero) and form (ex-form).
   Opening  over the venue, filmed: the title and the ways to reach us set
            large as lines — an icon in a ring, the label, the value; each a
            link (call, write, WhatsApp) whose ring lights under the pointer —
            beside the form in a glass panel; the social rings under them.
   Venue    the map edge to edge, a card on it with the venue and a
            directions button.
   ============================================================================ */

.omt.omt.omt-contact{
  --fx-navy:#120A4A;--fx-deep:#170D4C;--fx-cyan:#22E3F5;--fx-violet:#9246F5;--fx-pink:#C13CF5;--fx-amber:#22E3F5;
  max-width:100%;overflow-x:clip;background:#170D4C}
html[data-omt-theme="light"] .omt.omt.omt-contact{background:#F1EFF8}
.omt.omt.omt-contact>section{max-width:100%;overflow-x:clip}

/* ---------------------------------------------------------------- opening */
.omt.omt .ct-hero{min-height:0;display:block;padding-block:calc(var(--head-h-c) + clamp(40px,5vw,80px)) clamp(56px,6vw,96px)}
.omt.omt .ct-ov{background:linear-gradient(180deg,rgba(18,10,60,.82) 0%,rgba(18,10,60,.9) 55%,#170D4C 100%),
  radial-gradient(60% 50% at 80% 10%,rgba(146,70,245,.3),transparent 70%)}
.omt.omt .ct-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}
.omt.omt .ct-copy>.tp-crumb{margin:0 0 clamp(16px,2vw,24px)}
.omt.omt .ct-hero .tp-crumb,.omt.omt .ct-hero .tp-crumb a{color:#D6C6F2}
.omt.omt .ct-hero .tp-crumb [aria-current]{color:#FFFFFF}
.omt.omt .ct-title{max-width:14ch}
.omt.omt .ct-lines{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.omt.omt .ct-line{border-bottom:1px solid rgba(255,255,255,.16)}
.omt.omt .ct-line-in{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);padding:clamp(14px,1.6vw,20px) 2px;color:#FFFFFF;text-decoration:none}
.omt.omt .ct-ic{flex:0 0 auto;display:grid;place-items:center;width:clamp(46px,4vw,56px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);color:#22E3F5;transition:background-color .35s,border-color .35s,color .35s,transform .45s var(--mo-ease)}
.omt.omt .ct-ic svg{width:46%;height:46%}
.omt.omt .ct-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.omt.omt .ct-l{font-size:13.5px;font-weight:700;color:#BCA9EE}
.omt.omt .ct-v{font-size:clamp(18px,1.7vw,26px);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
[dir="rtl"] .omt.omt .ct-v[dir="ltr"]{text-align:end}
.omt.omt a.ct-line-in:hover .ct-ic,.omt.omt a.ct-line-in:focus-visible .ct-ic{background:linear-gradient(135deg,#22E3F5,#9246F5);border-color:transparent;color:#FFFFFF;transform:scale(1.06)}
.omt.omt a.ct-line-in:hover .ct-v{color:#22E3F5}
.omt.omt .ct-soc{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:clamp(24px,2.6vw,36px) 0 0;padding:0}
.omt.omt .ct-soc a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.24);color:#FFFFFF;
  transition:background-color .35s,border-color .35s,transform .4s var(--mo-ease)}
.omt.omt .ct-soc svg{width:20px;height:20px}
.omt.omt .ct-soc a:hover{background:linear-gradient(135deg,#22E3F5,#9246F5);border-color:transparent;transform:translateY(-3px);color:#FFFFFF}
.omt.omt .ct-form-wrap{position:sticky;top:calc(var(--head-h-c) + 24px)}
.omt.omt .ct-form-t{margin:0 0 14px;font-size:clamp(20px,1.7vw,26px);font-weight:800;color:#FFFFFF}

/* ------------------------------------------------------------------ venue */
.omt.omt .ct-venue{position:relative;isolation:isolate;min-height:clamp(440px,60vh,620px);display:grid;align-items:center}
.omt.omt .ct-map{position:absolute;inset:0;z-index:-1;background:#1A1450}
.omt.omt .ct-map-f{display:block;width:100%;height:100%;border:0;filter:saturate(.85)}
html[data-omt-theme="dark"] .omt.omt .ct-map-f{filter:invert(.9) hue-rotate(200deg) saturate(.7) brightness(.95)}
.omt.omt .ct-venue-in{pointer-events:none}
.omt.omt .ct-card{pointer-events:auto;width:min(420px,100%);padding:clamp(22px,2.4vw,32px);border-radius:24px;background:#FFFFFF;color:#130B42;
  box-shadow:0 30px 70px -30px rgba(23,13,76,.6)}
.omt.omt .ct-card .ct-ic{border-color:rgba(19,11,66,.15);color:#4B2AD0;margin-bottom:12px}
.omt.omt .ct-card-k{margin:0;font-size:13.5px;font-weight:700;color:#6B5B96}
.omt.omt .ct-card-t{margin:4px 0 0;font-size:clamp(22px,2vw,30px);font-weight:800;line-height:1.25;color:#130B42}
.omt.omt .ct-card-a{margin:8px 0 0;font-size:15.5px;line-height:1.7;color:#4A4170}
.omt.omt .ct-card .btn{margin-top:18px}

/* ------------------------------------------------------------------ phones */
@media (max-width:900px){
  .omt.omt .ct-hero{padding-top:0}
  .omt.omt .ct-hero .ex-hero-bg{height:min(52vw,320px)}
  .omt.omt .ct-grid{grid-template-columns:minmax(0,1fr);margin-top:-12px}
  .omt.omt .ct-form-wrap{position:static}
  .omt.omt .ct-venue{min-height:0;display:block}
  .omt.omt .ct-map{position:relative;height:340px}
  .omt.omt .ct-venue-in{margin-top:-60px;padding-bottom:40px}
  .omt.omt .ct-card{width:100%}
}
/* on the dark map, the card is the night sky of the identity */
html[data-omt-theme="dark"] .omt.omt .ct-card{background:#1B1255;color:#FFFFFF;border:1px solid rgba(255,255,255,.12)}
html[data-omt-theme="dark"] .omt.omt .ct-card .ct-ic{border-color:rgba(255,255,255,.2);color:#22E3F5}
html[data-omt-theme="dark"] .omt.omt .ct-card-k{color:#B7AEE0}
html[data-omt-theme="dark"] .omt.omt .ct-card-t{color:#FFFFFF}
html[data-omt-theme="dark"] .omt.omt .ct-card-a{color:#D4CDF2}
/* the card keeps to the right in both languages: Google's own place box sits top left */
.omt.omt .ct-card{margin-left:auto;margin-right:0}


/* ---- program.css ---- */
/* ============================== CONFERENCE PROGRAM PAGE ==============================
   In OMAINTEC's identity. Everything below the opening is data from the Excel
   workbook; the page only arranges it.
   Opening   the title, theme and dates beside a slow wall of the speakers'
             cut-out portraits; the programme's figures count up.
   Tabs      a bar that stays under the header; a light pill slides to the
             chosen tab; the panels cross in.
   Speakers  portraits standing on the identity's glow, in an arch; a search.
   Sessions  a day switch, then the day as a timeline: each session opens to
             its talks; the one on now is marked.
   Workshops a day switch, then time slots: parallel workshops side by side,
             each with its presenter.
   Panel     a speaker's panel slides in from the reading end.
   ==================================================================================== */

.omt.omt.omt-program{
  --pp-deep:#170D4C;--pp-deep-2:#1E1160;--pp-ink-glow:rgba(110,75,255,.55);
  --pp-grad:linear-gradient(90deg,#6E4BFF 0%,#9246F5 55%,#C13CF5 100%);
  --pp-line:color-mix(in srgb,#D6C6F2 14%,transparent);
  --pp-bar-h:76px;
  max-width:100%;overflow-x:clip;background:var(--pp-deep)}
html[data-omt-theme="light"] .omt.omt.omt-program{
  --pp-deep:#F1EFF8;--pp-deep-2:#E9E5F6;
  --pp-line:color-mix(in srgb,#3C1978 12%,transparent)}
.omt.omt.omt-program [id]{scroll-margin-top:calc(var(--head-h-c) + var(--pp-bar-h) + 16px)}

/* ---------------------------------------------------------------- opening */
.omt.omt .pp-hero{position:relative;isolation:isolate;overflow:hidden;color:#FFFFFF;
  --ink:#FFFFFF;--ink-2:#DCD3F7;--ink-3:#A99BDA;
  min-height:clamp(620px,92vh,940px);display:grid;align-content:end;
  padding-block:calc(var(--head-h-c) + clamp(48px,6vw,96px)) clamp(56px,6vw,96px);background:#120A42}
.omt.omt .pp-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.omt.omt .pp-hero-ov{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,10,66,.62) 0%,rgba(18,10,66,.08) 30%,rgba(18,10,66,.45) 62%,var(--pp-deep) 100%),
             linear-gradient(90deg,rgba(18,10,66,.92) 0%,rgba(18,10,66,.6) 40%,transparent 76%)}
[dir="rtl"] .omt.omt .pp-hero-ov{
  background:linear-gradient(180deg,rgba(18,10,66,.62) 0%,rgba(18,10,66,.08) 30%,rgba(18,10,66,.45) 62%,var(--pp-deep) 100%),
             linear-gradient(270deg,rgba(18,10,66,.92) 0%,rgba(18,10,66,.6) 40%,transparent 76%)}
html[data-omt-theme="light"] .omt.omt .pp-hero-ov{
  background:linear-gradient(180deg,rgba(18,10,66,.62) 0%,rgba(18,10,66,.08) 30%,rgba(18,10,66,.45) 62%,rgba(18,10,66,.88) 100%),
             linear-gradient(90deg,rgba(18,10,66,.92) 0%,rgba(18,10,66,.6) 40%,transparent 76%)}
html[data-omt-theme="light"][dir="rtl"] .omt.omt .pp-hero-ov{
  background:linear-gradient(180deg,rgba(18,10,66,.62) 0%,rgba(18,10,66,.08) 30%,rgba(18,10,66,.45) 62%,rgba(18,10,66,.88) 100%),
             linear-gradient(270deg,rgba(18,10,66,.92) 0%,rgba(18,10,66,.6) 40%,transparent 76%)}
.omt.omt .pp-glow{position:absolute;inset-inline-start:-18vmax;bottom:-30vmax;width:64vmax;height:64vmax;border-radius:50%;mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(closest-side,rgba(110,75,255,.5),transparent 70%);animation:omt-ppBreath 16s ease-in-out infinite alternate}
@keyframes omt-ppBreath{from{transform:scale(.92);opacity:.35}to{transform:scale(1.08);opacity:.6}}
.omt.omt .pp-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:120px;z-index:-1;background:linear-gradient(180deg,transparent,var(--pp-deep))}
html[data-omt-theme="light"] .omt.omt .pp-hero::after{display:none}
.omt.omt .pp-hero-in{position:relative;z-index:2}
.omt.omt .pp-hero-in>.tp-crumb{margin-bottom:clamp(16px,2vw,24px)}
.omt.omt .pp-conf{margin:0 0 12px;max-width:46ch;font-size:clamp(13px,1vw,15px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7FEAF7;text-wrap:balance}
[dir="rtl"] .omt.omt .pp-conf{letter-spacing:0;font-size:clamp(14px,1.1vw,16.5px)}
.omt.omt .pp-title{max-width:13ch;font-size:clamp(44px,6vw,96px)}
.omt.omt .pp-theme{margin:clamp(16px,1.8vw,24px) 0 0;max-width:46ch;font-size:clamp(17px,1.35vw,21px);line-height:1.7;color:var(--ink-2)}
[dir="rtl"] .omt.omt .pp-theme{line-height:1.9}
.omt.omt .pp-when{display:inline-flex;align-items:center;gap:10px;margin:clamp(18px,2vw,26px) 0 0;padding:9px 18px 9px 14px;border-radius:999px;
  font-size:15px;font-weight:700;color:#FFFFFF;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
[dir="rtl"] .omt.omt .pp-when{padding:9px 14px 9px 18px}
.omt.omt .pp-when svg{width:20px;height:20px;color:#22E3F5;flex:none}
.omt.omt .pp-stats{display:flex;flex-wrap:wrap;gap:0;margin:clamp(28px,3.4vw,48px) 0 0;max-width:640px}
.omt.omt .pp-stats li{flex:1 1 0;min-width:110px;padding-inline:clamp(14px,1.6vw,26px);border-inline-start:1px solid rgba(255,255,255,.16)}
.omt.omt .pp-stats li:first-child{padding-inline-start:0;border:0}
.omt.omt .pp-stats b{display:block;font-size:clamp(34px,3.6vw,56px);font-weight:800;line-height:1.05;unicode-bidi:isolate;
  color:var(--cyan);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 28px rgba(34,227,245,.28)}
.omt.omt .pp-stats span{display:block;margin-top:6px;font-size:13.5px;font-weight:700;color:var(--ink-3);line-height:1.4}
.omt.omt .pp-faces{display:flex;align-items:center;margin:clamp(22px,2.6vw,34px) 0 0;padding-inline-start:4px}
.omt.omt .pp-faces .pp-av{width:46px;height:46px;margin-inline-start:-12px;box-shadow:0 0 0 3px #1B0F58}
.omt.omt .pp-faces .pp-av:first-child{margin-inline-start:0}
.omt.omt .pp-faces-more{margin-inline-start:12px;font-size:14px;font-weight:600;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  html.omt-js .omt.omt .pp-hero .pp-faces .pp-av{opacity:0;transform:translateY(10px) scale(.8)}
  html.omt-js .omt.omt .pp-hero.is-in .pp-faces .pp-av{opacity:1;transform:none;transition:opacity .6s var(--mo-ease),transform .7s cubic-bezier(.3,1.4,.5,1);transition-delay:calc(var(--k) * 60ms + 900ms)}
}
@media (prefers-reduced-motion:no-preference){
  html.omt-js .omt.omt .pp-hero .ex-w{opacity:0;transform:translateY(.45em);filter:blur(6px)}
  html.omt-js .omt.omt .pp-hero.is-in .ex-w{opacity:1;transform:none;filter:none;
    transition:opacity .9s var(--mo-ease),transform 1.1s var(--mo-ease),filter .9s var(--mo-ease);transition-delay:calc(var(--w) * 90ms)}
  html.omt-js .omt.omt .pp-hero .ex-film{animation:omt-ppSettle 2.4s var(--mo-ease) both}
}

/* ------------------------------------------------------------------ tabs */
.omt.omt .pp-bar{position:sticky;top:var(--head-h-c);z-index:30;padding-block:12px;
  background:color-mix(in srgb,var(--pp-deep) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:box-shadow .4s,background-color .4s}
.omt.omt .pp-bar.is-stuck{box-shadow:0 14px 30px -22px rgba(5,2,30,.9),inset 0 -1px 0 var(--pp-line)}
/* light theme: a solid bar, no frosted blur (user rule) */
html[data-omt-theme="light"] .omt.omt .pp-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--pp-deep)}
html[data-omt-theme="light"] .omt.omt .pp-bar.is-stuck{box-shadow:0 12px 26px -20px rgba(49,16,129,.35),inset 0 -1px 0 var(--pp-line)}
html[data-omt-theme="light"] .omt.omt .pp-bar.is-stuck{box-shadow:0 14px 30px -24px rgba(45,20,95,.35),inset 0 -1px 0 var(--pp-line)}
.omt.omt .pp-tabs{position:relative;isolation:isolate;display:flex;width:max-content;max-width:100%;margin-inline:auto;padding:6px;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:inset 0 0 0 1px var(--border-mid)}
.omt.omt .pp-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px clamp(16px,2vw,28px);border-radius:999px;
  font-size:clamp(15px,1.1vw,17px);font-weight:700;line-height:1.2;color:var(--ink-2);white-space:nowrap;transition:color .35s}
.omt.omt .pp-tab svg{width:21px;height:21px;flex:none}
.omt.omt .pp-tab em{font-style:normal;font-size:12.5px;font-weight:700;min-width:26px;padding:2px 8px;border-radius:999px;text-align:center;
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;background:color-mix(in srgb,var(--ink) 9%,transparent);transition:background-color .35s,color .35s}
.omt.omt .pp-tab:hover{color:var(--ink)}
.omt.omt .pp-tab[aria-selected="true"]{color:#FFFFFF}
.omt.omt .pp-tab[aria-selected="true"] em{background:rgba(255,255,255,.2);color:#FFFFFF}
.omt.omt .pp-tab-ind,.omt.omt .pp-day-ind{position:absolute;z-index:-1;top:6px;bottom:6px;left:0;width:var(--w,0);border-radius:999px;transform:translateX(var(--x,0));
  background:var(--pp-grad);box-shadow:0 12px 30px -12px rgba(146,70,245,.8);transition:transform .55s var(--mo-ease),width .55s var(--mo-ease)}

/* ---------------------------------------------------------------- panels */
.omt.omt .pp-panel{padding-block:clamp(36px,4vw,56px) clamp(72px,8vw,120px);outline:none}
@media (prefers-reduced-motion:no-preference){
  .omt.omt .pp-panel.is-enter .pp-tools,.omt.omt .pp-panel.is-enter .pp-days{animation:omt-pgIn .7s var(--mo-ease) both}
  .omt.omt .pp-panel.is-enter .pp-person,.omt.omt .pp-panel .pp-item.is-enter,.omt.omt .pp-panel .pp-slot.is-enter{animation:omt-pgIn .8s var(--mo-ease) both;animation-delay:calc(var(--i,0) * 55ms + 80ms)}
}
@keyframes omt-ppSettle{from{opacity:0;scale:1.06}to{opacity:1;scale:1}}
@keyframes omt-pgIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- speakers */
.omt.omt .pp-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:0 0 clamp(28px,3vw,44px)}
.omt.omt .pp-search{position:relative;display:flex;align-items:center;flex:0 1 460px;min-width:min(100%,280px)}
.omt.omt .pp-search svg{position:absolute;inset-inline-start:18px;width:20px;height:20px;color:var(--ink-3);pointer-events:none}
.omt.omt .pp-search input{width:100%;height:54px;padding-inline:52px 20px;border:0;border-radius:999px;outline:none;font:inherit;font-size:16px;color:var(--ink);
  background:color-mix(in srgb,var(--ink) 6%,transparent);box-shadow:inset 0 0 0 1px var(--border-mid);transition:box-shadow .3s,background-color .3s}
.omt.omt .pp-search input::placeholder{color:var(--ink-3)}
.omt.omt .pp-search input:focus{box-shadow:inset 0 0 0 2px var(--cyan);background:color-mix(in srgb,var(--ink) 9%,transparent)}
html[data-omt-theme="light"] .omt.omt .pp-search input{background:#FFFFFF}
.omt.omt .pp-count{margin:0;font-size:14px;color:var(--ink-3)}
.omt.omt .pp-count b{color:var(--ink);font-weight:700}
.omt.omt .pp-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,196px),1fr));gap:clamp(30px,3vw,44px) clamp(18px,2vw,30px)}
.omt.omt .pp-person[hidden]{display:none}
.omt.omt .pp-person-in{display:flex;flex-direction:column;align-items:stretch;width:100%;text-align:center;cursor:pointer}
.omt.omt .pp-portrait{position:relative;display:block;aspect-ratio:4 / 5;isolation:isolate}
/* the nucleus: the identity's network sphere stands behind every speaker. It is
   cut to the very circle the body is cut to (96% of its box), so the body runs
   exactly to the sphere's edge: no sphere showing under the body, and no body
   past the sphere. */
.omt.omt .pp-portrait::before,.omt.omt .pp-dr-face::before{content:"";position:absolute;left:6%;right:6%;bottom:1%;aspect-ratio:1;z-index:-1;border-radius:50%;
  background:url(../img/program/nucleus.webp) center / cover no-repeat;
  -webkit-clip-path:circle(48% at 50% 50%);clip-path:circle(48% at 50% 50%);
  filter:brightness(.82) saturate(1.05);transition:transform 1.6s var(--mo-ease),filter .7s var(--mo-ease)}
/* the body stays inside the sphere; only the head rises out of its top (an
   oval round the head, joined to the circle). The circle is 96% of the
   sphere's box: the sphere's own edge fades out over its last few percent, and
   a body cut at the full box showed past it (user: never outside the circle). */
.omt.omt .pp-portrait img,.omt.omt .pp-dr-face img,.omt.omt .pp-portrait .pp-fig,.omt.omt .pp-dr-face .pp-fig{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform-origin:50% 100%;
  -webkit-mask:radial-gradient(ellipse 37% 30% at 50% 30%,#000 96%,transparent 100%) 0 0 / 100% 100% no-repeat,radial-gradient(ellipse 42.2% 33.8% at 50% 63.8%,#000 calc(100% - .75px),transparent 100%) 0 0 / 100% 100% no-repeat;
  mask:radial-gradient(ellipse 37% 30% at 50% 30%,#000 96%,transparent 100%) 0 0 / 100% 100% no-repeat,radial-gradient(ellipse 42.2% 33.8% at 50% 63.8%,#000 calc(100% - .75px),transparent 100%) 0 0 / 100% 100% no-repeat;
  transition:transform .8s var(--mo-ease),filter .8s var(--mo-ease)}
.omt.omt .pp-fig{position:absolute;inset:0;width:100%;height:100%}
/* no photo: a business silhouette (Freepik), solid, in the identity's lavender with a light shirt */
.omt.omt .pp-fig-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.omt.omt .pp-fig{--fig-b:#B9AAF8;--fig-s:#EEE9FF}
html[data-omt-theme="light"] .omt.omt .pp-fig{--fig-b:#A593F2}
.omt.omt .pp-person-in:hover .pp-portrait img,.omt.omt .pp-person-in:focus-visible .pp-portrait img{filter:saturate(1.08) brightness(1.04)}
/* the scan: on hover a band of light passes down the speaker, top to bottom,
   as the drone's beam passes over the sphere in the header. It lights the
   person's own cut-out (--pp-img, written on the card) and the sphere, never
   the air round them: the mask is (photo ∩ head oval) ∪ circle. The photo is
   not moved on hover, so the band stays in register with it. The mask is only
   set while the scan runs, so no photo is fetched before it is seen. The
   speaker's panel plays the same scan once as it opens. */
.omt.omt .pp-portrait::after,.omt.omt .pp-dr-face::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent 0,rgba(34,227,245,.05) 30%,rgba(34,227,245,.16) 70%,rgba(130,240,255,.42) 93%,#EFFEFF 96.5%,rgba(34,227,245,.6) 98%,transparent 100%) 0 -60% / 100% 34% no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.09) 0 1px,transparent 1px 4px) 0 -60% / 100% 34% no-repeat}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .omt.omt .pp-person-in:hover .pp-portrait::after{animation:omt-ppScan 2.8s cubic-bezier(.45,.05,.4,1) .05s infinite}
}
@media (prefers-reduced-motion:no-preference){
  .omt.omt .pp-drawer[open] .pp-dr-face::after{animation:omt-ppScan 2.8s cubic-bezier(.45,.05,.4,1) .55s 1 both}
}
.omt.omt .pp-person-in:hover .pp-portrait::after,.omt.omt .pp-drawer[open] .pp-dr-face::after{
  -webkit-mask:radial-gradient(ellipse 42.2% 33.8% at 50% 63.8%,#000 calc(100% - .75px),transparent 100%) 0 0 / 100% 100% no-repeat,
    var(--pp-img,linear-gradient(transparent,transparent)) center / cover no-repeat,
    radial-gradient(ellipse 37% 30% at 50% 30%,#000 96%,transparent 100%) 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite:source-over,source-in;
  mask:radial-gradient(ellipse 42.2% 33.8% at 50% 63.8%,#000 calc(100% - .75px),transparent 100%) 0 0 / 100% 100% no-repeat add,
    var(--pp-img,linear-gradient(transparent,transparent)) center / cover no-repeat intersect,
    radial-gradient(ellipse 37% 30% at 50% 30%,#000 96%,transparent 100%) 0 0 / 100% 100% no-repeat}
@keyframes omt-ppScan{
  0%{opacity:0;background-position:0 -60%,0 -60%}
  7%{opacity:1}
  58%{opacity:1;background-position:0 160%,0 160%}
  64%,100%{opacity:0;background-position:0 160%,0 160%}
}
.omt.omt .pp-person-in:hover .pp-portrait::before,.omt.omt .pp-person-in:focus-visible .pp-portrait::before{transform:rotate(40deg);filter:brightness(1.05) saturate(1.15)}
/* the name and details sit centred under the portrait, as the portrait is centred in its card */
.omt.omt .pp-person-c{display:block;padding:16px 4px 0;text-align:center}
.omt.omt .pp-name{display:block;font-size:clamp(16.5px,1.15vw,18.5px);font-weight:800;line-height:1.35;color:var(--ink);transition:color .3s}
.omt.omt .pp-person-in:hover .pp-name{color:var(--cyan)}
html[data-omt-theme="light"] .omt.omt .pp-person-in:hover .pp-name{color:#6E2BD9}
.omt.omt .pp-pos{display:block;margin-top:6px;font-size:14px;font-weight:600;line-height:1.5;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.omt.omt .pp-org{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the country always stands on a line of its own, under the organisation */
.omt.omt .pp-ctry{display:block;margin-top:3px;font-size:13px;font-weight:700;line-height:1.5;color:var(--ink-3)}
.omt.omt .pp-who-k{display:block;font-size:12.5px;font-weight:700;line-height:1.5;color:var(--ink-3);opacity:.9}
.omt.omt .pp-dr-k{margin:2px 0 0;font-size:14px;font-weight:700;color:var(--ink-3)}
.omt.omt .pp-empty{padding:48px 0;text-align:center;font-size:17px;color:var(--ink-3)}

/* ------------------------------------------------------------------ days */
.omt.omt .pp-days{position:relative;isolation:isolate;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;max-width:760px;margin:0 auto clamp(30px,3.4vw,48px);
  padding:6px;border-radius:24px;background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:inset 0 0 0 1px var(--border-mid)}
.omt.omt .pp-day-ind{border-radius:18px}
.omt.omt .pp-day{position:relative;display:grid;justify-items:center;gap:2px;padding:12px 10px;border-radius:18px;text-align:center;color:var(--ink-2);transition:color .35s}
.omt.omt .pp-day b{font-size:16px;font-weight:800;line-height:1.3}
.omt.omt .pp-day span{font-size:13px;font-weight:600;opacity:.8}
.omt.omt .pp-day .pp-wd{font-style:normal;font-weight:700}
/* صباحاً / مساءً after a time: the text face, a little smaller than the digits */
.omt.omt .pp-ap{font-family:Cairo,"Segoe UI",system-ui,sans-serif;font-size:.74em;font-weight:700;letter-spacing:0;color:inherit;opacity:.85}
.omt.omt .pp-day em{position:absolute;top:8px;inset-inline-end:10px;font-style:normal;font-size:11.5px;font-weight:700;font-family:"IBM Plex Mono",ui-monospace,monospace;opacity:.7}
.omt.omt .pp-day:hover{color:var(--ink)}
.omt.omt .pp-day[aria-pressed="true"]{color:#FFFFFF}

/* --------------------------------------------------------------- sessions */
.omt.omt .pp-agenda{position:relative;max-width:1080px;margin:0 auto}
.omt.omt .pp-item{position:relative;display:grid;grid-template-columns:clamp(84px,9vw,128px) minmax(0,1fr);gap:0 clamp(16px,2.4vw,36px)}
.omt.omt .pp-item[hidden]{display:none}
.omt.omt .pp-time{position:relative;padding-top:26px;text-align:end}
.omt.omt .pp-time time{display:block;font-size:clamp(18px,1.5vw,22px);font-weight:600;color:var(--ink);line-height:1.2}
.omt.omt .pp-time span{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-3)}
.omt.omt .pp-body{position:relative;min-width:0;border-inline-start:1px solid var(--pp-line);padding-inline-start:clamp(18px,2.4vw,34px);padding-bottom:6px}
.omt.omt .pp-body::before{content:"";position:absolute;inset-inline-start:-6px;top:32px;width:11px;height:11px;border-radius:50%;
  background:var(--pp-deep);box-shadow:inset 0 0 0 2px var(--ink-3);transition:box-shadow .4s,background-color .4s}
.omt.omt .pp-item.is-open .pp-body::before,.omt.omt .pp-item:hover .pp-body::before{background:#22E3F5;box-shadow:0 0 0 5px rgba(34,227,245,.18)}
.omt.omt .pp-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"k k chev" "h stack chev";align-items:center;gap:8px 18px;
  width:100%;padding:20px clamp(16px,2vw,26px);margin:6px 0;border-radius:22px;text-align:start;transition:background-color .35s}
.omt.omt button.pp-head:hover{background:color-mix(in srgb,var(--ink) 4.5%,transparent)}
.omt.omt .pp-item.is-open .pp-head{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.omt.omt .pp-k{grid-area:k;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#22E3F5}
html[data-omt-theme="light"] .omt.omt .pp-k{color:#6E2BD9}
[dir="rtl"] .omt.omt .pp-k{letter-spacing:0;font-size:14px}
.omt.omt .pp-hall{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);font-weight:700;letter-spacing:0;text-transform:none}
.omt.omt .pp-hall svg{width:15px;height:15px}
.omt.omt .pp-live{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 9px;border-radius:999px;font-size:12px;letter-spacing:.04em;color:#FFFFFF;background:#D4177A}
.omt.omt .pp-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#FFFFFF;animation:omt-pgPulse 1.6s ease-out infinite}
@keyframes omt-pgPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.omt.omt .pp-item.is-live .pp-head{box-shadow:inset 0 0 0 1.5px rgba(212,23,122,.7)}
.omt.omt .pp-h{grid-area:h;display:block;font-size:clamp(18px,1.5vw,23px);font-weight:800;line-height:1.4;color:var(--ink)}
.omt.omt .pp-stack{grid-area:stack;display:flex;align-items:center;padding-inline-start:10px}
.omt.omt .pp-stack .pp-av{width:42px;height:42px;margin-inline-start:-12px;box-shadow:0 0 0 3px var(--pp-deep)}
.omt.omt .pp-stack .pp-av:first-child{margin-inline-start:0}
.omt.omt .pp-more{margin-inline-start:8px;font-size:13px;font-weight:700;color:var(--ink-3)}
.omt.omt .pp-chev{grid-area:chev;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--border-mid);transition:transform .5s var(--mo-ease),background-color .35s,color .35s}
.omt.omt .pp-chev svg{width:20px;height:20px}
.omt.omt .pp-item.is-open .pp-chev{transform:rotate(180deg);background:#22E3F5;color:#0B0526;box-shadow:none}
.omt.omt .pp-item.is-flat .pp-head{grid-template-areas:"k k k" "h h h";padding-block:16px}
/* the description and the talks open with the height they need */
.omt.omt .pp-x{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--mo-ease)}
.omt.omt .pp-x-in{min-height:0;overflow:hidden}
.omt.omt .pp-item.is-open .pp-x{grid-template-rows:1fr}
.omt.omt .pp-talks{padding:6px clamp(16px,2vw,26px) 22px}
/* the session's description (Sessions sheet, optional), above its talks */
.omt.omt .pp-x-d{margin:0;padding:8px clamp(16px,2vw,26px) 6px;font-size:15.5px;line-height:1.85;color:var(--ink-2);text-wrap:pretty;
  opacity:0;transition:opacity .5s var(--mo-ease)}
.omt.omt .pp-x-d:last-child{padding-bottom:22px}
.omt.omt .pp-item.is-open .pp-x-d{opacity:1;transition-delay:120ms}
.omt.omt .pp-talk{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 14px;padding:18px 0;border-top:1px solid var(--pp-line);
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--mo-ease),transform .6s var(--mo-ease)}
.omt.omt .pp-talk:first-child{border-top:0}
.omt.omt .pp-item.is-open .pp-talk{opacity:1;transform:none;transition-delay:calc(var(--t,0) * 60ms + 120ms)}
.omt.omt .pp-talk-t{margin:0 0 12px;font-size:clamp(16px,1.2vw,18px);font-weight:700;line-height:1.55;color:var(--ink)}
[dir="rtl"] .omt.omt .pp-talk-t{line-height:1.75}

/* a speaker line (talks, workshops) */
.omt.omt .pp-who{display:inline-flex;align-items:center;gap:14px;max-width:100%;padding:6px 14px 6px 6px;margin-inline-start:-6px;border-radius:999px;text-align:start;transition:background-color .3s}
[dir="rtl"] .omt.omt .pp-who{padding:6px 6px 6px 14px}
.omt.omt .pp-who:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.omt.omt .pp-av{position:relative;display:block;flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;
  background:url(../img/program/nucleus.webp) center / cover no-repeat;box-shadow:inset 0 0 0 1px rgba(34,227,245,.25)}
/* the portraits all share one framing, so one crop centres every face */
.omt.omt .pp-av img{position:absolute;left:-2%;top:7%;width:104%;height:130%;max-width:none;object-fit:cover}
.omt.omt .pp-av .pp-fig{inset:auto;left:-2%;top:7%;width:104%;height:130%;max-width:none}
/* small discs: the sphere's bright core would swallow a light figure, so it is dimmed behind one */
.omt.omt .pp-av.is-fig::before{content:"";position:absolute;inset:0;background:rgba(23,13,76,.58)}
.omt.omt .pp-who-c{display:grid;min-width:0}
.omt.omt .pp-who-n{font-size:15.5px;font-weight:800;line-height:1.35;color:var(--ink)}
.omt.omt .pp-who:hover .pp-who-n{color:var(--cyan)}
html[data-omt-theme="light"] .omt.omt .pp-who:hover .pp-who-n{color:#6E2BD9}
.omt.omt .pp-who-r{font-size:13.5px;line-height:1.5;color:var(--ink-3)}
/* the person's role in a session: speaker, or the session chair (a filled mark) */
.omt.omt .pp-role{justify-self:start;margin-bottom:2px;font-size:12.5px;font-weight:800;line-height:1.5;color:#22E3F5}
.omt.omt .pp-role.is-chair{padding:1px 11px;border-radius:999px;color:#0B0526;background:#22E3F5}
html[data-omt-theme="light"] .omt.omt .pp-role{color:#6E2BD9}
html[data-omt-theme="light"] .omt.omt .pp-role.is-chair{color:#fff;background:#6E2BD9}
/* a session chair on the speakers' cards */
.omt.omt .pp-tag{display:block;width:fit-content;max-width:100%;margin:0 auto 8px;padding:2px 12px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.5;color:#0B0526;background:#22E3F5}
html[data-omt-theme="light"] .omt.omt .pp-tag{color:#fff;background:#6E2BD9}

/* -------------------------------------------------------------- workshops */
.omt.omt .pp-slots{display:grid;gap:clamp(36px,4vw,60px);max-width:1200px;margin:0 auto}
.omt.omt .pp-slot[hidden]{display:none}
.omt.omt .pp-slot-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 18px;font-size:14px;color:var(--ink-3)}
.omt.omt .pp-slot-h time{padding:7px 16px;border-radius:999px;font-size:15px;font-weight:600;color:var(--ink);box-shadow:inset 0 0 0 1px var(--border-mid)}
.omt.omt .pp-slot-h span{font-family:Cairo,"Segoe UI",system-ui,sans-serif;font-weight:700}
.omt.omt .pp-ws-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-block:1px solid var(--pp-line)}
.omt.omt .pp-ws{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,34px) clamp(18px,2.2vw,32px) clamp(24px,2.6vw,36px);
  border-inline-start:1px solid var(--pp-line);overflow:hidden;isolation:isolate;transition:background-color .4s}
.omt.omt .pp-ws:first-child{border-inline-start:0}
.omt.omt .pp-ws::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(90% 70% at 50% 0%,rgba(146,70,245,.22),transparent 70%);transition:opacity .6s var(--mo-ease)}
.omt.omt .pp-ws:hover::before{opacity:1}
.omt.omt .pp-ws.is-live{box-shadow:inset 0 0 0 1.5px rgba(212,23,122,.7)}
.omt.omt .pp-ws.is-flash,.omt.omt .pp-item.is-flash .pp-head{animation:omt-pgFlash 1.8s var(--mo-ease)}
@keyframes omt-pgFlash{0%,100%{background-color:transparent}25%{background-color:rgba(34,227,245,.16)}}
.omt.omt .pp-ws-n{position:absolute;top:clamp(10px,1.4vw,18px);inset-inline-end:clamp(14px,1.8vw,26px);z-index:-1;font-size:clamp(56px,5.6vw,92px);font-weight:600;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 22%,transparent);transition:-webkit-text-stroke-color .5s}
.omt.omt .pp-ws:hover .pp-ws-n{-webkit-text-stroke-color:rgba(34,227,245,.55)}
.omt.omt .pp-ws-t{margin:2px 0 0;padding-inline-end:clamp(40px,4vw,70px);font-size:clamp(18px,1.4vw,22px);font-weight:800;line-height:1.45;color:var(--ink)}
[dir="rtl"] .omt.omt .pp-ws-t{line-height:1.7}
.omt.omt .pp-ws-d{margin:0;font-size:15px;line-height:1.75;color:var(--ink-2)}
.omt.omt .pp-ws-who{display:grid;gap:6px;margin-top:auto;padding-top:10px}
.omt.omt .pp-who-lg .pp-av{width:64px;height:64px}

/* ------------------------------------------------------------- the panel */
.omt.omt .pp-drawer{position:fixed;inset:0;margin:auto;width:min(860px,calc(100vw - 32px));max-width:none;height:fit-content;max-height:min(88dvh,820px);padding:0;border:0;border-radius:30px;
  color:var(--ink);background:linear-gradient(160deg,#241473 0%,#1A0F5A 55%,#140B48 100%);overflow:auto;overscroll-behavior:contain;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 120px -30px rgba(5,2,30,.95),0 0 90px -20px rgba(110,75,255,.45);
  opacity:0;transform:translateY(26px) scale(.94);
  transition:opacity .45s var(--mo-ease),transform .6s cubic-bezier(.2,.9,.25,1.08),display .6s allow-discrete,overlay .6s allow-discrete}
.omt.omt .pp-drawer[open]{opacity:1;transform:none}
@starting-style{.omt.omt .pp-drawer[open]{opacity:0;transform:translateY(26px) scale(.94)}}
/* the page behind goes soft and dim */
.omt.omt .pp-drawer::backdrop{background:rgba(10,5,40,.42);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);opacity:0;
  transition:opacity .5s,display .5s allow-discrete,overlay .5s allow-discrete}
.omt.omt .pp-drawer[open]::backdrop{opacity:1}
@starting-style{.omt.omt .pp-drawer[open]::backdrop{opacity:0}}
html[data-omt-theme="light"] .omt.omt .pp-drawer{background:#FFFFFF;box-shadow:0 0 0 1px rgba(60,25,120,.08),0 50px 120px -40px rgba(45,20,95,.5)}
html[data-omt-theme="light"] .omt.omt .pp-drawer::backdrop{background:rgba(241,239,248,.45)}
/* the speaker standing in the nucleus beside their details */
.omt.omt .pp-dr-in{position:relative;display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);grid-auto-rows:min-content;column-gap:clamp(22px,3vw,40px);
  padding:clamp(26px,3vw,40px) clamp(24px,3.4vw,44px) clamp(28px,3vw,40px)}
.omt.omt .pp-dr-in>*{grid-column:2}
.omt.omt .pp-dr-x{position:absolute;top:16px;inset-inline-end:16px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent);transition:background-color .3s,transform .4s var(--mo-ease)}
.omt.omt .pp-dr-x:hover{background:#22E3F5;color:#0B0526;transform:rotate(90deg)}
.omt.omt .pp-dr-x svg{width:20px;height:20px}
.omt.omt .pp-dr-face{grid-column:1;grid-row:1 / span 12;align-self:start;position:sticky;top:0;width:100%;aspect-ratio:4 / 5;margin:0;isolation:isolate}
.omt.omt .pp-drawer[open] .pp-dr-face{animation:omt-ppRise .8s cubic-bezier(.2,.9,.25,1.05) .08s both}
@keyframes omt-ppRise{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.omt.omt .pp-dr-n{padding-inline-end:52px}
.omt.omt .pp-dr-n{margin:6px 0 0;font-size:clamp(23px,2.2vw,30px);font-weight:800;line-height:1.3}
.omt.omt .pp-dr-p{margin:8px 0 0;font-size:16px;font-weight:700;color:var(--ink-2)}
.omt.omt .pp-dr-o{margin:4px 0 0;font-size:15px;color:var(--ink-3)}
.omt.omt .pp-dr-b{margin:18px 0 0;font-size:15.5px;line-height:1.8;color:var(--ink-2)}
.omt.omt .pp-dr-li{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;
  color:var(--ink);box-shadow:inset 0 0 0 1px var(--border-mid);transition:background-color .3s,color .3s}
.omt.omt .pp-dr-li:hover{background:#0A66C2;color:#FFFFFF;box-shadow:none}
.omt.omt .pp-dr-li svg{width:18px;height:18px}
.omt.omt .pp-dr-h{margin:30px 0 10px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#22E3F5}
html[data-omt-theme="light"] .omt.omt .pp-dr-h{color:#6E2BD9}
[dir="rtl"] .omt.omt .pp-dr-h{letter-spacing:0;font-size:14px}
.omt.omt .pp-dr-a{display:grid;gap:4px}
.omt.omt .pp-dr-a button{display:grid;gap:4px;width:100%;padding:14px 16px;border-radius:16px;text-align:start;border-inline-start:3px solid transparent;
  background:color-mix(in srgb,var(--ink) 4%,transparent);transition:background-color .3s,border-color .3s}
.omt.omt .pp-dr-a button:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);border-inline-start-color:#22E3F5}
.omt.omt .pp-dr-a .k{font-size:12.5px;font-weight:800;color:#22E3F5}
html[data-omt-theme="light"] .omt.omt .pp-dr-a .k{color:#6E2BD9}
.omt.omt .pp-dr-a .t{font-size:15.5px;font-weight:800;line-height:1.45;color:var(--ink)}
.omt.omt .pp-dr-a .s{font-size:14px;line-height:1.55;color:var(--ink-2)}
.omt.omt .pp-dr-a .m{font-size:13px;color:var(--ink-3)}
html:has(.pp-drawer[open]){overflow:hidden}

/* ---------------------------------------------------------------- phones */
@media (max-width:1100px){
  .omt.omt .pp-ws-row{grid-template-columns:repeat(min(var(--n),2),minmax(0,1fr))}
  .omt.omt .pp-ws:nth-child(odd){border-inline-start:0}
  .omt.omt .pp-ws:nth-child(n+3){border-top:1px solid var(--pp-line)}
}
@media (max-width:760px){
  .omt.omt.omt-program{--pp-bar-h:66px}
  .omt.omt .pp-hero{display:block;min-height:0;padding:0 0 clamp(40px,8vw,56px)}
  .omt.omt .pp-hero-bg{position:relative;inset:auto;z-index:0;height:min(70vw,420px);margin-top:var(--head-h-c)}
  .omt.omt .pp-hero-ov,[dir="rtl"] .omt.omt .pp-hero-ov,html[data-omt-theme="light"] .omt.omt .pp-hero-ov,html[data-omt-theme="light"][dir="rtl"] .omt.omt .pp-hero-ov{
    background:linear-gradient(180deg,rgba(18,10,66,.25) 0%,transparent 35%,rgba(18,10,66,.2) 60%,#120A42 100%)}
  .omt.omt .pp-glow{display:none}
  .omt.omt .pp-hero-in{margin-top:-30px}
  .omt.omt .pp-title{font-size:clamp(36px,10vw,52px)}
  .omt.omt .pp-stats li{min-width:0;padding-inline:12px}
  .omt.omt .pp-stats b{font-size:30px}
  .omt.omt .pp-stats span{font-size:12px}
  /* the faces row always fits the phone's width: the faces shrink with it and overlap a little more */
  .omt.omt .pp-faces{max-width:100%}
  .omt.omt .pp-faces .pp-av{--av:clamp(26px,calc((100vw - 96px) / 9.2),40px);width:var(--av);height:var(--av);margin-inline-start:calc(var(--av) * -.36);box-shadow:0 0 0 2px #1B0F58}
  .omt.omt .pp-faces-more{margin-inline-start:8px;font-size:12.5px}
  .omt.omt .pp-bar{padding-block:8px;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--pp-deep)}
  .omt.omt .pp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;padding:5px}
  .omt.omt .pp-tab{flex-direction:column;gap:3px;padding:9px 4px;font-size:13px;white-space:normal;text-align:center;line-height:1.25}
  .omt.omt .pp-tab svg{width:19px;height:19px}
  .omt.omt .pp-tab em{display:none}
  .omt.omt .pp-tab-ind{top:5px;bottom:5px}
  .omt.omt .pp-people{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
  .omt.omt .pp-name{font-size:15.5px}
  .omt.omt .pp-pos{font-size:13px}
  .omt.omt .pp-org{font-size:12.5px}
  .omt.omt .pp-ctry{font-size:12px}
  .omt.omt .pp-days{gap:4px;padding:4px;border-radius:20px}
  .omt.omt .pp-day{padding:10px 4px}
  .omt.omt .pp-day b{font-size:14px}
  .omt.omt .pp-day span{font-size:11.5px}
  .omt.omt .pp-day .pp-wd{display:block}
  .omt.omt .pp-day em{display:none}
  .omt.omt .pp-item{grid-template-columns:minmax(0,1fr)}
  .omt.omt .pp-time{display:flex;align-items:baseline;gap:8px;padding:18px 0 0;text-align:start}
  .omt.omt .pp-time span::before{content:"– "}
  .omt.omt .pp-time time{font-size:17px}
  .omt.omt .pp-body{border:0;padding:0}
  .omt.omt .pp-body::before{display:none}
  .omt.omt .pp-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k chev" "h chev" "stack stack";padding:16px;margin:8px 0 0;
    background:color-mix(in srgb,var(--ink) 4%,transparent)}
  .omt.omt .pp-stack{padding:4px 0 0}
  .omt.omt .pp-stack .pp-av{width:36px;height:36px}
  .omt.omt .pp-talks{padding:4px 6px 14px}
  .omt.omt .pp-x-d{padding:6px 6px 4px;font-size:15px}
  .omt.omt .pp-x-d:last-child{padding-bottom:14px}
  .omt.omt .pp-talk{gap:4px 8px}
  .omt.omt .pp-av{width:46px;height:46px}
  .omt.omt .pp-ws-row{grid-template-columns:minmax(0,1fr);border-bottom:0}
  .omt.omt .pp-ws{border-inline-start:0;border-bottom:1px solid var(--pp-line);padding-inline:2px}
  .omt.omt .pp-ws:nth-child(n+3){border-top:0}
  .omt.omt .pp-ws-n{font-size:52px}
  .omt.omt .pp-drawer{width:calc(100vw - 24px);max-height:86dvh;border-radius:26px}
  .omt.omt .pp-dr-in{grid-template-columns:minmax(0,1fr);padding:22px 20px 26px}
  .omt.omt .pp-dr-in>*{grid-column:1}
  .omt.omt .pp-dr-face{grid-row:auto;position:relative;width:min(190px,56%);margin:0 auto 6px}
  .omt.omt .pp-dr-n,.omt.omt .pp-dr-p,.omt.omt .pp-dr-o,.omt.omt .pp-dr-k{text-align:center;padding-inline-end:0}
}
/* phones and touch screens: the wall stands still, nothing glows on a loop */
@media (hover:none),(max-width:760px),(prefers-reduced-motion:reduce){
  .omt.omt .pp-glow{animation:none}
}


/* ---- exhibitors.css ---- */
/* OMAINTEC 2027 — Exhibitors page (.omt-exh, inside .omt-expo so it takes the
   FAM Expo mark's colours): an opening on a still of the hall, then one wall of
   logos, all on plates of the same size, with a search; a logo opens its panel. */

/* ---------------------------------------------------------------- opening */
.omt.omt .xh-hero{--ink:#FFFFFF;--ink-2:#DCE6FA;--ink-3:#A9B4E0;--border-mid:rgba(255,255,255,.2);position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--head-h, 96px) + clamp(40px,5vw,70px)) 0 clamp(48px,5.4vw,80px);color:#FFFFFF;background:var(--fx-deep)}
.omt.omt .xh-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.omt.omt .xh-hero-bg .ex-film{opacity:.5}
.omt.omt .xh-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,8,39,.55) 0%,rgba(11,8,39,.78) 60%,var(--fx-deep) 100%)}
.omt.omt .xh-hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.4vw,18px)}
.omt.omt .xh-mark{display:block;height:clamp(54px,5.4vw,84px);width:auto;max-width:100%}
.omt.omt .xh-title{margin:0;font-size:clamp(40px,5.2vw,82px)}
.omt.omt .xh-intro{margin:0;max-width:60ch;font-size:clamp(16px,1.3vw,20px);line-height:1.75;color:#D9D4F5;text-wrap:pretty}

/* ------------------------------------------------------------------- body */
.omt.omt .xh-body{padding-block:clamp(40px,4.6vw,72px) clamp(64px,7vw,110px)}
.omt.omt .xh-tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;min-width:0;max-width:100%;margin-bottom:clamp(26px,3vw,40px)}
.omt.omt .xh-body .wrap{min-width:0}
.omt.omt .xh-search{position:relative;display:flex;align-items:center;flex:1 1 280px;max-width:440px;min-height:52px;padding-inline:16px;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 6%,transparent);box-shadow:inset 0 0 0 1px var(--border-mid);color:var(--ink-3)}
.omt.omt .xh-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--fx-cyan)}
.omt.omt .xh-search svg{flex:none;width:20px;height:20px}
/* the note beside the search: a press on any logo shows its details */
.omt.omt .xh-hint{display:flex;align-items:center;gap:20px;margin:0;padding-inline-start:12px;font-size:15px;font-weight:600;line-height:1.6;color:var(--ink-2)}
/* a calm, endless pulse around its icon so the eye finds it (user, 2026-10-21) */
.omt.omt .xh-hint-i{position:relative;display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;
  color:var(--fx-cyan);background:color-mix(in srgb,var(--fx-cyan) 14%,transparent)}
.omt.omt .xh-hint-i svg{width:20px;height:20px}
.omt.omt .xh-hint-i::before,.omt.omt .xh-hint-i::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px currentColor;opacity:0;pointer-events:none;
  animation:omt-xh-ping 2.8s cubic-bezier(.22,.61,.36,1) infinite}
.omt.omt .xh-hint-i::after{animation-delay:1.4s}
@keyframes omt-xh-ping{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.85);opacity:0}}
html[data-omt-theme="light"] .omt.omt .xh-hint-i{color:#1A8FC9}
.omt.omt .xh-search input{flex:1;min-width:0;height:50px;padding-inline:12px 4px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15.5px;outline:none;text-overflow:ellipsis}
/* the wall: each logo on its plate (its background from the workbook), every plate the same
   size (user, 2026-10-21); under it the name, centred, then the booth */
.omt.omt .xh-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:clamp(16px,1.8vw,26px)}
.omt.omt .xh-card{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;height:100%;padding:0;border:0;background:none;text-align:center;cursor:pointer;color:inherit;font:inherit}
.omt.omt .xh-plate{display:flex;align-items:center;justify-content:center;height:clamp(120px,10vw,150px);padding:20px 24px;border-radius:20px;background:var(--bg,#FFFFFF);
  box-shadow:0 18px 40px -26px rgba(8,4,32,.65),inset 0 0 0 1px rgba(19,11,66,.07);transition:transform .45s var(--mo-ease),box-shadow .45s var(--mo-ease)}
.omt.omt .xh-plate img{display:block;width:auto;max-width:100%;height:calc(clamp(40px,3.4vw,54px) * var(--k,1));max-height:100%;object-fit:contain}
.omt.omt .xh-noimg{font-size:18px;font-weight:800;color:#130B42;text-align:center}
.omt.omt .xh-card:hover .xh-plate,.omt.omt .xh-card:focus-visible .xh-plate{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(76,198,245,.55),inset 0 0 0 1px rgba(19,11,66,.1)}
.omt.omt .xh-card:focus-visible{outline:none}
.omt.omt .xh-card:focus-visible .xh-plate{outline:2px solid var(--fx-cyan);outline-offset:3px}
.omt.omt .xh-name{padding-inline:4px;font-size:clamp(15.5px,1.1vw,17px);font-weight:800;line-height:1.45;color:var(--ink);text-wrap:balance}
.omt.omt .xh-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;padding-inline:4px;font-size:13.5px;color:var(--ink-3)}
.omt.omt .xh-booth{display:inline-flex;align-items:baseline;gap:4px;padding:2px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--border-mid)}
.omt.omt .xh-booth b{font-weight:700;color:var(--fx-cyan)}
html[data-omt-theme="light"] .omt.omt .xh-booth b{color:#1A8FC9}
.omt.omt .xh-i[hidden]{display:none}
.omt.omt .xh-empty{margin:24px 0 0;font-size:16px;color:var(--ink-3)}

/* ------------------------------------------------------------------ panel */
.omt.omt .xh-drawer{width:min(720px,calc(100vw - 32px))}
.omt.omt .xh-dr-in{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,40px)}
.omt.omt .xh-drawer .pp-dr-x{z-index:2}
.omt.omt .xh-dr-plate{display:flex;align-items:center;justify-content:center;height:clamp(140px,16vw,190px);margin:max(34px,calc(70px - clamp(24px,3vw,40px))) 0 8px;padding:24px 32px;border-radius:22px;background:var(--bg,#FFFFFF)}
.omt.omt .xh-dr-plate img{display:block;width:auto;max-width:100%;max-height:100%;height:clamp(64px,7vw,92px);object-fit:contain}
.omt.omt .xh-dr-n{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:800;line-height:1.4}
.omt.omt .xh-dr-b{margin:0;font-size:15px;color:#D9D4F5}
.omt.omt .xh-dr-b span{display:inline-flex;align-items:center;gap:6px}
.omt.omt .xh-dr-b svg{width:18px;height:18px}
.omt.omt .xh-dr-b b{color:#FFFFFF}
.omt.omt .xh-dr-d{margin:4px 0 0;font-size:16px;line-height:1.85;color:#D9D4F5;white-space:pre-line}
.omt.omt .xh-dr-go{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.omt.omt .xh-dr-go .btn{min-width:0}
.omt.omt .xh-dr-go [hidden],.omt.omt .xh-dr-b[hidden],.omt.omt .xh-dr-d[hidden]{display:none}
/* the panel is white in the light theme */
html[data-omt-theme="light"] .omt.omt .xh-dr-b,html[data-omt-theme="light"] .omt.omt .xh-dr-d{color:var(--ink-2)}
html[data-omt-theme="light"] .omt.omt .xh-dr-b b{color:var(--ink)}
html[data-omt-theme="light"] .omt.omt .xh-dr-plate{box-shadow:inset 0 0 0 1px rgba(19,11,66,.08)}

@media (max-width:640px){
  .omt.omt .xh-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .omt.omt .xh-plate{height:104px;padding:14px 16px;border-radius:16px}
  .omt.omt .xh-plate img{height:calc(32px * var(--k,1))}
  .omt.omt .xh-tools{flex-direction:column;align-items:stretch}
  .omt.omt .xh-hint{gap:14px;padding-inline-start:6px;font-size:14.5px}
  .omt.omt .xh-search{flex:none;max-width:none}   /* in a column the 280px basis would become its height */
  .omt.omt .xh-dr-go .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .omt.omt .xh-plate{transition:none}
  .omt.omt .xh-hint-i::before,.omt.omt .xh-hint-i::after{animation:none}
}


/* ---- footer.css ---- */
/* =================================== FOOTER ===================================
   The site footer (Header & Footer Builder template → [omaintec_footer]).
   Follows the site theme. In light, the colour logos replace the white ones
   (white ones without a colour file are darkened). Layout:

     partners   strategic on its own line, then main · professional · training
                side by side, the collaborators as an even field of marks,
                and organised-by / executed-by closing the block
     main       lockup + theme + social · quick links · venue with its map
     bar        copyright and licence · privacy

   The partner tiers follow whatever Elementor holds: any count, centred,
   wrapping. */

.omt.omt .ft{
  --ink:#FFFFFF;--ink-2:#D6C6F2;--ink-3:#A98FD8;--cyan:#22E3F5;--line:rgba(255,255,255,.12);
  position:relative;color:var(--ink);
  background:linear-gradient(180deg,#1E1360 0%,#170D4C 46%,#120A3C 100%);
}
/* two blocks in WordPress — the partners widget, then [omaintec_footer] —
   so the one gradient is shared between them and meets at #190E52 */
.omt.omt .ft--partners{background:linear-gradient(180deg,#1E1360 0%,#190E52 100%)}
.omt.omt .ft--main{background:linear-gradient(180deg,#190E52 0%,#120A3C 100%)}
.omt.omt .ft--partners::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan) 60%,transparent),transparent)}

/* ---------------------------------------------------------------- partners */
.omt.omt .ft-partners{padding-block:clamp(52px,6vw,84px) clamp(40px,4.6vw,64px)}
.omt.omt .ft-partners .wrap{display:grid;gap:clamp(40px,4.6vw,64px)}
.omt.omt .ft-tier{display:grid;justify-items:center;gap:clamp(18px,2vw,26px)}
/* any tier without its own size below (a new tier from the Sponsors sheet, or gold / silver /
   diamond / exec alone on a line) gets the shared-line size, never the file's own pixel size;
   it comes first so every tier rule below still wins */
.omt.omt .ft-tier .ft-logo img{height:calc(clamp(46px,4.2vw,60px) * var(--k,1))}
.omt.omt .ft-label{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;
  font-size:clamp(12px,.92vw,13.5px);font-weight:700;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
[dir="rtl"] .omt.omt .ft-label{letter-spacing:0;text-transform:none;font-size:clamp(14px,1.05vw,16px)}
.omt.omt .ft-label::before,.omt.omt .ft-label::after{content:"";height:1px;width:clamp(24px,3.4vw,56px);flex:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan) 70%,transparent))}
.omt.omt .ft-label::after{transform:scaleX(-1)}
/* the second line under a label ("Organizational Partner") and the joiner
   between two logos ("In Partnership with") take the brand's violet-pink */
.omt.omt .ft-sub{margin:calc(-1 * clamp(18px,2vw,26px) + 4px) 0 0;font-size:12.5px;font-weight:600;color:#E36BF0}
.omt.omt .ft-with{margin:0;white-space:nowrap;text-align:center;font-size:12.5px;font-weight:600;line-height:1.5;color:#E36BF0}
[dir="rtl"] .omt.omt .ft-sub,[dir="rtl"] .omt.omt .ft-with{font-size:13.5px}
/* organiser, joiner and partner on one line */
.omt.omt .ft-pair{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:12px clamp(16px,2vw,28px)}
.omt.omt .ft-pair .ft-logo img{height:clamp(44px,3.9vw,56px)}
/* SAFMMA's tall emblem reads smaller than the council's long word mark at one
   height: taller by the same factor as on the FAM Expo opening (omt_logo_weights) */
.omt.omt .ft-pair .ft-logo-safmma img,.omt.omt .ft-row-org .ft-pair .ft-logo-safmma img{height:calc(clamp(46px,4.2vw,60px) * 1.33)}
/* "start a new line": a zero-height full-width item; it pulls back the row
   gap it would otherwise add */
.omt.omt .ft-logos{--rg:clamp(18px,2vw,26px)}
.omt.omt .ft-break{flex-basis:100%;height:0;margin-block-start:calc(-1 * var(--rg))}

.omt.omt .ft-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--rg) clamp(30px,3.6vw,56px);margin:0;padding:0;list-style:none}
.omt.omt .ft-logo{display:flex;align-items:center;justify-content:center;line-height:0}
.omt.omt .ft-logo a,.omt.omt .ft-logo span{display:block;line-height:0;opacity:.92;transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.3,1)}
.omt.omt .ft-logo a:hover{opacity:1;transform:translateY(-2px)}
.omt.omt .ft-logo a:focus-visible{outline:2px solid var(--cyan);outline-offset:8px;border-radius:6px}
.omt.omt .ft-logo img{display:block;width:auto;max-width:none;object-fit:contain}

/* sizes by tier: the strategic line leads, collaborators sit quieter */
/* each logo's height is scaled by --k (its shape: omt_logo_weights / footer.mjs), so a
   round emblem and a long word mark read the same size; the strategic line leads */
.omt.omt .ft-tier-strategic .ft-logo img{height:calc(clamp(64px,5.6vw,88px) * var(--k,1));max-width:100%}
/* no width cap here: a capped logo kept its box and sat off its label's centre */
.omt.omt .ft-row-2 .ft-logo img,.omt.omt .ft-row-org .ft-logo img{height:calc(clamp(46px,4.2vw,60px) * var(--k,1));max-width:100%}
/* the Saudi Energy mark carries its wordmark small under it: give it room */
.omt.omt .ft-tier-main .ft-logo-se img{height:clamp(80px,7vw,104px)}
.omt.omt .ft-tier-collab .ft-logos{--rg:clamp(22px,2.4vw,34px);column-gap:clamp(26px,3vw,46px);max-width:1060px}
.omt.omt .ft-tier-collab .ft-logo img{height:calc(clamp(34px,3vw,44px) * var(--k,1));max-width:min(100%,180px);opacity:.88;transition:opacity .3s}
.omt.omt .ft-tier-collab .ft-logo a:hover img{opacity:1}

/* main · professional · training side by side, organised / executed under */
.omt.omt .ft-row{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));align-items:start;width:100%;margin-inline:auto}
.omt.omt .ft-row-2{max-width:760px}
.omt.omt .ft-row-org{max-width:1160px;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.omt.omt .ft-row > .ft-tier{position:relative;padding-inline:clamp(12px,2vw,28px)}
.omt.omt .ft-row > .ft-tier + .ft-tier::before{content:"";position:absolute;inset-inline-start:0;top:8%;height:84%;width:1px;
  background:linear-gradient(transparent,var(--line),transparent)}

/* ------------------------------------------------------------------- main */
.omt.omt .ft-main{border-top:1px solid var(--line)}
.omt.omt .ft-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);
  padding-block:clamp(44px,5vw,68px)}
.omt.omt .ft-lockup{display:inline-block;line-height:0}
.omt.omt .ft-lockup img{height:clamp(46px,4vw,58px);width:auto;max-width:none}
/* the white logo on the dark footer; the official colour (gradient) logo in the light theme (user, 2026-10-21) */
.omt.omt .ft-lockup .ft-lk-l{display:none}
html[data-omt-theme="light"] .omt.omt .ft-lockup .ft-lk-d{display:none}
html[data-omt-theme="light"] .omt.omt .ft-lockup .ft-lk-l{display:block}
.omt.omt .ft-theme{margin:18px 0 22px;max-width:40ch;font-size:15px;line-height:1.75;color:var(--ink-2)}
[dir="rtl"] .omt.omt .ft-theme{line-height:1.9}
.omt.omt .ft-theme span{display:block;margin-bottom:4px;font-size:13px;font-weight:700;color:var(--cyan)}
.omt.omt .ft-social{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.omt.omt .ft-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink);
  border:1px solid var(--line);background:rgba(255,255,255,.04);transition:background .3s,border-color .3s,color .3s,transform .3s}
.omt.omt .ft-social a:hover{background:var(--cyan);border-color:var(--cyan);color:#0B0526;transform:translateY(-2px)}
.omt.omt .ft-social a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.omt.omt .ft-social svg{width:18px;height:18px}

.omt.omt .ft-h{margin:6px 0 16px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
[dir="rtl"] .omt.omt .ft-h{letter-spacing:0;font-size:15px}
.omt.omt .ft-links ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:0;padding:0;list-style:none}
.omt.omt .ft-links a{position:relative;font-size:15px;color:var(--ink-2);text-decoration:none;transition:color .25s}
.omt.omt .ft-links a::before{content:"";display:inline-block;width:5px;height:5px;margin-inline-end:9px;vertical-align:middle;border-radius:50%;
  background:color-mix(in srgb,var(--cyan) 55%,transparent);transition:background .25s}
.omt.omt .ft-links a:hover{color:#FFFFFF}
.omt.omt .ft-links a:hover::before{background:var(--cyan)}
.omt.omt .ft-links a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

.omt.omt .ft-place{margin:0 0 14px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.omt.omt .ft-map{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16 / 9;background:#1E1360}
.omt.omt .ft-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:invert(.92) hue-rotate(180deg) saturate(.55) brightness(.92) contrast(.95)}
.omt.omt .ft-map::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(70,40,170,.22);mix-blend-mode:color}

/* -------------------------------------------------------------------- bar */
.omt.omt .ft-bar{border-top:1px solid var(--line)}

/* back to top: bottom corner on the reading end (right in English, left in
   Arabic), in the brand's blue like the main buttons. It shows once the page
   has been scrolled, its ring fills with how far down the page is, and every
   5 s it pulses softly (a ring swells out and fades) to be noticed */
.omt.omt .to-top{position:fixed;z-index:990;inset-inline-end:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);
  width:54px;height:54px;padding:0;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  color:#0B0526;background:linear-gradient(145deg,#22E3F5 0%,#03BDEE 55%,#0A9FD6 100%);
  box-shadow:0 12px 30px -10px rgba(3,189,238,.75),0 0 0 1px rgba(255,255,255,.25) inset;
  opacity:0;visibility:hidden;translate:0 14px;
  transition:opacity .45s var(--mo-ease),translate .45s var(--mo-ease),visibility 0s linear .45s,box-shadow .3s,filter .3s}
.omt.omt .to-top.is-on{opacity:1;visibility:visible;translate:0 0;transition:opacity .45s var(--mo-ease),translate .45s var(--mo-ease),box-shadow .3s,filter .3s;
  animation:omt-topBump 5s cubic-bezier(.33,0,.2,1) 1.2s infinite}
.omt.omt .to-top::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #22E3F5;opacity:0;pointer-events:none}
.omt.omt .to-top.is-on::after{animation:omt-topPulse 5s cubic-bezier(.2,.6,.3,1) 1.2s infinite}
.omt.omt .to-top:hover{filter:brightness(1.08);box-shadow:0 14px 34px -10px rgba(3,189,238,.95),0 0 0 1px rgba(255,255,255,.35) inset}
.omt.omt .to-top:hover .to-top-arw{translate:0 -3px}
.omt.omt .to-top:active{scale:.94}
.omt.omt .to-top:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.omt.omt .to-top-ring{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);rotate:-90deg}
.omt.omt .to-top-ring circle{fill:none;stroke:rgba(11,5,38,.16);stroke-width:2.2}
.omt.omt .to-top-ring .to-top-p{stroke:#1B105F;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0) * 100);transition:stroke-dashoffset .15s linear}
.omt.omt .to-top-arw{position:relative;width:21px;height:21px;transition:translate .3s var(--mo-ease)}
/* WhatsApp, in the same corner under the back-to-top button; on hover a
   label slides out beside it */
.omt.omt .wa-float{position:fixed;z-index:991;inset-inline-end:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#FFFFFF;background:#25D366;
  box-shadow:0 12px 28px -10px rgba(18,140,70,.75),0 0 0 1px rgba(255,255,255,.25) inset;text-decoration:none;
  transition:filter .3s,box-shadow .3s,scale .3s var(--mo-ease)}
.omt.omt .wa-float svg{width:28px;height:28px}
.omt.omt .wa-float:hover{filter:brightness(1.06);box-shadow:0 14px 32px -10px rgba(18,140,70,.95),0 0 0 1px rgba(255,255,255,.35) inset}
.omt.omt .wa-float:active{scale:.94}
.omt.omt .wa-float:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.omt.omt .wa-tip{position:absolute;inset-inline-end:calc(100% + 10px);top:50%;translate:0 -50%;white-space:nowrap;
  padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700;color:#0B3D22;background:#FFFFFF;
  box-shadow:0 8px 22px -10px rgba(8,4,32,.5);opacity:0;scale:.92;pointer-events:none;transition:opacity .3s,scale .3s var(--mo-ease)}
.omt.omt .wa-float:hover .wa-tip,.omt.omt .wa-float:focus-visible .wa-tip{opacity:1;scale:1}
/* the back-to-top button sits above it */
.omt.omt .to-top{bottom:calc(clamp(14px,2vw,28px) + 54px + 12px)}
@media (max-width:640px){.omt.omt .wa-float{width:50px;height:50px}.omt.omt .wa-float svg{width:26px;height:26px}.omt.omt .wa-tip{display:none}
  .omt.omt .to-top{bottom:calc(clamp(14px,2vw,28px) + 50px + 10px)}}
@keyframes omt-topPulse{0%{transform:scale(1);opacity:.75}28%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
@keyframes omt-topBump{0%,16%,100%{transform:scale(1)}6%{transform:scale(1.07)}}
html[data-omt-theme="light"] .omt.omt .to-top{color:#FFFFFF;background:linear-gradient(145deg,#03BDEE 0%,#0693B8 100%);box-shadow:0 12px 28px -10px rgba(6,147,184,.6)}
html[data-omt-theme="light"] .omt.omt .to-top::after{border-color:#03BDEE}
html[data-omt-theme="light"] .omt.omt .to-top-ring circle{stroke:rgba(255,255,255,.3)}
html[data-omt-theme="light"] .omt.omt .to-top-ring .to-top-p{stroke:#FFFFFF}
@media (max-width:640px){.omt.omt .to-top{width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.omt.omt .to-top,.omt.omt .to-top.is-on{transition:opacity .2s linear,visibility 0s;animation:none}.omt.omt .to-top{translate:none}.omt.omt .to-top.is-on::after{animation:none}}
.omt.omt .ft-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:18px}
.omt.omt .ft-bar p{margin:0;font-size:13px;color:var(--ink-3)}
.omt.omt .ft-copy span{white-space:nowrap}
.omt.omt .ft-copy span+span::before{content:"|";margin-inline:.65em;opacity:.55}
.omt.omt .ft-bar a{font-size:13px;color:var(--ink-2);text-decoration:none}
.omt.omt .ft-bar a:hover{color:#FFFFFF}

/* ------------------------------------------------------------- responsive */
@media (max-width:980px){
  .omt.omt .ft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .omt.omt .ft-brand{grid-column:1 / -1}
}
@media (max-width:640px){
  .omt.omt .ft-row,.omt.omt .ft-row-org{grid-template-columns:minmax(0,1fr);gap:36px}
  /* organiser, "in partnership with", partner: one above the other */
  .omt.omt .ft-pair{flex-direction:column;gap:12px}
  .omt.omt .ft-with{max-width:none}
  .omt.omt .ft-row > .ft-tier + .ft-tier::before{inset-inline:20%;top:-18px;height:1px;width:auto;
    background:linear-gradient(90deg,transparent,var(--line),transparent)}
  .omt.omt .ft-tier-collab .ft-logos{--rg:20px;column-gap:26px}
  .omt.omt .ft-tier-collab .ft-logo img{height:calc(32px * var(--k,1));max-width:130px}
  .omt.omt .ft-tier-strategic .ft-logo img{height:calc(60px * var(--k,1))}
  /* collaborators flow in even rows on a phone (the desktop line breaks would leave doubled gaps) */
  .omt.omt .ft-tier-collab .ft-break{display:none}
  .omt.omt .ft-bar .wrap{flex-direction:column}
  /* the licence line: each part on its own line, no separators left hanging */
  .omt.omt .ft-copy{display:flex;flex-direction:column;align-items:center;gap:2px}
  .omt.omt .ft-copy span+span::before{display:none}
  .omt.omt .ft-grid{grid-template-columns:minmax(0,1fr)}
  .omt.omt .ft-bar .wrap{justify-content:center;text-align:center}
}

/* ---------------------------------------------------------- logo versions */
.omt.omt .ft-logo .ft-l{display:none}
/* ------------------------------------------------------------ light theme */
html[data-omt-theme="light"] .omt.omt .ft{
  --ink:#130B42;--ink-2:#3B2A6E;--ink-3:#6B5B96;--cyan:#0693B8;--line:rgba(59,43,146,.14);
  background:linear-gradient(180deg,#F6F4FC 0%,#EFEBF9 50%,#E7E1F5 100%);
}
html[data-omt-theme="light"] .omt.omt .ft--partners{background:linear-gradient(180deg,#F6F4FC 0%,#EFEBF9 100%)}
html[data-omt-theme="light"] .omt.omt .ft--main{background:linear-gradient(180deg,#EFEBF9 0%,#E7E1F5 100%)}
html[data-omt-theme="light"] .omt.omt .ft--partners::before{background:linear-gradient(90deg,transparent,rgba(59,43,146,.35),transparent)}
html[data-omt-theme="light"] .omt.omt .ft-logo .ft-d:not(.ft-auto){display:none}
html[data-omt-theme="light"] .omt.omt .ft-logo .ft-l{display:block}
html[data-omt-theme="light"] .omt.omt .ft-logo a,html[data-omt-theme="light"] .omt.omt .ft-logo span{opacity:1}
html[data-omt-theme="light"] .omt.omt .ft-auto{filter:brightness(0) saturate(100%) invert(8%) sepia(40%) saturate(5000%) hue-rotate(245deg) brightness(.9)}
html[data-omt-theme="light"] .omt.omt .ft-tier-collab .ft-logo img{opacity:1}
html[data-omt-theme="light"] .omt.omt .ft-sub,html[data-omt-theme="light"] .omt.omt .ft-with{color:#A21C93}
html[data-omt-theme="light"] .omt.omt .ft-theme span,html[data-omt-theme="light"] .omt.omt .ft-h{color:#5A2BC4}
html[data-omt-theme="light"] .omt.omt .ft-social a{background:#FFFFFF;border-color:rgba(59,43,146,.18);color:#3B2A6E}
html[data-omt-theme="light"] .omt.omt .ft-social a:hover{background:#3B2B92;border-color:#3B2B92;color:#FFFFFF}
html[data-omt-theme="light"] .omt.omt .ft-links a::before{background:rgba(90,43,196,.5)}
html[data-omt-theme="light"] .omt.omt .ft-links a:hover{color:#130B42}
html[data-omt-theme="light"] .omt.omt .ft-links a:hover::before{background:#5A2BC4}
html[data-omt-theme="light"] .omt.omt .ft-map{background:#FFFFFF}
html[data-omt-theme="light"] .omt.omt .ft-map iframe{filter:saturate(.75) contrast(.98)}
html[data-omt-theme="light"] .omt.omt .ft-map::after{background:rgba(90,43,196,.08)}
html[data-omt-theme="light"] .omt.omt .ft-bar a:hover{color:#130B42}